jy2025-ui/src/views/alarm/record/bizAccess.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="0">
      <el-form-item label="" style="width: 308px;margin-right:10px">
        <el-date-picker
            v-model="daterangeAlarmTime"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <div ref="chartAccess" style="height: 600px;"></div>
    </el-card>
    <!--    <el-table v-loading="loading" :data="recordList" border>-->
    <!--      <el-table-column label="告警ID" align="center" prop="modelId" width="80"/>-->
    <!--      <el-table-column label="业务模型" align="center" prop="modelName"/>-->
    <!--      <el-table-column label="最近1小时系统压力值" align="center" prop="access"/>-->
    <!--      <el-table-column label="告警数量" align="center" prop="num" />-->
    <!--      <el-table-column label="操作" align="center" prop="alarmTime" width="180">-->
    <!--        <template #default="scope">-->
    <!--          <el-button type="text" plain icon="Position" @click="handleDetails(scope.row)">明细</el-button>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->

    <!--    <pagination-->
    <!--        v-show="total>0"-->
    <!--        :total="total"-->
    <!--        v-model:page="queryParams.pageNum"-->
    <!--        v-model:limit="queryParams.pageSize"-->
    <!--        @pagination="getList"-->
    <!--    />-->
  </div>
</template>

<script setup name="Record">
import {getBizAccess} from "@/api/alarm/record";
import {useRouter} from "vue-router";
import * as echarts from "echarts";

const {proxy} = getCurrentInstance();
const {alarm_level} = proxy.useDict('alarm_level');

const recordList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const daterangeAlarmTime = ref([]);
const router = useRouter();
const chartAccess = ref();

const data = reactive({
  form: {},
  queryParams: {
    start: null,
    end: null,
  },
});

function handleDetails(row) {
  console.log(row, router)
}

const {queryParams, form} = toRefs(data);

