agc矩阵页面。点击图标可弹出big图标

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

@@ -1,317 +1,329 @@
-<template>
-  <div class="chart" :id="id"></div>
-</template>
-
-<script>
-import util from "@/helper/util.js";
-import partten from "@/helper/partten.js";
-import * as echarts from "echarts";
-
-export default {
-  name: "double-line-chart",
-  componentName: "double-line-chart",
-  props: {
-    width: {
-      type: String,
-      default: "100%",
-    },
-    height: {
-      type: String,
-      default: "13.889vh",
-    },
-    // 传入数据
-    list: {
-      type: Array,
-      default: () => [
-        {
-          title: "绿线",
-          value: [
-            {
-              text: "",
-              value: 0,
-            },
-            {
-              text: "0:00",
-              value: 20,
-            },
-            {
-              text: "10:00",
-              value: 1,
-            },
-            {
-              text: "11:00",
-              value: 40,
-            },
-            {
-              text: "12:00",
-              value: 10,
-            },
-            {
-              text: "13:00",
-              value: 15,
-            },
-            {
-              text: "14:00",
-              value: 30,
-            },
-            {
-              text: "15:00",
-              value: 40,
-            },
-            {
-              text: "",
-              value: 10,
-            },
-          ],
-        },
-        {
-          title: "黄线",
-          value: [
-            {
-              text: "",
-              value: 0,
-            },
-            {
-              text: "0:00",
-              value: 40,
-            },
-            {
-              text: "10:00",
-              value: 20,
-            },
-            {
-              text: "11:00",
-              value: 20,
-            },
-            {
-              text: "12:00",
-              value: 10,
-            },
-            {
-              text: "13:00",
-              value: 40,
-            },
-            {
-              text: "14:00",
-              value: 50,
-            },
-            {
-              text: "15:00",
-              value: 40,
-            },
-            {
-              text: "",
-              value: 10,
-            },
-          ],
-        },
-      ],
-    },
-    // 单位
-    unit: {
-      type: String,
-      default: "MW",
-    },
-    showLegend: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      id: "",
-      chart: null,
-      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16"],
-    };
-  },
-  computed: {
-    colorValue() {
-      return partten.getColor(this.color);
-    },
-    datas() {
-      return this.list.map((t) => {
-        return t.value;
-      });
-    },
-    legend() {
-      return this.list.map((t) => {
-        return t.title;
-      });
-    },
-    xdata() {
-      return this.list[0].value.map((t) => {
-        return t.text;
-      });
-    },
-    series() {
-      let that = this;
-      let result = [];
-
-      this.list.forEach((value, index) => {
-        result.push({
-          name: value.title,
-          type: "line",
-          smooth: true,
-          showSymbol: false,
-          zlevel: index,
-          lineStyle: {
-            normal: {
-              color: this.color[index],
-              width: 1,
-            },
-          },
-          markPoint: {},
-          // index == 0
-          //   ? {
-          //       data: [
-          //         {
-          //           type: "average",
-          //           name: "保证功率",
-          //           symbolSize: 0,
-          //           label: {
-          //             offset: [0, -40],
-          //             formatter: function(param) {
-          //               return `{title|${param.name}}` + "\n" + `{value| ${param.value}${that.unit}}`;
-          //             },
-          //             backgroundColor: partten.getColor("green") + 33,
-          //             borderColor: partten.getColor("green"),
-          //             borderWidth: 0.5,
-          //             borderRadius: 2,
-          //             padding: 8,
-          //             rich: {
-          //               title: {
-          //                 color: partten.getColor("green"),
-          //                 fontSize: 12,
-          //               },
-          //               value: {
-          //                 color: "#fff",
-          //                 fontSize: 16,
-          //                 padding: [12, 0, 0, -4],
-          //               },
-          //             },
-          //           },
-          //         },
-          //       ],
-          //     }
-          //   : {},
-          yAxisIndex: value.yAxisIndex,
-          data: value.value.map((t) => {
-            return t.value;
-          }),
-        });
-      });
-
-      return result;
-    },
-    yAxis() {
-      let result = [];
-      result.push({
-        type: "value",
-        name: this.unit,
-        axisLabel: {
-          formatter: "{value}",
-          fontSize: util.vh(14),
-        },
-        boundaryGap: false,
-        //分格线
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: partten.getColor("gray"),
-            type: "dashed",
-          },
-        },
-      });
-      return result;
-    },
-  },
-  methods: {
-    resize() {},
-    initChart() {
-      const chart = echarts.init(this.$el);
-
-      let option = {
-        color: this.color,
-        tooltip: {
-          trigger: "axis",
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
-          textStyle: {
-            color: "#fff",
-            fontSize: util.vh(16),
-          },
-        },
-        legend: {
-          show: this.showLegend,
-          data: this.legend,
-          right: 56,
-          icon: "circle",
-          itemWidth: 6,
-          inactiveColor: partten.getColor("gray"),
-          textStyle: {
-            color: partten.getColor("grayl"),
-            fontSize: 12,
-          },
-        },
-        grid: {
-          top: 16,
-          left: 32,
-          right: 8,
-          bottom: 24,
-        },
-        xAxis: [
-          {
-            type: "category",
-            boundaryGap: false,
-            axisLabel: {
-              formatter: "{value}",
-              textStyle: {
-                color: partten.getColor("gray"),
-                fontSize: util.vh(14),
-              },
-            },
-            data: this.xdata,
-          },
-        ],
-        yAxis: this.yAxis,
-        series: this.series,
-      };
-
-      chart.clear();
-      chart.setOption(option);
-
-      this.resize = function() {
-        chart.resize();
-      };
-
-      window.addEventListener("resize", this.resize);
-    },
-  },
-  created() {
-    this.id = "pie-chart-" + util.newGUID();
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.$el.style.width = this.width;
-      this.$el.style.height = this.height;
-      this.initChart();
-    });
-  },
-  updated() {
-    this.$nextTick(() => {
-      this.initChart();
-    });
-  },
-  unmounted() {
-    window.removeEventListener("resize", this.resize);
-  },
-};
-</script>
-
-<style lang="less">
-.chart {
-  width: 100%;
-  height: 100%;
-  display: inline-block;
-}
-</style>
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "double-line-chart",
+  componentName: "double-line-chart",
+  props: {
+    isChartClick:{
+      type: Boolean,
+      default: false,
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 传入数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "绿线",
+          value: [
+            {
+              text: "",
+              value: 0,
+            },
+            {
+              text: "0:00",
+              value: 20,
+            },
+            {
+              text: "10:00",
+              value: 1,
+            },
+            {
+              text: "11:00",
+              value: 40,
+            },
+            {
+              text: "12:00",
+              value: 10,
+            },
+            {
+              text: "13:00",
+              value: 15,
+            },
+            {
+              text: "14:00",
+              value: 30,
+            },
+            {
+              text: "15:00",
+              value: 40,
+            },
+            {
+              text: "",
+              value: 10,
+            },
+          ],
+        },
+        {
+          title: "黄线",
+          value: [
+            {
+              text: "",
+              value: 0,
+            },
+            {
+              text: "0:00",
+              value: 40,
+            },
+            {
+              text: "10:00",
+              value: 20,
+            },
+            {
+              text: "11:00",
+              value: 20,
+            },
+            {
+              text: "12:00",
+              value: 10,
+            },
+            {
+              text: "13:00",
+              value: 40,
+            },
+            {
+              text: "14:00",
+              value: 50,
+            },
+            {
+              text: "15:00",
+              value: 40,
+            },
+            {
+              text: "",
+              value: 10,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    unit: {
+      type: String,
+      default: "MW",
+    },
+    showLegend: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16"],
+    };
+  },
+  computed: {
+    colorValue() {
+      return partten.getColor(this.color);
+    },
+    datas() {
+      return this.list.map((t) => {
+        return t.value;
+      });
+    },
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
+      return this.list[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    series() {
+      let that = this;
+      let result = [];
+
+      this.list.forEach((value, index) => {
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: true,
+          showSymbol: false,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+              width: 1,
+            },
+          },
+          markPoint: {},
+          // index == 0
+          //   ? {
+          //       data: [
+          //         {
+          //           type: "average",
+          //           name: "保证功率",
+          //           symbolSize: 0,
+          //           label: {
+          //             offset: [0, -40],
+          //             formatter: function(param) {
+          //               return `{title|${param.name}}` + "\n" + `{value| ${param.value}${that.unit}}`;
+          //             },
+          //             backgroundColor: partten.getColor("green") + 33,
+          //             borderColor: partten.getColor("green"),
+          //             borderWidth: 0.5,
+          //             borderRadius: 2,
+          //             padding: 8,
+          //             rich: {
+          //               title: {
+          //                 color: partten.getColor("green"),
+          //                 fontSize: 12,
+          //               },
+          //               value: {
+          //                 color: "#fff",
+          //                 fontSize: 16,
+          //                 padding: [12, 0, 0, -4],
+          //               },
+          //             },
+          //           },
+          //         },
+          //       ],
+          //     }
+          //   : {},
+          yAxisIndex: value.yAxisIndex,
+          data: value.value.map((t) => {
+            return t.value;
+          }),
+        });
+      });
+
+      return result;
+    },
+    yAxis() {
+      let result = [];
+      result.push({
+        type: "value",
+        name: this.unit,
+        axisLabel: {
+          formatter: "{value}",
+          fontSize: util.vh(14),
+        },
+        boundaryGap: false,
+        //分格线
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: partten.getColor("gray"),
+            type: "dashed",
+          },
+        },
+      });
+      return result;
+    },
+  },
+  methods: {
+    resize() {},
+    initChart() {
+      let that = this;
+      const chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 56,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: 16,
+          left: 32,
+          right: 8,
+          bottom: 24,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: partten.getColor("gray"),
+                fontSize: util.vh(14),
+              },
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis: this.yAxis,
+        series: this.series,
+      };
+      chart.clear();
+      chart.setOption(option);
+      if(this.isChartClick){
+        chart.getZr().off("click");
+        chart.getZr().on("click", (params) => {
+          that.chartClick();
+        });
+      }
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+    chartClick(){
+      this.$emit("chartClick");
+    }
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -1,305 +1,317 @@
-<template>
-  <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"></DoubleLineChart>
-    <MultipleLineChart v-if="chartType === 'multiple'" height="13.889vh" :list="data.tb || chartData" :hoverType="'axis'"></MultipleLineChart>
-  </ComPanel>
-</template>
-
-<script>
-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: {
-    ComPanel,
-    DoubleLineChart,
-    MultipleLineChart,
-  },
-  // 传入参数
-  props: {
-    data: Object,
-    chartType: {
-      type: String,
-      default: "double",
-    },
-    chartData: {
-      type: Array,
-      default: [
-        {
-          title: "",
-          smooth: true,
-          value: [],
-        },
-      ],
-    },
-  },
-  // 自定义事件
-  emits: {},
-  // 数据
-  data() {
-    return {
-      list: [
-        {
-          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,
-            },
-          ],
-        },
-        {
-          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,
-            },
-          ],
-        },
-        {
-          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,
-            },
-          ],
-        },
-      ],
-    };
-  },
-  // 函数
-  methods: {},
-  // 生命周期钩子
-  beforeCreate() {
-    // 创建前
-  },
-  created() {
-    // 创建后
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-    this.list = this.data || [
-      {
-        title: "",
-        yAxisIndex: 1, // 使用单位
-        value: [],
-      },
-    ];
-  },
-  beforeUpdate() {
-    // 数据更新前
-  },
-  updated() {
-    // 数据更新后
-  },
-  watch: {
-    daya(res) {
-      this.list = res;
-    },
-  },
-};
-</script>
-
-<style lang="less">
-.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-left: auto;
-      font-size: @fontsize-s;
-    }
-  }
-}
-
-.green {
-  color: @green;
-}
-
-.red {
-  color: @red;
-}
-</style>
+<template>
+  <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">
+      <DoubleLineChart height="70vh" :list="data.tb || chartData" ></DoubleLineChart>
+		</el-dialog>
+  </ComPanel>
+</template>
+
+<script>
+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: {
+    ComPanel,
+    DoubleLineChart,
+    MultipleLineChart,
+  },
+  // 传入参数
+  props: {
+    data: Object,
+    chartType: {
+      type: String,
+      default: "double",
+    },
+    chartData: {
+      type: Array,
+      default: [
+        {
+          title: "",
+          smooth: true,
+          value: [],
+        },
+      ],
+    },
+  },
+  // 自定义事件
+  emits: {},
+  // 数据
+  data() {
+    return {
+      dialogVisible:false,
+      dialogChartData:{},
+      list: [
+        {
+          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,
+            },
+          ],
+        },
+        {
+          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,
+            },
+          ],
+        },
+        {
+          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,
+            },
+          ],
+        },
+      ],
+    };
+  },
+  // 函数
+  methods: {
+    chartClick(option){
+      console.log("option",option);
+      this.dialogVisible = true;
+      this.dialogChartData = option;
+    }
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+    this.list = this.data || [
+      {
+        title: "",
+        yAxisIndex: 1, // 使用单位
+        value: [],
+      },
+    ];
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+  watch: {
+    daya(res) {
+      this.list = res;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.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-left: auto;
+      font-size: @fontsize-s;
+    }
+  }
+}
+
+.green {
+  color: @green;
+}
+
+.red {
+  color: @red;
+}
+</style>