常规上传

src/router/index.js

@@ -65,9 +65,9 @@ export const asyncRoutes = [
             {
             path: "agc",
             component: () => import("@/views/stateMonitor/Agc/Agc.vue"),
-            name: "agc",
+            name: "AGC监视",
             meta: {
-                title: "agc监视",
+                title: "AGC监视",
                 icon: "svg-s指标列表",
                 permissions: ["jn_fdcz_sjzb"],
             },
@@ -75,7 +75,7 @@ export const asyncRoutes = [
             {
             path: "powerPredictMatrix",
             component: () => import("@/views/stateMonitor/powerPredictMatrix"),
-            name: "agc",
+            name: "风功率监视",
             meta: {
                 title: "风功率监视",
                 icon: "svg-power-predict",

src/views/stateMonitor/Agc/Agc.vue

@@ -7,9 +7,12 @@
         class="panel-groups"
         style="box-sizing: border-box"
       >
-        <el-col :span="5.6" v-for="data of datas" :key="data.id">
-          <AgcPanel :obj="data"></AgcPanel>
-        </el-col>
+        <AgcPanel
+          class="panel-item"
+          v-for="(data, index) of datas"
+          :key="index"
+          :data="data"
+        ></AgcPanel>
       </el-row>
     </el-scrollbar>
   </div>
@@ -50,6 +53,53 @@ 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;
+      return;
+
       getAgcDatas({
         company:
           this.enterpriseIndex == "all" ? "0" : this.enterpriseIndex.toString(),
@@ -62,6 +112,67 @@ export default {
         }
       });
     },
+
+    setFakeData(length) {
+      let data = [];
+      for (let i = 0; i < length; i++) {
+        data.push({
+          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,
+          },
+          tb: [
+            {
+              time: "2025-04-27 11:03:49",
+              llgl: this.BASE.randomNum(10, 50),
+              sjgl: this.BASE.randomNum(10, 50),
+              xdzl: this.BASE.randomNum(10, 50),
+              ycgl: this.BASE.randomNum(10, 50),
+            },
+            {
+              time: "2025-04-27 11:03:49",
+              llgl: this.BASE.randomNum(10, 50),
+              sjgl: this.BASE.randomNum(10, 50),
+              xdzl: this.BASE.randomNum(10, 50),
+              ycgl: this.BASE.randomNum(10, 50),
+            },
+            {
+              time: "2025-04-27 11:03:49",
+              llgl: this.BASE.randomNum(10, 50),
+              sjgl: this.BASE.randomNum(10, 50),
+              xdzl: this.BASE.randomNum(10, 50),
+              ycgl: this.BASE.randomNum(10, 50),
+            },
+            {
+              time: "2025-04-27 11:03:49",
+              llgl: this.BASE.randomNum(10, 50),
+              sjgl: this.BASE.randomNum(10, 50),
+              xdzl: this.BASE.randomNum(10, 50),
+              ycgl: this.BASE.randomNum(10, 50),
+            },
+            {
+              time: "2025-04-27 11:03:49",
+              llgl: this.BASE.randomNum(10, 50),
+              sjgl: this.BASE.randomNum(10, 50),
+              xdzl: this.BASE.randomNum(10, 50),
+              ycgl: this.BASE.randomNum(10, 50),
+            },
+          ],
+        });
+      }
+      return data;
+    },
   },
   watch: {},
   created() {

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

@@ -1,176 +1,318 @@
 <template>
-  <div :class="$store.state.themeName == 'dark' ? 'dark-grid' : 'light-grid'">
-    <div
-      class="grid-content"
-      style="width: 443px"
-      :class="{
-        activeError: data?.agc009 == 1,
-        flash: data?.add,
-      }"
-      @click="handleMousenter"
+  <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">{{ 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>
+    <!-- 查看默认实例去除末尾参数 :list 即可 -->
+    <DoubleLineChart
+      v-if="chartType === 'double'"
+      height="13.889vh"
+      :list="data.tb || chartData"
+      @chartClick="chartClick($event)"
+      :isChartClick="true"
+    ></DoubleLineChart>
+    <!-- <MultipleLineChart v-if="chartType === 'multiple'" height="13.889vh" :list="data.tb || chartData" :hoverType="'axis'"></MultipleLineChart> -->
+    <el-dialog
+      v-model="dialogVisible"
+      width="70%"
+      top="10vh"
+      custom-class="modal"
+      :close-on-click-modal="true"
     >
-      <ul>
-        <li class="agc_title">
-          <p>
-            <span>{{ data?.wpname || "---" }}</span>
-            <i
-              style="cursor: pointer"
-              class="svg-icon svg-icon-sm svg-icon-green"
-              @click="handleClick(data)"
-            >
-              <SvgIcon svgid="svg-line"></SvgIcon>
-            </i>
-          </p>
-          <p class="agc_name" :class="{ activeBaC: data?.agc009 == 1 }"></p>
-        </li>
-        <li class="agc_content">
-          <div>
-            <p>
-              有功设定限值<span class="agc_val">{{
-                (data?.agc002 / 1000).toFixed(2) || "--"
-              }}</span
-              ><span class="agc_units">MW</span>
-            </p>
-            <p class="pw_val">
-              出线功率
-              <span
-                class="agc_val agc_ch"
-                :class="{
-                  activeChao: Number(data?.agc001) > Number(data?.agc002),
-                  activeXiao: Number(data?.agc001) < Number(data?.agc002),
-                }"
-                >{{ (data?.agc001 / 1000).toFixed(2) || "--" }}</span
-              ><span class="agc_unit">MW</span>
-            </p>
-          </div>
-          <div>
-            <p>
-              AGC可调上限<span class="agc_val">{{
-                (data?.agc003 / 1000).toFixed(2) || "--"
-              }}</span
-              ><span class="agc_units">MW</span>
-            </p>
-            <p>
-              理论功率<span class="agc_val">{{
-                (data?.agc010 / 1000).toFixed(2) || "--"
-              }}</span
-              ><span class="agc_unit">MW</span>
-            </p>
-          </div>
-          <div>
-            <p>
-              AGC可调下限<span class="agc_val">{{
-                (data?.agc004 / 1000).toFixed(2) || "--"
-              }}</span
-              ><span class="agc_units">MW</span>
-            </p>
-            <p>
-              预测功率<span class="agc_val">{{
-                (data?.ycgl / 1000).toFixed(2) || "--"
-              }}</span
-              ><span class="agc_unit">MW</span>
-            </p>
-          </div>
-        </li>
-        <li class="agc_footer">
-          <!-- 1红其他绿 -->
-          <div>
-            <img src="@assets/imgs/zhaung.png" v-if="data?.agc006 == 1" />
-            <img src="@assets/imgs/zheng.png" v-else />
-            <p>AGC投入</p>
-          </div>
-          <div>
-            <img src="@assets/imgs/zhaung.png" v-if="data?.agc005 == 1" />
-            <img src="@assets/imgs/zheng.png" v-else />
-            <p>AGC远方</p>
-          </div>
-          <div>
-            <img src="@assets/imgs/zhaung.png" v-if="data?.agc008 == 1" />
-            <img src="@assets/imgs/zheng.png" v-else />
-            <p>有功增闭锁</p>
-          </div>
-          <div>
-            <img src="@assets/imgs/zhaung.png" v-if="data?.agc007 == 1" />
-            <img src="@assets/imgs/zheng.png" v-else />
-            <p>有功减闭锁</p>
-          </div>
-        </li>
-      </ul>
-      <qushi-dialog ref="child"></qushi-dialog>
-    </div>
-  </div>
+      <DoubleLineChart
+        height="70vh"
+        :list="data.tb || chartData"
+        myUnit="MW"
+      ></DoubleLineChart>
+    </el-dialog>
+  </ComPanel>
 </template>
 
 <script>
-import qushiDialog from "@/components/qushi/qushiDialog.vue";
-import { deepClone } from "@/utills/func.js";
-import SvgIcon from "@/components/coms/icon/svg-icon.vue";
+import ComPanel from "@com/coms/panel/panel2.vue";
+import DoubleLineChart from "@com/chart/line/marker-line-chart.vue";
+import MultipleLineChart from "@com/chart/line/multiple-line-chart.vue";
 export default {
   // 名称
   name: "AgcPanel",
   // 使用组件
   components: {
-    SvgIcon,
-    qushiDialog,
+    ComPanel,
+    DoubleLineChart,
+    MultipleLineChart,
   },
   // 传入参数
   props: {
-    obj: Object,
+    data: Object,
+    chartType: {
+      type: String,
+      default: "double",
+    },
+    chartData: {
+      type: Array,
+      default: [
+        {
+          title: "",
+          smooth: true,
+          value: [],
+        },
+      ],
+    },
   },
+  // 自定义事件
+  emits: {},
   // 数据
   data() {
     return {
       dialogVisible: false,
-      stse: [
+      list: [
         {
-          statiomName: "预测功率",
-          stse: "BDSAMC",
-          sts: "FCFGDQDT0001",
+          title: "平均风速",
+          yAxisIndex: 1, // 使用单位
+          value: [
+            {
+              text: "1日",
+              value: 0,
+            },
+            {
+              text: "2日",
+              value: 1,
+            },
+            {
+              text: "3日",
+              value: 0,
+            },
+            {
+              text: "4日",
+              value: 1,
+            },
+            {
+              text: "5日",
+              value: 0,
+            },
+            {
+              text: "6日",
+              value: 1,
+            },
+            {
+              text: "7日",
+              value: 0,
+            },
+          ],
         },
         {
-          statiomName: "有功设定限值",
-          stse: "BDSAMC",
-          sts: "AGC002",
+          title: "应发功率",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 4,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 4,
+            },
+            {
+              text: "4日",
+              value: 2,
+            },
+            {
+              text: "5日",
+              value: 4,
+            },
+            {
+              text: "6日",
+              value: 2,
+            },
+            {
+              text: "7日",
+              value: 4,
+            },
+          ],
         },
         {
-          statiomName: "出线功率",
-          stse: "BDSAMC",
-          sts: "AGC001",
-        },
-        {
-          statiomName: "理论功率",
-          stse: "BDSAMC",
-          sts: "AGC010",
+          title: "实际功率",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 3,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 1,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 1,
+            },
+          ],
         },
       ],
-      data: {},
     };
   },
