场站地形缩略图模块上传、主要指标模块完成

src/router/index.js

@@ -385,6 +385,11 @@ const routes = [{
 	component: () => import("../views/HealthControl/assess/assessindex.vue")
 },
 {
+	path: "/health/assess/selfEvaluate", // 自组合评级
+	name: "assessEvaluate",
+	component: () => import("../views/HealthControl/assess/selfEvaluate.vue")
+},
+{
 	path: "/health/assess/config",
 	name: "assessconfig",
 	component: () => import("../views/HealthControl/assess/assessconfig.vue")

src/views/HealthControl/assess/assessindex.vue

@@ -8,7 +8,9 @@
           :key="index"
           :class="{ active: cur == index }"
           @click="handleOpen(item, index)"
-        >{{ item }}</div>
+        >
+          {{ item }}
+        </div>
       </div>
     </div>
     <div class="query mg-b-8">
@@ -16,7 +18,12 @@
         <div class="query-item">
           <div class="lable">场站：</div>
           <div class="search-input">
-            <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
+            <el-select
+              v-model="value1"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+            >
               <el-option
                 v-for="item in ChangZhan"
                 :key="item.id"
@@ -74,18 +81,30 @@
         ref="curRef"
         :data="tableData"
         :pageSize="20"
-        :pageable=false
+        :pageable="false"
         height="73vh"
         v-loading="tableLoading"
         element-loading-text="拼命加载中.."
         element-loading-background="rgba(0, 0, 0, 0.8)"
       ></ComTable>
     </div>
-    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal">
+    <el-dialog
+      :title="dialogTitle"
+      v-model="dialogVisible"
+      width="70%"
+      top="10vh"
+      custom-class="modal"
+    >
       <dayinfo :gridDatas="dialogData1" :chartDatas="dialogData2" />
     </el-dialog>
-    <el-dialog :title="'历史数据查询>>'+hisDialogTitle" v-model="hisDialogVisible" width="70%" top="10vh" custom-class="modal">
-      <gradeHistory :option="hisOption" ref="gradeHistory"/>
+    <el-dialog
+      :title="'历史数据查询>>' + hisDialogTitle"
+      v-model="hisDialogVisible"
+      width="70%"
+      top="10vh"
+      custom-class="modal"
+    >
+      <gradeHistory :option="hisOption" ref="gradeHistory" />
     </el-dialog>
   </div>
 </template>
@@ -104,12 +123,12 @@ export default {
       optionData: [
         "风机日信息量化评级管理",
         "风机月信息量化评级管理",
-        "风机年信息量化评级管理"
+        "风机年信息量化评级管理",
       ],
       dialogTitle: "日信息对比",
       dialogVisible: false,
       hisDialogVisible: false,
-      hisDialogTitle:"",
+      hisDialogTitle: "",
       ChangZhan: [],
       value1: "MHS_FDC",
       date: "",
@@ -119,7 +138,7 @@ export default {
       dataIds: new Set(),
       dialogData1: [],
       dialogData2: [],
-      hisOption:{},
+      hisOption: {},
       tableData: {
         column: [
           {
@@ -131,7 +150,7 @@ export default {
             template: () => {
               return "<input class='check curCheckBox checkItem' type='CheckBox'/>";
             },
-            click: function(event, data) {
+            click: function (event, data) {
               if (event.target.checked == false) {
                 that.dataIds.delete(data.id);
               }
@@ -142,7 +161,7 @@ export default {
                   event.target.checked = false;
                 }
               }
-            }
+            },
           },
           {
             name: "风机编号",
@@ -150,7 +169,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "等級",
@@ -158,7 +177,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
 
           {
@@ -167,7 +186,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "发电量(kWh)",
@@ -175,7 +194,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "理论发电量(kWh)",
@@ -183,7 +202,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "平均风速(m/s)",
@@ -191,7 +210,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "平均功率(kW)",
@@ -199,7 +218,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "故障损失电量(kWh)",
@@ -207,7 +226,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "限电损失电量(kWh)",
@@ -215,7 +234,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "维护损失电量(kWh)",
@@ -223,7 +242,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "性能损失电量(kWh)",
@@ -231,7 +250,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "利用小时数(h)",
@@ -239,7 +258,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "拟合优度(%)",
@@ -247,7 +266,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "设备可利用率(%)",
@@ -255,7 +274,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "等效可用系数(%)",
@@ -263,7 +282,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "有效风时数(h)",
@@ -271,7 +290,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "平均切入风速(m/s)",
@@ -279,7 +298,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "静风频率(%)",
@@ -287,7 +306,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "功率一致性系数(%)",
@@ -295,7 +314,7 @@ export default {
             is_num: false,
             is_light: false,
             sortable: true,
-            id: "id"
+            id: "id",
           },
           {
             name: "操作",
@@ -307,8 +326,8 @@ export default {
             template: () => {
               return "<el-button type='text' style='cursor: pointer;' value='xq'>详情</el-button>&nbsp;<el-button type='text' style='cursor: pointer;' value='ls'>历史</el-button>";
             },
-            click: function(event, data) {
-              if('xq' == event.target.getAttribute("value")){
+            click: function (event, data) {
+              if ("xq" == event.target.getAttribute("value")) {
                 that.dialogVisible = true;
                 that.dialogData1 = [data];
                 const service1 = {
@@ -323,8 +342,8 @@ export default {
                     data["yeardxkyxs"],
                     data["yearyxfss"],
                     data["yearfs"],
-                    data["yearjfpl"]
-                  ]
+                    data["yearjfpl"],
+                  ],
                 };
                 const chartData = [
                   {
@@ -338,14 +357,14 @@ export default {
                       "等效可利用系数",
                       "有效风时数",
                       "平均风速",
-                      "静风频率"
+                      "静风频率",
                     ],
-                    data: [service1]
-                  }
+                    data: [service1],
+                  },
                 ];
                 that.dialogData2 = chartData;
               }
-              if('ls' == event.target.getAttribute("value")){
+              if ("ls" == event.target.getAttribute("value")) {
                 that.hisOption["shows"] = that.shows;
                 that.hisOption["date"] = that.date;
                 that.hisOption["windturbineid"] = data.windturbineid;
@@ -353,12 +372,12 @@ export default {
                 that.hisDialogVisible = true;
                 that.$refs.gradeHistory.getTable();
               }
-            }
-          }
+            },
+          },
         ],
-        data: []
+        data: [],
       },
-      tableId: ""
+      tableId: "",
     };
   },
   created() {
@@ -377,7 +396,7 @@ export default {
       let subUrl = "";
       const data = {
         isAsc: "asc",
-        wpId: this.value1
+        wpId: this.value1,
       };
       if ("d" == this.shows) {
         subUrl = "/benchmarking/gadaylistByPage";
@@ -414,7 +433,7 @@ export default {
         },
         Error(res) {
           console.log("tag", res);
-        }
+        },
       });
     },
     //   tab
@@ -449,7 +468,7 @@ export default {
         success(res) {
           that.ChangZhan = res.data;
           that.value1 = res.data[0].id;
-        }
+        },
       });
     },
     // 查询
@@ -465,7 +484,7 @@ export default {
         const tmpArr = Array.from(that.dataIds);
         const data = {
           gaid1: tmpArr[0],
-          gaid2: tmpArr[1]
+          gaid2: tmpArr[1],
         };
 
         that.API.requestData({
@@ -474,8 +493,8 @@ export default {
           data: data,
           success(res) {
             that.dialogData1 = [res.data.gaid1, res.data.gaid2];
-			console.log(that.dialogData1)
-          }
+            console.log(that.dialogData1);
+          },
         });
         that.API.requestData({
           method: "GET",
@@ -496,10 +515,10 @@ export default {
                   "等效可利用系数",
                   "有效风时数",
                   "平均风速",
-                  "静风频率"
+                  "静风频率",
                 ],
-                data: []
-              }
+                data: [],
+              },
             ];
             if (data1) {
               chartData[0].data.push(that.getChartData(data1));
@@ -508,7 +527,7 @@ export default {
               chartData[0].data.push(that.getChartData(data2));
             }
             that.dialogData2 = chartData;
-          }
+          },
         });
       }
       this.clearCheckBox();
