单机月度分析添加弹窗，新增导出pdf功能，气象分析图表单位修改、重叠内容修改，光伏矩阵状态修改

package.json

@@ -23,6 +23,7 @@
     "html2canvas": "^1.0.0-rc.7",
     "jquery": "^3.6.0",
     "jspdf": "^2.3.1",
+    "jszip": "^3.7.1",
     "stompjs": "^2.3.3",
     "three": "^0.129.0",
     "vivus": "^0.4.6",
@@ -30,8 +31,7 @@
     "vue-axios": "^3.2.4",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0",
-    "xlsx": "^0.17.0",
-	"jszip": "^3.7.1"
+    "xlsx": "^0.17.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/views/LightMatrix/LightMatrix.vue

@@ -45,7 +45,8 @@
               <!-- <span class="text">{{ data.text1 }}</span> -->
             </div>
             <div class="panel-right" >
-              <span class="text">台数</span>
+              <!-- <span class="text">台数</span> -->
+                <span class="text">{{data.name}}</span>
               <span class="value">
                 {{ sourceMap[data.key1] || "---" }}
               </span>

src/views/NewPages/area-line-chart.vue

@@ -368,7 +368,9 @@ export default {
             },
           },
         ],
-        yAxis: [
+        yAxis: [{
+           type: "value",
+        },
           {
             type: "value",
             name: this.units[0],

src/views/NewPages/arrow-line-chart.vue

@@ -0,0 +1,304 @@
+<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: "normal-line-chart",
+  componentName: "normal-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+            {
+              text: "5",
+              value: 3,
+            },
+            {
+              text: "6",
+              value: 3,
+            },
+            {
+              text: "7",
+              value: 3,
+            },
+            {
+              text: "8",
+              value: 3,
+            },
+            {
+              text: "9",
+              value: 3,
+            },
+            {
+              text: "10",
+              value: 3,
+            },
+            {
+              text: "11",
+              value: 3,
+            },
+            {
+              text: "12",
+              value: 3,
+            },
+            {
+              text: "13",
+              value: 3,
+            },
+            {
+              text: "14",
+              value: 3,
+            },
+            {
+              text: "15",
+              value: 3,
+            },
+            {
+              text: "16",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1",
+              value: 1,
+            },
+            {
+              text: "2",
+              value: 2,
+            },
+            {
+              text: "3",
+              value: 1,
+            },
+            {
+              text: "4",
+              value: 3,
+            },
+            {
+              text: "5",
+              value: 2,
+            },
+            {
+              text: "6",
+              value: 2,
+            },
+            {
+              text: "7",
+              value: 2,
+            },
+          ],
+        },
+      ],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(MW)"],
+    },
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
+    };
+  },
+  computed: {
+    legend() {
+      return this.list.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
+      return this.list[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    yAxis() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        result.push({
+          type: "value",
+          name: value,
+          axisLabel: {
+            formatter: "{value}",
+            fontSize: util.vh(14),
+          },
+          //分格线
+          splitLine: {
+            lineStyle: {
+              color: partten.getColor("gray") + 55,
+              type: "dashed",
+            },
+          },
+        });
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+
+      this.list.forEach((value, index) => {
+        var data = value.value.map((t) => {
+          return t.value;
+        });
+        const lastvalue = data[data.length - 1];
+        data[data.length - 1] = {
+          symbol: "arrow",
+          symbolSize: 12,
+          symbolRotate: -90,
+          value: lastvalue,
+        };
+
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: true,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+              width: 1,
+            },
+          },
+          yAxisIndex: value.yAxisIndex,
+          data: data,
+        });
+      });
+
+      return result;
+    },
+  },
+  methods: {
+    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: 90,
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: util.vh(30),
+          left: util.vh(42),
+          right: util.vh(40),
+          bottom: util.vh(24),
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: util.vh(14),
+              textStyle: {
+                color: partten.getColor("gray"),
+              },
+            },
+            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>

src/views/NewPages/dj1.vue

@@ -725,7 +725,8 @@
 </template>
 
 <script>
