esswisdom_web/src/views/Alarm/index.vue

<template>
  <div>
    <div class="title">
      <el-select
        v-model="Singlevalue"
        collapse-tags
        placeholder="选择电站"
        popper-class="custom-header"
        :max-collapse-tags="1"
        style="width: 300px"
        size="large"
        @change="postemsDevice"
      >
        <el-option v-for="item in cities" :key="item.id" :label="item.stationName" :value="item.id" />
      </el-select>
      <div class="title_"></div>
      <el-select
        v-model="emsDeviceId"
        collapse-tags
        placeholder="选择设备编号"
        popper-class="custom-header"
        :max-collapse-tags="1"
        style="width: 240px"
        size="large"
        @change="getstationrealtime"
      >
        <el-option v-for="(item, index) in emsDevice" :key="index" :label="item.emsDeviceId" :value="item.id" />
      </el-select>
    </div>
    <div class="faultalarm">
      <el-card>
        <template #header>
          <div class="card-header">
            <div>告警图表</div>
          </div>
        </template>
        <div class="chart">
          <div ref="todaysalarm" class="todaysalarm"></div>
          <div ref="alarmlevel" class="alarmlevel"></div>
          <div ref="equipmenttype" class="equipmenttype"></div>
        </div>
        <div class="Alarmlist">
          <div class="Alarmlist_Alarm">告警列表</div>
          <div class="screen">
            <div class="screen_1">
              <div>设备类型：</div>
              <el-select v-model="quipment" placeholder="请选择设备类型" size="large" style="width: 240px">
                <el-option v-for="item in quipmentlist" :key="item.daviceClass" :label="item.name" :value="item.daviceClass" />
              </el-select>
            </div>
            <div class="screen_1">
              <div>告警等级：</div>
              <el-select v-model="alarm" placeholder="请选择告警等级" size="large" style="width: 240px">
                <el-option v-for="item in alarmlist" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </div>
            <div class="screen_1">
              <div>状态：</div>
              <el-select v-model="alarmstatus" placeholder="请选择状态" size="large" style="width: 240px">
                <el-option v-for="item in alarmstatuslist" :key="item.todayId" :label="item.name" :value="item.todayId" />
              </el-select>
            </div>
            <div class="screen_1">
              <div>处理建议：</div>
              <el-select v-model="proposal" placeholder="请选择处理建议" size="large" style="width: 240px">
                <el-option v-for="item in proposallist" :key="item.dictCode" :label="item.dictName" :value="item.dictCode" />
              </el-select>
            </div>
          </div>
          <div class="screentime">
            <div class="screen_1">
              <div>起止时间：</div>
              <el-date-picker
                size="large"
                v-model="timevalue"
                type="daterange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-value="timevalue"
                :disabled-date="pickerOptions"
                value-format="YYYY-MM-DD hh:mm:ss"
              />
            </div>

            <div class="screen_1">
              <el-button type="primary" size="large" @click="getpostpageInfo">查询</el-button>
              <el-button size="large" @click="onreset">重置</el-button>
            </div>
          </div>
          <div class="eltable">
            <el-table :data="tableData.records" style="width: 100%" border>
              <el-table-column prop="deviceName" label="设备名称" width="180" />
              <el-table-column prop="alarmname" label="告警等级" width="180" />
              <el-table-column prop="title" label="告警标题" />
              <el-table-column prop="kehu" label="客户告警" />
              <el-table-column prop="handlingdictName" label="处理建议" />
              <el-table-column prop="startDate" label="告警开始时间" />
              <el-table-column prop="endDate" label="告警结束时间" />
              <el-table-column prop="todayname" label="状态" />
            </el-table>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<!--    -->
<script setup lang="ts">
import { onMounted, Ref, ref } from "vue";
import {
  stationstationName,
  postemsSystemsingleStation,
  todayAlarm,
  postalarmLevel,
  postdeviceClass,
  posthandlingSugg,
  postpageInfo
} from "@/api/home/Multisite";
import * as echarts from "echarts";
import { Station } from "@/api/interface";

