fuliqi
2025-01-16 e5fae45afc610c0cbc5620f2e9138e2188dcf243
src/views/screen/index.vue
@@ -1,5 +1,5 @@
<template>
  <div class="container" ref="contaner">
  <div class="container" style="font-size: 0.75vw" 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"/>
@@ -46,7 +46,7 @@
      <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>
        <mapApp @clickMap="getDeptId" :geoCoordinates=scoreData :platformData = platformData></mapApp>
        <div class="btn-container">
          <img src="@/assets/images/btn-bg.png" class="bg-img"/>
          <div class="btn-list" v-model="activerBtnType">
@@ -71,10 +71,10 @@
              />
              <ul>
                <li v-for="(item, index) in facilityData.video" :key="index">
                  <div class="value">
                  <div style="font-size: 0.75vw" class="value">
                    <animate-number from="0" :to="item.value" :key="item.value"></animate-number>
                  </div>
                  <div class="title">{{ item.title }}</div>
                  <div style="font-size: 0.75vw" class="title">{{ item.title }}</div>
                </li>
              </ul>
            </div>
@@ -86,8 +86,8 @@
              <ul>
                <li v-for="(item, index) in facilityData.car" :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>
                  <div style="font-size: 0.75vw" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
                  <div style="font-size: 0.75vw" class="title">{{ item.title }}</div>
                </li>
              </ul>
            </div>
@@ -102,8 +102,8 @@
                  :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>
                  <div style="font-size: 0.75vw" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
                  <div style="font-size: 0.75vw" class="title">{{ item.title }}</div>
                </li>
              </ul>
            </div>
@@ -202,7 +202,8 @@
  checkFace,
  checkCar,
  checkVideo,
  checkScore
  checkScore,
  getPlatform
} from "@/api/newpage";
export default {
@@ -212,55 +213,64 @@
    return {
      deptList: [],
      deptId: '',
      intervalId: null, // 用于存储定时器的ID
      carList: [],
      videoList: [],
      faceList: [],
      workOrderData: [],
      workOrderRegion: [],
      platformData: null,
      scoreData: {
          自流井区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          高新区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          大安区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          沿滩区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          贡井区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          荣县: [
            {
              value: 0,
              name: '得分'
            }
          ],
          富顺县: [
            {
              value: 0,
              name: '得分'
            }
          ]
        },
        自流井区: [
          {
            video: 0,
            car: 0,
            face: 0
          },
        ],
        高新区: [
          {
            video: 0,
            car: 0,
            face: 0
          },
        ],
        大安区: [
          {
            video: 0,
            car: 0,
            face: 0
          },
        ],
        沿滩区: [
          {
            video: 0,
            car: 0,
            face: 0
          },
        ],
        贡井区: [
          {
            video: 0,
            car: 0,
            face: 0
          },
        ],
        荣县: [
          {
            video: 0,
            car: 0,
            face: 0
          },
        ],
        富顺县: [
          {
            video: 0,
            car: 0,
            face: 0
          },
        ]
      },
      // 设备数据
      facilityData: {
        video: [],
@@ -306,8 +316,16 @@
      })
      .catch((err) => {
      });
    // 查询数据
    this.getData();
    // 查询数据
    this.intervalId = setInterval(this.getData,  3600000); //一小时一次
  },
  beforeDestroy() {
    // 组件销毁前清除定时器,防止内存泄漏
    if (this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
  },
  methods: {
    getDeptId(deptName) {
@@ -364,8 +382,16 @@
        });
      checkScore(this.activerBtnType, this.deptId)
        .then((res) => {
          if(res.data && Object.keys(res.data).length > 0){
          if (res.data && Object.keys(res.data).length > 0) {
            this.scoreData = res.data;
          }
        })
        .catch((err) => {
        });
      getPlatform(this.activerBtnType, this.deptId)
        .then((res) => {
          if (res.data && Object.keys(res.data).length > 0) {
            this.platformData = res.data;
          }
        })
        .catch((err) => {
@@ -1056,7 +1082,7 @@
            li {
              width: 25%;
              text-align: center;
              font-size: 14px;
              font-size: 0.75vw;
              color: #00e6f4;
              flex-shrink: 0;
              flex-grow: 0;
@@ -1107,7 +1133,8 @@
              align-items: center;
              list-style-type: none;
              border-bottom: 1px dashed #223654;
              margin: 8px 0;
              margin: 7px 0;
              li {
                width: 25%;
                text-align: center;
@@ -1298,7 +1325,7 @@
            background-image: url("../../assets/images/item-car-bg.png");
            background-size: 100% 100%;
            color: #dcf8ff;
            font-size: 12px;
            //font-size: 12px;
            line-height: 26px;
            padding: 0 15px;
            font-size: 0.625vw;
@@ -1415,21 +1442,22 @@
}
.rotating-image {
  width: 900px;
  height: 900px;
  width: 50vw;
  height: 50vw;
  position: absolute;
  top: calc(50% - 450px);
  left: calc(50% - 450px);
  top: calc(50% - 24vw);
  left: calc(50% - 24vw);
  transform: skewX(-5deg) skewY(-10deg);
  animation: rotateImage 36s linear infinite;
}
.rotating-image-in {
  width: 850px;
  height: 850px;
  width: 47.5vw;
  height: 47.5vw;
  position: absolute;
  top: calc(50% - 425px);
  left: calc(50% - 425px);
  top: calc(50% - 22.5vw);
  left: calc(50% - 22.5vw);
  animation: rotateCounterClockwise 48s linear infinite;
}
</style>