shanxi_control/src/components/check/operationRecords.vue

<template>
  <el-dialog
    width="50%"
    @open="opened()"
    @closed="closed()"
    :show-close="false"
    class="my-info-dialog"
  >
    <template #title>
      <div class="showTitles">
        <div class="titles">校验记录详情</div>
      </div>
    </template>
    <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()">查询</div>
        </div>
        <el-scrollbar style="height: 86%">
          <div class="tables">
            <el-table
              :data="recordData"
              class="table"
              style="width: 100%"
              height="49vh"
              :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',
              }"
            >
              <el-table-column
                prop="time"
                label="日期"
                width="120"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="showName"
                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>
        </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"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import dayjs from "dayjs";
import api from "api/index";
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: 10,
      filterText: "",
      pageIndex: 1,
      station: [],
      datas: {},
      chooseStation: {},
      timeValue: [],
      showData: [
        {
          id: 0,
          windturbineId: "全部",
          stationId: "",
          children: [],
        },
      ],
      defaultProps: {
        children: "children",
        label: "windturbineId",
      },
      recordData: [],
      total: "",
      controlErorCodes: [
        "控制成功",
        "控制命令发送失败",
        "无效的控制地址",
        "被控设备异常",
        "无效的控制功能",
        "网络连接错误,检查场站通信",
        "控制结果读取超时",
        "未知错误",
        "控制命令错误",
        "收到无法识别数据",
        "未读取到数据包",
        "未知错误",
        "风机操作过频繁",
        "风机被挂牌",
        "风机操作与风机状态不符",
        "需要登录",
      ],
    };
  },
  methods: {
    // getWindturbineFdc() {
    //   api.getWindturbineFdc().then((res) => {
    //     this.station = res.data;
    //     this.getControlRecord();
    //   });
    // },
    dataDeal() {
      let stationList = this.$store.state.stationList;
      this.showData[0].children = [];
      stationList.forEach((item, index) => {
        let obj = {};
        obj.id = index + 1;
        obj.windturbineId = item.name;
        obj.stationId = item.code;
        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,
          windturbineId: "全部",
          stationId: "",
          children: [],
        },
      ];
      let stationList = this.$store.state.stationList;
      stationList.forEach((item, index) => {
        let obj = {};
        obj.id = index + 1;
        obj.windturbineId = item.name;
        obj.stationId = item.code;
        obj.children = [];
        this.showData[0].children.push(obj);
      });

      this.$emit("closed");
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.windturbineId.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.getControlRecord();
    },
    getControlRecord() {
      api
        .controlRecord({
          stationId: this.chooseStation.stationId
            ? this.chooseStation.stationId
            : "",
          userName: "",
          windturbineId: this.chooseStation.id
            ? ""
            : 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;
          }
        });
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>

<style scoped>
.showTitles {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: -10px;
  font-size: 18px;
  color: #ffffff;
  height: 40px;
}

.titles {
  font-size: 16px;
  color: #ffffff;
}

.el-dialog__body {
  padding: 30px 10px 10px 10px;
}

.bodyDetial {
  display: flex;
  flex-direction: row;
  background-color: black;
  width: 100%;
  margin-top: -30px;
  height: 60vh;
}

.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%;
}

.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;
}
</style>