UA 测控电源控制

he wei

2024-02-26 423c4f9a3046d02bd59c27a1d5bcf327b628faa4

UA 测控电源控制

 src/views/powerCabinetControl/components/card-module.vue

New file
@@ -0,0 +1,239 @@
<template>
  <div class="card flex-c">
    <div class="card-title">
      <div class="flex-r">
        {{ title }}
      </div>
      <el-checkbox
        v-if="canSelect"
        v-model="checked1"
        @change="changed"
      ></el-checkbox>
    </div>
    <div class="card-content">
      <div class="row">
        实时:
        <div class="value">{{ value }}</div>
        <div class="btn"></div>
      </div>
      <div class="row">
        设定:
        <el-select class="input" v-model="num" size="mini">
          <el-option
            v-for="(item, idx) in selectOptions"
            :key="'select_' + idx"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="btn">
          <gradient-btn size="xs" :disabled="!hasPermission" @click="confirm">{{
            btnText
          }}</gradient-btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import gradientBtn from "@/components/gradientBtn.vue";
import { setModeControl } from "../js/apis";
import setBitAtPositions from "@/assets/js/setBitAtPositions";
import getBit from "@/assets/js/getBit";
export default {
  name: "",
  props: {
    option: {
      type: Object,
      required: true,
    },
    datas: {
      type: Object,
      required: true,
    },
    btnText: {
      type: String,
      default: "设定",
    },
    checked: {
      type: Boolean,
      required: true,
    },
    canSelect: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    title() {
      return this.option.label;
    },
    selectOptions() {
      return this.option.option.map((v, i) => ({ label: v, value: i }));
    },
    value() {
      let {
        datas,
        option: { key_r, index, option },
      } = this;
      // 通过index获得它在flag数组中的index
      let propIdx = Math.floor(index / 25);
      let prop_key_r = key_r[propIdx];
      let _key_r = datas[prop_key_r];
      return option[getBit(_key_r, index % 25)];
    },
    hasPermission() {
      return this.$store.state.user.downloadFlag == 1;
    },
  },
  watch: {
    datas(n, o) {
      if (o.isEmpty && !n.isEmpty) {
        let {
          datas,
          option: { key_r, index },
        } = this;
        // 通过index获得它在flag数组中的index
        let propIdx = Math.floor(index / 25);
        let prop_key_r = key_r[propIdx];
        let _key_r = datas[prop_key_r];
        this.num = getBit(_key_r, index % 25) ^ 1;
      }
    },
    checked(n) {
      this.checked1 = n;
    },
  },
  data() {
    return {
      checked1: this.checked,
      // checked: false,
      num: 0,
    };
  },
  components: {
    gradientBtn,
  },
  methods: {
    changed() {
      this.$emit("update:checked", this.checked1);
    },
    setNum(num) {
      this.num = num;
    },
    confirm() {
      let title = `是否修改${this.title}`;
      let num = this.num;
      this.$confirm(title, "提示", {
        type: "warning",
      })
        .then(() => {
          let loading = this.$layer.loading();
          let { key_r, key_w, childrenCount, flag, index } = this.option;
          let params = {};
          if (childrenCount) {
            // 需要处理同一个字段的值
            // 通过index获得它在flag数组中的index
            let propIdx = Math.floor(index / 25);
            let prop_key_r = key_r[propIdx];
            let prop_key_w = key_w[propIdx];
            let prop_flag = flag[propIdx];
            let _key_r = this.datas[prop_key_r];
            params[prop_key_w] = setBitAtPositions(_key_r, [index % 25], num);
            params[prop_flag] = setBitAtPositions(0, [index % 25], 1);
          } else {
            params[key_w] = num;
            params[flag] = 1;
          }
          // console.log("调用结定接口", params);
          setModeControl(params)
            .then((res) => {
              let { code, data, msg } = res.data;
              this.$layer.close(loading);
              this.$message(msg);
            })
            .catch((err) => {
              console.log(err);
              this.$layer.close(loading);
            });
        })
        .catch(() => {});
    },
  },

  mounted() {},
};
</script>

