U

he wei

5 天以前 487cc9bad146b1bcd86910746a341ef3455fb579

 src/views/alarm/earlyWarningAnalysis.vue

@@ -13,7 +13,7 @@

import useStation from "@/hooks/useStationList.js";
const { provice, city, country, stationName, stationId, powerId,
   proviceList, cityList, countryList, stationList, powerList, isManual,
  proviceList, cityList, countryList, stationList, powerList, isManual,
  getPowerList,
  whenLoaded,
} = useStation();
@@ -29,10 +29,11 @@


import {
   confirmBattAlm,
   getBattAlmHis,
   getPwrAlmParam,
  getPwrAllAlmParam,
  getPwrtAlmAnalyse,
  getDevAlmAnalyse,
  getBattAlmAnalyse,
  getHisRealInAlm,
  getAlmSummaryParam,
} from "@/api/alarm.js";

import {
@@ -44,92 +45,42 @@
const flag = ref(Math.random());


const headers = [
   {
      prop: "fullName",
      label: "机房名称",
      width: "220",
   },
   {
      prop: "powerName",
      label: "电源名称",
      width: "80",
   },
   {
      prop: "alarmName",
      label: "告警名称",
      width: "160",
   },
   {
      prop: "alarmLimithUpper",
      label: "上上限阈值",
      width: "120",
   },
   {
      prop: "alarmLimithUpperLevelStr",
      label: "上上限等级",
      width: "120",
   },
   {
      prop: "alarmLimithUpperEnStr",
      label: "上上限使能",
      width: "120",
   },
   {
      prop: "alarmLimith",
      label: "上限阈值",
      width: "120",
   },
   {
      prop: "alarmLimithLevelStr",
      label: "上限等级",
      width: "120",
   },
   {
      prop: "alarmLimithEnStr",
      label: "上限使能",
      width: "120",
   },
   {
      prop: "alarmLimitl",
      label: "下限阈值",
      width: "120",
   },
   {
      prop: "alarmLimitlLevelStr",
      label: "下限等级",
      width: "120",
   },
   {
      prop: "alarmLimitlEnStr",
      label: "下限使能",
      width: "120",
   },
   {
      prop: "alarmLimitlLower",
      label: "下下限阈值",
      width: "120",
   },
   {
      prop: "alarmLimitlLowerLevelStr",
      label: "下下限等级",
      width: "120",
   },
   {
      prop: "alarmLimitlLowerEnStr",
      label: "下下限使能",
      width: "120",
   },
const headers0 = [
  {
    prop: "fullName",
    label: "机房名称",
    width: "220",
  },
  {
    prop: "powerName",
    label: "电源名称",
    width: "80",
  },
  {
    prop: "almName",
    label: "告警名称",
    width: "160",
  },
  {
    prop: "almLevelStr",
    label: "告警等级",
    width: "120",
  },
  {
    prop: "almStartTime",
    label: "告警开始时间",
    width: "120",
  },
];

// const pageCurr = ref(1);
// const pageSize = ref(10);
// const total = ref(0);
const pageNum0 = ref(1);
const pageSize0 = ref(10);
const total0 = ref(0);
const addEditVisible = ref(false);
const dialogTitle = ref("");
const datas = reactive({
   tableData: [],
   rowData: {},
const datas0 = reactive({
  tableData: [],
  rowData: {},
});

const currentRow = ref({});
@@ -138,62 +89,62 @@

const alarmId = ref('');

function getList() {
   let params = {
      almIdList: alarmId.value ? [alarmId.value] : undefined,
      provice: provice.value || undefined,
      city: city.value || undefined,
      country: country.value || undefined,
      stationId: stationId.value || undefined,
      powerId: powerId.value || undefined,
   };

  if (!powerId.value) {
    $message.error('请选择电源');
    return false;
  }
// 电源告警列表
function getList0() {
  let params = {
    almIdList: alarmId.value ? [alarmId.value] : undefined,
    provice: provice.value || undefined,
    city: city.value || undefined,
    country: country.value || undefined,
    stationId: stationId.value || undefined,
    powerId: powerId.value || undefined,
    almLevel: alarmLevel.value,
    pageNum: pageNum0.value,
    pageSize: pageSize0.value,
  };

  let loading = $loading();
   getPwrAlmParam(params).then((res) => {
      let { code, data, data2, data3 } = res;
      let list = [];
      // let _total = 0;
  getPwrtAlmAnalyse(params).then((res) => {
    let { code, data, data2 } = res;
    let list = [];
    // let _total0 = 0;
    loading.close();
      if (code && data) {
         // console.log(data);
      let bInf = data3;
         list = data2.map(v => ({
    if (code && data) {
      // console.log(data);
      list = data2.list.map(v => ({
        ...v,
        fullName: bInf.fullName,
        powerName: bInf.powerName,
            alarmLimithUpperLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimithUpperLevel],
            alarmLimithUpperEnStr: ['不启用', '启用'][v.alarmLimithUpperEn],
            alarmLimithLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimithLevel],
            alarmLimithEnStr: ['不启用', '启用'][v.alarmLimithEn],
            alarmLimitlLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimitlLevel],
            alarmLimitlEnStr: ['不启用', '启用'][v.alarmLimitlEn],
            alarmLimitlLowerLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimitlLowerLevel],
            alarmLimitlLowerEnStr: ['不启用', '启用'][v.alarmLimitlLowerEn],
         }));
         // _total = data2.total;
      }
      datas.tableData = list;
      // total.value = _total;
   })
      .catch((err) => {
         console.log(err);
      });
        almLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.almLevel],
        
      }));
      // _total0 = data2.total0;
    }
    datas0.tableData = list;
    // total0.value = _total0;
  })
    .catch((err) => {
      console.log(err);
    });
}


