From 5038971aecf18139f9c4c1e5ea4072de8e785923 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Thu, 22 Aug 2024 13:45:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E5=9B=BE=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/api/index.js                        |   9 +
 src/views/activityList/index.vue              | 114 ++---
 src/views/picReport/components/selectLine.vue |  91 ++++
 src/views/picReport/indexbak.vue              | 395 ++++++++++++++++++
 4 files changed, 562 insertions(+), 47 deletions(-)
 create mode 100644 src/views/picReport/components/selectLine.vue
 create mode 100644 src/views/picReport/indexbak.vue

diff --git a/src/utils/api/index.js b/src/utils/api/index.js
index 31363e3..84794e1 100644
--- a/src/utils/api/index.js
+++ b/src/utils/api/index.js
@@ -245,3 +245,12 @@ export function picRportApi(data) {
     params: data,
   });
 }
+
+//获取所有线路信息
+export function getLineListJoggle(data) {
+  return request({
+    url: "/xymanager/line/listFull",
+    method: "post",
+    data,
+  });
+}
diff --git a/src/views/activityList/index.vue b/src/views/activityList/index.vue
index c082387..1e95997 100644
--- a/src/views/activityList/index.vue
+++ b/src/views/activityList/index.vue
@@ -53,6 +53,22 @@
             {{ scope.row.termCount }}
           </template>
         </el-table-column>
+        <el-table-column prop="lostCount" label="掉线数量">
+          <template slot-scope="scope">
+            {{ scope.row.lostCount }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="lostCount" label="在线率">
+          <template slot-scope="scope">
+            {{
+              (
+                ((scope.row.termCount - scope.row.lostCount) /
+                  scope.row.termCount) *
+                100
+              ).toFixed(2)
+            }}%
+          </template>
+        </el-table-column>
         <!-- <el-table-column prop="path" label="文件路径"> </el-table-column> -->
         <el-table-column label="操作" width="300" class-name="editClass">
           <template slot-scope="scope">
@@ -130,7 +146,12 @@
   </div>
 </template>
 <script>
-import { getActivityApi,addActiveApi,updActiveApi,delActiveApi } from "@/utils/api/index";
+import {
+  getActivityApi,
+  addActiveApi,
+  updActiveApi,
+  delActiveApi,
+} from "@/utils/api/index";
 import htmlToExcel from "@/utils/htmlToExcel";
 import { saveAs } from "file-saver";
 import XLSX from "xlsx";
@@ -145,7 +166,7 @@ export default {
         title: "",
         cmdidArr: "",
       },
-      cmdObjects: [], // 用于存储转换后的对象数组  
+      cmdObjects: [], // 用于存储转换后的对象数组
       titleFlag: false, //title为空
       cmdidFlag: false, //cmdid为空
       termsShow: false,
@@ -163,33 +184,33 @@ export default {
         65285: "河南全景",
         65286: "河南郑州",
         65290: "河南统一视频v2020",
-        65298:"宁夏",
-        2:"南网"
+        65298: "宁夏",
+        2: "南网",
       },
       ActibityId: "", //判断是否是修改
     };
   },
   computed: {},
-  watch: {  
-    'activityForm.cmdidArr': {  
-      handler(newVal) {  
-        // 每当 activityForm.cmdidArr 发生变化时，调用 convertToCmdObjects 方法  
-        this.cmdObjects = this.convertToCmdObjects(newVal);  
-      },  
-      deep: false, // 不需要深度监听，因为我们直接监听的是字符串  
-      immediate: false, // 不需要立即触发一次 handler 函数  
-    },  
-  }, 
+  watch: {
+    "activityForm.cmdidArr": {
+      handler(newVal) {
+        // 每当 activityForm.cmdidArr 发生变化时，调用 convertToCmdObjects 方法
+        this.cmdObjects = this.convertToCmdObjects(newVal);
+      },
+      deep: false, // 不需要深度监听，因为我们直接监听的是字符串
+      immediate: false, // 不需要立即触发一次 handler 函数
+    },
+  },
   mounted() {
     this.getactivityList();
   },
   methods: {
-    convertToCmdObjects(text) {  
-      // 去除文本首尾的空白字符，并按换行符分割成数组  
-      const cmdids = text.trim().split(/\r?\n/);  
-      // 映射每个 cmdid 到一个对象，并返回对象数组  
-      return cmdids.map(cmdid => ({ cmdid }));  
-    }, 
+    convertToCmdObjects(text) {
+      // 去除文本首尾的空白字符，并按换行符分割成数组
+      const cmdids = text.trim().split(/\r?\n/);
+      // 映射每个 cmdid 到一个对象，并返回对象数组
+      return cmdids.map((cmdid) => ({ cmdid }));
+    },
     async handleHeaderClick(column) {
       console.log(column);
       // 获取当前列的数据字段名
@@ -242,18 +263,17 @@ export default {
         })
         .catch((err) => {});
     },
