Shanghai-SanFenYuan/src/views/inspector/index.vue

<template>
  <div class="bg">
    <div class="title">
      同步录音录像软件
    </div>
    <div class="inspector-container">
      <div style="display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px">
        <Card title="总同录数量" @click.native="handleChangeStatistics(0)">
          <div class="shu">
            <span>{{ tongji.totalCount }}</span>
          </div>
        </Card>
        <Card title="本年同录数量" @click.native="handleChangeStatistics(1)">
          <div class="shu">
            <span>{{ tongji.yearCount }}</span>
          </div>
        </Card>
        <Card title="本季度同录数量" @click.native="handleChangeStatistics(2)">
          <div class="shu">
            <span>{{ tongji.monthCount }}</span>
          </div>
        </Card>
        <Card title="本月同录数量" @click.native="handleChangeStatistics(3)">
          <div class="shu">
            <span>{{ tongji.weekCount }}</span>
          </div>
        </Card>
      </div>
      <div style="flex:1;display: flex;justify-content: center;align-items: center;">
        <Card :title="title">
          <div id="total" style="width: 100%;height: 500px"/>
        </Card>
        <!--        <Card title="本年同录数量">-->
        <!--          <div id="year" style="width: 100%;height: 500px"/>-->
        <!--        </Card>-->
        <!--        <Card title="本月同录数量">-->
        <!--          <div id="month" style="width: 100%;height: 500px"/>-->
        <!--        </Card>-->
        <!--        <Card title="本周同录数量">-->
        <!--          <div id="week" style="width: 100%;height: 500px"/>-->
        <!--        </Card>-->
      </div>
    </div>
  </div>
</template>

<script>

import Card from "@/views/inspector/components/Card.vue";
import {getPieData, getTongJiData} from "@/api/inspector";
import * as echarts from "echarts";

export default {
  name: 'inspector',
  components: {Card},
  data() {
    return {
      title: '总同录数量',
      tongji: {},
      chart: null
    }
  },
  async mounted() {
    this.initialEcharts()
    await this.getTongJi()
    await this.getPinTongJiData(0)
    // await this.getPinTongJiData(document.getElementById('year'), 1)
    // await this.getPinTongJiData(document.getElementById('month'), 3)
    // await this.getPinTongJiData(document.getElementById('week'), 2)
  },
  methods: {
    initialEcharts() {
      if (this.chart) return
      const dom = document.getElementById('total')
      this.chart = echarts.init(dom)

      this.chatOptions = this.getEchartsOptions([])

      this.chart.setOption(this.chatOptions)
    },
    async handleChangeStatistics(type) {
      this.title = ['总同录数量', '本年同录数量', '本季度同录数量', '本月同录数量'][type]
      await this.getPinTongJiData(type)
    },
    async getTongJi() {
      const data = await getTongJiData()
      this.tongji = data.data
    },
    async getPinTongJiData(period) {
      const {data} = await getPieData(period)

      this.chart.setOption(this.getEchartsOptions(data))
    },
    getEchartsOptions(data) {
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            color: "rgba(14, 253, 255, 1)"
          }
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['20%', '50%'],
            avoidLabelOverlap: false,
            // itemStyle: {
            //   borderRadius: 10,
            //   borderColor: 'transparent',
            //   borderWidth: 10
            // },
            data: data?.map(r => ({
              value: r.num,
              name: r.clerk
            })) ?? []
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
:root {
  font-size: 16px;
}

.bg {
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
  background: url("../../assets/images/bg2.jpg") no-repeat;
  /* background: url(https://demo.eiun.net/web/003%20%E9%85%B7%E7%82%AB%E6%99%BA%E8%83%BD%E5%A4%A7%E5%B1%8F%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%BF%83/images/bg2.jpg) no-repeat; */
  background-size: cover;
  padding: 0rem 3rem;
  display: flex;
  flex-direction: column;
}

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 27px;
  font-weight: bolder;
  color: rgba(14, 253, 255, 1);
  height: 75px;
  margin-bottom: 20px;
}

.inspector-container {
  display: flex;
  flex-flow: column;
  /* //display: grid;
  //grid-template-columns: repeat(4,minmax(0,1fr)); */
  gap: 16px;
  flex: 1;
  margin-bottom: 40px;
}

.inspector-statistics {
  display: grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.shu {
  position: relative;
  color: rgba(14, 253, 255, 1);
  font-size: 20px;
  font-weight: bolder;
  margin-bottom: 10px;
  font-family: dig;
}
</style>