From 6fd01caea5136f8bb13c0692ecad4c705e148d7c Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Tue, 25 Jul 2023 11:53:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E7=BA=BF=E8=A3=85=E7=BD=AE=E6=95=B0?=
 =?UTF-8?q?=E9=87=8F=E7=BB=9F=E8=AE=A1=EF=BC=8Cexcle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/api/index.js          |  18 ++
 src/views/stritl/index copy.vue | 502 --------------------------------
 src/views/stritl/index.vue      | 113 +++----
 3 files changed, 54 insertions(+), 579 deletions(-)
 delete mode 100644 src/views/stritl/index copy.vue

diff --git a/src/utils/api/index.js b/src/utils/api/index.js
index 6357008..b70088e 100644
--- a/src/utils/api/index.js
+++ b/src/utils/api/index.js
@@ -774,3 +774,21 @@ export function getTerminalListExcel() {
     responseType: "blob",
   });
 }
+
+//首页查看数据
+
+export function getOnlineTerminalList(data) {
+  return request({
+    url: "/api/getOnlineTerminalList",
+    method: "get",
+    params: data,
+  });
+}
+//导出数据
+export function getOnlineTerminalListExcel() {
+  return request({
+    url: "/api/getOnlineTerminalListExcel",
+    method: "post",
+    responseType: "blob",
+  });
+}
diff --git a/src/views/stritl/index copy.vue b/src/views/stritl/index copy.vue
deleted file mode 100644
index e95bac0..0000000
--- a/src/views/stritl/index copy.vue	
+++ /dev/null
@@ -1,502 +0,0 @@
-<template>
-  <div class="stritlBox">
-    <div class="stritl_left">
-      <div class="strLeftTop">
-        <h3>{{ numberUnits.name }}</h3>
-        <bar
-          v-if="flag.baizhang"
-          :legendData="unitXData"
-          :seriesData="unitYData"
-          :boxStyle="numberUnits.boxStyle"
-        ></bar>
-      </div>
-      <div class="strLeftMid">
-        <h3>{{ hazardClass.name }}</h3>
-        <pie
-          v-if="flag.baizhang"
-          :pieData="hazardPieData"
-          :boxStyle="hazardClass.boxStyle"
-        ></pie>
-      </div>
-      <div class="strLeftBottom">
-        <h3>{{ monitLine.name }}</h3>
-        <bar
-          v-if="flag.baizhang"
-          :legendData="lineXData"
-          :seriesData="lineYData"
-          :boxStyle="monitLine.boxStyle"
-        ></bar>
-      </div>
-    </div>
-    <div class="stritl_center">
-      <div class="strCenterTop">
-        <mapChart></mapChart>
-      </div>
-      <div class="strCenterbottom">
-        <div class="bottomL">
-          <h3>{{ hazardType.name }}</h3>
-          <horizontalBar
-            :legendData="hazardTypeXData"
-            :seriesData="hazardTypeYData"
-            :boxStyle="hazardType.boxStyle"
-          ></horizontalBar>
-        </div>
-        <div class="bottomM">
-          <h3>{{ deviceInfo.name }}</h3>
-          <div class="infoBox">
-            <p>
-              <span>在运数</span>
-              <span>{{ infoData.deviceCount }}</span>
-            </p>
-            <p>
-              <span>在线数</span>
-              <span>{{ infoData.hasPhotoCount }}</span>
-            </p>
-            <p>
-              <span>杆塔覆盖率</span>
-              <span>{{ infoData.deviceCoverage }}%</span>
-            </p>
-            <p>
-              <span>在线率</span>
-              <span>{{ infoData.hasPhotoRate }}%</span>
-            </p>
-          </div>
-        </div>
-        <div class="bottomR">
-          <h3>{{ deviceOnline.name }}</h3>
-          <pie
-            :pieData="deviceOnline.onlineData"
-            :boxStyle="deviceOnline.boxStyle"
-          ></pie>
-        </div>
-      </div>
-    </div>
-    <div class="stritl_right">
-      <div class="strRightTop">
-        <h3>线路分布(总计：5)</h3>
-        <div class="tableBox">
-          <el-table :data="lineAllData" style="width: 100%">
-            <el-table-column
-              prop="voltageLevelStr"
-              label="电压等级"
-              align="center"
-            >
-            </el-table-column>
-            <el-table-column prop="lineCount" label="线路数" align="center">
-            </el-table-column>
-            <el-table-column prop="towerCount" label="安装数" align="center">
-            </el-table-column>
-            <el-table-column
-              prop="deviceCoverage"
-              label="安装覆盖率"
-              align="center"
-            >
-            </el-table-column>
-          </el-table>
-        </div>
-      </div>
-      <!-- <div class="strRightMid">5</div> -->
-      <div class="strRightBottom">
-        <h3>{{ patrolOpinions.name }}</h3>
-        <div class="suggest">
-          <p class="attention"><span>注意：</span>{{ patrolOpinions.month }}</p>
-          <p class="info">
-            <span>{{ patrolOpinions.info1 }}</span>
-            <span>{{ patrolOpinions.info2 }}</span>
-          </p>
-        </div>
-        <h4>往年同期隐患比例分布图</h4>
-        <radar
-          :radarName="radarName"
-          :radarValue="radarValue"
-          :boxStyle="patrolOpinions.boxStyle"
-          :radarTitle="radarTitle"
-        ></radar>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import bar from "./chartFiles/bar";
-import horizontalBar from "./chartFiles/horizontalBar";
-import pie from "./chartFiles/pie";
-import radar from "./chartFiles/radar";
-import mapChart from "./chartFiles/mapChart";
-import {
-  getLineDataByVoltage,
-  getCapturePointDataByDanger,
-  getHostDeviceDataByVoltage,
-  getPhotoAlarmDataByAlarmType,
-  getCompanyDeviceInfo,
-  getByName,
-  getLastYearAlarmReasons,
-} from "@/utils/api/index";
-export default {
-  data() {
-    return {
-      name: localStorage.getItem("ms_username"),
-      flag: {
-        baizhang: false, //是否开始渲染子组件
-      },
-      //装置数量统计
-      unitAllData: [],
-      unitXData: [],
-      unitYData: [],
-      numberUnits: {
-        name: "装置数量统计",
-        boxStyle: {
-          width: "100%",
-          height: "200px",
-        },
-      },
-      //监控路线统计
-      lineAllData: [],
-      lineXData: [],
-      lineYData: [],
-      monitLine: {
-        name: "监控路线统计",
-        boxStyle: {
-          width: "100%",
-          height: "200px",
-        },
-      },
-      //隐患分类统计
-      hazardData: [],
-      hazardPieData: [],
-      hazardClass: {
-        name: "隐患分类统计",
-        boxStyle: {
-          width: "100%",
-          height: "200px",
-        },
-      },
-      //隐患类型统计
-      hazardTypeData: [],
-      hazardTypeXData: [],
-      hazardTypeYData: [],
-      hazardType: {
-        name: "隐患类型统计",
-        boxStyle: {
-          width: "100%",
-          height: "160px",
-        },
-      },
-      //装置信息统计
-      infoData: [],
-      deviceInfo: {
-        name: "装置信息统计",
-        infoData: [
-          { value: 24, name: "在运数" },
-          { value: 10, name: "在线数" },
-          { value: "92.31%", name: "杆塔覆盖率" },
-          { value: "41.67%", name: "在线率" },
-        ],
-      },
-      deviceOnline: {
-        name: "装置在线统计",
-        onlineData: [
-          { value: 55, name: "离线" },
-          { value: 45, name: "在线" },
-        ],
-        boxStyle: {
-          width: "100%",
-          height: "160px",
-        },
-      },
-      //隐患比例分布图
-      patrolData: [],
-      radarName: [],
-      radarValue: [],
-      radarTitle: "隐患比例分布图",
-      patrolOpinions: {
-        name: "巡查意见",
-        month: "三月份",
-        info1: "1.鸟类活动开展频繁，需注意鸟类筑巢，大型鸟类驻留。",
-        info2:
-          "2.大风天气较多的季节，要注意对放风筝行为的监控，同时加强巡视对导线悬挂异物的观察。",
-        boxStyle: {
-          width: "100%",
-          height: "160px",
-        },
-      },
-    };
-  },
-  components: {
-    bar,
-    horizontalBar,
-    pie,
-    radar,
-    mapChart,
-  },
-  computed: {
-    role() {
-      return this.name === "admin" ? "超级管理员" : "普通用户";
-    },
-  },
-  methods: {},
-  created() {
-    //装置数量统计
-    getHostDeviceDataByVoltage({
-      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
-    }).then((res) => {
-      this.unitAllData = res.data.data;
-      for (var i = 0; i < this.unitAllData.length; i++) {
-        this.unitXData.push(this.unitAllData[i].name);
-        this.unitYData.push(this.unitAllData[i].value);
-      }
-      this.flag.baizhang = true;
-    });
-
-    //装置信息统计
-    getCompanyDeviceInfo({
-      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
-    }).then((res) => {
-      this.infoData = res.data;
-    });
-    //线路分布
-    getLineDataByVoltage({
-      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
-    }).then((res) => {
-      this.lineAllData = res.data;
-      console.log(this.lineAllData);
-      for (var i = 0; i < this.lineAllData.length; i++) {
-        this.lineXData.push(this.lineAllData[i].voltageLevelStr);
-        this.lineYData.push(this.lineAllData[i].lineCount);
-      }
-      this.flag.baizhang = true;
-    });
-    //隐患分类统计
-    getCapturePointDataByDanger({
-      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
-    }).then((res) => {
-      this.hazardData = res.data;
-
-      // let name1 = this.hazardData.nameList;
-      // let value1 = this.hazardData.valueList;
-      this.hazardPieData = res.data.list;
-      console.log(this.hazardPieData);
-
-      this.flag.baizhang = true;
-    });
-
-    //隐患类型统计
-    getPhotoAlarmDataByAlarmType({
-      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
-    }).then((res) => {
-      this.hazardTypeData = res.data.dataList;
-
-      for (var i = 0; i < this.hazardTypeData.length; i++) {
-        this.hazardTypeXData.push(this.hazardTypeData[i].name);
-        this.hazardTypeYData.push(this.hazardTypeData[i].acount);
-      }
-      this.flag.baizhang = true;
-    });
-
-    //巡视意见
-    getByName({
-      name: "三月",
-    }).then((res) => {
-      console.log(res);
-    });
-    //雷达图数据
-    getLastYearAlarmReasons({
-      companyId: "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
-      month: "04",
-    }).then((res) => {
-      console.log(res);
-      this.patrolData = res.data;
-      console.log(this.patrolData);
-      let obj = {};
-      this.patrolData.forEach((item) => {
-        if (obj.hasOwnProperty(item.alarmInfo)) {
-          obj[item.alarmInfo] += item.num;
-        } else {
-          obj[item.alarmInfo] = item.num;
-        }
-      });
-      console.log(obj);
-      this.radarValue = Object.values(obj);
-      console.log(this.radarValue);
-      let max = Math.max(...this.radarValue);
-      //对象转化成数组对象
-      console.log(max);
-      for (let i in obj) {
-        console.log(i);
-        this.radarName.push({
-          name: i,
-          max: max,
-        });
-      }
-      console.log(this.radarName);
-    });
-  },
-};
-</script>
-
-<style lang="less">
-.stritlBox {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  .stritl_left,
-  .stritl_right {
-    width: 20%;
-    margin: 8px;
-  }
-  .stritl_left,
-  .stritl_right {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    .strLeftTop,
-    .strLeftMid,
-    .strLeftBottom {
-      height: 30%;
-      box-sizing: content-box;
-      box-shadow: @box-shadow-basic;
-      border: 1px solid @border-color-base;
-      background-color: @color-white;
-      border-radius: 4px;
-      padding: 8px;
-      h3 {
-        margin-bottom: 8px;
-        font-size: 14px;
-      }
-    }
-    .strRightTop,
-    .strRightBottom {
-      height: 46%;
-      box-sizing: content-box;
-      box-shadow: @box-shadow-basic;
-      border: 1px solid @border-color-base;
-      background-color: @color-white;
-      border-radius: 4px;
-      padding: 8px;
-      h3 {
-        margin-bottom: 8px;
-        font-size: 14px;
-      }
-    }
-    .strRightTop {
-      position: relative;
-      .tableBox {
-        position: absolute;
-        width: calc(100% - 16px);
-        .el-table .cell {
-          white-space: normal;
-          word-break: break-all;
-        }
-        .el-table th.el-table__cell > .cell {
-          min-width: 58px;
-          padding-left: 0px;
-          padding-right: 0px;
-        }
-      }
-    }
-    .strRightBottom {
-      h3 {
-        margin-bottom: 8px;
-        font-size: 14px;
-      }
-      .suggest {
-        .attention {
-          font-size: 14px;
-          margin-bottom: 8px;
-          span {
-            font-size: 14px;
-            color: @color-red;
-          }
-        }
-        .info {
-          display: flex;
-          flex-direction: column;
-          font-size: 14px;
-          line-height: 22px;
-        }
-      }
-      h4 {
-        margin-top: 8px;
-        margin-bottom: 8px;
-      }
-    }
-  }
-  .stritl_center {
-    flex: 1;
-    margin: 10px;
-    display: flex;
-    flex-direction: column;
-    .strCenterTop {
-      flex: 1;
-      box-sizing: content-box;
-      box-shadow: @box-shadow-basic;
-      border: 1px solid @border-color-base;
-      background-color: @color-white;
-      border-radius: 4px;
-      //padding: 8px;
-    }
-    .strCenterbottom {
-      margin-top: 24px;
-      height: 210px;
-      //border: 1px solid #000;
-      box-sizing: content-box;
-      display: flex;
-      justify-content: space-between;
-      .bottomL,
-      .bottomM,
-      .bottomR {
-        border: 1px solid #000;
-        box-sizing: content-box;
-        width: 30%;
-        box-shadow: @box-shadow-basic;
-        border: 1px solid @border-color-base;
-        background-color: @color-white;
-        border-radius: 4px;
-        padding: 8px;
-        h3 {
-          margin-bottom: 8px;
-          font-size: 15px;
-        }
-      }
-      .bottomM {
-        .infoBox {
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: space-around;
-          p {
-            width: 40%;
-            height: 68px;
-            background: #fcc;
-            text-align: center;
-            margin: 6px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            span {
-              color: #333;
-              font-size: 14px;
-              &:last-child {
-                font-size: 20px;
-                margin-top: 5px;
-                font-weight: bold;
-              }
-            }
-            &:first-child {
-              background: url("../../assets/img/border-blue.png");
-            }
-            &:nth-child(2) {
-              background: url("../../assets/img/border-green.png");
-            }
-            &:nth-child(3) {
-              background: url("../../assets/img/border-yellow.png");
-            }
-            &:nth-child(4) {
-              background: url("../../assets/img/border-gray.png");
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/stritl/index.vue b/src/views/stritl/index.vue
index 84751c7..361da14 100644
--- a/src/views/stritl/index.vue
+++ b/src/views/stritl/index.vue
@@ -3,10 +3,7 @@
     <div class="echart-top">
       <el-card class="box-card" v-loading="numloading">
         <h3>装置数量统计</h3>
-        <el-button
-          class="lookBtn"
-          type="primary"
-          @click="dialogTableVisible = true"
+        <el-button class="lookBtn" type="primary" @click="handleLook"
           >查看</el-button
         >
         <div class="bottomM">
@@ -84,28 +81,31 @@
     <el-dialog
       class="exportDialog"
       title="装置列表"
-      width="1020px"
+      width="70%"
       :visible.sync="dialogTableVisible"
     >
-      <div class="exportList">
-        <el-button class="exportbtn" type="primary">导出</el-button>
+      <div class="exportList" v-loading="exportLoading">
+        <el-button class="exportbtn" type="primary" @click="handleExport()"
+          >导出</el-button
+        >
         <el-table
-          :data="gridData"
+          :data="onLineData"
           stripe
           tooltip-effect="dark"
           height="calc(100% - 54px)"
         >
+          <el-table-column prop="lineName" label="线路名称"></el-table-column>
+          <el-table-column prop="towerName" label="杆塔名称"></el-table-column>
+          <el-table-column prop="cmdId" label="装置ID"></el-table-column>
           <el-table-column
-            property="date"
-            label="日期"
-            width="150"
+            prop="hearttime"
+            label="最新心跳时间"
           ></el-table-column>
           <el-table-column
-            property="name"
-            label="姓名"
-            width="200"
+            prop="pictime"
+            label="最新图片拍照时间"
           ></el-table-column>
-          <el-table-column property="address" label="地址"></el-table-column>
+          <el-table-column prop="isonline" label="是否在线"></el-table-column>
         </el-table>
       </div>
     </el-dialog>
@@ -116,6 +116,8 @@ import {
   getTermStatistics,
   getWeekAlarmStatistics,
   getTodayAlarmStatistics,
+  getOnlineTerminalList,
+  getOnlineTerminalListExcel,
 } from "@/utils/api/index";
 export default {
   name: "",
@@ -140,68 +142,8 @@ export default {
       pie2loading: false,
       zoom: 1,
       dialogTableVisible: false,
-      gridData: [
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-02",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-04",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-01",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-        {
-          date: "2016-05-03",
-          name: "王小虎",
-          address: "上海市普陀区金沙江路 1518 弄",
-        },
-      ],
+      onLineData: [],
+      exportLoading: false,
     };
   },
   created() {
@@ -230,6 +172,23 @@ export default {
     },
   },
   methods: {
+    //查看在线列表
+    handleLook() {
+      this.dialogTableVisible = true;
+      this.exportLoading = true;
+      getOnlineTerminalList()
+        .then((res) => {
+          console.log(res);
+          this.onLineData = res.data;
+          this.exportLoading = false;
+          console.log(this.onLineData);
+        })
+        .catch((err) => {});
+    },
+    //导出
+    handleExport() {
+      window.location.href = "/api/api/getOnlineTerminalListExcel";
+    },
     // 隐患数量统计
     changedate() {
       console.log(this.dateValue.getTime());