-import AreaLineChart from "../../components/chart/combination/area-line-chart.vue";
+import AreaLineChart from "./area-line-chart.vue";
+// import AreaLineChart from "../../components/chart/combination/area-line-chart.vue";
 // import MultipleBarLineChart1 from "./multiple-bar-line-chart.vue";
 import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
 import MarkerLineChart from "../../components/chart/line/multiple-line-chart.vue";

src/views/NewPages/forecast-system.vue

@@ -72,7 +72,7 @@
         </el-col>
         <el-col :span="19">
           <panel :title="'损失电量分析'">
-            <multiple-bar-line-chart :height="'100%'" 
+            <multiple-bar-line-chart  :height="'100%'" 
               :lineData="chart1Line" :barData="chart1Bar"
               :units="['功率（万kW）','电量（万kWh）']"/>
           </panel>
@@ -81,7 +81,7 @@
       <el-row class="bottom-charts">
         <el-col :span="12">
           <panel :title="'超短期风功率预测'">
-            <arrow-line-chart :height="'100%'"  :list="chart2List" :units="['功率（万kW）','风速（m/s）']"/>
+            <arrow-line-chart :width="'100%'"  :height="'100%'"  :list="chart2List" :units="['功率（万kW）','风速（m/s）']"/>
           </panel>
         </el-col>
         <el-col :span="12">
@@ -95,8 +95,10 @@
 </template>
 
 <script>
-import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
-import ArrowLineChart from "../../components/chart/line/arrow-line-chart.vue";
+// import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
+import MultipleBarLineChart from "./multiple-bar-line-chart1.vue";
+// import ArrowLineChart from "../../components/chart/line/arrow-line-chart.vue";
+import ArrowLineChart from "./arrow-line-chart.vue";
 import svgIcon from "../../components/coms/icon/svg-icon.vue";
 import Panel from "../../components/coms/panel/panel.vue";
 export default {
@@ -143,6 +145,7 @@ export default {
         data:{wpId:this.wpId}
       });
       if(res) {
+        console.log('resWeather:',res)
         this.weatherInfo = res.data.data;
       }
     },

src/views/NewPages/multiple-bar-line-chart1.vue

