大屏背景+数字动态+返回后台

fuliqi

2024-09-18 0da5ee3189dd5eedd5404ee3c1a783442b69645c

大屏背景+数字动态+返回后台

 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",

 src/assets/images/background-img.jpg

 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

 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();

 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 + '%' : '&#45;&#45;' }}</li>-->
<!--                  <li>{{ item.carRate ? item.carRate + '%' : '&#45;&#45;' }}</li>-->
<!--                  <li>{{ item.faceRate ? item.faceRate + '%' : '&#45;&#45;' }}</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>