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>
      <!-- <StatusPanelStatic class="panel-item" /> -->
    </div>
    <div class="table-box">
      <ComTable :data="tableData"></ComTable>
    </div>
    <div class="table-box">
      <ComTable1 :data="tableData1"></ComTable1>
    </div>
    <div class="table-box">
      <ComTable1 :data="tableData2"></ComTable1>
    </div>
  </div>
</template>

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

import store from "@store/index.js";

export default {
  // 名称
  name: "Status",
  // 使用组件
  components: {
    StatusPanel,
    ComTable,
    ComTable1,
    StatusPanelStatic,
  },
  // 数据
  data() {
    return {
      timmer: null, // 遮罩开关
      sourceMap: {}, // 核心数据
      datas: [],
      // wpId1: "",
      wpId: "",
      dwkGzqd: "",
      plGzqd: "",
      zhGzqd: "",
      mchGzqd: "",
      hzjGzqd: "",
      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: [],
      },
      tableData1: {
        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",
            // name: "光照强度w/㎡",
            field: "fs",
            unit: "日照强度w/㎡",
            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: [],
      },
      tableData2: {
        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",
            // name: "光照强度w/㎡",
            field: "fs",
            unit: "日照强度w/㎡",
            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: {
    // 请求服务
    requestData(showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "monitor/monitor",
        success(res) {
          if (res.data) {
            // console.log("resData:", res.data);
            let sourceMap = res.data;
            let datas = [];
            let data = [];
            let data1 = [];
            let data2 = [];
            sourceMap.maps.forEach((ele) => {
              sourceMap.vos.forEach((vEle) => {});
              that.wpId1 = sourceMap.vos.find((findEle) => {
                return findEle.wpName === ele.name;
              }).wpId;
              // console.log('wpid1:',that.wpId1)
              datas.push({
                title: ele.name,
                wpId: sourceMap.vos.find((findEle) => {
                  return findEle.wpName === ele.name;
                }).wpId,
                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: !ele.zxzt_acgzt,
                  },
                  {
                    f1: "升压站:",
                    f2: "Uab",
                    f3: ele.uab,
                    f4: "Ia",
                    f5: ele.ia,
                    is_light: !ele.zxzt_syzzt,
                  },
                  {
                    f1: ele.name.includes("风") ? "风功:" : "光功:",
                    f2: "未来15分钟",
                    f3: ele.ycgl,
                    f4: "",
                    f5: "",
                    // is_light: !ele.zxzt_fjzt,
                    is_light: true,
                  },
                  {
                    f1:
                      ele.name.indexOf("风电场") !== -1 ? "测风塔:" : "气象站:",
                    // f2: "风速",
                    f2: ele.name.includes("风") ? "风速" : "光照强度",
                    // f3: (ele.cftfs || 0) + "m/s",
                    f3: ele.name.includes("风")
                      ? (ele.cftfs || 0) + "m/s"
                      : sourceMap.vos.find((findEle) => {
                          return findEle.wpName === ele.name;
                        }).fs,
                    f4: ele.name.includes("风") ? "风向" : "",
                    f5: ele.name.includes("风") ? ele.cftfx || 0 : "",
                    is_light: !ele.zxzt_cftzt,
                  },
                  {
                    f1: "电能量表:",
                    f2: "",
                    f3: ele.dnlb,
                    f4: "",
                    f5: "",
                    is_light: !ele.zxzt_djlzt,
                  },
                ],
              });
            });

            //风电场
            let fdcArr = sourceMap.vos.filter((ele) => {
              return ele.wpId.includes("FDC");
            });
            let fdhj = sourceMap.vos.filter((ele) => {
              return ele.wpId.includes("-1");
            });
            let zj = sourceMap.vos.filter((ele) => {
              return ele.wpId.includes("0");
            });
            data2.push(zj[0]);
            fdcArr.push(fdhj[0]);
            //  console.log(fdcArr)
            fdcArr.forEach((ele) => {
              // console.log('vos:', sourceMap.vos)
              ele.row_span = [];
              ele.col_span = [];
              ele.is_light = false;
              data.push(ele);
            });

            //光电厂
            let gdcArr = sourceMap.vos.filter((ele) => {
              return ele.wpId.includes("GDC");
            });
            let gdhj = sourceMap.vos.filter((ele) => {
              return ele.wpId.includes("-2");
            });
            gdcArr.push(gdhj[0]);
            //  console.log(gdcArr)
            gdcArr.forEach((ele) => {
              // console.log('vos:', sourceMap.vos)
              ele.row_span = [];
              ele.col_span = [];
              ele.is_light = false;
              data1.push(ele);
            });

            // sourceMap.vos.forEach((ele) => {
            //   // console.log('vos:', sourceMap.vos)
            //   ele.row_span = [];
            //   ele.col_span = [];
            //   ele.is_light = false;
            //   data.push(ele);
            // });

            //  for(let i=0;i<sourceMap.vos.length;i++){
            //     //  console.log('vos:',sourceMap.vos)
            //      data.push(sourceMap.vos[0],sourceMap.vos[1],sourceMap.vos[2],sourceMap.vos[3],sourceMap.vos[4],sourceMap.vos[5],sourceMap.vos[11])
            //      data1.push(sourceMap.vos[6],sourceMap.vos[7],sourceMap.vos[8],sourceMap.vos[9],sourceMap.vos[10],sourceMap.vos[11])
            //  }
            //  that.unique(data,that.wpId1);
            // //  that.unique(data1,sourceMap.vos.find((findEle) => {
            // //         return findEle.wpName === ele.name;
            // //       }).wpId);
            //  console.log('vosData:',data);
            // //  console.log('vosData1:',data1)

            that.sourceMap = sourceMap;
            that.datas = datas;
            that.tableData.data = data;
            that.tableData1.data = data1;
            that.tableData2.data = data2;
          } else {
            that.sourceMap = {};
            that.datas = [];
            that.tableData.data = [];
            that.tableData1.data = [];
          }
        },
      });
    },
  },

  created() {
    let that = this;
    that.$nextTick(() => {
      that.requestData(false);
      that.timmer = setInterval(() => {
        that.requestData(false);
      }, that.$store.state.websocketTimeSec);
    });
  },

  mounted() {},

  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
};
</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>