const currentDate = ref();
const Singlevalue = ref("");
const cities: Ref<Station.todo[]> = ref([]);
const emsDevice: Ref<any[]> = ref([]);
const emsDeviceId = ref("");
const poststationstationName = async () => {
  const { data } = await stationstationName({});
  Singlevalue.value = data[0].id;
  cities.value = data;
  postemsDevice(Singlevalue.value);
};
const postemsDevice = async (value: any) => {
  emsDevice.value = [];
  const { data } = await postemsSystemsingleStation({}, value);
  emsDeviceId.value = data[0].id;
  emsDevice.value = data;
  getstationrealtime();
};
const getstationrealtime = async () => {
  gettodayAlarm();
  getalarmLevel();
  getpostdeviceClass();
  getpostpageInfo();
};
// 告警列表筛选
const quipmentlist = ref();
const alarmlist = ref();
const alarmstatuslist = ref();
const proposallist = ref();
// 告警图表

const todaysalarm = ref();
const alarmlevel = ref();
const equipmenttype = ref();
// 今日告警
const gettodayAlarm = async () => {
  const { data } = await todayAlarm({ stationId: Singlevalue.value, emsId: emsDeviceId.value });
  let list = data.map(function (item) {
    return {
      value: item.cnt, // 将 cnt 键修改为 value
      name: item.name,
      todayId: item.todayId
    };
  });
  alarmstatuslist.value = list;
  setTimeout(function () {
    baropPiechart(list);
  }, 500);
};
const baropPiechart = (list: string | any[]) => {
  let piechart = echarts.init(todaysalarm.value);
  window.addEventListener(
    "resize",
    () => {
      piechart.resize();
    },
    false
  );
  let option1 = {
    tooltip: {
      trigger: "item"
    },
    title: [
      {
        text: "今日告警",
        right: "55px", // 设置标题水平居中
        top: "40px", // 设置标题距离容器顶部的距离
        textStyle: {
          fontSize: 14,
          fontWeight: "bold"
        }
      }
    ],
    legend: {
      show: true,
      orient: "vertical",
      right: "0%",
      bottom: "40%",
      icon: "circle",
      textStyle: {
        fontSize: 14,
        rich: {
          a: {
            fontSize: 14
          }
        }
      },
      formatter: function (name: string) {
        for (let index = 0; index < list.length; index++) {
          if (name == list[index].name) {
            return `${name + " " + " " + "" + " "} {a|${list[index].value}} 条`;
          }
        }
      }
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        label: {
          fontSize: 0,
          show: false
        },

        emphasis: {
          label: {
            show: true,
            fontSize: 0,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: list
      }
    ]
  };

  piechart.setOption(option1);
};
// 告警等级
const getalarmLevel = async () => {
  const { data } = await postalarmLevel({ stationId: Singlevalue.value, emsId: emsDeviceId.value });
  let list = data.map(function (item) {
    return {
      value: item.cnt, // 将 cnt 键修改为 value
      name: item.name,
      code: item.code
    };
  });
  alarmlist.value = list;
  setTimeout(function () {
    gradechart(list);
  }, 500);
};
// 告警等级

const gradechart = (list: string | any[]) => {
  let grade = echarts.init(alarmlevel.value);
  window.addEventListener(
    "resize",
    () => {
      grade.resize();
    },
    false
  );
  let option1 = {
    tooltip: {
      trigger: "item"
    },
    title: [
      {
        text: "告警等级",
        right: "55px", // 设置标题水平居中
        top: "40px", // 设置标题距离容器顶部的距离
        textStyle: {
          fontSize: 14,
          fontWeight: "bold"
        }
      }
    ],
    legend: {
      show: true,
      orient: "vertical",
      right: "0%",
      bottom: "20%",
      icon: "circle",
      textStyle: {
        fontSize: 14,
        rich: {
          a: {
            fontSize: 14
          }
        }
      },
      formatter: function (name: string) {
        for (let index = 0; index < list.length; index++) {
          if (name == list[index].name) {
            return `${name + " " + " " + "" + " "} {a|${list[index].value}} 条`;
          }
        }
      }
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        label: {
          fontSize: 0,
          show: false
        },

        emphasis: {
          label: {
            show: true,
            fontSize: 0,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: list
      }
    ]
  };

  grade.setOption(option1);
};
// 设备类型
const getpostdeviceClass = async () => {
  const { data } = await postdeviceClass({ stationId: Singlevalue.value, emsId: emsDeviceId.value });
  let list = data.map(function (item) {
    return {
      value: item.cnt, // 将 cnt 键修改为 value
      name: item.name,
      daviceClass: item.daviceClass
    };
  });

  quipmentlist.value = list;
  setTimeout(function () {
    equipmentchart(list);
  }, 500);
};
// 设备类型
const equipmentchart = (list: string | any[]) => {
  let equipment = echarts.init(equipmenttype.value);
  window.addEventListener(
    "resize",
    () => {
      equipment.resize();
    },
    false
  );
  let option1 = {
    tooltip: {
      trigger: "item"
    },
    title: [
      {
        text: "设备类型",
        left: "320px", // 设置标题水平居中
        top: "40px", // 设置标题距离容器顶部的距离
        textStyle: {
          fontSize: 14,
          fontWeight: "bold"
        }
      }
    ],
    legend: [
      {
        show: true,
        right: "0%",
        bottom: "40%",
        icon: "circle",
        orient: "vertical",
        textStyle: {
          fontSize: 14,
          rich: {
            a: {
              fontSize: 14
            }
          }
        },
        data: [
          {
            value: 0, // 将 cnt 键修改为 value
            code: 1,
            name: "PCS"
          },
          {
            value: 0, // 将 cnt 键修改为 value
            code: 2,
            name: "BMS"
          }
        ],
        formatter: function (name: string) {
          if (name == "PCS" || name == "BMS") {
            for (let index = 0; index < list.length; index++) {
              if (name == list[index].name) {
                return `${name + " " + " " + "" + " "} {a|${list[index].value}} 条`;
              }
            }
          }
        }
      },
      {
        show: true,
        right: "24%",
        bottom: "40%",
        icon: "circle",
        orient: "vertical",
        textStyle: {
          fontSize: 14,
          rich: {
            a: {
              fontSize: 14
            }
          }
        },
        formatter: function (name: string) {
          if (name == "电表" || name == "空调") {
            for (let index = 0; index < list.length; index++) {
              if (name == list[index].name) {
                return `${name + " " + " " + "" + " "} {a|${list[index].value}} 条`;
              }
            }
          }
        },
        data: [
          {
            value: 0, // 将 cnt 键修改为 value
            code: 2,
            name: "电表"
          },
          {
            value: 0, // 将 cnt 键修改为 value
            code: 2,
            name: "空调"
          }
        ]
      }
    ],
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        label: {
          fontSize: 0,
          show: false
        },

        emphasis: {
          label: {
            show: true,
            fontSize: 0,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: list
      }
    ]
  };

  equipment.setOption(option1);
};
const pickerOptions = (time: { getTime: (arg0: Date) => number }) => {
  return time.getTime(new Date()) > Date.now();
};

const quipment = ref();
const alarm = ref("");
const proposal = ref("");
const alarmstatus = ref("");
const timevalue: Ref<any> = ref([]);

// 处理建议

const getposthandlingSugg = async () => {
  const { data } = await posthandlingSugg({});
  proposallist.value = data;
};
// 数据列表
const tableData = ref();
// 查询
const getpostpageInfo = async () => {
  let obj = {
    stationId: Singlevalue.value,
    emsId: emsDeviceId.value,
    pn: 1,
    ps: 100,
    alarmId: alarm.value,
    handlingId: proposal.value,
    todayId: alarmstatus.value,
    startDate: timevalue.value[0],
    endDate: timevalue.value[1],
    devicesId: quipment.value
  };
  const { data } = await postpageInfo(obj);
  tableData.value = data;
};
// 重置
const onreset = async () => {
  quipment.value = "";
  alarm.value = "";
  alarmstatus.value = "";
  proposal.value = "";
  timevalue.value[0] = "";
  timevalue.value[1] = "";
  getpostpageInfo();
};
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }

  poststationstationName();
  getposthandlingSugg();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>