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