project-neic/src/components/area/ControlArea.vue

/* 控制区 */
<template>
  <gy-card
    title="控制区"
    area-style="control"
    circle-style="green"
    content-style="44"
    @contextmenu="contextmenu"
  >
    <ControlMatrixCard title="待启动" :datas="ls.start" ref="start"></ControlMatrixCard>
    <ControlMatrixCard title="待停机" :datas="ls.stop" ref="stop"></ControlMatrixCard>
    <ControlMatrixCard title="待维护" :datas="ls.maintain" ref="maintain"></ControlMatrixCard>
    <ControlMatrixCard title="待取消维护" :datas="ls.unmaintain" ref="unmaintain"></ControlMatrixCard>
    <ControlMatrixCard title="待复位" :datas="ls.reset" ref="reset"></ControlMatrixCard>
    <el-button style="z-index:2;position:absolute;bottom:10px;right:10px;background: #292929;font-size:15px;width:90px;border:none;color:rgb(220,220,220);" size="small" @click="menuClicked({type:'marking'})">发送</el-button>
  </gy-card>
  <el-button-group style="z-index:3;position:absolute;top:16px;left:120px;">
      <el-button style="background: black;font-size:14px;width:80px;border:none;color:rgb(220,220,220);" size="mini" round>自动</el-button>
      <el-button style="background: #202020;font-size:14px;width:80px;border:none;color:rgb(220,220,220);" size="mini" round>手动</el-button>
    </el-button-group>
</template>

<script>
import ControlMatrixCard from "./windturbine/control/ControlMatrixCard.vue";
import MessageBridge from "../../assets/script/MessageBridge";
import BackgroundData from "../../assets/script/BackgroundData";

export default {
  name: "ControlArea",
  components: {
    ControlMatrixCard,
  },
  created: function () {
    this.initData();
  },
  data() {
    return {
      ls: {
        start: { key: "待启动", value: [] },
        stop: { key: "待停机", value: [] },
        maintain: { key: "待维护", value: [] },
        unmaintain: { key: "待取消维护", value: [] },
        reset: { key: "待复位", value: [] },
      },
    };
  },
  methods: {
    initData: function () {
      var mb = MessageBridge.getInstance();
      var vs = [
        { key: "/topic/suggestion", action: this.suggestion },
      ];
      mb.register(vs);
    },
    suggestion(msg) {
      var val = JSON.parse(msg);
      for (var vv in val) {
        var v = val[vv];
        var windturbineId = v.windturbineId;
        if (v.adviceOperateStyle == "UnMaintain") {
          if (!this.ls.unmaintain.value.includes(windturbineId)) {
            this.ls.unmaintain.value.push(windturbineId);
          }
        } else if (v.adviceOperateStyle == "Start") {
          //推荐启动
          if (!this.ls.start.value.includes(windturbineId)) {
            this.ls.start.value.push(windturbineId);
          }
        } else if (v.adviceOperateStyle == "Stop") {
          // 推荐停机
          if (!this.ls.stop.value.includes(windturbineId)) {
            this.ls.stop.value.push(windturbineId);
          }
        } else if (v.adviceOperateStyle == "Reset") {
          // 推荐复位
          if (!this.ls.reset.value.includes(windturbineId)) {
            this.ls.reset.value.push(windturbineId);
          }
        } else if (v.adviceOperateStyle == "Maintain") {
          // 推荐维护
          if (!this.ls.maintain.value.includes(windturbineId)) {
            this.ls.maintain.value.push(windturbineId);
          }
        }
      }
    },
    /* 右键菜单 */
    contextmenu() {
      const { remote } = require("electron");
      var that = this;
      const menuTemplate = [
        {
          label: "发送",
          click() {
            that.menuClicked({ type: "send" });
          },
        },
        {
          label: "挂牌",
          submenu: [
            {
              label: "检修",
              click() {
                that.menuClicked({ type: "lock", value: 8 });
              },
            },
            {
              label: "故障维修",
              click() {
                that.menuClicked({ type: "lock", value: 7 });
              },
            },
            {
              label: "场内受累检修",
              click() {
                that.menuClicked({ type: "lock", value: 2 });
              },
            },
            {
              label: "场内受累故障",
              click() {
                that.menuClicked({ type: "lock", value: 3 });
              },
            },
            {
              label: "场外受累电网",
              click() {
                that.menuClicked({ type: "lock", value: 4 });
              },
            },
            {
              label: "场外受累天气",
              click() {
                that.menuClicked({ type: "lock", value: 5 });
              },
            },
          ],
        },
        {
          label: "标注",
          click() {
            that.menuClicked({ type: "marking" });
          },
        },
      ];
      const menu = remote.Menu.buildFromTemplate(menuTemplate);

      menu.popup(remote.getCurrentWindow());
    },

    menuClicked(msg) {
      var bd = BackgroundData.getInstance();
      if (!bd.LoginUser) {
        bd.showdialog("提示", "请登录：", "在控制之前需要先登录！");
        return;
      }
      if (msg.type == "lock") {
        // 挂牌
      } else if (msg.type == "send") {
        // 发送
      } else if (msg.type == "marking") {
        // 标注
        var vs = this.getSelectedItems();
        bd.marking(vs);
      }
      this.clearSelected();
    },

    /* 获取选中的项目，isControl：是否是控制 */
    getSelectedItems(isControl){
      var ls = new Array();
      this.$refs.start.outputSelectedItems(ls);
      this.$refs.stop.outputSelectedItems(ls);
      if(isControl) return ls;
      this.$refs.maintain.outputSelectedItems(ls);
      this.$refs.unmaintain.outputSelectedItems(ls);
      this.$refs.reset.outputSelectedItems(ls);
      return ls;
    },

    /* 清除所有选择 */
    clearSelected(){
      this.$refs.start.clearSelected();
      this.$refs.stop.clearSelected();
      this.$refs.maintain.clearSelected();
      this.$refs.unmaintain.clearSelected();
      this.$refs.reset.clearSelected();
    }
  },
};
</script>
<style scoped>
</style>