@@ -516,7 +535,7 @@ export default {
     getChartData(resData) {
       const chartData = {};
       const rowMap = {};
-      resData.forEach(function(rowData, index) {
+      resData.forEach(function (rowData, index) {
         rowMap[rowData["name"]] = rowData["data1"];
       });
       chartData["name"] = resData[resData.length - 1]["name"];
@@ -550,8 +569,8 @@ export default {
       if (vl == 2) {
         return year + "";
       }
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>

src/views/HealthControl/assess/selfEvaluate.vue

@@ -0,0 +1,588 @@
+<template>
+  <div>
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div
+          class="newspan"
+          v-for="(item, index) of optionData"
+          :key="index"
+          :class="{ active: cur == index }"
+          @click="handleOpen(item, index)"
+        >
+          {{ item }}
+        </div>
+      </div>
+    </div>
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">模型名称：</div>
+          <div class="search-input">
+            <el-select
+              v-model="modelName"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+            >
+              <el-option
+                v-for="item in modelNameArray"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              ></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <el-select
+              v-model="value1"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+            >
+              <el-option
+                v-for="item in ChangZhan"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              ></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item" v-if="shows == 'd'">
+          <div class="lable">日期：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="date"
+              type="date"
+              placeholder="选择日期"
+              popper-class="date-select"
+              value-format="YYYY-MM-DD"
+            ></el-date-picker>
+          </div>
+        </div>
+        <div class="query-item" v-if="shows == 'm'">
+          <div class="lable">年月：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="date"
+              type="month"
+              placeholder="选择年月"
+              popper-class="date-select"
+              value-format="YYYY-MM"
+            ></el-date-picker>
+          </div>
+        </div>
+        <div class="query-item" v-if="shows == 'y'">
+          <div class="lable">年：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="date"
+              type="year"
+              placeholder="选择年"
+              popper-class="date-select"
+              value-format="YYYY"
+            ></el-date-picker>
+          </div>
+        </div>
+        <div class="query-actions">
+          <button class="btn green" @click="handleSubmit">查询</button>
+          <button class="btn green" @click="contrast">对比</button>
+        </div>
+      </div>
+    </div>
+    <div class="table-box curTableBox">
+      <div class="title">{{ showTitle }}</div>
+      <ComTable
+        class="curTableStyle"
+        ref="curRef"
+        :data="tableData"
+        :pageSize="20"
+        :pageable="false"
+        height="70vh"
+        v-loading="tableLoading"
+        element-loading-text="拼命加载中.."
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      ></ComTable>
+    </div>
+    <el-dialog
+      :title="dialogTitle"
+      v-model="dialogVisible"
+      width="70%"
+      top="10vh"
+      custom-class="modal"
+    >
+      <dayinfo :gridDatas="dialogData1" :chartDatas="dialogData2" />
+    </el-dialog>
+    <el-dialog
+      :title="'历史数据查询>>' + hisDialogTitle"
+      v-model="hisDialogVisible"
+      width="70%"
+      top="10vh"
+      custom-class="modal"
+    >
+      <gradeHistory :option="hisOption" ref="gradeHistory" />
+    </el-dialog>
+  </div>
+</template>
+<script>
+import ComTable from "@/components/coms/table/table-unpage.vue";
+import Dayinfo from "../dayinfo.vue";
+import GradeHistory from "../gradeHistory.vue";
+
+export default {
+  name: "gradeassessment",
+  components: { ComTable, Dayinfo, GradeHistory },
+  data() {
+    let that = this;
+    return {
+      cur: 0,
+      optionData: [
+        "风机日信息量化评级管理",
+        "风机月信息量化评级管理",
+        "风机年信息量化评级管理",
+      ],
+      dialogTitle: "日信息对比",
+      dialogVisible: false,
+      hisDialogVisible: false,
+      hisDialogTitle: "",
+      ChangZhan: [],
+      modelNameArray: [],
+      value1: "MHS_FDC",
+      modelName: "",
+      date: "",
+      shows: "d",
+      showTitle: "风机日信息量化评级管理",
+      tableLoading: true,
+      dataIds: new Set(),
+      dialogData1: [],
+      dialogData2: [],
+      hisOption: {},
+      tableData: {},
+      tableId: "",
+    };
+  },
+  created() {
+    this.date = this.getDate(0);
+
+    let p1 = new Promise((res, rej) => {
+      this.ChangZhanVal(res);
+    });
+    let p2 = new Promise((res, rej) => {
+      this.getModelNameArray(res);
+    });
+
+    Promise.all([p1, p2]).then(() => {
+      this.getTable(this.date);
+    });
+  },
+  methods: {
+    clearCheckBox() {
+      this.$refs.curRef.clearCheckBox();
+      this.dataIds = new Set();
+    },
+    // 获取表格数据
+    getTable(date) {
+      let that = this;
+      let subUrl = "";
+      const data = {
+        tid: that.modelName,
+        wpid: that.value1,
+      };
+      if ("d" == that.shows) {
+        subUrl = "evaluation/dayilyList";
+        data["date"] = date;
+      }
+      if ("m" == that.shows) {
+        subUrl = "evaluation/monthlyList";
+        const dateStr = date.split("-");
+        if (dateStr.length > 1) {
+          data["date"] = dateStr[0] + "-" + dateStr[1];
+        }
+      }
+      if ("y" == that.shows) {
+        subUrl = "evaluation/yearlyList";
+        data["date"] = date.split("-")[0];
+      }
+      that.tableLoading = true;
+      that.API.requestData({
+        timeout: 60000,
+        method: "GET",
+        baseURL: "http://10.155.32.4:8034/",
+        subUrl: subUrl,
+        data: data,
+        success(res) {
+          that.tableLoading = false;
+          if (res.data.length) {
+            const tableTargetName = {
+              target001: "平均切入风速",
+              target002: "平均达到额定风速",
+              target003: "平均大风切出风速",
+              target004: "功率一致性系数",
+              target005: "曲线偏差率",
+              target006: "对风偏差率",
+              target007: "拟合优度",
+              target008: "性能损失率",
+              target009: "利用小时数",
+              target010: "设备可利用率",
+              target011: "等效可利用系数",
+              target012: "故障损失率",
+              target013: "平均无故障间隔时间",
+              target014: "平均故障间隔时间",
+              target015: "平均风速",
+              target016: "有效风时数",
+              target017: "静风频率",
+            };
+
+            let tableData = {
+              column: [
+                {
+                  name: "",
+                  field: "fj",
+                  is_num: false,
+                  is_light: false,
+                  sortable: false,
+                  template: () => {
+                    return "<input class='check curCheckBox checkItem' type='CheckBox'/>";
+                  },
+                  click(event, data) {
+                    if (event.target.checked == false) {
+                      that.dataIds.delete(data.wtid);
+                    }
+                    if (event.target.checked) {
+                      if (that.dataIds.size < 2) {
+                        that.dataIds.add(data.wtid);
+                      } else {
+                        event.target.checked = false;
+                      }
+                    }
+                  },
+                },
+                {
+                  name: "风机",
+                  field: "wtid",
+                  is_num: false,
+                  is_light: false,
+                  sortable: true,
+                },
+                {
+                  name: "日期",
+                  field: "date",
+                  is_num: false,
+                  is_light: false,
+                  sortable: true,
+                },
+                {
+                  name: "评级",
+                  field: "grade",
+                  is_num: false,
+                  is_light: false,
+                  sortable: true,
+                  width: "100px",
+                },
+                {
+                  name: "排名",
+                  field: "ranking",
+                  is_num: true,
+                  is_light: false,
+                  sortable: true,
+                },
+              ],
+              data: [],
+            };
+
+            res.data.forEach((ele) => {
+              ele.date = new Date(ele.date).formatDate("yyyy-MM-dd hh:mm:ss");
+              for (let key in ele) {
+                if (key.indexOf("target") !== -1) {
+                  ele["copyValue"] = ele[key]["value"];
+                }
+              }
+            });
+
+            const itemTemp = res.data[0];
+
+            for (let key in itemTemp) {
+              if (key.indexOf("target") !== -1) {
+                tableData.column.push({
+                  name: tableTargetName[key],
+                  field: "copyValue",
+                  is_num: true,
+                  is_light: false,
+                  sortable: true,
+                });
+              }
+            }
+            tableData.data = res.data;
+            that.tableData = tableData;
+          }
+        },
+        Error(res) {
+          console.log("tag", res);
+        },
+      });
+    },
+    //   tab
+    handleOpen(vl, index) {
+      this.$nextTick(() => {
+        this.cur = index;
+        this.showTitle = vl;
+        if (index == 0) {
+          this.date = this.getDate(0);
+          this.shows = "d";
+          this.dialogTitle = "日信息对比";
+        }
+        if (index == 1) {
+          this.date = this.getDate(1);
+          this.shows = "m";
+          this.dialogTitle = "月信息对比";
+        }
+        if (index == 2) {
+          this.date = this.getDate(2);
+          this.shows = "y";
+          this.dialogTitle = "年信息对比";
+        }
+      });
+    },
+    // 场站
+    ChangZhanVal(r) {
+      var that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://10.155.32.4:9001/",
+        subUrl: "benchmarking/wplist",
+        success(res) {
+          that.ChangZhan = res.data;
+          that.value1 = res.data[0].id;
+          r("OK");
+        },
+      });
+    },
+
+    // 模型名称
+    getModelNameArray(r) {
+      var that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://10.155.32.4:8034/",
+        subUrl: "evaluation/modelMainList",
+        data: {
+          name: "",
+        },
+        success(res) {
+          that.modelNameArray = res.data;
+          that.modelName = res.data[0].id;
+          r("OK");
+        },
+      });
+    },
+
+    // 查询
+    handleSubmit() {
+      this.clearCheckBox();
+      this.getTable(this.date);
+    },
+    // 日信息对比
+    contrast() {
+      var that = this;
+      if (that.dataIds.size == 2) {
+        that.dialogVisible = true;
+        const tmpArr = Array.from(that.dataIds);
+        const data = {
+          gaid1: tmpArr[0],
+          gaid2: tmpArr[1],
+        };
+
+        that.API.requestData({
+          method: "GET",
+          subUrl: "/benchmarking/wtinfo",
+          data: data,
+          success(res) {
+            that.dialogData1 = [res.data.gaid1, res.data.gaid2];
+            console.log(that.dialogData1);
+          },
+        });
+        that.API.requestData({
+          method: "GET",
+          subUrl: "/benchmarking/wtchart",
+          data: data,
+          success(res) {
+            const data1 = res.data.gaid1;
+            const data2 = res.data.gaid2;
+            const chartData = [
+              {
+                indicator: [
+                  "平均切入风速",
+                  "性能损失电量",
+                  "拟合优度",
+                  "功率一致性系数",
+                  "利用小时",
+                  "设备可利用率",
+                  "等效可利用系数",
+                  "有效风时数",
+                  "平均风速",
+                  "静风频率",
+                ],
+                data: [],
+              },
+            ];
+            if (data1) {
+              chartData[0].data.push(that.getChartData(data1));
+            }
+            if (data2) {
+              chartData[0].data.push(that.getChartData(data2));
+            }
+            that.dialogData2 = chartData;
+          },
+        });
+      }
+      this.clearCheckBox();
+    },
+    getChartData(resData) {
+      const chartData = {};
+      const rowMap = {};
+      resData.forEach(function (rowData, index) {
+        rowMap[rowData["name"]] = rowData["data1"];
+      });
+      chartData["name"] = resData[resData.length - 1]["name"];
+      chartData["value"] = [];
+      chartData["value"].push(rowMap["平均切入风速"]);
+      chartData["value"].push(rowMap["性能损失电量"]);
+      chartData["value"].push(rowMap["拟合优度"]);
+      chartData["value"].push(rowMap["功率一致性系数"]);
+      chartData["value"].push(rowMap["利用小时"]);
+      chartData["value"].push(rowMap["设备可利用率"]);
+      chartData["value"].push(rowMap["等效可利用系数"]);
+      chartData["value"].push(rowMap["有效风时数"]);
+      chartData["value"].push(rowMap["平均风速"]);
+      chartData["value"].push(rowMap["静风频率"]);
+      return chartData;
+    },
+    // 获取日期
+    getDate(vl) {
+      var date = new Date();
+      var year = date.getFullYear(),
+        month = date.getMonth() + 1,
+        day = date.getDate() - 1;
+      month >= 1 && month <= 9 ? (month = "0" + month) : "";
+      day >= 0 && day <= 9 ? (day = "0" + day) : "";
+      if (vl == 0) {
+        return year + "-" + month + "-" + day;
+      }
+      if (vl == 1) {
+        return year + "-" + month;
+      }
+      if (vl == 2) {
+        return year + "";
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.newsDiv {
+  color: rgba(255, 255, 255, 0.75);
+  background-color: rgba(255, 255, 255, 0.1);
+  margin-bottom: 8px;
+  line-height: 3.4259vh;
+  padding: 0 15px;
+}
+.newspan {
+  line-height: 30px;
+  cursor: pointer;
+  padding: 0 1vw;
+  margin: 0 2px;
+  color: #9ca5a8;
+  transition: color 0.2s ease-in-out;
+  position: relative;
+}
+.newspan:hover {
+  background: linear-gradient(
+    to top,
+    rgba(5, 187, 76, 0.5),
+    rgba(5, 187, 76, 0)
+  );
+  color: white;
+  position: relative;
+}
+.newspan:hover::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 0.463vh;
+  border: 0.093vh solid #05bb4c;
+  border-top: 0;
+  left: 0;
+  bottom: 0;
+  box-sizing: border-box;
+}
+.active {
+  background: linear-gradient(
+    to top,
+    rgba(5, 187, 76, 0.5),
+    rgba(5, 187, 76, 0)
+  );
+  color: white;
+  position: relative;
+}
+.active::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 0.463vh;
+  border: 0.093vh solid #05bb4c;
+  border-top: 0;
+  left: 0;
+  bottom: 0;
+  box-sizing: border-box;
+}
+.title {
+  background: rgba(255, 255, 255, 0.1);
+  margin-bottom: 8px;
+  padding: 1vh;
+}
+</style>
+<style lang="less">
+.decision-page-2 {
+  .content .project-table {
+    tbody {
+      height: calc(100vh - 24.5vh);
+    }
+  }
+  .project-table {
+    overflow: auto;
+    tbody {
+      height: 239px;
+    }
+
+    th,
+    td {
+      color: #b2bdc0;
+
+      &:nth-child(1) {
+        width: 50px;
+      }
+
+      &:nth-child(2) {
+        width: 50px;
+      }
+    }
+  }
+
+  .action {
+    text-decoration: underline;
+    color: @green;
+    cursor: pointer;
+  }
+}
+</style>
+<style lang="less">
+.curTableBox {
+  width: 100%;
+  .curTableStyle {
+    overflow-x: scroll;
+  }
+}
+</style>

src/views/WindSite/pages/Home/Home.vue

@@ -1,11 +1,21 @@
 <template>
   <div>
     <div class="btn-group-tabs">
-      <BtnGroup2 :btnGroups="btnGroupsss" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
+      <BtnGroup2
+        :btnGroups="btnGroupsss"
+        :rowIndex="rowIndex"
+        :index="selectIndex"
+        @select="select"
+      ></BtnGroup2>
     </div>
     <div class="wind-site-home">
       <div class="mg-b-16">
-        <btn-group-double :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select" />
+        <btn-group-double
+          :btnGroups="btnGroups"
+          :rowIndex="0"
+          :index="1"
+          @select="select"
+        />
       </div>
       <!-- <row v-if="paramsId.includes('FDC')">
         <wind-site-weather :time="nowTime" :data="tqmap" :paramsId="resCode" />
@@ -156,7 +166,7 @@
           </row>
         </panel-3>
       </row> -->
-       <row >
+      <row>
         <wind-site-weather :time="nowTime" :data="tqmap" :paramsId="resCode" />
         <panel-3 class="wind-site-info">
           <row align="middle">
@@ -187,7 +197,9 @@
             <div class="info-item">
               <div class="value">{{ jczbmap.ssfs }}</div>
               <!-- <div class="text">实时风速</div> -->
-              <div class="text">{{resCode.includes('FDC')?'实时风速':'平均功率'}} </div>
+              <div class="text">
+                {{ resCode.includes("FDC") ? "实时风速" : "平均功率" }}
+              </div>
             </div>
             <div class="info-item">
               <div class="value">{{ jczbmap.sjgl }}</div>
@@ -197,24 +209,24 @@
         </panel-3>
         <panel-3 class="wind-running-info">
           <row align="middle">
-            <div class="fengji" v-if=" resCode.indexOf('GDC') == -1  ">
+            <div class="fengji" v-if="resCode.indexOf('GDC') == -1">
               <div class="fengji-icon svg-icon svg-icon-white">
                 <svg-icon class="" svgid="svg-风机" />
               </div>
               <div class="info">
-                <div class="text green" >接入风机  </div>
-                 <!-- <div class="text green" v-if="resCode.includes('FDC') && resCode != ''">接入风机 </div>
+                <div class="text green">接入风机</div>
+                <!-- <div class="text green" v-if="resCode.includes('FDC') && resCode != ''">接入风机 </div>
                   <div class="text green" v-else-if="resCode.includes('GDC') && resCode != ''">接入光伏 </div> -->
                 <div class="value">{{ jczbmap.jrts }}</div>
               </div>
             </div>
-            <div class="fengji"  v-else-if=" resCode.indexOf('FDC') == -1 ">
+            <div class="fengji" v-else-if="resCode.indexOf('FDC') == -1">
               <div class="fengji-icon svg-icon svg-icon-white">
                 <svg-icon class="" svgid="svg-gf-matrix" />
               </div>
               <div class="info">
                 <div class="text green">接入光伏</div>
-                 <!-- <div class="text green" v-if="resCode.includes('FDC') && resCode != ''">接入风机 </div>
+                <!-- <div class="text green" v-if="resCode.includes('FDC') && resCode != ''">接入风机 </div>
                   <div class="text green" v-else-if="resCode.includes('GDC') && resCode != ''">接入光伏 </div> -->
                 <div class="value">{{ jczbmap.jrts }}</div>
               </div>
@@ -225,57 +237,46 @@
                   <span class="svg-icon svg-icon-green">
                     <svg-icon svgid="svg-standby" />
                   </span>
-                  <span class="text green"> 
-                    待机
-                  </span>
+                  <span class="text green"> 待机 </span>
                 </div>
                 <div class="status">
                   <span class="svg-icon svg-icon-purple">
                     <svg-icon svgid="svg-normal-power" />
                   </span>
-                  <span class="text purple">
-                    运行
-                  </span>
+                  <span class="text purple"> 运行 </span>
                 </div>
-                <div class="status ">
+                <div class="status">
                   <span class="svg-icon svg-icon-pink">
-                    <svg-icon svgid="svg-limit-power" style="margin:3px 0.3704vh -3px 0;" />
-                  </span>
-                  <span class="text pink">
-                    限电
+                    <svg-icon
+                      svgid="svg-limit-power"
+                      style="margin: 3px 0.3704vh -3px 0"
+                    />
                   </span>
+                  <span class="text pink"> 限电 </span>
                 </div>
                 <div class="status">
                   <span class="svg-icon svg-icon-red">
                     <svg-icon svgid="svg-gz-downtime" />
                   </span>
-                  <span class="text red">
-                    故障
-                  </span>
+                  <span class="text red"> 故障 </span>
                 </div>
                 <div class="status">
                   <span class="svg-icon svg-icon-orange">
                     <svg-icon svgid="svg-jx-downtime" />
                   </span>
-                  <span class="text orange">
-                    检修
-                  </span>
+                  <span class="text orange"> 检修 </span>
                 </div>
                 <div class="status">
                   <span class="svg-icon svg-icon-gray">
                     <svg-icon svgid="svg-offline" />
                   </span>
-                  <span class="text gray">
-                    离线
-                  </span>
+                  <span class="text gray"> 离线 </span>
                 </div>
                 <div class="status">
                   <span class="svg-icon svg-icon-white">
                     <svg-icon svgid="svg-intranet-involvement" />
                   </span>
-                  <span class="text white">
-                    受累
-                  </span>
+                  <span class="text white"> 受累 </span>
                 </div>
               </row>
               <row>
@@ -320,22 +321,32 @@
         </panel-3>
       </row>
       <div class="first-info mg-t-16 mg-b-16">
-        <div style="flex:0 1 450px;">
+        <div style="flex: 0 1 450px">
           <panel title="场站">
-            <station height="18.519vh" />
+            <station height="18.519vh" :chartData="stationChartData" />
           </panel>
         </div>
-        <div class="mg-l-16" style="flex:1 1 auto;" ref="lineChart">
+        <div class="mg-l-16" style="flex: 1 1 auto" ref="lineChart">
           <panel title="4小时功率曲线图" v-if="resCode.includes('FDC')">
-            <multiple-line-chart height="18.519vh" v-if="Powertrend" :list="Powertrend.value" :units="Powertrend.units"
-              :showLegend="true" />
+            <multiple-line-chart
+              height="18.519vh"
+              v-if="Powertrend"
+              :list="Powertrend.value"
+              :units="Powertrend.units"
+              :showLegend="true"
+            />
           </panel>
-           <panel title="4小时功率曲线图" v-if="resCode.includes('GDC')">
-            <multiple-line-chart height="18.519vh" v-if="Powertrend1" :list="Powertrend1.value" :units="Powertrend1.units"
-              :showLegend="true" />
+          <panel title="4小时功率曲线图" v-if="resCode.includes('GDC')">
+            <multiple-line-chart
+              height="18.519vh"
+              v-if="Powertrend1"
+              :list="Powertrend1.value"
+              :units="Powertrend1.units"
+              :showLegend="true"
+            />
           </panel>
         </div>
-        <div class="mg-l-16" style="flex:0 0 400px;">
+        <div class="mg-l-16" style="flex: 0 0 400px">
           <panel class="light-matrix-panel">
             <light-matrix :list="fjmap" />
           </panel>
@@ -343,45 +354,77 @@
       </div>
       <row>
         <Col :span="8">
-        <panel title="日度损失电量分析">
-          <dual-pie-chart :innerData="pieChartData.dayData" :outerData="pieChartData.dayData" height="21.296vh" />
-        </panel>
+          <panel title="日度损失电量分析">
+            <dual-pie-chart
+              :innerData="pieChartData.dayData"
+              :outerData="pieChartData.dayData"
+              height="21.296vh"
+            />
+          </panel>
         </Col>
         <Col :span="8">
-        <panel title="月度损失电量分析">
-          <dual-pie-chart :innerData="pieChartData.monthData" :outerData="pieChartData.monthData" height="21.296vh" />
-        </panel>
+          <panel title="月度损失电量分析">
+            <dual-pie-chart
+              :innerData="pieChartData.monthData"
+              :outerData="pieChartData.monthData"
+              height="21.296vh"
+            />
+          </panel>
         </Col>
         <Col :span="8">
-        <panel title="年度损失电量分析">
-          <dual-pie-chart :innerData="pieChartData.yearData" :outerData="pieChartData.yearData" height="21.296vh" />
-        </panel>
+          <panel title="年度损失电量分析">
+            <dual-pie-chart
+              :innerData="pieChartData.yearData"
+              :outerData="pieChartData.yearData"
+              height="21.296vh"
+            />
+          </panel>
         </Col>
       </row>
       <row>
         <Col :span="8">
-        <panel title="日度损失电量分析">
-          <hover-bar-chart :list="dayLost" height="21.296vh" />
-        </panel>
+          <panel title="日度损失电量分析">
+            <hover-bar-chart :list="dayLost" height="21.296vh" />
+          </panel>
         </Col>
         <Col :span="8">
-        <panel title="日发电量对比" subTitle="详情" @click='rfdl'>
-          <multiple-bar-chart height="21.296vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units"
-            :showLegend="true" />
-        </panel>
-		<el-dialog title="日发电量对比" v-model="rfdlDialog" width="70%" top="15vh" custom-class="modal" :close-on-click-modal="false">
-			<el-row type="flex">
-				<ComTable :data="tableData" height="15vh"></ComTable>
-			</el-row>
-			<el-row type="flex">
-				<multiple-bar-chart height="45vh" :list="CompleteElectricity.data" :units="CompleteElectricity.units" :showLegend="true" />
-			</el-row>
-		</el-dialog>
+          <panel title="日发电量对比" subTitle="详情" @click="rfdl">
+            <multiple-bar-chart
+              height="21.296vh"
+              :list="CompleteElectricity.data"
+              :units="CompleteElectricity.units"
+              :showLegend="true"
+            />
+          </panel>
+          <el-dialog
+            title="日发电量对比"
+            v-model="rfdlDialog"
+            width="70%"
+            top="15vh"
+            custom-class="modal"
+            :close-on-click-modal="false"
+          >
+            <el-row type="flex">
+              <ComTable :data="tableData" height="15vh"></ComTable>
+            </el-row>
+            <el-row type="flex">
+              <multiple-bar-chart
+                height="45vh"
+                :list="CompleteElectricity.data"
+                :units="CompleteElectricity.units"
+                :showLegend="true"
+              />
+            </el-row>
+          </el-dialog>
         </Col>
         <Col :span="8">
-        <panel title="月发电量对比">
-          <normal-line-chart height="21.296vh" :list="MonthCompare.value" :units="MonthCompare.units" />
-        </panel>
+          <panel title="月发电量对比">
+            <normal-line-chart
+              height="21.296vh"
+              :list="MonthCompare.value"
+              :units="MonthCompare.units"
+            />
+          </panel>
         </Col>
       </row>
     </div>
@@ -410,14 +453,31 @@ export default {
   // 名称
   name: "WindSiteHome",
   // 使用组件
-  components: { BtnGroup2, WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble, Station ,ComTable},
+  components: {
+    BtnGroup2,
+    WindSiteWeather,
+    Row,
+    Col,
+    Panel,
+    DualPieChart,
+    MultipleLineChart,
+    Panel3,
+    SvgIcon,
+    HoverBarChart,
+    MultipleBarChart,
+    NormalLineChart,
+    LightMatrix,
+    BtnGroupDouble,
+    Station,
+    ComTable,
+  },
   // 数据
-  data () {
+  data() {
     return {
       timmer: null, // 计时器
       timmer2: null,
-      paramsId:"",
-      resCode:"",
+      paramsId: "",
+      resCode: "",
       nowTime: "", // 时间
       fjmap: [], // 分机矩阵
       tqmap: {}, // 天气数据
@@ -426,6 +486,7 @@ export default {
       jczbmap: {}, // 顶部基础数据
       dayLost: [], // 日度损失电量分析柱状图
       donePower: [], // 完成电量柱状图
+      stationChartData: [],
       // 饼图数据
       pieChartData: {
         // 日度
@@ -514,21 +575,21 @@ export default {
           btns: [],
         },
       ],
-	  rfdlDialog:false,
-	  tableData: {
-	  	column: [],
-	  	data: [],
-	  },
+      rfdlDialog: false,
+      tableData: {
+        column: [],
+        data: [],
+      },
     };
   },
   // 函数
   methods: {
-    getWp () {
+    getWp() {
       let that = this;
       that.API.requestData({
         method: "GET",
         subUrl: "powercompare/windfarmAllAjax",
-        success (res) {
+        success(res) {
           let btnGroups = [
             {
               icon: "svg-wind-site",
@@ -560,7 +621,7 @@ export default {
       });
     },
 
-    renderBtnActiveIndex () {
+    renderBtnActiveIndex() {
       this.btnGroupsss.forEach((pEle, pIndex) => {
         pEle.btns.forEach((cEle, cIndex) => {
           if (cEle.code === this.wpId) {
@@ -571,21 +632,15 @@ export default {
       });
     },
 
-    select (res) {
+    select(res) {
       let that = this;
       this.$router.replace({
         path: `/monitor/windsite/home/${res.code}`,
       });
       that.resCode = res.code;
-      // console.log('resCode:',that.resCode)
-      // console.log('ParamsId:',that.paramsId)
-       console.log('paramsId:',that.paramsId.indexOf('FDC'))
-    console.log('resCode:',that.resCode.indexOf('FDC'))
-    console.log('paramsId:',that.paramsId.indexOf('GDC'))
-    console.log('resCode:',that.resCode.indexOf('GDC'))
     },
     // 根据风机状态码返回对应 class
-    getColor (fjzt) {
+    getColor(fjzt) {
       switch (fjzt) {
         case 0:
           return "green";
@@ -604,13 +659,12 @@ export default {
       }
     },
     // 请求服务
-    requestData (showLoading) {
+    requestData(showLoading) {
       this.requestWpInfo(showLoading);
-
     },
 
     // 获取场站监视数据
-    requestWpInfo (showLoading) {
+    requestWpInfo(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -619,14 +673,22 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
+        success(res) {
           if (res.data) {
-            // console.log('resWpinfo:',res.data)
             that.tqmap = res.data.tqmap;
-            that.tqmap.name = res.data.jczbmap.name
-            that.tqmap.resCode = that.resCode
+            that.tqmap.name = res.data.jczbmap.name;
+            that.tqmap.resCode = that.resCode;
             let fjmap = [];
-            let keys = ["value1", "value2", "value3", "value4", "value5", "value6", "value7", "value9"];
+            let keys = [
+              "value1",
+              "value2",
+              "value3",
+              "value4",
+              "value5",
+              "value6",
+              "value7",
+              "value9",
+            ];
             let Powertrend = {
               // 图表所用单位
               units: ["(万KWh)", "(风速)"],
@@ -673,7 +735,7 @@ export default {
                 },
               ],
             };
-             let Powertrend1 = {
+            let Powertrend1 = {
               // 图表所用单位
               units: ["(万KWh)", "(风速)"],
               value: [
@@ -767,7 +829,7 @@ export default {
                   text: new Date(ele.time).formatDate("hh:mm"),
                   value: ele[key],
                 });
-                    Powertrend1.value[keyIndex].value.push({
+                Powertrend1.value[keyIndex].value.push({
                   text: new Date(ele.time).formatDate("hh:mm"),
                   value: ele[key],
                 });
@@ -819,7 +881,7 @@ export default {
     },
 
     // 获取日度损失电量分析
-    requestLoss (showLoading) {
+    requestLoss(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -828,7 +890,7 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
+        success(res) {
           let dayLost = [];
           res.data.forEach((ele) => {
             dayLost.push({
@@ -842,7 +904,7 @@ export default {
     },
 
     // 获取完成电量
-    requestPower (showLoading) {
+    requestPower(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -851,14 +913,16 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
-			let column = [{
-				name: '',
-				field: 'tit',
-				is_num: false,
-				is_light: false,
-			 }],
-			tableData = [];
+        success(res) {
+          let column = [
+              {
+                name: "",
+                field: "tit",
+                is_num: false,
+                is_light: false,
+              },
+            ],
+            tableData = [];
           let data = [
             {
               title: "日发电量",
@@ -870,62 +934,62 @@ export default {
               yAxisIndex: 0,
               value: [],
             },
-			{
-			  title: "风速",
-			  yAxisIndex: 0,
-			  value: [],
-			},
-			{
-			  title: "上网电量",
-			  yAxisIndex: 0,
-			  value: [],
-			},
+            {
+              title: "风速",
+              yAxisIndex: 0,
+              value: [],
+            },
+            {
+              title: "上网电量",
+              yAxisIndex: 0,
+              value: [],
+            },
           ];
-	
-          res.data.forEach((ele,idx) => {
-			  data[0].value.push({
-				text: ele.timestr,
-				value: ele.value1 || 0,
-			  });
-			 data[1].value.push({
-				text: ele.timestr,
-				value: ele.value2 || 0,
-			 });
-			 data[2].value.push({
-				text: ele.timestr,
-				value: ele.value3 || 0,
-			 });
-			 data[3].value.push({
-				text: ele.timestr,
-				value: ele.value4 || 0,
-			 });
-			 
-			 column.push({
-				name: ele.timestr,
-				field: idx,
-				is_num: false,
-				is_light: false,
-			 });
+
+          res.data.forEach((ele, idx) => {
+            data[0].value.push({
+              text: ele.timestr,
+              value: ele.value1 || 0,
+            });
+            data[1].value.push({
+              text: ele.timestr,
+              value: ele.value2 || 0,
+            });
+            data[2].value.push({
+              text: ele.timestr,
+              value: ele.value3 || 0,
+            });
+            data[3].value.push({
+              text: ele.timestr,
+              value: ele.value4 || 0,
+            });
+
+            column.push({
+              name: ele.timestr,
+              field: idx,
+              is_num: false,
+              is_light: false,
+            });
           });
-			that.CompleteElectricity.data = data;
-			data.forEach((ele,idx)=>{
-				let obj = [];
-				ele.value.forEach((ele2,idx2)=>{
-				  obj[idx2] = ele2.value;
-				})
-				obj['tit'] = ele.title;
-				tableData.push(obj)
-			})
-		  that.tableData = {
-			  column:column,
-			  data:tableData
-		  }
+          that.CompleteElectricity.data = data;
+          data.forEach((ele, idx) => {
+            let obj = [];
+            ele.value.forEach((ele2, idx2) => {
+              obj[idx2] = ele2.value;
+            });
+            obj["tit"] = ele.title;
+            tableData.push(obj);
+          });
+          that.tableData = {
+            column: column,
+            data: tableData,
+          };
         },
       });
     },
 
     // 获取月发电量对比
-    requestMonthPower (showLoading) {
+    requestMonthPower(showLoading) {
       let that = this;
       that.API.requestData({
         showLoading,
@@ -934,7 +998,7 @@ export default {
         data: {
           wpId: that.wpId,
         },
-        success (res) {
+        success(res) {
           let data = [
             {
               title: "月发电量",
@@ -963,24 +1027,21 @@ export default {
         },
       });
     },
-	rfdl(){
-		this.rfdlDialog = true;
-	}
+    rfdl() {
+      this.rfdlDialog = true;
+    },
   },
 
-  created () {
+  created() {
     let that = this;
     that.wpId = that.$route.params.wpId;
     that.paramsId = that.$route.params.wpId;
     that.resCode = that.$route.params.wpId;
-    console.log('paramsId:',that.paramsId.indexOf('FDC'))
-    console.log('resCode:',that.resCode.indexOf('FDC'))
-    console.log('paramsId:',that.paramsId.indexOf('GDC'))
-    console.log('resCode:',that.resCode.indexOf('GDC'))
+    that.stationChartData = require(`./stationJson/${that.$route.params.wpId}.js`).default;
     that.$nextTick(() => {
       that.getWp();
       that.requestData(false);
-       that.requestLoss(false);
+      that.requestLoss(false);
       that.requestPower(false);
       that.requestMonthPower(false);
       that.timmer = setInterval(() => {
@@ -992,16 +1053,16 @@ export default {
     });
   },
 
-  mounted () { },
+  mounted() {},
 
-  unmounted () {
+  unmounted() {
     clearInterval(this.timmer);
     clearInterval(this.timmer2);
     this.timmer = null;
     this.timmer2 = null;
   },
   watch: {
-    $route (res) {
+    $route(res) {
       this.wpId = res.params.wpId;
       if (res.params.wpId) {
         this.requestData(false);
@@ -1014,7 +1075,9 @@ export default {
 
 <style lang="less">
 .wind-site-home {
-	.wind-site-weather{width: 29%;}
+  .wind-site-weather {
+    width: 29%;
+  }
   .first-info {
     display: flex;
   }
@@ -1022,7 +1085,7 @@ export default {
   .wind-site-info {
     margin-left: 0.7407vh;
     // flex: 1 0 auto;
-	width: 33%;
+    width: 33%;
     padding: 8px;
 
     & > .row {
@@ -1132,8 +1195,8 @@ export default {
   }
 
   .light-matrix-panel {
-        width: 673px;
-    overflow-y:scroll;
+    width: 673px;
+    overflow-y: scroll;
     height: 240px;
 
     .panel-body {

src/views/WindSite/pages/Home/Station.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="station" @mouseleave="mouseout">
     <div :id="id" class="station-x6"></div>
-    <div class="station-tip" v-if="tipShow" :style="'top: '+tipTop+'px; left: '+tipLeft+'px'">{{tip}}</div>
+    <div
+      class="station-tip"
+      v-if="tipShow"
+      :style="'top: ' + tipTop + 'px; left: ' + tipLeft + 'px'"
+    >
+      {{ tip }}
+    </div>
   </div>
 </template>
 
@@ -27,6 +33,10 @@ export default {
       type: String,
       default: "175px",
     },
+    chartData: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -395,12 +405,12 @@ export default {
         grid: false,
         autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素
         mousewheel: {
-            enabled: false,
-            modifiers: [],
+          enabled: false,
+          modifiers: [],
         },
         scroller: {
-            enabled: false,
-            pannable: false,
+          enabled: false,
+          pannable: false,
         },
         interacting: false,
       });
@@ -412,34 +422,33 @@ export default {
       const els = this.$el.querySelectorAll(".node-hover");
       const that = this;
       Array.prototype.forEach.call(els, (element, index) => {
-          element.addEventListener("mouseenter", function(event) {
-              if (!that.tipShow) {
-                that.tipShow = true;
-              }
-              let uriStr = this.getAttribute("data-item");
-              let data = JSON.parse(decodeURIComponent(uriStr));
-              that.mouseover(data);
-              let tipEl = that.$el.querySelector(".station-tip");
+        element.addEventListener("mouseenter", function (event) {
+          if (!that.tipShow) {
+            that.tipShow = true;
+          }
+          let uriStr = this.getAttribute("data-item");
+          let data = JSON.parse(decodeURIComponent(uriStr));
+          that.mouseover(data);
+          let tipEl = that.$el.querySelector(".station-tip");
+          if (tipEl) {
+            let top = event.clientY - tipEl.scrollHeight;
+            let left = event.clientX - tipEl.scrollWidth / 2;
+            that.tipTop = top;
+            that.tipLeft = left;
+          } else {
+            const foundTipEl = setInterval(() => {
               if (tipEl) {
+                clearInterval(foundTipEl);
                 let top = event.clientY - tipEl.scrollHeight;
                 let left = event.clientX - tipEl.scrollWidth / 2;
                 that.tipTop = top;
                 that.tipLeft = left;
               } else {
-                const foundTipEl = setInterval(() => {
-                  if (tipEl) {
-                    clearInterval(foundTipEl);
-                    let top = event.clientY - tipEl.scrollHeight;
-                    let left = event.clientX - tipEl.scrollWidth / 2;
-                    that.tipTop = top;
-                    that.tipLeft = left;
-                  } else {
-                    tipEl = that.$el.querySelector(".station-tip");
-                  }
-                }, 100);
+                tipEl = that.$el.querySelector(".station-tip");
               }
-              
-          })
+            }, 100);
+          }
+        });
       });
     },
     createNode(graph, data) {
@@ -471,7 +480,7 @@ export default {
             width: 120,
             height: 45,
             shape: "html",
-            label: "升压站",
+            label: this.list[0].name,
             html() {
               const wrap = document.createElement("div");
               wrap.innerHTML = `<img src="${data.image}" />`;
@@ -534,6 +543,16 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
+      this.list = this.chartData;
+      this.list.forEach((ele) => {
+        if (
+          ele.id === "root" &&
+          ele.type === "img" &&
+          ele.image === "stationimg"
+        ) {
+          ele.image = stationimg;
+        }
+      });
       this.initStation();
     });
   },
@@ -541,6 +560,21 @@ export default {
     // 数据更新前
   },
   updated() {},
+  watch: {
+    chartData(res) {
+      this.list = res;
+      this.list.forEach((ele) => {
+        if (
+          ele.id === "root" &&
+          ele.type === "img" &&
+          ele.image === "stationimg"
+        ) {
+          ele.image = stationimg;
+        }
+      });
+      this.initStation();
+    },
+  },
 };
 </script>
 
@@ -566,7 +600,8 @@ export default {
     word-wrap: break-word;
     background-color: #000000bf;
     border-radius: 2px;
-    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
+    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
+      0 9px 28px 8px #0000000d;
   }
 }
 </style>

src/views/WindSite/pages/Home/stationJson/MHS_FDC.js

@@ -0,0 +1,316 @@
+export default [
+  {
+    id: "root",
+    name: "麻黄山风电场",
+    type: "img",
+    image: "stationimg",
+    x: 10,
+    y: 30,
+  },
+  //麻黄山1号线路
+  {
+    id: "MG01_01",
+    type: "circle",
+    x: 120,
+    y: 40,
+    connects: ["root"],
+  },
+  {
+    id: "MG01_02",
+    type: "circle",
+    x: 180,
+    y: 30,
+    connects: ["MG01_01"],
+  },
+  {
+    id: "MG01_03",
+    type: "circle",
+    x: 200,
+    y: 15,
+    connects: ["MG01_02"],
+  },
+  {
+    id: "MG01_04",
+    type: "circle",
+    x: 200,
+    y: 35,
+    connects: ["MG01_03"],
+  },
+  {
+    id: "MG01_05",
+    type: "circle",
+    x: 240,
+    y: 35,
+    connects: ["MG01_04"],
+  },
+  {
+    id: "MG01_06",
+    type: "circle",
+    x: 260,
+    y: 45,
+    connects: ["MG01_05"],
+  },
+  {
+    id: "MG01_07",
+    type: "circle",
+    x: 260,
+    y: 15,
+    connects: ["MG01_06"],
+  },
+  {
+    id: "MG01_08",
+    type: "circle",
+    x: 280,
+    y: 5,
+    connects: ["MG01_07"],
+  },
+  {
+    id: "MG01_09",
+    type: "circle",
+    x: 310,
+    y: 5,
+    connects: ["MG01_08"],
+  },
+  {
+    id: "MG01_10",
+    type: "circle",
+    x: 330,
+    y: 20,
+    connects: ["MG01_09"],
+  },
+  {
+    id: "MG01_11",
+    type: "circle",
+    x: 350,
+    y: 15,
+    connects: ["MG01_10"],
+  },
+  {
+    id: "A9",
+    type: "circle",
+    x: 350,
+    y: 15,
+    connects: ["MG01_11"],
+  },
+  //麻黄山2号线路
+  {
+    id: "MG01_12",
+    type: "circle",
+    x: 150,
+    y: 60,
+    connects: ["root"],
+  },
+  {
+    id: "MG01_13",
+    type: "circle",
+    x: 180,
+    y: 70,
+    connects: ["MG01_12"],
+  },
+  {
+    id: "MG01_14",
+    type: "circle",
+    x: 220,
+    y: 55,
+    connects: ["MG01_13"],
+  },
+  {
+    id: "MG01_15",
+    type: "circle",
+    x: 240,
+    y: 75,
+    connects: ["MG01_14"],
+  },
+  {
+    id: "MG01_16",
+    type: "circle",
+    x: 280,
+    y: 45,
+    connects: ["MG01_15"],
+  },
+  {
+    id: "MG01_17",
+    type: "circle",
+    x: 310,
+    y: 60,
+    connects: ["MG01_16"],
+  },
+  {
+    id: "MG01_18",
+    type: "circle",
+    x: 310,
+    y: 50,
+    connects: ["MG01_17"],
+  },
+  {
+    id: "MG01_19",
+    type: "circle",
+    x: 370,
+    y: 40,
+    connects: ["MG01_18"],
+  },
+  {
+    id: "MG01_20",
+    type: "circle",
+    x: 330,
+    y: 60,
+    connects: ["MG01_19"],
+  },
+  {
+    id: "MG01_21",
+    type: "circle",
+    x: 370,
+    y: 50,
+    connects: ["MG01_20"],
+  },
+  {
+    id: "MG01_22",
+    type: "circle",
+    x: 390,
+    y: 70,
+    connects: ["MG01_21"],
+  },
+
+  //麻黄山3号线路
+  {
+    id: "MG01_23",
+    type: "circle",
+    x: 150,
+    y: 75,
+    connects: ["root"],
+  },
+  {
+    id: "MG01_24",
+    type: "circle",
+    x: 170,
+    y: 75,
+    connects: ["MG01_23"],
+  },
+  {
+    id: "MG01_25",
+    type: "circle",
+    x: 190,
+    y: 85,
+    connects: ["MG01_24"],
+  },
+  {
+    id: "MG01_26",
+    type: "circle",
+    x: 240,
+    y: 90,
+    connects: ["MG01_25"],
+  },
+  {
+    id: "MG01_27",
+    type: "circle",
+    x: 270,
+    y: 90,
+    connects: ["MG01_26"],
+  }, {
+    id: "MG01_28",
+    type: "circle",
+    x: 290,
+    y: 95,
+    connects: ["MG01_27"],
+  }, {
+    id: "MG01_29",
+    type: "circle",
+    x: 310,
+    y: 100,
+    connects: ["MG01_28"],
+  }, {
+    id: "MG01_30",
+    type: "circle",
+    x: 330,
+    y: 100,
+    connects: ["MG01_29"],
+  }, {
+    id: "MG01_31",
+    type: "circle",
+    x: 350,
+    y: 110,
+    connects: ["MG01_30"],
+  }, {
+    id: "MG01_32",
+    type: "circle",
+    x: 370,
+    y: 115,
+    connects: ["MG01_31"],
+  }, {
+    id: "MG01_33",
+    type: "circle",
+    x: 390,
+    y: 118,
+    connects: ["MG01_32"],
+  },
+  //麻黄山4号线路
+  {
+    id: "MG01_34",
+    type: "circle",
+    x: 150,
+    y: 130,
+    connects: ["root"],
+  },
+  {
+    id: "MG01_35",
+    type: "circle",
+    x: 190,
+    y: 125,
+    connects: ["MG01_34"],
+  },
+  {
+    id: "MG01_36",
+    type: "circle",
+    x: 230,
+    y: 120,
+    connects: ["MG01_35"],
+  },
+  {
+    id: "MG01_37",
+    type: "circle",
+    x: 270,
+    y: 115,
+    connects: ["MG01_36"],
+  },
+  {
+    id: "MG01_38",
+    type: "circle",
+    x: 310,
+    y: 115,
+    connects: ["MG01_37"],
+  },
+  {
+    id: "MG01_39",
+    type: "circle",
+    x: 330,
+    y: 135,
+    connects: ["MG01_38"],
+  },
+  {
+    id: "MG01_40",
+    type: "circle",
+    x: 350,
+    y: 135,
+    connects: ["MG01_39"],
+  }, {
+    id: "MG01_41",
+    type: "circle",
+    x: 370,
+    y: 145,
+    connects: ["MG01_40"],
+  },
+  {
+    id: "MG01_42",
+    type: "circle",
+    x: 390,
+    y: 150,
+    connects: ["MG01_41"],
+  },
+  {
+    id: "MG01_43",
+    type: "circle",
+    x: 410,
+    y: 155,
+    connects: ["MG01_42"],
+  },
+]

src/views/layout/Menu.vue

@@ -386,6 +386,18 @@ export default {
               text: "等级评估",
               icon: "svg-等级评估",
               path: "/health/assess/index",
+              children: [
+                {
+                  text: "等级评估",
+                  icon: "svg-等级评估",
+                  path: "/health/assess/index",
+                },
+                {
+                  text: "自组合评级",
+                  icon: "svg-wind-site",
+                  path: "/health/assess/selfEvaluate",
+                }
+              ],
             },
             {
               text: "故障诊断",

src/views/report/ExportExcel.vue

@@ -199,9 +199,9 @@ export default {
           const downloadLink = (res.data.path + "\\" + filename)
             .replace(/\\/g, "/")
             .replace(/http:\//g, "http://")
-            .replace(/https:\//g, "http://");
+            .replace(/https:\//g, "https://");
 
-          eleLink.download = downloadLink;
+          eleLink.download = filename;
           eleLink.style.display = "none";
           eleLink.href = downloadLink;
           document.body.appendChild(eleLink);
@@ -282,9 +282,9 @@ export default {
           const downloadLink = (res.data.path + "\\" + filename)
             .replace(/\\/g, "/")
             .replace(/http:\//g, "http://")
-            .replace(/https:\//g, "http://");
+            .replace(/https:\//g, "https://");
 
-          eleLink.download = downloadLink;
+          eleLink.download = filename;
           eleLink.style.display = "none";
           eleLink.href = downloadLink;
           document.body.appendChild(eleLink);
@@ -487,23 +487,23 @@ export default {
     },
 
     changeDate(value) {
-      let dateArray = [];
       if (this.rqCheck) {
+        let dateArray = [];
         this.dateArray.forEach((ele) => {
           dateArray.push(value);
         });
+        this.dateArray = dateArray;
       }
-      this.dateArray = dateArray;
     },
 
     changeTableTime(value) {
-      let timeData = [];
       if (this.sjChecked) {
+        let timeData = [];
         this.timeData.forEach((ele) => {
           timeData.push(value);
         });
+        this.timeData = timeData;
       }
-      this.timeData = timeData;
     },
 
     zipOut(paths, pathName, zipName, deepIndex) {