@@ -0,0 +1,436 @@
+<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: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    // 传入数据
+    barData: {
+      type: Array,
+      default: () => [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "上网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "购网电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "风速",
+          yAxisIndex: 1,
+          value: [
+            {
+              text: "1日",
+              value: 1,
+            },
+            {
+              text: "2日",
+              value: 2,
+            },
+            {
+              text: "3日",
+              value: 1,
+            },
+            {
+              text: "4日",
+              value: 3,
+            },
+            {
+              text: "5日",
+              value: 3,
+            },
+            {
+              text: "6日",
+              value: 3,
+            },
+            {
+              text: "7日",
+              value: 3,
+            },
+          ],
+        },
+      ],
+    },
+    lineData: {
+      type: Object,
+      default: () => {
+        return {
+          name: "风速",
+          unit: "km",
+          data: [200, 800, 400, 500, 800, 700, 800, 900, 200],
+        };
+      },
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(万KWh)"],
+    },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => [
+        "#05bb4c",
+        "#4b55ae",
+        "#fa8c16",
+        "#f8de5b",
+        "#1a93cf",
+        "#c531c7",
+        "#bd3338",
+      ],
+    },
+    showAnimation: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      firstAnimation: true,
+      newbarData: null,
+    };
+  },
+  watch: {
+    barData: {
+      handler(newValue, oldValue) {
+        this.newbarData = newValue;
+        this.initChart();
+      },
+      deep: true,
+    },
+    lineData : {
+      handler(newValue, oldValue) {
+        this.newlineData = newValue;
+        this.initChart();
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    legend() {
+      return this.newbarData.map((t) => {
+        return t.title;
+      });
+    },
+    xdata() {
+      let result = [];
+      if (
+        this.newbarData &&
+        this.newbarData.length > 0 &&
+        this.newbarData[0].value.length > 0
+      ) {
+        result = this.newbarData[0].value.map((t) => {
+          return t.text;
+        });
+      }
+      return result;
+    },
+    ydata() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        console.log('yValue:',value)
+        let data = null;
+        if (index == 0) {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value} ",
+              fontSize: 12,
+            },
+            //分格线
+            splitLine: {
+              lineStyle: {
+                color: "#5a6162",
+                type: "dashed",
+              },
+            },
+          };
+        } 
+        else {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: 12,
+            },
+            //分格线
+            splitLine: {
+              show: false,
+            },
+          };
+        }
+
+        result.push(data);
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+      if (this.newbarData && this.newbarData.length > 0) {
+        this.newbarData.forEach((value, index) => {
+          result.push({
+            name: value.title,
+            type: "bar",
+            barWidth: "10%",
+            animation: this.firstAnimation && this.showAnimation,
+            yAxisIndex: value.yAxisIndex,
+            data: value.value.map((t) => {
+              return t.value;
+            }),
+          });
+        });
+      }
+      return result;
+    },
+  },
+  methods: {
+    resize() {},
+    initChart() {
+      let 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: 12,
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          right: 90,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            color: partten.getColor("grayl"),
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: 32,
+          left: 40,
+          right: this.ydata.length > 1 ? 40 : 14,
+          bottom: 24,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.xdata,
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLabel: {
+              fontSize: 12,
+            },
+          },
+        ],
+        yAxis: this.ydata,
+        series: this.series,
+      };
+
+      // line data
+      // if (this.newlineData && this.newlineData.data.length > 0) {
+      //   option.yAxis.push({
+      //     type: "value",
+      //     name: this.newlineData.name,
+      //     axisLabel: {
+      //       formatter: "{value} ",
+      //       color: partten.getColor("gray"),
+      //     },
+      //     axisLine: {
+      //       show: false,
+      //     },
+      //     axisTick: {
+      //       show: false,
+      //     },
+      //     splitLine: {
+      //       show: false,
+      //       lineStyle: {
+      //         type: "dashed",
+      //         dashOffset: 10,
+      //         color: partten.getColor("gray") + 80,
+      //       },
+      //     },
+      //   });
+
+      //   option.series.push({
+      //     name: this.newlineData.name,
+      //     type: "line",
+      //     data: this.newlineData.data,
+      //     smooth: true, //平滑展示
+      //     yAxisIndex: option.yAxis.length - 1,
+      //     lineStyle: {
+      //       color: partten.getColor("yellow"),
+      //     },
+      //     itemStyle: {
+      //       color: partten.getColor("yellow"),
+      //     },
+      //   });
+      // }
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function () {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+    this.newbarData = this.barData;
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+      this.firstAnimation = false;
+    });
+  },
+  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/singleAnalysis/double-line-chart.vue

