From 0da5ee3189dd5eedd5404ee3c1a783442b69645c Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期三, 18 九月 2024 03:09:18 +0800
Subject: [PATCH] 大屏背景+数字动态+返回后台
---
src/main.js | 3 +
src/views/screen/components/screen-map-three/experience/world/enviroment.js | 2
package.json | 1
src/views/screen/index.vue | 71 ++++++++++++++++++++++++++++++-----
src/assets/images/background-img.jpg | 0
5 files changed, 64 insertions(+), 13 deletions(-)
diff --git a/package.json b/package.json
index 7311195..a240bb6 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
"three": "^0.163.0",
"v-scale-screen": "1.0.0",
"vue": "2.6.12",
+ "vue-animate-number": "^0.4.2",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-meta": "2.4.0",
diff --git a/src/assets/images/background-img.jpg b/src/assets/images/background-img.jpg
index 150cbc4..a118619 100644
--- a/src/assets/images/background-img.jpg
+++ b/src/assets/images/background-img.jpg
Binary files differ
diff --git a/src/main.js b/src/main.js
index 6df0404..2d9996d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,7 +38,7 @@
import VueMeta from 'vue-meta'
// 瀛楀吀鏁版嵁缁勪欢
import DictData from '@/components/DictData'
-
+import VueAnimateNumber from 'vue-animate-number'
// 澶у睆
import VScaleScreen from 'v-scale-screen'
import dataV from '@jiaminghi/data-view'
@@ -77,6 +77,7 @@
Vue.use(VueMeta)
Vue.use(VScaleScreen)
Vue.use(dataV)
+Vue.use(VueAnimateNumber)
DictData.install()
// websocket
diff --git a/src/views/screen/components/screen-map-three/experience/world/enviroment.js b/src/views/screen/components/screen-map-three/experience/world/enviroment.js
index 56a8fcf..b828455 100644
--- a/src/views/screen/components/screen-map-three/experience/world/enviroment.js
+++ b/src/views/screen/components/screen-map-three/experience/world/enviroment.js
@@ -14,7 +14,7 @@
this.setSunLight();
// this.setRotateHola();
- // this.setBackground();
+ this.setBackground();
// this.setCirclePoint();
// this.debuger();
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index a36e321..0f5f718 100644
--- a/src/views/screen/index.vue
+++ b/src/views/screen/index.vue
@@ -1,9 +1,9 @@
<template>
<div class="container" ref="contaner">
<header>
+ <i @click="returnPath" class="el-icon-s-home" style="color: #00b4ff;position: absolute;font-size: 24px;left: 98%;top: 15%"></i>
<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"/>
@@ -44,6 +44,8 @@
</div>
<div class="map-container" ref="isMap">
+ <img src="@/assets/map/texture/rotating-point2.png" alt="Rotating Image" class="rotating-image">
+ <img src="@/assets/map/texture/rotatingAperture.png" alt="Rotating Image" class="rotating-image-in">
<mapApp @clickMap="getDeptId" :geoCoordinates=scoreData></mapApp>
<div class="btn-container">
<img src="@/assets/images/btn-bg.png" class="bg-img"/>
@@ -69,7 +71,9 @@
/>
<ul>
<li v-for="(item, index) in facilityData.video" :key="index">
- <div class="value">{{ item.value ? item.value : "-" }}</div>
+ <div class="value">
+ <animate-number from="0" :to="item.value" :key="item.value"></animate-number>
+ </div>
<div class="title">{{ item.title }}</div>
</li>
</ul>
@@ -81,7 +85,8 @@
/>
<ul>
<li v-for="(item, index) in facilityData.car" :key="index">
- <div class="value">{{ item.value ? item.value : "-" }}</div>
+<!-- <div class="value">{{ item.value ? item.value : "-" }}</div>-->
+ <div class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
<div class="title">{{ item.title }}</div>
</li>
</ul>
@@ -96,7 +101,8 @@
v-for="(item, index) in facilityData.face"
:key="index"
>
- <div class="value">{{ item.value ? item.value : "-" }}</div>
+<!-- <div class="value">{{ item.value ? item.value : "-" }}</div>-->
+ <div class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
<div class="title">{{ item.title }}</div>
</li>
</ul>
@@ -120,9 +126,12 @@
:key="index"
>
<li class="name">{{ item.area }}</li>
- <li>{{ item.videoRate ? item.videoRate + '%' : '--' }}</li>
- <li>{{ item.carRate ? item.carRate + '%' : '--' }}</li>
- <li>{{ item.faceRate ? item.faceRate + '%' : '--' }}</li>
+ <li><animate-number from="0" :to="item.videoRate" :key="item.videoRate"></animate-number>%</li>
+ <li><animate-number from="0" :to="item.carRate" :key="item.carRate"></animate-number>%</li>
+ <li><animate-number from="0" :to="item.faceRate" :key="item.faceRate"></animate-number>%</li>
+ <!-- <li>{{ item.videoRate ? item.videoRate + '%' : '--' }}</li>-->
+<!-- <li>{{ item.carRate ? item.carRate + '%' : '--' }}</li>-->
+<!-- <li>{{ item.faceRate ? item.faceRate + '%' : '--' }}</li>-->
</ul>
</div>
</div>
@@ -145,7 +154,7 @@
>
<div class="proportion">
<img src="@/assets/images/face-num-bg.png"/>
- <div class="value">{{ item.value }}%</div>
+ <div class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number>%</div>
</div>
<div class="title">{{ item.name }}</div>
</div>
@@ -158,7 +167,7 @@
:key="index"
>
<div class="video-data">
- <div class="proportion">{{ item.value }}%</div>
+ <div class="proportion"><animate-number from="0" :to="item.value" :key="item.value"></animate-number>%</div>
</div>
<div class="item-video-title">{{ item.name }}</div>
</div>
@@ -171,7 +180,7 @@
:key="index"
:style="item.style"
>
- {{ item.name }} <span>{{ item.value }}%</span>
+ {{ item.name }} <span><animate-number from="0" :to="item.value" :key="item.value"></animate-number>%</span>
</div>
</div>
</div>
@@ -368,7 +377,10 @@
tabChange(id) {
this.activerBtnType = id
this.getData();
- }
+ },
+ // formatter: function (num) {
+ // return num.toFixed(2)
+ // },
},
watch: {
workOrderData() {
@@ -1373,4 +1385,41 @@
border-radius: 0;
background-color: #0d172c;
}
+
+@keyframes rotateImage {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes rotateCounterClockwise {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(-360deg); /* 娉ㄦ剰杩欓噷鏄�-360deg锛岃〃绀洪�嗘椂閽堟棆杞� */
+ }
+}
+
+.rotating-image {
+ width: 900px;
+ height: 900px;
+ position: absolute;
+ top: calc(50% - 450px);
+ left: calc(50% - 450px);
+ transform: skewX(-5deg) skewY(-10deg);
+ animation: rotateImage 36s linear infinite;
+}
+
+.rotating-image-in {
+ width: 850px;
+ height: 850px;
+ position: absolute;
+ top: calc(50% - 425px);
+ left: calc(50% - 425px);
+ animation: rotateCounterClockwise 48s linear infinite;
+}
</style>
--
Gitblit v1.8.0