Merge branch 'wsy' of http://61.161.152.110:10101/r/electronic-map into sl3

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

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

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

@@ -45,6 +45,7 @@ export default {
           top: 50,
           bottom: 50,
           left: 20,
+          right:20
         },
         tooltip: {
           trigger: "axis",

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

@@ -1,305 +1,314 @@
-<template>
+<template>
-  <ComPanel v-if="data && data.jcxx" :title="data.jcxx.name || '---'" :icon="data.jcxx.icon" :subTitle="data.jcxx.ddmc || '---'" :color="data.jcxx.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">
+    <table class="panel-table">
-      <tbody>
+      <tbody>
-        <tr>
+        <tr>
-          <td colspan="2">
+          <td colspan="2">
-            <div class="data-item">
+            <div class="data-item">
-              <span class="data-item-name">有功设定限制</span>
+              <span class="data-item-name">有功设定限制</span>
-              <span class="data-item-count">{{ data.jcxx.AGC002 }}</span>
+              <span class="data-item-count">{{ data.jcxx.AGC002 }}</span>
-              <span class="data-item-unit">MW</span>
+              <span class="data-item-unit">MW</span>
-            </div>
+            </div>
-          </td>
+          </td>
-          <td colspan="2">
+          <td colspan="2">
-            <div class="data-item">
+            <div class="data-item">
-              <span class="data-item-name">出线功率</span>
+              <span class="data-item-name">出线功率</span>
-              <span class="data-item-count">{{ data.jcxx.AGC001 }}</span>
+              <span class="data-item-count">{{ data.jcxx.AGC001 }}</span>
-              <span class="data-item-unit">MW</span>
+              <span class="data-item-unit">MW</span>
-            </div>
+            </div>
-          </td>
+          </td>
-        </tr>
+        </tr>
-        <tr>
+        <tr>
-          <td colspan="2">
+          <td colspan="2">
-            <div class="data-item">
+            <div class="data-item">
-              <span class="data-item-name">AGC可调上限</span>
+              <span class="data-item-name">AGC可调上限</span>
-              <span class="data-item-count">{{ data.jcxx.AGC003 }}</span>
+              <span class="data-item-count">{{ data.jcxx.AGC003 }}</span>
-              <span class="data-item-unit">MW</span>
+              <span class="data-item-unit">MW</span>
-            </div>
+            </div>
-          </td>
+          </td>
-          <td colspan="2">
+          <td colspan="2">
-            <div class="data-item">
+            <div class="data-item">
-              <span class="data-item-name">理论功率</span>
+              <span class="data-item-name">理论功率</span>
-              <span class="data-item-count">{{ data.jcxx.ZZSGL }}</span>
+              <span class="data-item-count">{{ data.jcxx.ZZSGL }}</span>
-              <span class="data-item-unit">MW</span>
+              <span class="data-item-unit">MW</span>
-            </div>
+            </div>
-          </td>
+          </td>
-        </tr>
+        </tr>
-        <tr>
+        <tr>
-          <td colspan="2">
+          <td colspan="2">
-            <div class="data-item">
+            <div class="data-item">
-              <span class="data-item-name">AGC可调下限</span>
+              <span class="data-item-name">AGC可调下限</span>
-              <span class="data-item-count">{{ data.jcxx.AGC004 }}</span>
+              <span class="data-item-count">{{ data.jcxx.AGC004 }}</span>
-              <span class="data-item-unit">MW</span>
+              <span class="data-item-unit">MW</span>
-            </div>
+            </div>
-          </td>
+          </td>
-          <td colspan="2">
+          <td colspan="2">
-            <div class="data-item">
+            <div class="data-item">
-              <span class="data-item-name">预测功率</span>
+              <span class="data-item-name">预测功率</span>
-              <span class="data-item-count">{{ data.jcxx.ycgl || 0 }}</span>
+              <span class="data-item-count">{{ data.jcxx.ycgl || 0 }}</span>
-              <span class="data-item-unit">MW</span>
+              <span class="data-item-unit">MW</span>
-            </div>
+            </div>
-          </td>
+          </td>
-        </tr>
+        </tr>
-        <tr>
+        <tr>
-          <td>
+          <td>
-            <div class="data-item">
+            <div class="data-item">
-              <span class="data-item-name">AGC投入</span>
+              <span class="data-item-name">AGC投入</span>
-              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC006 === 1 ? 'red' : 'green')"></i>
+              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC006 === 1 ? 'red' : 'green')"></i>
-            </div>
+            </div>
-          </td>
+          </td>
-          <td>
+          <td>
-            <div class="data-item">
+            <div class="data-item">
-              <span class="data-item-name">AGC远方</span>
+              <span class="data-item-name">AGC远方</span>
-              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC005 === 1 ? 'red' : 'green')"></i>
+              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC005 === 1 ? 'red' : 'green')"></i>
-            </div>
+            </div>
-          </td>
+          </td>
-          <td>
+          <td>
-            <div class="data-item">
+            <div class="data-item">
-              <span class="data-item-name">有功增闭锁</span>
+              <span class="data-item-name">有功增闭锁</span>
-              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC008 === 1 ? 'red' : 'green')"></i>
+              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC008 === 1 ? 'red' : 'green')"></i>
-            </div>
+            </div>
-          </td>
+          </td>
-          <td>
+          <td>
-            <div class="data-item">
+            <div class="data-item">
-              <span class="data-item-name">有功减闭锁</span>
+              <span class="data-item-name">有功减闭锁</span>
-              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC007 === 1 ? 'red' : 'green')"></i>
+              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC007 === 1 ? 'red' : 'green')"></i>
-            </div>
+            </div>
-          </td>
+          </td>
-        </tr>
+        </tr>
-      </tbody>
+      </tbody>
-    </table>
+    </table>
-    <!-- 查看默认实例去除末尾参数 :list 即可 -->
+    <!-- 查看默认实例去除末尾参数 :list 即可 -->
-    <DoubleLineChart v-if="chartType === 'double'" height="13.889vh" :list="data.tb || chartData"></DoubleLineChart>
+    <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>
+    <!-- <MultipleLineChart v-if="chartType === 'multiple'" height="13.889vh" :list="data.tb || chartData" :hoverType="'axis'"></MultipleLineChart> -->
-  </ComPanel>
+  	<el-dialog v-model="dialogVisible" width="70%" top="10vh" custom-class="modal"
-</template>
+			:close-on-click-modal="true">
-
+      <DoubleLineChart height="70vh" :list="data.tb || chartData" ></DoubleLineChart>
-<script>
+		</el-dialog>
-import ComPanel from "@com/coms/panel/panel2.vue";
+  </ComPanel>
-import DoubleLineChart from "@com/chart/line/marker-line-chart.vue";
+</template>
-import MultipleLineChart from "@com/chart/line/multiple-line-chart.vue";
+
-export default {
+<script>
-  // 名称
+import ComPanel from "@com/coms/panel/panel2.vue";
-  name: "AgcPanel",
+import DoubleLineChart from "@com/chart/line/marker-line-chart.vue";
-  // 使用组件
+import MultipleLineChart from "@com/chart/line/multiple-line-chart.vue";
-  components: {
+export default {
-    ComPanel,
+  // 名称
-    DoubleLineChart,
+  name: "AgcPanel",
-    MultipleLineChart,
+  // 使用组件
-  },
+  components: {
-  // 传入参数
+    ComPanel,
-  props: {
+    DoubleLineChart,
-    data: Object,
+    MultipleLineChart,
-    chartType: {
+  },
-      type: String,
+  // 传入参数
-      default: "double",
+  props: {
-    },
+    data: Object,
-    chartData: {
+    chartType: {
-      type: Array,
+      type: String,
-      default: [
+      default: "double",
-        {
+    },
-          title: "",
+    chartData: {
-          smooth: true,
+      type: Array,
-          value: [],
+      default: [
-        },
+        {
-      ],
+          title: "",
-    },
+          smooth: true,
-  },
+          value: [],
-  // 自定义事件
+        },
-  emits: {},
+      ],
-  // 数据
+    },
-  data() {
+  },
-    return {
+  // 自定义事件
-      list: [
+  emits: {},
-        {
+  // 数据
-          title: "平均风速",
+  data() {
-          yAxisIndex: 1, // 使用单位
+    return {
-          value: [
+      dialogVisible:false,
-            {
+      list: [
-              text: "1日",
+        {
-              value: 0,
+          title: "平均风速",
-            },
+          yAxisIndex: 1, // 使用单位
-            {
+          value: [
-              text: "2日",
+            {
-              value: 1,
+              text: "1日",
-            },
+              value: 0,
-            {
+            },
-              text: "3日",
+            {
-              value: 0,
+              text: "2日",
-            },
+              value: 1,
-            {
+            },
-              text: "4日",
+            {
-              value: 1,
+              text: "3日",
-            },
+              value: 0,
-            {
+            },
-              text: "5日",
+            {
-              value: 0,
+              text: "4日",
-            },
+              value: 1,
-            {
+            },
-              text: "6日",
+            {
-              value: 1,
+              text: "5日",
-            },
+              value: 0,
-            {
+            },
-              text: "7日",
+            {
-              value: 0,
+              text: "6日",
-            },
+              value: 1,
-          ],
+            },
-        },
+            {
-        {
+              text: "7日",
-          title: "应发功率",
+              value: 0,
-          yAxisIndex: 0,
+            },
-          value: [
+          ],
-            {
+        },
-              text: "1日",
+        {
-              value: 4,
+          title: "应发功率",
-            },
+          yAxisIndex: 0,
-            {
+          value: [
-              text: "2日",
+            {
-              value: 2,
+              text: "1日",
-            },
+              value: 4,
-            {
+            },
-              text: "3日",
+            {
-              value: 4,
+              text: "2日",
-            },
+              value: 2,
-            {
+            },
-              text: "4日",
+            {
-              value: 2,
+              text: "3日",
-            },
+              value: 4,
-            {
+            },
-              text: "5日",
+            {
-              value: 4,
+              text: "4日",
-            },
+              value: 2,
-            {
+            },
-              text: "6日",
+            {
-              value: 2,
+              text: "5日",
-            },
+              value: 4,
-            {
+            },
-              text: "7日",
+            {
-              value: 4,
+              text: "6日",
-            },
+              value: 2,
-          ],
+            },
-        },
+            {
-        {
+              text: "7日",
-          title: "实际功率",
+              value: 4,
-          yAxisIndex: 0,
+            },
-          value: [
+          ],
-            {
+        },
-              text: "1日",
+        {
-              value: 1,
+          title: "实际功率",
-            },
+          yAxisIndex: 0,
-            {
+          value: [
-              text: "2日",
+            {
-              value: 3,
+              text: "1日",
-            },
+              value: 1,
-            {
+            },
-              text: "3日",
+            {
-              value: 1,
+              text: "2日",
-            },
+              value: 3,
-            {
+            },
-              text: "4日",
+            {
-              value: 3,
+              text: "3日",
-            },
+              value: 1,
-            {
+            },
-              text: "5日",
+            {
-              value: 1,
+              text: "4日",
-            },
+              value: 3,
-            {
+            },
-              text: "6日",
+            {
-              value: 3,
+              text: "5日",
-            },
+              value: 1,
-            {
+            },
-              text: "7日",
+            {
-              value: 1,
+              text: "6日",
-            },
+              value: 3,
-          ],
+            },
-        },
+            {
-      ],
+              text: "7日",
-    };
+              value: 1,
-  },
+            },
-  // 函数
+          ],
-  methods: {},
+        },
-  // 生命周期钩子
+      ],
-  beforeCreate() {
+    };
-    // 创建前
+  },
-  },
+  // 函数
-  created() {
+  methods: {
-    // 创建后
+    chartClick(){
-  },
+      this.dialogVisible = true;
-  beforeMount() {
+    }
-    // 渲染前
+  },
-  },
+  // 生命周期钩子
-  mounted() {
+  beforeCreate() {
-    // 渲染后
+    // 创建前
-    this.list = this.data || [
+  },
-      {
+  created() {
-        title: "",
+    // 创建后
-        yAxisIndex: 1, // 使用单位
+  },
-        value: [],
+  beforeMount() {
-      },
+    // 渲染前
-    ];
+  },
-  },
+  mounted() {
-  beforeUpdate() {
+    // 渲染后
-    // 数据更新前
+    this.list = this.data || [
-  },
+      {
-  updated() {
+        title: "",
-    // 数据更新后
+        yAxisIndex: 1, // 使用单位
-  },
+        value: [],
-  watch: {
+      },
-    daya(res) {
+    ];
-      this.list = res;
+  },
-    },
+  beforeUpdate() {
-  },
+    // 数据更新前
-};
+  },
-</script>
+  updated() {
-
+    // 数据更新后
-<style lang="less">
+  },
-.panel-table {
+  watch: {
-  width: 100%;
+    daya(res) {
-
+      this.list = res;
-  .data-item {
+    },
-    background-color: fade(@gray, 20);
+  },
-    padding: 0.278vh;
+};
-    padding-left: 0.7407vh;
+</script>
-    font-size: 1.204vh;
+
-    display: flex;
+<style lang="less">
-    flex-direction: row;
+.panel-table {
-
+  width: 100%;
-    .data-item-name {
+
-      color: @gray;
+  .data-item {
-    }
+    background-color: fade(@gray, 20);
-
+    padding: 0.278vh;
-    .data-item-count {
+    padding-left: 0.7407vh;
-      color: @green;
+    font-size: 1.204vh;
-      margin-left: auto;
+    display: flex;
-      margin-right: 0.556vh;
+    flex-direction: row;
-    }
+
-
+    .data-item-name {
-    .data-item-unit {
+      color: @gray;
-      color: @gray;
+    }
-    }
+
-
+    .data-item-count {
-    .data-item-icon {
+      color: @green;
-      margin-left: auto;
+      margin-left: auto;
-      font-size: @fontsize-s;
+      margin-right: 0.556vh;
-    }
+    }
-  }
+
-}
+    .data-item-unit {
-
+      color: @gray;
-.green {
+    }
-  color: @green;
+
-}
+    .data-item-icon {
-
+      margin-left: auto;
-.red {
+      font-size: @fontsize-s;
-  color: @red;
+    }
-}
+  }
-</style>
+}
+
+.green {
+  color: @green;
+}
+
+.red {
+  color: @red;
+}
+</style>

