SynthesisManagement/src/views/screens/screen-components/DeviceStatus.vue

<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="设备状态" />
    <div class="charts-container">
      <div
        v-for="(item, index) in data"
        :key="index"
        class="device-status-desc"
      >
        <el-row>
          <div :style="{ backgroundColor: colors[index] }" class="icon"></div>
          <div :style="{ color: colors[index] }" class="type">
            {{ item.type }}
          </div>
        </el-row>
        <el-row>
          <div :style="{ color: colors[index] }" class="count">
            {{ item.count }}台
          </div>
          <!--          <div :style="{ color: colors[index] }" class="count">-->
          <!--            {{ item.count }}%-->
          <!--          </div>-->
        </el-row>
      </div>
      <div ref="chartRef" style="width: 100%; height: 600px"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";

import * as echarts from "echarts";
const bigScreenData: any = inject("bigScreenData");
const chartRef = ref(null);

const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
  deviceData: {
    type: Object || null,
    default: null,
    required: true,
  },
});

const data = ref<any[]>([]);

const colors = ["#4caf50", "#ffc107", "#b61945", "#607d8b"];

let chart: any = null;

watchEffect(() => {
  if (!props.deviceData) {
    return;
  }
  data.value = [
    {
      type: "运行",
      count: props.deviceData.runNum,
      percent: 20,
    },
    {
      type: "离线",
      count: props.deviceData.offLineNum,
      percent: 0,
    },

    {
      type: "故障",
      count: props.deviceData.faultNum,
      percent: 5,
    },
    {
      type: "维修",
      count: props.deviceData.repairNum,
      percent: 10,
    },
  ];

  const option = {
    color: colors,
    backgroundColor: "transparent",
    tooltip: {
      trigger: "item",
      textStyle: {
        fontSize: bigScreenData.value.fontSize * 2,
      },
    },
    legend: {
      bottom: "5%",
      left: "center",
    },
    textStyle: {
      fontSize: bigScreenData.value.fontSize * 2,
    },
    series: [
      {
        name: "设备状态",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },

        labelLine: {
          show: false,
        },
        label: {
          show: false,
          position: "inside",
        },
        data: [
          { value: props.deviceData.runNum, name: "运行" },
          { value: props.deviceData.offLineNum, name: "离线" },
          { value: props.deviceData.faultNum, name: "故障" },
          { value: props.deviceData.repairNum, name: "维修" },
        ],
      },
    ],
  };

  chart.setOption(option);
});

onMounted(async () => {
  chart = echarts.init(chartRef.value, "dark");
});
</script>

<style lang="scss" scoped>
.device-status-desc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 20px;
  margin-bottom: 10px;

  s .icon {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin-right: 10px;
    background-color: #ff7373;
  }

  .type {
    font-size: 2.2vh;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
  }

  .count {
    font-size: 2.2vh;
    color: #666;
    line-height: 1.5;
    margin-left: 10px;
  }
}
</style>