From 1e891ef7bc8291562d27108e05196699d6229129 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 10 四月 2024 17:30:25 +0800
Subject: [PATCH] feat:工单图表
---
src/assets/icons/arrow.png | 0
src/views/screen/components/screen-examine/components/examine-chart.vue | 9 -
src/views/screen/components/screen-data/index.vue | 141 +++++++++++++++++++++++++++++++++++
src/views/screen/components/screen-wrapper/index.vue | 9 +
src/views/screen/components/screen-map/index.vue | 14 +++
src/views/screen/components/screen-examine/components/examine-hola.vue | 6
src/views/screen/components/screen-examine/index.vue | 3
7 files changed, 168 insertions(+), 14 deletions(-)
diff --git a/src/assets/icons/arrow.png b/src/assets/icons/arrow.png
new file mode 100644
index 0000000..5a0f2ed
--- /dev/null
+++ b/src/assets/icons/arrow.png
Binary files differ
diff --git a/src/views/screen/components/screen-data/index.vue b/src/views/screen/components/screen-data/index.vue
new file mode 100644
index 0000000..f6eba29
--- /dev/null
+++ b/src/views/screen/components/screen-data/index.vue
@@ -0,0 +1,141 @@
+<template>
+ <div class="data-container">
+ <wrapper-title :title="'宸ュ崟鏁版嵁'" :path="'/monitorServe/car'"></wrapper-title>
+
+ <div class="data-content">
+ <div class="data-panel">
+
+ </div>
+ <div class="data-panel">
+ <div class="panel-title">
+ <div class="icon">
+ <img src="@/assets/icons/arrow.png" alt="">
+ </div>
+ <div class="title">
+ 鍒嗗尯宸ュ崟鏁�
+ </div>
+ </div>
+ <div class="echart-container">
+ <div id="barChart" ref="barChart"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import WrapperTitle from '../wrapper-title/index';
+let chart = null;
+export default {
+ name: 'ScreenData',
+ components: {
+ WrapperTitle
+ },
+ data() {
+ return {
+ dataList: {
+ name: ['瀵岄『鍘�', '鑽ｅ幙', '楂樻柊鍖�', '鑷祦浜曞尯', '璐′簳鍖�', '澶у畨鍖�', '娌挎哗鍖�'],
+ data1: [210, 310, 40, 102, 111, 201, 123],
+ data2: [20, 30, 10, 10, 11, 21, 5],
+ },
+ }
+ },
+ methods: {
+ initEchart() {
+ const option = {
+ grid: {
+ right: 0,
+ },
+ legend: {
+ right: 0,
+ textStyle: {
+ color: '#447ED6'
+ }
+ },
+ tooltip: {},
+ xAxis: {
+ type: 'category',
+ axisLabel: {
+ color: '#447ED6',
+ rotate: 45
+ },
+ data: this.dataList.name
+ },
+ yAxis: {
+ axisLabel: {
+ color: '#4D76B0',
+ },
+ },
+ series: [
+ {
+ type: 'bar',
+ name: '宸插鐞嗗伐鍗曟暟',
+ stack: 'total',
+ itemStyle: {
+ color: '#4ea8ff'
+ },
+ data: this.dataList.data1
+ },
+ {
+ type: 'bar',
+ name: '鏈鐞嗗伐鍗曟暟',
+ stack: 'total',
+ itemStyle: {
+ color: '#dfc639'
+ },
+ data: this.dataList.data2
+ },
+ ]
+ }
+ chart.setOption(option, true);
+
+ }
+ },
+ mounted() {
+ chart = echarts.init(this.$refs.barChart);
+ this.initEchart();
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.data-container {
+ width: 100%;
+ height: 450px;
+ display: flex;
+ flex-direction: column;
+
+ .data-content {
+ flex: 1;
+ background: rgba(67, 102, 155, 0.3);
+ border: 1px solid rgba(47, 91, 157, 0.8);
+ padding: 20px;
+ box-sizing: border-box;
+ }
+}
+
+.echart-container {
+ width: 100%;
+ height: 300px;
+
+ #barChart {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.panel-title {
+ color: #b9b9b9;
+ display: flex;
+ align-items: center;
+ .icon {
+ width: 20px;
+ margin-right: 5px;
+ img {
+ width: 100%;
+ display: block;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-examine/components/examine-chart.vue b/src/views/screen/components/screen-examine/components/examine-chart.vue
index 803c32a..553971d 100644
--- a/src/views/screen/components/screen-examine/components/examine-chart.vue
+++ b/src/views/screen/components/screen-examine/components/examine-chart.vue
@@ -25,10 +25,7 @@
{ 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: 60, routerUrl: '/car/vehicle-data-monitor/index' },
- { id: 8, name: '杞﹁締杩囧崱鍙ｆ暟鎹竴鑷存��', value: 40, routerUrl: '/car/vehicle-data-monitor/index' },
-
+ { id: 6, name: '閲嶇偣鐐逛綅褰曞儚鍙敤鐜�', value: 20, routerUrl: '/car/vehicle-data-monitor/index' }
]
}
},
@@ -59,8 +56,8 @@
.hola-item {
flex-shrink: 0;
- width: 180px;
- height: 180px;
+ width: 140px;
+ height: 140px;
}
}
}
diff --git a/src/views/screen/components/screen-examine/components/examine-hola.vue b/src/views/screen/components/screen-examine/components/examine-hola.vue
index a4c2d87..0bcc4bd 100644
--- a/src/views/screen/components/screen-examine/components/examine-hola.vue
+++ b/src/views/screen/components/screen-examine/components/examine-hola.vue
@@ -3,7 +3,7 @@
<div class="progressChart">
<div class="chart" id="progressChart" ref="chartRef"></div>
<el-link class="bottom le-0-font" :underline="false" @click="handleDetail(routerPath)">
- <label >{{ bottomTitle }}</label>
+ <label>{{ bottomTitle }}</label>
</el-link>
</div>
</template>
@@ -85,7 +85,7 @@
detail: {
// width: 50,
// height: 14,
- fontSize: 14,
+ fontSize: 20,
color: 'auto'
},
data: [
@@ -162,7 +162,7 @@
width: 100%;
color: #01f8ff;
text-align: center;
- font-size: 16px;
+ font-size: 14px;
margin-top: 10px;
}
}
diff --git a/src/views/screen/components/screen-examine/index.vue b/src/views/screen/components/screen-examine/index.vue
index 161dbfe..5747188 100644
--- a/src/views/screen/components/screen-examine/index.vue
+++ b/src/views/screen/components/screen-examine/index.vue
@@ -72,10 +72,11 @@
<style lang="scss" scoped>
.examine-container {
+ flex: 1;
width: 100%;
- height: 100%;
display: flex;
flex-direction: column;
+ margin-bottom: 20px
}
.examine-content {
diff --git a/src/views/screen/components/screen-map/index.vue b/src/views/screen/components/screen-map/index.vue
index 89992b9..d949913 100644
--- a/src/views/screen/components/screen-map/index.vue
+++ b/src/views/screen/components/screen-map/index.vue
@@ -2,6 +2,7 @@
<div class="map-container">
<wrapper-title :title="'鍖哄煙鍦板浘'"></wrapper-title>
<div class="map-content">
+
<div ref="map" class="map-style"></div>
</div>
</div>
@@ -13,6 +14,7 @@
import 'echarts-gl';
import mapData from '@/assets/map/zigong1.json';
import WrapperTitle from '../wrapper-title/index';
+import ScreenData from '../screen-data/index';
echarts.registerMap('zigong', mapData);
let mapChart = null;
@@ -161,7 +163,8 @@
}
},
components: {
- WrapperTitle
+ WrapperTitle,
+ ScreenData
},
methods: {
filterData(name) {
@@ -236,6 +239,7 @@
.map-content {
flex: 1;
+ position: relative;
// background: rgba(67, 102, 155, 0.3);
// border: 1px solid rgba(47, 91, 157, 0.8);
}
@@ -245,4 +249,12 @@
height: 100%;
}
}
+
+.data-container {
+ width: 100%;
+ display: flex;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue
index adb161a..dbc3d1b 100644
--- a/src/views/screen/components/screen-wrapper/index.vue
+++ b/src/views/screen/components/screen-wrapper/index.vue
@@ -18,6 +18,7 @@
</div>
<div class="right-container wrapper">
<screen-examine class="animate-enter-x enter-right"></screen-examine>
+ <screen-data></screen-data>
</div>
</div>
</div>
@@ -31,6 +32,7 @@
import ScreenCar from '../screen-car/index';
import ScreenMap from '../screen-map/index';
import ScreenTable from '../screen-table/index';
+import ScreenData from '../screen-data/index';
export default {
name: 'ScreenWrapper',
components: {
@@ -40,7 +42,8 @@
ScreenTable,
ScreenFace,
ScreenVideo,
- ScreenCar
+ ScreenCar,
+ ScreenData
},
methods: {
returnPath() {
@@ -85,7 +88,7 @@
}
.wrapper {
- width: 23%;
+ width: 25%;
height: 100%;
box-sizing: border-box;
padding: 0 10px;
@@ -103,7 +106,7 @@
}
.center-wrapper {
- width: 54%;
+ width: 50%;
height: 100%;
box-sizing: border-box;
padding: 0 10px;
--
Gitblit v1.8.0