src/views/HealthControl/Health10.vue

@@ -30,30 +30,22 @@
                 <tr>
                   <th rowspan="1" class="type1" style="width: 50px"></th>
                   <th rowspan="1" class="type1" style="width: 105px">健康度</th>
-                  <th rowspan="2" class="type1" style="width: 400px">
+                  <th rowspan="2" class="type1" style="width: 400px">MTBF（H/H）</th>
-                    MTBF（H/H）
-                  </th>
                   <th rowspan="1" class="type1" style="width: 180px"></th>
-                  <th rowspan="1" class="type1" style="width: 100px">
+                  <th rowspan="1" class="type1" style="width: 100px">MTTR（H）</th>
-                    MTTR（H）
-                  </th>
                 </tr>
               </thead>
             </table>
             <el-scrollbar>
-              <div style="height: calc(100vh - 174px)">
+              <div style="height: calc(30vh)">
-                <table style="width: 100%" border="0" cellspacing="0">
+                <table border="0" cellspacing="0">
                   <tbody>
                     <tr v-for="(item, index) of partsArray" :key="index">
                       <td style="width: 50px">
                         {{ item[1] }}
                       </td>
                       <td style="width: 105px">
-                        <div :style="
+                        <div :style="'background-color: ' + item[0] + ';width:10px;height:10px;margin:0 auto;'"></div>
-                            'background-color: ' +
-                            item[0] +
-                            ';width:10px;height:10px;margin:0 auto;'
-                          "></div>
                       </td>
                       <td style="width: 400px">
                         <div class="percent-item">
