fuliqi
2024-11-05 c79a020be41892e60021c2a750ea2976dd20f2f3
src/views/screen/index.vue
@@ -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: 14px" 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: 14px" 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: 14px" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
                  <div style="font-size: 14px" 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: 14px" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
                  <div style="font-size: 14px" class="title">{{ item.title }}</div>
                </li>
              </ul>
            </div>
@@ -114,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">
@@ -192,7 +192,7 @@
<script>
import itemSubheading from '../screen/components/subheading.vue' // 环形统计图
import lineChart from '../screen/components/lineChart.vue' // 折线统计图
import mapApp from '../screen/components/map.vue' // 地图
import mapApp from '../screen/components/map3.vue' // 地图
import {
  getDepartmentData,
  getDeviceData,
@@ -202,7 +202,8 @@
  checkFace,
  checkCar,
  checkVideo,
  checkScore
  checkScore,
  getPlatform
} from "@/api/newpage";
export default {
@@ -212,55 +213,57 @@
    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: '得分'
            }
          ]
        },
        自流井区: [
          {
            value: 0,
            name: '得分'
          }
        ],
        高新区: [
          {
            value: 0,
            name: '得分'
          }
        ],
        大安区: [
          {
            value: 0,
            name: '得分'
          }
        ],
        沿滩区: [
          {
            value: 0,
            name: '得分'
          }
        ],
        贡井区: [
          {
            value: 0,
            name: '得分'
          }
        ],
        荣县: [
          {
            value: 0,
            name: '得分'
          }
        ],
        富顺县: [
          {
            value: 0,
            name: '得分'
          }
        ]
      },
      // 设备数据
      facilityData: {
        video: [],
@@ -306,8 +309,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 +375,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) => {
@@ -396,16 +415,15 @@
      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() {
@@ -916,6 +934,8 @@
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            //justify-content: center;
            //align-items: center;
            .item-facility-icon {
              margin: 0 auto;
@@ -933,8 +953,9 @@
              flex-direction: column;
              justify-content: space-around;
              text-align: center;
              font-size: 14px;
              list-style-type: none;
              //font-size: 14px;
              //padding-left: 0;
              li:nth-child(1) {
                .value {
@@ -976,6 +997,7 @@
        display: flex;
        flex-direction: column;
        height: 0;
        //overflow: hidden;
        .title {
          width: 100%;
@@ -989,7 +1011,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;
@@ -1016,8 +1038,11 @@
          .list-title-container {
            width: 100%;
            height: 45px;
            line-height: 45px;
            //height: 45px;
            //margin: 4px 0 0 0;
            //line-height: 45px;
            height: 4.17vh;
            line-height: 4.17vh;
            list-style-type: none;
            display: flex;
            flex-direction: row;
@@ -1090,8 +1115,9 @@
            .list-content-to {
              height: 100%;
              overflow-y: auto;
              overflow-y: hidden;
              overflow-x: hidden;
              //padding: 10px 0;
            }
            .item-list {
@@ -1100,19 +1126,23 @@
              align-items: center;
              list-style-type: none;
              border-bottom: 1px dashed #223654;
              margin: 7px 0;
              li {
                width: 25%;
                text-align: center;
                font-size: 14px;
                //font-size: 14px;
                font-size: 0.72916667vw !important;
                color: #dcf8ff;
                flex-shrink: 0;
                flex-grow: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 44px;
                line-height: 44px;
                //height: 28px;
                //line-height: 28px;
                height: 2.59vh;
                line-height: 2.59vh;
              }
              .name {
@@ -1195,7 +1225,8 @@
    }
    .footer-container {
      height: 220px;
      //height: 220px;
      height: 24.15vh;
      box-sizing: border-box;
      position: relative;
      background-image: url("../../assets/images/footer-bg.png");
@@ -1221,19 +1252,10 @@
          position: relative;
          background-image: url("../../assets/images/face-bg.png");
          background-size: 500px 200px;
          //background-size: 500px 200px;
          background-size: 26.04166vw auto;
          background-position: center;
          background-repeat: no-repeat;
          // .face-bj-img {
          //   position: absolute;
          //   left: 50%;
          //   top: 50%;
          //   transform: translate(-50%, -50%);
          //   width: 83.1946755%;
          //   display: block;
          //   z-index: 2;
          // }
          .item-face-container {
            position: absolute;
@@ -1241,7 +1263,8 @@
            width: 22.296173%;
            .proportion {
              width: 50px;
              //width: 50px;
              width: 2.60416vw;
              margin: 0 auto;
              color: #00eaff;
              text-shadow: 2px 2px 4px #152944;
@@ -1257,13 +1280,14 @@
                left: 50%;
                top: 53%;
                transform: translate(-50%, -50%);
                font-size: 14px;
                //font-size: 14px;
              }
            }
            .title {
              text-align: center;
              font-size: 12px;
              //font-size: 12px;
              font-size: 0.625vw;
              color: #dcf8ff;
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 隐藏超出的内容 */
@@ -1275,7 +1299,8 @@
        .car-container {
          position: relative;
          background-image: url("../../assets/images/car-bg2.png");
          background-size: 500px 200px;
          //background-size: 500px 200px;
          background-size: 26.04166vw auto;
          background-position: center;
          background-repeat: no-repeat;
@@ -1296,6 +1321,7 @@
            font-size: 12px;
            line-height: 26px;
            padding: 0 15px;
            font-size: 0.625vw;
            position: absolute;
            z-index: 5;
@@ -1343,7 +1369,8 @@
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                font-size: 20px;
                //font-size: 20px;
                font-size: 1.04166vw;
                font-weight: bold;
                color: #00fcff;
                text-shadow: 2px 2px 4px #152944;
@@ -1353,10 +1380,13 @@
            .item-video-title {
              text-align: center;
              color: #dcf8ff;
              height: 32px;
              font-size: 13px;
              //height: 32px;
              //font-size: 13px;
              //flex-shrink: 0;
              //flex-grow: 0;
              flex-shrink: 0;
              flex-grow: 0;
              height: 3.51851vh;
              display: -webkit-box;
              -webkit-line-clamp: 2; /* 显示的行数 */
              -webkit-box-orient: vertical;