-    
+
     //活动详情
     handleLookClick(row) {
-      console.log(row)
+      console.log(row);
       this.termsShow = true;
       this.termsLoading = true;
-      this.termsData =  row.terms;
+      this.termsData = row.terms;
       this.activityNameTitle = row.title;
-      this.activityName =
-      row.title + "(" + row.terms.length + ")";
-          this.termsData = row.terms;
-     },
+      this.activityName = row.title + "(" + row.terms.length + ")";
+      this.termsData = row.terms;
+    },
     //删除该活动
     handleDeleteClick(row) {
       console.log(row);
@@ -262,7 +282,7 @@ export default {
       })
         .then((res) => {
           console.log(res);
-          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+          this.$confirm("此操作将永久删除该活动, 是否继续?", "提示", {
             confirmButtonText: "确定",
             cancelButtonText: "取消",
             type: "warning",
@@ -271,7 +291,7 @@ export default {
               this.$message({
                 duration: 1500,
                 showClose: true,
-                message: "文件删除成功",
+                message: "活动删除成功",
                 type: "success",
               });
               this.getactivityList();
@@ -316,30 +336,30 @@ export default {
           terms: this.cmdObjects,
         };
         updActiveApi(actParams)
-        .then((res) => {
-          console.log(res);
-          this.getactivityList();
-          this.activityForm.title = "";
-          this.activityForm.cmdidArr = "";
-          this.ActibityId = "";
-        })
-        .catch((err) => {});
+          .then((res) => {
+            console.log(res);
+            this.getactivityList();
+            this.activityForm.title = "";
+            this.activityForm.cmdidArr = "";
+            this.ActibityId = "";
+          })
+          .catch((err) => {});
       } else {
         //新增
-        console.log(this.cmdObjects);  
+        console.log(this.cmdObjects);
         actParams = {
           title: this.activityForm.title,
-          terms: this.cmdObjects, 
+          terms: this.cmdObjects,
         };
         addActiveApi(actParams)
-        .then((res) => {
-          console.log(res);
-          this.getactivityList();
-          this.activityForm.title = "";
-          this.activityForm.cmdidArr = "";
-          this.ActibityId = "";
-        })
-        .catch((err) => {});
+          .then((res) => {
+            console.log(res);
+            this.getactivityList();
+            this.activityForm.title = "";
+            this.activityForm.cmdidArr = "";
+            this.ActibityId = "";
+          })
+          .catch((err) => {});
       }
     },
   },
diff --git a/src/views/picReport/components/selectLine.vue b/src/views/picReport/components/selectLine.vue
new file mode 100644
index 0000000..4b1d00a
--- /dev/null
+++ b/src/views/picReport/components/selectLine.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="lineBtn">
+    <el-button type="primary" @click="dialogVisible = true">选择线路</el-button>
+    <el-dialog title="提示" :visible.sync="dialogVisible" width="1050px">
+      <div class="lineList">
+        <el-checkbox-group v-model="checkList">
+          <el-checkbox
+            v-for="item in lineListData"
+            :label="item.id"
+            :key="item.id"
+            >{{ item.name }}</el-checkbox
+          >
+        </el-checkbox-group>
+        <!-- {{ lineListData }} -->
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveCheck">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { getLineListJoggle } from "@/utils/api/index";
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      checkList: [],
+      lineListData: [],
+      total: 0,
+    };
+  },
+  mounted() {
+    this.lineList();
+    const storedArray = localStorage.getItem("checkListLocal");
+    if (storedArray) {
+      // 将JSON字符串转换回数组
+      this.checkList = JSON.parse(storedArray).map((item) => item.id);
+    }
+  },
+  methods: {
+    lineList() {
+      getLineListJoggle({
+        pageindex: 1,
+        pagesize: 100,
+      })
+        .then((res) => {
+          this.lineListData = res.data.list;
+          this.total = res.data.total;
+        })
+        .catch((err) => {});
+    },
+    saveCheck() {
+      console.log(this.checkList);
+      const filteredItems = this.lineListData.filter((item) =>
+        this.checkList.includes(item.id)
+      );
+      const combinedItems = filteredItems.map((item) => ({
+        photoCount: item.photoCount,
+        photoRate: item.photoRate,
+        id: item.id,
+        dyLevelName: item.dyLevelName,
+        name: item.name,
+      }));
+      // 你可以直接返回combinedItems，或者将其赋值给data中的某个属性
+      console.log(combinedItems);
+      const arrayAsString = JSON.stringify(combinedItems);
+      localStorage.setItem("checkListLocal", arrayAsString);
+      this.dialogVisible = false;
+      this.$parent.getTablefun();
+    },
+  },
+};
+</script>
+<style lang="less">
+.lineBtn {
+  .el-dialog__body {
+    padding: 10px;
+  }
+  .lineList {
+    .el-checkbox-group {
+      .el-checkbox {
+        width: 220px;
+        height: 32px;
+        line-height: 32px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/picReport/indexbak.vue b/src/views/picReport/indexbak.vue
new file mode 100644
index 0000000..33cc4ef
--- /dev/null
+++ b/src/views/picReport/indexbak.vue
@@ -0,0 +1,395 @@
+<template>
+  <div class="picReportClass">
+    <div class="logTitle">
+      <!-- <h3>装置图片报表</h3> -->
+      <el-form :inline="true" :model="formdata" class="demo-form-inline">
+        <el-form-item label="电压" class="dybox">
+          <el-select v-model="formdata.dyId" @change="getSearchxl" filterable>
+            <el-option
+              v-for="item in dyOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="线路" class="xlbox">
+          <el-select v-model="formdata.lineId" filterable @change="getlineNum">
+            <el-option
+              v-for="item in xlOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="应上图数量" class="pambox">
+          <el-input v-model="formdata.picNum" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="正常上图率" class="pambox">
+          <el-input v-model="formdata.norGraphRate" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="开始日期" class="dateclass">
+          <el-date-picker
+            v-model="formdata.starttime"
+            type="datetime"
+            placeholder="开始日期"
+            value-format="timestamp"
+            :picker-options="pickerOptions"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束日期" class="dateclass">
+          <el-date-picker
+            v-model="formdata.endtime"
+            type="datetime"
+            placeholder="结束日期"
+            value-format="timestamp"
+            :picker-options="pickerOptions"
+          >
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <el-button type="primary" @click="onSubmit">查询</el-button>
+      <selectLine></selectLine>
+    </div>
+
+    <div class="boxLogTable">
+      <el-table
+        v-loading="picLoading"
+        :data="tableData"
+        border
+        stripe
+        style="width: 100%"
+        height="100%"
+      >
+        <el-table-column type="index" width="50" label="序号">
+        </el-table-column>
+        <el-table-column label="电压">
+          <template slot-scope="scope">
+            {{ scope.row.termList[0].dyName }}
+          </template>
+        </el-table-column>
+        <el-table-column label="线路" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.termList[0].lineName }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="day" label="日期">
+          <template slot-scope="scope">
+            {{ scope.row.dayList[0].day }}
+          </template>
+        </el-table-column>
+        <el-table-column label="装置总数">
+          <template slot-scope="scope">
+            {{ scope.row.termList.length }}
+          </template>
+        </el-table-column>
+        <el-table-column label="运维上线数量">
+          <template slot-scope="scope">
+            {{ scope.row.dayList[0].termList.length }}
+          </template>
+        </el-table-column>
+        <el-table-column label="运维上线率">
+          <template slot-scope="scope">
+            {{
+              (
+                (scope.row.dayList[0].termList.length /
+                  scope.row.termList.length) *
+                100
+              ).toFixed(2) + "%"
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="上图设备数量">
+          <template slot-scope="scope">
+            {{
+              scope.row.dayList[0].termList.filter(
+                (term) => parseInt(term.uploads, 10) > 0
+              ).length
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="cmdid" label="上图率">
+          <template slot-scope="scope">
+            {{
+              (
+                (scope.row.dayList[0].termList.filter(
+                  (term) => parseInt(term.uploads, 10) > 0
+                ).length /
+                  termTotalNum) *
+                100
+              ).toFixed(2) + "%"
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="正常上图设备数量">
+          <template slot-scope="scope">
+            {{
+              scope.row.dayList[0].termList.filter(
+                (term) =>
+                  parseInt(term.uploads, 10) >=
+                  (parseInt(formdata.picNum, 10) *
+                    parseInt(formdata.norGraphRate.replace("%", ""), 10)) /
+                    100
+              ).length
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="正常上图率">
+          <template slot-scope="scope">
+            {{
+              (
+                (scope.row.termList.filter(
+                  (term) =>
+                    parseInt(term.uploads, 10) >=
+                    (parseInt(formdata.picNum, 10) *
+                      parseInt(formdata.norGraphRate.replace("%", ""), 10)) /
+                      100
+                ).length /
+                  termTotalNum) *
+                100
+              ).toFixed(2) + "%"
+            }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { getSearchInfo, picRportApi } from "@/utils/api/index";
+import selectLine from "./components/selectLine";
+
+export default {
+  name: "picReport",
+  components: { selectLine },
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now(); // 禁用大于今天的日期
+        },
+      },
+      dyOptions: [], //电压数据
+      xlOptions: [], //线路数据
+      formdata: {
+        dyId: null,
+        lineId: null,
+        picNum: "",
+        norGraphRate: "",
+        starttime: new Date(new Date().setHours(0, 0, 0, 0)).getTime(),
+        endtime: new Date(new Date().setHours(23, 59, 59, 0)).getTime(), // 设置结束时间为当天夜晚23:59:59的时间戳
+      },
+      tableData: [],
+      picLoading: false,
+      termTotalNum: 0,
+      dyName: "",
+      xlName: "",
+      //从本地获取选中的线路
+      localSelectLine: [],
+    };
+  },
+  watch: {},
+  filters: {},
+  computed: {},
+  created() {},
+  mounted() {
+    this.getSearchdy();
+    this.localSelectLine = JSON.parse(localStorage.getItem("checkListLocal"));
+    console.log(this.localSelectLine);
+  },
+  methods: {
+    //获取电压信息
+    getSearchdy() {
+      getSearchInfo({ type: 1 })
+        .then((res) => {
+          this.dyOptions = this.dyOptions.concat(res.data.list);
+          console.log(this.dyOptions);
+          this.formdata.dyId = this.dyOptions[0].id;
+
+          this.getSearchxl();
+        })
+        .catch((err) => {});
+    },
+    //获取线路数据
+    getSearchxl() {
+      getSearchInfo({ type: 2, id: this.formdata.dyId })
+        .then((res) => {
+          this.xlOptions = res.data.list;
+          this.formdata.lineId = this.xlOptions[0].id;
+          this.getlineNum(this.xlOptions[0].id);
+        })
+        .catch((err) => {});
+    },
+    getlineNum(val) {
+      console.log(val);
+      const lineObj = this.xlOptions.find((item) => item.id == val);
+      console.log(lineObj);
+      this.formdata.picNum =
+        lineObj.photoCount == null ? "0" : lineObj.photoCount;
+      this.formdata.norGraphRate =
+        lineObj.photoRate == null ? "0%" : lineObj.photoRate;
+    },
+    onSubmit() {
+      if (this.formdata.starttime > this.formdata.endtime) {
+        return this.$message({
+          duration: 1500,
+          showClose: true,
+          message: "开始日期不能大于结束日期",
+          type: "warning",
+        });
+      }
+      let params = {
+        start: this.formdata.starttime / 1000,
+        end: this.formdata.endtime / 1000,
+      };
+      // 根据条件添加参数
+      if (this.formdata.dyId !== -1) {
+        params.dyId = this.formdata.dyId;
+      }
+      if (this.formdata.lineId !== -1) {
+        params.lineId = this.formdata.lineId;
+      }
+      // 根据条件添加参数
+
+      this.getpicList(params);
+    },
+
+    getpicList(params) {
+      setTimeout(() => {
+        this.picLoading = true;
+        picRportApi(params)
+          .then((res) => {
+            this.picLoading = false;
+            if (res.data.termList.length !== 0) {
+              console.log(res.data);
+              this.tableData = res.data.dayList;
+              this.termTotalNum = res.data.termList.length;
+              this.dyName = res.data.termList[0].dyName;
+              this.xlName = res.data.termList[0].lineName;
+            } else {
+              this.tableData = [];
+            }
+          })
+          .catch((err) => {});
+      }, 100);
+    },
+
+    //获取多条线路的信息
+    getTablefun() {
+      console.log("我是点击了确定");
+      console.log(this.localSelectLine);
+      // let arrlist = [];
+      // arrlist = this.localSelectLine.map((item) => item.id);
+      // console.log(arrlist);
+      this.fetchAllPicLists();
+    },
+    async fetchPicListForLine(lineId, startTime, endTime) {
+      try {
+        let params = {
+          start: startTime,
+          end: endTime,
+          lineId: lineId,
+        };
+        const res = await picRportApi(params); // 假设picRportApi返回一个Promise
+        return res.data; // 返回接口调用的结果
+      } catch (error) {
+        console.error("Error fetching pic list:", error);
+        return null; // 或者你可以返回一个错误对象
+      }
+    },
+
+    async fetchAllPicLists() {
+      this.tableDatas = []; // 初始化tableData为空数组
+      for (let item of this.localSelectLine) {
+        const startTime = this.formdata.starttime / 1000;
+        const endTime = this.formdata.endtime / 1000;
+        const picList = await this.fetchPicListForLine(
+          item.id,
+          startTime,
+          endTime
+        );
+        console.log(picList);
+        // 假设每个picList是一个数组，我们将其添加到tableData中
+        // 如果picList不是数组或者你想要以不同的方式处理它，你需要相应地修改这里
+        if (Array.isArray(picList)) {
+          this.tableDatas.push(...picList); // 使用扩展运算符来合并数组
+        } else if (picList) {
+          // 如果picList不是数组但你有其他想要添加到tableData的数据
+          this.tableDatas.push(picList);
+        }
+      }
+
+      // 此时，this.tableData包含了所有从接口获取的数据
+      console.log(this.tableDatas);
+      this.tableData = this.tableDatas;
+    },
+  },
+};
+</script>
+<style lang="less">
+.picReportClass {
+  height: calc(100% - 24px);
+  width: calc(100% - 24px);
+  padding: 12px;
+  .logTitle {
+    display: flex;
+    align-items: center;
+    height: 32px;
+    margin-bottom: 12px;
+
+    h3 {
+      margin-right: 24px;
+    }
+    .el-form-item--small.el-form-item {
+      margin-bottom: 0px;
+    }
+    .dybox {
+      .el-select {
+        width: 120px;
+      }
+    }
+    .xlbox {
+      .el-select {
+        width: 180px;
+      }
+    }
+    .pambox {
+      .el-input {
+        width: 70px;
+      }
+      .el-input--suffix .el-input__inner {
+        padding: 8px;
+      }
+    }
+    .dateclass {
+      .el-date-editor.el-input,
+      .el-date-editor.el-input__inner {
+        width: 190px;
+      }
+    }
+  }
+  .boxLogTable {
+    height: calc(100% - 44px);
+
+    .el-table__cell {
+      text-align: center;
+    }
+    .el-table thead {
+      th.el-table__cell {
+        background: #fafafa;
+      }
+    }
+    .buttonText {
+      cursor: pointer;
+      white-space: pre-wrap;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>