project-neic/src/components/control/areaCard.vue

/* 自定义tabs */
<template>
  <div class="body" :style="style">
    <img class="logo" src="../../assets/img/logo.png" alt="" />
    <div class="title">
      <div>{{ title }}</div>
      <div style="display: flex; flex-direction: row; align-items: center">
        <div v-for="(item, index) in controlTypeList" :key="index">
          <div
            v-if="!item.type"
            :class="
              index === 0
                ? 'controlTypesLeft'
                : index === 4
                ? 'controlTypesRight'
                : 'controlTypes'
            "
            @click="handleTypeChange(item)"
          >
            {{ item.name }}
          </div>
          <div
            v-if="item.type"
            :class="
              index === 0
                ? 'onControlTypesLeft'
                : index === 4
                ? 'onControlTypesRight'
                : 'onControlTypes'
            "
            @click="handleTypeChange(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div style="margin-top: 50px; height: 85%" @contextmenu="contextmenu">
      <div class="scoll currentScroll">
        <div class="currentScroll" style="height: 100%; overflow-y: scroll">
          <div class="matrix" v-if="startList.length > 0">
            <div class="problemTitle">启动</div>
            <MatrixBlock
              @on-click="handleDetial"
              @choose-click="handleClick"
              :dataList="startList"
            >
            </MatrixBlock>
          </div>
          <div class="matrix" v-if="stopList.length > 0">
            <div class="problemTitle">停机</div>
            <MatrixBlock
              @on-click="handleDetial"
              @choose-click="handleClick"
              :dataList="stopList"
            >
            </MatrixBlock>
          </div>
          <div class="matrix" v-if="maintainList.length > 0">
            <div class="problemTitle">维护</div>
            <MatrixBlock
              @on-click="handleDetial"
              @choose-click="handleClick"
              :dataList="maintainList"
            >
            </MatrixBlock>
          </div>
          <div class="matrix" v-if="unMaintainList.length > 0">
            <div class="problemTitle">取消维护</div>
            <MatrixBlock
              @on-click="handleDetial"
              @choose-click="handleClick"
              :dataList="unMaintainList"
            >
            </MatrixBlock>
          </div>
        </div>
      </div>
    </div>
    <div v-if="current == 1" class="send" @click="handleSend">发送</div>
    <!-- <div class="success" v-if="showFlag&&current===0">指令发送成功</div> -->
  </div>
  <WindturbineDetailPages
    v-model="dialogVisible"
    @close="handleClose"
    :windturbine="currentWindturbine"
  >
  </WindturbineDetailPages>
  <StationSvgDetailPages
    v-model="svgVisible"
    :stationName="stationName"
    :svgWeb="svgWeb"
    @close="handleClose"
  >
  </StationSvgDetailPages>
</template>

