SaaS-lib/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue

<template>
  <ns-drawer
    v-model:visible="visible"
    width="520"
    :title="' '"
    :footer-style="{ textAlign: 'right' }"
    :ok="btnClick"
    :cancel="handleClose"
    placement="right"
    @close="handleClose">
    <div style="width: 100%; height: 100%; overflow-y: auto">
      <!-- top -->
      <div
        style="
          width: 100%;
          height: 35px;
          display: flex;
          position: relative;
          font-size: 16px;
          border-bottom: 1px solid rgb(255, 118, 2); /* 设置底部边框为1像素实线，并指定颜色 */
        ">
        <div class="card"></div>
        <div style="left: 25px; position: absolute; height: 35px; line-height: 35px">
          告警编号：20230310001
        </div>
        <div style="right: 20px; position: absolute; height: 35px; line-height: 35px">
          15点08分
        </div>
      </div>
      <!-- center -->
      <div style="width: 100%; height: 300px; border: 1px solid red" ref="graphChart"></div>
    </div>
  </ns-drawer>
</template>
<script>
  import { defineComponent } from 'vue';
  import { ref } from 'vue';
  import * as echarts from 'echarts';
  export default defineComponent({
    setup() {
      let chartInstance = null;
      const graphChart = ref(null);
      const visible = ref(false);
      const handleClose = () => {
        visible.value = false;
      };
      const btnClick = () => {
        console.log('btnClick');
      };
      const toggle = (data) => {
        console.log(data, 'data');
        visible.value = true;
        getChatr();
      };
      const getChatr = () => {
        let dayData = [];
        let energyAlarm = [];
        let wgAlarm = [];
        let equipmentAlarm = [];
        let total = [];

        // Extend data for 30 days
        for (let i = 1; i < 30; i++) {
          dayData.push(`3/${i}`);
          energyAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
          wgAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
          equipmentAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
          total.push(0); // Assuming the same value for simplicity
        }
        if (chartInstance) {
          chartInstance.dispose();
        }
        chartInstance = echarts.init(graphChart.value);
        const option = {
          title: {
            text: '告警趋势/ 近30天',
            textStyle: {
              fontSize: 16,
              fontWeight: 'normal',
              color: '#aaaaaa',
            },
            left: '1%',
            top: '2%',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            formatter: function (params) {
              let res =
                params[0].axisValue +
                '<br/>' +
                params[0].marker +
                '    ' +
                params[0].seriesName +
                '  :  ' +
                params[0].data +
                '<br/>' +
                params[1].marker +
                '    ' +
                params[1].seriesName +
                ' :  ' +
                params[1].data +
                '<br/>' +
                params[2].marker +
                '    ' +
                params[2].seriesName +
                '  :  ' +
                params[2].data +
                '<br/>';
              return res;
            },
          },
          grid: {
            left: '2%', // 设置图表距离左边的距离
            right: '2%', // 设置图表距离右边的距离
            borderWidth: 0,
            y2: 60, // 距离底边
          },
          legend: [
            {
              top: 5,
              left: 'center', // 将图例居中显示
              textStyle: {
                color: 'rgb(89, 89, 89)',
                fontSize: '14',
                fontWeight: 'normal',
              }, // 注意这里的颜色值要用引号括起来
              data: ['设备告警', '网关告警', '能源告警'],
              itemGap: 30, // 这里可以调整图例项之间的间距，单位为像素
            },
          ],
          toolbox: {
            show: true,
            feature: {
              restore: {},
              saveAsImage: {},
            },
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitArea: {
                show: false,
              },
              data: dayData,
            },
          ],
          yAxis: [
            {
              type: 'value',
              shwo: false,
              splitLine: {
                show: true,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitArea: {
                show: false,
              },
              axisLabel: {
                show: false, // 不显示刻度值
              },
            },
          ],
          dataZoom: [
            {
              height: 12,
              start: 0,
              end: 100,
              handleSize: '300%', // 设置滑块的大小
              bottom: 15,
            },
          ],
          series: [
            {
              name: '能源告警',
              type: 'bar',
              stack: '能源告警',
              barMaxWidth: 40,
              barGap: '10%',
              itemStyle: {
                normal: {
                  barBorderRadius: 0,
                  color: 'rgb(246, 189, 22)',
                },
              },
              data: energyAlarm,
            },
            {
              name: '网关告警',
              type: 'bar',
              stack: '能源告警',
              barMaxWidth: 40,
              barGap: '10%',
              itemStyle: {
                normal: {
                  barBorderRadius: 0,
                  color: 'rgb(91, 143, 249)',
                },
              },
              data: wgAlarm,
            },
            {
              name: '设备告警',
              type: 'bar',
              stack: '能源告警',
              barMaxWidth: 40,
              barGap: '10%',
              itemStyle: {
                normal: {
                  barBorderRadius: 0,
                  color: 'rgb(48, 191, 120)',
                },
              },
              data: equipmentAlarm,
            },
            {
              name: '总数',
              type: 'bar',
              stack: '能源告警',
              barMaxWidth: 40,
              barHight: 0,
              itemStyle: {
                normal: {
                  barBorderRadius: 0,
                  color: 'rgba(0,0,0,0)',
                },
              },
              label: {
                show: true,
                color: '#000000',
                position: 'top',
                top: '10',
                formatter: function (value) {
                  return (
                    Number(energyAlarm[value.dataIndex]) +
                    Number(wgAlarm[value.dataIndex]) +
                    Number(equipmentAlarm[value.dataIndex])
                  );
                },
              },
              data: total,
            },
          ],
        };
        chartInstance = echarts.init(graphChart.value);
        chartInstance.setOption(option);
      };
      return {
        btnClick,
        visible,
        chartInstance,
        handleClose,
        toggle,
        graphChart,
        getChatr,
      };
    },
  });
</script>
<style scoped lang="less">
  .card {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 5px;
    height: 35px;
    background-color: rgb(254, 118, 2);
  }
</style>