控制评价模块完成

src/components/search/action.vue

@@ -69,6 +69,7 @@
                   fontSize: '12px',
                   'border-bottom': '1px solid #000000',
                 }"
+                @cell-dblclick="cellDbClick"
               >
                 <el-table-column
                   prop="time"
@@ -117,12 +118,80 @@
         </div>
       </div>
     </div>
+    <el-dialog
+      class="dialogs"
+      custom-class="currentBorder"
+      width="70%"
+      top="50px"
+      :show-close="true"
+      append-to-body
+      v-model="showStartDialog"
+    >
+      <div id="chart" style="width: 100%; height: 500px" />
+      <el-card class="otherContentBox" v-if="otherContentInfo.success">
+        <el-descriptions title="控制评分">
+          <el-descriptions-item label="控制时间">{{
+            otherContentInfo.operationRecordTs || "---"
+          }}</el-descriptions-item>
+          <el-descriptions-item label="并网开始时间">{{
+            otherContentInfo.onLineStartTs || "---"
+          }}</el-descriptions-item>
+          <el-descriptions-item label="并网结束时间">{{
+            otherContentInfo.onLineStartTs || "---"
+          }}</el-descriptions-item>
+          <el-descriptions-item label="并网时长">
+            {{ otherContentInfo.onLineDuration || "---" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="并网期间发电量">{{
+            otherContentInfo.onLinePowerGeneration
+          }}</el-descriptions-item>
+          <el-descriptions-item label="单位时间内发电量">{{
+            otherContentInfo.powerGenerationPerHour
+          }}</el-descriptions-item>
+          <el-descriptions-item label="并网期间耗电量">{{
+            otherContentInfo.powerConsumption
+          }}</el-descriptions-item>
+          <!-- <el-descriptions-item label="风能利用百分比">{{
+            otherContentInfo.windUseRate
+          }}</el-descriptions-item> -->
+          <el-descriptions-item label="评分">
+            <el-rate
+              style="display: inline-block"
+              v-model="otherContentInfo.score"
+              allow-half
+              disabled
+            />
+            <span>{{ otherContentInfo.score * 2 }}&nbsp;/&nbsp;10&nbsp;分</span>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+      <el-card class="otherContentBox" v-else>
+        <div
+          style="
+            width: 100%;
+            height: 140px;
+            color: #eee;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 18px;
+          "
+        >
+          <el-empty
+            class="empSvg"
+            :image-size="100"
+            description="暂无控制评分"
+          />
+        </div>
+      </el-card>
+    </el-dialog>
   </el-dialog>
 </template>
 
 <script>
 import dayjs from "dayjs";
 import api from "api/index";
+import * as echarts from "echarts";
 export default {
   props: {},
   updated() {
@@ -174,6 +243,11 @@ export default {
         "风机操作与风机状态不符",
         "需要登录",
       ],
+      showStartDialog: false,
+      rateValue: 4.5,
+      otherContentInfo: {
+        score: 0,
+      },
     };
   },
   methods: {
@@ -196,11 +270,11 @@ export default {
       stationList.forEach((item, index) => {
         if (item.type === 1) {
           let obj = {};
-        obj.id = index + 1;
-        obj.code = item.name;
-        obj.stationId = item.id;
-        obj.children = [];
-        this.showData[0].children.push(obj);
+          obj.id = index + 1;
+          obj.code = item.name;
+          obj.stationId = item.id;
+          obj.children = [];
+          this.showData[0].children.push(obj);
         }
       });
       this.datas = this.$store.state.windturbinelist
@@ -264,11 +338,12 @@ export default {
             ? this.chooseStation.stationId
             : "",
           userName: "",
-          windturbineId: String(this.chooseStation?.id)?.length<2
-            ? ""
-            : this.chooseStation.stationId
-            ? this.chooseStation.windturbineId
-            : "",
+          windturbineId:
+            String(this.chooseStation?.id)?.length < 2
+              ? ""
+              : this.chooseStation.stationId
+              ? this.chooseStation.windturbineId
+              : "",
           startTime: dayjs(this.timeValue[0]).format("YYYY/MM/DD HH:mm:ss"),
           endTime: dayjs(this.timeValue[1]).format("YYYY/MM/DD HH:mm:ss"),
           pageSize: this.currentPage,
@@ -296,6 +371,178 @@ export default {
           }
         });
     },
+
+    cellDbClick(row) {
+      const controlType = row.controlType || "";
+      if (controlType === "Start") {
+        this.initEcharts(row.id);
+      }
+    },
+
+    initEcharts(id) {
+      api.getEvaluationData(id).then((res) => {
+        var data = res.data.datas;
+        var statistics = res.data.statistics;
+        var marks = new Array();
+        if (Array.isArray(statistics.mark)) {
+          for (var j = 0; j < statistics.mark.length; ++j) {
+            marks.push({ xAxis: statistics.mark[j] });
+          }
+        }
+
+        var ser = new Array();
+        var isFirst = true;
+        for (var i = 0; i < data.length; ++i) {
+          var s = {
+            data: data[i].values.map((item) => {
+              return item.value;
+            }),
+            type: "line",
+            name: data[i].name,
+            symbol: "none",
+            yAxisIndex: /功率/g.test(data[i].name) ? 1 : 0,
+          };
+          if (isFirst) {
+            s.markLine = {
+              symbol: ["none", "none"],
+              label: { show: false },
+              data: marks,
+            };
+          }
+          ser.push(s);
+          isFirst = false;
+        }
+
+        var option = {
+          tooltip: {
+            trigger: "axis",
+          },
+          legend: {
+            show: true,
+            textStyle: {
+              color: "#eee", //字体颜色
+            },
+            data: data.map((item) => {
+              return item.name;
+            }),
+          },
+          xAxis: {
+            type: "category",
+            data: data[0].values.map((item) => {
+              return new Date(item.ts).toLocaleString();
+            }),
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#eee",
+              },
+            },
+          },
+          yAxis: [
+            {
+              type: "value",
+              name: "风速(m/s)",
+              nameTextStyle: {
+                color: "#fff",
+              },
+              axisLabel: {
+                textStyle: {
+                  color: "#eee",
+                },
+              },
+            },
+            {
+              type: "value",
+              name: "功率(kwh)",
+              nameTextStyle: {
+                color: "#fff",
+              },
+              axisLabel: {
+                textStyle: {
+                  color: "#eee",
+                },
+              },
+            },
+          ],
+          dataZoom: [
+            {
+              type: "inside",
+              start: 0,
+              end: 100,
+            },
+          ],
+          series: ser,
+        };
+
+        if (res.data.statistics.success) {
+          this.otherContentInfo = {
+            operationRecordTs: this.formatDate(
+              new Date(res.data.statistics.allTime.operationRecordTs)
+            ),
+            onLineStartTs: this.formatDate(
+              new Date(res.data.statistics.allTime.onlineStartTs)
+            ),
+            onLineEndTs: this.formatDate(
+              new Date(res.data.statistics.allTime.onlineEndTs)
+            ),
+            onLineDuration: `${res.data.statistics.allTime.onLineDuration.toFixed(
+              2
+            )} h`,
+            onLinePowerGeneration: `${res.data.statistics.onLinePowerGeneration.toFixed(
+              2
+            )} kwh`,
+            powerGenerationPerHour: `${res.data.statistics.powerGenerationPerHour.toFixed(
+              2
+            )} kwh`,
+            powerConsumption: `${res.data.statistics.powerConsumption.toFixed(
+              2
+            )} kwh`,
+            windUseRate: `${res.data.statistics.windUseRate.toFixed(2)} %`,
+            score: res.data.statistics.score / 2,
+            success: res.data.statistics.success,
+          };
+        } else {
+          this.otherContentInfo = {};
+        }
+
+        this.showStartDialog = true;
+
+        this.$nextTick(() => {
+          let chartDom = document.getElementById("chart");
+          chartDom.innerHTML = "";
+          chartDom?.removeAttribute("_echarts_instance_");
+          let chart = echarts.init(chartDom, null, { renderer: "svg" });
+          chart.setOption(option);
+        });
+      });
+    },
+
+    formatDate(value) {
+      var date = new Date(value);
+      var y = date.getFullYear(),
+        m = date.getMonth() + 1,
+        d = date.getDate(),
+        h = date.getHours(),
+        i = date.getMinutes(),
+        s = date.getSeconds();
+      if (m < 10) {
+        m = "0" + m;
+      }
+      if (d < 10) {
+        d = "0" + d;
+      }
+      if (h < 10) {
+        h = "0" + h;
+      }
+      if (i < 10) {
+        i = "0" + i;
+      }
+      if (s < 10) {
+        s = "0" + s;
+      }
+      var t = y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
+      return t;
+    },
   },
   watch: {
     filterText(val) {
@@ -413,4 +660,39 @@ tr {
   display: flex;
   flex-direction: row-reverse;
 }
+</style>
+
+<style lang="less">
+.el-dialog.currentBorder {
+  border: 1px solid #eee;
+}
+
+.el-card.otherContentBox {
+  background: rgb(36, 36, 36);
+
+  .el-descriptions__header {
+    color: #fff;
+  }
+
+  .el-descriptions__cell {
+    white-space: nowrap;
+  }
+
+  .el-descriptions__body {
+    color: #eee;
+    background: rgb(36, 36, 36);
+  }
+
+  .empSvg {
+    .el-empty__image {
+      opacity: 0.9;
+    }
+
+    .el-empty__description {
+      p {
+        color: #eee;
+      }
+    }
+  }
+}
 </style>