chf_imcs_web/imcs-ui/src/views/zuihou/chfLargeScreen/twoDatasModel/component/machine.vue

<template>
  <div class="machine-container">
    <div class="main">
      <img
        src="../../../../../assets/device/machine.png"
        alt="Machine"
        style="height: 100%; width: 100%;"
      >
      <div
        v-if="isOnline === '0'"
        class="offLine"
      >
        离线
      </div>
      <div
        v-if="isOnline === '1'"
        class="onLineGreen"
      >
        在线
      </div>
      <div
        v-if="isOnline === '2'"
        class="onLine"
      >
        生产中
      </div>
    </div>
    <div class="title">
      {{ title }}
    </div>
    <div
      ref="echarts"
      class="chart"
    />
  </div>
</template>
<script>
// Echarts的组件
import * as echarts from "echarts";
import "echarts-liquidfill"; // 水球图
export default {
  name: "Machine",
  props: {
    status: {
      type: String,
      default: () => {
        return "offLine";
      },
    },
    title: {
      type: String,
      default: () => {
        return "";
      },
    },
    progress: {
      type: Number || String,
      default: () => {
        return 0;
      },
    },
    isOnline: {
      type: String,
      default: () => {
        return '0';
      }
    },

  },
  data() {
    return {
      machineId:""
    };
  },
  mounted() {
    this.alarm(this.progress);
    //this.alarm(99);
  },
  watch:{
    progress(newValue) {
      // 监听 progress 的变化并更新图表
      this.alarm(newValue);
    },
  },
  methods: {
    //水球图
    alarm(value,) {
      console.log("value:"+value)
      value = value == 0 ? 0 : value;
      this.myChartThree = echarts.init(
        this.$refs.echarts
      );
      var option = {
        title: [
          {
            text: value + "%",
            top: "25%",
            left: "40%",
            textStyle: {
              fontSize: "20",
              fontWeight: "300",
              color: "#fff",
            },
          },
        ],
        series: [
          {
            name: "最外层-虚线",
            type: "gauge",
            radius: "97%",
            center: ["58%", "50%"],
            startAngle: 0,
            endAngle: 360,
            axisLine: {
              show: false,
            },
            axisTick: {
              distance: -6,
              length: 2,
              lineStyle: {
                color: "#2AECFF",
                width: 5,
                type: [20],
                dashOffset: 19,
                opacity: 0.8,
              },
              splitNumber: 6,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
          },
          {
            type: "liquidFill",
            radius: "85%",
            z: 5,
            center: ["58%", "50%"],
            amplitude: 14,
            backgroundStyle: {
              color: "#0d2d42",
            },
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#0061A2",
                  },
                  {
                    offset: 0,
                    color: "#00FFE5",
                  },
                ],
                globalCoord: false,
              },
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#0061A2",
                  },
                  {
                    offset: 0,
                    color: "#00FFE5",
                  },
                ],
                globalCoord: false,
              },
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "#0061A2",
                  },
                  {
                    offset: 0,
                    color: "#00FFE5",
                  },
                ],
                globalCoord: false,
              },
            ],
            data: [
              value + 0.02,
              {
                value: value - 0.01,
                direction: "left",
              },
              value - 0.01,
            ],
            label: {
              normal: {
                formatter: "",
              },
            },
            outline: {
              show: true,
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: "#2AECFF",
              },
            },
          },
        ],
      };

      this.myChartThree.setOption(option);
    },
  },
};
</script>
<style lang="css" scoped>
.machine-container {
  width: 80%;
  background-color: #90aab2;
  position: relative;
  left: 15%;
  border-radius: 10px;
  .main {
    position: relative;
    height: 70%;
    .offLine {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 60%;
      height: 20%;
      width: 20%;
      background-color: grey;
      color: #ffffff;
      font-size: 2vh;
      border-radius: 5px;
    }
    .onLine {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 60%;
      height: 20%;
      width: 20%;
      background-color: yellow;
      color: #000;
      font-size: 2vh;
      border-radius: 5px;
    }

    .onLineGreen {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 60%;
      height: 20%;
      width: 20%;
      background-color: green;
      color: #000;
      font-size: 2vh;
      border-radius: 5px;
    }


  }

  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30%;
    font-size: 2vw;
    color: yellow;
  }
  .chart {
    height: 30%;
    width: 30%;
    position: absolute;
    top: 10%;
    left: -5%;
  }
}
</style>