project-neic/src/components/search/action.vue

<template>
  <el-dialog
    width="70%"
    @open="opened"
    @closed="closed"
    :fullscreen="true"
    :show-close="true"
    class="dialogs"
  >
    <template #title>
      <div class="showTitles currentShowTitles">
        <div class="titles">动作查询</div>
      </div>
    </template>
    <div class="body">
      <div class="bodyDetial">
        <!-- <div style="width: 50%;height:200px;background-color:red;"></div>
      <div style="width: 50%;height:200px;background-color:yellow;"></div> -->
        <div class="left-item">
          <el-scrollbar>
            <el-input placeholder="输入关键字进行过滤" v-model="filterText">
            </el-input>
            <el-tree
              class="filter-tree"
              :data="showData"
              :props="defaultProps"
              :filter-node-method="filterNode"
              node-key="id"
              :default-expanded-keys="[0]"
              ref="tree"
              @node-click="handleChange"
            >
            </el-tree>
          </el-scrollbar>
        </div>
        <div class="right-item">
          <div class="dateBar">
            <el-date-picker
              class="pickers"
              @change="changes"
              v-model="timeValue"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <div
              class="buttons"
              @click="
                () => {
                  getControlRecord();
                  getControlStatistics();
                }
              "
            >
              查询
            </div>
          </div>
          <el-scrollbar style="height: 94%">
            <div class="tables">
              <el-table
                :data="recordData"
                class="table"
                style="width: 100%"
                height="81vh"
                :header-cell-style="{
                  background: 'rgb(30,30,30)',
                  color: 'rgb(220,220,220)',
                  padding: '4px',
                  fontSize: '14px',
                  'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
                }"
                :cell-style="{
                  height: '40px',
                  background: 'rgb(30,30,30)',
                  color: 'rgb(220,220,220)',
                  padding: '3px',
                  fontSize: '12px',
                  'border-bottom': '1px solid #000000',
                }"
                @cell-dblclick="cellDbClick"
              >
                <el-table-column
                  prop="time"
                  label="日期"
                  width="120"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="code"
                  label="风机号"
                  width="120"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="controls"
                  label="控制命令"
                  width="100"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="result" label="操作结果" align="center">
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="操作人"
                  width="160"
                  align="center"
                >
                </el-table-column>
              </el-table>
              <div class="titleinfoall" v-if="showControlStatistics">
                <div class="titleinfo">
                  <span class="showTitle fontSty1">启动次数:</span>
                  <span class="showvalue">
                    {{ controlStatisticsInfo.startCount }}
                  </span>
                  <span class="showTitle fontSty">次</span>
                </div>
                <div class="titleinfo">
                  <span class="showTitle fontSty1">停机次数:</span>
                  <span class="showvalue">
                    {{ controlStatisticsInfo.stopCount }}
                  </span>
                  <span class="showTitle fontSty">次</span>
                </div>
                <div class="titleinfo">
                  <span class="showTitle fontSty1">维护次数:</span>
                  <span class="showvalue">
                    {{ controlStatisticsInfo.maintenanceCount }}
                  </span>
                  <span class="showTitle fontSty">次</span>
                </div>
                <div class="titleinfo">
                  <span class="showTitle fontSty1">解除维护次数:</span>
                  <span class="showvalue">
                    {{ controlStatisticsInfo.unMaintenanceCount }}
                  </span>
                  <span class="showTitle fontSty">次</span>
                </div>
                <div class="titleinfo">
                  <span class="showTitle fontSty1">提前时间:</span>
                  <span class="showvalue">
                    {{ controlStatisticsInfo.advanceTime?.toFixed(2) || 0 }}
                  </span>
                  <span class="showTitle fontSty">小时</span>
                </div>
                <div class="titleinfo">
                  <span class="showTitle fontSty1">多发电量:</span>
                  <span class="showvalue">
                    {{ controlStatisticsInfo.powerGeneration?.toFixed(2) || 0 }}
                  </span>
                  <span class="showTitle fontSty">kw</span>
                </div>
                <div class="titleinfo">
                  <span class="showTitle fontSty1">节约电量:</span>
                  <span class="showvalue">
                    {{ controlStatisticsInfo.powerSaving?.toFixed(2) || 0 }}
                  </span>
                  <span class="showTitle fontSty">kw</span>
                </div>
              </div>
            </div>
          </el-scrollbar>
          <div class="paginations">
            <el-pagination
              :hide-on-single-page="true"
              :page-size="currentPage"
              background
              layout="prev, pager, next"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </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.onLineEndTs || "---"
          }}</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() {
    if (this.timeValue.length === 0) {
      let date = new Date();
      this.timeValue[0] = date.getTime() - 28800000;
      this.timeValue[1] = date.getTime() + 3600000;
    }
  },
  mounted() {},
  data() {
    return {
      currentPage: 20,
      filterText: "",
      pageIndex: 1,
      station: [],
      datas: {},
      chooseStation: {},
      timeValue: [],
      showData: [
        {
          id: 0,
          code: "全部",
          stationId: "",
          children: [],
        },
      ],
      defaultProps: {
        children: "children",
        label: "code",
      },
      recordData: [],
      total: "",
      controlErorCodes: [
        "控制成功",
        "控制命令发送失败",
        "无效的控制地址",
        "被控设备异常",
        "无效的控制功能",
        "网络连接错误,检查场站通信",
        "控制结果读取超时",
        "未知错误",
        "控制命令错误",
        "收到无法识别数据",
        "未读取到数据包",
        "未知错误",
        "风机操作过频繁",
        "风机被挂牌",
        "风机操作与风机状态不符",
        "需要登录",
      ],
      showStartDialog: false,
      rateValue: 4.5,
      otherContentInfo: {
        score: 0,
      },
      showControlStatistics: false,
      controlStatisticsInfo: {},
    };
  },
  methods: {
    // getWindturbineFdc() {
    //   api.getWindturbineFdc().then((res) => {
    //     this.station = res.data;
    //     this.getControlRecord();
    //   });
    // },
    dataDeal() {
      let stationList = this.$store.state.stationList;
      this.showData[0].children = [
        // {
        //   id : 1,
        // code : "风机全部",
        // stationId : "WIND_ALL",
        // children : [],
        // }
      ];
      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);
        }
      });
      this.datas = this.$store.state.windturbinelist
        ? this.$store.state.windturbinelist
        : {};
      let arr = Object.keys(this.datas).sort();
      for (let id of arr) {
        let item = this.datas[id];
        this.showData[0].children
          .filter((val) => val.stationId === item.stationId)[0]
          ?.children.push(item);
      }
    },
    handleChange(value) {
      this.chooseStation = value;
      this.pageIndex = 1;
      this.getControlRecord(value);
    },
    closed() {
      this.pageIndex = 1;
      this.chooseStation = {};
      this.showData = [
        {
          id: 0,
          code: "全部",
          stationId: "",
          children: [],
        },
      ];
      let stationList = this.$store.state.stationList;
      stationList.forEach((item, index) => {
        let obj = {};
        obj.id = index + 1;
        obj.code = item.name;
        obj.stationId = item.id;
        obj.children = [];
        this.showData[0].children.push(obj);
      });

      this.$emit("closed");
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.code.indexOf(value) !== -1;
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getControlRecord();
    },
    opened() {
      let date = new Date();
      this.timeValue[0] = date.getTime() - 28800000;
      this.timeValue[1] = date.getTime() + 3600000;
      this.dataDeal();
      this.getControlRecord();
    },

    getControlStatistics() {
      this.showControlStatistics = false;
      this.controlStatisticsInfo = {};
      const stTs = this.timeValue[0];
      const endTs = this.timeValue[1];
      api
        .getControlStatistics(
          new Date(stTs).getTime(),
          new Date(endTs).getTime()
        )
        .then((res) => {
          this.showControlStatistics = true;
          this.controlStatisticsInfo = {
            advanceTime: res.data.advanceTime,
            maintenanceCount: res.data.maintenanceCount,
            powerGeneration: res.data.powerGeneration,
            powerSaving: res.data.powerSaving,
            startCount: res.data.startCount,
            stopCount: res.data.stopCount,
            unMaintenanceCount: res.data.unMaintenanceCount,
          };
        });
    },
    getControlRecord() {
      api
        .controlRecord({
          stationId: this.chooseStation.stationId
            ? this.chooseStation.stationId
            : "",
          userName: "",
          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,
          pageIndex: this.pageIndex,
        })
        .then((res) => {
          if (res) {
            let types = {
              Start: "启动",
              Stop: "停止",
              Reset: "复位",
              Maintain: "维护",
              UnMaintain: "取消维护",
              Lock: "挂牌",
              UnLock: "取消挂牌",
            };
            res.data.dataList.forEach((item) => {
              item.time = dayjs(item.time).format("MM-DD HH:mm:ss");
              item.result = this.controlErorCodes[item.errorCode];
              item.controls = types[item.controlType];
              item.showName = item.windturbineId;
            });
            this.total = res.data.total;
            this.recordData = res.data.dataList;
          }
        });
    },

    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",
                },
              },
              splitLine: {
                lineStyle: {
                  color: ["#878787"],
                },
              },
            },
            {
              type: "value",
              name: "功率(kw)",
              nameTextStyle: {
                color: "#fff",
              },
              axisLabel: {
                textStyle: {
                  color: "#eee",
                },
              },
              splitLine: {
                show: false,
              },
            },
          ],
          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) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>
