新增视频监控导出按钮

fuliqi

2024-09-19 e2a72a5e883d79d46d65062897c367b782cf8ba4

 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"/>
@@ -36,7 +36,7 @@
            <div class="statistics-container">
              <div class="DrawLine-content">
                <!-- <div style="width: 100%; height: 100%" ref="myDrawLine"></div> -->
                <lineChart :workOrderRegion = workOrderRegion></lineChart>
                <lineChart :workOrderRegion=workOrderRegion></lineChart>
              </div>
            </div>
          </div>
@@ -44,7 +44,9 @@
      </div>

      <div class="map-container" ref="isMap">
        <mapApp></mapApp>
        <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"/>
          <div class="btn-list" v-model="activerBtnType">
@@ -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>
@@ -108,9 +114,9 @@
          <div class="normal-statistics-content">
            <ul class="list-title-container">
              <li>地区</li>
              <li>视频设备</li>
              <li>车辆设备</li>
              <li>人脸设备</li>
              <li>视频</li>
              <li>车辆</li>
              <li>人脸</li>
            </ul>
            <div class="list-content">
              <div class="list-content-to is-scroll-bar">
@@ -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>
@@ -192,7 +201,8 @@
  getNormalRate,
  checkFace,
  checkCar,
  checkVideo
  checkVideo,
  checkScore
} from "@/api/newpage";

export default {
@@ -207,6 +217,50 @@
      faceList: [],
      workOrderData: [],
      workOrderRegion: [],
      scoreData: {
          自流井区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          高新区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          大安区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          沿滩区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          贡井区: [
            {
              value: 0,
              name: '得分'
            }
          ],
          荣县: [
            {
              value: 0,
              name: '得分'
            }
          ],
          富顺县: [
            {
              value: 0,
              name: '得分'
            }
          ]
        },
      // 设备数据
      facilityData: {
        video: [],
@@ -308,6 +362,14 @@
        })
        .catch((err) => {
        });
      checkScore(this.activerBtnType, this.deptId)
        .then((res) => {
          if(res.data && Object.keys(res.data).length > 0){
            this.scoreData = res.data;
          }
        })
        .catch((err) => {
        });
    },
    returnPath() {
      this.$router.push("/index");
@@ -315,7 +377,10 @@
    tabChange(id) {
      this.activerBtnType = id
      this.getData();
    }
    },
    // formatter: function (num) {
    //   return num.toFixed(2)
    // },
  },
  watch: {
    workOrderData() {
@@ -331,15 +396,16 @@
      item1.value1 = this.workOrderData.doneNum
      item1.value2 = this.workOrderData.totalNum - this.workOrderData.doneNum
      item1.color = '#5cff9a'
      item1.title = '已处理工单数'
      item1.title = '已处理'
      this.statistics.push(item1)

      let item2 = {value1: 0, value2: 0, title: "", color: ""}
      item2.value1 = this.workOrderData.todoNum
      item2.value2 = this.workOrderData.totalNum - this.workOrderData.todoNum
      item2.color = '#ff7b72'
      item2.title = '未处理工单数'
      item2.title = '未处理'
      this.statistics.push(item2)
      console.log( this.statistics)
    },

    videoData() {
@@ -850,6 +916,8 @@
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .item-facility-icon {
              margin: 0 auto;
@@ -869,6 +937,7 @@
              text-align: center;
              font-size: 14px;
              list-style-type: none;
              padding-left: 0;

              li:nth-child(1) {
                .value {
@@ -910,6 +979,7 @@
        display: flex;
        flex-direction: column;
        height: 0;
        overflow: hidden;

        .title {
          width: 100%;
@@ -923,7 +993,7 @@
          position: relative;
          border-bottom: 1px solid #3e97e4;
          border-right: 1px solid #3e97e4;
          padding: 4% 4% 4% 0;
          padding: 0 4% 4% 0;
          box-sizing: border-box;
          height: 0;

@@ -951,6 +1021,7 @@
          .list-title-container {
            width: 100%;
            height: 45px;
            margin: 4px 0 0 0;
            line-height: 45px;
            list-style-type: none;
            display: flex;
@@ -1026,6 +1097,7 @@
              height: 100%;
              overflow-y: auto;
              overflow-x: hidden;
              padding: 10px 0;
            }

            .item-list {
@@ -1034,7 +1106,7 @@
              align-items: center;
              list-style-type: none;
              border-bottom: 1px dashed #223654;

              margin: 10px 0;
              li {
                width: 25%;
                text-align: center;
@@ -1045,8 +1117,8 @@
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 44px;
                line-height: 44px;
                height: 28px;
                line-height: 28px;
              }

              .name {
@@ -1319,4 +1391,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>