AGC模块完成

src/components/chart/line/multiple-line-chart.vue

@@ -41,15 +41,15 @@ export default {
             },
             {
               text: "4",
-              value: 3,
+              value: 4,
             },
             {
               text: "5",
-              value: 3,
+              value: 6,
             },
             {
               text: "6",
-              value: 3,
+              value: 2,
             },
             {
               text: "7",
@@ -57,7 +57,7 @@ export default {
             },
             {
               text: "8",
-              value: 3,
+              value: 8,
             },
             {
               text: "9",
@@ -65,15 +65,15 @@ export default {
             },
             {
               text: "10",
-              value: 3,
+              value: 2,
             },
             {
               text: "11",
-              value: 3,
+              value: 5,
             },
             {
               text: "12",
-              value: 3,
+              value: 8,
             },
             {
               text: "13",
@@ -81,7 +81,7 @@ export default {
             },
             {
               text: "14",
-              value: 3,
+              value: 9,
             },
             {
               text: "15",
@@ -89,11 +89,11 @@ export default {
             },
             {
               text: "16",
-              value: 3,
+              value: 2,
             },
             {
               text: "17",
-              value: 3,
+              value: 1,
             },
             {
               text: "18",
@@ -101,23 +101,23 @@ export default {
             },
             {
               text: "19",
-              value: 3,
+              value: 4,
             },
             {
               text: "20",
-              value: 3,
+              value: 9,
             },
             {
               text: "21",
-              value: 3,
+              value: 2,
             },
             {
               text: "22",
-              value: 3,
+              value: 1,
             },
             {
               text: "23",
-              value: 3,
+              value: 2,
             },
             {
               text: "24",
@@ -129,27 +129,27 @@ export default {
             },
             {
               text: "26",
-              value: 3,
+              value: 4,
             },
             {
               text: "27",
-              value: 3,
+              value: 9,
             },
             {
               text: "28",
-              value: 3,
+              value: 7,
             },
             {
               text: "29",
-              value: 3,
+              value: 4,
             },
             {
               text: "30",
-              value: 3,
+              value: 1,
             },
             {
               text: "31",
-              value: 3,
+              value: 2,
             },
           ],
         },
@@ -215,7 +215,7 @@ export default {
       default: () => ["(MW)", "(风速)"],
     },
   },
-  data() {
+  data () {
     return {
       id: "",
       chart: null,
@@ -223,17 +223,17 @@ export default {
     };
   },
   computed: {
-    datas() {
+    datas () {
       return this.list.map((t) => {
         return t.value;
       });
     },
-    xdata() {
+    xdata () {
       return this.list[0].value.map((t) => {
         return t.text;
       });
     },
-    series() {
+    series () {
       let result = [];
 
       this.list.forEach((value, index) => {
@@ -280,7 +280,7 @@ export default {
 
       return result;
     },
-    yAxis() {
+    yAxis () {
       let result = [];
       this.units.forEach((value, index) => {
         result.push({
@@ -304,7 +304,7 @@ export default {
     },
   },
   methods: {
-    hexToRgba(hex, opacity) {
+    hexToRgba (hex, opacity) {
       let rgbaColor = "";
       let reg = /^#[\da-f]{6}$/i;
       if (reg.test(hex)) {
@@ -312,7 +312,7 @@ export default {
       }
       return rgbaColor;
     },
-    initChart() {
+    initChart () {
       let option = {
         color: this.color,
         tooltip: {
@@ -322,7 +322,7 @@ export default {
             color: "#fff",
             fontSize: util.vh(16),
           },
-          formatter: function(param) {
+          formatter: function (param) {
             console.log(param);
             return param.name + "<br >" + param.marker + param.seriesName + "：" + param.value;
           },
@@ -354,16 +354,16 @@ export default {
       this.chart.setOption(option);
     },
   },
-  created() {
+  created () {
     this.id = "pie-chart-" + util.newGUID();
   },
-  mounted() {
+  mounted () {
     this.$el.style.width = this.width;
     this.$el.style.height = this.height;
     this.chart = echarts.init(this.$el);
     this.initChart();
   },
-  updated() {
+  updated () {
     this.initChart();
   },
 };

src/main.js

@@ -19,6 +19,26 @@ import axios from "@api/axios";
 // 引入基础工具
 import basicTool from "@tools/basicTool";
 
+/**
+ * 对 Date 的扩展，将 Date 转化为指定格式的字符串
+ * @param {String} fmt 传入一个字符串，根据所传字符串的格式返回转换后特定格式的日期，调用姿势：new Date().formatDate("yyyy-MM-dd hh:mm:ss");
+ */
+Date.prototype.formatDate = function (fmt) {
+  let o = {
+    "M+": this.getMonth() + 1, //月份 
+    "d+": this.getDate(), //日 
+    "h+": this.getHours(), //小时 
+    "m+": this.getMinutes(), //分 
+    "s+": this.getSeconds(), //秒 
+    "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
+    "S": this.getMilliseconds() //毫秒 
+  };
+  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+  for (let k in o)
+    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+  return fmt;
+}
+
 window.__STATICVUE__ = createApp(App);
 window.__STATICVUE__.use(ElementPlus);
 window.__STATICVUE__.use(store);

src/views/Agc/Agc.vue

@@ -4,7 +4,8 @@
       <!-- <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2> -->
     </div>
     <div class="panel-groups">
-      <AgcPanel class="panel-item" v-for="(data, index) of datas" :key="index" :data="data"></AgcPanel>
+      <AgcPanel class="panel-item" v-for="(data, index) of datas" :key="index" :data="data" chartType="multiple"
+        :chartData="data.tb"></AgcPanel>
     </div>
   </div>
 </template>
@@ -13,7 +14,6 @@
 import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
 import AgcPanel from "./components/agc-panel.vue";
 
-import { datainit, webtest } from "@tools/websocket.js";
 import store from "@store/index.js";
 
 export default {
@@ -27,9 +27,7 @@ export default {
   // 数据
   data () {
     return {
-      loadingFlg: false, // 遮罩开关
-      websocketServe: null, // websocket 服务实例
-      sourceMap: {}, // 核心数据
+      timmer: null, // 计时器
       datas: [
         {
           title: "某某风电场",
@@ -91,23 +89,69 @@ export default {
   // 函数
   methods: {
     select: function (item) {
-      console.log(item);
+      // console.log(item);
     },
-  },
 
-  created () {
-    let that = this;
-    that.loadingFlg = true;
-    that.BASE.showLoading();
-    that.$nextTick(() => {
-      that.websocketServe && that.websocketServe.disconnect();
+    // 请求服务
+    requestData (showLoading) {
+      let that = this;
       that.API.requestData({
+        showLoading,
         method: "POST",
-        subUrl: "admin/websocketdisconnect",
-        success () {
-          that.websocketServe = datainit("/topic/agc");
+        subUrl: "genreset/getAgcValues",
+        success (res) {
+          let datas = [];
+          if (res.data) {
+            res.data.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: String((cIndex + 1)), value: cEle[keys[keyIndex]] || 0 });
+                });
+              });
+
+              pEle.tb = tb;
+              datas.push(pEle);
+            });
+            that.datas = datas;
+          } else {
+            that.datas = datas;
+          }
         }
       });
+    }
+  },
+
+  created () {
+    let that = this;
+    that.$nextTick(() => {
+      that.requestData(true);
+      that.timmer = setInterval(() => {
+        that.requestData(false);
+      }, that.$store.state.websocketTimeSec);
     });
   },
 
@@ -121,24 +165,9 @@ export default {
     }
   },
 
-  beforeDestroy () {
-    // 离开页面，销毁 websocket 实例
-    this.websocketServe && this.websocketServe.disconnect();
-  },
-
-  watch: {
-    // 监听 websocket 回调并包装数据用于展示
-    '$store.state.windturbineMap': function (res) {
-      this.loadingFlg && this.BASE.closeLoading();
-      this.loadingFlg = false;
-      if (res) {
-        let sourceMap = JSON.parse(res);
-        this.sourceMap = sourceMap;
-      } else {
-        this.sourceMap = {};
-      }
-      console.log(111, this.sourceMap);
-    }
+  unmounted () {
+    clearInterval(this.timmer);
+    this.timmer = null;
   }
 };
 </script>

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

@@ -1,19 +1,20 @@
 <template>
-  <ComPanel :title="data.title" :icon="data.icon" :subTitle="data.subTitle" :color="data.color">
+  <ComPanel 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">47.40</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">47.40</span>
+              <span class="data-item-count">{{data.jcxx.SSZGL}}</span>
               <span class="data-item-unit">MW</span>
             </div>
           </td>
@@ -22,14 +23,14 @@
           <td colspan="2">
             <div class="data-item">
               <span class="data-item-name">AGC可调上限</span>
-              <span class="data-item-count">47.40</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">47.40</span>
+              <span class="data-item-count">{{data.jcxx.ZZSGL}}</span>
               <span class="data-item-unit">MW</span>
             </div>
           </td>
@@ -38,14 +39,14 @@
           <td colspan="2">
             <div class="data-item">
               <span class="data-item-name">AGC可调下限</span>
-              <span class="data-item-count">47.40</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">47.40</span>
+              <span class="data-item-count">{{data.jcxx.ycgl || 0}}</span>
               <span class="data-item-unit">MW</span>
             </div>
           </td>
@@ -54,37 +55,40 @@
           <td>
             <div class="data-item">
               <span class="data-item-name">AGC投入</span>
-              <i class="data-item-icon fa fa-chrome green"></i>
+              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC004 === 1 ? 'green' : 'red')"></i>
             </div>
           </td>
           <td>
             <div class="data-item">
               <span class="data-item-name">AGC远方</span>
-              <i class="data-item-icon fa fa-chrome green"></i>
+              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC005 === 1 ? 'green' : 'red')"></i>
             </div>
           </td>
           <td>
             <div class="data-item">
               <span class="data-item-name">有功增闭锁</span>
-              <i class="data-item-icon fa fa-chrome red"></i>
+              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC008 === 1 ? 'green' : 'red')"></i>
             </div>
           </td>
           <td>
             <div class="data-item">
               <span class="data-item-name">有功减闭锁</span>
-              <i class="data-item-icon fa fa-chrome red"></i>
+              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC007 === 1 ? 'green' : 'red')"></i>
             </div>
           </td>
         </tr>
       </tbody>
     </table>
-    <DoubleLineChart height="13.889vh"></DoubleLineChart>
+    <!-- 查看默认实例去除末尾参数 :list 即可 -->
+    <DoubleLineChart v-if="chartType=== 'double'" height="13.889vh" :list="chartData"></DoubleLineChart>
+    <MultipleLineChart v-if="chartType=== 'multiple'" height="13.889vh" :list="chartData"></MultipleLineChart>
   </ComPanel>
 </template>
 
 <script>
 import ComPanel from "@com/coms/panel/panel2.vue";
 import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
+import MultipleLineChart from "@com/chart/line/multiple-line-chart.vue";
 export default {
   // 名称
   name: "AgcPanel",
@@ -92,36 +96,45 @@ export default {
   components: {
     ComPanel,
     DoubleLineChart,
+    MultipleLineChart
   },
   // 传入参数
   props: {
     data: Object,
+    chartType: {
+      type: String,
+      default: "double"
+    },
+    chartData: {
+      type: Array,
+      default: []
+    }
   },
   // 自定义事件
   emits: {},
   // 数据
-  data() {
+  data () {
     return {};
   },
   // 函数
   methods: {},
   // 生命周期钩子
-  beforeCreate() {
+  beforeCreate () {
     // 创建前
   },
-  created() {
+  created () {
     // 创建后
   },
-  beforeMount() {
+  beforeMount () {
     // 渲染前
   },
-  mounted() {
+  mounted () {
     // 渲染后
   },
-  beforeUpdate() {
+  beforeUpdate () {
     // 数据更新前
   },
-  updated() {
+  updated () {
     // 数据更新后
   },
 };