From 1b259b716a722cf9bd02abf3dc2ebf93198aba44 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 11 四月 2024 09:50:03 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/permission.js | 2
src/views/screen/components/screen-examine/components/examine-chart.vue | 4
src/views/screen/components/screen-data/index.vue | 48 ++++++++++-
src/views/screen/components/screen-data/components/data-hola.vue | 137 ++++++++++++++++++++++++++++++++++
src/views/screen/components/screen-wrapper/index.vue | 31 ++++++-
src/views/screen/components/screen-examine/components/examine-hola.vue | 7 +
src/views/screen/components/screen-table/index.vue | 2
src/views/screen/components/screen-examine/index.vue | 2
src/views/system/template/index.vue | 4
9 files changed, 216 insertions(+), 21 deletions(-)
diff --git a/src/permission.js b/src/permission.js
index 462668d..67e53df 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@
NProgress.configure({ showSpinner: false })
-const whiteList = ['/login', '/register', '/screen']
+const whiteList = ['/login', '/register',]
router.beforeEach((to, from, next) => {
NProgress.start()
diff --git a/src/views/screen/components/screen-data/components/data-hola.vue b/src/views/screen/components/screen-data/components/data-hola.vue
new file mode 100644
index 0000000..da906ed
--- /dev/null
+++ b/src/views/screen/components/screen-data/components/data-hola.vue
@@ -0,0 +1,137 @@
+<template>
+ <div class="hola-container">
+ <div class="chart" id="dataChart" ref="chartRef"></div>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+let myChart = null;
+export default {
+ name: 'DataHola',
+ props: {
+ centerValue: {
+ type: [Number, String],
+ default: 0
+ },
+ holaColor: {
+ type: String,
+ default: '#4ea8ff'
+ },
+ holaTitle: {
+ type: String,
+ default: ''
+ }
+ },
+ data() {
+ return {
+
+ }
+ },
+ methods: {
+ initChart() {
+ const series= [
+ {
+ type: 'gauge', // 浠〃鐩樼被鍨�
+ name: '绯诲垪鍚嶇О', // 鐢ㄤ簬tooltip鐨勬樉绀�
+ startAngle: 90, // 浠〃鐩樺紑濮嬭搴︼紙璁剧疆鑳屾櫙鍦嗙殑瑙掑害锛�
+ endAngle: -270, // 浠〃鐩樼粨鏉熻搴�
+ center: ['50%', '50%'], // 涓績鐐癸紙鍦嗗績鍧愭爣锛�
+ radius: '100%', // 鍦嗗ぇ灏忥紙浠〃鐩樺崐寰勶級
+ clockwise: true, // 浠〃鐩樺埢搴︽槸鍚︽槸椤烘椂閽堝闀�
+ // 浠〃鐩樿酱绾跨浉鍏抽厤缃�
+ axisLine: {
+ show: true,
+ roundCap: false, // 涓ょ鏄剧ず鎴愬渾褰紙鑳屾櫙鐜級
+ clip: false, // 鏄惁瑁佸壀瓒呭嚭閮ㄥ垎
+ // 璁剧疆鑳屾櫙鍦嗙幆鏍峰紡
+ lineStyle: {
+ width: 6, // 鍦嗙幆瀹藉害
+ color: [[1, '#002865']] // 鍦嗙幆鑳屾櫙鑹�
+ }
+ },
+ max: 5000,
+ // 浠〃鐩樻寚閽�
+ pointer: {
+ show: false
+ },
+ // 杩涘害璁剧疆
+ progress: {
+ show: true,
+ overlap: false, // 澶氱粍鏁版嵁鏃惰繘搴︽潯鏄惁閲嶅彔
+ roundCap: true, // 鏄惁鍦ㄤ袱绔樉绀烘垚鍦嗗舰
+ clip: false, // 鏄惁瑁佹帀瓒呭嚭閮ㄥ垎
+ // 杩涘害鏉℃牱寮�
+ itemStyle: {
+ borderWidth: 0,
+ shadowColor: '',
+ color: this.holaColor
+ }
+ },
+ // 浠〃鐩樺垎鍓茬嚎
+ splitLine: {
+ show: false
+ },
+ // 鍒诲害鏍峰紡
+ axisTick: {
+ show: false
+ },
+ // 鍒诲害鏍囩
+ axisLabel: {
+ show: false
+ },
+ title: {
+ show: false,
+ fontSize: 20
+ },
+ detail: {
+ // width: 50,
+ // height: 14,
+ fontSize: 20,
+ color: 'auto'
+ },
+ data: [
+ {
+ value: this.centerValue,
+ name: this.holaTitle,
+ title: {
+ show: true,
+ fontSize: 14,
+ color: '#fff',
+ offsetCenter: ['0%', '30%'],
+ },
+ detail: {
+ fontSize: 18,
+ // 涓績title璁剧疆
+ offsetCenter: ['0%', '-10%'],
+ color: '#fff',
+ formatter: '{value}'
+
+ }
+ }
+ ],
+ }
+ ];
+ myChart.setOption({
+ series: series
+ })
+ }
+ },
+ mounted() {
+ myChart = echarts.init(this.$refs['chartRef']);
+ this.initChart();
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.hola-container {
+ width: 100%;
+ height: 100%;
+
+ .chart {
+ width: 100%;
+ height: 100%;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-data/index.vue b/src/views/screen/components/screen-data/index.vue
index f6eba29..300142c 100644
--- a/src/views/screen/components/screen-data/index.vue
+++ b/src/views/screen/components/screen-data/index.vue
@@ -1,10 +1,28 @@
<template>
<div class="data-container">
- <wrapper-title :title="'宸ュ崟鏁版嵁'" :path="'/monitorServe/car'"></wrapper-title>
+ <wrapper-title :title="'宸ュ崟鏁版嵁'" :path="'/work-order-center/maintenance/work-order/work-order'"></wrapper-title>
<div class="data-content">
<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="panel-container">
+ <div class="panel-item">
+ <data-hola :holaTitle="`宸ュ崟鎬绘暟`" :centerValue="3000" :holaColor="`#4ea8ff`"></data-hola>
+ </div>
+ <div class="panel-item">
+ <data-hola :holaTitle="`宸插鐞嗗伐鍗曟暟`" :centerValue="1600" :holaColor="`#5dec24`"></data-hola>
+ </div>
+ <div class="panel-item">
+ <data-hola :holaTitle="`鏈鐞嗗伐鍗曟暟`" :centerValue="200" :holaColor="`#dfc639`"></data-hola>
+ </div>
+ </div>
</div>
<div class="data-panel">
<div class="panel-title">
@@ -26,11 +44,13 @@
<script>
import * as echarts from 'echarts';
import WrapperTitle from '../wrapper-title/index';
+import DataHola from './components/data-hola';
let chart = null;
export default {
name: 'ScreenData',
components: {
- WrapperTitle
+ WrapperTitle,
+ DataHola
},
data() {
return {
@@ -45,7 +65,9 @@
initEchart() {
const option = {
grid: {
+ top: '10%',
right: 0,
+ bottom: '15%',
},
legend: {
right: 0,
@@ -102,7 +124,7 @@
<style lang="scss" scoped>
.data-container {
width: 100%;
- height: 450px;
+ height: 500px;
display: flex;
flex-direction: column;
@@ -110,14 +132,14 @@
flex: 1;
background: rgba(67, 102, 155, 0.3);
border: 1px solid rgba(47, 91, 157, 0.8);
- padding: 20px;
+ padding: 10px;
box-sizing: border-box;
}
}
.echart-container {
width: 100%;
- height: 300px;
+ height: 260px;
#barChart {
width: 100%;
@@ -129,13 +151,27 @@
color: #b9b9b9;
display: flex;
align-items: center;
+
.icon {
width: 20px;
margin-right: 5px;
+
img {
width: 100%;
display: block;
}
}
}
+
+.panel-container {
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+ margin: 10px 0;
+
+ .panel-item {
+ width: 120px;
+ height: 120px;
+ }
+}
</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 553971d..d12f01e 100644
--- a/src/views/screen/components/screen-examine/components/examine-chart.vue
+++ b/src/views/screen/components/screen-examine/components/examine-chart.vue
@@ -56,8 +56,8 @@
.hola-item {
flex-shrink: 0;
- width: 140px;
- height: 140px;
+ width: 150px;
+ height: 120px;
}
}
}
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 0bcc4bd..83a0396 100644
--- a/src/views/screen/components/screen-examine/components/examine-hola.vue
+++ b/src/views/screen/components/screen-examine/components/examine-hola.vue
@@ -28,7 +28,7 @@
clip: false, // 鏄惁瑁佸壀瓒呭嚭閮ㄥ垎
// 璁剧疆鑳屾櫙鍦嗙幆鏍峰紡
lineStyle: {
- width: 10, // 鍦嗙幆瀹藉害
+ width: 6, // 鍦嗙幆瀹藉害
color: [[1, '#002865']] // 鍦嗙幆鑳屾櫙鑹�
}
},
@@ -151,7 +151,9 @@
.progressChart {
width: 100%;
height: 100%;
-
+ display: flex;
+ flex-direction: column;
+ align-items: center;
.chart {
width: 100%;
height: 75%;
@@ -166,4 +168,5 @@
margin-top: 10px;
}
}
+
</style>
diff --git a/src/views/screen/components/screen-examine/index.vue b/src/views/screen/components/screen-examine/index.vue
index 5747188..8bdd44f 100644
--- a/src/views/screen/components/screen-examine/index.vue
+++ b/src/views/screen/components/screen-examine/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="examine-container">
- <wrapper-title :title="'鑰冩牳鏁版嵁'" :path="'/examine/check-rule'"></wrapper-title>
+ <wrapper-title :title="'鑰冩牳鏁版嵁'" :path="'/examine/default'"></wrapper-title>
<div class="examine-content">
<div class="examine-wrapper">
diff --git a/src/views/screen/components/screen-table/index.vue b/src/views/screen/components/screen-table/index.vue
index 0629df0..01e715d 100644
--- a/src/views/screen/components/screen-table/index.vue
+++ b/src/views/screen/components/screen-table/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="table-container">
- <wrapper-title :title="'鍖哄煙璁惧鏁版嵁'" :path="'/monitorServe/face'"></wrapper-title>
+ <wrapper-title :title="'鍖哄煙璁惧鏁版嵁'" :path="'/monitorServe/recovery'"></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">
diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue
index dbc3d1b..b2dac5e 100644
--- a/src/views/screen/components/screen-wrapper/index.vue
+++ b/src/views/screen/components/screen-wrapper/index.vue
@@ -6,19 +6,19 @@
</div>
<div class="wrapper-content">
<div class="left-container wrapper">
- <screen-face class="animate-enter-x enter-left"></screen-face>
- <screen-car class="animate-enter-x enter-left animate-delay-1"></screen-car>
- <screen-video class="animate-enter-x enter-left animate-delay-2"></screen-video>
+ <screen-face class="enter-left" :class="{ 'animate-enter-x': isEnd }"></screen-face>
+ <screen-car class="enter-left animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-car>
+ <screen-video class="enter-left animate-delay-2" :class="{ 'animate-enter-x': isEnd }"></screen-video>
</div>
<div class="center-container center-wrapper">
<screen-map></screen-map>
- <screen-table class="animate-enter-y enter-top"></screen-table>
+ <screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table>
<!-- <screen-detection></screen-detection> -->
</div>
<div class="right-container wrapper">
- <screen-examine class="animate-enter-x enter-right"></screen-examine>
- <screen-data></screen-data>
+ <screen-examine class="enter-right" :class="{ 'animate-enter-x': isEnd }"></screen-examine>
+ <screen-data class="enter-right animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-data>
</div>
</div>
</div>
@@ -45,10 +45,29 @@
ScreenCar,
ScreenData
},
+ data() {
+ return {
+ isEnd: false
+ }
+ },
methods: {
returnPath() {
this.$router.push('/index');
+ },
+ checkAnimationEnd(event) {
+ if (this.isEnd) return;
+ if (event.propertyName === 'transform') {
+ this.isEnd = true;
+ }
}
+ },
+ mounted() {
+ const container = document.querySelector('.screen-wrapper');
+ container.addEventListener('transitionend', this.checkAnimationEnd);
+ },
+ destroyed() {
+ const container = document.querySelector('.screen-wrapper');
+ container.removeEventListener('transitionend', this.checkAnimationEnd);
}
}
</script>
diff --git a/src/views/system/template/index.vue b/src/views/system/template/index.vue
index 1f715a7..9fe7f3c 100644
--- a/src/views/system/template/index.vue
+++ b/src/views/system/template/index.vue
@@ -72,8 +72,8 @@
size="mini"
:disabled="multiple"
@click="handleDelete"
- >鍒犻櫎</el-button> -->
- </el-col>
+ >鍒犻櫎</el-button>
+ </el-col> -->
<el-col :span="1.5">
<el-button
type="warning"
--
Gitblit v1.8.0