bigScreen/src/views/pageOperation/leftTop/index.vue

<template>
  <div class="h-[48.79vh] bgLeftTopBox p-[1.85vh]" v-loading="isLoading">
    <div
      class="w-[21.29vh] h-[21.29vh] mx-auto m-[2vh]"
      ref="echartsContainer"
    ></div>
    <div
      class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBox mx-auto mt-[4.8vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center"
    >
      <section>
        <div class="flex">
          <img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
          <span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80"
            >总人数</span
          >
        </div>
        <p class="text-[#733FF3] text-[4.07vh] mt-[1.4vh] youshe leading-none">
          {{ totalPopulation }}
        </p>
      </section>
      <section>
        <template v-for="(item, index) in peopleData">
          <div
            class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center"
            :class="!index && 'mb-[1.85vh]'"
            :key="index"
          >
            <div class="flex items-end">
              <img src="@/assets/svg/Operation/LeftTop/PointBlue.svg" />
              <span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{
                item["itemName"]
              }}</span>
            </div>
            <div class="flex items-center">
              <span class="text-[#733FF3] text-[2.4vh] youshe">{{
                item["itemVal"]
              }}</span>
              <span class="text-[1.11vh] opacity-65 ml-[0.74vh]">人</span>
            </div>
          </div>
        </template>
      </section>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { GetMonitorOperationCount } from "@/api/monitor";
import dayjs from "dayjs";
let chart = null;
export default {
  data() {
    return {
      chartOptions: {
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            max: 100,
            radius: "100%",
            center: ["50%", "50%"],
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#9C85FA",
                    },
                    {
                      offset: 1,
                      color: "#5531E7",
                    },
                  ],
                  global: false,
                },
              },
            },
            axisLine: {
              lineStyle: {
                color: [[1, "#4F518C"]],
                opacity: 0.7,
                width: 30,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: [
              {
                value: 86,
                name: "首台准点率",
                title: {
                  offsetCenter: ["0%", "20%"],
                  fontSize: 22,
                  fontFamily: "Microsoft YaHei",
                  color: "#fff",
                  overflow: "break",
                  lineHeight: 20,
                },
                detail: {
                  valueAnimation: true,
                  offsetCenter: ["0%", "-15%"],
                  fontSize: 40,
                  fontFamily: "DIN-Bold,Microsoft YaHei",
                  color: "#03FFFF",
                  formatter: `{value}%`,
                },
              },
            ],
          },
        ],
      },
      peopleData: [
        {
          itemName: "进行中",
          itemVal: "50",
        },
        {
          itemName: "待进行",
          itemVal: "300",
        },
      ],
      totalPopulation: 0,
      isLoading: true,
    };
  },
  methods: {
    onGetPageData() {
      let nowDay = dayjs().format("YYYY-MM-DD");
      if (this.$store.getters.isMock) {
        nowDay = "2024-06-06";
      }
      GetMonitorOperationCount(nowDay).then((res) => {
        if (!res.data) {
          this.isLoading = false;
          return;
        }
        let fisrtRate = res["data"]["firstPunctualityRate"];
        if (fisrtRate.includes("%")) {
          this.chartOptions["series"][0]["data"][0]["value"] = fisrtRate.slice(
            0,
            -1
          );
        } else {
          this.chartOptions["series"][0]["data"][0]["value"] =
            Number(fisrtRate);
        }

        this.peopleData[0]["itemVal"] = res["data"]["patOperationing"];
        this.peopleData[1]["itemVal"] = res["data"]["patWating"];
        this.totalPopulation = res["data"]["patCount"];
        chart.setOption(this.chartOptions);
        this.isLoading = false;
      });
    },
  },
  mounted() {
    chart = echarts.init(this.$refs.echartsContainer);
    this.onGetPageData();
  },
};
</script>

<style>
.bgLeftTopBox {
  background-image: url("@/assets/svg/Operation/LeftTop/Box.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bgTopLeftItemBox {
  background-image: url("@/assets/svg/Operation/LeftTop/ItemBox.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.peopleItemBox {
  background: linear-gradient(
    271deg,
    rgba(85, 255, 212, 0.045) 2%,
    rgba(35, 150, 121, 0.066) 99%
  );
  border: 1.5px solid;
  border-image: linear-gradient(
      159deg,
      rgba(169, 213, 255, 0.4) -8%,
      rgba(169, 213, 255, 0) 38%
    )
    1.5;
}
</style>