<style scoped lang="less">
.flex-r {
  display: flex;
  flex-direction: row;
}
.flex-c {
  display: flex;
  flex-direction: column;
}
.card {
  height: 110px;
  border: 1px solid #3e8d9d;
  border-radius: 4px;
  color: #fff;
  overflow: hidden;
  .card-title {
    background: #0c4d77;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 6px;
    padding-right: 6px;
  }
  .i {
    margin-left: 4px;
    margin-right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #77edf6 url("../../../assets/images/gantan.png") 50% 50% / auto
      60% no-repeat;
  }
  .card-content {
    flex: 1;
    background: #011f39;
    display: flex;
    flex-direction: column;
    padding: 6px;
  }
  .value {
    flex: 1;
    background: #fff;
    color: #000;
    margin-left: 6px;
    margin-right: 6px;
    padding-left: 6px;
    height: 26px;
    line-height: 26px;
    border-radius: 6px;
  }
  .input {
    color: #000;
    flex: 1;
    margin-left: 6px;
    margin-right: 6px;
    :deep(.el-input__inner) {
      color: inherit;
    }
  }
  .btn {
    width: 60px;
  }
  .row {
    flex: 1;
    display: flex;
    align-items: center;
  }
}
</style>

 src/views/powerCabinetControl/index.vue

@@ -206,6 +206,89 @@
          </panel>
        </div>
      </el-tab-pane>
      <el-tab-pane label="测控电源遥控">
        <div class="tab-content content2 flex-r">
          <panel class="panel left" title="模块开关机">
            <div slot="leftTools" class="btn-grp">
              <gradient-btn
                size="xs"
                @click="selectAll('checkList_module_states')"
                >全选</gradient-btn
              >
              <gradient-btn
                size="xs"
                @click="cancelSelectAll('checkList_module_states')"
                >取消全选</gradient-btn
              >
            </div>
            <div slot="tools" class="btn-grp">
              <gradient-btn
                size="xs"
                :disabled="
                  !checkList_module_states.some((v) => v == true) ||
                  !hasPermission
                "
                @click="batchModuleSet"
                >批量设定</gradient-btn
              >
              <gradient-btn
                size="xs"
                :disabled="
                  !checkList_module_states.some((v) => v == true) ||
                  !hasPermission
                "
                @click="batchModule(0)"
                >批量开机</gradient-btn
              >
              <gradient-btn
                size="xs"
                :disabled="
                  !checkList_module_states.some((v) => v == true) ||
                  !hasPermission
                "
                @click="batchModule(1)"
                >批量关机</gradient-btn
              >
            </div>
            <div class="content flex-c">
              <yc-grid
                class="scroller"
                :count="module_states.length"
                :cols="3"
                :config="module_states"
              >
                <template v-slot="{ data, index }">
                  <card-module
                    :ref="'module_states_' + index"
                    :option="data[index]"
                    :datas="rtData"
                    :checked.sync="checkList_module_states[index]"
                  ></card-module>
                </template>
              </yc-grid>
            </div>
          </panel>
          <panel class="panel other" title="其他控制">
            <div class="content">
              <yc-grid
                class="scroller"
                :count="other_control.length"
                :cols="2"
                :config="other_control"
              >
                <template v-slot="{ data, index }">
                  <card-module
                    :option="data[index]"
                    :datas="rtData"
                    :canSelect="false"
                    :checked="true"
                  ></card-module>
                </template>
              </yc-grid>
            </div>
          </panel>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
@@ -217,6 +300,7 @@
import gradientBtn from "@/components/gradientBtn.vue";
import card from "./components/card";
import card2 from "./components/card2";
import cardModule from "./components/card-module";
import IpCard from "./components/ipCard";
import paramAlarm from "./components/paramAlarm";
import paramMode from "./components/paramMode";
@@ -226,9 +310,26 @@

import createWs from "@/assets/js/websocket/plus";
const WSMixin = createWs("ckRtAndSignalAndHr", "ckDevRsAndRtAlm");
import { updateYC, updateYX } from "./js/apis";
import { updateYC, updateYX, setModeControl } from "./js/apis";
import changeBinaryBits from "@/assets/js/changeBinaryBits";
import setBitAtPositions from "@/assets/js/setBitAtPositions";

