From 5f6abeedb7ce43853ad486731a5e99b340ec6392 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期二, 17 九月 2024 18:55:39 +0800
Subject: [PATCH] 新大屏数据对接
---
src/views/screen/components/lineChart.vue | 49 ++
src/views/screen/components/screen-map/index.vue | 4
src/views/screen/index.vue | 816 +++++++++++++++++++++++++++++++-----------------------
3 files changed, 505 insertions(+), 364 deletions(-)
diff --git a/src/views/screen/components/lineChart.vue b/src/views/screen/components/lineChart.vue
index cc00d39..f2335f6 100644
--- a/src/views/screen/components/lineChart.vue
+++ b/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(() => {
diff --git a/src/views/screen/components/screen-map/index.vue b/src/views/screen/components/screen-map/index.vue
index 5576e0c..ea2a99f 100644
--- a/src/views/screen/components/screen-map/index.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index ee424c6..de0e889 100644
--- a/src/views/screen/index.vue
+++ b/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;
--
Gitblit v1.8.0