const allProps = ref([]);
// 查询属性对应关系
async function getAllProps() {
  let res = await getAlmSummaryParam();
  let { code, data, data2 } = res;
  let list = [];
  if (code && data) {
      list = data2;
    }
    allProps.value = list;
}

// 查询告警类型
async function getAlarmType() {
   let res = await getPowerAlmIdType();
   let { code, data, data2 } = res;
   let list = [];
   if (code && data) {
      Object.keys(data2).map((key) => {
  let res = await getPowerAlmIdType();
  let { code, data, data2 } = res;
  let list = [];
  if (code && data) {
    Object.keys(data2).map((key) => {
      Object.keys(data2[key]).map((key2) => {
        list.push({
          value: key2,
@@ -201,116 +152,133 @@
        });
      })
    });
   }
   alarmTypeList.value = list;
  }
  alarmTypeList.value = list;
}


// 展示数据数量
// function handleSizeChange(val) {
//    pageSize.value = val;
//    getList();
// }
// 翻页
// function handleCurrentChange(val) {
//    pageCurr.value = val;
//    getList();
// }

const alarmType = ref(0);
const acTab = ref('power');
const alarmLevel = ref(1);

function edit(record) {
  dialogTitle.value = `编辑告警参数--${record.alarmName}`;
  alarmType.value = record.alarmType;
  addEditVisible.value = true;
  currentRow.value = record;
  // console.log('record', record, '=============');
  
async function view(record) {
  let params = {
    powerId: record.powerId,
    almId: record.almId,
    startTime: record.almStartTime,
    battgroupId: record.battgroupIdList.length ? record.battgroupIdList[0] : 0,
  }
  let res = await getHisRealInAlm(params);
}

function onOk() {
   addEditVisible.value = false;
   // handleCurrentChange(1);
}
function onCanel() {
   addEditVisible.value = false;
}

function exportExcel() {
   let _headers = headers.map(v => {
      let prop = v.prop;
      let label = v.label;
      if (prop == 'almIsConfirmed') {
         prop = 'almIsConfirmedStr';
      }
      return {
         prop,
         label
      };
   });
   ExportFile(_headers, datas.tableData, "电源告警参数");
}

async function exportExcelAll() {
  let res = await getPwrAllAlmParam();
  let { code, data, data2 } = res;
  let list = [];
  if (code && data) {
         list = data2.map(v => ({
        ...v,
            alarmLimithUpperLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimithUpperLevel],
            alarmLimithUpperEnStr: ['不启用', '启用'][v.alarmLimithUpperEn],
            alarmLimithLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimithLevel],
            alarmLimithEnStr: ['不启用', '启用'][v.alarmLimithEn],
            alarmLimitlLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimitlLevel],
            alarmLimitlEnStr: ['不启用', '启用'][v.alarmLimitlEn],
            alarmLimitlLowerLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.alarmLimitlLowerLevel],
            alarmLimitlLowerEnStr: ['不启用', '启用'][v.alarmLimitlLowerEn],
         }));
  }
  let _headers = headers.map(v => {
  let _headers = headers0.map(v => {
    let prop = v.prop;
    let label = v.label;
    if (prop == 'almIsConfirmed') {
      prop = 'almIsConfirmedStr';
    }
    return {
      prop,
      label
    };
  });
  ExportFile(_headers, list, "电源告警参数-全部");
  ExportFile(_headers, datas0.tableData, "电源告警");
}

// 展示数据数量
function handleSizeChange0(val) {
  pageSize0.value = val;
  getList0();
}
// 翻页
function handleCurrentChange0(val) {
  pageNum0.value = val;
  getList0();
}

async function exportExcelAll() {
  // let res = await getPwrAllAlmParam();
  // let { code, data, data2 } = res;
  // let list = [];
  // if (code && data) {
  //       list = data2.map(v => ({
  //       ...v,
  //          almLevelStr: ['', '一级告警', '二级告警', '三级告警', '四级告警'][v.almLevel],
  //       }));
  // }
  // let _headers = headers0.map(v => {
  //   let prop = v.prop;
  //   let label = v.label;
  //   return {
  //     prop,
  //     label
  //   };
  // });
  // ExportFile(_headers, list, "电源告警-全部");
}


// 获取属性对应的中文名称
function getPropName(prop) {
  let name = '';
  let obj = allProps.value.filter(v => v.fieldName == prop);
  if (obj.length) {
    name = obj[0].fieldNameZh;
  }
  return name;
}

const name0 = ref('主属性曲线');
const subProp = ref([]);

subProp.value = [1];
// subProp.value = [1, 2];
// subProp.value = [1, 2, 3];
// subProp.value = [1, 2, 3, 4];

let obj = [[1], [1, 2], [1, 2, 3], [1, 2, 3, 4]];
let i = 0;
onMounted(async () => {
   await getAlarmType();
   // getList();
   console.log('stationList', stationList, '===========1==');
  await getAlarmType();
  getAllProps();
  getList0();

  setInterval(() => {
    i++;
    i%=4;
    subProp.value.length = obj[i];
  }, 5000);
});

onActivated(async () => {
  let pageFlag = getQueryString("pageFlag");
  // console.log('pageFlag', pageFlag, flag.value, '=============');
  await nextTick();
  await whenLoaded();
// onActivated(async () => {
//   let pageFlag = getQueryString("pageFlag");
//   // console.log('pageFlag', pageFlag, flag.value, '=============');
//   await nextTick();
//   await whenLoaded();
  
  if (pageFlag && pageFlag != flag.value) {
    // let provice, city, country, stationName, battId;
//   if (pageFlag && pageFlag != flag.value) {
//     // let provice, city, country, stationName, battId;
    
    if (getQueryString('stationId')) {
      let statId = getQueryString('stationId');
      let stat = stationList.value.find(v => v.stationId == statId);
      if (stat) {
        isManual.value = true;
        stationName.value = stat.stationName;
        await getPowerList();
      }
    }
    if (getQueryString('powerId')) {
      powerId.value = getQueryString('powerId') * 1;
      // console.log('battId', battId.value, battList.value, '=============');
    }
    getList();
    flag.value = pageFlag;
  }
});
//     if (getQueryString('stationId')) {
//       let statId = getQueryString('stationId');
//       let stat = stationList.value.find(v => v.stationId == statId);
//       if (stat) {
//         isManual.value = true;
//         stationName.value = stat.stationName;
//         await getPowerList();
//       }
//     }
//     if (getQueryString('powerId')) {
//       powerId.value = getQueryString('powerId') * 1;
//       // console.log('battId', battId.value, battList.value, '=============');
//     }
//     getList();
//     flag.value = pageFlag;
//   }
// });
</script>

<template>
@@ -318,10 +286,11 @@
    <!-- <div class="page-header">
      </div> -->
    <div class="page-content">
      <yc-card is-full>
        <div class="page-content-wrapper">
      <el-tabs tab-position="left" v-model="acTab" type="card" class="main-tabs">
        <el-tab-pane name="power" class="tab-pane" label="电源告警">
          <div class="page-content-wrapper">
          <div class="page-content-tools page-filter">
            <div class="grid-container" :style="{'--counter': 8}">
            <div class="grid-container" :style="{'--counter': 9}">
              <div class="grid-item">
                <div class="label">省</div>
                <div class="value">
@@ -437,6 +406,18 @@
                  </el-select>
                </div>
              </div>
              <div class="grid-item">
                <!-- <div class="label">一级告警</div>
                <div class="label">二级告警</div>
                <div class="label">三级告警</div>
                <div class="label">四级告警</div> -->
                <el-radio-group v-model="alarmLevel" size="small" style="grid-column: span 6;">
                  <el-radio-button :label="1">一级告警</el-radio-button>
                  <el-radio-button :label="2">二级告警</el-radio-button>
                  <el-radio-button :label="3">三级告警</el-radio-button>
                  <el-radio-button :label="4">四级告警</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </div>
          <div class="page-content-table">
@@ -447,7 +428,7 @@
                  stripe
                  height="100%"
                  size="small"
                  :data="datas.tableData"
                  :data="datas0.tableData"
                  style="width: 100%"
                >
                  <el-table-column
@@ -457,7 +438,7 @@
                    width="60"
                  ></el-table-column>
                  <el-table-column
                    v-for="header in headers"
                    v-for="header in headers0"
                    :key="header.prop"
                    :prop="header.prop"
                    :label="header.label"
@@ -479,15 +460,15 @@
                  <el-table-column
                    label="操作"
                    fixed="right"
                    width="240"
                    width="120"
                    align="center"
                  >
                    <template #default="scope">
                      <el-button
                        type="primary"
                        type="warning"
                        size="small"
                        @click="edit(scope.row)"
                        >修改</el-button
                        @click="view(scope.row)"
                        >查看详情</el-button
                      >
                    </template>
                  </el-table-column>
@@ -501,27 +482,75 @@
                type="primary"
                round
                size="small"
                @click="getList"
                @click="getList0"
                :icon="Search"
                >查询</el-button
              >
            </div>
            <div class="el-page-container">
              <el-pagination v-model:current-page="pageNum0" v-model:page-size="pageSize0"
                :page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]" size="small" layout="total, sizes, prev, pager, next, jumper" :total="total0"
                @size-change="handleSizeChange0" @current-change="handleCurrentChange0" />
            </div>
            <div class="page-tool">
              <el-button type="primary" round size="small" @click="exportExcel"
              <!-- <el-button type="primary" round size="small" @click="exportExcel"
                >导出</el-button
              >
              <el-button type="primary" round size="small" @click="exportExcelAll"
                >导出全部</el-button
              >
              > -->
            </div>
          </div>
        </div>
      </yc-card>
        </el-tab-pane>
        <el-tab-pane name="dev" label="设备告警">设备告警</el-tab-pane>
        <el-tab-pane name="batt" label="电池告警">电池告警</el-tab-pane>
      </el-tabs>
    </div>
    <div class="page-footer">
      
      <div class="left">
        <card :title="name0"></card>
      </div>
      <div class="right">
        <div class="btn-grp">
          <!-- <div class="item">
            <div class="label">选择电池组</div>
            <div class="value">
              <el-select
                v-model="battId"
                size="small"
                clearable
                placeholder="请选择电池组"
              >
                <el-option
                  v-for="item in battList"
                  :key="'l5_' + item.powerId"
                  :label="`${item.stationName}-${item.powerName}`"
                  :value="item.powerId"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="item">
            <div class="label">设置时间周期</div>
            <div class="value">
              {{ 132 }}
            </div>
          </div>
          <div class="item">
            <div class="label">关注属性</div>
          </div> -->
        </div>
        <!-- 一个就分一块 两个就分两列一行 两个以上就两列两行 -->
        <div :class="['contain', { 'grid1': subProp.length == 1, 'grid2': subProp.length == 2, 'grid3': subProp.length > 2}]">
          <template v-for="(sub, idx) in subProp" :key="'sub_' + idx">
            <card :title="'次属性' + (idx + 1)">
              <line-chart :ref="() => chartRefs[idx]"></line-chart>
            </card>
          </template>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
