From bcf1e21260255ed67fc8c36c98059f1bfc02a9dc Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Tue, 27 Aug 2024 13:45:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=BF=90=E7=BB=B4=E5=9C=A8?=
 =?UTF-8?q?=E7=BA=BF=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/api/index.js                        |  10 +
 .../picReport/components/lineStatusDialog.vue |  62 +++++-
 .../picReport/components/selectLine copy.vue  |  78 +++++++
 src/views/picReport/index.vue                 | 210 +++++++++++++++++-
 4 files changed, 336 insertions(+), 24 deletions(-)
 create mode 100644 src/views/picReport/components/selectLine copy.vue

diff --git a/src/utils/api/index.js b/src/utils/api/index.js
index 194b05f..7db7190 100644
--- a/src/utils/api/index.js
+++ b/src/utils/api/index.js
@@ -257,3 +257,13 @@ export function getLineListJoggle(data) {
     data,
   });
 }
+
+//查询权限数结构
+
+export function getPermissionTree(data) {
+  return request({
+    url: "/xymanager/user/getFullTree",
+    method: "get",
+    params: data,
+  });
+}
diff --git a/src/views/picReport/components/lineStatusDialog.vue b/src/views/picReport/components/lineStatusDialog.vue
index a67b66b..38a57ad 100644
--- a/src/views/picReport/components/lineStatusDialog.vue
+++ b/src/views/picReport/components/lineStatusDialog.vue
@@ -34,10 +34,19 @@
             </el-form>
 
             <el-button type="primary" @click="onSubmit">查询</el-button>
+            <el-button class="exportBtn" type="primary" @click="deviceExport"
+              >导出列表</el-button
+            >
           </div>
 
           <div class="boxLogTable">
-            <el-table :data="tableData" border stripe height="calc(100%)">
+            <el-table
+              :data="tableData"
+              border
+              stripe
+              height="calc(100%)"
+              id="moreTable"
+            >
               <el-table-column type="index" width="50" label="序号">
               </el-table-column>
 
@@ -45,16 +54,19 @@
                 {{ xlName }}
               </el-table-column>
               <el-table-column prop="day" label="日期" show-overflow-tooltip>
+                <template slot-scope="scope">
+                  {{ scope.row.day.split(" ")[0] }}</template
+                >
               </el-table-column>
               <el-table-column label="装置总数">
                 <template slot-scope="scope"> {{ termTotalNum }}</template>
               </el-table-column>
-              <el-table-column label="运维上线数量">
+              <el-table-column label="运维上线数量" width="70px">
                 <template slot-scope="scope">
                   {{ scope.row.termList.length }}
                 </template>
               </el-table-column>
