refactor

ZhangXianQiang

2024-03-19 2bd38f3c07fa4ec63c5b5fd99bca19d2b1b4ee2d

 src/views/screen/components/screen-face/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="face-container">
    <wrapper-title :title="'人脸数据趋势'"></wrapper-title>
    <wrapper-title :title="'人脸设备数据'"></wrapper-title>

    <div class="face-content">
      <div class="data-plane">
@@ -10,8 +10,8 @@
              <img src="@/assets/images/screen/icon/icon1.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">昨日人脸采集设备总数</div>
              <div class="data-num">{{formatNumber(1123)}}</div>
              <div class="data-lable">设备总数</div>
              <div class="data-num">{{ formatNumber(1123) }}</div>
            </div>
          </div>
        </dv-border-box-13>
@@ -22,7 +22,7 @@
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">昨日抓拍数据量</div>
              <div class="data-lable">设备正常数</div>
              <div class="data-num">{{ formatNumber(200000) }}</div>
            </div>
          </div>
@@ -34,13 +34,12 @@
              <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
            </div>
            <div class="data-info">
              <div class="data-lable">历史抓拍数据量</div>
              <div class="data-lable">设备异常数</div>
              <div class="data-num">{{ formatNumber(112313141111) }}</div>
            </div>
          </div>
        </dv-border-box-13>
      </div>
      <div id="faceChart" ref="faceChart"></div>
    </div>
  </div>

@@ -48,8 +47,6 @@

<script>
import WrapperTitle from '../wrapper-title/index';
import * as echarts from 'echarts';
let lineChart = null;
export default {
  name: 'ScreenFace',
  components: {
@@ -65,62 +62,6 @@
  },

  methods: {
    initChart() {
      const option = {
        legend: {
          right: 'right',
          top: 'top',
          orient: "vertical",
          icon: 'rect',
          data: [
            {
              name: '正常数',
              itemStyle: {
                color: 'rgba(62, 144, 247, 1)'
              }
            },
            {
              name: '异常数',
              itemStyle: {
                color: 'rgba(85, 192, 191, 1)'
              }
            },
          ],
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '5%',
          top: '8%',
          containLabel: true
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: Object.keys(this.dataList.state),
        },
        yAxis: {},
        series: [
          {
            name: '今日',
            data: Object.entries(this.dataList.state).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
            }
          },
          {
            name: '昨日',
            data: Object.entries(this.dataList.state2).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
            }
          }
        ]
      };
      lineChart.setOption(option, true);
    },

    formatNumber(value) {
      return new Intl.NumberFormat('en-US').format(value);
@@ -128,19 +69,21 @@
  },

  mounted() {
    lineChart = echarts.init(this.$refs.faceChart);
    this.initChart();
  },
  beforeDestroy() {
    if (lineChart) {
      lineChart.dispose();
    }

  },
}
</script>

<style lang="scss" scoped>
.face-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
}

.face-content {
  flex: 1;
  background: rgba(67, 102, 155, 0.3);
  border: 1px solid rgba(47, 91, 157, 0.8);

@@ -151,7 +94,7 @@
  .data-plane {
    .data-item {
      width: 100%;
      padding: 20px 20px;
      padding: 10px 20px;
      display: flex;
      align-items: center;