UA 初步自测

he wei

2023-12-23 fc842d9e22aef1946df050257be41b4bfbd838a9

 src/views/disjunctorTestRecord/details.vue

@@ -5,13 +5,26 @@
      <div class="filter-item">
        <div class="label">断路器名称</div>
        <div class="value">
          <el-cascader :options="options" filterable size="mini"></el-cascader>
          <el-cascader
            v-model="breakerId"
            :options="breakerNameList"
            @change="search1"
            filterable
            size="mini"
          ></el-cascader>
        </div>
      </div>
      <div class="filter-item">
        <div class="label">动作日期</div>
        <div class="value">
          <el-date-picker v-model="value1" type="date" size="mini" value-format="yyyy-MM-dd" placeholder="选择日期">
          <el-date-picker
            v-model="date"
            type="date"
            size="mini"
            @change="search1"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
      </div>
@@ -22,36 +35,36 @@
    <!-- 状态栏 -->
    <div class="info flex-r">
      <div class="info-item">
        <div class="label">断路器类型</div>
        <div class="value">交流断路器</div>
        <div class="label">断路器位置</div>
        <div class="value">{{ breakerId[0] }}</div>
      </div>
      <div class="info-item">
        <div class="label">断路器名称</div>
        <div class="value">DK11</div>
        <div class="value">{{ breakerName }}</div>
      </div>
      <div class="info-item">
        <div class="label">动作总次数</div>
        <div class="value">13</div>
        <div class="value">{{ len }}</div>
      </div>
      <div class="info-item">
        <div class="label">动作日期</div>
        <div class="value">2023-12-08</div>
        <div class="value">{{ date }}</div>
      </div>
      <div class="info-item">
        <div class="label">第一次动作时间</div>
        <div class="value">09:58:23</div>
        <div class="value">{{ firstRec["time"] }}</div>
      </div>
      <div class="info-item">
        <div class="label">第一次动作</div>
        <div class="value">合闸</div>
        <div class="value">{{ ["分闸", "合闸"][firstRec["status"]] }}</div>
      </div>
      <div class="info-item">
        <div class="label">最后一次动作时间</div>
        <div class="value">10:00:03</div>
        <div class="value">{{ lastRec["time"] }}</div>
      </div>
      <div class="info-item">
        <div class="label">最后一次动作</div>
        <div class="value">分闸</div>
        <div class="value">{{ ["分闸", "合闸"][lastRec["status"]] }}</div>
      </div>
    </div>
    <!-- 图表 -->
@@ -59,19 +72,19 @@
      <div class="name-panel">
        <div class="row">
          <div class="">断路器名称</div>
          <div class="switch-name">DK11</div>
          <div class="switch-name">{{ breakerName }}</div>
        </div>
        <div class="row">
          <div class="">合闸</div>
          <div class="num">7</div>
          <div class="num">{{ stateCount[1] }}</div>
        </div>
        <div class="row">
          <div class="">分闸</div>
          <div class="num">6</div>
          <div class="num">{{ stateCount[0] }}</div>
        </div>
      </div>
      <div class="chart-wrap">
        <step-line></step-line>
        <step-line ref="stepLine"></step-line>
      </div>
    </div>
    <!-- 表格 -->
@@ -82,23 +95,18 @@
            <div class="label">动作类型</div>
            <div class="value">
              <el-select
                v-model="devType"
                v-model="statusType"
                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-option label="全部" value="All" ></el-option>
                <el-option label="分闸" :value="0" ></el-option>
                <el-option label="合闸" :value="1" ></el-option>
              </el-select>
            </div>
          </div>
          <div class="s-item">
          <!-- <div class="s-item">
            <div class="label">操作终端</div>
            <div class="value">
              <el-select
@@ -117,9 +125,9 @@
                </el-option>
              </el-select>
            </div>
          </div>
          </div> -->
          <div class="s-item">
            <gradient-btn size="sm" @click="getList">导出</gradient-btn>
            <gradient-btn size="sm" @click="exportFile">导出</gradient-btn>
          </div>
        </div>
        <div class="table-wrap">
@@ -127,7 +135,7 @@
            id="batteryrTimequeryTable"
            stripe
            size="small"
            :data="table.datas"
            :data="list2"
            height="100%"
            class="table-dark"
            tooltip-effect="light"
@@ -159,6 +167,14 @@
import gradientBtn from "@/components/gradientBtn.vue";
import stepLine from "@/components/stepLine";

import { getBreakerNamesInGroup } from "@/views/devManager/js/apis";
import props_const from "@/views/powerCabinetControl/js/const_props";
const { getYXParams, getYCParams } = props_const;

import { getListLogs } from "./js/apis";
// 引入导出表格
import { export_json_to_excel, formatJson } from "@/assets/js/exportFile";