@@ -548,12 +577,70 @@
<style scoped lang="less">
.page-wrapper {
  display: flex;
  flex-direction: row;
  // padding: 8px;
  flex-direction: column;
  padding: 8px;
  height: 100%;

  .page-content {
    flex: 1;
    .main-tabs {
      height: 100%;
      :deep(.el-tabs__header) {

        border-bottom: 0 none;
      }
      :deep(.el-tabs__header) {
         .el-tabs__nav {
            border: 0 none;
          }
        .el-tabs__item {
          background: #21487e;
          color: #fff;
          border: 0 none;
          &.is-active {
            background: #409EFF;
          }
        }
      }
    }
  }
  .page-footer {
    flex: 2;
    display: flex;
    .left {
      flex: 1;
    }
    .right {
      flex: 1.6;
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      .btn-grp {
        display: flex;
        justify-content: flex-end;
        padding: 8px;
      }
      .contain {
        flex: 1;
        display: grid;
        grid-column-gap: 8px;
        grid-row-gap: 8px;
        &.grid1 {
          grid-template-columns: repeat(1, 1fr);
        }
        &.grid2 {
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(1, 1fr);
        }
        &.grid3 {
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(2, 1fr);
        }
      }
    }
  }
  .tab-pane {
    height: 100%;
  }
}