<script>
import BackgroundData from "utils/BackgroundData";
import WindturbineDetailPages from "../WindturbineDetailPages.vue";
import MatrixBlock from "../matrixBlock.vue";
import MessageBridge from "utils/MessageBridge";
import api from "api/index";
import StationSvgDetailPages from "../stationSvgDetailPages.vue";
export default {
  name: "gy-card",
  components: {
    MatrixBlock,
    WindturbineDetailPages,
    StationSvgDetailPages,
  },
  created: function () {
    this.initData();
    this.suggestion();
    this.getControlType();
  },
  emits: ["parentRun"],
  props: {
    title: {
      type: String,
      default: "",
      required: true,
    },
    height: {
      type: Number,
      default: 200,
    },
  },
  data() {
    return {
      current: 1,
      windturbinelist: {},
      titleList: [],
      startList: [],
      stopList: [],
      maintainList: [],
      unMaintainList: [],
      chooseList: [],
      sendList: [],
      currentWindturbine: {},
      dialogVisible: false,
      svgVisible: false,
      // showFlag: false,
      svgWeb: "",
      stationName: "",
      // 定时器
      timer: "",
      controlTypeList: [],
      controlErorCodes: [
        "控制成功",
        "控制命令发送失败",
        "无效的控制地址",
        "被控设备异常",
        "无效的控制功能",
        "网络连接错误,检查场站通信",
        "控制结果读取超时",
        "未知错误",
        "控制命令错误",
        "收到无法识别数据",
        "未读取到数据包",
        "未知错误",
        "风机操作过频繁",
        "风机被挂牌",
        "风机操作与风机状态不符",
        "需要登录",
      ],
    };
  },
  computed: {
    style() {
      return `width: 100%; height: ${this.height}vh;`;
    },
  },
  methods: {
    getControlType() {
      api.getControlType().then((res) => {
        if (res) {
          this.controlTypeList = res.data;
        }
      });
    },
    control(current) {
      this.current = current === 0 ? current : current === 1 ? current : 1;
      this.suggestion();
    },
    initData: function () {
      let mb = MessageBridge.getInstance();
      mb.unregister({ key: "/topic/suggestion" });
      let vs = [{ key: "/topic/suggestion", action: this.suggestion }];
      let vss = [
        { key: "/topic/voice-control", action: this.windturbineMessage },
      ];
      this.vss = vss;
      mb.register(vs);
      mb.register(vss);
    },
    suggestion(msg, headers) {
      msg ? this.$store.commit("suggestion", JSON.parse(msg)) : "";
      let bd = BackgroundData.getInstance();
      this.titleList = msg ? JSON.parse(msg) : this.$store.state.suggestion;
      if (this.current === 0) {
        let dateList = [];
        this.titleList.forEach((item) => {
          let status = this.controlTypeList.filter(
            (val) =>
              val.stationId ===
              this.windturbinelist[item.windturbineId].stationId
          )[0].type;
          if (status) {
            let arr = Object.keys(this.windturbinelist).sort();
            this.windturbinelist =
              arr.length !== 0
                ? this.windturbinelist
                : this.$store.state.windturbinelist;
            switch (item.operateStyle) {
              case "Start":
                this.windturbinelist[item.windturbineId].controlType = 1;
                break;
              case "Stop":
                this.windturbinelist[item.windturbineId].controlType = 2;
                break;
              case "Maintain":
                this.windturbinelist[item.windturbineId].controlType = 6;
                break;
              case "UnMaintain":
                this.windturbinelist[item.windturbineId].controlType = 8;
                break;
            }
            dateList.push(this.windturbinelist[item.windturbineId]);
          }
        });
        let mss = {};
        mss.type = "send";
        mss.deviceType = "Auto";
        this.timer = setTimeout(() => {
          if (dateList.length > 0) {
            this.sendCommand(mss, dateList);
          }
          // this.showFlag = true
          clearInterval(this.timer);
        }, 3000);
      }
    },
    windturbineMessage(msg) {
      if (this.$store.state.current === 1 || this.$store.state.current === 0) {
        let arr = [];
        if (msg === "CLOSE") {
          arr.push(msg);
        } else {
          arr = msg.split("-");
        }
        this.dialogVisible = false;
        this.svgVisible = false;
        this.svgWeb = "";
        if (arr[0] === "OPEN_FJ") {
          this.currentWindturbine = this.windturbinelist[arr[1]];
          setTimeout(() => {
            this.dialogVisible = true;
          }, 500);
        } else if (arr[0] === "CLOSE") {
          this.dialogVisible = false;
          this.svgVisible = false;
        } else if (arr[0] === "OPEN_SYZ") {
          this.showSvg = true;
          this.svgVisible = true;
          this.svgWeb = arr[1];
          this.stationName = this.boosterStation[arr[1]].name;
        } else if (
          arr[0] === "CONTROL_START" ||
          arr[0] === "CONTROL_STOP" ||
          arr[0] === "CONTROL_MAINTAIN" ||
          arr[0] === "CONTROL_UNMAINTAIN"
        ) {
          let windControlList = [];
          let mss = {};
          arr.forEach((item) => {
            if (
              item ===
              (this.windturbinelist[item]
                ? this.windturbinelist[item].windturbineId
                : "")
            ) {
              switch (arr[0]) {
                case "CONTROL_START":
                  this.windturbinelist[item].controlType = "1";
                  break;
                case "CONTROL_STOP":
                  this.windturbinelist[item].controlType = "2";
                  break;
                case "CONTROL_MAINTAIN":
                  this.windturbinelist[item].controlType = "6";
                  break;
                case "CONTROL_UNMAINTAIN":
                  this.windturbinelist[item].controlType = "8";
                  break;
              }
              windControlList.push(this.windturbinelist[item]);
            }
          });
          mss.type = "send";
          this.sendCommand(mss, windControlList);
        } else if (
          arr[0] === "CONTROL_LOCK_OVERHAUL" ||
          arr[0] === "CONTROL_LOCK_MAINTAIN" ||
          arr[0] === "CONTROL_LOCK_LNVOLVED_OVERHAUL" ||
          arr[0] === "CONTROL_LOCK_LNVOLVED_MAINTAIN" ||
          arr[0] === "CONTROL_LOCK_LNVOLVED_PG" ||
          arr[0] === "CONTROL_LOCK_LNVOLVED_WEATHER" ||
          arr[0] === "CONTROL_UNLOCK"
        ) {
          let windturbine = this.windturbinelist[arr[1]];
          switch (arr[0]) {
            case "CONTROL_LOCK":
              this.sendLock({ value: "Lock" }, windturbine);
              break;
            case "CONTROL_LOCK_OVERHAUL":
              this.sendLock({ value: "CheckLock" }, windturbine);
              break;
            case "CONTROL_LOCK_MAINTAIN":
              this.sendLock({ value: "FaultLock" }, windturbine);
              break;
            case "CONTROL_LOCK_LNVOLVED_OVERHAUL":
              this.sendLock({ value: "StationCheckLock" }, windturbine);
              break;
            case "CONTROL_LOCK_LNVOLVED_MAINTAIN":
              this.sendLock({ value: "StationFaulLock" }, windturbine);
              break;
            case "CONTROL_LOCK_LNVOLVED_PG":
              this.sendLock({ value: "StationPowerLineLock" }, windturbine);
              break;
            case "CONTROL_LOCK_LNVOLVED_WEATHER":
              this.sendLock({ value: "StationWeatherLock" }, windturbine);
              break;
            case "CONTROL_UNLOCK":
              this.sendLock({ value: "UnLock" }, windturbine);
              break;
          }
        } else if (arr[0] === "CONTROL_SART_RECOMMENDATION") {
          let mss = {};
          mss.type = "send";
          this.startList.forEach((item) => {
            item.controlType = "1";
          });
          this.sendCommand(mss, this.startList);
        } else if (arr[0] === "CONTROL_STOP_RECOMMENDATION") {
          let mss = {};
          mss.type = "send";
          this.stopList.forEach((item) => {
            item.controlType = "2";
          });
          this.sendCommand(mss, this.stopList);
        } else if (arr[0] === "CONTROL_RECOMMENDATION_ALL") {
          let windControlList = [];
          let mss = {};
          mss.type = "send";
          this.startList.forEach((item) => {
            item.controlType = "1";
            windControlList.push(item);
          });
          this.stopList.forEach((item) => {
            item.controlType = "2";
            windControlList.push(item);
          });
          this.maintainList.forEach((item) => {
            item.controlType = "6";
            windControlList.push(item);
          });
          this.unMaintainList.forEach((item) => {
            item.controlType = "8";
            windControlList.push(item);
          });
          this.sendCommand(mss, windControlList);
        }
      }
    },
    handleClick(values) {
      if (values.active) {
        let showIndex = null;
        this.chooseList.forEach((item, index) => {
          if (item.windturbineId === values.windturbineId) {
            showIndex = index;
          }
        });
        this.chooseList.splice(showIndex, 1);
      } else {
        this.chooseList.push(values);
      }
      this.startList.forEach((item) => {
        if (item.windturbineId === values.windturbineId) {
          item.active = !item.active;
        }
      });
      this.stopList.forEach((item) => {
        if (item.windturbineId === values.windturbineId) {
          item.active = !item.active;
        }
      });
      this.maintainList.forEach((item) => {
        if (item.windturbineId === values.windturbineId) {
          item.active = !item.active;
        }
      });
      this.unMaintainList.forEach((item) => {
        if (item.windturbineId === values.windturbineId) {
          item.active = !item.active;
        }
      });
    },
    handleDetial(itm) {
      this.dialogVisible = true;
      this.currentWindturbine = itm;
    },
    handleClose() {
      this.dialogVisible = false;
      this.svgVisible = false;
    },
    handleSend() {
      if (this.chooseList.length > 0) {
        this.chooseList.forEach((item) => {
          if (item.operateStyle === "Start") {
            item.controlType = 1;
          } else if (item.operateStyle === "Stop") {
            item.controlType = 2;
          } else if (item.operateStyle === "Maintain") {
            item.controlType = 6;
          } else if (item.operateStyle === "UnMaintain") {
            item.controlType = 8;
          }
        });
        let mss = {};
        mss.type = "send";
        mss.deviceType = "Recommend";
        this.sendCommand(mss, this.chooseList);
      }
    },
    /* 右键菜单 */
    contextmenu() {
      const { remote } = require("electron");
      let that = this;
      const menuTemplate = [
        {
          label: "发送",
          click() {
            that.handleSend();
          },
        },
        {
          label: "挂牌",
          submenu: [
            {
              label: "检修",
              click() {
                that.sendLock({ value: "CheckLock" });
              },
            },
            {
              label: "故障维修",
              click() {
                that.sendLock({ value: "FaultLock" });
              },
            },
            {
              label: "场内受累检修",
              click() {
                that.sendLock({ value: "StationCheckLock" });
              },
            },
            {
              label: "场内受累故障",
              click() {
                that.sendLock({ value: "StationFaulLock" });
              },
            },
            {
              label: "场外受累电网",
              click() {
                that.sendLock({ value: "StationPowerLineLock" });
              },
            },
            {
              label: "场外受累天气",
              click() {
                that.sendLock({ value: "StationWeatherLock" });
              },
            },
          ],
        },
      ];
      const menu = remote.Menu.buildFromTemplate(menuTemplate);

      menu.popup(remote.getCurrentWindow());
    },
    sendCommand(msg, windturbine) {
      let bd = BackgroundData.getInstance();
      if (!bd.LoginUser) {
        this.$notify({
          title: "请登录",
          message: "控制风机需要先登录！",
          type: "warning",
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
        return;
      }
      let sendList = windturbine;
      if (sendList.length > 0) {
        bd.checkout(sendList);
        this.chooseList = [];
        let pairs = {};
        sendList.forEach((item) => {
          let ct = {
            windturbineId: item.windturbineId,
            stationId: item.stationId,
            projectId: item.projectId,
            modelId: item.modelId,
            controlType: item.controlType,
            lockType: item.lockType,
            userName: `system_${bd.LoginUser.name}`,
            userId: 0,
            auto: this.current === 0 ? true : false,
            deviceType: msg.deviceType,
          };
          pairs[ct.windturbineId] = ct;
        });
        api.windturbControl(pairs).then((res) => {
          if (res) {
            // this.showFlag = false
            this.controlSuccess(res);
          }
        });
      }
    },
    sendLock(msg, windturbine) {
      let bd = BackgroundData.getInstance();
      if (!bd.LoginUser) {
        this.$notify({
          title: "请登录",
          message: "控制风机需要先登录！",
          type: "warning",
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
        return;
      }
      let sendList = [];
      if (windturbine) {
        windturbine.lockType = msg.value;
        sendList.push(windturbine);
      } else {
        this.chooseList.forEach((item) => {
          item.lockType = msg.value;
        });
        sendList = this.chooseList;
      }
      if (sendList.length > 0) {
        this.chooseList = [];
        let pairs = {};
        sendList.forEach((item) => {
          let ct = {
            windturbineId: item.windturbineId,
            stationId: item.stationId,
            projectId: item.projectId,
            modelId: item.modelId,
            controlType: item.controlType,
            lockType: item.lockType,
            userName: `system_${bd.LoginUser.name}`,
            userId: 0,
          };
          pairs[ct.windturbineId] = ct;
        });
        api.windturbControlLock(pairs).then((res) => {
          if (res) {
            this.controlSuccess(res);
          }
        });
      }
    },
    clearSelected() {
      this.startList.forEach((item) => {
        item.active = false;
      });
      this.stopList.forEach((item) => {
        item.active = false;
      });
      this.chooseList = [];
    },
    removeList(mk) {
      let indx = -1;
      for (let id in this.titleList) {
        if (this.titleList[id].windturbineId == mk.windturbineId) {
          indx = id;
          break;
        }
      }
      if (indx < 0) return;
      this.titleList.splice(indx, 1);
    },
    /* 控制成功 */
    controlSuccess(msg) {
      let bd = BackgroundData.getInstance();
      for (let id in msg.data) {
        let val = msg.data[id];
        if (val.errorCode !== "0") {
          bd.removeCheckouts(val);
          this.removeList(val);
        }
      }
      if (msg.data || msg.data !== {}) {
        let mss = ""; // 信息
        let iserror = false; // 是否有控制错误的风机
        for (let v in msg.data) {
          let val = msg.data[v];
          if (val.errorCode > 0) {
            iserror = true;
            mss += `${val.windturbineId}  ${
              this.controlErorCodes[val.errorCode]
            }\n`;
          }
        }
        let tp = iserror ? "warning" : "success";
        if (!iserror) {
          mss = "控制成功";
        }
        this.$notify({
          title: "控制",
          message: mss,
          type: tp,
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
      } else {
        this.$notify({
          title: "控制出现错误",
          message: "控制失败，请重试",
          type: "warning",
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
      }
    },

    /* 控制失败 */
    controlError(err) {
      this.$notify({
        title: "控制出现错误",
        message: err.message,
        type: "warning",
        position: "bottom-right",
        offset: 60,
        duration: 3000,
      });
    },
    sendMessage(url1) {
      this.messageUrl = url1;
      // let link = document.createElement('a')
      // link.href = url1
      // link.click()
    },
    handleTypeChange(val) {
      //   val.type = !val.type;
      let bd = BackgroundData.getInstance();
      if (!bd.LoginUser) {
        this.$notify({
          title: "请登录",
          message: "控制风机需要先登录！",
          type: "warning",
          position: "bottom-right",
          offset: 60,
          duration: 3000,
        });
        return;
      }
      api
        .uodateControlType({
          stationid: val.stationId,
          type: !val.type,
          userName: bd.LoginUser.name,
        })
        .then((res) => {
          if (res.data === "success") {
            this.getControlType();
          }
        });
    },
  },
  watch: {
    "$store.getters.windturbinelist": {
      deep: true,
      handler: function (json) {
        this.windturbinelist = json;
        let arr = Object.keys(json).sort();
        this.stopList = [];
        this.startList = [];
        this.maintainList = [];
        this.unMaintainList = [];
        for (let id of arr) {
          let val = json[id];
          this.chooseList.forEach((item) => {
            if (item.windturbineId === val.windturbineId) {
              val.active = true;
            }
          });
          this.titleList.forEach((item) => {
            if (item.windturbineId === val.windturbineId) {
              val.operateStyle = item.operateStyle;
              if (item.operateStyle === "Start" && val.status === 2) {
                this.startList.push(val);
              } else if (item.operateStyle === "Stop" && val.status === 4) {
                if (item.reasonType === "ElectricityRestrictions") {
                  val.reasonType = item.reasonType;
                }
                this.stopList.push(val);
              } else if (item.operateStyle === "Maintain" && val.status === 2) {
                this.maintainList.push(val);
              } else if (
                item.operateStyle === "UnMaintain" &&
                val.status === 6
              ) {
                this.unMaintainList.push(val);
              }
            }
          });
        }
        let checkoutList = BackgroundData.getInstance().checkouts;
        checkoutList.forEach((item) => {
          let starIndex = null;
          let stopIndex = null;
          let maintainIndex = null;
          let unMaintainIndex = null;
          let starFlag = false;
          let stopFlag = false;
          let maintainFlag = false;
          let unMaintainFlag = false;
          this.startList.forEach((param, index) => {
            if (item.windturbineId === param.windturbineId) {
              starIndex = index;
              starFlag = true;
            }
          });
          this.stopList.forEach((param, index) => {
            if (item.windturbineId === param.windturbineId) {
              stopIndex = index;
              stopFlag = true;
            }
          });
          this.maintainList.forEach((param, index) => {
            if (item.windturbineId === param.windturbineId) {
              maintainIndex = index;
              maintainFlag = true;
            }
          });
          this.unMaintainList.forEach((param, index) => {
            if (item.windturbineId === param.windturbineId) {
              unMaintainIndex = index;
              unMaintainFlag = true;
            }
          });
          starFlag ? this.startList.splice(starIndex, 1) : "";
          stopFlag ? this.stopList.splice(stopIndex, 1) : "";
          maintainFlag ? this.maintainList.splice(maintainIndex, 1) : "";
          unMaintainFlag ? this.unMaintainList.splice(unMaintainIndex, 1) : "";
        });
      },
    },
    "$store.getters.current": {
      handler: function (json) {
        this.current = json;
        this.getControlType();
        if (json === 0) {
          let dateList = [];
          this.titleList.forEach((item) => {
            let status = this.controlTypeList.filter(
              (val) =>
                val.stationId ===
                this.windturbinelist[item.windturbineId].stationId
            )[0].type;
            if (status) {
              let arr = Object.keys(this.windturbinelist).sort();
              this.windturbinelist =
                arr.length !== 0
                  ? this.windturbinelist
                  : this.$store.state.windturbinelist;
              switch (item.operateStyle) {
                case "Start":
                  this.windturbinelist[item.windturbineId].controlType = 1;
                  break;
                case "Stop":
                  this.windturbinelist[item.windturbineId].controlType = 2;
                  break;
                case "Maintain":
                  this.windturbinelist[item.windturbineId].controlType = 6;
                  break;
                case "UnMaintain":
                  this.windturbinelist[item.windturbineId].controlType = 8;
                  break;
              }
              dateList.push(this.windturbinelist[item.windturbineId]);
            }
          });
          let mss = {};
          mss.type = "send";
          mss.deviceType = "Auto";
          this.timer = setTimeout(() => {
            if (dateList.length > 0) {
              this.sendCommand(mss, dateList);
            }
            this.showFlag = false;
            clearInterval(this.timer);
          }, 3000);
        }
      },
    },
  },
};
</script>

<style scoped="scoped">
.body {
  border: 1px solid #373737;
  width: 100%;
  margin-left: 15px;
  margin-top: 20px;
}

.body .scoll {
  height: 91%;
  overflow-y: scroll;
}

.title {
  color: #ffffff;
  font-size: 14px;
  margin-left: 32px;
  /* margin-top: 12px; */
  margin-bottom: 10px;
  /* width: 570px; */
  width: 29vw;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  background-color: #000000;
}

.title::before {
  z-index: 1;
  content: "";
  position: absolute;
  left: -18px !important;
  /* top: 30px !important; */
  width: 5px;
  height: 5px;
  background-color: #54b75a;
  border-radius: 50%;
}

.logo {
  position: absolute;
  top: 12px;
  left: 12px;
}

.matrix {
  margin-left: 20px;
  /* margin-right: 10px; */
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(31, 31, 31, 1);
}

.problemTitle {
  font-size: 12px;
  color: #bfbfbf;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 12px;
}

.send {
  width: 86px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(84, 183, 90, 1);
  color: #ffffff;
  font-size: 14px;
  position: absolute;
  bottom: 20px;
  right: 10px;
}

.success {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 48px;
  position: absolute;
  bottom: 20px;
  right: 20%;
  border: 1px solid rgba(55, 55, 55, 1);
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
}

.controlTypes {
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 1);
}
.controlTypesLeft {
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 1);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}
.controlTypesRight {
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 1);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.onControlTypes {
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(51, 51, 51, 1);
  background-color: rgba(37, 116, 219, 1);
}
.onControlTypesLeft {
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid rgba(37, 116, 219, 1); */
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: rgba(37, 116, 219, 1);
}
.onControlTypesRight {
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid rgba(37, 116, 219, 1); */
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: rgba(37, 116, 219, 1);
}
</style>