@@ -82,28 +74,31 @@
       <el-col :span="12">
         <div class="chart-title">
           <div class="title-panel" style="">
-            <span style="text-align: left; padding-left: 20px; font-size: 12px">故障信息
+            <span style="text-align: left; padding-left: 20px; font-size: 12px">故障信息 </span>
-            </span>
             <span class="des-title">预计损失电量<span class="num">73824.0</span><span class="unit">Kwh</span></span>
             <span class="des-title">预计检修时长<span class="num">29.33</span><span class="unit">H</span></span>
           </div>
           <!-- <img-line-chart
             height="270px"
           /> -->
-          <weather-line-chart :list="weatherData"/>
+          <weather-line-chart :list="weatherData" />
         </div>
       </el-col>
     </el-row>
     <div class="fc-info mg-b-16">
       <panel :title="'曲线'" :showLine="false">
-        <zoom-line-chart height="35vh" :list="powerChartData.value" :units="powerChartData.units" />
+        <zoom-line-chart height="28vh" :list="powerChartData.value" :units="powerChartData.units" />
       </panel>
     </div>
-    <HealthReport :show="healthReportShow" :params="{ wtId: this.wtId, recorddate: this.recorddate }" @closed="
+    <HealthReport
+      :show="healthReportShow"
+      :params="{ wtId: this.wtId, recorddate: this.recorddate }"
+      @closed="
         (res) => {
           this.healthReportShow = false;
         }