function initChart(res) {
  let myChart = echarts.init(chartAccess.value);
  let img = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjUzOTAwNTEzMjYyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIxNjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5AZm9udC1mYWNlIHsgZm9udC1mYW1pbHk6IGZlZWRiYWNrLWljb25mb250OyBzcmM6IHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xMDMxMTU4X3U2OXc4eWh4ZHUud29mZjI/dD0xNjMwMDMzNzU5OTQ0IikgZm9ybWF0KCJ3b2ZmMiIpLCB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTAzMTE1OF91Njl3OHloeGR1LndvZmY/dD0xNjMwMDMzNzU5OTQ0IikgZm9ybWF0KCJ3b2ZmIiksIHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xMDMxMTU4X3U2OXc4eWh4ZHUudHRmP3Q9MTYzMDAzMzc1OTk0NCIpIGZvcm1hdCgidHJ1ZXR5cGUiKTsgfQo8L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBoMzJ2MTYwaC0zMnpNNTEyIDI1NmgzMnYxNjBoLTMyek01MTIgNTEyaDMydjE2MGgtMzJ6TTUxMiA3NjhoMzJ2MTYwaC0zMnoiIGZpbGw9IiNkODFlMDYiIHAtaWQ9IjIxNzAiPjwvcGF0aD48L3N2Zz4=";
  let datas = [];
  let legendData1 = [];
  let legendData2 = [];
  let xMax1 = 50;
  let xMax2 = 50;

  for (let i in res.data) {
    let obj = res.data[i];
    datas.push(obj.modelName);
    legendData1.push(obj.access);
    legendData2.push(obj.num);
    if (obj.access > xMax1) {
      xMax1 = obj.access;
    }
    if (obj.num > xMax2) {
      xMax2 = obj.num;
    }
  }
  let dataheng = [xMax1+2, xMax1+2, xMax1+2, xMax1+2, xMax1+2];
  let option = {
    backgroundColor: '#fff',
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(210,219,238,0.2)',
        },
      },
    },
    legend: {},
    grid: [{
      show: false,
      left: '0',
      top: 0,
      bottom: 22,
      width: '15%',
    },
      {
        containLabel: true,
        top: 0,
        left: '20%',
        bottom: '0%',
        width: '50%',
        show: false
      },
      {
        left: '74%',
        right: '0%',
        top: 0,
        bottom: '0%',
        containLabel: true,
        show: false
      },
    ],
    xAxis: [{
      gridIndex: 0,
      show: false,
    },
      {
        gridIndex: 1,
        show: false,
        max: xMax1,
      },
      {

        gridIndex: 2,
        show: false,
        max: xMax2,
      },
    ],
    yAxis: [{
      gridIndex: 0,
      type: 'category',
      inverse: true,
      position: 'right',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      data: datas.map(function (value) {
        return {
          value: value,
          textStyle: {
            align: 'right',
          },
        };
      }),
      axisLabel: {
        fontSize: 14,
        align: 'left',
        rich: {
          a: {
            color: '#fff',
            backgroundColor: '#49a2ff',
            width: 24,
            height: 24,
            align: 'center',
            borderRadius: 3,
          },
          a1: {
            color: '#fff',
            backgroundColor: '#f5576c',
            width: 24,
            height: 24,
            align: 'center',
            borderRadius: 3,
          },
          a2: {
            color: '#fff',
            backgroundColor: '#fee140',
            width: 24,
            height: 24,
            align: 'center',
            borderRadius: 3,
          },
          a3: {
            color: '#fff',
            backgroundColor: '#96fbc4',
            width: 24,
            height: 24,
            align: 'center',
            borderRadius: 3,
          },
          b: {
            color: '#333',
            width: 100,
            height: 30,
            align: 'right',
          },
        },
        formatter: function (params) {
          var index = datas.map((item) => item).indexOf(params);
          index = index + 1;
          if (index < 4) {
            return [`{a${index}|${index}}{b|${params}}`].join('\n');
          } else {
            return [`{a|${index}}{b|${params}}`].join('\n');
          }
        },
      },
    },
      {
        inverse: true,
        gridIndex: 1,
        data: datas,
        // max:10,
        axisLabel: {
          // margin: 80,
          show: false
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisPointer: {
          label: {
            show: false,
            margin: 30,
          },
        },
      },
      {
        gridIndex: 2,
        inverse: true,
        data: datas,
        //   max:10,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisPointer: {
          label: {
            show: false,
            margin: 30,
          },
        },
      },
    ],
    series: [{
      type: 'bar',
      name: '系统压力值',
      stack: '2',
      barWidth: 20,
      z: 10,
      barCategoryGap: 15,
      // barGap:i==1?'-100%':'0',
      xAxisIndex: 1,
      yAxisIndex: 1,
      itemStyle: {
        color: '#ffc001',
        barBorderRadius: [0, 10, 10, 0],
        // barBorderRadius: legendData[i].barBorderRadius,
        emphasis: {
          color: '#ffc001',
        },
      },
      // 数字
      label: {
        show: true,
        position: 'inside',
        right: 0,
        color: '#fff',
        formatter: function (params) {
          if (params.value == 0) {
            return '';
          } else {
            return params.value;
          }
        },
      },
      data: legendData1,
    },
      //虚线
      {
        name: '',
        type: 'pictorialBar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        symbolSize: [7, 30],
        symbolOffset: [15, 0],
        symbol: 'image://' + img,
        symbolPosition: 'end',
        barWidth: "20",
        z: 12,
        color: '#fe5959',
        data: dataheng,
        tooltip: {
          show: false,
        },
      },
      //右边的柱状图
      {
        xAxisIndex: 2,
        yAxisIndex: 2,
        type: 'bar',
        name: '告警数量',
        stack: '3',
        barWidth: 30,
        barCategoryGap: 15,
        // barGap:i==1?'-100%':'0',
        itemStyle: {
          color: '#fe5959',
          barBorderRadius: [0, 20, 20, 0],
          emphasis: {
            color: '#fe5959',
          },
        },
        // 数字
        label: {
          show: true,
          position: 'inside',
          right: 0,
          color: '#fff',
          formatter: function (params) {
            if (params.value == 0) {
              return '';
            } else {
              return params.value;
            }
          },
        },
        data: legendData2,
      },
    ],
  };
  // 3.配置项和数据给实例化对象
  myChart.setOption(option);
}

/** 查询告警记录列表 */
function getList() {
  loading.value = true;
  queryParams.value.params = {};
  if (null != daterangeAlarmTime && '' != daterangeAlarmTime) {
    queryParams.value.start = daterangeAlarmTime.value[0];
    queryParams.value.end = daterangeAlarmTime.value[1];
  }
  getBizAccess(queryParams.value).then(response => {
    // recordList.value = response.rows;
    // total.value = response.total;
    loading.value = false;
    initChart(response);
  });
}


/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  daterangeAlarmTime.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}

getList();
</script>