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

fuliqi

2024-09-18 0da5ee3189dd5eedd5404ee3c1a783442b69645c

 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>