@@ -0,0 +1,304 @@
+<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: "绿线",
+          smooth: true,
+          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: "黄线",
+          smooth: true,
+          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: "",
+       default: () => ["(MW)"],
+    },
+    showLegend: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16", "#1DA0D7", "#DD5044"],
+      newlist: null,
+    };
+  },
+  watch: {
+    list: {
+      handler(newValue, oldValue) {
+        console.warn(newValue);
+        this.newlist = newValue;
+        this.$nextTick(() => {
+          this.initChart();
+        });
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    colorValue() {
+      return partten.getColor(this.color);
+    },
+    datas() {
+      return this.newlist.map((t) => {
+        return t.value;
+      });
+    },
+    legend() {
+      if (this.newlist) {
+        return this.newlist.map((t) => {
+          return t.title;
+        });
+      }
+    },
+    xdata() {
+      return this.newlist[0].value.map((t) => {
+        return t.text;
+      });
+    },
+    series() {
+      let result = [];
+      this.newlist.forEach((value, index) => {
+        result.push({
+          name: value.title,
+          type: "line",
+          smooth: value.smooth,
+          showSymbol: false,
+          zlevel: index,
+          lineStyle: {
+            normal: {
+              color: this.color[index],
+              width: 1,
+            },
+          },
+          yAxisIndex: value.yAxisIndex,
+          data: value.value.map((t) => {
+            return t.value;
+          }),
+        });
+      });
+
+      return result;
+    },
+    yAxis() {
+      console.log('unit:',this.unit)
+      let result = [];
+      result.push({
+        type: "value",
+        name: 'kw',
+        axisLabel: {
+          formatter: "{value}",
+          fontSize: util.vh(14),
+        },
+        boundaryGap: false,
+        //分格线
+        splitLine: {
+          show: false,
+        },
+      });
+      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: 40,
+          right: 15,
+          bottom: 24,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: partten.getColor("gray"),
+                fontSize: util.vh(10),
+              },
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis:{
+          type: 'value',
+          name: 'YYY',
+        },
+        series: this.series,
+      };
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.$nextTick(() => {
+      this.id = "pie-chart-" + util.newGUID();
+    });
+    this.newlist = this.list;
+    // console.warn(this.list);
+    // console.warn(this.newlist);
+  },
+  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/singleAnalysis/index.vue

@@ -41,18 +41,30 @@
     <el-dialog title="切入切出风速整合历史" v-model="dialogShow" width="85%" top="10vh" custom-class="modal" :close-on-click-modal="true" @closed="dialogType = ''">
       test
     </el-dialog>
+      <el-dialog
+      :title="wtId+'号风机'+year+ '年'+ month+'月运行指标性能分析'"
+      v-model="dialogVisible"
+      width="70%"
+      top="10vh"
+      custom-class="modal"
+      :close-on-click-modal="false"
+    >
+    <ZnzhFx :wtId=wtId :year=year :month=month />
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import ComTable from "../Decision/table.vue";
+import ZnzhFx from "./znzhfx.vue";
 export default {
   // 名称
   name: "cutAnalyse",
 
   // 使用组件
   components: {
-   ComTable
+   ComTable,
+   ZnzhFx
   },
 
   // 数据
@@ -62,6 +74,10 @@ export default {
       isAsc:"asc",
       wpArray:[],
       wpId:"",
+          dialogVisible: false,
+          wtId:"",
+          year:"",
+          month:"",
       recorddate:new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
       dialogShow:false,
 	  tableDataEnd: [], //合计
@@ -211,8 +227,14 @@ export default {
   // 函数
   methods: {
     goznzhfx(row){
+      let that = this;
+      that.wtId=row.windturbineid;
+      that.year=new Date(this.recorddate).formatDate("yyyy");
+      that.month=new Date(this.recorddate).formatDate("MM");
+      // console.log(that.wtId,'--',that.year,'---', that.month)
+      that.dialogVisible = true;
       console.warn(row);
-      this.$router.push({path:`/decision/znzhfx/${row.windturbineid}/${new Date(this.recorddate).formatDate("yyyy")}/${new Date(this.recorddate).formatDate("MM")}`})
+      // this.$router.push({path:`/decision/znzhfx/${row.windturbineid}/${new Date(this.recorddate).formatDate("yyyy")}/${new Date(this.recorddate).formatDate("MM")}`})
     },
     // 请求服务
     requestData() {

src/views/singleAnalysis/znzhfx.vue

@@ -0,0 +1,574 @@
+<template>
+  <div class="znzhfx">
+     <!-- <el-col :span="24">
+          <div class="back">
+            <button class="btn" type="button" @click="back">
+              <span>返回</span>
+            </button>
+             <button class="btn green" @click="exportPDF">导出</button>
+          </div>
+          <div class="table-title">
+            {{ wtId }}号风机{{ year }}年{{ month }}月运行指标性能分析
+          </div>
+        </el-col> -->
+    <el-scrollbar height="910px">
+      <el-row :gutter="20" class="table-panel">
+        <el-col :span="24">
+          <div class="back">
+            <button class="btn" type="button" @click="back">
+              <span>返回</span>
+            </button>
+             <button class="btn" type="button" @click="exportPDF">
+              导出
+            </button>
+          </div>
+          <div class="table-title">
+            {{ wtId }}号风机{{ year }}年{{ month }}月运行指标性能分析
+          </div>
+          <!-- <Table :data="tableData2" :canScroll="false" /> -->
+        </el-col>
+         <Table class="pdfDom" :data="tableData2" :canScroll="false" />
+      </el-row>
+      <div class="mg-b-16 anliz-des">
+        <div>
+          本月{{ wtId }}号风机风机设备利用小时数{{
+            tableVal.byzb && tableVal.byzb.lyxs
+          }}小时、同比{{
+            tableVal.tpzb && tableVal.tpzb.lyxs
+          }}小时，设备可利用率{{
+            tableVal.byzb && tableVal.byzb.sbklyl
+          }}%、同比{{ tableVal.tpzb && tableVal.tpzb.sbklyl }}}%，
+          等效可用系数{{ tableVal.byzb && tableVal.byzb.dxklyxs }}%、同比{{
+            tableVal.tpzb && tableVal.tpzb.dxklyxs
+          }}}%，静风频率达到{{ tableVal.byzb && tableVal.byzb.jfpl }}%、同比{{
+            tableVal.tpzb && tableVal.tpzb.jfpl
+          }}}%， 机组功率特性一致性系数达到{{
+            tableVal.byzb && tableVal.byzb.glyzxxs
+          }}%、同比{{ tableVal.tpzb && tableVal.tpzb.glyzxxs }}}%。
+          <br />
+          {{ wtId }}风机{{ year }}年{{ month }}月平均风速{{
+            tableVal.byzb && tableVal.byzb.fs
+          }}m/s、同比{{ tableVal.tpzb && tableVal.tpzb.fs }}m/s，
+          小风平均切入风速{{ tableVal.byzb && tableVal.byzb.xfqr }}m/s、同比{{
+            tableVal.tpzb && tableVal.tpzb.xfqr
+          }}m/s， 有效风时数{{
+            tableVal.byzb && tableVal.byzb.yxfss
+          }}小时、同比{{ tableVal.tpzb && tableVal.tpzb.yxfss }}小时，
+          实际发电电量{{ tableVal.byzb && tableVal.byzb.fdl }}万kwh、同比{{
+            tableVal.tpzb && tableVal.tpzb.fdl
+          }}万kwh，同比增长率{{ tableVal.tbzb && tableVal.tbzb.fdl }}%，
+          各项损失电量累计{{
+            tableVal.byzb && tableVal.byzb.llfdl - tableVal.byzb.fdl
+          }}万kwh、同比{{
+            tableVal.tpzb && tableVal.tpzb.llfdl - tableVal.tpzb.fdl
+          }}万kwh，同比增长率{{
+            tableVal.tbzb && tableVal.byzb.llfdl - tableVal.tbzb.fdl
+          }}%， 理论发电量{{
+            tableVal.byzb && tableVal.byzb.llfdl
+          }}万kwh，实际发电量与理论发电量相差{{
+            tableVal.tbzb && tableVal.tbzb.llfdl
+          }}万kwh。
+          <br />
+          本月静风频率
+          %，月累计静风时长0.00小时，月累计待机小时116.44小时，待机占比48.51%。
+        </div>
+      </div>
+      <div class="mg-b-16">
+        <panel :title="'损失电量分析'" :showLine="true">
+          <multiple-bar-line-chart
+            :height="'21.296vh'"
+            :barData="bar1Data"
+            :lineData="lineData"
+          />
+        </panel>
+      </div>
+      <div class="mg-b-16">
+        <panel :title="'损失电量分析'" :showLine="true">
+          <vertival-bar-line-chart :height="'21.296vh'" :bardata="bar2data" />
+        </panel>
+      </div>
+      <div class="mg-b-16">
+        <panel :title="'损失电量分析'" :showLine="true" >
+          <double-line-chart :height="'21.296vh'" :list="list" />
+        </panel>
+      </div>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import Panel from "../../components/coms/panel/panel.vue";
+import Table from "../../components/coms/table/table.vue";
+import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
+import DoubleLineChart from "../../components/chart/line/double-line-chart.vue";
+// import DoubleLineChart from "./double-line-chart.vue";
+import Get_PDF from "@tools/htmlToPdf";
+export default {
+  setup() {},
+  components: {
+    Panel,
+    Table,
+    VertivalBarLineChart,
+    MultipleBarLineChart,
+    DoubleLineChart,
+  },
+  props:{
+    wtId: "",
+      year: "",
+      month: "",
+      // dialogVisible: false,
+  },
+  data() {
+    return {
+      // wtId: "",
+      // year: "",
+      // month: "",
+      tableVal: "",
+      tabrow: {
+        fdl: "实际发电量（万千瓦时）",
+        fs: "平均风速（m/s）",
+        gzss: "故障损失电量（万千瓦时）",
+        jxss: "计划检修损失电量（万千瓦时）",
+        xdss: "调度限电损失电量（万千瓦时）",
+        xnss: "性能未达标损失电量（万千瓦时）",
+        slss: "受累损失电量（万千瓦时）",
+        llfdl: "理论发电量（万千瓦时）",
+        gzxs: "故障停运时间（小时）",
+        jxxs: "检修停运时间（小时）",
+        tjxs: "待机时间（小时）",
+        zdxs: "通讯中断时间（小时）",
+        yxxs: "并网时间（小时）",
+        lyxs: "设备利用小时（小时）",
+        sbklyl: "设备利用率（%）",
+        dxklyxs: "等效可用系数（%）",
+        xfqr: "小风切入风速（m/s）",
+        glyzxxs: "功率特性一致性系数（%）",
+        yxfss: "有效风时数（小时）",
+        xfqrhgl: "小风切入合格率（%）",
+        jfpl: "静风频率（%）",
+      },
+      tableData2: {
+        column: [
+          {
+            name: "指标名称",
+            field: "name",
+          },
+          {
+            name: "本月值",
+            field: "byzb",
+          },
+          {
+            name: "去年同期",
+            field: "hqzb",
+          },
+          {
+            name: "同比增长率（%）",
+            field: "hbzb",
+          },
+          {
+            name: "环比",
+            field: "tqzb",
+          },
+          {
+            name: "环比端值（%）",
+            field: "tbzb",
+          },
+        ],
+        data: [
+          {
+            name: "实际发电量（万kWh）",
+            v1: "174785",
+            v2: "317885",
+            v3: "-45",
+            v4: "22322",
+            v5: "-36",
+          },
+        ],
+      },
+      bar1Data: [
+        {
+          title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "05-01",
+              value: 1,
+            },
+            {
+              text: "05-01",
+              value: 2,
+            },
+            {
+              text: "05-01",
+              value: 1,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "风速",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "05-01",
+              value: 1,
+            },
+            {
+              text: "05-01",
+              value: 2,
+            },
+            {
+              text: "05-01",
+              value: 1,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+          ],
+        },
+      ],
+      lineData: {
+        name: "风速",
+        unit: "km",
+        data: [200, 800, 400, 500, 800, 700, 800, 900, 200],
+      },
+      bar2data: {
+        area: [
+          "05-01",
+          "05-01",
+          "05-01",
+          "05-01",
+          "05-01",
+          "05-01",
+          "05-01",
+          "05-01",
+          "05-01",
+        ],
+        legend: [
+          "限电损失电量",
+          "性能未达标损失电量",
+          "检修损失电量",
+          "故障损失电量",
+          "受累损失电量",
+          "性能损失",
+        ],
+        data: [
+          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
+          [320, 302, 301, 334, 390, 330, 320, 100, 50],
+        ],
+      },
+      list: [
+        {
+          title: "绿123线",
+          smooth: false,
+          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: "黄线",
+          smooth: false,
+          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,
+            },
+          ],
+        },
+      ],
+    };
+  },
+  created() {
+    // this.wtId = this.$route.params.wtId;
+    // this.year = this.$route.params.year;
+    // this.month = this.$route.params.month;
+    this.search();
+    this.searchChart();
+  },
+  filters: {
+    tabrowfil(val) {
+      return this.tabrow[val];
+    },
+  },
+  methods: {
+    //导出pdf
+       exportPDF (name) {
+      this.BASE.showMsg({
+        type: "success",
+        msg: "正在导出...请稍后..."
+      });
+      Get_PDF.downloadPDF(document.querySelector('.pdfDom'), this.wtId +'号风机'+ this.year+'年'+ this.month +'月运行指标性能分析');
+    },
+    async search() {
+      console.log(this.wtId,'--',this.year,'---',this.month)
+      const { data } = await this.API.requestData({
+        subUrl: "/singleanalysis/singleanalysisSub",
+        method: "POST",
+        data: {
+          wtId: this.wtId,
+          year: this.year,
+          month: this.month,
+        },
+      });
+      console.warn(data.data);
+      const res = data.data;
+      this.tableVal = data.data;
+      console.warn(this.tableVal);
+      let arr = [];
+      let keyarr = Object.keys(res.byzb);
+      console.warn(keyarr);
+      let jarr = Object.keys(res);
+      for (let k of keyarr) {
+        let obj = {
+          name: k,
+          byzb: null,
+          hbzb: null,
+          hqzb: null,
+          tbzb: null,
+          tqzb: null,
+        };
+        for (let i in res) {
+          for (let j of jarr) {
+            if (i == j) {
+              obj[j] = res[i][k];
+            }
+          }
+        }
+        arr.push(obj);
+      }
+      arr = arr.filter((e) => {
+        return (
+          e.name != "id" &&
+          e.name != "windturbineid" &&
+          e.name != "windturbineName" &&
+          e.name != "windPowerStationId" &&
+          e.name != "windPowerStationName" &&
+          e.name != "recorddate" &&
+          e.name != "swdl" &&
+          e.name != "gwdl" &&
+          e.name != "rlxs" &&
+          e.name != "fjrl"
+        );
+      });
+      arr.forEach((e) => {
+        e.name = this.tabrow[e.name];
+      });
+      this.tableData2.data = arr;
+      console.warn(arr);
+    },
+    async searchChart() {
+       console.log(this.wtId,'--',this.year,'---', this.month)
+      const { data } = await this.API.requestData({
+        subUrl: "/singleanalysis/singleanalysisChart",
+        method: "POST",
+        data: {
+          wtId: this.wtId,
+          year: this.year,
+          month: this.month,
+        },
+      });
+      console.warn(data.data);
+      const res = data.data;
+      let arrfffdl = [];
+      let arrfffs = [];
+      res.ff.forEach((e) => {
+        let obj = {
+          text: new Date(e.recorddate).formatDate("MM-dd"),
+          value: e.fdl,
+        };
+        let obj1 = {
+          text: new Date(e.recorddate).formatDate("MM-dd"),
+          value: e.fs,
+        };
+        arrfffdl.push(obj);
+        arrfffs.push(obj1);
+      });
+      this.bar1Data[0].value = arrfffdl;
+      this.lineData.data = arrfffs;
+      ////
+      let arrjdjf = [];
+      let arrjddj = [];
+      res.jd.forEach((e) => {
+        let obj = {
+          text: new Date(e.recorddate).formatDate("MM-dd"),
+          value: e.jfpl,
+        };
+        let obj1 = {
+          text: new Date(e.recorddate).formatDate("MM-dd"),
+          value: e.tjxs,
+        };
+        arrjdjf.push(obj);
+        arrjddj.push(obj1);
+      });
+      let obj = {
+        title: "静风时长(小时)",
+        smooth: false,
+        value: arrjdjf,
+      };
+      let obj1 = {
+        title: "待机时长(小时)",
+        smooth: false,
+        value: arrjddj,
+      };
+      this.list = [];
+      this.list.push(obj);
+      this.list.push(obj1);
+      console.warn(this.list);
+      /////
+      let arrwsarea = [];
+      let arrwslegend = [
+        "限电损失电量",
+        "性能未达标损失电量",
+        "检修损失电量",
+        "故障损失电量",
+        "受累损失电量",
+      ];
+      let arrwsdata = [];
+      res.ws.forEach((e) => {
+        let arr = [];
+        for (let k of ["xdss", "xnss", "jxss", "gzss", "slss"]) {
+          arr.push(e[k]);
+        }
+        arrwsdata.push(arr);
+        arrwsarea.push(new Date(e.recorddate).formatDate("MM-dd"));
+      });
+      this.bar2data.area = arrwsarea;
+      this.bar2data.legend = arrwslegend;
+      this.bar2data.data = arrwsdata;
+      console.warn(this.bar2data);
+    },
+	back(){
+		this.$router.go(-1);
+	}
+  },
+};
+</script>
+
+<style lang="less">
+.znzhfx {
+  font-size: 12px;
+  .anliz-des {
+    font-size: 16px;
+    color: #b3bdc0;
+    margin-top: 1.4993vh;
+    margin-bottom: 44px;
+  }
+  .table-panel {
+    .table-title {
+      font-size: 16px;
+      text-align: center;
+      color: #fefefe;
+      height: 4.6972vh;
+      line-height: 4.6972vh;
+    }
+    .back {
+      margin: 2.3988vh 0px 0px 0px;
+    }
+  }
+  .com-table {
+    border: 1px solid #6067697d;
+  }
+}
+</style>