<style lang="less" scoped>
.body {
  background-color: #000000;
  height: 90vh;
  width: 102%;
  margin-left: -1%;
  margin-top: -40px;
}
.searchTitle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.bodyDetial {
  display: flex;
  flex-direction: row;
  margin-left: 3vw;
  padding-top: 10px;
  color: #ffffff;
  height: 98%;
}

.left-item {
  width: 20%;
  height: 100%;
  background-color: rgba(77, 77, 77, 1);
  border-right: 2px solid #000000;
}

.right-item {
  width: 80%;
  height: 100%;
  background-color: rgba(77, 77, 77, 1);
}

.el-tree {
  color: #ffffff !important;
  background-color: rgba(77, 77, 77, 1) !important;
}

.el-tree-node:focus > .el-tree-node__content {
  background-color: #000000 !important;
}

.el-tree-node__content:hover {
  background-color: #000000 !important;
}

.dateBar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: 20px;
}

.pickers {
  margin-left: 20px;
}

.tables {
  margin-top: 20px;
  width: 95%;
  margin-left: 3%;
  position: relative;
}

.table {
  background-color: rgba(77, 77, 77, 1) !important;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid rgba(77, 77, 77, 1) !important;
}

.el-table__header {
  width: 100% !important;
}

.el-table__body-wrapper {
  background-color: rgba(77, 77, 77, 1) !important;
}

.el-table::before {
  width: 0;
}

tr {
  line-height: 1.5;
  background: #1e1e1e;
  margin-bottom: 2px;
  border-radius: 5px;
}

.table-main {
  font-size: 14px;
  width: 600px;
  text-align: center;
  background: #000000;
  margin: 5px;
  border-collapse: separate;
  border-spacing: 0px 5px;
}

.paginations {
  display: flex;
  flex-direction: row-reverse;
}

.titleinfoall {
  display: flex;
  position: absolute;
  left: 10px;
  bottom: 10px;
}

.showTitle {
  color: #ffffff;
  margin-right: 10px;
}
.fontSty {
  font-size: 12px;
}
.fontSty1 {
  font-weight: bold;
}

.showvalue {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}
</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>