From bfd3aa99f6f97d7daa9c81f01b349ba50225b523 Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期二, 20 八月 2024 11:28:44 +0800
Subject: [PATCH] feat：大屏接口数据展示
---
src/api/newpage.js | 32 +
/dev/null | 179 ----------
src/views/screen/components/screen-data/index.vue | 41 +
src/views/screen/components/screen-examine/components/car-chart.vue | 143 ++++++++
src/views/screen/components/screen-data/components/data-hola.vue | 8
src/views/screen/newPage/index.vue | 170 +++++----
src/views/screen/components/screen-examine/components/video-chart.vue | 232 +++++++++++++
src/views/screen/components/screen-examine/components/face-chart.vue | 127 +++++++
src/views/screen/components/screen-table/index.vue | 41 -
src/views/screen/components/screen-examine/index.vue | 8
10 files changed, 681 insertions(+), 300 deletions(-)
diff --git a/src/api/newpage.js b/src/api/newpage.js
index 29a2767..70c4e00 100644
--- a/src/api/newpage.js
+++ b/src/api/newpage.js
@@ -16,6 +16,14 @@
});
}
+// 宸ュ崟鍦板尯
+export function getWorkOrderRegion() {
+ return request({
+ url: "/dashboard/workOrder/region",
+ method: "get",
+ });
+}
+
//璁惧姝ｅ父鐜�
export function getNormalRate(id) {
return request({
@@ -23,3 +31,27 @@
method: "get",
});
}
+
+//浜鸿劯鑰冩牳鏁版嵁
+export function checkFace(id) {
+ return request({
+ url: "/dashboard/check/face",
+ method: "get",
+ });
+}
+
+// 杞﹁締鑰冩牳鏁版嵁
+export function checkCar(id) {
+ return request({
+ url: "/dashboard/check/car",
+ method: "get",
+ });
+}
+
+// 瑙嗛鑰冩牳鏁版嵁
+export function checkVideo(id) {
+ return request({
+ url: "/dashboard/check/video",
+ method: "get",
+ });
+}
diff --git a/src/views/screen/components/screen-data/components/data-hola.vue b/src/views/screen/components/screen-data/components/data-hola.vue
index da906ed..ba9a0cc 100644
--- a/src/views/screen/components/screen-data/components/data-hola.vue
+++ b/src/views/screen/components/screen-data/components/data-hola.vue
@@ -11,7 +11,7 @@
name: 'DataHola',
props: {
centerValue: {
- type: [Number, String],
+ type: Number,
default: 0
},
holaColor: {
@@ -120,6 +120,12 @@
mounted() {
myChart = echarts.init(this.$refs['chartRef']);
this.initChart();
+ },
+ watch: {
+ centerValue() {
+ myChart = echarts.init(this.$refs['chartRef']);
+ this.initChart();
+ }
}
}
</script>
diff --git a/src/views/screen/components/screen-data/index.vue b/src/views/screen/components/screen-data/index.vue
index 85d070b..906d1c8 100644
--- a/src/views/screen/components/screen-data/index.vue
+++ b/src/views/screen/components/screen-data/index.vue
@@ -17,21 +17,21 @@
<div class="panel-item">
<data-hola
:holaTitle="`宸ュ崟鎬绘暟`"
- :centerValue="workOrderData.workOrderTotal.totalNum"
+ :centerValue="workOrderData.totalNum"
:holaColor="`#4ea8ff`"
></data-hola>
</div>
<div class="panel-item">
<data-hola
:holaTitle="`宸插鐞嗗伐鍗曟暟`"
- :centerValue="workOrderData.workOrderTotal.todolNum"
+ :centerValue="workOrderData.todoNum"
:holaColor="`#5dec24`"
></data-hola>
</div>
<div class="panel-item">
<data-hola
:holaTitle="`鏈鐞嗗伐鍗曟暟`"
- :centerValue="workOrderData.workOrderTotal.doneNum"
+ :centerValue="workOrderData.doneNum"
:holaColor="`#dfc639`"
></data-hola>
</div>
@@ -66,23 +66,19 @@
props: {
workOrderData: {
type: Object,
+ default: {},
+ },
+ workOrderRegion: {
+ type: Array,
default: null,
},
},
data() {
return {
dataList: {
- name: [
- "瀵岄『鍘�",
- "鑽ｅ幙",
- "楂樻柊鍖�",
- "鑷祦浜曞尯",
- "璐′簳鍖�",
- "澶у畨鍖�",
- "娌挎哗鍖�",
- ],
- data1: [210, 310, 40, 102, 111, 201, 123],
- data2: [20, 30, 10, 10, 11, 21, 5],
+ name: [],
+ data1: [],
+ data2: [],
},
};
},
@@ -142,6 +138,23 @@
chart = echarts.init(this.$refs.barChart);
this.initEchart();
},
+ watch: {
+ workOrderRegion() {
+ let name = [];
+ let data1 = [];
+ let data2 = [];
+ this.workOrderRegion.map((item) => {
+ name.push(item.area);
+ data1.push(item.todoNum);
+ data2.push(item.doneNum);
+ })
+ this.dataList.name = name;
+ this.dataList.data1 = data1;
+ this.dataList.data2 = data2;
+ chart = echarts.init(this.$refs.barChart);
+ this.initEchart();
+ }
+ },
};
</script>
diff --git a/src/views/screen/components/screen-examine/components/car-chart.vue b/src/views/screen/components/screen-examine/components/car-chart.vue
new file mode 100644
index 0000000..48f4788
--- /dev/null
+++ b/src/views/screen/components/screen-examine/components/car-chart.vue
@@ -0,0 +1,143 @@
+<template>
+ <div class="chart-container">
+ <div class="rank-chart">
+ <div class="hola-item" v-for="item in dataList" :key="item.id">
+ <examine-hola :startColor="'#124ae4'" :endColor="'#99b3fd'" :centerValue="item.value" :bottomTitle="item.name"
+ :routerPath="item.routerUrl"></examine-hola>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import ExamineHola from "./examine-hola.vue";
+let barChart = null;
+export default {
+ name: "CarChart",
+ components: {
+ ExamineHola,
+ },
+ props: {
+ carList: {
+ type: Object,
+ default: null
+ },
+ },
+ data() {
+ return {
+ dataList: [],
+ };
+ },
+
+ methods: {},
+ mounted() { },
+ watch: {
+ carList() {
+ // "viewConnectStability": 95.26, //瑙嗗浘搴撳鎺ョǔ瀹氭��
+ // "siteOnline": 95.26, //鐐逛綅鍦ㄧ嚎鐜�
+ // "deviceDirectoryConsistent": 95.26, //鑱旂綉鍗″彛鐩綍涓�鑷寸巼
+ // "vehicleInformationCollectionAccuracy": 95.26, //淇℃伅閲囬泦鍑嗙‘鐜�
+ // "vehicleCaptureIntegrity": 95.26, //鎶撴媿鏁版嵁瀹屾暣鎬�
+ // "vehicleCaptureAccuracy": 95.26, //鎶撴媿鏁版嵁鍑嗙‘鎬�
+ // "vehicleTimingAccuracy": 95.26, //鏃堕挓鍑嗙‘鎬�
+ // "vehicleUploadTimeliness": 95.26, //鎶撴媿鏁版嵁涓婁紶鍙婃椂鎬�
+ // "vehicleUrlAvailability": 95.26, //url鍙敤鎬�
+ // "vehiclePictureAvailability": 95.26 //鎶撴媿鏁版嵁澶у浘鍙敤鎬�
+ let item = { value: 0, name: "", id: 0, routerUrl: "" }
+ item.value = this.carList.viewConnectStability
+ item.name = "瑙嗗浘搴撳鎺ョǔ瀹氭��"
+ item.id = 1
+ item.routerUrl = ""
+ this.dataList.push(item)
+
+ let item1 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item1.value = this.carList.siteOnline
+ item1.name = "鐐逛綅鍦ㄧ嚎鐜�"
+ item1.id = 2
+ item1.routerUrl = ""
+ this.dataList.push(item1)
+
+ let item2 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item2.value = this.carList.deviceDirectoryConsistent
+ item2.name = "鑱旂綉鍗″彛鐩綍涓�鑷寸巼"
+ item2.id = 3
+ item2.routerUrl = ""
+ this.dataList.push(item2)
+
+ let item3 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item3.value = this.carList.vehicleInformationCollectionAccuracy
+ item3.name = "淇℃伅閲囬泦鍑嗙‘鐜�"
+ item3.id = 4
+ item3.routerUrl = ""
+ this.dataList.push(item3)
+
+ let item4 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item4.value = this.carList.vehicleCaptureIntegrity
+ item4.name = "鎶撴媿鏁版嵁瀹屾暣鎬�"
+ item4.id = 5
+ item4.routerUrl = ""
+ this.dataList.push(item4)
+
+ let item5 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item5.value = this.carList.vehicleCaptureAccuracy
+ item5.name = "鎶撴媿鏁版嵁鍑嗙‘鎬�"
+ item5.id = 6
+ item5.routerUrl = ""
+ this.dataList.push(item5)
+
+ let item6 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item6.value = this.carList.vehicleTimingAccuracy
+ item6.name = "鏃堕挓鍑嗙‘鎬�"
+ item6.id = 7
+ item6.routerUrl = ""
+ this.dataList.push(item6)
+
+ let item7 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item7.value = this.carList.vehicleUploadTimeliness
+ item7.name = "鎶撴媿鏁版嵁涓婁紶鍙婃椂鎬�"
+ item7.id = 8
+ item7.routerUrl = ""
+ this.dataList.push(item7)
+
+ let item8 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item8.value = this.carList.vehicleUrlAvailability
+ item8.name = "url鍙敤鎬�"
+ item8.id = 9
+ item8.routerUrl = ""
+ this.dataList.push(item8)
+
+ let item9 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item9.value = this.carList.vehiclePictureAvailability
+ item9.name = "鎶撴媿鏁版嵁澶у浘鍙敤鎬�"
+ item9.id = 10
+ item9.routerUrl = ""
+ this.dataList.push(item9)
+
+ },
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+ width: 100%;
+ height: 100%;
+
+ .rank-chart {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ align-content: space-between;
+ padding: 20px 0;
+ box-sizing: border-box;
+
+ .hola-item {
+ flex-shrink: 0;
+ width: 150px;
+ height: 120px;
+ }
+ }
+}
+</style>
diff --git a/src/views/screen/components/screen-examine/components/examine-chart.vue b/src/views/screen/components/screen-examine/components/examine-chart.vue
deleted file mode 100644
index 2c1dfde..0000000
--- a/src/views/screen/components/screen-examine/components/examine-chart.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
- <div class="chart-container">
- <div class="rank-chart">
- <div
- class="hola-item"
- v-for="item in dataType == 'car' ? dataListA : dataList"
- :key="item.id"
- >
- <examine-hola
- :startColor="'#124ae4'"
- :endColor="'#99b3fd'"
- :centerValue="item.value"
- :bottomTitle="item.name"
- :routerPath="item.routerUrl"
- ></examine-hola>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import ExamineHola from "./examine-hola.vue";
-let barChart = null;
-export default {
- name: "ExamineChart",
- components: {
- ExamineHola,
- },
- props: {
- dataType: {
- type: String,
- default: "",
- },
- },
- data() {
- return {
- dataList: [
- {
- id: 1,
- name: "骞冲彴鍦ㄧ嚎鐜�",
- value: 60,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 2,
- name: "涓�鏈轰竴妗ｅ悎鏍肩巼",
- value: 20,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 3,
- name: "妗ｆ鑰冩牳姣�",
- value: 60,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 4,
- name: "鐐逛綅鍦ㄧ嚎鐜�",
- value: 40,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 5,
- name: "褰曞儚鍙敤鐜�",
- value: 80,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 6,
- name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
- value: 20,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 7,
- name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
- value: 20,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 8,
- name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
- value: 20,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- ],
- dataListA: [
- {
- id: 1,
- name: "骞冲彴鍦ㄧ嚎鐜�",
- value: 60,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 2,
- name: "涓�鏈轰竴妗ｅ悎鏍肩巼",
- value: 20,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 3,
- name: "妗ｆ鑰冩牳姣�",
- value: 60,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 4,
- name: "鐐逛綅鍦ㄧ嚎鐜�",
- value: 40,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 5,
- name: "褰曞儚鍙敤鐜�",
- value: 80,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 6,
- name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
- value: 20,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 7,
- name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
- value: 20,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 8,
- name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
- value: 20,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 9,
- name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
- value: 20,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- {
- id: 10,
- name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
- value: 20,
- routerUrl: "/car/vehicle-data-monitor/index",
- },
- ],
- };
- },
-
- methods: {},
- mounted() {},
-};
-</script>
-
-<style lang="scss" scoped>
-.chart-container {
- width: 100%;
- height: 100%;
-
- .rank-chart {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- align-content: space-between;
- padding: 20px 0;
- box-sizing: border-box;
-
- .hola-item {
- flex-shrink: 0;
- width: 150px;
- height: 120px;
- }
- }
-}
-</style>
diff --git a/src/views/screen/components/screen-examine/components/face-chart.vue b/src/views/screen/components/screen-examine/components/face-chart.vue
new file mode 100644
index 0000000..3cc6b3f
--- /dev/null
+++ b/src/views/screen/components/screen-examine/components/face-chart.vue
@@ -0,0 +1,127 @@
+<template>
+ <div class="chart-container">
+ <div class="rank-chart">
+ <div class="hola-item" v-for="item in dataList" :key="item.id">
+ <examine-hola :startColor="'#124ae4'" :endColor="'#99b3fd'" :centerValue="item.value" :bottomTitle="item.name"
+ :routerPath="item.routerUrl"></examine-hola>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import ExamineHola from "./examine-hola.vue";
+let barChart = null;
+export default {
+ name: "FaceChart",
+ components: {
+ ExamineHola,
+ },
+ props: {
+ faceList: {
+ type: Object,
+ default: null
+ },
+ },
+ data() {
+ return {
+ dataList: [],
+ };
+ },
+
+ methods: {},
+ mounted() { },
+ watch: {
+ faceList() {
+ // "viewConnectStability": 96.39, //瑙嗗浘搴撳鎺ョǔ瀹氭��
+ // "siteOnline": 96.39, //鐐逛綅鍦ㄧ嚎鐜�
+ // "deviceDirectoryConsistent": 96.39, //鐩綍涓�鑷寸巼
+ // "faceInformationCollectionAccuracy": 96.39, //淇℃伅閲囬泦鍑嗙‘鐜�
+ // "facePictureQualification": 96.39, //鎶撴媿鍥剧墖鍚堟牸鎬�
+ // "faceTimingAccuracy": 96.39, //鎶撴媿鍥剧墖鏃堕挓鍑嗙‘鎬�
+ // "faceUploadTimeliness": 96.39, //鎶撴媿鏁版嵁涓婁紶鍙婃椂鎬�
+ // "facePictureAvailability": 96.39 //鎶撴媿鏁版嵁澶у浘鍙敤鎬�
+ let item = { value: 0, name: "", id: 0, routerUrl: "" }
+ item.value = this.faceList.viewConnectStability
+ item.name = "瑙嗗浘搴撳鎺ョǔ瀹氭��"
+ item.id = 1
+ item.routerUrl = ""
+ this.dataList.push(item)
+
+ let item1 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item1.value = this.faceList.siteOnline
+ item1.name = "鐐逛綅鍦ㄧ嚎鐜�"
+ item1.id = 2
+ item1.routerUrl = ""
+ this.dataList.push(item1)
+
+ let item2 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item2.value = this.faceList.deviceDirectoryConsistent
+ item2.name = "鐩綍涓�鑷寸巼"
+ item2.id = 3
+ item2.routerUrl = ""
+ this.dataList.push(item2)
+
+ let item3 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item3.value = this.faceList.faceInformationCollectionAccuracy
+ item3.name = "淇℃伅閲囬泦鍑嗙‘鐜�"
+ item3.id = 4
+ item3.routerUrl = ""
+ this.dataList.push(item3)
+
+ let item4 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item4.value = this.faceList.facePictureQualification
+ item4.name = "鎶撴媿鍥剧墖鍚堟牸鎬�"
+ item4.id = 5
+ item4.routerUrl = ""
+ this.dataList.push(item4)
+
+ let item5 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item5.value = this.faceList.faceTimingAccuracy
+ item5.name = "鎶撴媿鍥剧墖鏃堕挓鍑嗙‘鎬�"
+ item5.id = 6
+ item5.routerUrl = ""
+ this.dataList.push(item5)
+
+ let item6 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item6.value = this.faceList.faceUploadTimeliness
+ item6.name = "鎶撴媿鏁版嵁涓婁紶鍙婃椂鎬�"
+ item6.id = 7
+ item6.routerUrl = ""
+ this.dataList.push(item6)
+
+ let item7 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item7.value = this.faceList.facePictureAvailability
+ item7.name = "鎶撴媿鏁版嵁澶у浘鍙敤鎬�"
+ item7.id = 8
+ item7.routerUrl = ""
+ this.dataList.push(item7)
+
+ },
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+ width: 100%;
+ height: 100%;
+
+ .rank-chart {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ align-content: space-between;
+ padding: 20px 0;
+ box-sizing: border-box;
+
+ .hola-item {
+ flex-shrink: 0;
+ width: 150px;
+ height: 120px;
+ }
+ }
+}
+</style>
diff --git a/src/views/screen/components/screen-examine/components/video-chart.vue b/src/views/screen/components/screen-examine/components/video-chart.vue
new file mode 100644
index 0000000..c008384
--- /dev/null
+++ b/src/views/screen/components/screen-examine/components/video-chart.vue
@@ -0,0 +1,232 @@
+<template>
+ <div class="chart-container">
+ <div class="rank-chart">
+ <div class="hola-item" v-for="item in dataList" :key="item.id">
+ <examine-hola :startColor="'#124ae4'" :endColor="'#99b3fd'" :centerValue="item.value" :bottomTitle="item.name"
+ :routerPath="item.routerUrl"></examine-hola>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import ExamineHola from "./examine-hola.vue";
+let barChart = null;
+export default {
+ name: "VideoChart",
+ components: {
+ ExamineHola,
+ },
+ props: {
+ videoList: {
+ type: Object,
+ default: null
+ },
+ },
+ data() {
+ return {
+ dataList: [],
+ };
+ },
+
+ methods: {},
+ mounted() { },
+ watch: {
+ videoList() {
+ // "platformOnline": 96.97, //骞冲彴鍦ㄧ嚎鐜�
+ // "monitorQualification": 96.91, //涓�鏈轰竴妗ｅ悎鏍肩巼
+ // "monitorRegistration": 96.44, //涓�鏈轰竴妗ｆ敞鍐岀巼
+ // "archivesRate": 96.4, //妗ｆ鑰冩牳姣�
+ // "siteOnline": 96.4, //鐐逛綅鍦ㄧ嚎鐜�
+ // "videoAvailable": 96.52, //褰曡薄鍙敤鐜�
+ // "annotationAccuracy": 97.15, //鏍囨敞姝ｇ‘鐜�
+ // "timingAccuracy": 97.15, //鏍℃椂鍑嗙‘鐜�
+ // "keySiteOnline": 97.15, //閲嶇偣鐐逛綅鍦ㄧ嚎鐜�
+ // "keyVideoAvailable": 97.15, //閲嶇偣鐐逛綅褰曡薄鍙敤鐜�
+ // "keyAnnotationAccuracy": 97.15, //閲嶇偣鐐逛綅鏍囨敞姝ｇ‘鐜�
+ // "keyTimingAccuracy": 97.15, //閲嶇偣鐐逛綅鎸夋椂姝ｇ‘鐜�
+ // "keyCommandImageInspection": 97.15, //閲嶇偣鎸囨尌鍥惧儚鍏畨閮ㄥ贰妫�缁撴灉
+ // "keyCommandImageDirectoryTree": 96.07, //閲嶇偣鎸囨尌鍥惧儚鐩綍鏍�
+ // "onlineInspectionPlatform": 96.07, //鍦ㄧ嚎妫�鏌ュ钩鍙伴儴缃插強杩愯鐜�
+ // "videoTransmissionAssetsAccuracy": 96.07, //浼犺緭缃戣祫浜у噯纭巼
+ // "videoTransmissionAssetsWeakPasswordScore": 96.07, //浼犺緭缃戣祫浜у急鍙ｄ护寰楀垎姣旂巼
+ // "videoTransmissionDangerousAssetsScore": 96.07, //浼犺緭缃戝嵄闄╄祫浜у緱鍒嗘瘮閲�
+ // "videoTransmissionBoundaryIntegrityDetection": 96.07, //浼犺緭缃戣竟鐣屽畬鏁存�ф娴嬫墸鍒嗛」
+ // "keyCommandImageOnline": 96.41, //鏈堣繍琛岀巼
+ // "operatingRate": 96.07 //閲嶇偣鎸囨尌鍥惧儚鍦ㄧ嚎鐜�
+ let item = { value: 0, name: "", id: 0, routerUrl: "" }
+ item.value = this.videoList.platformOnline
+ item.name = "骞冲彴鍦ㄧ嚎鐜�"
+ item.id = 1
+ item.routerUrl = ""
+ this.dataList.push(item)
+
+ let item1 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item1.value = this.videoList.monitorQualification
+ item1.name = "涓�鏈轰竴妗ｅ悎鏍肩巼"
+ item1.id = 2
+ item1.routerUrl = ""
+ this.dataList.push(item1)
+
+ let item2 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item2.value = this.videoList.monitorRegistration
+ item2.name = "涓�鏈轰竴妗ｆ敞鍐岀巼"
+ item2.id = 3
+ item2.routerUrl = ""
+ this.dataList.push(item2)
+
+ let item3 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item3.value = this.videoList.archivesRate
+ item3.name = "妗ｆ鑰冩牳姣�"
+ item3.id = 4
+ item3.routerUrl = ""
+ this.dataList.push(item3)
+
+ let item4 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item4.value = this.videoList.siteOnline
+ item4.name = "鐐逛綅鍦ㄧ嚎鐜�"
+ item4.id = 5
+ item4.routerUrl = ""
+ this.dataList.push(item4)
+
+ let item5 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item5.value = this.videoList.videoAvailable
+ item5.name = "褰曡薄鍙敤鐜�"
+ item5.id = 6
+ item5.routerUrl = ""
+ this.dataList.push(item5)
+
+ let item6 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item6.value = this.videoList.annotationAccuracy
+ item6.name = "鏍囨敞姝ｇ‘鐜�"
+ item6.id = 7
+ item6.routerUrl = ""
+ this.dataList.push(item6)
+
+ let item7 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item7.value = this.videoList.timingAccuracy
+ item7.name = "鏍℃椂鍑嗙‘鐜�"
+ item7.id = 8
+ item7.routerUrl = ""
+ this.dataList.push(item7)
+
+ let item8 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item8.value = this.videoList.keySiteOnline
+ item8.name = "閲嶇偣鐐逛綅鍦ㄧ嚎鐜�"
+ item8.id = 9
+ item8.routerUrl = ""
+ this.dataList.push(item8)
+
+ let item9 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item9.value = this.videoList.keyVideoAvailable
+ item9.name = "閲嶇偣鐐逛綅褰曡薄鍙敤鐜�"
+ item9.id = 10
+ item9.routerUrl = ""
+ this.dataList.push(item9)
+
+ let item10 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item10.value = this.videoList.keyAnnotationAccuracy
+ item10.name = "閲嶇偣鐐逛綅鏍囨敞姝ｇ‘鐜�"
+ item10.id = 11
+ item10.routerUrl = ""
+ this.dataList.push(item10)
+
+ let item11 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item11.value = this.videoList.keyTimingAccuracy
+ item11.name = "閲嶇偣鐐逛綅鎸夋椂姝ｇ‘鐜�"
+ item11.id = 12
+ item11.routerUrl = ""
+ this.dataList.push(item11)
+
+ let item12 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item12.value = this.videoList.keyCommandImageInspection
+ item12.name = "閲嶇偣鎸囨尌鍥惧儚宸℃缁撴灉"
+ item12.id = 13
+ item12.routerUrl = ""
+ this.dataList.push(item12)
+
+ let item13 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item13.value = this.videoList.keyCommandImageDirectoryTree
+ item13.name = "閲嶇偣鎸囨尌鍥惧儚鐩綍鏍�"
+ item13.id = 14
+ item13.routerUrl = ""
+ this.dataList.push(item13)
+
+ let item14 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item14.value = this.videoList.onlineInspectionPlatform
+ item14.name = "骞冲彴閮ㄧ讲鍙婅繍琛岀巼"
+ item14.id = 15
+ item14.routerUrl = ""
+ this.dataList.push(item14)
+
+ let item15 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item15.value = this.videoList.videoTransmissionAssetsAccuracy
+ item15.name = "璧勪骇鍑嗙‘鐜�"
+ item15.id = 16
+ item15.routerUrl = ""
+ this.dataList.push(item15)
+
+ let item16 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item16.value = this.videoList.videoTransmissionAssetsWeakPasswordScore
+ item16.name = "璧勪骇寮卞彛浠ゅ緱鍒嗘瘮鐜�"
+ item16.id = 17
+ item16.routerUrl = ""
+ this.dataList.push(item16)
+
+ let item17 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item17.value = this.videoList.videoTransmissionDangerousAssetsScore
+ item17.name = "鍗遍櫓璧勪骇寰楀垎姣旈噸"
+ item17.id = 18
+ item17.routerUrl = ""
+ this.dataList.push(item17)
+
+ let item18 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item18.value = this.videoList.videoTransmissionBoundaryIntegrityDetection
+ item18.name = "杈圭晫瀹屾暣鎬ф娴嬫墸鍒嗛」"
+ item18.id = 19
+ item18.routerUrl = ""
+ this.dataList.push(item18)
+
+ let item19 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item19.value = this.videoList.keyCommandImageOnline
+ item19.name = "鏈堣繍琛岀巼"
+ item19.id = 20
+ item19.routerUrl = ""
+ this.dataList.push(item19)
+
+ let item20 = { value: 0, name: "", id: 0, routerUrl: "" }
+ item20.value = this.videoList.operatingRate
+ item20.name = "閲嶇偣鎸囨尌鍥惧儚鍦ㄧ嚎鐜�"
+ item20.id = 21
+ item20.routerUrl = ""
+ this.dataList.push(item20)
+
+
+ },
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-container {
+ width: 100%;
+ height: 100%;
+
+ .rank-chart {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ align-content: space-between;
+ padding: 20px 0;
+ box-sizing: border-box;
+
+ .hola-item {
+ flex-shrink: 0;
+ width: 150px;
+ height: 120px;
+ }
+ }
+}
+</style>
diff --git a/src/views/screen/components/screen-examine/index.vue b/src/views/screen/components/screen-examine/index.vue
index 9186007..d04c4c5 100644
--- a/src/views/screen/components/screen-examine/index.vue
+++ b/src/views/screen/components/screen-examine/index.vue
@@ -87,13 +87,17 @@
<script>
import WrapperTitle from "../wrapper-title/index";
-import ExamineChart from "./components/examine-chart";
+import faceChart from "./components/face-chart";
+import carChart from "./components/car-chart";
+import videoChart from "./components/video-chart";
import ExamineTable from "./components/examine-table";
export default {
name: "ScreenExamine",
components: {
WrapperTitle,
- ExamineChart,
+ faceChart,
+ carChart,
+ videoChart,
ExamineTable,
},
data() {
diff --git a/src/views/screen/components/screen-table/index.vue b/src/views/screen/components/screen-table/index.vue
index 4400918..be0de28 100644
--- a/src/views/screen/components/screen-table/index.vue
+++ b/src/views/screen/components/screen-table/index.vue
@@ -6,13 +6,7 @@
></wrapper-title> -->
<div class="table-content" ref="tabContent">
<div class="table-wrapper">
- <el-table
- :data="tableData"
- border
- :height="tableHeight"
- :max-height="tableHeight"
- class="rank-table"
- >
+ <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">
<el-table-column prop="area" label="鍦板尯" align="center" width="100">
</el-table-column>
@@ -34,12 +28,7 @@
</div>
</div>
<div class="tip-num">
- {{
- scope.row.faceRate?(
- (scope.row.faceNormalNum / scope.row.faceRate) *
- 100
- ).toFixed(0)+'%':'--'
- }}
+ {{ scope.row.faceRate ? scope.row.faceRate + '%' : '--' }}
</div>
</el-tooltip>
</template>
@@ -58,17 +47,12 @@
<div class="tip-item">
<div class="tip-label">璁惧寮傚父鏁�:</div>
<div class="tip-info tip-danger">
- {{ scope.row.carNormalNum }}
+ {{ scope.row.carErrorNum }}
</div>
</div>
</div>
<div class="tip-num">
- {{
- scope.row.carRate?(
- (scope.row.carNormalNum / scope.row.carRate) *
- 100
- ).toFixed(0)+'%':'--'
- }}
+ {{ scope.row.carRate ? scope.row.carRate + '%' : '--' }}
</div>
</el-tooltip>
</template>
@@ -87,17 +71,12 @@
<div class="tip-item">
<div class="tip-label">璁惧寮傚父鏁�:</div>
<div class="tip-info tip-danger">
- {{ scope.row.videoNormalNum }}
+ {{ scope.row.videoErrorNum }}
</div>
</div>
</div>
<div class="tip-num">
- {{
- scope.row.videoRate?(
- (scope.row.videoNormalNum / scope.row.videoRate) *
- 100
- ).toFixed(0)+'%':'--'
- }}
+ {{ scope.row.videoRate ? scope.row.videoRate + '%' : '--' }}
</div>
</el-tooltip>
</template>
@@ -239,7 +218,7 @@
border-color: #56739e99 !important;
}
-::v-deep .el-table th.el-table__cell > .cell {
+::v-deep .el-table th.el-table__cell>.cell {
color: #447ed6;
}
@@ -253,11 +232,7 @@
background-color: transparent !important;
}
-::v-deep
- .el-table--enable-row-hover
- .el-table__body
- tr:hover
- > td.el-table__cell {
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background-color: #447ed648;
}
diff --git a/src/views/screen/newPage/index.vue b/src/views/screen/newPage/index.vue
index 32a7ed9..62ec7c4 100644
--- a/src/views/screen/newPage/index.vue
+++ b/src/views/screen/newPage/index.vue
@@ -4,12 +4,8 @@
<div class="header_box">
<div class="tabs-box">
<el-tabs v-model="activeName" @tab-click="tabChange">
- <el-tab-pane
- v-for="item in testData1"
- :label="item.name"
- :name="item.value"
- :key="item.value"
- ></el-tab-pane>
+ <el-tab-pane v-for="item in testData1" :label="item.name" :name="item.value"
+ :key="item.value"></el-tab-pane>
</el-tabs>
</div>
</div>
@@ -21,8 +17,12 @@
<div>杩愮淮鑰冩牳澶у睆</div>
</div>
<div class="card" style="height: 622px">
- <div class="card_header"><div class="title">宸ュ崟鏁版嵁</div></div>
- <div><ScreenData :workOrderData="workOrderData"></ScreenData></div>
+ <div class="card_header">
+ <div class="title">宸ュ崟鏁版嵁</div>
+ </div>
+ <div>
+ <ScreenData :workOrderData="workOrderData" :workOrderRegion="workOrderRegion"></ScreenData>
+ </div>
</div>
</div>
<div class="large_screen_box">
@@ -35,36 +35,25 @@
<div class="title">璁惧鏁版嵁</div>
</div>
<div>
- <div
- class="device_data"
- v-for="(item, index) in deviceList"
- :key="index"
- >
- <img
- src="../../../assets/images/screen/lxicon.png"
- alt=""
- style="height: 25px"
- />
+ <div class="device_data" v-for="(item, index) in deviceList" :key="index">
+ <img src="../../../assets/images/screen/lxicon.png" alt="" style="height: 25px" />
<div style="margin: 0 10px">{{ item.type }}</div>
<div class="data-info">
- <div class="data-lable">璁惧鎬绘暟</div>
- <div class="data-num type1">
- <span v-roll>{{ item.totalNum }}</span
- ><i class="el-icon-top"></i>
+ <div class="data-lable center">璁惧鎬绘暟</div>
+ <div class="data-num type1 center">
+ <span v-roll>{{ item.totalNum }}</span>
</div>
</div>
<div class="data-info">
- <div class="data-lable">璁惧姝ｅ父鏁�</div>
- <div class="data-num type2">
- <span v-roll>{{ item.normalNum }}</span
- ><i class="el-icon-top"></i>
+ <div class="data-lable center">璁惧姝ｅ父鏁�</div>
+ <div class="data-num type2 center">
+ <span v-roll>{{ item.normalNum }}</span>
</div>
</div>
<div class="data-info">
- <div class="data-lable">璁惧寮傚父鏁�</div>
- <div class="data-num type3">
- <span v-roll>{{ item.errorNum }}</span
- ><i class="el-icon-bottom"></i>
+ <div class="data-lable center">璁惧寮傚父鏁�</div>
+ <div class="data-num type3 center">
+ <span v-roll>{{ item.errorNum }}</span>
</div>
</div>
</div>
@@ -85,7 +74,7 @@
<div class="card_header">
<div class="title">浜鸿劯鑰冩牳鏁版嵁</div>
<div style="width: 600px; margin-left: -20px">
- <ExamineChart class="wrapper-item" dataType="face"></ExamineChart>
+ <FaceChart class="wrapper-item" :faceList="faceList"></FaceChart>
</div>
</div>
</div>
@@ -93,24 +82,28 @@
<div class="card_header">
<div class="titleCar">杞﹁締鑰冩牳鏁版嵁</div>
</div>
- <div
- style="
+ <div style="
overflow: hidden;
overflow-x: auto;
margin-top: -9px;
height: 90%;
- "
- >
+ ">
<div style="width: 750px">
- <ExamineChart class="wrapper-item" dataType="car"></ExamineChart>
+ <CarChart class="wrapper-item" :carList="carList"></CarChart>
</div>
</div>
</div>
<div class="footer_card">
<div class="card_header">
- <div class="title">瑙嗛鑰冩牳鏁版嵁</div>
- <div style="width: 600px; margin-left: -20px">
- <ExamineChart class="wrapper-item" dataType="video"></ExamineChart>
+ <div class="titleCar">瑙嗛鑰冩牳鏁版嵁</div>
+ </div>
+ <div style="
+ overflow: auto;
+ margin-top: -9px;
+ height: 90%;
+ ">
+ <div style="width: 1100px">
+ <VideoChart class="wrapper-item" :videoList="videoList"></VideoChart>
</div>
</div>
</div>
@@ -122,17 +115,21 @@
import ScreenTable from "../components/screen-table/index.vue";
import ScreenMap from "../components/screen-wrapper/index.vue";
import ScreenMapThree from "../components/screen-map-three/index";
-import ExamineChart from "../components/screen-examine/components/examine-chart.vue";
+import FaceChart from "../components/screen-examine/components/face-chart.vue";
+import CarChart from "../components/screen-examine/components/car-chart.vue";
+import VideoChart from "../components/screen-examine/components/video-chart.vue";
import ScreenData from "../components/screen-data/index.vue";
import NewMap from "./components/newMap.vue";
-import { getDeviceData, getWorkOrderData, getNormalRate } from "@/api/newpage";
+import { getDeviceData, getWorkOrderData, getWorkOrderRegion, getNormalRate, checkFace, checkCar, checkVideo } from "@/api/newpage";
export default {
name: "Newpage",
components: {
ScreenTable,
ScreenMapThree,
ScreenMap,
- ExamineChart,
+ FaceChart,
+ CarChart,
+ VideoChart,
ScreenData,
NewMap,
},
@@ -155,30 +152,11 @@
},
],
deviceList: [],
- workOrderData: {
- workOrderRegion: {
- create_time: "2024-03-05T19:04:24",
- deleted: 0,
- error_type: "缃戠粶鏁呴殰,鏃犲厜",
- id: 1,
- serial_number: 0,
- source: "涓北澶ч亾涓庡疂鍠勫贩浜ゅ弶鍙ｄ笢",
- status: "DISTRIBUTED",
- unit_id: 2,
- update_time: "2024-04-15T17:07:54",
- work_order_no: "202403051212",
- yw_check_result: "/profile/upload/2024/03/26/20240326100819A001.jpg",
- yw_condition: "淇瀹屾垚",
- yw_handle_time: "2024-03-05T19:04:06",
- yw_people_id: 1,
- yw_result: "OK",
- },
- workOrderTotal: {
- doneNum: 8,
- todoNum: 20,
- totalNum: 28,
- },
- },
+ workOrderRegion: [],
+ carList: '',
+ faceList: '',
+ videoList: '',
+ workOrderData: {},
tableData: [],
};
},
@@ -197,37 +175,63 @@
.then((res) => {
this.deviceList = res.data;
})
- .catch((err) => {});
+ .catch((err) => { });
getWorkOrderData()
.then((res) => {
this.workOrderData = res.data;
})
- .catch((err) => {});
+ .catch((err) => { });
+ getWorkOrderRegion()
+ .then((res) => {
+ this.workOrderRegion = res.data;
+ })
+ .catch((err) => { });
this.getTableList();
+ checkCar()
+ .then((res) => {
+ this.carList = res.data;
+ })
+ .catch((err) => { });
+ checkFace()
+ .then((res) => {
+ this.faceList = res.data;
+ })
+ .catch((err) => { });
+ checkVideo()
+ .then((res) => {
+ this.videoList = res.data;
+ })
+ .catch((err) => { });
},
getTableList() {
getNormalRate(this.activeName)
.then((res) => {
this.tableData = res.data;
})
- .catch((err) => {});
+ .catch((err) => { });
},
- tabChange(){
- this. getTableList()
+ tabChange() {
+ this.getTableList()
}
},
};
</script>
<style lang="scss" scoped>
+.center {
+ text-align: center;
+}
+
.new-page {
color: rgb(255, 255, 255);
+
.header_box {
display: flex;
align-items: center;
margin-top: 10px;
margin-left: -25px;
}
+
.return-button {
position: absolute;
right: -5px;
@@ -241,12 +245,15 @@
font-size: 20px;
}
}
+
::v-deep .tabs-box {
margin-top: 5px;
+
.el-tabs__item {
color: #ffffff !important;
font-size: 26px;
}
+
.is-active {
color: #00b8ff !important;
// background: url("../../../assets/images/screen/button1.png");
@@ -265,6 +272,7 @@
background-size: 0.1vw 0.5vw, 0.5vw 0.1vw;
}
}
+
::v-deep .el-input__inner {
background: rgba(67, 102, 155, 0.4) !important;
color: #4481dd;
@@ -275,18 +283,22 @@
background-color: transparent !important;
color: #4481dd;
}
+
::v-deep .date-select .el-date-editor .el-range-separator {
color: #4481dd !important;
}
+
// }
/* 鍘绘帀tabs鏍囩鏍忎笅鐨勪笅鍒掔嚎 */
::v-deep .el-tabs__nav-wrap::after {
position: static !important;
// background-color: #fff;
}
+
::v-deep .el-tabs__active-bar {
width: 0 !important;
}
+
::v-deep .el-tabs__item {
margin: 5px 30px;
padding: 0px 25px !important;
@@ -306,17 +318,21 @@
// background-repeat: no-repeat !important;
// background-position: center center !important;
}
+
.left_box {
width: 460px;
position: relative;
+
.card {
height: 300px;
width: 460px;
margin: 20px 0;
+
.card_header {
height: 40px;
}
}
+
.titleCard {
// background: url("../../../assets/images/screen/titleBg.png");
// background-size: 100% 100%;
@@ -329,6 +345,7 @@
left: 10px;
}
}
+
.large_screen_box {
width: 920px;
height: 621px;
@@ -338,18 +355,21 @@
background-repeat: no-repeat !important;
background-position: center center !important;
}
+
.card {
background: url("../../../assets/images/screen/cardBg1.png");
background-size: 100% 100%;
background-repeat: no-repeat !important;
background-position: center center !important;
}
+
.card_header {
background: url("../../../assets/images/screen/headerBg.png");
background-size: 100% 100%;
background-repeat: no-repeat !important;
background-position: center center !important;
}
+
.footer_box {
width: 100%;
height: 320px;
@@ -357,11 +377,14 @@
display: flex;
justify-content: space-between;
border: rgba(84, 132, 203, 0.4) 2px solid;
+
.footer_card {
width: 33%;
margin: 5px 0;
+
.card_header {
height: 40px;
+
.titleCar {
margin-left: 20px;
padding-top: 5px;
@@ -373,6 +396,7 @@
}
}
}
+
.title {
margin-left: 20px;
padding-top: 5px;
@@ -381,6 +405,7 @@
font-size: 20px;
font-style: italic;
}
+
.data-info {
flex: 1;
color: #5b83bd;
@@ -395,13 +420,16 @@
.type1 {
color: #287cfa;
}
+
.type2 {
color: #0cd81d;
}
+
.type3 {
color: #e20c0c;
}
}
+
.device_data {
display: flex;
align-items: center;
--
Gitblit v1.8.0