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>
</template>

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

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

export default {
  // 名称
  name: "Status",
  // 使用组件
  components: {
    StatusPanel,
    ComTable,
    StatusPanelStatic
  },
  // 数据
  data() {
    return {
      timmer: null, // 遮罩开关
      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: {
    // 请求服务
    requestData(showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "monitor/monitor",
        success(res) {
          if (res.data) {
            let sourceMap = res.data;
            let datas = [];
            let data = [];
            sourceMap.maps.forEach((ele) => {
              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: 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);
            });

            that.sourceMap = sourceMap;
            that.datas = datas;
            that.tableData.data = data;
          } else {
            that.sourceMap = {};
            that.datas = [];
            that.tableData.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>