const other_control = [
  {
    label: "系统均浮充状态",
    key_r: 'junFloatStateReal',
    key_w: 'battChrstate',
    flag: 'battChrstateFlag',
    option: ["浮充", "均充"],
  },
  // {
  //   label: "电池组测试",
  //   // key_r: ["m1Off1Real", "m1Off2Real"],
  //   key_w: 'batt1Test',
  //   flag: 'batt1TestFlag',
  //   option: ["充电", "测试"],
  // },
];

export default {
  name: "powerCabinetControl",
@@ -240,12 +341,14 @@
    gradientBtn,
    card,
    card2,
    cardModule,
    IpCard,
    paramAlarm,
    paramMode,
  },
  data() {
    return {
      other_control,
      rtData: {
        isEmpty: true,
      },
@@ -257,12 +360,14 @@
      checkList1_gp: param_gp.map(() => false),
      checkList2_acdc: [],
      checkList2_gp: [],
      checkList_module_states: [],
    };
  },
  created() {
    // 在 created 钩子中初始化数据
    this.checkList2_acdc = this.acdc_alarms.map(() => false);
    this.checkList2_gp = this.gp_alarms.map(() => false);
    this.checkList_module_states = this.module_states.map(() => false);
  },
  computed: {
    hasPermission() {
@@ -317,6 +422,33 @@
        } else {
          arr.push(item);
        }
      }
      return arr;
    },
    module_states() {
      let obj = {
        label: "模块N开关机状态",
        key_r: ["m1Off1Real", "m1Off2Real"],
        key_w: ["m1Close", "m2Close"],
        flag: ["m1CloseFlag", "m2CloseFlag"],
        childrenCount: 32,
        option: ["开机", "关机"],
      };
      let arr = [];
      for (let m = 0, n = obj.childrenCount; m < n; m++) {
        let idx = m + 1;
        let mIdx = Math.floor(m / 25);
        arr.push({
          label0: obj.label,
          label: obj.label.replace("N", idx),
          key_r: obj.key_r,
          key_w: obj.key_w,
          flag: obj.flag,
          childrenCount: n,
          index: m,
          option: obj.option,
          mainIdx: "m_" + mIdx,
        });
      }
      return arr;
    },