export default {
  name: "",

@@ -169,66 +185,227 @@
  },
  data() {
    return {
      devType: 0,
      almLevel: 0,
      devtypes: ["全部", "交流配电柜", "直流配电柜", "高频开关电源柜"],
      almLevels: ["全部", "一般", "重大", "紧急"],
      statusType: 'All',
      list: [],
      breakerId: [],
      date: "",
      breakerNameList: [],
      table: {
        headers: [
          {
            prop: "devName",
            prop: "scope",
            label: "断路器位置",
            minWidth: 180,
          },
          {
            prop: "almName",
            prop: "number",
            label: "断路器名称",
            width: 180,
          },
          {
            prop: "almLevelStr",
            label: "测控日期",
            prop: "time",
            label: "测控时间",
            width: 120,
          },
          {
            prop: "almStartTime",
            label: "动作总次数",
            prop: "opType",
            label: "操作类型",
            width: 180,
          },
          {
            prop: "almConfirmedTime",
            label: "合闸次数",
            width: 180,
          },
          {
            prop: "almIsConfirmed",
            label: "分闸次数",
            width: 120,
          },
        ],
        datas: [
          {
            devName: 1,
          },
        ],
      },
    };
  },
  computed: {
    firstRec() {
      return this.list[0] || {};
    },
    lastRec() {
      return this.list[this.len - 1] || {};
    },
    len() {
      return this.list.length;
    },
    breakerName() {
      let [breakerAddr, breakerName] = this.breakerId;
      if (!breakerName) {
        return "";
      }
      let list = this.breakerNameList.filter((v) => v.label == breakerAddr)[0];
      if (list) {
        list = list["children"];
      } else {
        return "";
      }
      return list.filter((v) => v.value == breakerName)[0]["label"];
    },
    stateCount() {
      let list0 = [],
        list1 = [];
      this.list.forEach((v) => {
        if (v.status == 1) {
          list1.push(v);
        } else {
          list0.push(v);
        }
      });
      return [list0.length, list1.length];
    },
    list2() {
      if (this.statusType == 'All') {
        return this.list;
      }
      return this.list.filter((v) => v.status == this.statusType);
    },
  },
  methods: {
    getList() {},
    search1() {
      if (this.date && this.breakerId[1]) {
        this.search();
      }
    },
    search() {
      console.log(this.breakerId);
      let [breakerAddr, breakerId] = this.breakerId;
      let params = {
        breakerId,
        dayTime: this.date,
      };
      if (!params.breakerId) {
        this.$message.error("请选择断路器名称");
        return false;
      }
      if (!params.dayTime) {
        this.$message.error("请选择动作日期");
        return false;
      }
      let loading = this.$layer.loading();
      getListLogs(params)
        .then((res) => {
          let { code, data } = res.data;
          let list = [];
          if (code && data) {
            list = data.map((v) => {
              v.time = v.createTime.split(" ")[1] || "00:00:00";
              v.opType = v.status == 1 ? '合闸' : '分闸';
              return v;
            });
          }
          this.$layer.close(loading);
          this.list = list;
          this.update();
        })
        .catch((err) => {
          console.log(err);
          this.$layer.close(loading);
        });
    },
    update() {
      let list = this.list;
      let data = list.map((v) => {
        return {
          time: v.time,
          flag: v.status,
        };
      });
      this.$refs.stepLine.setData(data);
    },
    getBreakerNamesInGroup() {
      getBreakerNamesInGroup()
        .then((res) => {
          let list = [];
          let { code, data, data2 } = res.data;
          if (code && data) {
            // console.log(data);
            Object.keys(data2)
              .sort()
              .forEach((v) => {
                list.push({
                  value: v,
                  label: v,
                  children: data2[v].map((vv) => ({
                    value: vv.breakerId,
                    label: vv.breakerName,
                  })),
                });
              });
          }
          this.breakerNameList = list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    refreshFN() {
      let pageFlag = this.$route.query.pageFlag
        ? Number(this.$route.query.pageFlag)
        : 0;
      console.log(pageFlag, "refresh?", this.pageFlag);
      if (pageFlag == this.pageFlag) {
        return false;
      }

      this.pageFlag = pageFlag;

      // 断路器名称
      let breakerId = this.$route.query.breakerId;
      let breakerAddr = this.$route.query.breakerAddr;
      let date = this.$route.query.date;
      if (breakerId) {
        // console.log(this.breakerNameList);
        this.breakerId = [breakerAddr, breakerId];
      }
      if (date) {
        this.date = date;
      }

      this.search();
    },
    // 导出表格
    exportFile() {
      let list = this.list2;
      if (!list.length) {
        this.$message.error("没有数据可导出");
        return false;
      }
      let tHeader = [];
      let filterVal = [];
      this.table.headers.map((item, index) => {
        tHeader.push(item.label);
        filterVal.push(item.prop);
      });
      let excelData = formatJson(filterVal, list);
      let date = this.date;
      let breakerName = this.breakerName;
      let fileName = `${breakerName}_${date}`;
      export_json_to_excel(tHeader, excelData, fileName);
    },
  },

  mounted() {},
  mounted() {
    this.getBreakerNamesInGroup();
  },
};
</script>

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

  .filter {
    padding: 10px;
    display: flex;
    .filter-item {
      margin-right: 2em;
      display: flex;
      align-items: center;
      .label {
        margin-right: 0.4em;
        &::after {
          content: ":";
        }
      }
    }
  }
  .info {
    background: #00253f;
    padding: 10px;
@@ -280,7 +457,7 @@
  .p-content {
    flex: 1;
    margin-top: 4px;
    /deep/ .content {
    :deep(.content) {
      background: #011f39;
    }
    .panel-content {