UA 权限控制等

he wei

2023-12-08 f182d3bafb07fe93a4109742cb3553b795c6c919

UA 权限控制等

 src/assets/css/base.less

@@ -232,6 +232,7 @@
    background: #153953;
  }

  &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell,
  .el-table__body
  tr.hover-row.hover-row.hover-row
  > td.el-table__cell {

 src/assets/js/changeBinaryBits.js

New file
@@ -0,0 +1,11 @@
/**
 *  改变二进制数指定位的值
 *  bits 要改变的位索引 0为最低位 数组 [1,3,5]
 */
export default function changeBinaryBits(num = 0, bits = [0]) {
  let tmp = 0;
  bits.forEach((v) => {
    tmp += 1 << v;
  });
  return num ^ tmp;
}

 src/assets/js/common.js

New file
@@ -0,0 +1,44 @@
const font_base = 20;
//格式化时间
Date.prototype.format = function (format) {
    var o = {
        "M+": this.getMonth() + 1, //month
        "d+": this.getDate(), //day
        "h+": this.getHours(), //hour
        "m+": this.getMinutes(), //minute
        "s+": this.getSeconds(), //second
        "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
        "S": this.getMilliseconds() //millisecond
    };
    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
        (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1,
                RegExp.$1.length == 1 ? o[k] :
                    ("00" + o[k]).substr(("" + o[k]).length));
    return format;
};

// 对toFixed数字保留位数二次封装（ps：toFixed返回的是字符串）
Number.prototype.toHold = function (value) {
    var hold = this.toFixed(value);
    hold = Number(hold);
    return hold;
};

/* eslint-disable */
; (function (doc, win) {
    let docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            let clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            let sizeRatio = (clientWidth / 1920)>1?1:(clientWidth / 1920);
            let fontSize = font_base * sizeRatio;
            docEl.style.fontSize = fontSize + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

 src/assets/js/getBit.js

New file
@@ -0,0 +1,6 @@
/**
 *  获取二进制数指定位的值
 */
export default function getBit(num, bit) {
  return (num >> bit) & 1;
}

 src/assets/js/setBitAtPositions.js

New file
@@ -0,0 +1,20 @@
/**
 * 设置二进制数 指定位的值
 * num  要处理的数
 * positions 要修改的位的数组 0为最低位 [0, 3, 5]
 * value 指定位修改为 0/1
 */
export default function setBitAtPositions(num, positions, value) {
  let tmp = 0;
  positions.forEach((v) => {
    tmp += 1 << v;
  });
  // 如果value为1，设置指定位为1
  if (value) {
    return num | tmp;
  }
  // 如果value为0，设置指定位为0
  else {
    return num & ~tmp;
  }
}

 src/components/alarmCard.vue

@@ -1,5 +1,5 @@
<template>
  <div class="alarm-card">
  <div :class="['alarm-card', {pointer: childrenCount > 0}]">
    <div class="name">{{ name }}</div>
    <div
      :class="[
@@ -34,25 +34,25 @@
      type: Number,
      default: 0,
    },
    childrenVisible: {
      type: Boolean,
      default: false,
    },
    // childrenVisible: {
    //   type: Boolean,
    //   default: false,
    // },
    flag: {
      type: [Number, Array],
      default: 0,
    },
  },
  computed: {
    cols() {
      return Math.ceil(Math.sqrt(this.childrenCount));
    },
    rows() {
      if (!this.cols) {
        return 0;
      }
      return Math.ceil(this.childrenCount / this.cols);
    },
    // cols() {
    //   return Math.ceil(Math.sqrt(this.childrenCount));
    // },
    // rows() {
    //   if (!this.cols) {
    //     return 0;
    //   }
    //   return Math.ceil(this.childrenCount / this.cols);
    // },
    isAlarm() {
      const flag = this.flag;
      if (Array.isArray(flag)) {
@@ -89,6 +89,9 @@
  padding: 6px;
  justify-content: space-between;
  align-items: center;
  &.pointer {
    cursor: pointer;
  }
  .state {
    width: 60px;
    background: #78eef8;
@@ -104,48 +107,48 @@
      background: #ff3801;
    }
  }
  .card-children-container {
    z-index: 100;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 1600px;
  // .card-children-container {
  //   z-index: 100;
  //   position: fixed;
  //   top: 50%;
  //   left: 50%;
  //   width: 1600px;

    // height: 600px;
    transform: translate(-50%, -50%);
    background: gray;
    padding: 20px;
    display: flex;
    flex-direction: column;
    &.small {
      width: 800px;
    }
    .sub-title {
      text-align: center;
      font-size: 20px;
      padding-bottom: 10px;
    }
    .row {
      display: flex;
      & ~ .row {
        margin-top: 8px;
      }
      .col {
        flex: 1;
        & ~ .col {
          margin-left: 8px;
        }
      }
    }
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
  }
  //   // height: 600px;
  //   transform: translate(-50%, -50%);
  //   background: gray;
  //   padding: 20px;
  //   display: flex;
  //   flex-direction: column;
  //   &.small {
  //     width: 800px;
  //   }
  //   .sub-title {
  //     text-align: center;
  //     font-size: 20px;
  //     padding-bottom: 10px;
  //   }
  //   .row {
  //     display: flex;
  //     & ~ .row {
  //       margin-top: 8px;
  //     }
  //     .col {
  //       flex: 1;
  //       & ~ .col {
  //         margin-left: 8px;
  //       }
  //     }
  //   }
  // }
  // .mask {
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  //   background: rgba(0, 0, 0, 0.4);
  //   z-index: 99;
  // }
}
</style>

 src/components/bar1.vue

@@ -95,6 +95,7 @@
   

      var max = Math.ceil(calMax([sData]) / 10) * 10;
      const unit = this.unit;
      return {
        grid: {
          left: "3%",
@@ -229,7 +230,7 @@
                fontSize: "12",
              },
              formatter: function (value) {
                return "{a|" + value + "}";
                return "{a|" + value + unit+ "}";
              },
              rich: {
                a: {
@@ -250,7 +251,7 @@
            data: (function () {
              let arr = [];
              sData.forEach((item) => {
                let data = item + "V";
                let data = item;
                arr.push(data);
              });
              return arr;

 src/components/bar2.vue

@@ -92,6 +92,7 @@
      }

      var max = Math.ceil(calMax([sData]) / 10) * 10;
      const unit = this.unit;
      return {
        grid: {
          left: "3%",
@@ -226,7 +227,7 @@
                fontSize: "12",
              },
              formatter: function (value) {
                return "{a|" + value + "}";
                return "{a|" + value + unit + "}";
              },
              rich: {
                a: {
@@ -247,7 +248,7 @@
            data: (function () {
              let arr = [];
              sData.forEach((item) => {
                let data = item + "V";
                let data = item;
                arr.push(data);
              });
              return arr;

 src/components/stepLine.vue

New file
@@ -0,0 +1,88 @@
<script>
import ECharts from "echarts";
import BaseChart from "@/components/echarts/BaseChart";

export default {
  extends: BaseChart,
  props: {
    name: {
      type: String,
      default: "",
    },
    unit: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    fullScreen() {
      return false;
    },

    setData(data) {
      let option = this.getOption(data);
      this.setOption(option);
    },

    getOption(data) {
      // let xLabel = data.xLabel;
      // let sData = data.sData;

      return {
        grid: {
          left: 0,
          right: 0,
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          onZero: false,
          axisLine: {
            show: false, // 隐藏x轴轴线
          },
          // axisTick: {
          //   show: false, // 隐藏x轴刻度线
          // },
          axisLabel: {
            show: true, // 显示分类名
            position: "inside", // 将分类名放置在x轴内部
          },
        },
        yAxis: {
          type: "value",
          min: -0.1,
        },
        series: [
          {
            data: [1, 0, 0, 1, 0, 1, 0],
            type: "line",
            step: "center",
            connectNulls: true,
          },
        ],
        dataZoom: [
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 100,
            orient: "vertical",
            zlevel: 66,
          },
        ],
      };
    },
  },
  mounted() {
    this.setData();
  },
};
</script>

 src/main.js

@@ -23,6 +23,8 @@

import "./icons"

import "@/assets/js/common"

Vue.config.productionTip = false

// 全局混入页面路由守卫

 src/router/routes.js

@@ -86,6 +86,41 @@
    ]
  },
  {
    path: "/power-cabinet-hisalarm",
    component: Layout,
    meta: { title: "电源柜历史告警", icon: 'dashboard'},
    name: "powerCabinetHisalarm",
    children: [
      {
        path: '',
        component: () => import('@/views/powerCabinetHisalarm'),
        name: 'powerCabinetHisalarm',
        meta: {title: '电源柜历史告警', icon: 'dashboard'}
      },
    ]
  },
  {
    path: "/test-record",
    component: Layout,
    meta: { title: "交直流断路测控记录", icon: 'dashboard'},
    name: "testRecord",
    children: [
      {
        path: '',
        component: () => import('@/views/testRecord'),
        name: 'testRecord',
        meta: {title: '交直流断路测控记录', icon: 'dashboard'}
      },
      {
        path: 'details',
        component: () => import('@/views/testRecord/details'),
        name: 'testDetails',
        hidden: true,
        meta: {title: '交直流断路测控详情', icon: 'dashboard'}
      },
    ]
  },
  {
    path: "/user",
    component: Layout,
    redirect: '/user/list',

 src/views/home/index.vue

@@ -184,41 +184,49 @@
                    <protector-box
                      @click="showState"
                      :offset="[36, 10]"
                      sw-name="JK-12"
                    ></protector-box>
                    <switch-box
                      @click="showState"
                      :type="3"
                      :offset="[36, 134]"
                      sw-name="JK-13"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="3"
                      :offset="[220, 134]"
                      sw-name="JK-14"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="3"
                      :offset="[390, 134]"
                      sw-name="JK-15"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[36, 252]"
                      sw-name="JK-16"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[150, 252]"
                      sw-name="JK-17"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[274, 252]"
                      sw-name="JK-18"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[390, 252]"
                      sw-name="JK-19"
                    ></switch-box>
                    <svg-line
                      :points="[
@@ -299,41 +307,49 @@
                    <protector-box
                      @click="showState"
                      :offset="[390, 10]"
                      sw-name="JK-22"
                    ></protector-box>
                    <switch-box
                      @click="showState"
                      :type="3"
                      :offset="[36, 134]"
                      sw-name="JK-23"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="3"
                      :offset="[220, 134]"
                      sw-name="JK-24"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="3"
                      :offset="[390, 134]"
                      sw-name="JK-25"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[36, 252]"
                      sw-name="JK-26"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[150, 252]"
                      sw-name="JK-27"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[274, 252]"
                      sw-name="JK-28"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[390, 252]"
                      sw-name="JK-29"
                    ></switch-box>
                    <svg-line
                      :points="[
@@ -415,47 +431,56 @@
                      @click="showState"
                      :type="2"
                      :offset="[269, 14]"
                      sw-name="DK-11"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[20, 160]"
                      sw-name="DK-12"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[94, 160]"
                      sw-name="DK-13"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[168, 160]"
                      sw-name="DK-14"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      alarm
                      small
                      :offset="[242, 160]"
                      sw-name="DK-15"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[316, 160]"
                      sw-name="DK-16"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[390, 160]"
                      sw-name="DK-17"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[464, 160]"
                      sw-name="DK-18"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[538, 160]"
                      sw-name="DK-19"
                    ></switch-box>
                    <svg-line
                      :points="[
@@ -526,46 +551,55 @@
                      @click="showState"
                      :type="2"
                      :offset="[269, 14]"
                      sw-name="DK-21"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[20, 160]"
                      sw-name="DK-22"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[94, 160]"
                      sw-name="DK-23"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[168, 160]"
                      sw-name="DK-24"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[242, 160]"
                      sw-name="DK-25"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[316, 160]"
                      sw-name="DK-26"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[390, 160]"
                      sw-name="DK-27"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[464, 160]"
                      sw-name="DK-28"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[538, 160]"
                      sw-name="DK-29"
                    ></switch-box>
                    <svg-line
                      :points="[

 src/views/powerCabinetControl/components/card.vue

@@ -23,9 +23,13 @@
          :step="1"
        ></el-input-number>
        <div class="btn">
          <gradient-btn :active="setFlag" size="xs" @click="confirm">{{
            setFlag ? btnText + "中" : btnText
          }}</gradient-btn>
          <gradient-btn
            :active="setFlag"
            size="xs"
            :disabled="!hasPermission"
            @click="confirm"
            >{{ setFlag ? btnText + "中" : btnText }}</gradient-btn
          >
        </div>
      </div>
    </div>
@@ -69,6 +73,9 @@
      let { datas, option } = this;
      return this.setFlag ? datas[option.key1] : datas[option.key0];
    },
    hasPermission() {
      return this.$store.state.user.downloadFlag == 1;
    },
  },
  watch: {
    datas(n, o) {
@@ -95,7 +102,17 @@
      this.$emit("update:checked", this.checked1);
    },
    confirm() {
      let title = this.setFlag ? "是否取消给定?" : "是否给定?";
      let title = "";
      let flag = 0;
      let num;
      if (this.setFlag) {
        title = "是否取消给定?";
        flag = 0;
      } else {
        title = "是否给定?";
        flag = 1;
        num = this.num;
      }
      this.$confirm(title, "提示", {
        type: "warning",
      })
@@ -103,8 +120,8 @@
          // console.log('调用结定接口', this.num, this.option.key1);
          let loading = this.$layer.loading();
          let params = {};
          params[this.option.key1] = this.num;
          params[this.option.flag] = 1;
          params[this.option.key1] = num;
          params[this.option.flag] = flag;
          updateYC(params)
            .then((res) => {
              let { code, data, msg } = res.data;

 src/views/powerCabinetControl/components/card2.vue

@@ -2,28 +2,30 @@
  <div class="card flex-c">
    <div class="card-title">
      <div class="flex-r">
        <el-tooltip
          effect="dark"
          :content="tip"
          placement="top-start"
        >
        <el-tooltip effect="dark" :content="tip" placement="top-start">
          <div class="i"></div>
        </el-tooltip>
        {{ title }}
      </div>
      <el-checkbox v-model="checked"></el-checkbox>
      <el-checkbox v-model="checked1" @change="changed"></el-checkbox>
    </div>
    <div class="card-content">
      <div class="col">
        实时:
        <div class="value">正常</div>
        <div :class="['value', { alarm: !!value }]">
          {{ value ? "告警" : "正常" }}
        </div>
      </div>
      <div class="col">
        模拟:
        <div class="btn">
          <gradient-btn :active="setFlag" @click="handlerClick" size="xs">{{
            setFlag ? "执行中" : "执行"
          }}</gradient-btn>
          <gradient-btn
            :active="setFlag"
            :disabled="!hasPermission"
            @click="handlerClick"
            size="xs"
            >{{ setFlag ? "执行中" : "执行" }}</gradient-btn
          >
        </div>
      </div>
    </div>
@@ -32,25 +34,41 @@

<script>
import gradientBtn from "@/components/gradientBtn.vue";
import { updateYX } from "../js/apis";
import changeBinaryBits from "@/assets/js/changeBinaryBits";
import getBit from "@/assets/js/getBit";
import setBitAtPositions from "@/assets/js/setBitAtPositions";

export default {
  name: "",
  props: {
    option: {
      type: Object,
      required: true
      required: true,
    },
    datas: {
      type: Object,
      required: true,
    },
    checked: {
      type: Boolean,
      required: true,
    },
  },
  watch: {
    checked(n) {
      this.checked1 = n;
    },
  },
  data() {
    return {
      checked: true,
      num: 0,
      checked1: this.checked,
    };
  },
  computed: {
    hasPermission() {
      return this.$store.state.user.downloadFlag == 1;
    },
    title() {
      return this.option.label;
    },
@@ -58,16 +76,89 @@
      return this.option.tip;
    },
    setFlag() {
      return !!this.datas[this.option.flag];
      let { flag, childrenCount, index } = this.option;
      if (childrenCount) {
        // 通过index获得它在flag数组中的index
        let propIdx = Math.floor(index / 25);
        let prop_flag = flag[propIdx];
        let _flag = this.datas[prop_flag];
        return !!getBit(_flag, index % 25);
      } else {
        return !!this.datas[flag];
      }
    },
    value() {
      let {
        datas,
        option: { key0, key1, childrenCount, index },
      } = this;
      if (childrenCount) {
        // 通过index获得它在flag数组中的index
        let propIdx = Math.floor(index / 25);
        let prop_key0 = key0[propIdx];
        let prop_key1 = key1[propIdx];
        let _key0 = datas[prop_key0];
        let _key1 = datas[prop_key1];
        return !this.setFlag
          ? getBit(_key1, index % 25)
          : getBit(_key0, index % 25);
      } else {
        return this.setFlag ? datas[key1] : datas[key0];
      }
    },
  },
  components: {
    gradientBtn,
  },
  methods: {
    changed() {
      this.$emit("update:checked", this.checked1);
    },
    handlerClick() {
      console.log('执行', this.option);
    }
      let title = "";
      let pflag = 0;
      if (this.setFlag) {
        title = "是否取消执行?";
        pflag = 0;
      } else {
        title = "是否执行?";
        pflag = 1;
      }
      this.$confirm(title, "提示", {
        type: "warning",
      })
        .then(() => {
          let loading = this.$layer.loading();
          let params = {};
          let { key1, flag, childrenCount, index } = this.option;
          if (childrenCount) {
            // 需要处理同一个字段的值
            // 通过index获得它在flag数组中的index
            let propIdx = Math.floor(index / 25);
            let prop_key1 = key1[propIdx];
            let prop_flag = flag[propIdx];
            let _key1 = this.datas[prop_key1];
            let _flag = this.datas[prop_flag];
            // console.log(_key1, _flag, propIdx, index, '====idx', index % 25);
            params[prop_key1] = setBitAtPositions(_key1, [index % 25], pflag);
            params[prop_flag] = changeBinaryBits(_flag, [index % 25]);
          } else {
            params[key1] = 1;
            params[flag] = pflag;
          }
          updateYX(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() {},
@@ -130,6 +221,10 @@
    height: 26px;
    line-height: 26px;
    border-radius: 6px;
    &.alarm {
      color: #ff4f45;
      font-weight: 700;
    }
  }
  .input {
    color: #000;

 src/views/powerCabinetControl/components/ipCard.vue

@@ -15,11 +15,19 @@
      </div>
      <div class="row">
        模拟:
        <ip-input class="input" :onChange="change" :onBlur="blur" :ip="ip"></ip-input>
        <ip-input
          class="input"
          :onChange="change"
          :onBlur="blur"
          :ip="ip"
        ></ip-input>
        <div class="btn">
          <gradient-btn :active="setFlag" size="xs">{{
            setFlag ? "设定中" : "设定"
          }}</gradient-btn>
          <gradient-btn
            :active="setFlag"
            size="xs"
            :disabled="!hasPermission"
            >{{ setFlag ? "设定中" : "设定" }}</gradient-btn
          >
        </div>
      </div>
    </div>
@@ -42,8 +50,8 @@
    },
    ip: {
      type: String,
      required: true
    }
      required: true,
    },
  },
  data() {
    return {
@@ -55,21 +63,26 @@
    gradientBtn,
    IpInput,
  },
  computed: {
    hasPermission() {
      return this.$store.state.user.downloadFlag == 1;
    },
  },
  methods: {
    change(value) {
      // console.log(value, 'ip change', value.split('.'));
      let segments = value.split('.');
      if(!segments.some(v=>v=='')){
      let segments = value.split(".");
      if (!segments.some((v) => v == "")) {
        // console.log(value, 'ip', this.ip);
        this.$emit('update:ip', value);
        this.$emit('change', value);
        this.$emit("update:ip", value);
        this.$emit("change", value);
      }
    },
    blur(value) {
      // console.log(value, 'blur', this.ip);
      this.$emit('update:ip', value);
      this.$emit('blur', value)
    }
      this.$emit("update:ip", value);
      this.$emit("blur", value);
    },
  },

  mounted() {},

 src/views/powerCabinetControl/index.vue

@@ -10,7 +10,9 @@
              >
              <gradient-btn
                size="xs"
                :disabled="!checkList1_acdc.some((v) => v == true)"
                :disabled="
                  !checkList1_acdc.some((v) => v == true) || !hasPermission
                "
                @click="batchYCSet('acdc')"
                >批量给定</gradient-btn
              >
@@ -34,15 +36,15 @@
          </panel>
          <panel class="panel right" title="遥信量模拟">
            <div slot="tools" class="btn-grp">
              <gradient-btn
                size="xs"
                @click="selectAll('acdc_alarms')"
              <gradient-btn size="xs" @click="selectAll('checkList2_acdc')"
                >全选</gradient-btn
              >
              <gradient-btn
                size="xs"
                :disabled="!checkList1_acdc.some((v) => v == true)"
                @click="batchYXSet('checkList1_acdc')"
                :disabled="
                  !checkList2_acdc.some((v) => v == true) || !hasPermission
                "
                @click="batchYXSet('acdc')"
                >批量执行</gradient-btn
              >
            </div>
@@ -54,7 +56,12 @@
                :config="acdc_alarms"
              >
                <template v-slot="{ data, index }">
                  <card2 :option="data[index]" :datas="rtData"></card2>
                  <card2
                    :ref="'acdc_alarm_' + index"
                    :option="data[index]"
                    :datas="rtData"
                    :checked.sync="checkList2_acdc[index]"
                  ></card2>
                </template>
              </yc-grid>
            </div>
@@ -65,12 +72,17 @@
        <div class="tab-content content2 flex-r">
          <panel class="panel left" title="遥测量模拟">
            <div slot="tools" class="btn-grp">
              <gradient-btn
                size="xs"
                @click="selectAll('checkList1_gp')"
              <gradient-btn size="xs" @click="selectAll('checkList1_gp')"
                >全选</gradient-btn
              >
              <gradient-btn size="xs">批量给定</gradient-btn>
              <gradient-btn
                size="xs"
                :disabled="
                  !checkList1_gp.some((v) => v == true) || !hasPermission
                "
                @click="batchYCSet('gp')"
                >批量给定</gradient-btn
              >
            </div>
            <div class="content flex-c">
              <yc-grid
@@ -81,6 +93,7 @@
              >
                <template v-slot="{ data, index }">
                  <card
                    :ref="'gp_param_' + index"
                    :option="data[index]"
                    :datas="rtData"
                    :checked.sync="checkList1_gp[index]"
@@ -91,8 +104,17 @@
          </panel>
          <panel class="panel right" title="遥信量模拟">
            <div slot="tools" class="btn-grp">
              <gradient-btn size="xs">全选</gradient-btn>
              <gradient-btn size="xs">批量执行</gradient-btn>
              <gradient-btn size="xs" @click="selectAll('checkList2_gp')"
                >全选</gradient-btn
              >
              <gradient-btn
                size="xs"
                :disabled="
                  !checkList2_gp.some((v) => v == true) || !hasPermission
                "
                @click="batchYXSet('gp')"
                >批量执行</gradient-btn
              >
            </div>
            <div class="content">
              <yc-grid
@@ -102,7 +124,12 @@
                :config="gp_alarms"
              >
                <template v-slot="{ data, index }">
                  <card2 :option="data[index]" :datas="rtData"></card2>
                  <card2
                    :ref="'gp_alarm_' + index"
                    :option="data[index]"
                    :datas="rtData"
                    :checked.sync="checkList2_gp[index]"
                  ></card2>
                </template>
              </yc-grid>
            </div>
@@ -114,7 +141,9 @@
          <panel class="panel left" title="遥调量模拟">
            <div slot="tools" class="btn-grp">
              <gradient-btn size="xs">全选</gradient-btn>
              <gradient-btn size="xs">批量设定</gradient-btn>
              <gradient-btn size="xs" :disabled="!hasPermission"
                >批量设定</gradient-btn
              >
            </div>
            <div class="content">
              <div class="grid1">
@@ -154,8 +183,15 @@
                      <div class="item-row">
                        <div class="label">蓄电池放电模拟:</div>
                        <div class="btn-grp">
                          <gradient-btn size="sm">开始放电</gradient-btn>
                          <gradient-btn active size="sm">停止放电</gradient-btn>
                          <gradient-btn size="sm" :disabled="!hasPermission"
                            >开始放电</gradient-btn
                          >
                          <gradient-btn
                            active
                            size="sm"
                            :disabled="!hasPermission"
                            >停止放电</gradient-btn
                          >
                        </div>
                      </div>
                    </div>
@@ -172,8 +208,13 @@
                      <div class="item-row">
                        <div class="label">内阻测试模拟:</div>
                        <div class="btn-grp">
                          <gradient-btn size="sm">启动内阻测试</gradient-btn>
                          <gradient-btn active size="sm"
                          <gradient-btn size="sm" :disabled="!hasPermission"
                            >启动内阻测试</gradient-btn
                          >
                          <gradient-btn
                            active
                            size="sm"
                            :disabled="!hasPermission"
                            >停止内阻测试</gradient-btn
                          >
                        </div>
@@ -192,8 +233,13 @@
                      <div class="item-row">
                        <div class="label">K1/D1测试模拟:</div>
                        <div class="btn-grp">
                          <gradient-btn size="sm">启动K1/D1测试</gradient-btn>
                          <gradient-btn active size="sm"
                          <gradient-btn size="sm" :disabled="!hasPermission"
                            >启动K1/D1测试</gradient-btn
                          >
                          <gradient-btn
                            active
                            size="sm"
                            :disabled="!hasPermission"
                            >停止K1/D1测试</gradient-btn
                          >
                        </div>
@@ -212,7 +258,9 @@
                      <div class="item-row">
                        <div class="label">装置重启模拟:</div>
                        <div class="btn-grp">
                          <gradient-btn size="sm">重启核容装置</gradient-btn>
                          <gradient-btn size="sm" :disabled="!hasPermission"
                            >重启核容装置</gradient-btn
                          >
                        </div>
                      </div>
                    </div>
@@ -249,8 +297,13 @@
                      <div class="item-row">
                        <div class="label">装置重启模拟:</div>
                        <div class="btn-grp">
                          <gradient-btn size="sm">暂时配置生效</gradient-btn>
                          <gradient-btn active size="sm"
                          <gradient-btn size="sm" :disabled="!hasPermission"
                            >暂时配置生效</gradient-btn
                          >
                          <gradient-btn
                            active
                            size="sm"
                            :disabled="!hasPermission"
                            >永久配置生效</gradient-btn
                          >
                        </div>
@@ -281,7 +334,9 @@

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

export default {
  name: "",
@@ -306,10 +361,20 @@
      param_gp,
      checkList1_acdc: param_acdc.map(() => false),
      checkList1_gp: param_gp.map(() => false),
      checkList2_acdc: [],
      checkList2_gp: [],
      ips: [{ ip: "192.168.10.222" }, { ip: "255.0.0.0" }, { ip: "0.0.0.0" }],
    };
  },
  created() {
    // 在 created 钩子中初始化数据
    this.checkList2_acdc = this.acdc_alarms.map(() => false);
    this.checkList2_gp = this.gp_alarms.map(() => false);
  },
  computed: {
    hasPermission() {
      return this.$store.state.user.downloadFlag == 1;
    },
    acdc_alarms() {
      let arr = [];
      for (let i = 0, j = props1.length; i < j; i++) {
@@ -317,6 +382,7 @@
        if (item.childrenCount) {
          for (let m = 0, n = item.childrenCount; m < n; m++) {
            let idx = m + 1;
            let mIdx = Math.floor(m / 25);
            arr.push({
              label: item.label.replace("N", idx),
              key0: item.key0,
@@ -324,6 +390,8 @@
              flag: item.flag,
              childrenCount: item.childrenCount,
              tip: item.tip.replace("N", idx),
              index: m,
              mainIdx: i + "_" + mIdx,
            });
          }
        } else {
@@ -339,6 +407,7 @@
        if (item.childrenCount) {
          for (let m = 0, n = item.childrenCount; m < n; m++) {
            let idx = m + 1;
            let mIdx = Math.floor(m / 25);
            arr.push({
              label: item.label.replace("N", idx),
              key0: item.key0,
@@ -346,6 +415,8 @@
              flag: item.flag,
              childrenCount: item.childrenCount,
              tip: item.tip.replace("N", idx),
              index: m,
              mainIdx: i + "_" + mIdx,
            });
          }
        } else {
@@ -404,31 +475,78 @@
        .catch(() => {});
    },
    batchYXSet(type) {
      // let props = propList
      //   .filter((v, i) => checkList[i])
      //   .map((v) => {
      //     return {
      //       key1: v.key1,
      //       flag: v.flag,
      //     };
      //   });
      // let params = {};
      // props.forEach((v) => {
      //   // TODO
      //   params[v.key1] = 22;
      //   params[v.flag] = 1;
      // });
      // console.log("批量设定的属性有", props);
      // updateYC(params)
      //   .then((res) => {
      //     let { code, data, msg } = res.data;
      //     if (code && data) {
      //       console.log(data);
      //     }
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
      this.$confirm("确认批量执行?", "提示", {
        type: "warning",
      })
        .then(() => {
          let loading = this.$layer.loading();
          let params = {};
          let checkList = this["checkList2_" + type];
          // 从被选中(打勾)的序号列表中 把对应同一个字段的合并为一个序号（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 = type + "_alarm_" + v.i;
              let $el = this.$refs[refName];
              let {
                option: { key1, flag, childrenCount, index, mainIdx },
              } = $el;
              if (childrenCount) {
                obj[mainIdx] = obj[mainIdx] || { $el, indexs: [] };
                obj[mainIdx].indexs.push(index);
              } else {
                arr.push({ $el });
              }
            });
          Object.keys(obj).forEach((v) => {
            arr.push(obj[v]);
          });
          arr.forEach((v) => {
            if (v.indexs) {
              let {
                datas,
                option: { key1, flag, index },
              } = v.$el;
              // 需要处理同一个字段的值
              // 通过index获得它在flag数组中的index
              let propIdx = Math.floor(index / 25);
              let prop_key1 = key1[propIdx];
              let prop_flag = flag[propIdx];
              let _key1 = datas[prop_key1];
              let _flag = datas[prop_flag];
              params[prop_key1] = setBitAtPositions(
                _key1,
                v.indexs.map((vv) => vv % 25),
                1
              );
              params[prop_flag] = setBitAtPositions(
                _flag,
                v.indexs.map((vv) => vv % 25),
                1
              );
            } else {
              params[v.$el.option.key1] = 1;
              params[v.$el.option.flag] = 1;
            }
          });

          updateYX(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");

 src/views/powerCabinetControl/js/apis.js

@@ -10,4 +10,16 @@
    url: "ckPowerDevSet/update",
    data
  });
};

/**
 * 测控电源设备 遥信量设置
 * @returns
 */
export const updateYX = (data) => {
  return axios({
    method: "POST",
    url: "ckPowerDevSignalSet/update",
    data
  });
};

 src/views/powerCabinetHisalarm/index.vue

New file
@@ -0,0 +1,450 @@
<template>
  <div class="p-main flex-c">
    <div class="btn-grp">
      <el-button class="btn-alarm levelall" @click="changeLevel(0)"
        >全部告警
        <div class="num">{{ almCount[0] }}</div>
      </el-button>
      <el-button class="btn-alarm level0" @click="changeLevel(3)"
        >紧急
        <div class="num">{{ almCount[3] }}</div>
      </el-button>
      <el-button class="btn-alarm level1" @click="changeLevel(2)"
        >重大
        <div class="num">{{ almCount[2] }}</div>
      </el-button>
      <el-button class="btn-alarm level2" @click="changeLevel(1)"
        >一般
        <div class="num">{{ almCount[1] }}</div>
      </el-button>
      <el-button class="btn-alarm type" @click="changeType(1)"
        >交流配电柜
        <div class="num">{{ almCount["ac"] }}</div>
      </el-button>
      <el-button class="btn-alarm type" @click="changeType(2)"
        >直流配电柜
        <div class="num">{{ almCount["dc"] }}</div>
      </el-button>
      <el-button class="btn-alarm type" @click="changeType(3)"
        >高频开关电源柜
        <div class="num">{{ almCount["gc"] }}</div>
      </el-button>
    </div>
    <panel class="panel p-content">
      <div class="panel-content flex-c">
        <div class="search">
          <div class="s-item">
            <div class="label">所属设备</div>
            <div class="value">
              <el-select
                v-model="devType"
                class="dark"
                size="mini"
                @change="getList"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, idx) in devtypes"
                  :key="'type_' + idx"
                  :label="item"
                  :value="idx"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- <div class="s-item">
            <div class="label">告警名称</div>
            <div class="value">
              <el-select
                v-model="almName"
                class="dark"
                size="mini"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, idx) in almNames"
                  :key="'name_' + idx"
                  :label="item"
                  :value="idx"
                >
                </el-option>
              </el-select>
            </div>
          </div> -->
          <div class="s-item">
            <div class="label">告警等级</div>
            <div class="value">
              <el-select
                v-model="almLevel"
                class="dark"
                size="mini"
                @change="getList"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, idx) in almLevels"
                  :key="'level_' + idx"
                  :label="item"
                  :value="idx"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="s-item">
            <div class="label">告警开始时间</div>
            <div class="value">
              <el-date-picker
                v-model="date1"
                size="mini"
                class="time_box dark"
                type="date"
                placeholder="选择日期"
                @change="getList"
                value-format="yyyy-MM-dd"
              ></el-date-picker
              >-
              <el-date-picker
                v-model="date2"
                size="mini"
                class="time_box dark"
                type="date"
                placeholder="选择日期"
                @change="getList"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </div>
          <div class="s-item">
            <gradient-btn size="sm" @click="getList">查询</gradient-btn>
          </div>
        </div>
        <div class="table-wrap">
          <el-table
            id="batteryrTimequeryTable"
            stripe
            size="small"
            :data="table.datas"
            height="100%"
            class="table-dark"
            tooltip-effect="light"
          >
            <el-table-column
              label="序号"
              type="index"
              width="80"
            ></el-table-column>
            <el-table-column
              v-for="header in table.headers"
              :key="header.prop"
              :prop="header.prop"
              :label="header.label"
              :width="header.width"
              :min-width="header.minWidth"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column label="确认告警" width="120" align="center">
              <template slot-scope="scope">
                <el-checkbox
                  :value="!!scope.row.almIsConfirmed"
                  disabled
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="cztime"
              fixed="right"
              width="240px"
              align="center"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  class="yellow"
                  size="mini"
                  @click="confirmAlarm(scope.row)"
                  >确认告警</el-button
                >
                <!-- <el-button class="l-green" disabled="" size="mini"
                  >告警详情</el-button
                > -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部分页 -->
        <el-pagination
          class="pages center dark"
          :current-page="pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </panel>
  </div>
</template>

<script>
import Panel from "@/components/panel.vue";
import gradientBtn from "@/components/gradientBtn.vue";

import createWs from "@/assets/js/websocket/plus";
const WSMixin = createWs("ckPowerDevAlarmHisCount");

import { getList } from "./js/apis";
export default {
  name: "",

  mixins: [WSMixin],
  components: {
    Panel,
    gradientBtn,
  },
  data() {
    return {
      almCount: {},
      pageNum: 1,
      pageSize: 10,
      devType: 0,
      almLevel: 0,
      date1: "",
      date2: "",
      devtypes: ["全部", "交流配电柜", "直流配电柜", "高频开关电源柜"],
      almLevels: ["全部", "一般", "重大", "紧急"],
      total: 0,
      table: {
        headers: [
          {
            prop: "devName",
            label: "设备名称",
            minWidth: 180,
          },
          {
            prop: "almName",
            label: "告警名称",
            width: 180,
          },
          {
            prop: "almLevelStr",
            label: "告警等级",
            width: 120,
          },
          {
            prop: "almStartTime",
            label: "告警开始时间",
            width: 180,
          },
          {
            prop: "almConfirmedTime",
            label: "告警确认时间",
            width: 180,
          },
          // {
          //   prop: "almIsConfirmed",
          //   label: "确认告警",
          //   width: 120,
          // },
        ],
        datas: [],
      },
    };
  },
  methods: {
    changeLevel(level) {
      this.almLevel = level;
      this.getList();
    },
    changeType(value) {
      this.devType = value;
      this.getList();
    },
    onWSMessage1(res) {
      let {
        data: { list, total },
      } = JSON.parse(res.data);
      this.table.datas = list.map((v) => {
        v.devName = ["", "交流配电柜", "直流配电柜", "高频开关电源柜"][
          v.devType
        ];
        v.almLevelStr = ["", "一般", "重大", "紧急"][v.almLevel];
        return v;
      });
      this.total = total;
    },
    onWSMessage1(res) {
      let { data } = JSON.parse(res.data);
      this.almCount = data;
    },
    getList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        devType: this.devType,
        almStartTime: this.date1
          ? this.date1 + " 00:00:00"
          : "2023-01-01 00:00:00",
        almStartTime1: this.date2
          ? this.date2 + " 23:59:59"
          : new Date().format("yyyy-MM-dd hh:mm:ss"),
        almLevel: this.almLevel,
      };
      console.log("=====9=", params, JSON.stringify(params));
      // this.SOCKET1.send(JSON.stringify(params));
      getList(params)
        .then((res) => {
          let {
            code,
            data: { list, total },
          } = res.data;
          let list1 = [];
          let total1 = 0;
          if (code) {
            list1 = list.map((v) => {
              v.devName = ["", "交流配电柜", "直流配电柜", "高频开关电源柜"][
                v.devType
              ];
              v.almLevelStr = ["", "一般", "重大", "紧急"][v.almLevel];
              return v;
            });
            total1 = total;
          }
          this.table.datas = list1;
          this.total = total1;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    confirmAlarm(row) {
      confirmAlarm(row.almId)
        .then((res) => {
          let { code, data } = res.data;
          if (code && data) {
            console.log(data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 展示数据数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    // 翻页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
  },

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

<style scoped lang="less">
.p-main {
  height: 100%;
  .btn-grp {
    .btn-alarm {
      width: 160px;
      height: 30px;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      padding: 0 6px;
      border: 0 none;
      /deep/ span {
        display: flex;
        color: inherit;
        justify-content: space-between;
        align-items: center;
        .num {
          background: #fff;
          border-radius: 4px;
          padding: 2px 16px;
        }
      }
      &.levelall {
        background: #78eef8;

        color: #011f39;
        .num {
          background: #011f39;
          color: #78eef8;
        }
      }
      &.level0 {
        background: #ff3801;
        .num {
          color: #ff3801;
        }
      }
      &.level1 {
        background: #f69f40;
        .num {
          color: #f69f40;
        }
      }
      &.level2 {
        background: #4871e3;
        .num {
          color: #4871e3;
        }
      }

      &.type {
        background: #4871e3;
        width: auto;
        .num {
          margin-left: 1em;
          color: #4871e3;
        }
      }
    }
  }
  .p-content {
    flex: 1;
    margin-top: 4px;
    /deep/ .content {
      background: #011f39;
    }
    .panel-content {
      height: 100%;
      padding: 10px;
    }
    .search {
      display: flex;
      justify-content: space-around;
      .s-item {
        display: flex;
        align-items: center;
        .label {
          color: #78eef8;
          &::after {
            content: ":";
          }
          margin-right: 0.4em;
        }
      }
    }
    .table-wrap {
      flex: 1;
      margin-top: 6px;
      margin-bottom: 6px;
    }
  }

  /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #2155ff;
  }
}
</style>

 src/views/powerCabinetHisalarm/js/apis.js

New file
@@ -0,0 +1,12 @@
import axios from "axios";

/**
 * 查询 分页
 */
export const getList = (data) => {
  return axios({
    method: "POST",
    url: "ckPowerDevAlarmHistory/getPage",
    data
  });
};

 src/views/powerCabinetRtalarm/index.vue

@@ -1,24 +1,24 @@
<template>
  <div class="p-main flex-c">
    <div class="btn-grp">
      <el-button class="btn-alarm levelall"
      <el-button class="btn-alarm levelall" @click="changeLevel(0)"
        >全部告警
        <div class="num">25</div>
        <div class="num">{{ almCount[0] }}</div>
      </el-button>
      <el-button class="btn-alarm level0">
      <el-button class="btn-alarm level0" @click="changeLevel(3)">
        <div class="a">紧急</div>

        <div class="num">10</div>
        <div class="num">{{ almCount[3] }}</div>
      </el-button>
      <el-button class="btn-alarm level1"
      <el-button class="btn-alarm level1" @click="changeLevel(2)"
        >重大

        <div class="num">7</div>
        <div class="num">{{ almCount[2] }}</div>
      </el-button>
      <el-button class="btn-alarm level2"
      <el-button class="btn-alarm level2" @click="changeLevel(1)"
        >一般

        <div class="num">8</div>
        <div class="num">{{ almCount[1] }}</div>
      </el-button>
    </div>
    <panel class="panel p-content">
@@ -27,12 +27,18 @@
          <div class="s-item">
            <div class="label">所属设备</div>
            <div class="value">
              <el-select v-model="value" class="dark" size="mini" placeholder="请选择">
              <el-select
                v-model="devType"
                class="dark"
                size="mini"
                @change="sendMessage1"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, idx) in devtypes"
                  :key="'type_' + idx"
                  :label="item"
                  :value="idx"
                >
                </el-option>
              </el-select>
@@ -41,12 +47,19 @@
          <div class="s-item">
            <div class="label">告警名称</div>
            <div class="value">
              <el-select v-model="value"  class="dark" size="mini" placeholder="请选择">
              <el-select
                v-model="almName"
                class="dark"
                size="mini"
                filterable
                @change="sendMessage1"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, idx) in almNames"
                  :key="'name_' + idx"
                  :label="item"
                  :value="idx"
                >
                </el-option>
              </el-select>
@@ -55,18 +68,24 @@
          <div class="s-item">
            <div class="label">告警等级</div>
            <div class="value">
              <el-select v-model="value"  class="dark" size="mini" placeholder="请选择">
              <el-select
                v-model="almLevel"
                class="dark"
                size="mini"
                @change="sendMessage1"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, idx) in almLevels"
                  :key="'level_' + idx"
                  :label="item"
                  :value="idx"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="s-item">
          <!-- <div class="s-item">
            <div class="label">告警开始时间</div>
            <div class="value">
              <el-date-picker
@@ -94,7 +113,7 @@
          </div>
          <div class="s-item">
            <gradient-btn size="sm">查询</gradient-btn>
          </div>
          </div> -->
        </div>
        <div class="table-wrap">
          <el-table
@@ -121,6 +140,14 @@
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column label="确认告警" width="120" align="center">
              <template slot-scope="scope">
                <el-checkbox
                  :value="!!scope.row.almIsConfirmed"
                  disabled
                ></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="cztime"
              fixed="right"
@@ -129,10 +156,16 @@
              label="操作"
            >
              <template slot-scope="scope">
                <el-button class="yellow" size="mini">确认告警</el-button>
                <el-button class="l-green" disabled="" size="mini"
                  >告警详情</el-button
                <el-button
                  class="yellow"
                  size="mini"
                  @click="confirmAlarm(scope.row)"
                  :disabled="!hasPermission"
                  >确认告警</el-button
                >
                <!-- <el-button class="l-green" disabled="" size="mini"
                  >告警详情</el-button
                > -->
              </template>
            </el-table-column>
          </el-table>
@@ -140,7 +173,7 @@
        <!-- 底部分页 -->
        <el-pagination
          class="pages center dark"
          :current-page="pageCurr"
          :current-page="pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50, 100]"
@@ -156,133 +189,133 @@
<script>
import Panel from "@/components/panel.vue";
import gradientBtn from "@/components/gradientBtn.vue";

import createWs from "@/assets/js/websocket/plus";
const WSMixin = createWs("ckPowerDevAlarm", "ckPowerDevAlarmCount");

import { confirmAlarm } from "./js/apis";
export default {
  name: "",

  mixins: [WSMixin],
  components: {
    Panel,
    gradientBtn,
  },
  data() {
    return {
      valueTime1: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      pageCurr: 1,
      almCount: {},
      pageNum: 1,
      pageSize: 10,
      devType: 0,
      almName: "",
      almLevel: 0,
      valueTime1: "",
      devtypes: ["全部", "交流配电柜", "直流配电柜", "高频开关电源柜"],
      almLevels: ["全部", "一般", "重大", "紧急"],
      almNames: [
        
      ],
      total: 0,
      table: {
        headers: [
          {
            prop: "a",
            prop: "devName",
            label: "设备名称",
            minWidth: 320,
            minWidth: 180,
          },
          {
            prop: "b",
            prop: "almName",
            label: "告警名称",
            width: 180,
          },
          {
            prop: "almLevelStr",
            label: "告警等级",
            width: 120,
          },
          {
            prop: "c",
            label: "告警等级",
            width: 162,
          },
          {
            prop: "d",
            prop: "almStartTime",
            label: "告警开始时间",
            width: 180,
          },
          {
            prop: "e",
            prop: "almConfirmedTime",
            label: "告警确认时间",
            width: 180,
          },
          {
            prop: "f",
            label: "确认告警",
            width: 120,
          },
          // {
          //   prop: "almIsConfirmed",
          //   label: "确认告警",
          //   width: 120,
          // },
        ],
        datas: [
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
        ],
        datas: [],
      },
    };
  },
  methods: {
    getList() {},
    changeLevel(level) {
      this.almLevel = level;
      this.sendMessage1();
    },
    onWSMessage1(res) {
      let {
        data: { list, total },
      } = JSON.parse(res.data);
      this.table.datas = list.map((v) => {
        v.devName = ["", "交流配电柜", "直流配电柜", "高频开关电源柜"][
          v.devType
        ];
        v.almLevelStr = ["", "一般", "重大", "紧急"][v.almLevel];
        return v;
      });
      this.total = total;
    },
    onWSMessage2(res) {
      let { data } = JSON.parse(res.data);
      this.almCount = data;
    },
    onWSOpen1() {
      this.$nextTick(() => {
        this.sendMessage1();
      });
    },
    sendMessage1() {
      if (!this.isWSOpen1) {
        return false;
      }
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        devType: this.devType,
        almName: this.almName,
        almLevel: this.almLevel,
      };
      //console.log("=====9=", params, JSON.stringify(params));
      this.SOCKET1.send(JSON.stringify(params));
    },
    confirmAlarm(row) {
      confirmAlarm(row.almId)
        .then((res) => {
          let { code, data } = res.data;
          if (code && data) {
            console.log(data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 展示数据数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
      this.sendMessage1();
    },
    // 翻页
    handleCurrentChange(val) {
      this.pageCurr = val;
      this.getList();
      this.pageNum = val;
      this.sendMessage1();
    },
  },

@@ -361,7 +394,7 @@
        .label {
          color: #78eef8;
          &::after {
            content: ':';
            content: ":";
          }
          margin-right: 0.4em;
        }
@@ -373,5 +406,9 @@
      margin-bottom: 6px;
    }
  }

  /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #2155ff;
  }
}
</style>

 src/views/powerCabinetRtalarm/js/apis.js

New file
@@ -0,0 +1,12 @@
import axios from "axios";

/**
 * 确认告警
 */
export const confirmAlarm = (id) => {
  return axios({
    method: "POST",
    url: "ckPowerDevAlarm/updateForConfirm",
    params: { id },
  });
};

 src/views/realTime/index.vue

@@ -14,13 +14,13 @@
                <div class="card has-title">
                  <div class="card-title">第1路交流三相输入电压(V)</div>
                  <div class="card-content">
                    <bar1 ref="bar1"></bar1>
                    <bar1 ref="bar1" unit="V"></bar1>
                  </div>
                </div>
                <div class="card has-title">
                  <div class="card-title">第2路交流三相输入电压(V)</div>
                  <div class="card-content">
                    <bar1 ref="bar2"></bar1>
                    <bar1 ref="bar2" unit="V"></bar1>
                  </div>
                </div>
              </div>
@@ -69,6 +69,7 @@
                      :level="item.level"
                      :name="item.label"
                      :flag="getValue(item)"
                      :childrenCount="item.childrenCount"
                      @click.native="cardChildShow(item)"
                    ></alarm-card>
                  </el-col>
@@ -85,6 +86,7 @@
                      :level="item.level"
                      :name="item.label"
                      :flag="getValue(item)"
                      :childrenCount="item.childrenCount"
                      @click.native="cardChildShow(item)"
                    ></alarm-card>
                  </el-col>
@@ -102,13 +104,13 @@
                <div class="card has-title">
                  <div class="card-title">第1路交流三相输入电压(V)</div>
                  <div class="card-content">
                    <bar1 ref="bar3"></bar1>
                    <bar1 ref="bar3" unit="V"></bar1>
                  </div>
                </div>
                <div class="card has-title">
                  <div class="card-title">三相交流输出电压(V)</div>
                  <div class="card-content">
                    <bar1 ref="bar4"></bar1>
                    <bar1 ref="bar4" unit="V"></bar1>
                  </div>
                </div>
              </div>
@@ -157,6 +159,7 @@
                      :level="item.level"
                      :name="item.label"
                      :flag="getValue(item)"
                      :childrenCount="item.childrenCount"
                      @click.native="cardChildShow(item)"
                    ></alarm-card>
                  </el-col>
@@ -254,6 +257,7 @@
                        :level="item.level"
                        :name="item.label"
                        :flag="getValue(item)"
                        :childrenCount="item.childrenCount"
                        @click.native="cardChildShow(item)"
                      ></alarm-card>
                    </el-col>
@@ -272,6 +276,7 @@
                      :level="item.level"
                      :name="item.label"
                      :flag="getValue(item)"
                      :childrenCount="item.childrenCount"
                      @click.native="cardChildShow(item)"
                    ></alarm-card>
                  </el-col>

 src/views/switchControl/index.vue

@@ -2,19 +2,31 @@
  <div class="p-contain">
    <panel class="panel side" title="通信电源柜线路选择">
      <div class="content">
        <div class="list-item AC active" >
        <div
          :class="['list-item', 'AC', { active: currIdx == 0 }]"
          @click="changeTab(0)"
        >
          <div class="i"></div>
          <div class="name">交流进线1</div>
        </div>
        <div class="list-item AC">
        <div
          :class="['list-item', 'AC', { active: currIdx == 1 }]"
          @click="changeTab(1)"
        >
          <div class="i"></div>
          <div class="name">交流进线2</div>
        </div>
        <div class="list-item DC">
        <div
          :class="['list-item', 'DC', { active: currIdx == 2 }]"
          @click="changeTab(2)"
        >
          <div class="i"></div>
          <div class="name">直流进线1</div>
        </div>
        <div class="list-item DC">
        <div
          :class="['list-item', 'DC', { active: currIdx == 3 }]"
          @click="changeTab(3)"
        >
          <div class="i"></div>
          <div class="name">直流进线2</div>
        </div>
@@ -50,8 +62,13 @@
              label="操作"
            >
              <template slot-scope="scope">
                <el-button type="primary" size="mini">合闸</el-button>
                <el-button disabled="" type="primary" size="mini"
                <el-button type="primary" :disabled="!hasPermission" size="mini"
                  >合闸</el-button
                >
                <el-button
                  :disabled="!hasPermission"
                  type="primary"
                  size="mini"
                  >分闸</el-button
                >
              </template>
@@ -59,38 +76,42 @@
          </el-table>
        </div>
      </panel>
      <panel class="panel row row1" title="断路器电参量实时参数">
      <panel class="panel row row1" :title="actName + '电参量实时参数'">
        <div class="content">
          <div class="yc-panel">
          <div class="yc-panel" v-if="currIdx == 0 || currIdx == 1">
            <div class="yc-title">三相相电压(V)</div>
            <div class="yc-content">
              <div class="bar-contain">
                <bar1 ref="bar1"></bar1>
                <bar1 ref="bar1" unit="V"></bar1>
              </div>
              <div class="info">
              <!-- <div class="info">
                <div class="label">平均值:</div>
                <div class="value">123V</div>
              </div>
              </div> -->
            </div>
          </div>
          <div class="border">
            <list-card :datas="props1" :cols="1" :rows="4"></list-card>
            <list-card
              :datas="$data[`props${currIdx + 1}`]"
              :cols="1"
              :rows="4"
            ></list-card>
          </div>
          <div class="yc-panel">
            <div class="yc-title">三相相电压(V)</div>
          <div class="yc-panel" v-if="currIdx == 0 || currIdx == 1">
            <div class="yc-title">三相相电流(A)</div>
            <div class="yc-content">
              <div class="bar-contain">
                <bar2 ref="bar2"></bar2>
                <bar2 ref="bar2" unit="A"></bar2>
              </div>
              <div class="info">
              <!-- <div class="info">
                <div class="label">平均值:</div>
                <div class="value">123V</div>
              </div>
                <div class="value">123A</div>
              </div> -->
            </div>
          </div>
          <div class="border">
          <!-- <div class="border">
            <list-card :datas="props2" :cols="1" :rows="4"></list-card>
          </div>
          </div> -->
        </div>
      </panel>
    </div>
@@ -109,43 +130,92 @@
  data() {
    const props1 = [
      {
        label: "AB相线电压(V)",
        label: "1路总有功功率(W)",
        key: "",
      },
      {
        label: "BC相线电压(V)",
        label: "1路交流输入频率(Hz)",
        key: "",
      },
      {
        label: "CA相线电压(V)",
        label: "1路总功率因数",
        key: "",
      },
      {
        label: "线电压平均值(V)",
        label: "1路交流断路器总数量",
        key: "",
      },
    ];
    const props2 = [
      {
        label: "电流不平衡度(%)",
        label: "2路总有功功率(W)",
        key: "",
      },
      {
        label: "零序电流(A)",
        label: "2路交流输入频率(Hz)",
        key: "",
      },
      {
        label: "总有功功率",
        label: "2路总功率因数",
        key: "",
      },
      {
        label: "总功率因数",
        label: "2路交流断路器总数量",
        key: "",
      },
    ];
    const props3 = [
      {
        label: "1路直流电压(V)",
        key: "",
      },
      {
        label: "1路直流电流(A)",
        key: "",
      },
      {
        label: "1路直流断路器总数量",
        key: "",
      },
    ];
    const props4 = [
      {
        label: "2路直流电压(V)",
        key: "",
      },
      {
        label: "2路直流电流(A)",
        key: "",
      },
      {
        label: "2路直流断路器总数量",
        key: "",
      },
    ];
    // const props2 = [
    //   {
    //     label: "电流不平衡度(%)",
    //     key: "",
    //   },
    //   {
    //     label: "零序电流(A)",
    //     key: "",
    //   },
    //   {
    //     label: "总有功功率",
    //     key: "",
    //   },
    //   {
    //     label: "总功率因数",
    //     key: "",
    //   },
    // ];
    return {
      currIdx: 0,
      props1,
      props2,
      props3,
      props4,
      table: {
        headers: [
          {
@@ -204,24 +274,6 @@
            c: 3,
            d: 4,
          },
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
          {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
          },
        ],
      },
    };
@@ -233,7 +285,19 @@
    bar1,
    bar2,
  },
  methods: {},
  computed: {
    hasPermission() {
      return this.$store.state.user.downloadFlag == 1;
    },
    actName() {
      return ["交流进线1", "交流进线2", "直流进线1", "直流进线2"][this.currIdx];
    },
  },
  methods: {
    changeTab(idx) {
      this.currIdx = idx;
    },
  },

  mounted() {},
};
@@ -259,6 +323,7 @@
        border-radius: 6px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;

        .i {
          width: 40px;
@@ -377,12 +442,12 @@
      display: flex;
      justify-content: space-between;
      .value {
        background: #0C4D77;;
        background: #0c4d77;
        width: 60px;
        border-radius: 4px;
        padding: 2px 4px;
        color: #78eef8;
        border: 1px #78EEF8 solid;
        border: 1px #78eef8 solid;
      }
    }
  }
@@ -393,6 +458,11 @@
    background: #011f39;
    padding: 46px 8px;
    margin-left: 10px;
    &:only-child {
      margin-left: auto;
      margin-right: auto;
      flex: 0 0 600px;
    }
  }
}
</style>

 src/views/testRecord/details.vue

New file
@@ -0,0 +1,286 @@
<template>
  <div class="p-main flex-c">
    <!-- 状态栏 -->
    <div class="info flex-r">
      <div class="info-item">
        <div class="label">断路器类型</div>
        <div class="value">交流断路器</div>
      </div>
      <div class="info-item">
        <div class="label">断路器名称</div>
        <div class="value">DK11</div>
      </div>
      <div class="info-item">
        <div class="label">动作总次数</div>
        <div class="value">13</div>
      </div>
      <div class="info-item">
        <div class="label">动作日期</div>
        <div class="value">2023-12-08</div>
      </div>
      <div class="info-item">
        <div class="label">第一次动作时间</div>
        <div class="value">09:58:23</div>
      </div>
      <div class="info-item">
        <div class="label">第一次动作</div>
        <div class="value">合闸</div>
      </div>
      <div class="info-item">
        <div class="label">最后一次动作时间</div>
        <div class="value">10:00:03</div>
      </div>
      <div class="info-item">
        <div class="label">最后一次动作</div>
        <div class="value">分闸</div>
      </div>
    </div>
    <!-- 图表 -->
    <div class="chart-contain flex-r">
      <div class="name-panel">
        <div class="row">
          <div class="">断路器名称</div>
          <div class="switch-name">DK11</div>
        </div>
        <div class="row">
          <div class="">合闸</div>
          <div class="num">7</div>
        </div>
        <div class="row">
          <div class="">分闸</div>
          <div class="num">6</div>
        </div>
      </div>
      <div class="chart-wrap">
        <step-line></step-line>
      </div>
    </div>
    <!-- 表格 -->
    <panel class="panel p-content">
      <div class="panel-content flex-c">
        <div class="search">
          <div class="s-item">
            <div class="label">动作类型</div>
            <div class="value">
              <el-select
                v-model="devType"
                class="dark"
                size="mini"
                @change="getList"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, idx) in devtypes"
                  :key="'type_' + idx"
                  :label="item"
                  :value="idx"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="s-item">
            <div class="label">操作终端</div>
            <div class="value">
              <el-select
                v-model="almLevel"
                class="dark"
                size="mini"
                @change="getList"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, idx) in almLevels"
                  :key="'level_' + idx"
                  :label="item"
                  :value="idx"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="s-item">
            <gradient-btn size="sm" @click="getList">导出</gradient-btn>
          </div>
        </div>
        <div class="table-wrap">
          <el-table
            id="batteryrTimequeryTable"
            stripe
            size="small"
            :data="table.datas"
            height="100%"
            class="table-dark"
            tooltip-effect="light"
          >
            <el-table-column
              label="序号"
              type="index"
              width="80"
            ></el-table-column>
            <el-table-column
              v-for="header in table.headers"
              :key="header.prop"
              :prop="header.prop"
              :label="header.label"
              :width="header.width"
              :min-width="header.minWidth"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </panel>
  </div>
</template>

<script>
import Panel from "@/components/panel.vue";
import gradientBtn from "@/components/gradientBtn.vue";
import stepLine from '@/components/stepLine';

export default {
  name: "",

  components: {
    Panel,
    gradientBtn,
    stepLine,
  },
  data() {
    return {
      devType: 0,
      almLevel: 0,
      devtypes: ["全部", "交流配电柜", "直流配电柜", "高频开关电源柜"],
      almLevels: ["全部", "一般", "重大", "紧急"],
      table: {
        headers: [
          {
            prop: "devName",
            label: "断路器位置",
            minWidth: 180,
          },
          {
            prop: "almName",
            label: "断路器名称",
            width: 180,
          },
          {
            prop: "almLevelStr",
            label: "测控日期",
            width: 120,
          },
          {
            prop: "almStartTime",
            label: "动作总次数",
            width: 180,
          },
          {
            prop: "almConfirmedTime",
            label: "合闸次数",
            width: 180,
          },
          {
            prop: "almIsConfirmed",
            label: "分闸次数",
            width: 120,
          },
        ],
        datas: [
          {
            devName: 1,
          },
        ],
      },
    };
  },
  methods: {},

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

<style scoped lang="less">
.p-main {
  height: 100%;

  .info {
    background: #00253f;
    padding: 10px;
    justify-content: space-between;
  }
  .info-item {
    display: flex;
    .label {
      margin-right: 0.4em;
      &::after {
        content: ":";
      }
    }
  }
  .chart-contain {
    margin-top: 8px;
    height: 300px;
    .name-panel {
      background: #00253f;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding: 10px;
      margin-right: 10px;
      .row {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .switch-name {
        color: #78EEF8;
        font-size: 24px;
        font-weight: 700;
      }
      .num {
        color: #78eef8;
        font-size: 16px;
        font-weight: 700;
      }
    }
    .chart-wrap {
      flex: 1;
      background: #00253f;
    }
  }
  .p-content {
    flex: 1;
    margin-top: 4px;
    /deep/ .content {
      background: #011f39;
    }
    .panel-content {
      height: 100%;
      padding: 10px;
    }
    .search {
      display: flex;
      justify-content: space-around;
      .s-item {
        display: flex;
        align-items: center;
        .label {
          color: #78eef8;
          &::after {
            content: ":";
          }
          margin-right: 0.4em;
        }
      }
    }
    .table-wrap {
      flex: 1;
      margin-top: 6px;
      margin-bottom: 6px;
    }
  }
}
</style>

 src/views/testRecord/index.vue

New file
@@ -0,0 +1,391 @@
<template>
  <div class="p-main flex-c">
    <panel class="panel p-content">
      <div class="panel-content flex-c">
        <div class="search">
          <div class="s-item">
            <div class="label">测控线路</div>
            <div class="value">
              <el-select
                v-model="devType"
                class="dark"
                size="mini"
                @change="getList"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, idx) in devtypes"
                  :key="'type_' + idx"
                  :label="item"
                  :value="idx"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="s-item">
            <div class="label">断路器名称</div>
            <div class="value">
              <el-select
                v-model="almLevel"
                class="dark"
                size="mini"
                @change="getList"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, idx) in almLevels"
                  :key="'level_' + idx"
                  :label="item"
                  :value="idx"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="s-item">
            <div class="label">测控日期</div>
            <div class="value">
              <el-date-picker
                v-model="date1"
                size="mini"
                class="time_box dark"
                type="date"
                placeholder="选择日期"
                @change="getList"
                value-format="yyyy-MM-dd"
              ></el-date-picker
              >-
              <el-date-picker
                v-model="date2"
                size="mini"
                class="time_box dark"
                type="date"
                placeholder="选择日期"
                @change="getList"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
          </div>
          <div class="s-item">
            <gradient-btn size="sm" @click="getList">查询</gradient-btn>
          </div>
        </div>
        <div class="table-wrap">
          <el-table
            id="batteryrTimequeryTable"
            stripe
            size="small"
            :data="table.datas"
            height="100%"
            class="table-dark"
            tooltip-effect="light"
          >
            <el-table-column
              label="序号"
              type="index"
              width="80"
            ></el-table-column>
            <el-table-column
              v-for="header in table.headers"
              :key="header.prop"
              :prop="header.prop"
              :label="header.label"
              :width="header.width"
              :min-width="header.minWidth"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column
              prop="cztime"
              fixed="right"
              width="240px"
              align="center"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  class="yellow"
                  size="mini"
                  @click="details(scope.row)"
                  >详情</el-button
                >
                <!-- <el-button class="l-green" disabled="" size="mini"
                  >告警详情</el-button
                > -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部分页 -->
        <el-pagination
          class="pages center dark"
          :current-page="pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </panel>
  </div>
</template>

<script>
import Panel from "@/components/panel.vue";
import gradientBtn from "@/components/gradientBtn.vue";

import createWs from "@/assets/js/websocket/plus";
const WSMixin = createWs("ckPowerDevAlarmHisCount");

import { getList } from "./js/apis";
export default {
  name: "",

  mixins: [WSMixin],
  components: {
    Panel,
    gradientBtn,
  },
  data() {
    return {
      almCount: {},
      pageNum: 1,
      pageSize: 10,
      devType: 0,
      almLevel: 0,
      date1: "",
      date2: "",
      devtypes: ["全部", "交流配电柜", "直流配电柜", "高频开关电源柜"],
      almLevels: ["全部", "一般", "重大", "紧急"],
      total: 0,
      table: {
        headers: [
          {
            prop: "devName",
            label: "断路器位置",
            minWidth: 180,
          },
          {
            prop: "almName",
            label: "断路器名称",
            width: 180,
          },
          {
            prop: "almLevelStr",
            label: "测控日期",
            width: 120,
          },
          {
            prop: "almStartTime",
            label: "动作总次数",
            width: 180,
          },
          {
            prop: "almConfirmedTime",
            label: "合闸次数",
            width: 180,
          },
          {
            prop: "almIsConfirmed",
            label: "分闸次数",
            width: 120,
          },
        ],
        datas: [
          {
            devName: 1,
          },
        ],
      },
    };
  },
  methods: {
    details() {
      this.$router.push("/test-record/details");
    },
    onWSMessage1(res) {
      let {
        data: { list, total },
      } = JSON.parse(res.data);
      this.table.datas = list.map((v) => {
        v.devName = ["", "交流配电柜", "直流配电柜", "高频开关电源柜"][
          v.devType
        ];
        v.almLevelStr = ["", "一般", "重大", "紧急"][v.almLevel];
        return v;
      });
      this.total = total;
    },
    onWSMessage1(res) {
      let { data } = JSON.parse(res.data);
      this.almCount = data;
    },
    getList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        devType: this.devType,
        almStartTime: this.date1
          ? this.date1 + " 00:00:00"
          : "2023-01-01 00:00:00",
        almStartTime1: this.date2
          ? this.date2 + " 23:59:59"
          : new Date().format("yyyy-MM-dd hh:mm:ss"),
        almLevel: this.almLevel,
      };
      console.log("=====9=", params, JSON.stringify(params));
      // this.SOCKET1.send(JSON.stringify(params));
      getList(params)
        .then((res) => {
          let {
            code,
            data: { list, total },
          } = res.data;
          let list1 = [];
          let total1 = 0;
          if (code) {
            list1 = list.map((v) => {
              v.devName = ["", "交流配电柜", "直流配电柜", "高频开关电源柜"][
                v.devType
              ];
              v.almLevelStr = ["", "一般", "重大", "紧急"][v.almLevel];
              return v;
            });
            total1 = total;
          }
          this.table.datas = list1;
          this.total = total1;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    confirmAlarm(row) {
      confirmAlarm(row.almId)
        .then((res) => {
          let { code, data } = res.data;
          if (code && data) {
            console.log(data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 展示数据数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    // 翻页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
  },

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

<style scoped lang="less">
.p-main {
  height: 100%;
  .btn-grp {
    .btn-alarm {
      width: 160px;
      height: 30px;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      padding: 0 6px;
      border: 0 none;
      /deep/ span {
        display: flex;
        color: inherit;
        justify-content: space-between;
        align-items: center;
        .num {
          background: #fff;
          border-radius: 4px;
          padding: 2px 16px;
        }
      }
      &.levelall {
        background: #78eef8;

        color: #011f39;
        .num {
          background: #011f39;
          color: #78eef8;
        }
      }
      &.level0 {
        background: #ff3801;
        .num {
          color: #ff3801;
        }
      }
      &.level1 {
        background: #f69f40;
        .num {
          color: #f69f40;
        }
      }
      &.level2 {
        background: #4871e3;
        .num {
          color: #4871e3;
        }
      }

      &.type {
        background: #4871e3;
        width: auto;
        .num {
          margin-left: 1em;
          color: #4871e3;
        }
      }
    }
  }
  .p-content {
    flex: 1;
    margin-top: 4px;
    /deep/ .content {
      background: #011f39;
    }
    .panel-content {
      height: 100%;
      padding: 10px;
    }
    .search {
      display: flex;
      justify-content: space-around;
      .s-item {
        display: flex;
        align-items: center;
        .label {
          color: #78eef8;
          &::after {
            content: ":";
          }
          margin-right: 0.4em;
        }
      }
    }
    .table-wrap {
      flex: 1;
      margin-top: 6px;
      margin-bottom: 6px;
    }
  }

  /deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #2155ff;
  }
}
</style>

 src/views/testRecord/js/apis.js

New file
@@ -0,0 +1,12 @@
import axios from "axios";

/**
 * 查询 分页
 */
export const getList = (data) => {
  return axios({
    method: "POST",
    url: "ckPowerDevAlarmHistory/getPage",
    data
  });
};

 src/views/user/addEdit.vue

@@ -7,7 +7,7 @@
        <el-input :disabled="isEdit" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="权限">
        <el-checkbox v-model="form.permission" label="下载权限"></el-checkbox>
        <el-checkbox v-model="form.permission" label="控制权限"></el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button v-if="isEdit" type="primary" @click="update">修改</el-button>