From 00ef473d3b7508fd898549fc9f4c74eef52a7d71 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 20 三月 2024 09:54:26 +0800
Subject: [PATCH] feat:详情跳转
---
src/views/screen/components/screen-video/index.vue | 26 ++++----
vue.config.js | 2
src/main.js | 38 ++++++++++++
src/utils/format.js | 3 +
src/views/screen/components/screen-title/index.vue | 2
src/views/screen/components/screen-wrapper/index.vue | 7 ++
src/views/screen/components/screen-car/index.vue | 21 ++++--
src/views/screen/components/screen-detection/index.vue | 2
src/views/screen/components/screen-examine/index.vue | 2
src/views/screen/components/screen-face/index.vue | 22 ++++--
10 files changed, 93 insertions(+), 32 deletions(-)
diff --git a/src/main.js b/src/main.js
index 9ede569..7944e09 100644
--- a/src/main.js
+++ b/src/main.js
@@ -42,6 +42,9 @@
import VScaleScreen from 'v-scale-screen'
import dataV from '@jiaminghi/data-view'
+import gsap from 'gsap';
+import { formatNumber } from './utils/format';
+
// 鍏ㄥ眬鏂规硶鎸傝浇
@@ -87,6 +90,41 @@
Vue.config.productionTip = true
+
+// 鍏ㄥ眬鎸囦护
+Vue.directive('roll', {
+ inserted: (el, binding) => {
+ let target = {
+ count: 0
+ };
+ let finalNumber = el.innerText;
+ gsap.to(target, {
+ count: finalNumber,
+ duration: 1,
+ ease: "power2.out",
+ onUpdate: () => {
+ el.innerText = formatNumber(target.count.toFixed(0));
+ }
+ })
+
+ },
+ update: (el, binding) => {
+ let target = {
+ count: el.innerText
+ };
+ let finalNumber = el.getAttribute('value');
+ gsap.to(target, {
+ count: finalNumber,
+ duration: 1,
+ ease: "power2.out",
+ onUpdate: () => {
+ el.innerText = formatNumber(target.count.toFixed(0));
+ }
+ })
+ }
+})
+
+
new Vue({
el: '#app',
router,
diff --git a/src/utils/format.js b/src/utils/format.js
new file mode 100644
index 0000000..1d6c37a
--- /dev/null
+++ b/src/utils/format.js
@@ -0,0 +1,3 @@
+export const formatNumber = (value) => {
+ return new Intl.NumberFormat('en-US').format(value);
+}
\ No newline at end of file
diff --git a/src/views/screen/components/screen-car/index.vue b/src/views/screen/components/screen-car/index.vue
index a8a6446..2ae312c 100644
--- a/src/views/screen/components/screen-car/index.vue
+++ b/src/views/screen/components/screen-car/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="car-container">
- <wrapper-title :title="'杞﹁締璁惧鏁版嵁'"></wrapper-title>
+ <wrapper-title :title="'杞﹁締璁惧鏁版嵁'" :path="'/monitorServe/car'"></wrapper-title>
<div class="car-content">
<div class="data-plane">
@@ -11,7 +11,7 @@
</div>
<div class="data-info">
<div class="data-lable">璁惧鎬绘暟</div>
- <div class="data-num">{{ formatNumber(1123) }}</div>
+ <div class="data-num type1" v-roll>{{ 1123 }}</div>
</div>
</div>
</dv-border-box-13>
@@ -23,7 +23,7 @@
</div>
<div class="data-info">
<div class="data-lable">璁惧姝ｅ父鏁�</div>
- <div class="data-num">{{ formatNumber(200000) }}</div>
+ <div class="data-num type2" v-roll>{{ 2000 }}</div>
</div>
</div>
</dv-border-box-13>
@@ -35,7 +35,7 @@
</div>
<div class="data-info">
<div class="data-lable">璁惧寮傚父鏁�</div>
- <div class="data-num">{{ formatNumber(112313141111) }}</div>
+ <div class="data-num type3" v-roll>{{ 1000 }}</div>
</div>
</div>
</dv-border-box-13>
@@ -63,9 +63,6 @@
},
methods: {
- formatNumber(value) {
- return new Intl.NumberFormat('en-US').format(value);
- }
},
mounted() {
@@ -114,6 +111,16 @@
font-size: 24px;
color: #fff;
}
+
+ .type1 {
+ color: #287cfa;
+ }
+ .type2 {
+ color: #0cd81d;
+ }
+ .type3 {
+ color: #e20c0c
+ }
}
}
}
diff --git a/src/views/screen/components/screen-detection/index.vue b/src/views/screen/components/screen-detection/index.vue
index 714f076..1eccea9 100644
--- a/src/views/screen/components/screen-detection/index.vue
+++ b/src/views/screen/components/screen-detection/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="detection-container">
- <wrapper-title :title="'杩愯鐩戞帶鏁版嵁'"></wrapper-title>
+ <wrapper-title :title="'杩愯鐩戞帶鏁版嵁'" :path="'/dataManage'"></wrapper-title>
<div class="detection-content">
<div class="water-item">
diff --git a/src/views/screen/components/screen-examine/index.vue b/src/views/screen/components/screen-examine/index.vue
index 5447573..f48d208 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="'鑰冩牳鏁版嵁'"></wrapper-title>
+ <wrapper-title :title="'鑰冩牳鏁版嵁'" :path="'/examine/check-rule'"></wrapper-title>
<div class="examine-content">
<div class="examine-wrapper">
<examine-chart class="wrapper-item"></examine-chart>
diff --git a/src/views/screen/components/screen-face/index.vue b/src/views/screen/components/screen-face/index.vue
index cf1a29a..488816b 100644
--- a/src/views/screen/components/screen-face/index.vue
+++ b/src/views/screen/components/screen-face/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="face-container">
- <wrapper-title :title="'浜鸿劯璁惧鏁版嵁'"></wrapper-title>
+ <wrapper-title :title="'浜鸿劯璁惧鏁版嵁'" :path="'/monitorServe/face'"></wrapper-title>
<div class="face-content">
<div class="data-plane">
@@ -11,7 +11,7 @@
</div>
<div class="data-info">
<div class="data-lable">璁惧鎬绘暟</div>
- <div class="data-num">{{ formatNumber(1123) }}</div>
+ <div class="data-num type1" v-roll>{{ 1123 }}</div>
</div>
</div>
</dv-border-box-13>
@@ -23,7 +23,7 @@
</div>
<div class="data-info">
<div class="data-lable">璁惧姝ｅ父鏁�</div>
- <div class="data-num">{{ formatNumber(200000) }}</div>
+ <div class="data-num type2" v-roll>{{ 2000 }}</div>
</div>
</div>
</dv-border-box-13>
@@ -35,7 +35,7 @@
</div>
<div class="data-info">
<div class="data-lable">璁惧寮傚父鏁�</div>
- <div class="data-num">{{ formatNumber(112313141111) }}</div>
+ <div class="data-num type3" v-roll>{{ 1000 }}</div>
</div>
</div>
</dv-border-box-13>
@@ -62,10 +62,6 @@
},
methods: {
-
- formatNumber(value) {
- return new Intl.NumberFormat('en-US').format(value);
- }
},
mounted() {
@@ -113,6 +109,16 @@
font-size: 24px;
color: #fff;
}
+
+ .type1 {
+ color: #287cfa;
+ }
+ .type2 {
+ color: #0cd81d;
+ }
+ .type3 {
+ color: #e20c0c
+ }
}
}
}
diff --git a/src/views/screen/components/screen-title/index.vue b/src/views/screen/components/screen-title/index.vue
index 181f81d..7dd1f76 100644
--- a/src/views/screen/components/screen-title/index.vue
+++ b/src/views/screen/components/screen-title/index.vue
@@ -5,7 +5,7 @@
<img src="@/assets/images/screen/header_bg.png" class="width-img" alt="">
</div>
<div class="header-text">
- 鑷础甯傝繍缁磋�冩牳鍙鍖栧ぇ灞�
+ 鑷础甯傝繍缁磋�冩牳鍙鍖�
</div>
</div>
</div>
diff --git a/src/views/screen/components/screen-video/index.vue b/src/views/screen/components/screen-video/index.vue
index 3fa66d1..d97042f 100644
--- a/src/views/screen/components/screen-video/index.vue
+++ b/src/views/screen/components/screen-video/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="video-container">
- <wrapper-title :title="'瑙嗛璁惧鏁版嵁'"></wrapper-title>
+ <wrapper-title :title="'瑙嗛璁惧鏁版嵁'" :path="'/monitorServe/video'"></wrapper-title>
<div class="video-content">
<div class="data-plane">
@@ -11,7 +11,7 @@
</div>
<div class="data-info">
<div class="data-lable">璁惧鎬绘暟</div>
- <div class="data-num">{{ formatNumber(1123) }}</div>
+ <div class="data-num type1" v-roll>{{ 1123 }}</div>
</div>
</div>
</dv-border-box-13>
@@ -23,7 +23,7 @@
</div>
<div class="data-info">
<div class="data-lable">璁惧姝ｅ父鏁�</div>
- <div class="data-num">{{ formatNumber(200000) }}</div>
+ <div class="data-num type2" v-roll>{{ 2000 }}</div>
</div>
</div>
</dv-border-box-13>
@@ -35,7 +35,7 @@
</div>
<div class="data-info">
<div class="data-lable">璁惧寮傚父鏁�</div>
- <div class="data-num">{{ formatNumber(112313141111) }}</div>
+ <div class="data-num type3" v-roll>{{ 1000 }}</div>
</div>
</div>
</dv-border-box-13>
@@ -54,18 +54,10 @@
},
data() {
return {
- dataList: {
- state: { '01:00': 1000, '02:00': 2131, '03:00': 1233, '04:00': 2132, '05:00': 3211, '06:00': 213, '07:00': 123, '08:00': 566 },
- state2: { '01:00': 900, '02:00': 1131, '03:00': 1533, '04:00': 2132, '05:00': 3011, '06:00': 13, '07:00': 113, '08:00': 566 },
- },
}
},
methods: {
-
- formatNumber(value) {
- return new Intl.NumberFormat('en-US').format(value);
- }
},
mounted() {
@@ -113,6 +105,16 @@
font-size: 24px;
color: #fff;
}
+
+ .type1 {
+ color: #287cfa;
+ }
+ .type2 {
+ color: #0cd81d;
+ }
+ .type3 {
+ color: #e20c0c
+ }
}
}
}
diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue
index a647da0..6cbb50e 100644
--- a/src/views/screen/components/screen-wrapper/index.vue
+++ b/src/views/screen/components/screen-wrapper/index.vue
@@ -2,7 +2,7 @@
<div class="wrapper-container">
<select-item></select-item>
<div class="return-button">
- <el-button type="primary">杩斿洖</el-button>
+ <el-button type="primary" @click="returnPath">杩斿洖</el-button>
</div>
<div class="wrapper-content">
<div class="left-container wrapper">
@@ -41,6 +41,11 @@
ScreenCar,
ScreenMap
},
+ methods: {
+ returnPath() {
+ this.$router.go(-1);
+ }
+ }
}
</script>
diff --git a/vue.config.js b/vue.config.js
index e61f74f..cf11cc5 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -35,7 +35,7 @@
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
- target: `http://localhost:8080`,
+ target: `http://192.168.3.88:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
--
Gitblit v1.8.0