新大屏数据对接

fuliqi

2024-09-17 5f6abeedb7ce43853ad486731a5e99b340ec6392

新大屏数据对接

 src/views/screen/components/lineChart.vue

@@ -3,10 +3,23 @@
</template>

<script>
import * as echarts from "echarts";

export default {
  name: 'lineChart',
  props: {
    workOrderRegion: {
      type: Array,
      default: null,
    },
  },
  data () {
    return {
      dataList: {
        name: [],
        data1: [],
        data2: [],
      },
      // 配置
      option: {
        grid: {
@@ -53,15 +66,7 @@
            margin: 20,
            rotate: 30
          },
          data: [
            '富顺区',
            '大安区',
            '自流景区',
            '贡景区',
            '容县',
            '高新区',
            '沿滩区'
          ]
          data: this.dataList.name,
        },
        // Y轴配置
        yAxis: {
@@ -87,7 +92,7 @@
          {
            name: '已处理工单数',
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130],
            data: this.dataList.data1,
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -108,7 +113,7 @@
          {
            name: '未处理工单数',
            type: 'line',
            data: [90, 140, 160, 55, 88, 99, 100],
            data: this.dataList.data2,
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -144,6 +149,28 @@
    }
  },

  watch: {
    workOrderRegion: {
      handler(newV, oldV) {
        let name = [];
        let data1 = [];
        let data2 =  [];
        this.workOrderRegion.map((item) => {
          name.push(item.area);
          data1.push(item.doneNum);
          data2.push(item.todoNum);
        })
        console.log(this, "ddddd")
        console.log(this.dataList, "ddddd")
        this.dataList.name = name;
        console.log(name)
        this.dataList.data1 = data1;
        this.dataList.data2 = data2;
        this.initDrawLine()
      },
      deep: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      setTimeout(() => {

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

@@ -100,7 +100,7 @@
        zoomSensitivity: 1,
        rotateSensitivity: 0,
      },
      

      // 数据
      data: mapData.features.map((item) => {
        return {
@@ -256,4 +256,4 @@
  top: 0;
  left: 0;
}
</style>
</style>

 src/views/screen/index.vue

@@ -1,12 +1,12 @@
<template>
  <div class="container" ref="contaner">
    <header>
      <img src="@/assets/images/header-bg.png" />
      <img src="@/assets/images/header-bg.png"/>
    </header>

    <div class="main-contaner">
      <div class="data-statistics-content">
        <img src="@/assets/images/workOrder-title.png" class="title" />
        <img src="@/assets/images/workOrder-title.png" class="title"/>
        <div class="main-left-container">
          <div class="work-order-container">
            <img
@@ -36,7 +36,7 @@
            <div class="statistics-container">
              <div class="DrawLine-content">
                <!-- <div style="width: 100%; height: 100%" ref="myDrawLine"></div> -->
                <lineChart></lineChart>
                <lineChart :workOrderRegion = workOrderRegion></lineChart>
              </div>
            </div>
          </div>
@@ -46,13 +46,13 @@
      <div class="map-container" ref="isMap">
        <mapApp></mapApp>
        <div class="btn-container">
          <img src="@/assets/images/btn-bg.png" class="bg-img" />
          <div class="btn-list">
          <img src="@/assets/images/btn-bg.png" class="bg-img"/>
          <div class="btn-list" v-model="activerBtnType">
            <img
              :src="activerBtnType === item.id ? item.bgActiver : item.bg"
              v-for="item in btnList"
              :key="item.id"
              @click="activerBtnType = item.id"
              @click="tabChange(item.id)"
            />
          </div>
        </div>
@@ -60,7 +60,7 @@

      <div class="data-statistics-content">
        <div class="facility-container">
          <img src="@/assets/images/facility-title.png" class="title" />
          <img src="@/assets/images/facility-title.png" class="title"/>
          <div class="facility-content">
            <div class="item-facility-data">
              <img
@@ -93,7 +93,7 @@
              />
              <ul>
                <li
                  v-for="(item, index) in facilityData.faceDetection"
                  v-for="(item, index) in facilityData.face"
                  :key="index"
                >
                  <div class="value">{{ item.value ? item.value : "-" }}</div>
@@ -104,13 +104,13 @@
          </div>
        </div>
        <div class="normal-container">
          <img src="@/assets/images/normal-title.png" class="title" />
          <img src="@/assets/images/normal-title.png" class="title"/>
          <div class="normal-statistics-content">
            <ul class="list-title-container">
              <li>地区</li>
              <li>人脸设备</li>
              <li>车辆设备</li>
              <li>视频设备</li>
              <li>车辆设备</li>
              <li>人脸设备</li>
            </ul>
            <div class="list-content">
              <div class="list-content-to is-scroll-bar">
@@ -119,59 +119,59 @@
                  v-for="(item, index) in facilityNormal"
                  :key="index"
                >
                  <li class="name">{{ item.name }}</li>
                  <li>{{ item.face }}</li>
                  <li>{{ item.car }}</li>
                  <li>{{ item.video }}</li>
                  <li class="name">{{ item.area }}</li>
                  <li>{{ item.videoRate ? item.videoRate + '%' : '--' }}</li>
                  <li>{{ item.carRate ? item.carRate + '%' : '--' }}</li>
                  <li>{{ item.faceRate ? item.faceRate + '%' : '--' }}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <img src="@/assets/images/video-title.png" class="video-title" />
      <img src="@/assets/images/video-title.png" class="video-title"/>
    </div>

    <footer>
      <img src="@/assets/images/footer-title-bg.png" class="footer-title" />
      <img src="@/assets/images/footer-title-bg.png" class="footer-title"/>
      <div class="footer-container">
        <div class="footer-statistics-container">
          <div class="face-container">
            <div
              class="item-face-container"
              :style="item.style"
              v-for="(item, index) in faceData"
              v-for="(item, index) in faceList"
              :key="index"
              :style="item.style"
            >
              <div class="proportion">
                <img src="@/assets/images/face-num-bg.png" />
                <div class="value">{{ item.proportion }}%</div>
                <img src="@/assets/images/face-num-bg.png"/>
                <div class="value">{{ item.value }}%</div>
              </div>
              <div class="title">{{ item.title }}</div>
              <div class="title">{{ item.name }}</div>
            </div>
          </div>

          <div class="video-container">
            <div
              class="item-video-data"
              v-for="(item, index) in videoData"
              v-for="(item, index) in videoList"
              :key="index"
            >
              <div class="video-data">
                <div class="proportion">{{ item.proportion }}%</div>
                <div class="proportion">{{ item.value }}%</div>
              </div>
              <div class="item-video-title">{{ item.title }}</div>
              <div class="item-video-title">{{ item.name }}</div>
            </div>
          </div>

          <div class="car-container">
            <div
              class="item-car-container"
              v-for="(item, index) in carData"
              v-for="(item, index) in carList"
              :key="index"
              :style="item.style"
            >
              {{ item.title }} <span>{{ item.proportion }}%</span>
              {{ item.name }} <span>{{ item.value }}%</span>
            </div>
          </div>
        </div>
@@ -184,357 +184,466 @@
import itemSubheading from '../screen/components/subheading.vue' // 环形统计图
import lineChart from '../screen/components/lineChart.vue' // 折线统计图
import mapApp from '../screen/components/map.vue' // 地图
import {
  getDepartmentData,
  getDeviceData,
  getWorkOrderData,
  getWorkOrderRegion,
  getNormalRate,
  checkFace,
  checkCar,
  checkVideo
} from "@/api/newpage";

export default {
  name: 'examineApp',
  components: { mapApp, itemSubheading, lineChart },
  data () {
  components: {mapApp, itemSubheading, lineChart},
  data() {
    return {
      deptList: [],
      deptId: '',
      carList: [],
      videoList: [],
      faceList: [],
      workOrderData: [],
      workOrderRegion: [],
      // 设备数据
      facilityData: {
        video: [
          {
            value: 4589,
            title: '设备总数'
          },
          {
            value: 4294,
            title: '设备正常数'
          },
          {
            value: 295,
            title: '设备异常数'
          }
        ],
        car: [
          {
            value: 4589,
            title: '设备总数'
          },
          {
            value: 4294,
            title: '设备正常数'
          },
          {
            value: 295,
            title: '设备异常数'
          }
        ],
        faceDetection: [
          {
            value: 4589,
            title: '设备总数'
          },
          {
            value: 4294,
            title: '设备正常数'
          },
          {
            value: 295,
            title: '设备异常数'
          }
        ]
        video: [],
        car: [],
        face: []
      },

      // 设备正常率
      facilityNormal: [
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        },
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        },
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        },
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        },
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        },
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        },
        {
          name: '富顺区',
          face: '23.34%',
          car: '45.12%',
          video: '23.12%'
        }
      ],

      facilityNormal: [],
      // 人脸考核
      faceData: [
        {
          title: '视图库对接稳定性',
          proportion: 100,
          style: {
            top: '13%',
            left: '2%'
          }
        },
        {
          title: '抓拍图片时钟准确性',
          proportion: 100,
          style: {
            top: '13%',
            right: '2%'
          }
        },
        {
          title: '点位在线率',
          proportion: 100,
          style: {
            top: '23%',
            left: '19%'
          }
        },
        {
          title: '抓拍图片合格性',
          proportion: 100,
          style: {
            top: '23%',
            right: '19%'
          }
        },
        {
          title: '抓拍数据大图可用性',
          proportion: 100,
          style: {
            bottom: '18%',
            left: '2%'
          }
        },
        {
          title: '目录一致率',
          proportion: 100,
          style: {
            bottom: '18%',
            right: '2%'
          }
        },
        {
          title: '信息采集准确率',
          proportion: 100,
          style: {
            bottom: '2%',
            left: '19%'
          }
        },
        {
          title: '抓拍数据及时上传准时性',
          proportion: 100,
          style: {
            bottom: '2%',
            right: '19%'
          }
        }
      ],

      faceData: [],
      // 视频考核
      videoData: [
        {
          title: '点位在线率',
          proportion: 100
        },
        {
          title: '部级点位在线率',
          proportion: 100
        },
        {
          title: '重点点位在线率',
          proportion: 100
        },
        {
          title: '重点指挥图像在线率',
          proportion: 100
        },
        {
          title: '录像可用率',
          proportion: 10
        },
        {
          title: '部级巡查录像可用率',
          proportion: 100
        },
        {
          title: '重点点位录像可用率',
          proportion: 100
        },
        {
          title: '重点点位标注正确率',
          proportion: 100
        },
        {
          title: '视频图像资源安全管理',
          proportion: 100
        },
        {
          title: '重点点位校时正确率',
          proportion: 100
        },
        {
          title: '一机一档合格车',
          proportion: 100
        },
        {
          title: '一机一档注册车',
          proportion: 100
        },
        {
          title: '档案考核比',
          proportion: 100
        },
        {
          title: '平台在线率',
          proportion: 100
        }
      ],

      videoData: [],
      // 车辆考核
      carData: [
        {
          title: '抓拍数据大图可用性',
          proportion: 100,
          style: {
            top: '7%',
            left: '15%'
          }
        },
        {
          title: '设备抓拍数据准确',
          proportion: 100,
          style: {
            top: '7%',
            left: '59.2%'
          }
        },
        {
          title: '联网卡口设备目录一至率',
          proportion: 100,
          style: {
            top: '26%',
            left: '5%'
          }
        },
        {
          title: '信息采集准确率',
          proportion: 100,
          style: {
            top: '26%',
            left: '63%'
          }
        },
        {
          title: '设备抓拍数据完整性',
          proportion: 100,
          style: {
            top: '46%',
            left: '12%'
          }
        },
        {
          title: '点位在线率',
          proportion: 100,
          style: {
            top: '46%',
            left: '66%'
          }
        },
        {
          title: '设备时钟准确性',
          proportion: 100,
          style: {
            top: '65%',
            left: '13%'
          }
        },
        {
          title: '视图库对接稳定性',
          proportion: 100,
          style: {
            top: '65%',
            left: '70%'
          }
        },
        {
          title: '设备URL可用性',
          proportion: 100,
          style: {
            top: '83%',
            left: '18.5%'
          }
        },
        {
          title: '抓拍数据上传及时性',
          proportion: 100,
          style: {
            top: '83%',
            left: '59.5%'
          }
        }
      ],

      // 默认选中按钮 st 省厅 qx 区县 ga 公安
      carData: [],
      // 默认选中按钮 1 省厅 2 区县 3 公安
      btnList: [
        {
          id: 'st',
          id: '1',
          bg: require('@/assets/images/st-btn-1.png'),
          bgActiver: require('@/assets/images/st-btn-2.png')
        },
        {
          id: 'qx',
          id: '2',
          bg: require('@/assets/images/qx-btn-1.png'),
          bgActiver: require('@/assets/images/qx-btn-2.png')
        },
        {
          id: 'ga',
          id: '3',
          bg: require('@/assets/images/ga-btn-1.png'),
          bgActiver: require('@/assets/images/ga-btn-2.png')
        }
      ],
      activerBtnType: 'st',
      statistics: [
        {
          value1: 9688,
          value2: 0,
          color: '#e4b54f',
          title: '工单总数'
        },
        {
          value1: 1200,
          value2: 1200,
          color: '#5cff9a',
          title: '已处理工单数'
        },
        {
          value1: 18,
          value2: 1200,
          color: '#ff7b72',
          title: '未处理工单数'
        }
      ],
      activerBtnType: '2',
      statistics: [],
      isFullScreen: false
    }
  },
  mounted() {
    // 获取部门
    getDepartmentData()
      .then((res) => {
        this.deptList = res.data;
      })
      .catch((err) => {
      });
    // 查询数据
    this.getData();
  },
  methods: {
    getDeptId(deptName) {
      let deptId = this.deptList.find(item => item.area === deptName).deptId;
      if (deptId === this.deptId) {
        this.deptId = '';
      } else {
        this.deptId = deptId
      }
      this.getData();
    },
    getData() {
      getDeviceData(this.activerBtnType, this.deptId)
        .then((res) => {
          this.facilityData = res.data;
        })
        .catch((err) => {
        });
      getWorkOrderData(this.activerBtnType, this.deptId)
        .then((res) => {
          this.workOrderData = res.data;
        })
        .catch((err) => {
        });
      getWorkOrderRegion(this.activerBtnType, this.deptId)
        .then((res) => {
          this.workOrderRegion = res.data;
        })
        .catch((err) => {
        });
      getNormalRate(this.activerBtnType, this.deptId)
        .then((res) => {
          this.facilityNormal = res.data;
        })
        .catch((err) => {
        });
      checkCar(this.activerBtnType, this.deptId)
        .then((res) => {
          this.carData = res.data;
        })
        .catch((err) => {
        });
      checkFace(this.activerBtnType, this.deptId)
        .then((res) => {
          this.faceData = res.data;
        })
        .catch((err) => {
        });
      checkVideo(this.activerBtnType, this.deptId)
        .then((res) => {
          this.videoData = res.data;
        })
        .catch((err) => {
        });
    },
    returnPath() {
      this.$router.push("/index");
    },
    tabChange(id) {
      this.activerBtnType = id
      this.getData();
    }
  },
  watch: {
    workOrderData() {
      this.statistics = [];
      let item = {value1: 0, value2: 0, title: "", color: ""}
      item.value1 = this.workOrderData.totalNum
      item.value2 = 0
      item.color = '#e4b54f'
      item.title = '工单总数'
      this.statistics.push(item)

      let item1 = {value1: 0, value2: 0, title: "", color: ""}
      item1.value1 = this.workOrderData.doneNum
      item1.value2 = this.workOrderData.totalNum - this.workOrderData.doneNum
      item1.color = '#5cff9a'
      item1.title = '已处理工单数'
      this.statistics.push(item1)

      let item2 = {value1: 0, value2: 0, title: "", color: ""}
      item2.value1 = this.workOrderData.todoNum
      item2.value2 = this.workOrderData.totalNum - this.workOrderData.todoNum
      item2.color = '#ff7b72'
      item2.title = '未处理工单数'
      this.statistics.push(item2)
    },

    videoData() {
      this.videoList = [];
      let item = {value: 0, name: "", id: 0, routerUrl: ""}
      item.value = this.videoData.platformOnline
      item.name = "平台在线率"
      item.id = 1
      item.routerUrl = ""
      this.videoList.push(item)

      let item1 = {value: 0, name: "", id: 0, routerUrl: ""}
      item1.value = this.videoData.monitorQualification
      item1.name = "一机一档合格率"
      item1.id = 2
      item1.routerUrl = ""
      this.videoList.push(item1)

      let item2 = {value: 0, name: "", id: 0, routerUrl: ""}
      item2.value = this.videoData.monitorRegistration
      item2.name = "一机一档注册率"
      item2.id = 3
      item2.routerUrl = ""
      this.videoList.push(item2)

      let item3 = {value: 0, name: "", id: 0, routerUrl: ""}
      item3.value = this.videoData.archivesRate
      item3.name = "档案考核比"
      item3.id = 4
      item3.routerUrl = ""
      this.videoList.push(item3)

      let item4 = {value: 0, name: "", id: 0, routerUrl: ""}
      item4.value = this.videoData.siteOnline
      item4.name = "点位在线率"
      item4.id = 5
      item4.routerUrl = ""
      this.videoList.push(item4)

      let item5 = {value: 0, name: "", id: 0, routerUrl: ""}
      item5.value = this.videoData.videoAvailable
      item5.name = "录像可用率"
      item5.id = 6
      item5.routerUrl = ""
      this.videoList.push(item5)

      let item6 = {value: 0, name: "", id: 0, routerUrl: ""}
      item6.value = this.videoData.ministrySiteOnline
      item6.name = "部级点位在线率"
      item6.id = 7
      item6.routerUrl = ""
      this.videoList.push(item6)

      let item7 = {value: 0, name: "", id: 0, routerUrl: ""}
      item7.value = this.videoData.ministryVideoAvailable
      item7.name = "部级巡检录像可用率"
      item7.id = 8
      item7.routerUrl = ""
      this.videoList.push(item7)

      let item8 = {value: 0, name: "", id: 0, routerUrl: ""}
      item8.value = this.videoData.keySiteOnline
      item8.name = "重点点位在线率"
      item8.id = 9
      item8.routerUrl = ""
      this.videoList.push(item8)

      let item9 = {value: 0, name: "", id: 0, routerUrl: ""}
      item9.value = this.videoData.keyVideoAvailable
      item9.name = "重点点位录象可用率"
      item9.id = 10
      item9.routerUrl = ""
      this.videoList.push(item9)

      let item10 = {value: 0, name: "", id: 0, routerUrl: ""}
      item10.value = this.videoData.keyAnnotationAccuracy
      item10.name = "重点点位标注正确率"
      item10.id = 11
      item10.routerUrl = ""
      this.videoList.push(item10)

      let item11 = {value: 0, name: "", id: 0, routerUrl: ""}
      item11.value = this.videoData.keyTimingAccuracy
      item11.name = "重点点位按时正确率"
      item11.id = 12
      item11.routerUrl = ""
      this.videoList.push(item11)

      let item12 = {value: 0, name: "", id: 0, routerUrl: ""}
      item12.value = this.videoData.keyCommandImageOnline
      item12.name = "重点指挥图像在线率"
      item12.id = 13
      item12.routerUrl = ""
      this.videoList.push(item12)

      let item13 = {value: 0, name: "", id: 0, routerUrl: ""}
      item13.value = this.videoData.imageResourceSecurity
      item13.name = "图像资源安全管理"
      item13.id = 14
      item13.routerUrl = ""
      this.videoList.push(item13)
    },
    carData() {
      this.carList = [];
      let item = {value: 0, name: "", id: 0, routerUrl: ""}
      item.value = this.carData.viewConnectStability
      item.name = "视图库对接稳定性"
      item.id = 1
      item.routerUrl = ""
      item.style = {
        top: '65%',
        left: '70%'
      }
      this.carList.push(item)

      let item1 = {value: 0, name: "", id: 0, routerUrl: ""}
      item1.value = this.carData.siteOnline
      item1.name = "点位在线率"
      item1.id = 2
      item1.routerUrl = ""
      item1.style = {
        top: '46%',
        left: '66%'
      }
      this.carList.push(item1)

      let item2 = {value: 0, name: "", id: 0, routerUrl: ""}
      item2.value = this.carData.deviceDirectoryConsistent
      item2.name = "联网卡口目录一致率"
      item2.id = 3
      item2.routerUrl = ""
      item2.style = {
        top: '26%',
        left: '5%'
      }
      this.carList.push(item2)

      let item3 = {value: 0, name: "", id: 0, routerUrl: ""}
      item3.value = this.carData.vehicleInformationCollectionAccuracy
      item3.name = "信息采集准确率"
      item3.id = 4
      item3.routerUrl = ""
      item3.style = {
        top: '26%',
        left: '63%'
      }
      this.carList.push(item3)

      let item4 = {value: 0, name: "", id: 0, routerUrl: ""}
      item4.value = this.carData.vehicleCaptureIntegrity
      item4.name = "抓拍数据完整性"
      item4.id = 5
      item4.routerUrl = ""
      item4.style = {
        top: '46%',
        left: '12%'
      }
      this.carList.push(item4)

      let item5 = {value: 0, name: "", id: 0, routerUrl: ""}
      item5.value = this.carData.vehicleCaptureAccuracy
      item5.name = "抓拍数据准确性"
      item5.id = 6
      item5.routerUrl = ""
      item5.style = {
        top: '7%',
        left: '59.2%'
      }
      this.carList.push(item5)

      let item6 = {value: 0, name: "", id: 0, routerUrl: ""}
      item6.value = this.carData.vehicleTimingAccuracy
      item6.name = "时钟准确性"
      item6.id = 7
      item6.routerUrl = ""
      item6.style = {
        top: '65%',
        left: '13%'
      }
      this.carList.push(item6)

      let item7 = {value: 0, name: "", id: 0, routerUrl: ""}
      item7.value = this.carData.vehicleUploadTimeliness
      item7.name = "抓拍数据上传及时性"
      item7.id = 8
      item7.routerUrl = ""
      item7.style = {
        top: '83%',
        left: '59.5%'
      }
      this.carList.push(item7)

      let item8 = {value: 0, name: "", id: 0, routerUrl: ""}
      item8.value = this.carData.vehicleUrlAvailability
      item8.name = "url可用性"
      item8.id = 9
      item8.routerUrl = ""
      item8.style = {
        top: '83%',
        left: '18.5%'
      }
      this.carList.push(item8)

      let item9 = {value: 0, name: "", id: 0, routerUrl: ""}
      item9.value = this.carData.vehiclePictureAvailability
      item9.name = "抓拍数据大图可用性"
      item9.id = 10
      item9.style = {
        top: '7%',
        left: '15%'
      }
      item9.routerUrl = ""
      this.carList.push(item9)
    },
    faceData() {
      this.faceList = [];
      let item = {value: 0, name: "", id: 0, routerUrl: ""}
      item.value = this.faceData.viewConnectStability
      item.name = "视图库对接稳定性"
      item.id = 1
      item.routerUrl = ""
      item.style = {
        top: '13%',
        left: '2%'
      }
      this.faceList.push(item)

      let item1 = {value: 0, name: "", id: 0, routerUrl: ""}
      item1.value = this.faceData.siteOnline
      item1.name = "点位在线率"
      item1.id = 2
      item1.routerUrl = ""
      item1.style = {
        top: '23%',
        left: '19%'
      }
      this.faceList.push(item1)

      let item2 = {value: 0, name: "", id: 0, routerUrl: ""}
      item2.value = this.faceData.deviceDirectoryConsistent
      item2.name = "目录一致率"
      item2.id = 3
      item2.routerUrl = ""
      item2.style = {
        bottom: '18%',
        right: '2%'
      }
      this.faceList.push(item2)

      let item3 = {value: 0, name: "", id: 0, routerUrl: ""}
      item3.value = this.faceData.faceInformationCollectionAccuracy
      item3.name = "信息采集准确率"
      item3.id = 4
      item3.routerUrl = ""
      item3.style = {
        bottom: '2%',
        left: '19%'
      }
      this.faceList.push(item3)

      let item4 = {value: 0, name: "", id: 0, routerUrl: ""}
      item4.value = this.faceData.facePictureQualification
      item4.name = "抓拍图片合格性"
      item4.id = 5
      item4.routerUrl = ""
      item4.style = {
        top: '23%',
        right: '19%'
      }
      this.faceList.push(item4)

      let item5 = {value: 0, name: "", id: 0, routerUrl: ""}
      item5.value = this.faceData.faceTimingAccuracy
      item5.name = "抓拍图片时钟准确性"
      item5.id = 6
      item5.routerUrl = ""
      item5.style = {
        top: '13%',
        right: '2%'
      }
      this.faceList.push(item5)

      let item6 = {value: 0, name: "", id: 0, routerUrl: ""}
      item6.value = this.faceData.faceUploadTimeliness
      item6.name = "抓拍数据上传及时性"
      item6.id = 7
      item6.routerUrl = ""
      item6.style = {
        bottom: '2%',
        right: '19%'
      }
      this.faceList.push(item6)

      let item7 = {value: 0, name: "", id: 0, routerUrl: ""}
      item7.value = this.faceData.facePictureAvailability
      item7.name = "抓拍数据大图可用性"
      item7.id = 8
      item7.routerUrl = ""
      item7.style = {
        bottom: '18%',
        left: '2%'
      }
      this.faceList.push(item7)
    },
  }
}
</script>
@@ -557,6 +666,7 @@
  header {
    position: relative;
    z-index: 4;

    img {
      width: 100%;
      display: block;
@@ -764,6 +874,7 @@
                .value {
                  color: #e4b54f;
                }

                .title {
                  color: #dcf8ff;
                }
@@ -773,6 +884,7 @@
                .value {
                  color: #5cff9a;
                }

                .title {
                  color: #dcf8ff;
                }
@@ -782,6 +894,7 @@
                .value {
                  color: #ff7b72;
                }

                .title {
                  color: #dcf8ff;
                }
@@ -921,6 +1034,7 @@
              align-items: center;
              list-style-type: none;
              border-bottom: 1px dashed #223654;

              li {
                width: 25%;
                text-align: center;