-      " />
+      "
+    />
   </div>
 </template>
 
@@ -245,11 +240,7 @@ export default {
             name: "故障名称",
             field: "v1",
             template: function (data) {
-              return (
+              return "<div style='overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'>" + data + "</div>";
-                "<div style='overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'>" +
-                data +
-                "</div>"
-              );
             },
           },
           {
@@ -373,9 +364,7 @@ export default {
       for (let i = 0; i < day; i++) {
         tableData.push({
           index: i + 1,
-          date: new Date(
+          date: new Date(new Date().getTime() - 3600 * 1000 * 24 * (i + 1)).formatDate("yyyy-MM-dd hh:mm:ss"),
-            new Date().getTime() - 3600 * 1000 * 24 * (i + 1)
-          ).formatDate("yyyy-MM-dd hh:mm:ss"),
           wtId: this.wtId,
         });
       }
@@ -399,12 +388,8 @@ export default {
             const item = {
               index: index + 1,
               warnDesc: ele.warnDesc,
-              startTime: new Date(ele.startTime).formatDate(
+              startTime: new Date(ele.startTime).formatDate("yyyy-MM-dd hh:mm:ss"),
-                "yyyy-MM-dd hh:mm:ss"
+              stopTime: new Date(ele.stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
-              ),
-              stopTime: new Date(ele.stopTime).formatDate(
-                "yyyy-MM-dd hh:mm:ss"
-              ),
               stopHours: ele.stopHours,
             };
             if (index < 5) {
@@ -503,14 +488,14 @@ export default {
         subUrl: "healthsub/getWeatherRealDay5Info",
         data: { wpId: this.wpId },
       });
-        // console.log(data);
+      // console.log(data);
       if (data && data.data) {
         this.weatherData = data.data.ls;
         // const list = [];
         // data.data.ls.forEach((element) => {
-          // console.log(element);
+        // console.log(element);
-          // console.log(new Date(element.time).formatDate("yyyy-MM-dd hh:mm:ss"));
+        // console.log(new Date(element.time).formatDate("yyyy-MM-dd hh:mm:ss"));
-          // list.push();
+        // list.push();
         // });
       }
     },