常规上传

src/themeBlue.less

@@ -1,3 +1,4 @@
+// 蓝色主题
 // 主色
 @mc1: #09172b;
 @mc2: #142446;
@@ -25,7 +26,7 @@
 @jbs5: linear-gradient(to right, #f1880c, #ffd179);
 @jbs6: linear-gradient(to right, #ff293d, #ff9ea7);
 
-@green          : #05bb4c;
+@green          : #2169C3;
 @gray           : #606769;
 @gray-l         : #000;
 @picker-bg-color: fade(rgb(3, 7, 19), 95);
@@ -40,6 +41,31 @@
 // 蓝色主题
 .nsfStyle {
     #app {
+
+        .com-panel2.green {
+            .panel-icon2 {
+                color: #2169c3;
+            }
+
+            .panel-header2::after {
+                background-image: linear-gradient(to right, #175dd2, rgba(5, 187, 76, 0)) !important;
+            }
+
+
+        }
+
+        .agc {
+            .data-item-count {
+                color: #2169c3;
+            }
+
+            .panel-tools2 {
+                .value {
+                    color: #2169c3;
+                }
+            }
+        }
+
         #screen {
             .menu {
                 .menu-item.active {

src/themeDark.less

@@ -1,3 +1,4 @@
+// 绿色主题
 // 主色
 @mc1: #040c0b;
 @mc2: #313233;
@@ -45,7 +46,6 @@
     }
 
     #app {
-
         .themeDarkHome {
             background: @mc1  !important;
         }

src/views/stateMonitor/Agc/Agc.vue

@@ -54,50 +54,7 @@ export default {
     // 请求服务
     requestData() {
       let that = this;
-      let datas = that.setFakeData(8);
-      console.log(1122, datas);
-      datas.forEach((pEle) => {
-        pEle.jcxx.icon = "fa fa-gears";
-        pEle.jcxx.color = pEle.jcxx.zt === 0 ? "red" : "green";
-
-        let keys = ["llgl", "sjgl", "xdzl", "ycgl"];
-
-        let tb = [
-          {
-            title: "理论功率",
-            yAxisIndex: 0,
-            value: [],
-          },
-          {
-            title: "实际功率",
-            yAxisIndex: 0,
-            value: [],
-          },
-          {
-            title: "限电指令",
-            yAxisIndex: 0,
-            value: [],
-          },
-          {
-            title: "预测功率",
-            yAxisIndex: 0,
-            value: [],
-          },
-        ];
-
-        keys.forEach((key, keyIndex) => {
-          pEle.tb.forEach((cEle, cIndex) => {
-            tb[keyIndex].value.push({
-              text: new Date(cEle.time).formatDate("hh:mm"),
-              value: cEle[keys[keyIndex]] || 0,
-            });
-          });
-        });
-
-        pEle.tb = tb;
-        datas.push(pEle);
-      });
-      that.datas = datas;
+      that.datas = that.setFakeData(8);
       return;
 
       getAgcDatas({
@@ -116,21 +73,27 @@ export default {
     setFakeData(length) {
       let data = [];
       for (let i = 0; i < length; i++) {
-        data.push({
+        let pEle = {
           jcxx: {
             name: `某某场站${i + 1}`,
             icon: "fa fa-gears",
-            ddmc: "副标题",
-            AGC001: 300,
-            AGC002: 300,
-            AGC003: 300,
-            AGC004: 300,
-            AGC005: 1,
-            AGC006: 0,
-            AGC007: 1,
-            AGC008: 0,
-            ZZSGL: 300,
-            ycgl: 500,
+            ddmc: this.BASE.randomNum(100, 200),
+            cxgl: this.BASE.randomNum(10, 100),
+            xdzl: this.BASE.randomNum(10, 100),
+            ygsx: this.BASE.randomNum(10, 100),
+            ygxx: this.BASE.randomNum(10, 100),
+            dysjz: this.BASE.randomNum(10, 100),
+            dytkz: this.BASE.randomNum(10, 100),
+            mxkjwg: this.BASE.randomNum(10, 100),
+            mxkzwg: this.BASE.randomNum(10, 100),
+            agcyf: this.BASE.randomNum(0, 1),
+            agctt: this.BASE.randomNum(0, 1),
+            agcjbs: this.BASE.randomNum(0, 1),
+            agczbs: this.BASE.randomNum(0, 1),
+            avcwx: this.BASE.randomNum(0, 1),
+            avctt: this.BASE.randomNum(0, 1),
+            avcjbs: this.BASE.randomNum(0, 1),
+            avczbs: this.BASE.randomNum(0, 1),
           },
           tb: [
             {
@@ -169,7 +132,47 @@ export default {
               ycgl: this.BASE.randomNum(10, 50),
             },
           ],
+        };
+
+        pEle.jcxx.icon = "fa fa-gears";
+        pEle.jcxx.color = pEle.jcxx.zt === 0 ? "red" : "green";
+
+        let keys = ["llgl", "sjgl", "xdzl", "ycgl"];
+
+        let tb = [
+          {
+            title: "理论功率",
+            yAxisIndex: 0,
+            value: [],
+          },
+          {
+            title: "实际功率",
+            yAxisIndex: 0,
+            value: [],
+          },
+          {
+            title: "限电指令",
+            yAxisIndex: 0,
+            value: [],
+          },
+          {
+            title: "预测功率",
+            yAxisIndex: 0,
+            value: [],
+          },
+        ];
+
+        keys.forEach((key, keyIndex) => {
+          pEle.tb.forEach((cEle, cIndex) => {
+            tb[keyIndex].value.push({
+              text: new Date(cEle.time).formatDate("hh:mm"),
+              value: cEle[keys[keyIndex]] || 0,
+            });
+          });
         });
+
+        pEle.tb = tb;
+        data.push(pEle);
       }
       return data;
     },

src/views/stateMonitor/Agc/components/agc-panel.vue

@@ -1,109 +1,136 @@
 <template>
   <ComPanel
+    class="agcMg"
     v-if="data && data.jcxx"
     :title="data.jcxx.name || '---'"
     :icon="data.jcxx.icon"
     :subTitle="data.jcxx.ddmc || '---'"
     :color="data.jcxx.color"
   >
-    <table class="panel-table">
-      <tbody>
-        <tr>
-          <td colspan="2">
-            <div class="data-item">
-              <span class="data-item-name">有功设定限值</span>
-              <span class="data-item-count">{{ data.jcxx.AGC002 }}</span>
-              <span class="data-item-unit">MW</span>
-            </div>
-          </td>
-          <td colspan="2">
-            <div class="data-item">
-              <span class="data-item-name">出线功率</span>
-              <span class="data-item-count">{{ data.jcxx.AGC001 }}</span>
-              <span class="data-item-unit">MW</span>
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <div class="data-item">
-              <span class="data-item-name">AGC可调上限</span>
-              <span class="data-item-count">{{ data.jcxx.AGC003 }}</span>
-              <span class="data-item-unit">MW</span>
-            </div>
-          </td>
-          <td colspan="2">
-            <div class="data-item">
-              <span class="data-item-name">理论功率</span>
-              <span class="data-item-count">{{ data.jcxx.ZZSGL }}</span>
-              <span class="data-item-unit">MW</span>
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <div class="data-item">
-              <span class="data-item-name">AGC可调下限</span>
-              <span class="data-item-count">{{ data.jcxx.AGC004 }}</span>
-              <span class="data-item-unit">MW</span>
-            </div>
-          </td>
-          <td colspan="2">
-            <div class="data-item">
-              <span class="data-item-name">预测功率</span>
-              <span class="data-item-count">{{ data.jcxx.ycgl || 0 }}</span>
-              <span class="data-item-unit">MW</span>
-            </div>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <div class="data-item">
-              <span class="data-item-name">AGC投入</span>
-              <i
-                :class="
-                  'data-item-icon fa fa-chrome ' +
-                  (data.jcxx.AGC006 === 1 ? 'red' : 'green')
-                "
-              ></i>
-            </div>
-          </td>
-          <td>
-            <div class="data-item">
-              <span class="data-item-name">AGC远方</span>
-              <i
-                :class="
-                  'data-item-icon fa fa-chrome ' +
-                  (data.jcxx.AGC005 === 1 ? 'red' : 'green')
-                "
-              ></i>
-            </div>
-          </td>
-          <td>
-            <div class="data-item">
-              <span class="data-item-name">有功增闭锁</span>
-              <i
-                :class="
-                  'data-item-icon fa fa-chrome ' +
-                  (data.jcxx.AGC008 === 1 ? 'red' : 'green')
-                "
-              ></i>
-            </div>
-          </td>
-          <td>
-            <div class="data-item">
-              <span class="data-item-name">有功减闭锁</span>
-              <i
-                :class="
-                  'data-item-icon fa fa-chrome ' +
-                  (data.jcxx.AGC007 === 1 ? 'red' : 'green')
-                "
-              ></i>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="agcDetailBox">
+      <div class="l">
+        <div class="data-item tac">AGC</div>
+        <div class="data-item">
+          <span class="data-item-name">出线功率</span>
+          <span class="data-item-count">{{ data.jcxx.cxgl }}</span>
+          <span class="data-item-unit">MW</span>
+        </div>
+        <div class="data-item">
+          <span class="data-item-name">限电指令</span>
+          <span class="data-item-count">{{ data.jcxx.xdzl }}</span>
+          <span class="data-item-unit">MW</span>
+        </div>
+        <div class="data-item">
+          <span class="data-item-name">有功上限</span>
+          <span class="data-item-count">{{ data.jcxx.ygsx }}</span>
+          <span class="data-item-unit">MW</span>
+        </div>
+        <div class="data-item">
+          <span class="data-item-name">有功下限</span>
+          <span class="data-item-count">{{ data.jcxx.ygxx }}</span>
+          <span class="data-item-unit">MW</span>
+        </div>
+        <div class="agcIconBox">
+          <div class="data-item icon">
+            <span class="data-item-name">远方</span>
+            <i
+              :class="
+                'data-item-icon fa fa-chrome ' +
+                (data.jcxx.agcyf === 1 ? 'red' : 'green')
+              "
+            ></i>
+          </div>
+          <div class="data-item icon">
+            <span class="data-item-name">投退</span>
+            <i
+              :class="
+                'data-item-icon fa fa-chrome ' +
+                (data.jcxx.agctt === 1 ? 'red' : 'green')
+              "
+            ></i>
+          </div>
+          <div class="data-item icon">
+            <span class="data-item-name">减闭锁</span>
+            <i
+              :class="
+                'data-item-icon fa fa-chrome ' +
+                (data.jcxx.agcjbs === 1 ? 'red' : 'green')
+              "
+            ></i>
+          </div>
+          <div class="data-item icon">
+            <span class="data-item-name">增闭锁</span>
+            <i
+              :class="
+                'data-item-icon fa fa-chrome ' +
+                (data.jcxx.agczbs === 1 ? 'red' : 'green')
+              "
+            ></i>
+          </div>
+        </div>
+      </div>
+      <div class="r">
+        <div class="data-item tac">AVC</div>
+        <div class="data-item">
+          <span class="data-item-name">电压实际值</span>
+          <span class="data-item-count">{{ data.jcxx.dysjz }}</span>
+          <span class="data-item-unit">MW</span>
+        </div>
+        <div class="data-item">
+          <span class="data-item-name">电压调控制</span>
+          <span class="data-item-count">{{ data.jcxx.dytkz }}</span>
+          <span class="data-item-unit">MW</span>
+        </div>
+        <div class="data-item">
+          <span class="data-item-name">母线可减无功</span>
+          <span class="data-item-count">{{ data.jcxx.mxkjwg }}</span>
+          <span class="data-item-unit">Mvar</span>
+        </div>
+        <div class="data-item">
+          <span class="data-item-name">母线可增无功</span>
+          <span class="data-item-count">{{ data.jcxx.mxkzwg }}</span>
+          <span class="data-item-unit">Mvar</span>
+        </div>
+        <div class="agcIconBox">
+          <div class="data-item icon">
+            <span class="data-item-name">无线</span>
+            <i
+              :class="
+                'data-item-icon fa fa-chrome ' +
+                (data.jcxx.avcwx === 1 ? 'red' : 'green')
+              "
+            ></i>
+          </div>
+          <div class="data-item icon">
+            <span class="data-item-name">投退</span>
+            <i
+              :class="
+                'data-item-icon fa fa-chrome ' +
+                (data.jcxx.avctt === 1 ? 'red' : 'green')
+              "
+            ></i>
+          </div>
+          <div class="data-item icon">
+            <span class="data-item-name">减闭锁</span>
+            <i
+              :class="
+                'data-item-icon fa fa-chrome ' +
+                (data.jcxx.avcjbs === 1 ? 'red' : 'green')
+              "
+            ></i>
+          </div>
+          <div class="data-item icon">
+            <span class="data-item-name">增闭锁</span>
+            <i
+              :class="
+                'data-item-icon fa fa-chrome ' +
+                (data.jcxx.avczbs === 1 ? 'red' : 'green')
+              "
+            ></i>
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- 查看默认实例去除末尾参数 :list 即可 -->
     <DoubleLineChart
       v-if="chartType === 'double'"
@@ -130,7 +157,7 @@
 </template>
 
 <script>
-import ComPanel from "@com/coms/panel/panel2.vue";
+import ComPanel from "./panel.vue";
 import DoubleLineChart from "@com/chart/line/marker-line-chart.vue";
 import MultipleLineChart from "@com/chart/line/multiple-line-chart.vue";
 export default {
@@ -313,35 +340,81 @@ export default {
 </script>
 
 <style lang="less">
-.panel-table {
+.agcMg {
+  margin-bottom: 8px;
+}
+.agcDetailBox {
   width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
-  .data-item {
-    background-color: fade(@gray, 20);
-    padding: 0.278vh;
-    padding-left: 0.7407vh;
-    font-size: 1.204vh;
+  .l,
+  .r {
+    width: 49%;
     display: flex;
-    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
 
-    .data-item-name {
-      color: @gray;
+    .agcIconBox {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 4px;
+      flex-wrap: wrap;
     }
 
-    .data-item-count {
-      color: @green;
-      margin-left: auto;
-      margin-right: 0.556vh;
-    }
+    .data-item {
+      width: 100%;
+      background-color: fade(@gray, 20);
+      padding: 0.278vh;
+      padding-left: 0.7407vh;
+      font-size: 1.204vh;
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 2px;
 
-    .data-item-unit {
-      color: @gray;
-    }
+      &.icon {
+        width: 48%;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .data-item-name {
+        color: @gray;
+      }
+
+      .data-item-count {
+        color: @green;
+        margin-left: auto;
+        margin-right: 0.556vh;
+      }
+
+      .data-item-unit {
+        color: @gray;
+      }
+
+      .data-item-icon {
+        margin: auto;
+        margin-right: 0;
+        font-size: @fontsize-s;
+      }
+
+      &.tac {
+        justify-content: center;
+      }
+
+      &.mr {
+        margin-right: 5px;
+      }
 
-    .data-item-icon {
-      margin: auto;
-      margin-right: 0;
-      font-size: @fontsize-s;
+      &.ml {
+        margin-left: 5px;
+      }
     }
   }
 }

src/views/stateMonitor/Agc/components/panel.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="com-panel2" :class="(hasTitle ? '' : 'no-title') + ' ' + color">
+    <div v-if="hasTitle" class="panel-header2">
+      <div class="panel-title2">
+        <i v-if="hasIcon" class="panel-icon2" :class="icon"></i>
+        {{ title }}
+      </div>
+      <div class="panel-tools2">
+        <span class="desc">理论功率:</span>
+        <span class="value">{{ subTitle }}</span>
+        <span class="unit">MW</span>
+      </div>
+    </div>
+    <div class="panel-body2">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ComPanel",
+  componentName: "ComPanel",
+  props: {
+    title: String,
+    icon: String,
+    subTitle: String,
+    color: String,
+  },
+  computed: {
+    hasTitle() {
+      if (this.title) return true;
+      return false;
+    },
+    hasIcon() {
+      if (this.icon) return true;
+      return false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.com-panel2 {
+  border-left: 0.185vh solid rgba(255, 255, 255, 50%);
+  padding-left: 1.185vh;
+  position: relative;
+
+  &:before,
+  &:after {
+    content: " ";
+    width: 0.37vh;
+    height: 0.37vh;
+    background: @write;
+    position: absolute;
+    left: 0.185vh;
+  }
+
+  &:before {
+    top: 0.185vh;
+  }
+
+  &:after {
+    bottom: 0.185vh;
+  }
+
+  &.no-title {
+    border-left: 0vh;
+  }
+
+  &.no-title::before {
+    display: none;
+  }
+
+  &.green {
+    .panel-header2 {
+      &::after {
+        background-image: @greenLinearRight;
+        width: 10%;
+      }
+      .panel-title2 {
+        .panel-icon2 {
+          color: @green;
+        }
+      }
+    }
+  }
+
+  &.red {
+    .panel-header2 {
+      &::after {
+        background-image: @redLinearRight;
+        width: 10%;
+      }
+      .panel-title2 {
+        .panel-icon2 {
+          color: @red;
+        }
+      }
+    }
+  }
+
+  .panel-header2 {
+    display: flex;
+    font-size: @fontsize;
+    padding-left: 1.185vh;
+    background: fade(@gray, 20);
+    line-height: 2.963vh;
+    margin-bottom: 1.111vh;
+    position: relative;
+    justify-content: space-between;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 40vh;
+      height: 100%;
+    }
+
+    .panel-title2 {
+      color: @write;
+
+      .panel-icon2 {
+        margin-right: 10px;
+      }
+    }
+
+    .panel-tools2 {
+      padding: 0 10px;
+      color: #fff;
+      .value {
+        color: @green;
+        margin: 0 4px;
+        font-weight: 700;
+        font-size: 20px;
+      }
+    }
+  }
+
+  .panel-body2 {
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &.no-title .panel-body2 {
+    padding-left: 0vh;
+  }
+}
+</style>