新需求

zxl

6 天以前 29ea0fd5d04dbaac800f211e0ac7701de0a7f3f4

 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"/>
@@ -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>
@@ -213,6 +213,7 @@
    return {
      deptList: [],
      deptId: '',
      intervalId: null, // 用于存储定时器的ID
      carList: [],
      videoList: [],
      faceList: [],
@@ -220,49 +221,56 @@
      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: [],
@@ -308,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) {
@@ -366,7 +382,7 @@
        });
      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;
          }
        })
@@ -374,7 +390,7 @@
        });
      getPlatform(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.platformData = res.data;
          }
        })
@@ -1066,7 +1082,7 @@
            li {
              width: 25%;
              text-align: center;
              font-size: 14px;
              font-size: 0.75vw;
              color: #00e6f4;
              flex-shrink: 0;
              flex-grow: 0;
@@ -1118,6 +1134,7 @@
              list-style-type: none;
              border-bottom: 1px dashed #223654;
              margin: 7px 0;

              li {
                width: 25%;
                text-align: center;
@@ -1308,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;
@@ -1425,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>