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; overflow-x: hidden">
      <!-- top -->
      <div class="box">
        <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">
          2024-03-10 15:08:10
        </div>
      </div>
      <!-- center -->
      <div style="width: 100%; height: 400px">
        <div style="width: 100%; height: 100%" ref="graphChart"></div>
      </div>
      <!-- bottom -->
      <div style="width: 100%; margin-top: 10px">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="优先级">紧急</a-descriptions-item>
          <a-descriptions-item label="状态">新告警</a-descriptions-item>
          <a-descriptions-item label="错误码">C003</a-descriptions-item>
          <a-descriptions-item label="告警描述"
            ><div style="color: #2778ff">用电量超标</div> 当日用电量超出预设值</a-descriptions-item
          >
          <a-descriptions-item label="设备信息"> 1栋10层低压柜 </a-descriptions-item>
          <a-descriptions-item label="重复次数"> 0 </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    <template #footer>
      <a-button type="primary" @click="handleClose">确定</a-button>
    </template>
  </ns-drawer>
</template>
<script lang="ts" setup>
  defineOptions({
    name: 'look', // 与页面路由name一致缓存才可生效
  });
  import { ref } from 'vue';
  import * as echarts from 'echarts';

  let chartInstance: echarts.ECharts | null = null;
  const graphChart = ref(null);
  const visible = ref(false);
  const handleClose = () => {
    visible.value = false;
  };
  const btnClick = () => {
    console.log('btnClick');
    handleClose();
  };
  const toggle = (data: any) => {
    console.log(data, 'data');
    visible.value = true;
    setTimeout(() => {
      getChatr();
    }, 500);
  };
  const getChatr = () => {
    let dayData = [];
    let energyAlarm = [];

    // Extend data for 30 days
    for (let i = 1; i < 30; i++) {
      dayData.push(`3/${i}`);
      energyAlarm.push(Math.floor(Math.random() * 250));
    }
    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: any) {
          let res = params[0].marker + '    ' + params[0].seriesName + '  :    ' + params[0].data;
          return res;
        },
      },
      grid: {
        left: '10%', // 设置图表距离左边的距离
        right: '4%', // 设置图表距离右边的距离
        top: '6%',
        borderWidth: 0,
        y2: 60, // 距离底边
      },
      legend: [
        {
          show: false,
          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: true,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            show: true, // 显示 X 轴刻度标签
            color: 'rgb(89, 89, 89)', // X 轴刻度标签的字体颜色
            fontSize: 12, // X 轴刻度标签的字体大小
            formatter: function (value) {
              // 可选：格式化 X 轴刻度标签文本
              return value;
            },
          },
          data: dayData,
        },
      ],
      yAxis: [
        {
          type: 'value',
          shwo: false,
          splitLine: {
            show: true,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            show: true, // 显示
            formatter: function (value) {
              return value + ' V'; // 在刻度值后加上单位
            },
          },
        },
      ],
      dataZoom: [
        {
          height: 12,
          start: 0,
          end: 100,
          handleSize: '300%', // 设置滑块的大小
          bottom: 15,
        },
      ],
      series: [
        {
          name: '电压值',
          type: 'line',
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: '#2778FF',
            },
          },
          symbol: 'circle', // 数据点的形状，这里设置为圆形
          symbolSize: 8,
          label: {
            show: true,
            color: 'rgb(89, 89, 89)',
            position: 'top',
            top: '10',
            formatter: function (value) {
              return Number(energyAlarm[value.dataIndex]) + 'V';
            },
          },
          data: energyAlarm,
        },
      ],
    };
    chartInstance = echarts.init(graphChart.value);
    chartInstance.setOption(option);
  };
  defineExpose({
    toggle,
  });
</script>
<style scoped lang="less">
  .box {
    width: 100%;
    height: 35px;
    display: flex;
    position: relative;
    font-size: @font-size-base;
    border-bottom: 1px solid @primary-color;
  }
  .card {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 5px;
    height: 35px;
    background-color: @primary-color;
  }
  :deep(.ant-descriptions-item-label) {
    width: 25%;
  }
</style>