yyky_web/src/views/equBigData/equTotal.vue

<template>
  <div class="left-charts">
    <div class="left-chart-item">
      <dv-charts class="item-chart" :option="option" />
      <!-- <div class="user_Overview_nums allnum">
        <dv-digital-flop :config="config" style="width: 100%; height: 100%" />
      </div> -->
      <div class="item-chart-word-num zongshu">总数</div>
    </div>

    <div class="left-chart-item">
      <dv-charts class="item-chart" :option="option1" />
      <div class="item-chart-word-num zaixianshu">在线数</div>
    </div>

    <div class="left-chart-item">
      <dv-charts class="item-chart" :option="option2" />
      <div class="item-chart-word-num lixianshu">离线数</div>
    </div>

    <div class="left-chart-item">
      <dv-charts class="item-chart" :option="option3" />
      <div class="item-chart-word-num gaojingshu">告警数</div>
    </div>
  </div>
</template>

<script>
let style = {
  fontSize: 24,
};
export default {
  name: "BottomCharts",
  props: {
    data: {
      type: Object,
      default: {},
    },
  },
  components: {},
  data() {
    return {
      config: {
        number: [100],
        content: "{nt}",
        style: {
          ...style,
          // stroke: "#00fdfa",
          fill: "#00fdfa",
        },
      },
      timer: null,
      equTotalData: {},
      deviceCount: 0,
      deviceOnline: 0,
      un_deviceOnline: 0,
      alarmCount: 0,
      option: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            radius: "80%",
            data: [
              {
                name: "itemA",
                value: this.data.deviceCount,
                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                gradient: ["#01dcdf"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}",
              style: {
                fill: "#1ed3e5",
                fontSize: 30,
              },
            },
          },
        ],
      },
      option1: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            radius: "80%",
            data: [
              {
                name: "itemA",
                value: this.data.deviceOnline,
                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                gradient: ["#33faaa"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}",
              style: {
                fill: "#1ed3e5",
                fontSize: 30,
              },
            },
          },
        ],
      },
      option2: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            radius: "80%",
            data: [
              {
                name: "itemA",
                value: this.data.un_deviceOnline,
                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                gradient: ["#f7ac20"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}",
              style: {
                fill: "#1ed3e5",
                fontSize: 30,
              },
            },
          },
        ],
      },
      option3: {
        series: [
          {
            type: "gauge",
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            radius: "80%",
            data: [
              {
                name: "itemA",
                value: this.data.alarmCount,
                // gradient: ["#03c2fd", "#1ed3e5", "#2fded6"],
                gradient: ["#f93496", "#f61967", "#f2053e"],
              },
            ],
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
            },
            dataItemStyle: {
              lineCap: "round",
            },
            details: {
              show: true,
              formatter: "{value}",
              style: {
                fill: "#1ed3e5",
                fontSize: 30,
              },
            },
            animationFrame: 10,
          },
        ],
      },
    };
  },
  mounted() {
    // this.deviceView();
  },
  methods: {},
};
</script>

<style lang="scss">
.user_Overview_nums {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-size: 22px;
  margin: 50px auto 30px;
  background-size: cover;
  background-position: center center;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  &.bgdonghua::before {
    animation: rotating 14s linear infinite;
  }

}
  .allnum {
    &::before {
      background-image: url("./img/left_top_lan.png");
    }
  }

.left-charts {
  width: 100%;
  height: 80%;
  display: flex;
  position: relative;

  .left-chart-item {
    width: 25%;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    .item-chart {
      height: calc(100% - 80px);
      position: relative;
    }
    .item-chart-word-num {
      font-size: 20px;
      margin-top: 15px;
      font-weight: bold;
    }
    .zongshu {
      color: rgb(0, 253, 250);
    }
    .zaixianshu {
      color: rgb(7, 247, 168);
    }
    .lixianshu {
      color: rgb(227, 179, 55);
    }
    .gaojingshu {
      color: rgb(245, 2, 61);
    }
  }
}
</style>