sx_yjb_vue/src/views/gas_alarm/components/waring.vue

<template>
  <el-dialog v-model="visible" title="告警预览" width="50%" @close="fnClose">
    <el-scrollbar style="height: 600px">
      <div
        v-if="list.length > 0"
        style="display: flex; flex-wrap: wrap; gap: 20px; margin-top: 10px"
      >
        <div
          v-for="item in list"
          :id="'_dialog' + item.PLC_ID"
          :key="item.PLC_ID"
          style="width: calc(20% - 20px); height: 190px"
        />
      </div>
      <div
        v-else
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          height: 600px;
        "
      >
        暂无报警设备
      </div>
    </el-scrollbar>
  </el-dialog>
</template>

<script setup>
import { useVModel } from "@vueuse/core";
import * as echarts from "echarts";
import { nextTick, onMounted, watch } from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  list: {
    type: Array,
    required: true,
  },
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
let myChartMap = {};
const fnInitEcharts = (data) => {
  return new Promise((resolve) => {
    // const normalColor = "rgb(255,255,255)";
    // const alarmColor = "rgb(0,255,0)";
    // const alarmColors = "rgb(0,0,255)";
    // const normalColors = "rgb(255, 255, 0)";
    // const assistantColors = "rgb(255,0,0)";
    const assistantColor = "rgb(0,191,255)";
    let myChart;
    if (!myChartMap[`_dialog${data.PLC_ID}`]) {
      myChart = echarts.init(document.querySelector(`#_dialog${data.PLC_ID}`));
    } else {
      myChart = myChartMap[`_dialog${data.PLC_ID}`];
    }
    const option = {
      title: {
        text: data.TARGET_PLACE.replace(/(.{20})/g, "$1\n"),
        textStyle: {
          fontSize: 12,
          fontWeight: 400,
          color: assistantColor,
          lineHeight: 16,
        },
        left: "center",
        top: "0",
      },
      series: [
        {
          type: "gauge",
          name: "外层辅助",
          radius: "86%",
          center: ["50%", "62%"],
          startAngle: "225",
          endAngle: "-45",
          splitNumber: "120",
          pointer: { show: false },
          detail: { show: false },
          data: [{ value: 1 }],
          title: { show: false },
          axisLine: {
            show: true,
            lineStyle: { color: [[1, assistantColor]], width: 3 },
          },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
        },
        {
          name: "内层数据刻度",
          type: "gauge",
          radius: "75%",
          center: ["50%", "62%"],
          axisLine: {
            lineStyle: {
              width: 10,
              color: [
                [23 / 200, "#FFFFFF"],
                [50 / 200, "#00FF00"],
                [100 / 200, "#0000FF"],
                [160 / 200, "#FFFF00"],
                [1, "#FF0000"],
                // [23/200, normalColor],
                // [0.50, alarmColor],
                // [1.0, alarmColors],
                // [1.60, normalColors],
                // [2.00, assistantColors],
              ],
            },
          },
          max: 200,
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false },
          detail: {
            show: true,
            offsetCenter: ["0", "80%"],
            fontSize: 20,
            color: getColorByValue(data.CURRENT_VALUE),
            //  color: data.CURRENT_VALUE >= 24 ? alarmColor : normalColor,
          },
          itemStyle: {
            // color: data.CURRENT_VALUE >= 24 ? alarmColor : normalColor,
            color: getColorByValue(data.CURRENT_VALUE),
          },
          pointer: { width: 3, length: "95%" },
          data: [{ value: data.CURRENT_VALUE }],
          silent: false,
        },
        {
          name: "最内层线",
          type: "gauge",
          radius: "50%",
          center: ["50%", "62%"],
          startAngle: 360,
          endAngle: 0,
          axisLine: { show: false, lineStyle: { opacity: 0 } },
          splitLine: { show: false, lineStyle: { opacity: 0 } },
          axisLabel: { show: false },
          axisTick: {
            length: 2,
            splitNumber: 3,
            lineStyle: { color: assistantColor, width: 2, type: "dashed" },
          },
          detail: { show: false },
          pointer: { show: false },
        },
      ],
    };
    myChart.setOption(option);
    if (!myChartMap[`_dialog${data.PLC_ID}`]) {
      myChartMap[`_dialog${data.PLC_ID}`] = myChart;
    }
    resolve();
  });
};
onMounted(() => {
  watch(
    () => [props.list, visible.value],
    async (value) => {
      if (value[1]) {
        await nextTick();
        fnDisposeEcharts();
        for (const item of value[0]) {
          await fnInitEcharts(item);
        }
      }
    }
  );
});
const fnDisposeEcharts = () => {
  for (const myChartListKey in myChartMap) {
    myChartMap[myChartListKey].dispose();
  }
  myChartMap = {};
};
const fnClose = () => {
  fnDisposeEcharts();
  visible.value = false;
};
const getColorByValue = (value) => {
  return value < 24
    ? "rgb(255, 255, 255)" // 白色
    : value <= 50
    ? "rgb(0, 255, 0)" // 绿色
    : value <= 100
    ? "rgb(0, 0, 255)" // 蓝色
    : value <= 160
    ? "rgb(255, 255, 0)" // 黄色
    : "rgb(255, 0, 0)"; // 红色
};
</script>

<style scoped lang="scss"></style>