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"
      :operateStyle="1"
      ref="start"
    ></ControlMatrixCard>
    <ControlMatrixCard
      title="待停机"
      :datas="ls.stop"
      :operateStyle="2"
      ref="stop"
    ></ControlMatrixCard>
    <ControlMatrixCard
      title="待维护"
      :datas="ls.maintain"
      :operateStyle="6"
      ref="maintain"
    ></ControlMatrixCard>
    <ControlMatrixCard
      title="待取消维护"
      :datas="ls.unmaintain"
      :operateStyle="8"
      ref="unmaintain"
    ></ControlMatrixCard>
    <ControlMatrixCard
      title="待复位"
      :datas="ls.reset"
      :operateStyle="5"
      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: 'send' })"
      >发送</el-button
    >
  </gy-card>
  <el-button-group
    style="z-index: 3; position: absolute; top: 16px; left: 120px"
  >
    <el-button :class="buttonLeftStyle" size="mini" @click="controlClick(false)"
      >手动</el-button
    >
    <el-button :class="buttonRightStyle" size="mini" @click="controlClick(true)"
      >自动</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,
  },
  props: {
    
  },
  computed: {
    buttonLeftStyle: function () {
      return this.IsAutoControl ? "button-unselected" : "button-selected";
    },
    buttonRightStyle: function () {
      return this.IsAutoControl ? "button-selected" : "button-unselected";
    },
  },
  created: function () {
    this.initData();
  },
  data() {
    return {
      ls: {
        start: { key: "待启动", value: [] },
        stop: { key: "待停机", value: [] },
        maintain: { key: "待维护", value: [] },
        unmaintain: { key: "待取消维护", value: [] },
        reset: { key: "待复位", value: [] },
      },
      IsAutoControl:false,
    };
  },
  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: "CheckLock" });
              },
            },
            {
              label: "故障维修",
              click() {
                that.menuClicked({ type: "lock", value: "FaultLock" });
              },
            },
            {
              label: "场内受累检修",
              click() {
                that.menuClicked({ type: "lock", value: "StationCheckLock" });
              },
            },
            {
              label: "场内受累故障",
              click() {
                that.menuClicked({ type: "lock", value: "StationFaulLock" });
              },
            },
            {
              label: "场外受累电网",
              click() {
                that.menuClicked({
                  type: "lock",
                  value: "StationPowerLineLock",
                });
              },
            },
            {
              label: "场外受累天气",
              click() {
                that.menuClicked({ type: "lock", value: "StationWeatherLock" });
              },
            },
          ],
        },
        {
          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) {
        this.$confirm("控制风机前需要登录！","请登录",{confirmButtonText:'确定',cancelButtonText:'取消',type:'warning'});
        //bd.showdialog("提示", "请登录：", "在控制之前需要先登录！");
        return;
      }
      if (msg.type == "lock") {
        // 挂牌
        var los = this.getSelectedItems();
        for (var id in los) {
          los[id].lockType = msg.value;
        }
        bd.windturbineControl(los, true);
      } else if (msg.type == "send") {
        // 发送
        var vs = this.getSelectedItems(true);
        bd.windturbineControl(vs, false);
      } else if (msg.type == "marking") {
        // 标注
        var vvs = this.getSelectedItems();
        bd.marking(vvs);
      }
      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();
    },

    controlClick(isAuto) {
      this.IsAutoControl = isAuto;
      if (isAuto) {
        this.AutoSendTimer = setInterval(this.AutoSend, 60000);
      } else {
        clearInterval(this.AutoSendTimer);
      }
    },

    /* 自动发送命令 */
    AutoSend() {
      var ls = new Array();
      this.$refs.start.outputAllItems(ls);
      this.$refs.stop.outputAllItems(ls);
      console.log("自动发送命令 " + ls.length);
      if (ls.length <= 0) return;
      var bd = BackgroundData.getInstance();
      bd.windturbineControl(ls, false);
    },
  },
};
</script>
<style scoped>
.button-selected {
  background: black;
  font-size: 14px;
  width: 80px;
  border: none;
  color: rgb(220, 220, 220);
}
.button-unselected {
  background: #202020;
  font-size: 14px;
  width: 80px;
  border: none;
  color: rgb(220, 220, 220);
}
</style>