From ffaaf1e37f3c1ccbc79862f10cf69bf7605bc7c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C002001lixiaobang=E2=80=9D?= <2547956374@qq.com>
Date: Tue, 21 Feb 2023 13:26:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        |   2 +-
 src/api/index.js                   |   5 +
 src/assets/images/suoxiao.png      | Bin 0 -> 1211 bytes
 src/views/HomePop/ringMainUnit.vue |   2 +-
 src/views/index.vue                | 292 ++++++++++++++++-------------
 5 files changed, 173 insertions(+), 128 deletions(-)
 create mode 100644 src/assets/images/suoxiao.png

diff --git a/src/App.vue b/src/App.vue
index 089fd8c..6638613 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,7 +40,7 @@ export default {
     return{
       addDay:'',
       subDay:'',
-      routerTitle:['首页','20kv','35kv','站房智辅'],
+      routerTitle:['10KV','20kv','安全管控','站房智辅'],
       routerActive:0,
       weatherArr:[
         {day:'今天',temperature:'',pic:require('./assets/images/sun.png')},
diff --git a/src/api/index.js b/src/api/index.js
index d4f25f2..643a1f5 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -97,4 +97,9 @@ export const getCabinetData = (data) => {
 export const getCabinetCameraList = (data) => {
     return axios.post('aps/api/v1/cabinetCameraList'+'?sn='+data.sn+'&token='+data.token,data
         ,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
+};
+//获取历史故障
+export const getfaultReportList = (data) => {
+    return axios.post('aps/api/v1/faultReportList'+'?sn='+data.sn+'&token='+data.token,data
+        ,{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
 };
\ No newline at end of file
diff --git a/src/assets/images/suoxiao.png b/src/assets/images/suoxiao.png
new file mode 100644
index 0000000000000000000000000000000000000000..23a70c5ded29f1dbee185df97a6aeb25260dac2d
GIT binary patch
literal 1211
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE;=WQl7;NpOBzNqJ&XDuZK6ep0G}
zXKrG8YEWuoN@d~6R2v2cX0^<ah>{3jAFJg2T)jk)8oi3#0-$aN1{?c|g2d$P)DnfH
z)bz|eTc!8A_bVx6rr0WloBA5~7C5J7WO`H;r3P2|g(O#HCtIc{+1n}DR9FEG$W1Lt
zRH(?!$t$+1uvG$^YXxM3g!Ppaz)DK8ZIvL7itr6kaLzAERWQ{v(@i!sF;y_P)H5_Q
zHnFtSQ7|$vw9q%O&^I*JH8is_F|aZ+Qh)*_plwAdX;wilZcw{`JX@uVl9B=|ef{$C
za=mh6z5JqdeM3u2OML?)eIp}XpbFjM%Dj@q3f;V7Wta&rsl~}fnFS@8`FRQ;6BCp2
zOG|8(fG&l2A-4c-Y+f-mn1BJMUy)d#Z>VPg@)As;uP=V3xw&xF#U(+h2=`(&xHzP;
zAXPsowK%`DC>a=WY04n03ap%qQWHz^i$e1Ab6}wukda@KU!0L&py2Eb3N=dwjquF8
zl>G8yO|TwcUn|eN;*!L?<Wx@=TP2_=dYPFiRtBbq22KVRW{$3oCWeNtE<m=qlZBbN
zfup0Tv4xQ-Os`9Ra%paAUI|QZ3PP_rPQ9SykXrz>*(J3ovn(~mttdZN0qkw7Ox$iU
z!D${;ZwhX=nBvr{4|I$^C~}b^8zuxyK_DhP=>j?M#Gjf6Oz}m)r2XCZIWSu>YJ0jk
zhE&{IGR4-L*-@a)e713_NN4Mh?4~(ax8BN}?#I-$XqkCMctk{GM(P?-9o{4V7j@j?
z&^)?6Jwd4Nao_D&_Iat_6XKuEojcpD#y(dfnQtNgYBim>2Qr&Fo^rGmFbn_qCL-Kh
zYS9{R`Q{+UHs6YvCX2Vx(?lzHM64Ri@AfC2eRc3?8k79a%@HyOX3pE6vQh44NrI-j
z8h_=Q-<3BQW=~C8*rYV=5bKtI%0GeyrdI8n_H{z`or8QP#rN;Uun5;S)TC`UXw9Ck
zr$5c%-;A=(yA!*4ql*dyciZu5_O8wBy|SHkP5%6!*9sy8vO~AJ&rJy4{Pv~A?8v_@
zsq$+*mb;3tEBVxNjLpW~O83Y;CYv+M+T2g<l`wngz+yae%LeY~#+$YW_o;kWKfu6x
W+Q$8Y?u{H!apLLf=d#Wzp$P!&h@T7q

literal 0
HcmV?d00001

diff --git a/src/views/HomePop/ringMainUnit.vue b/src/views/HomePop/ringMainUnit.vue
index 3bee1d3..07bef9a 100644
--- a/src/views/HomePop/ringMainUnit.vue
+++ b/src/views/HomePop/ringMainUnit.vue
@@ -392,7 +392,7 @@ export default {
     //查询所有网柜信息
     getDeviceData() {
       let params = {
-        pageSize: 1000,
+        pageSize: 50,
         token: localStorage.getItem("token"),
       };
       getCabinetList(params).then((res) => {
diff --git a/src/views/index.vue b/src/views/index.vue
index 9b4d45e..4471f69 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -68,7 +68,7 @@
                       rgb(86, 244, 254)
                     );
                   "
-                   class="numText"
+                  class="numText"
                   :text="CompanyInfo.xlcd"
                   >{{ CompanyInfo.xlcd }}</span
                 >
@@ -108,7 +108,7 @@
             :header-cell-style="{ 'text-align': 'center' }"
             :cell-style="{ 'text-align': 'center' }"
             ref="tableBox"
-            style="font-size:16px"
+            style="font-size: 16px"
           >
             <el-table-column label="" align="center" width="20">
               <template slot-scope="scop">
@@ -206,9 +206,9 @@
         <div class="unityEnlargeBtn">
           <div
             class="content"
-            v-for="(item, index) in btnEnlarge"
+            v-for="(item, index) in enlargeShow == true ? btnEnlarge : btnEnlarge1"
             :key="index"
-            @click="enlargeBtn(index)"
+            @click="enlargeShow == true ? enlargeBtn(index) : enlargeBtn1(index)"
           >
             <img :src="item.icon" style="margin: 7px" />
           </div>
@@ -217,15 +217,17 @@
           <div class="unitySuosou">
             <img src="../assets/images/sousuo.png" style="margin-top: 16px" />
           </div>
-          <el-select v-model="value" clearable placeholder="请选择线路">
-            <el-option
-              v-for="(item, index) in options"
-              :key="index"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
+          <div class="selectChange">
+            <el-select v-model="value" clearable placeholder="请选择线路">
+              <el-option
+                v-for="(item, index) in options"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
         </div>
       </div>
       <div class="detailed" id="detailed">
@@ -363,10 +365,7 @@
             :cell-style="{ 'text-align': 'center' }"
             stripe
           >
-            <el-table-column label="序号" align="center">
-              <template slot-scope="scop">
-                {{ scop.$index + 1 }}
-              </template>
+            <el-table-column label="序号" align="center" prop="id">
             </el-table-column>
             <el-table-column prop="name" label="报警信息" align="center">
             </el-table-column>
@@ -398,6 +397,7 @@ import {
   getPbtyqk,
   getCabinetInfo,
   getCabinetList,
+  getfaultReportList
 } from "../api/index.js";
 import ringMainUnit from "./HomePop/ringMainUnit.vue";
 export default {
@@ -407,16 +407,12 @@ export default {
   },
   data() {
     return {
+      enlargeShow:true,
       dataGzList: [], //年故障数组
       dateList: ["周", "月"],
       acolor: true, //是否展示颜色
       currentIndex: -1,
-      alarmInformationData: [
-        {
-          name: "告警信息",
-          date: "2022",
-        },
-      ],
+      alarmInformationData: [],
       alarmInformationShow: false, //报警详情信息弹窗
       realTimeAlarmShow: false, //实时报警弹窗
       modelOthers: false,
@@ -451,6 +447,14 @@ export default {
           icon: require("@/assets/images/btnFangDa.png"),
         },
       ],
+      btnEnlarge1: [
+        {
+          icon: require("@/assets/images/btnTiShi.png"),
+        },
+        {
+          icon: require("@/assets/images/suoxiao.png"),
+        },
+      ],
       options: [
         {
           value: "",
@@ -479,6 +483,9 @@ export default {
       option: null,
       myChartBin: null,
     };
+  },
+  created(){
+
   },
   mounted() {
     this.beginShowing();
@@ -490,7 +497,6 @@ export default {
     // 盐都区供电公司概况
     getCompanyInfo().then((res) => {
       this.CompanyInfo = res.data.data;
-      console.log(this.CompanyInfo, "res.data.data");
     });
     // 查询总线路
     getLine({ action: "all" }).then((res) => {
@@ -577,6 +583,15 @@ export default {
         that.device = res.val;
       }
     });
+    //历史故障接口
+    let faultData = {
+        token: localStorage.getItem("token"),
+        pageSize:'500',
+        page:'1'
+      };
+    getfaultReportList(faultData).then((res)=>{
+      this.alarmInformationData = res.data.data.data
+    })
   },
   // beforeDestroy() {
   //   this.dataDestroy(); // 页面摧毁前，关闭定时器
@@ -802,7 +817,7 @@ export default {
           containLabel: true,
         },
         legend: {
-          top:10,
+          top: 10,
           icon: "rect",
           right: 25,
           data: ["线路重超载", "配变重超载", "低电压"],
@@ -1050,10 +1065,10 @@ export default {
           icon: "pin",
           top: 120,
           // bottom:0,
-          right:20,
-          orient: 'vertical',  //垂直显示
-             y: 'center',    //延Y轴居中
-             
+          right: 20,
+          orient: "vertical", //垂直显示
+          y: "center", //延Y轴居中
+
           data: [
             {
               name: "频繁停电",
@@ -1131,9 +1146,9 @@ export default {
             label: {
               normal: {
                 formatter: function (params) {
-                    return params.data.name + ":" + params.data.type + "个";
+                  return params.data.name + ":" + params.data.type + "个";
                 },
-                color: 'auto',
+                color: "auto",
                 show: true,
                 fontSize: 16,
               },
@@ -1175,7 +1190,6 @@ export default {
         yearWchz.push(dataList[i].wchz);
         yearJieDi.push(dataList[i].jiedi);
       }
-      console.log(yearChcg,'yearBzData');
       let that = this;
       var myChart = this.$echarts.init(document.getElementById("detailedFour"));
       var option = {
@@ -1191,7 +1205,7 @@ export default {
         grid: {
           borderWidth: 0,
           top: 30,
-          bottom: '17%',
+          bottom: "17%",
           left: "6%",
           right: "6%",
           textStyle: {
@@ -1230,7 +1244,7 @@ export default {
             axisLabel: {
               interval: 0,
               fontSize: 14,
-               rotate: 30
+              rotate: 30,
             },
             data: yearBzData,
           },
@@ -1271,13 +1285,13 @@ export default {
             barGap: "10%",
             label: {
               show: true,
-              formatter:function(params){
+              formatter: function (params) {
                 if (params.value == 0) {
-                  return ''                  
-                }else{
-                  return params.value
+                  return "";
+                } else {
+                  return params.value;
                 }
-              }
+              },
             },
             itemStyle: {
               normal: {
@@ -1318,13 +1332,13 @@ export default {
             stack: "Total1",
             label: {
               show: true,
-              formatter:function(params){
+              formatter: function (params) {
                 if (params.value == 0) {
-                  return ''                  
-                }else{
-                  return params.value
+                  return "";
+                } else {
+                  return params.value;
                 }
-              }
+              },
             },
             itemStyle: {
               normal: {
@@ -1365,13 +1379,13 @@ export default {
             stack: "Total1",
             label: {
               show: true,
-              formatter:function(params){
+              formatter: function (params) {
                 if (params.value == 0) {
-                  return ''                  
-                }else{
-                  return params.value
+                  return "";
+                } else {
+                  return params.value;
                 }
-              }
+              },
             },
             itemStyle: {
               normal: {
@@ -1413,13 +1427,13 @@ export default {
             stack: "Total1",
             label: {
               show: true,
-              formatter:function(params){
+              formatter: function (params) {
                 if (params.value == 0) {
-                  return ''                  
-                }else{
-                  return params.value
+                  return "";
+                } else {
+                  return params.value;
                 }
-              }
+              },
             },
             itemStyle: {
               normal: {
@@ -1536,7 +1550,7 @@ export default {
             interval: 0,
             textStyle: {
               color: "#ffffff", //X轴文字颜色
-              fontSize:'16px',
+              fontSize: "16px",
             },
           },
         },
@@ -1753,16 +1767,33 @@ export default {
         this.alarmInformationShow = true;
         this.realTimeAlarmShow = false;
       } else if (index == 1) {
+        this.enlargeShow = false
         // this.$refs.iframe.contentWindow.fullscreen(1);
-        document.getElementById('left').style.display  = 'none'
-        document.getElementById('left').style.width  = '0'
-        document.getElementById('right').style.display  = 'none'
-        document.getElementById('right').style.width  = '0'
-        document.getElementById('middle').style.width  = '100%'
-        document.getElementById('detailed').style.height  = '0'
-        document.getElementById('detailed').style.display  = 'none'
-        document.getElementById('threeModel').style.height  = '100%'
-        document.getElementById('threeModel').style.width  = '100%'
+        document.getElementById("left").style.display = "none";
+        document.getElementById("right").style.display = "none";
+        document.getElementById("middle").style.width = "100%";
+        document.getElementById("middle").style.height = "100%";
+        document.getElementById("detailed").style.display = "none";
+        document.getElementById("threeModel").style.height = "100%";
+        document.getElementById("threeModel").style.width = "100%";
+      }
+    },
+    //报警详情信息弹窗
+    enlargeBtn1(index) {
+      if (index == 0) {
+        this.alarmInformationShow = true;
+        this.realTimeAlarmShow = false;
+      } else if (index == 1) {
+        this.enlargeShow = true
+        // this.$refs.iframe.contentWindow.fullscreen(1);
+        document.getElementById("left").style.display = "flex";
+        document.getElementById("left").style.width = "21.18%";
+        document.getElementById("right").style.display = "flex";
+        document.getElementById("right").style.width = "21.18%";
+        document.getElementById("middle").style.width = "55.7%";
+        document.getElementById("middle").style.height = "100%";
+        document.getElementById("detailed").style.display = "flex";
+        document.getElementById("detailed").style.height = "350px";
       }
     },
     handleClose() {
@@ -1884,10 +1915,12 @@ export default {
   /deep/ .el-table th.el-table__cell > .cell {
     color: rgb(86, 254, 226);
   }
-  /deep/.el-table__body, .el-table__footer, .el-table__header{
+  /deep/.el-table__body,
+  .el-table__footer,
+  .el-table__header {
     width: 100% !important;
   }
-  /deep/ .el-table__body td .cell{
+  /deep/ .el-table__body td .cell {
     // width: 60px !important;
   }
   // &::before {
@@ -1912,7 +1945,7 @@ export default {
   box-sizing: border-box;
   .left {
     // width: 604px;
-    width:21.18%;
+    width: 21.18%;
     height: 100%;
     display: flex;
     flex-flow: column nowrap;
@@ -1952,23 +1985,22 @@ export default {
               flex-flow: column nowrap;
               justify-content: center;
               align-items: center;
-              color: #ffffff ;
-              .numText{
-                color: #ffffff ;
+              color: #ffffff;
+              .numText {
+                color: #ffffff;
               }
               .numText:before {
-              content: attr(text);
-              position: absolute;
-              z-index: 10;
-              color: rgb(86, 254, 246) !important;
-              -webkit-mask: linear-gradient(
-                to top,
-                rgb(86, 244, 254),
-                transparent
-              );
+                content: attr(text);
+                position: absolute;
+                z-index: 10;
+                color: rgb(86, 254, 246) !important;
+                -webkit-mask: linear-gradient(
+                  to top,
+                  rgb(86, 244, 254),
+                  transparent
+                );
+              }
             }
-            }
-            
           }
           .info {
             display: flex;
@@ -2006,7 +2038,7 @@ export default {
   }
   .middle {
     // width: 1590px;
-    width:55.7%;
+    width: 55.7%;
     height: 100%;
     display: flex;
     flex-flow: column nowrap;
@@ -2034,7 +2066,7 @@ export default {
           margin-right: 15px;
         }
         .btnAct {
-          color: rgb(244,201,7);
+          color: rgb(244, 201, 7);
           background: url("../assets/images/unityBtn.png") no-repeat;
           background-size: 100% 100%;
           margin-right: 15px;
@@ -2079,6 +2111,7 @@ export default {
         position: absolute;
         left: 40px;
         width: 222px;
+        height: 5%;
         bottom: 20px;
         display: flex;
         align-items: center;
@@ -2140,7 +2173,7 @@ export default {
   }
   .right {
     // width: 604px;
-    width:21.28%;
+    width: 21.28%;
     height: 100%;
     display: flex;
     flex-flow: column nowrap;
@@ -2366,52 +2399,59 @@ export default {
   bottom: 0;
   right: 0;
 }
+
+// }
 </style>
 <style lang="less">
-.el-select {
-  margin-left: -44px;
-
-  .el-input__inner {
-    background: url("../assets/images/selectCard.png") no-repeat;
-    background-size: 100% 100%;
-    border: none;
-    padding-left: 58px;
-  }
-  .el-input__prefix,
-  .el-input__suffix {
-    position: absolute;
-    top: 0;
-    -webkit-transition: all 0.3s;
-    height: 100%;
-    text-align: center;
-    margin-right: 17px;
-  }
-  .el-input__inner::-webkit-input-placeholder {
-    color: rgb(78, 230, 207) // 初始化的文字颜色
-;
-  }
-  .el-input__inner {
-    color: rgb(78, 230, 207);
-  }
-}
-.el-select-dropdown {
-  background-color: rgb(14, 30, 46) !important;
-  border: 1px solid rgba(45, 143, 148, 0.5) !important ;
-  .el-select-dropdown__item {
-    color: #fff !important;
-  }
-  .el-select-dropdown__item.hover,
-  .el-select-dropdown__item:hover {
-    background-color: rgb(18, 54, 87) !important;
-  }
-}
-.el-popper{
-    top: 50% !important;
-    .popper__arrow{
-          left: 171px !important;
-          top: 95px !important;
+// .selectChange {
+  // width: 100% !important;
+  // height: 100% !important;
+   .el-select {
+    margin-left: -44px;
+    .el-input__inner {
+      background: url("../assets/images/selectCard.png") no-repeat;
+      background-size: 100% 100%;
+      border: none;
+      padding-left: 58px;
     }
+     .el-input__prefix,
+     .el-input__suffix {
+      position: absolute;
+      top: 0;
+      -webkit-transition: all 0.3s;
+      height: 100%;
+      text-align: center;
+      margin-right: 17px;
+    }
+     .el-input__inner::-webkit-input-placeholder {
+      color: rgb(78, 230, 207); // 初始化的文字颜色
+    }
+     .el-input__inner {
+      color: rgb(78, 230, 207);
+    }
+  }
+   .el-select-dropdown {
+    background-color: rgb(14, 30, 46) !important;
+    border: 1px solid rgba(45, 143, 148, 0.5) !important ;
+    .el-select-dropdown__item {
+      color: #fff !important;
+    }
+     .el-select-dropdown__item.hover,
+     .el-select-dropdown__item:hover {
+      background-color: rgb(18, 54, 87) !important;
+    }
+  }
+  //  .el-popper {
+  //   top: 50%;
+  // }
+  .el-popper[x-placement^=bottom] {
+    margin-top: -146px !important;
 }
+   .popper__arrow {
+    left: 171px !important;
+    top: 95px !important;
+  }
+// }
 /**
 表格有滚动效果但是不显示滚动条
 */