hb_sis_zhfx/src/views/Status/Status.vue

<template>
  <div class="status">
    <div class="panel-box">
      <StatusPanel class="panel-item" v-for="(data, index) of datas" :key="index" :data="data"></StatusPanel>
    </div>
    <div class="table-box">
      <ComTable :data="tableData"></ComTable>
    </div>
  </div>
</template>

<script>
import StatusPanel from "./components/status-panel.vue";
import ComTable from '@com/coms/table/table.vue';
import util from "@/helper/util.js";

import { datainit, webtest } from "@tools/websocket.js";
import store from "@store/index.js";

export default {
  // 名称
  name: "Status",
  // 使用组件
  components: {
    StatusPanel,
    ComTable,
  },
  // 数据
  data () {
    return {
      loadingFlg: false, // 遮罩开关
      websocketServe: null, // websocket 服务实例
      sourceMap: {}, // 核心数据
      datas: [],
      tableData: {
        column: [
          {
            name: "场站名称",
            field: "wpName",
            unit: "",
            is_num: false,
            is_light: false,
          },
          // {
          //   name: "调度名称",
          //   field: "ddname",
          //   unit: "",
          //   is_num: false,
          //   is_light: false,
          // },
          {
            name: "装机容量",
            field: "zjrl",
            unit: "MW",
            is_num: true,
            is_light: false,
          },
          {
            name: "发电量",
            field: "fdl",
            unit: "万kwh",
            is_num: true,
            is_light: false,
          },
          {
            name: "上网电量",
            field: "swdl",
            unit: "万kwh",
            is_num: true,
            is_light: false,
          },
          {
            name: "利用小时",
            field: "lyxs",
            unit: "",
            is_num: true,
            is_light: false,
          },
          {
            name: "风速m/s",
            field: "fs",
            unit: "日照强度w/m2",
            is_num: true,
            is_light: false,
          },
          {
            name: "功率",
            field: "gl",
            unit: "MW",
            is_num: true,
            is_light: false,
          },
          {
            name: "出线功率",
            field: "cxgl",
            unit: "MW",
            is_num: true,
            is_light: false,
          },
          {
            name: "理论功率",
            field: "llgl",
            unit: "MW",
            is_num: true,
            is_light: false,
          },
          {
            name: "保证功率",
            field: "bzgl",
            unit: "MW",
            is_num: true,
            is_light: false,
          },
          {
            name: "预测功率",
            field: "ycgl",
            unit: "MW",
            is_num: true,
            is_light: false,
          },
          {
            name: "AGC指令",
            field: "aGCzl",
            unit: "MW",
            is_num: true,
            is_light: false,
          },
          {
            name: "理论发电量",
            field: "llfdl",
            unit: "万kwh",
            is_num: true,
            is_light: false,
          },
          {
            name: "SCADA发电量",
            field: "scadafdl",
            unit: "万kwh",
            is_num: true,
            is_light: false,
          },
          {
            name: "维修损失电量",
            field: "whss",
            unit: "万kwh",
            is_num: true,
            is_light: false,
          },
          {
            name: "故障损失电量",
            field: "gzss",
            unit: "万kwh",
            is_num: true,
            is_light: false,
          },
          {
            name: "受理损失电量",
            field: "slss",
            unit: "万kwh",
            is_num: true,
            is_light: false,
          },
          {
            name: "限电损失电量",
            field: "xdss",
            unit: "万kwh",
            is_num: true,
            is_light: false,
          },
          {
            name: "性能损失电量",
            field: "xnss",
            unit: "万kwh",
            is_num: true,
            is_light: false,
          },
        ],
        data: [],
      },
    };
  },
  // 函数
  methods: {},

  created () {
    let that = this;
    that.loadingFlg = true;
    // that.BASE.showLoading();
    that.$nextTick(() => {
      that.websocketServe && that.websocketServe.disconnect();
      that.API.requestData({
        method: "POST",
        subUrl: "admin/websocketdisconnect",
        success () {
          that.websocketServe = datainit("/topic/wpInfoPush");
        }
      });
    });
  },

  mounted () {

  },

  unmounted () {
    this.websocketServe && this.websocketServe.disconnect();
    this.API.requestData({
      method: "POST",
      subUrl: "admin/websocketdisconnect"
    });
  },

  watch: {
    // 监听 websocket 回调并包装数据用于展示
    '$store.state.windturbineMap': function (res) {
      // this.loadingFlg && this.BASE.closeLoading();
      this.loadingFlg = false;
      if (res) {
        let sourceMap = JSON.parse(res);
        let datas = [];
        let data = [];
        sourceMap.maps.forEach(ele => {
          datas.push({
            title: ele.name,
            weather: {
              type: "cloudy",
              temperature: 11,
            },
            breakOff: ele.fczt === 3,
            category: {
              score: ele.zjts,
              datas: [
                { text: "运行", num: ele.yxts, color: "green" },
                { text: "待机", num: ele.djts, color: "purple" },
                { text: "限电", num: ele.xdts, color: "yellow" },
                { text: "检修", num: ele.whts, color: "orange" },
                { text: "故障", num: ele.gzts, color: "red" },
                { text: "受累", num: ele.slts || 0, color: "blue" },
                { text: "离线", num: ele.lxts, color: "gray" },
              ],
            },
            items: [
              {
                // f1: ("AGC" + ele.name.replace(/风电场/g, "") + ":"),
                f1: "AGC:",
                f2: "设定",
                f3: ele.agcygsd,
                f4: "出线",
                f5: ele.agccxyg,
                is_light: true,
              },
              {
                f1: "升压站:",
                f2: "Uab",
                f3: ele.uab,
                f4: "Ia",
                f5: ele.ia,
                is_light: false,
              },
              {
                f1: "风功:",
                f2: "未来15分钟",
                f3: ele.ycgl,
                f4: "",
                f5: "",
                is_light: false,
              },
              {
                f1: "测风塔:",
                f2: "风速",
                f3: ((ele.cftfs || 0) + "m/s"),
                f4: "风向",
                f5: ele.cftfx || 0,
                is_light: false,
              },
              {
                f1: "电能量表:",
                f2: "",
                f3: ele.dnlb,
                f4: "",
                f5: "",
                is_light: false,
              },
            ],
          });
        });

        sourceMap.vos.forEach(ele => {
          ele.row_span = [];
          ele.col_span = [];
          ele.is_light = false;
          data.push(ele);
        });

        this.sourceMap = sourceMap;
        this.datas = datas;
        this.tableData.data = data;
      } else {
        this.sourceMap = {};
        this.datas = [];
        this.tableData.data = [];
      }
    }
  }
};
</script>

<style lang="less" scoped>
.status {
  width: 100%;
  height: calc(100vh - 7.222vh);
  overflow: auto;
  display: flex;
  flex-direction: column;

  .panel-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .panel-item {
      width: calc(20% - 1.185vh);
      margin-left: 1.481vh;
      margin-bottom: 1.481vh;

      &:nth-child(5n + 1) {
        margin-left: 0;
      }
    }
  }

  .table-box {
    border: 0.093vh solid @darkgray;
    position: relative;
    overflow: auto;
    flex-grow: 1;

    &::after,
    &::before {
      content: '';
      position: absolute;
      width: 0.185vh;
      height: 0.185vh;
      background-color: @write;
      top: 0.37vh;
    }

    &::after {
      left: 0.37vh;
    }

    &::before {
      right: 0.37vh;
    }
  }
}
</style>