@@ -479,6 +611,154 @@
        })
        .catch(() => {});
    },
    // 批量设定模块开关机状态
    batchModuleSet() {
      let title = "是否批量修改模块开关机状态";
      this.$confirm(title, "提示", {
        type: "warning",
      })
        .then(() => {
          let loading = this.$layer.loading();
          let params = {};
          let checkList = this["checkList_module_states"];
          // 从被选中(打勾)的序号列表中 把对应同一个字段的合并为一个序号（N个同类型的每25个一个字段) (合并为一个序号取第一个用 并要想办法把合并的这些index保存来用)
          // 用一个对象来存储是否有同组的已进来
          let obj = {};
          // 用一个数组来存储要处得的对象 每个元素{$el, indexs} $el 为组件引用 有同组的引用第一个 有同组的就有indexs 里面记录对应的索引
          let arr = [];
          checkList
            .map((v, i) => ({ i, v }))
            .filter((v) => v.v)
            .forEach((v) => {
              let refName = "module_states_" + v.i;
              let $el = this.$refs[refName];
              let {
                num,
                option: { key_r, key_w, flag, index, mainIdx },
              } = $el;
              // index[0] 存num为0对应的index, index[1]存num为1对应的index
              obj[mainIdx] = obj[mainIdx] || { $el, indexs: [[], []] };
              if (num) {
                obj[mainIdx].indexs[1].push(index);
              } else {
                obj[mainIdx].indexs[0].push(index);
              }
            });
          Object.keys(obj).forEach((v) => {
            arr.push(obj[v]);
          });
          arr.forEach((v) => {
            let {
              datas,
              option: { key_r, key_w, flag, index },
            } = v.$el;
            // 需要处理同一个字段的值
            // 通过index获得它在flag数组中的index
            let propIdx = Math.floor(index / 25);
            let prop_key_w = key_w[propIdx];
            let prop_flag = flag[propIdx];

            let key0 = setBitAtPositions(
              0,
              v.indexs[0].map((vv) => vv % 25),
              0
            );
            let key1 = setBitAtPositions(
              0,
              v.indexs[1].map((vv) => vv % 25),
              1
            );
            console.log(v.indexs, key0, key1);
            params[prop_key_w] = key0 | key1;
            params[prop_flag] = setBitAtPositions(
              0,
              [...v.indexs[0], ...v.indexs[1]].map((vv) => vv % 25),
              1
            );
          });
          console.log("调用结定接口", params);
          setModeControl(params)
            .then((res) => {
              let { code, data, msg } = res.data;
              this.$layer.close(loading);
              this.$message(msg);
            })
            .catch((err) => {
              console.log(err);
              this.$layer.close(loading);
            });
        })
        .catch(() => {});
    },
    batchModule(state) {
      let title = "是否批量修改模块开关机状态";
      this.$confirm(title, "提示", {
        type: "warning",
      })
        .then(() => {
          let loading = this.$layer.loading();
          let params = {};
          let checkList = this["checkList_module_states"];
          // 从被选中(打勾)的序号列表中 把对应同一个字段的合并为一个序号（N个同类型的每25个一个字段) (合并为一个序号取第一个用 并要想办法把合并的这些index保存来用)
          // 用一个对象来存储是否有同组的已进来
          let obj = {};
          // 用一个数组来存储要处得的对象 每个元素{$el, indexs} $el 为组件引用 有同组的引用第一个 有同组的就有indexs 里面记录对应的索引
          let arr = [];
          // let elList = [];
          checkList
            .map((v, i) => ({ i, v }))
            .filter((v) => v.v)
            .forEach((v) => {
              let refName = "module_states_" + v.i;
              let $el = this.$refs[refName];
              let {
                option: { key_r, key_w, flag, index, mainIdx },
              } = $el;
              // elList.push($el);
              // console.log($el, '??')
              $el.setNum(state);
              obj[mainIdx] = obj[mainIdx] || { $el, indexs: [] };
              obj[mainIdx].indexs.push(index);
            });
          Object.keys(obj).forEach((v) => {
            arr.push(obj[v]);
          });
          arr.forEach((v) => {
            let {
              datas,
              option: { key_r, key_w, flag, index },
            } = v.$el;
            // 需要处理同一个字段的值
            // 通过index获得它在flag数组中的index
            let propIdx = Math.floor(index / 25);
            let prop_key_w = key_w[propIdx];
            let prop_flag = flag[propIdx];
            
            params[prop_key_w] = setBitAtPositions(
              0,
              v.indexs.map((vv) => vv % 25),
              state
            );
            params[prop_flag] = setBitAtPositions(
              0,
              v.indexs.map((vv) => vv % 25),
              1
            );
          });
          console.log("调用结定接口", params);
          setModeControl(params)
            .then((res) => {
              let { code, data, msg } = res.data;
              this.$layer.close(loading);
              this.$message(msg);
            })
            .catch((err) => {
              console.log(err);
              this.$layer.close(loading);
            });
        })
        .catch(() => {});
    },
    changeIp(ip) {
      console.log(ip, "hhhhhh");
    },
@@ -558,6 +838,17 @@
  &.param-alarm {
    flex: 1.2;
  }
  &.other {
    flex: 0.8;
    .content {
      height: 100%;
      padding: 10px 30px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
.btn-grp {
  padding: 10px;

 src/views/powerCabinetControl/js/apis.js

@@ -67,4 +67,16 @@
    url: "cKPowerDevModeparam/setModeParam",
    data
  });
};

/**
 * 设置模块控制
 * @returns
 */
export const setModeControl = (data) => {
  return axios({
    method: "POST",
    url: "cKPowerDevModecontrol/setModeControl",
    data
  });
};