-              <el-table-column label="运维上线率">
+              <el-table-column label="运维上线率" width="70px">
                 <template slot-scope="scope">
                   {{
                     ((scope.row.termList.length / termTotalNum) * 100).toFixed(
@@ -63,7 +75,7 @@
                   }}
                 </template>
               </el-table-column>
-              <el-table-column label="上图设备数量">
+              <el-table-column label="上图设备数量" width="70px">
                 <template slot-scope="scope">
                   {{
                     scope.row.termList.filter(
@@ -130,6 +142,7 @@
 </template>
 <script>
 import { picRportApi } from "@/utils/api/index";
+import htmlToExcel from "@/utils/htmlToExcel";
 export default {
   data() {
     return {
@@ -155,10 +168,15 @@ export default {
       picNum: 0,
       norGraphRate: 0,
       titleArr: ["运维上线数量", "上图设备数量", "正常上图设备数量"],
+      reverseData: [], //倒叙排列
     };
   },
   mounted() {},
   methods: {
+    //导出活动列表表格
+    deviceExport() {
+      htmlToExcel.getExcel("#moreTable", "运维多天在线率列表");
+    },
     display(row) {
       this.statusdialogVisible = true;
       this.lineId = row;
@@ -191,8 +209,10 @@ export default {
               console.log(res.data);
               //this.tableData = res.data;
               this.tableData = res.data[0].dayList;
+              this.reverseData = this.tableData.slice().reverse();
               console.log(this.tableData);
               this.termTotalNum = res.data[0].termList.length;
+              console.log(this.termTotalNum);
               this.picNum = res.data[0].line.photoCount;
               this.norGraphRate = res.data[0].line.photoRate;
               this.xlName = res.data[0].line.name;
@@ -207,13 +227,26 @@ export default {
     //装置数量统计
     getEchart() {
       this.$nextTick(() => {
-        console.log(this.termDataNum);
         let that = this;
         that.$echarts.init(document.getElementById("echartBox")).dispose();
         that.myChart = this.$echarts.init(document.getElementById("echartBox"));
+        let termDataNum = this.termTotalNum;
+        var seriesColors = ["#5470c6", "#91cc75", "#fac858"]; // 红色、绿色、蓝色
         let option = {
           tooltip: {
             trigger: "axis",
+            formatter: function (params) {
+              let res = params[0].name + "<br/>"; // 假设 params[0].name 是类别名
+              params.forEach((item, index) => {
+                // 生成小圆点的 HTML，使用对应的颜色
+                let dotHtml = `<span style="display: inline-block; width: 8px; height: 8px; background-color: ${seriesColors[index]}; border-radius: 50%; margin-right: 8px;"></span>`;
+                // 拼接系列名、值和百分比
+                let percentage =
+                  ((item.value / termDataNum) * 100).toFixed(2) + "%"; // 计算百分比
+                res += `${dotHtml}${item.seriesName}: ${item.value} (${percentage})<br/>`;
+              });
+              return res;
+            },
           },
           legend: {
             data: this.titleArr,
@@ -227,7 +260,12 @@ export default {
           xAxis: {
             type: "category",
             boundaryGap: false,
-            data: this.tableData.map((item) => item.day),
+            axisLabel: {
+              showMaxLabel: true, // 显示最后一个标签
+            },
+            data: this.reverseData.map((item) =>
+              item.day.replace(/^\d{4}-/, "")
+            ),
           },
           yAxis: {
             type: "value",
@@ -236,14 +274,14 @@ export default {
             {
               name: "运维上线数量",
               type: "line",
-              stack: "Total",
-              data: this.tableData.map((item) => item.termList.length),
+
+              data: this.reverseData.map((item) => item.termList.length),
             },
             {
               name: "上图设备数量",
               type: "line",
-              stack: "Total",
-              data: this.tableData.map(
+
+              data: this.reverseData.map(
                 (item) =>
                   item.termList.filter((term) => parseInt(term.uploads, 10) > 0)
                     .length
@@ -252,8 +290,8 @@ export default {
             {
               name: "正常上图设备数量",
               type: "line",
-              stack: "Total",
-              data: this.tableData.map(
+
+              data: this.reverseData.map(
                 (item) =>
                   item.termList.filter(
                     (term) =>
diff --git a/src/views/picReport/components/selectLine copy.vue b/src/views/picReport/components/selectLine copy.vue
new file mode 100644
index 0000000..a0a8b61
--- /dev/null
+++ b/src/views/picReport/components/selectLine copy.vue	
@@ -0,0 +1,78 @@
+<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);
+    }
+  },
+  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);
+      localStorage.setItem("checkListLocal", JSON.stringify(this.checkList));
+      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/index.vue b/src/views/picReport/index.vue
index fbce125..ecebacc 100644
--- a/src/views/picReport/index.vue
+++ b/src/views/picReport/index.vue
@@ -27,10 +27,14 @@
       </el-form>
       <selectLine></selectLine>
       <el-button type="primary" @click="onSubmit">查询</el-button>
+      <el-button class="exportBtn" type="primary" @click="deviceExport"
+        >导出列表</el-button
+      >
     </div>
 
     <div class="boxLogTable">
       <el-table
+        id="deciceTable"
         v-loading="picLoading"
         :data="tableData"
         border
@@ -38,10 +42,10 @@
         style="width: 100%"
         height="100%"
       >
-        <el-table-column type="index" width="50" label="序号">
+        <el-table-column type="index" width="50" label="序号" fixed="left">
         </el-table-column>
 
-        <el-table-column label="线路" show-overflow-tooltip>
+        <el-table-column label="线路" fixed="left">
           <template slot-scope="scope">
             <el-link
               type="primary"
@@ -51,22 +55,22 @@
             >
           </template>
         </el-table-column>
-        <el-table-column prop="day" label="日期">
+        <el-table-column label="日期" fixed="left">
           <template slot-scope="scope">
-            {{ scope.row.dayList[0].day }}
+            {{ scope.row.dayList[0].day.split(" ")[0] }}
           </template>
         </el-table-column>
-        <el-table-column label="装置总数">
+        <el-table-column label="装置总数" fixed="left">
           <template slot-scope="scope">
             {{ scope.row.termList.length }}</template
           >
         </el-table-column>
-        <el-table-column label="运维上线数量">
+        <el-table-column label="运维上线数量" width="70px">
           <template slot-scope="scope">
             {{ scope.row.dayList[0].termList.length }}</template
           >
         </el-table-column>
-        <el-table-column label="运维上线率">
+        <el-table-column label="运维上线率" width="70px">
           <template slot-scope="scope">
             {{
               (
@@ -77,7 +81,7 @@
             }}</template
           >
         </el-table-column>
-        <el-table-column label="上图设备数量">
+        <el-table-column label="上图设备数量" width="70px">
           <template slot-scope="scope">
             {{
               scope.row.dayList[0].termList.filter(
@@ -86,7 +90,7 @@
             }}
           </template>
         </el-table-column>
-        <el-table-column prop="cmdid" label="上图率">
+        <el-table-column label="上图率">
           <template slot-scope="scope">
             {{
               (
@@ -129,6 +133,171 @@
             }}
           </template>
         </el-table-column>
+
+        <el-table-column
+          label="运维上线数量（昨天）"
+          width="70px"
+          class-name="yestoday"
+        >
+          <template slot-scope="scope">
+            {{ scope.row.dayList[1].termList.length }}</template
+          >
+        </el-table-column>
+        <el-table-column
+          label="运维上线率（昨天）"
+          width="70px"
+          class-name="yestoday"
+        >
+          <template slot-scope="scope">
+            {{
+              (
+                (scope.row.dayList[1].termList.length /
+                  scope.row.termList.length) *
+                100
+              ).toFixed(2) + "%"
+            }}</template
+          >
+        </el-table-column>
+        <el-table-column
+          label="上图设备数量（昨天）"
+          width="70px"
+          class-name="yestoday"
+        >
+          <template slot-scope="scope">
+            {{
+              scope.row.dayList[1].termList.filter(
+                (term) => parseInt(term.uploads, 10) > 0
+              ).length
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="上图率（昨天）" class-name="yestoday">
+          <template slot-scope="scope">
+            {{
+              (
+                (scope.row.dayList[1].termList.filter(
+                  (term) => parseInt(term.uploads, 10) > 0
+                ).length /
+                  scope.row.termList.length) *
+                100
+              ).toFixed(2) + "%"
+            }}</template
+          >
+        </el-table-column>
+        <el-table-column label="正常上图设备数量（昨天）" class-name="yestoday">
+          <template slot-scope="scope">
+            {{
+              scope.row.dayList[1].termList.filter(
+                (term) =>
+                  parseInt(term.uploads, 10) >=
+                  (parseInt(scope.row.line.photoCount, 10) *
+                    parseInt(scope.row.line.photoRate.replace("%", ""), 10)) /
+                    100
+              ).length
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="正常上图率（昨天）" class-name="yestoday">
+          <template slot-scope="scope">
+            {{
+              (
+                (scope.row.dayList[1].termList.filter(
+                  (term) =>
+                    parseInt(term.uploads, 10) >=
+                    (parseInt(scope.row.line.photoCount, 10) *
+                      parseInt(scope.row.line.photoRate.replace("%", ""), 10)) /
+                      100
+                ).length /
+                  scope.row.termList.length) *
+                100
+              ).toFixed(2) + "%"
+            }}
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="运维上线数量（前天）"
+          width="70px"
+          class-name="beforeday"
+        >
+          <template slot-scope="scope">
+            {{ scope.row.dayList[2].termList.length }}</template
+          >
+        </el-table-column>
+        <el-table-column
+          label="运维上线率（前天）"
+          width="70px"
+          class-name="beforeday"
+        >
+          <template slot-scope="scope">
+            {{
+              (
+                (scope.row.dayList[2].termList.length /
+                  scope.row.termList.length) *
+                100
+              ).toFixed(2) + "%"
+            }}</template
+          >
+        </el-table-column>
+        <el-table-column
+          label="上图设备数量（前天）"
+          width="70px"
+          class-name="beforeday"
+        >
+          <template slot-scope="scope">
+            {{
+              scope.row.dayList[2].termList.filter(
+                (term) => parseInt(term.uploads, 10) > 0
+              ).length
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="上图率（前天）" class-name="beforeday">
+          <template slot-scope="scope">
+            {{
+              (
+                (scope.row.dayList[2].termList.filter(
+                  (term) => parseInt(term.uploads, 10) > 0
+                ).length /
+                  scope.row.termList.length) *
+                100
+              ).toFixed(2) + "%"
+            }}</template
+          >
+        </el-table-column>
+        <el-table-column
+          label="正常上图设备数量（前天）"
+          class-name="beforeday"
+        >
+          <template slot-scope="scope">
+            {{
+              scope.row.dayList[2].termList.filter(
+                (term) =>
+                  parseInt(term.uploads, 10) >=
+                  (parseInt(scope.row.line.photoCount, 10) *
+                    parseInt(scope.row.line.photoRate.replace("%", ""), 10)) /
+                    100
+              ).length
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="正常上图率（前天）" class-name="beforeday">
+          <template slot-scope="scope">
+            {{
+              (
+                (scope.row.dayList[2].termList.filter(
+                  (term) =>
+                    parseInt(term.uploads, 10) >=
+                    (parseInt(scope.row.line.photoCount, 10) *
+                      parseInt(scope.row.line.photoRate.replace("%", ""), 10)) /
+                      100
+                ).length /
+                  scope.row.termList.length) *
+                100
+              ).toFixed(2) + "%"
+            }}
+          </template>
+        </el-table-column>
       </el-table>
     </div>
 
@@ -139,6 +308,8 @@
 import { picRportApi } from "@/utils/api/index";
 import selectLine from "./components/selectLine";
 import lineStatusDialog from "./components/lineStatusDialog";
+import htmlToExcel from "@/utils/htmlToExcel";
+
 export default {
   name: "picReport",
   components: { selectLine, lineStatusDialog },
@@ -151,7 +322,9 @@ export default {
       },
 
       formdata: {
-        starttime: new Date(new Date().setHours(0, 0, 0, 0)).getTime(), // 设置开始时间为当天凌晨00:00:00的时间戳,
+        starttime:
+          new Date(new Date().setHours(0, 0, 0, 0)).getTime() -
+          3 * 24 * 60 * 60 * 1000, // 设置开始时间为当天凌晨00:00:00的时间戳, // 设置开始时间为当天凌晨00:00:00的时间戳,
         endtime: new Date(new Date().setHours(23, 59, 59, 0)).getTime(), // 设置结束时间为当天夜晚23:59:59的时间戳
       },
       tableData: [],
@@ -172,6 +345,10 @@ export default {
     console.log(this.localSelectLine);
   },
   methods: {
+    //导出活动列表表格
+    deviceExport() {
+      htmlToExcel.getExcel("#deciceTable", "运维在线率列表");
+    },
     onSubmit() {
       if (this.formdata.starttime > this.formdata.endtime) {
         return this.$message({
@@ -230,7 +407,9 @@ export default {
     align-items: center;
     height: 32px;
     margin-bottom: 12px;
-
+    .exportBtn {
+      margin-left: auto;
+    }
     h3 {
       margin-right: 24px;
     }
@@ -250,7 +429,14 @@ export default {
   }
   .boxLogTable {
     height: calc(100% - 44px);
-
+    .yestoday {
+      background: #b1f5e8 !important;
+      color: #000;
+    }
+    .beforeday {
+      background: #dfe745 !important;
+      color: #000;
+    }
     .el-table__cell {
       text-align: center;
     }