常规上传

src/components/agcDetail/dataDetails.vue

@@ -498,6 +498,7 @@ export default {
   justify-content: center;
   height: 90vh;
   overflow-y: auto;
+  margin-top: 10px;
 }
 
 .body::-webkit-scrollbar {

src/components/agcDetail/detailsCharts.vue

@@ -36,7 +36,8 @@ export default {
   methods: {
     showEcharts(showData) {
       let chartDom = document.getElementById("showEcharts");
-        chartDom.removeAttribute("_echarts_instance_")
+      if(chartDom){
+    chartDom.removeAttribute("_echarts_instance_");
       let myChart = echarts.init(chartDom, "#ffffff");
       let option;
       option = {
@@ -130,6 +131,8 @@ export default {
         ],
       };
       option && myChart.setOption(option);
+      }
+    
     },
     opened() {},
     closed() {

src/components/agcDetail/index.vue

@@ -1,17 +1,286 @@
 <template>
   <div class="agcDetailBox">
+    <div class="wpBox">
+      <div
+        class="wpItem"
+        :class="activeTab === 'all' ? 'active' : ''"
+        @click="changeTab({ id: 'all' })"
+      >
+        全部
+      </div>
+      <div
+        class="wpItem"
+        :class="activeTab === item.id ? 'active' : ''"
+        v-for="(item, index) in station"
+        :key="index"
+        @click="changeTab(item)"
+      >
+        {{ item.name }}
+      </div>
+    </div>
     <DataDetails
       ref="detailst"
       :allDate="allDate"
       :allChartDate="allChartDate"
       :station="station"
       @handleClick="handleClicks"
+      v-show="activeTab === 'all'"
     ></DataDetails>
     <DetailsCharts
       v-model="detailsDisplay"
       :showData="showData"
       @closeds="closeds"
+      v-show="activeTab === 'all'"
     ></DetailsCharts>
+    <div class="wpInfoBox" v-show="activeTab !== 'all'">
+      <div class="table">
+        <div class="tableTitle">投退状态</div>
+        <div class="line">
+          <div class="key">AGC投退状态</div>
+          <div class="value"><div class="circle open"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">AVC投退状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">一期AGC投退状态</div>
+          <div class="value"><div class="circle open"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">一期AVC投退状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">二期AGC投退状态</div>
+          <div class="value"><div class="circle open"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">二期AVC投退状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">三期AGC投退状态</div>
+          <div class="value"><div class="circle open"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">三期AVC投退状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">SVG1无功控制投退状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">SVG2无功控制投退状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">AGC增闭锁信号</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">AGC减闭锁信号</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">AVC增闭锁信号</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">AVC减闭锁信号</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+      </div>
+      <div class="table">
+        <div class="tableTitle">运行信息</div>
+        <div class="line">
+          <div class="key">AGC工作状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">SVG1运行状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">SVG2运行状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">AGC一期风机状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">AGC二期风机状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">AGC三期风机状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+      </div>
+      <div class="table">
+        <div class="tableTitle">调度指令</div>
+        <div class="line">
+          <div class="key">AGC下发有功</div>
+          <div class="value">7.42</div>
+          <div class="unit">MW</div>
+        </div>
+        <div class="line">
+          <div class="key">AGC风机总有功</div>
+          <div class="value">0</div>
+          <div class="unit">MW</div>
+        </div>
+        <div class="line">
+          <div class="key">AGC上限</div>
+          <div class="value">0.94</div>
+        </div>
+        <div class="line">
+          <div class="key">AGC下限</div>
+          <div class="value">0.94</div>
+        </div>
+        <div class="line">
+          <div class="key">AGC电压目标值</div>
+          <div class="value">230</div>
+          <div class="unit">kV</div>
+        </div>
+        <div class="line">
+          <div class="key">实时跟踪电压指令</div>
+          <div class="value">228.18</div>
+          <div class="unit">kV</div>
+        </div>
+        <div class="line">
+          <div class="key">AVC上限</div>
+          <div class="value">0.94</div>
+        </div>
+        <div class="line">
+          <div class="key">AVC下限</div>
+          <div class="value">0.94</div>
+        </div>
+      </div>
+      <div class="table">
+        <div class="tableTitle">系统信息</div>
+        <div class="line">
+          <div class="key">AVC可增无功</div>
+          <div class="value">16.34</div>
+          <div class="unit">MVar</div>
+        </div>
+        <div class="line">
+          <div class="key">AVC可减无功</div>
+          <div class="value">16.34</div>
+          <div class="unit">MVar</div>
+        </div>
+        <div class="line">
+          <div class="key">AGC机组受控数</div>
+          <div class="value">99</div>
+        </div>
+        <div class="line">
+          <div class="key">AVC机组受控数</div>
+          <div class="value">99</div>
+        </div>
+        <div class="line">
+          <div class="key">AGC上升调节速率</div>
+          <div class="value">0</div>
+        </div>
+        <div class="line">
+          <div class="key">AGC下降调节速率</div>
+          <div class="value">0</div>
+        </div>
+        <div class="line">
+          <div class="key">AGC调节速率</div>
+          <div class="value">0</div>
+        </div>
+        <div class="line">
+          <div class="key">AGC发电能力</div>
+          <div class="value">0</div>
+        </div>
+      </div>
+      <div class="table">
+        <div class="tableTitle">风机信息</div>
+        <div class="line">
+          <div class="key">一期有功返回值</div>
+          <div class="value">34.4</div>
+          <div class="unit">MW</div>
+        </div>
+        <div class="line">
+          <div class="key">一期总有功</div>
+          <div class="value">0</div>
+          <div class="unit">MW</div>
+        </div>
+        <div class="line">
+          <div class="key">AGC上限</div>
+          <div class="value">0</div>
+        </div>
+        <div class="line">
+          <div class="key">AGC下限</div>
+          <div class="value">0</div>
+        </div>
+        <div class="line">
+          <div class="key">AVC上限</div>
+          <div class="value">0</div>
+        </div>
+        <div class="line">
+          <div class="key">AVC下限</div>
+          <div class="value">0</div>
+        </div>
+        <div class="line">
+          <div class="key">AGC与一期通信状态</div>
+          <div class="value"><div class="circle close"></div></div>
+        </div>
+      </div>
+      <div class="table">
+        <div class="tableTitle">1# SVG信息</div>
+        <div class="line">
+          <div class="key">并网点 Uab</div>
+          <div class="value">228.18</div>
+          <div class="unit">kV</div>
+        </div>
+        <div class="line">
+          <div class="key">三向总无功</div>
+          <div class="value">1.43</div>
+          <div class="unit">MVar</div>
+        </div>
+        <div class="line">
+          <div class="key">系统电压</div>
+          <div class="value">36.66</div>
+          <div class="unit">kV</div>
+        </div>
+        <div class="line">
+          <div class="key">无功增闭锁</div>
+          <div class="value"><div class="circle open"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">无功减闭锁</div>
+          <div class="value"><div class="circle open"></div></div>
+        </div>
+      </div>
+      <div class="table">
+        <div class="tableTitle">2# SVG信息</div>
+        <div class="line">
+          <div class="key">并网点 Uab</div>
+          <div class="value">228.18</div>
+          <div class="unit">kV</div>
+        </div>
+        <div class="line">
+          <div class="key">三向总无功</div>
+          <div class="value">1.43</div>
+          <div class="unit">MVar</div>
+        </div>
+        <div class="line">
+          <div class="key">系统电压</div>
+          <div class="value">36.66</div>
+          <div class="unit">kV</div>
+        </div>
+        <div class="line">
+          <div class="key">无功增闭锁</div>
+          <div class="value"><div class="circle open"></div></div>
+        </div>
+        <div class="line">
+          <div class="key">无功减闭锁</div>
+          <div class="value"><div class="circle open"></div></div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -27,6 +296,7 @@ export default {
   },
   data() {
     return {
+      activeTab: "all",
       station: [
         {
           id: "fc01",
@@ -168,6 +438,12 @@ export default {
     }
     this.allChartDate = allChartDate;
   },
+
+  methods: {
+    changeTab(item) {
+      this.activeTab = item.id;
+    },
+  },
 };
 </script>
 
@@ -176,5 +452,124 @@ export default {
   // padding-left: 3%;
   // padding-top: 2%;
   color: #fff;
+
+  .wpBox {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 30px;
+    margin-left: 9%;
+
+    .wpItem {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 12px;
+      padding: 4px 8px;
+      background: #000;
+      color: #fff;
+      border: 1px solid #999;
+      margin-right: 12px;
+      font-size: 12px;
+
+      &.active {
+        background: #1890ff;
+      }
+    }
+  }
+
+  .wpInfoBox {
+    margin: 0 9%;
+    border: 1px solid rgb(77, 77, 77);
+    margin-top: 10px;
+    padding: 12px;
+
+    .table {
+      margin: 0 0.5% 14px 0.5%;
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+
+      .tableTitle {
+        width: 100%;
+        font-size: 16px;
+        background: rgba(#1890ff, 0.75);
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 20px;
+        font-weight: 700;
+      }
+
+      .line {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        border: 1px solid rgb(77, 77, 77);
+        width: 20%;
+        box-sizing: border-box;
+
+        & div {
+          border-right: 1px solid rgb(77, 77, 77);
+
+          &:last-child {
+            border: 0;
+          }
+        }
+
+        .key,
+        .value,
+        .unit {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 8px 0;
+          font-size: 12px;
+        }
+
+        .key {
+          width: 60%;
+        }
+
+        .value {
+          flex: 1;
+          color: #67c23a;
+          .circle {
+            &.open {
+              width: 12px;
+              height: 12px;
+              border: 1px solid #67c23a;
+              background: #67c23a;
+              border-radius: 50%;
+            }
+
+            &.close {
+              width: 12px;
+              height: 12px;
+              border: 1px solid #f25656;
+              background: #f25656;
+              border-radius: 50%;
+            }
+          }
+        }
+
+        .unit {
+          flex: 1;
+        }
+
+        &:hover {
+          border: 1px solid #1890ff;
+        }
+      }
+
+      &:hover {
+        .tableTitle {
+          background: #1890ff;
+        }
+      }
+    }
+  }
 }
 </style>