-  created() {
-    this.data = this.obj;
-  },
   // 函数
   methods: {
-    deepClone,
-    handleClick(item) {
-      let y = this.deepClone(this.stse);
-      y?.forEach((val) => {
-        val.stse = item.wpname;
-      });
-      this.$refs.child.openCurvDatas(y, 4, item.wpid);
+    chartClick() {
+      this.dialogVisible = true;
     },
-    handleMousenter() {
-      this.data.add = false;
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+    this.list = this.data || [
+      {
+        title: "",
+        yAxisIndex: 1, // 使用单位
+        value: [],
+      },
+    ];
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+  watch: {
+    data(res) {
+      this.list = res;
     },
   },
 };
 </script>
 
-<style lang="less" scoped>
-.unitChart {
-  font-size: 12px;
-  margin-top: 3px;
-}
+<style lang="less">
 .panel-table {
   width: 100%;
 
@@ -211,323 +353,4 @@ export default {
 .red {
   color: @red;
 }
-ul,
-ul li,
-p {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.light-grid {
-  .grid-content {
-    height: 227px;
-    background: #fff;
-    border-radius: 8px;
-    margin-bottom: 10px;
-
-    .agc_title {
-      position: relative;
-      padding: 11px 0 8px 16px;
-      display: flex;
-
-      .agc_name {
-        width: 35px;
-        height: 35px;
-        position: absolute;
-        right: -1px;
-        top: -1px;
-        border-radius: 8px;
-        background: linear-gradient(
-          to right top,
-          rgba(5, 148, 60, 0),
-          rgba(5, 148, 60, 0),
-          rgba(5, 148, 60, 0.5)
-        );
-      }
-
-      .activeBaC {
-        background: linear-gradient(
-          to right top,
-          rgba(5, 148, 60, 0),
-          rgba(251, 77, 0, 0),
-          rgba(251, 77, 0, 0.5)
-        );
-      }
-
-      span {
-        font-size: 16px;
-        color: #36348e;
-        font-weight: 700;
-      }
-
-      i {
-        position: absolute;
-        right: 15px;
-        font-size: 20px;
-        color: green;
-        z-index: 1;
-      }
-
-      .activeImg {
-        color: red;
-      }
-    }
-
-    .agc_content {
-      line-height: 37px;
-      padding: 0 10px 0 20px;
-
-      div {
-        display: flex;
-        justify-content: space-between;
-        border-bottom: 1px solid rgba(72, 75, 83, 0.5);
-
-        .pw_val {
-        }
-
-        > p:last-of-type {
-          position: relative;
-          left: -12px;
-          width: 162px;
-        }
-
-        p {
-          font-size: 14px;
-          color: #606769;
-          position: relative;
-          font-weight: 700;
-          .agc_unit {
-            position: absolute;
-            left: 140px;
-            top: 1px;
-          }
-
-          .agc_units {
-            position: absolute;
-            left: 168px;
-            top: 1px;
-          }
-
-          span {
-            font-size: 12px;
-            font-family: "SourceHanSansCN";
-            color: #606769;
-            position: relative;
-            left: 18px;
-          }
-
-          .agc_val {
-            font-family: "Arial";
-            font-size: 14px;
-            color: #36348e;
-          }
-
-          .agc_ch {
-            position: absolute;
-            left: 75px;
-          }
-        }
-      }
-    }
-
-    .agc_footer {
-      //width: 280px;
-      text-align: center;
-      margin-top: 13px;
-      padding: 0 16px;
-      display: flex;
-      justify-content: space-between;
-
-      img {
-        width: 20px;
-        height: 20px;
-      }
-
-      p {
-        font-size: 14px;
-        color: #606769;
-        font-weight: 700;
-      }
-
-      i {
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        border-radius: 10px;
-      }
-
-      i.red {
-        background: red;
-      }
-
-      i.green {
-        background: green;
-      }
-    }
-  }
-}
-.dark-grid {
-  .grid-content {
-    height: 227px;
-    background: rgba(30, 37, 36, 0.45);
-    border-radius: 8px;
-    margin-bottom: 10px;
-    &.activeError {
-      box-shadow: 0 0 14px #f00 inset;
-    }
-    @keyframes twinkle {
-      from {
-        box-shadow: 0 0 14px #f00 inset;
-      }
-      50% {
-        box-shadow: 0 0 14px transparent inset;
-      }
-      to {
-        box-shadow: 0 0 14px #f00 inset;
-      }
-    }
-    &.flash {
-      animation: twinkle 1s;
-      animation-iteration-count: infinite;
-    }
-    .agc_title {
-      position: relative;
-      padding: 11px 0 8px 16px;
-      display: flex;
-
-      .agc_name {
-        width: 35px;
-        height: 35px;
-        position: absolute;
-        right: -1px;
-        top: -1px;
-        border-radius: 8px;
-        background: linear-gradient(
-          to right top,
-          rgba(5, 148, 60, 0),
-          rgba(5, 148, 60, 0),
-          rgba(5, 148, 60, 0.5)
-        );
-      }
-
-      .activeBaC {
-        background: transparent;
-      }
-
-      span {
-        font-size: 14px;
-        color: #b3b3b3;
-      }
-
-      i {
-        position: absolute;
-        right: 15px;
-        font-size: 20px;
-        color: green;
-        z-index: 1;
-      }
-
-      .activeImg {
-        color: red;
-      }
-    }
-
-    .agc_content {
-      line-height: 37px;
-      padding: 0 10px 0 20px;
-
-      div {
-        display: flex;
-        justify-content: space-between;
-        border-bottom: 1px solid rgba(72, 75, 83, 0.5);
-
-        .pw_val {
-          .scs {
-            position: absolute;
-            left: 60px;
-            top: 12px;
-          }
-        }
-
-        > p:last-of-type {
-          position: relative;
-          left: -12px;
-          width: 162px;
-        }
-
-        p {
-          font-size: 14px;
-          color: #949595;
-          position: relative;
-
-          .agc_unit {
-            position: absolute;
-            left: 140px;
-            top: 1px;
-          }
-
-          .agc_units {
-            position: absolute;
-            left: 168px;
-            top: 1px;
-          }
-
-          span {
-            font-size: 12px;
-            font-family: "SourceHanSansCN";
-            color: #606769;
-            position: relative;
-            left: 18px;
-          }
-
-          .agc_val {
-            font-family: "Arial";
-            font-size: 14px;
-            color: @green;
-          }
-
-          .agc_ch {
-            position: absolute;
-            left: 75px;
-          }
-        }
-      }
-    }
-
-    .agc_footer {
-      //width: 280px;
-      text-align: center;
-      margin-top: 13px;
-      padding: 0 16px;
-      display: flex;
-      justify-content: space-between;
-
-      img {
-        width: 20px;
-        height: 20px;
-      }
-
-      p {
-        font-size: 14px;
-        color: #b3b3b3;
-      }
-
-      i {
-        display: inline-block;
-        width: 10px;
-        height: 10px;
-        border-radius: 10px;
-      }
-
-      i.red {
-        background: red;
-      }
-
-      i.green {
-        background: green;
-      }
-    }
-  }
-}
 </style>

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

@@ -0,0 +1,533 @@
+<template>
+  <div :class="$store.state.themeName == 'dark' ? 'dark-grid' : 'light-grid'">
+    <div
+      class="grid-content"
+      style="width: 443px"
+      :class="{
+        activeError: data?.agc009 == 1,
+        flash: data?.add,
+      }"
+      @click="handleMousenter"
+    >
+      <ul>
+        <li class="agc_title">
+          <p>
+            <span>{{ data?.wpname || "---" }}</span>
+            <i
+              style="cursor: pointer"
+              class="svg-icon svg-icon-sm svg-icon-green"
+              @click="handleClick(data)"
+            >
+              <SvgIcon svgid="svg-line"></SvgIcon>
+            </i>
+          </p>
+          <p class="agc_name" :class="{ activeBaC: data?.agc009 == 1 }"></p>
+        </li>
+        <li class="agc_content">
+          <div>
+            <p>
+              有功设定限值<span class="agc_val">{{
+                (data?.agc002 / 1000).toFixed(2) || "--"
+              }}</span
+              ><span class="agc_units">MW</span>
+            </p>
+            <p class="pw_val">
+              出线功率
+              <span
+                class="agc_val agc_ch"
+                :class="{
+                  activeChao: Number(data?.agc001) > Number(data?.agc002),
+                  activeXiao: Number(data?.agc001) < Number(data?.agc002),
+                }"
+                >{{ (data?.agc001 / 1000).toFixed(2) || "--" }}</span
+              ><span class="agc_unit">MW</span>
+            </p>
+          </div>
+          <div>
+            <p>
+              AGC可调上限<span class="agc_val">{{
+                (data?.agc003 / 1000).toFixed(2) || "--"
+              }}</span
+              ><span class="agc_units">MW</span>
+            </p>
+            <p>
+              理论功率<span class="agc_val">{{
+                (data?.agc010 / 1000).toFixed(2) || "--"
+              }}</span
+              ><span class="agc_unit">MW</span>
+            </p>
+          </div>
+          <div>
+            <p>
+              AGC可调下限<span class="agc_val">{{
+                (data?.agc004 / 1000).toFixed(2) || "--"
+              }}</span
+              ><span class="agc_units">MW</span>
+            </p>
+            <p>
+              预测功率<span class="agc_val">{{
+                (data?.ycgl / 1000).toFixed(2) || "--"
+              }}</span
+              ><span class="agc_unit">MW</span>
+            </p>
+          </div>
+        </li>
+        <li class="agc_footer">
+          <!-- 1红其他绿 -->
+          <div>
+            <img src="@assets/imgs/zhaung.png" v-if="data?.agc006 == 1" />
+            <img src="@assets/imgs/zheng.png" v-else />
+            <p>AGC投入</p>
+          </div>
+          <div>
+            <img src="@assets/imgs/zhaung.png" v-if="data?.agc005 == 1" />
+            <img src="@assets/imgs/zheng.png" v-else />
+            <p>AGC远方</p>
+          </div>
+          <div>
+            <img src="@assets/imgs/zhaung.png" v-if="data?.agc008 == 1" />
+            <img src="@assets/imgs/zheng.png" v-else />
+            <p>有功增闭锁</p>
+          </div>
+          <div>
+            <img src="@assets/imgs/zhaung.png" v-if="data?.agc007 == 1" />
+            <img src="@assets/imgs/zheng.png" v-else />
+            <p>有功减闭锁</p>
+          </div>
+        </li>
+      </ul>
+      <qushi-dialog ref="child"></qushi-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import qushiDialog from "@/components/qushi/qushiDialog.vue";
+import { deepClone } from "@/utills/func.js";
+import SvgIcon from "@/components/coms/icon/svg-icon.vue";
+export default {
+  // 名称
+  name: "AgcPanel",
+  // 使用组件
+  components: {
+    SvgIcon,
+    qushiDialog,
+  },
+  // 传入参数
+  props: {
+    obj: Object,
+  },
+  // 数据
+  data() {
+    return {
+      dialogVisible: false,
+      stse: [
+        {
+          statiomName: "预测功率",
+          stse: "BDSAMC",
+          sts: "FCFGDQDT0001",
+        },
+        {
+          statiomName: "有功设定限值",
+          stse: "BDSAMC",
+          sts: "AGC002",
+        },
+        {
+          statiomName: "出线功率",
+          stse: "BDSAMC",
+          sts: "AGC001",
+        },
+        {
+          statiomName: "理论功率",
+          stse: "BDSAMC",
+          sts: "AGC010",
+        },
+      ],
+      data: {},
+    };
+  },
+  created() {
+    this.data = this.obj;
+  },
+  // 函数
+  methods: {
+    deepClone,
+    handleClick(item) {
+      let y = this.deepClone(this.stse);
+      y?.forEach((val) => {
+        val.stse = item.wpname;
+      });
+      this.$refs.child.openCurvDatas(y, 4, item.wpid);
+    },
+    handleMousenter() {
+      this.data.add = false;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.unitChart {
+  font-size: 12px;
+  margin-top: 3px;
+}
+.panel-table {
+  width: 100%;
+
+  .data-item {
+    background-color: fade(@gray, 20);
+    padding: 0.278vh;
+    padding-left: 0.7407vh;
+    font-size: 1.204vh;
+    display: flex;
+    flex-direction: row;
+
+    .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;
+    }
+  }
+}
+
+.green {
+  color: @green;
+}
+
+.red {
+  color: @red;
+}
+ul,
+ul li,
+p {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.light-grid {
+  .grid-content {
+    height: 227px;
+    background: #fff;
+    border-radius: 8px;
+    margin-bottom: 10px;
+
+    .agc_title {
+      position: relative;
+      padding: 11px 0 8px 16px;
+      display: flex;
+
+      .agc_name {
+        width: 35px;
+        height: 35px;
+        position: absolute;
+        right: -1px;
+        top: -1px;
+        border-radius: 8px;
+        background: linear-gradient(
+          to right top,
+          rgba(5, 148, 60, 0),
+          rgba(5, 148, 60, 0),
+          rgba(5, 148, 60, 0.5)
+        );
+      }
+
+      .activeBaC {
+        background: linear-gradient(
+          to right top,
+          rgba(5, 148, 60, 0),
+          rgba(251, 77, 0, 0),
+          rgba(251, 77, 0, 0.5)
+        );
+      }
+
+      span {
+        font-size: 16px;
+        color: #36348e;
+        font-weight: 700;
+      }
+
+      i {
+        position: absolute;
+        right: 15px;
+        font-size: 20px;
+        color: green;
+        z-index: 1;
+      }
+
+      .activeImg {
+        color: red;
+      }
+    }
+
+    .agc_content {
+      line-height: 37px;
+      padding: 0 10px 0 20px;
+
+      div {
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid rgba(72, 75, 83, 0.5);
+
+        .pw_val {
+        }
+
+        > p:last-of-type {
+          position: relative;
+          left: -12px;
+          width: 162px;
+        }
+
+        p {
+          font-size: 14px;
+          color: #606769;
+          position: relative;
+          font-weight: 700;
+          .agc_unit {
+            position: absolute;
+            left: 140px;
+            top: 1px;
+          }
+
+          .agc_units {
+            position: absolute;
+            left: 168px;
+            top: 1px;
+          }
+
+          span {
+            font-size: 12px;
+            font-family: "SourceHanSansCN";
+            color: #606769;
+            position: relative;
+            left: 18px;
+          }
+
+          .agc_val {
+            font-family: "Arial";
+            font-size: 14px;
+            color: #36348e;
+          }
+
+          .agc_ch {
+            position: absolute;
+            left: 75px;
+          }
+        }
+      }
+    }
+
+    .agc_footer {
+      //width: 280px;
+      text-align: center;
+      margin-top: 13px;
+      padding: 0 16px;
+      display: flex;
+      justify-content: space-between;
+
+      img {
+        width: 20px;
+        height: 20px;
+      }
+
+      p {
+        font-size: 14px;
+        color: #606769;
+        font-weight: 700;
+      }
+
+      i {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 10px;
+      }
+
+      i.red {
+        background: red;
+      }
+
+      i.green {
+        background: green;
+      }
+    }
+  }
+}
+.dark-grid {
+  .grid-content {
+    height: 227px;
+    background: rgba(30, 37, 36, 0.45);
+    border-radius: 8px;
+    margin-bottom: 10px;
+    &.activeError {
+      box-shadow: 0 0 14px #f00 inset;
+    }
+    @keyframes twinkle {
+      from {
+        box-shadow: 0 0 14px #f00 inset;
+      }
+      50% {
+        box-shadow: 0 0 14px transparent inset;
+      }
+      to {
+        box-shadow: 0 0 14px #f00 inset;
+      }
+    }
+    &.flash {
+      animation: twinkle 1s;
+      animation-iteration-count: infinite;
+    }
+    .agc_title {
+      position: relative;
+      padding: 11px 0 8px 16px;
+      display: flex;
+
+      .agc_name {
+        width: 35px;
+        height: 35px;
+        position: absolute;
+        right: -1px;
+        top: -1px;
+        border-radius: 8px;
+        background: linear-gradient(
+          to right top,
+          rgba(5, 148, 60, 0),
+          rgba(5, 148, 60, 0),
+          rgba(5, 148, 60, 0.5)
+        );
+      }
+
+      .activeBaC {
+        background: transparent;
+      }
+
+      span {
+        font-size: 14px;
+        color: #b3b3b3;
+      }
+
+      i {
+        position: absolute;
+        right: 15px;
+        font-size: 20px;
+        color: green;
+        z-index: 1;
+      }
+
+      .activeImg {
+        color: red;
+      }
+    }
+
+    .agc_content {
+      line-height: 37px;
+      padding: 0 10px 0 20px;
+
+      div {
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid rgba(72, 75, 83, 0.5);
+
+        .pw_val {
+          .scs {
+            position: absolute;
+            left: 60px;
+            top: 12px;
+          }
+        }
+
+        > p:last-of-type {
+          position: relative;
+          left: -12px;
+          width: 162px;
+        }
+
+        p {
+          font-size: 14px;
+          color: #949595;
+          position: relative;
+
+          .agc_unit {
+            position: absolute;
+            left: 140px;
+            top: 1px;
+          }
+
+          .agc_units {
+            position: absolute;
+            left: 168px;
+            top: 1px;
+          }
+
+          span {
+            font-size: 12px;
+            font-family: "SourceHanSansCN";
+            color: #606769;
+            position: relative;
+            left: 18px;
+          }
+
+          .agc_val {
+            font-family: "Arial";
+            font-size: 14px;
+            color: @green;
+          }
+
+          .agc_ch {
+            position: absolute;
+            left: 75px;
+          }
+        }
+      }
+    }
+
+    .agc_footer {
+      //width: 280px;
+      text-align: center;
+      margin-top: 13px;
+      padding: 0 16px;
+      display: flex;
+      justify-content: space-between;
+
+      img {
+        width: 20px;
+        height: 20px;
+      }
+
+      p {
+        font-size: 14px;
+        color: #b3b3b3;
+      }
+
+      i {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 10px;
+      }
+
+      i.red {
+        background: red;
+      }
+
+      i.green {
+        background: green;
+      }
+    }
+  }
+}
+</style>