标线调整

xiangpei

2024-09-25 b9346c0dad8727fce46482c5ed29009717a902d0

 src/views/screen/index.vue

@@ -1,44 +1,1445 @@
<template>
  <div class="screen-container">
    <screen-title></screen-title>
    <v-scale-screen width="1920" height="1080" :autoScale="true" :delay="0" class="screen">
      <screen-wrapper></screen-wrapper>
    </v-scale-screen>
  </div>
  <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"/>
        <div class="main-left-container">
          <div class="work-order-container">
            <img
              src="@/assets/images/subheading1.png"
              class="subheading-title"
            />
            <div class="statistics-container">
              <div
                class="item-statistics-container"
                v-for="(item, index) in statistics"
                :key="index"
              >
                <itemSubheading :isData="item"></itemSubheading>
              </div>
            </div>
            <img
              src="@/assets/images/decorate-border.png"
              class="decorate-border"
            />
          </div>

          <div class="histogram-container">
            <img
              src="@/assets/images/subheading1.png"
              class="subheading-title"
            />
            <div class="statistics-container">
              <div class="DrawLine-content">
                <!-- <div style="width: 100%; height: 100%" ref="myDrawLine"></div> -->
                <lineChart :workOrderRegion=workOrderRegion></lineChart>
              </div>
            </div>
          </div>
        </div>
      </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 :platformData = platformData></mapApp>
        <div class="btn-container">
          <img src="@/assets/images/btn-bg.png" class="bg-img"/>
          <div class="btn-list" v-model="activerBtnType">
            <img
              :src="activerBtnType === item.id ? item.bgActiver : item.bg"
              v-for="item in btnList"
              :key="item.id"
              @click="tabChange(item.id)"
            />
          </div>
        </div>
      </div>

      <div class="data-statistics-content">
        <div class="facility-container">
          <img src="@/assets/images/facility-title.png" class="title"/>
          <div class="facility-content">
            <div class="item-facility-data">
              <img
                src="@/assets/images/facility-title-3.png"
                class="item-facility-icon"
              />
              <ul>
                <li v-for="(item, index) in facilityData.video" :key="index">
                  <div class="value">
                    <animate-number from="0" :to="item.value" :key="item.value"></animate-number>
                  </div>
                  <div class="title">{{ item.title }}</div>
                </li>
              </ul>
            </div>
            <div class="item-facility-data">
              <img
                src="@/assets/images/facility-title-1.png"
                class="item-facility-icon"
              />
              <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>
                </li>
              </ul>
            </div>
            <div class="item-facility-data">
              <img
                src="@/assets/images/facility-title-2.png"
                class="item-facility-icon"
              />
              <ul>
                <li
                  v-for="(item, index) in facilityData.face"
                  :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>
            </div>
          </div>
        </div>
        <div class="normal-container">
          <img src="@/assets/images/normal-title.png" class="title"/>
          <div class="normal-statistics-content">
            <ul class="list-title-container">
              <li>地区</li>
              <li>视频</li>
              <li>车辆</li>
              <li>人脸</li>
            </ul>
            <div class="list-content">
              <div class="list-content-to is-scroll-bar">
                <ul
                  class="item-list"
                  v-for="(item, index) in facilityNormal"
                  :key="index"
                >
                  <li class="name">{{ item.area }}</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>
          </div>
        </div>
      </div>
      <img src="@/assets/images/video-title.png" class="video-title"/>
    </div>

    <footer>
      <img src="@/assets/images/footer-title-bg.png" class="footer-title"/>
      <div class="footer-container">
        <div class="footer-statistics-container">
          <div class="face-container">
            <div
              class="item-face-container"
              v-for="(item, index) in faceList"
              :key="index"
              :style="item.style"
            >
              <div class="proportion">
                <img src="@/assets/images/face-num-bg.png"/>
                <div class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number>%</div>
              </div>
              <div class="title">{{ item.name }}</div>
            </div>
          </div>

          <div class="video-container">
            <div
              class="item-video-data"
              v-for="(item, index) in videoList"
              :key="index"
            >
              <div class="video-data">
                <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>
          </div>

          <div class="car-container">
            <div
              class="item-car-container"
              v-for="(item, index) in carList"
              :key="index"
              :style="item.style"
            >
              {{ item.name }} <span><animate-number from="0" :to="item.value" :key="item.value"></animate-number>%</span>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import ScreenTitle from './components/screen-title/index.vue';
import ScreenWrapper from './components/screen-wrapper/index.vue';

import itemSubheading from '../screen/components/subheading.vue' // 环形统计图
import lineChart from '../screen/components/lineChart.vue' // 折线统计图
import mapApp from '../screen/components/map3.vue' // 地图
import {
  getDepartmentData,
  getDeviceData,
  getWorkOrderData,
  getWorkOrderRegion,
  getNormalRate,
  checkFace,
  checkCar,
  checkVideo,
  checkScore,
  getPlatform
} from "@/api/newpage";

export default {
  name: 'App',
  components: {
    ScreenTitle,
    ScreenWrapper,
  },
  name: 'examineApp',
  components: {mapApp, itemSubheading, lineChart},
  data() {
    return {
      deptList: [],
      deptId: '',
      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: '得分'
            }
          ]
        },
      // 设备数据
      facilityData: {
        video: [],
        car: [],
        face: []
      },
      // 设备正常率
      facilityNormal: [],
      // 人脸考核
      faceData: [],
      // 视频考核
      videoData: [],
      // 车辆考核
      carData: [],
      // 默认选中按钮 1 省厅 2 区县 3 公安
      btnList: [
        {
          id: '1',
          bg: require('@/assets/images/st-btn-1.png'),
          bgActiver: require('@/assets/images/st-btn-2.png')
        },
        {
          id: '2',
          bg: require('@/assets/images/qx-btn-1.png'),
          bgActiver: require('@/assets/images/qx-btn-2.png')
        },
        {
          id: '3',
          bg: require('@/assets/images/ga-btn-1.png'),
          bgActiver: require('@/assets/images/ga-btn-2.png')
        }
      ],
      activerBtnType: '2',
      statistics: [],
      isFullScreen: false
    }
  },
  mounted() {
    // 获取部门
    getDepartmentData()
      .then((res) => {
        this.deptList = res.data;
      })
      .catch((err) => {
      });
    // 查询数据
    this.getData();
  },
  methods: {
    getDeptId(deptName) {
      let deptId = this.deptList.find(item => item.area === deptName).deptId;
      if (deptId === this.deptId) {
        this.deptId = '';
      } else {
        this.deptId = deptId
      }
      this.getData();
    },
    getData() {
      getDeviceData(this.activerBtnType, this.deptId)
        .then((res) => {
          this.facilityData = res.data;
        })
        .catch((err) => {
        });
      getWorkOrderData(this.activerBtnType, this.deptId)
        .then((res) => {
          this.workOrderData = res.data;
        })
        .catch((err) => {
        });
      getWorkOrderRegion(this.activerBtnType, this.deptId)
        .then((res) => {
          this.workOrderRegion = res.data;
        })
        .catch((err) => {
        });
      getNormalRate(this.activerBtnType, this.deptId)
        .then((res) => {
          this.facilityNormal = res.data;
        })
        .catch((err) => {
        });
      checkCar(this.activerBtnType, this.deptId)
        .then((res) => {
          this.carData = res.data;
        })
        .catch((err) => {
        });
      checkFace(this.activerBtnType, this.deptId)
        .then((res) => {
          this.faceData = res.data;
        })
        .catch((err) => {
        });
      checkVideo(this.activerBtnType, this.deptId)
        .then((res) => {
          this.videoData = res.data;
        })
        .catch((err) => {
        });
      checkScore(this.activerBtnType, this.deptId)
        .then((res) => {
          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) => {
        });
    },
    returnPath() {
      this.$router.push("/index");
    },
    tabChange(id) {
      this.activerBtnType = id
      this.getData();
    },
    // formatter: function (num) {
    //   return num.toFixed(2)
    // },
  },
  watch: {
    workOrderData() {
      this.statistics = [];
      let item = {value1: 0, value2: 0, title: "", color: ""}
      item.value1 = this.workOrderData.totalNum
      item.value2 = 0
      item.color = '#e4b54f'
      item.title = '工单总数'
      this.statistics.push(item)

      let item1 = {value1: 0, value2: 0, title: "", color: ""}
      item1.value1 = this.workOrderData.doneNum
      item1.value2 = this.workOrderData.totalNum - this.workOrderData.doneNum
      item1.color = '#5cff9a'
      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 = '未处理'
      this.statistics.push(item2)
    },

    videoData() {
      this.videoList = [];
      let item = {value: 0, name: "", id: 0, routerUrl: ""}
      item.value = this.videoData.platformOnline
      item.name = "平台在线率"
      item.id = 1
      item.routerUrl = ""
      this.videoList.push(item)

      let item1 = {value: 0, name: "", id: 0, routerUrl: ""}
      item1.value = this.videoData.monitorQualification
      item1.name = "一机一档合格率"
      item1.id = 2
      item1.routerUrl = ""
      this.videoList.push(item1)

      let item2 = {value: 0, name: "", id: 0, routerUrl: ""}
      item2.value = this.videoData.monitorRegistration
      item2.name = "一机一档注册率"
      item2.id = 3
      item2.routerUrl = ""
      this.videoList.push(item2)

      let item3 = {value: 0, name: "", id: 0, routerUrl: ""}
      item3.value = this.videoData.archivesRate
      item3.name = "档案考核比"
      item3.id = 4
      item3.routerUrl = ""
      this.videoList.push(item3)

      let item4 = {value: 0, name: "", id: 0, routerUrl: ""}
      item4.value = this.videoData.siteOnline
      item4.name = "点位在线率"
      item4.id = 5
      item4.routerUrl = ""
      this.videoList.push(item4)

      let item5 = {value: 0, name: "", id: 0, routerUrl: ""}
      item5.value = this.videoData.videoAvailable
      item5.name = "录像可用率"
      item5.id = 6
      item5.routerUrl = ""
      this.videoList.push(item5)

      let item6 = {value: 0, name: "", id: 0, routerUrl: ""}
      item6.value = this.videoData.ministrySiteOnline
      item6.name = "部级点位在线率"
      item6.id = 7
      item6.routerUrl = ""
      this.videoList.push(item6)

      let item7 = {value: 0, name: "", id: 0, routerUrl: ""}
      item7.value = this.videoData.ministryVideoAvailable
      item7.name = "部级巡检录像可用率"
      item7.id = 8
      item7.routerUrl = ""
      this.videoList.push(item7)

      let item8 = {value: 0, name: "", id: 0, routerUrl: ""}
      item8.value = this.videoData.keySiteOnline
      item8.name = "重点点位在线率"
      item8.id = 9
      item8.routerUrl = ""
      this.videoList.push(item8)

      let item9 = {value: 0, name: "", id: 0, routerUrl: ""}
      item9.value = this.videoData.keyVideoAvailable
      item9.name = "重点点位录象可用率"
      item9.id = 10
      item9.routerUrl = ""
      this.videoList.push(item9)

      let item10 = {value: 0, name: "", id: 0, routerUrl: ""}
      item10.value = this.videoData.keyAnnotationAccuracy
      item10.name = "重点点位标注正确率"
      item10.id = 11
      item10.routerUrl = ""
      this.videoList.push(item10)

      let item11 = {value: 0, name: "", id: 0, routerUrl: ""}
      item11.value = this.videoData.keyTimingAccuracy
      item11.name = "重点点位按时正确率"
      item11.id = 12
      item11.routerUrl = ""
      this.videoList.push(item11)

      let item12 = {value: 0, name: "", id: 0, routerUrl: ""}
      item12.value = this.videoData.keyCommandImageOnline
      item12.name = "重点指挥图像在线率"
      item12.id = 13
      item12.routerUrl = ""
      this.videoList.push(item12)

      let item13 = {value: 0, name: "", id: 0, routerUrl: ""}
      item13.value = this.videoData.imageResourceSecurity
      item13.name = "图像资源安全管理"
      item13.id = 14
      item13.routerUrl = ""
      this.videoList.push(item13)
    },
    carData() {
      this.carList = [];
      let item = {value: 0, name: "", id: 0, routerUrl: ""}
      item.value = this.carData.viewConnectStability
      item.name = "视图库对接稳定性"
      item.id = 1
      item.routerUrl = ""
      item.style = {
        top: '65%',
        left: '70%'
      }
      this.carList.push(item)

      let item1 = {value: 0, name: "", id: 0, routerUrl: ""}
      item1.value = this.carData.siteOnline
      item1.name = "点位在线率"
      item1.id = 2
      item1.routerUrl = ""
      item1.style = {
        top: '46%',
        left: '66%'
      }
      this.carList.push(item1)

      let item2 = {value: 0, name: "", id: 0, routerUrl: ""}
      item2.value = this.carData.deviceDirectoryConsistent
      item2.name = "联网卡口目录一致率"
      item2.id = 3
      item2.routerUrl = ""
      item2.style = {
        top: '26%',
        left: '5%'
      }
      this.carList.push(item2)

      let item3 = {value: 0, name: "", id: 0, routerUrl: ""}
      item3.value = this.carData.vehicleInformationCollectionAccuracy
      item3.name = "信息采集准确率"
      item3.id = 4
      item3.routerUrl = ""
      item3.style = {
        top: '26%',
        left: '63%'
      }
      this.carList.push(item3)

      let item4 = {value: 0, name: "", id: 0, routerUrl: ""}
      item4.value = this.carData.vehicleCaptureIntegrity
      item4.name = "抓拍数据完整性"
      item4.id = 5
      item4.routerUrl = ""
      item4.style = {
        top: '46%',
        left: '12%'
      }
      this.carList.push(item4)

      let item5 = {value: 0, name: "", id: 0, routerUrl: ""}
      item5.value = this.carData.vehicleCaptureAccuracy
      item5.name = "抓拍数据准确性"
      item5.id = 6
      item5.routerUrl = ""
      item5.style = {
        top: '7%',
        left: '59.2%'
      }
      this.carList.push(item5)

      let item6 = {value: 0, name: "", id: 0, routerUrl: ""}
      item6.value = this.carData.vehicleTimingAccuracy
      item6.name = "时钟准确性"
      item6.id = 7
      item6.routerUrl = ""
      item6.style = {
        top: '65%',
        left: '13%'
      }
      this.carList.push(item6)

      let item7 = {value: 0, name: "", id: 0, routerUrl: ""}
      item7.value = this.carData.vehicleUploadTimeliness
      item7.name = "抓拍数据上传及时性"
      item7.id = 8
      item7.routerUrl = ""
      item7.style = {
        top: '83%',
        left: '59.5%'
      }
      this.carList.push(item7)

      let item8 = {value: 0, name: "", id: 0, routerUrl: ""}
      item8.value = this.carData.vehicleUrlAvailability
      item8.name = "url可用性"
      item8.id = 9
      item8.routerUrl = ""
      item8.style = {
        top: '83%',
        left: '18.5%'
      }
      this.carList.push(item8)

      let item9 = {value: 0, name: "", id: 0, routerUrl: ""}
      item9.value = this.carData.vehiclePictureAvailability
      item9.name = "抓拍数据大图可用性"
      item9.id = 10
      item9.style = {
        top: '7%',
        left: '15%'
      }
      item9.routerUrl = ""
      this.carList.push(item9)
    },
    faceData() {
      this.faceList = [];
      let item = {value: 0, name: "", id: 0, routerUrl: ""}
      item.value = this.faceData.viewConnectStability
      item.name = "视图库对接稳定性"
      item.id = 1
      item.routerUrl = ""
      item.style = {
        top: '13%',
        left: '2%'
      }
      this.faceList.push(item)

      let item1 = {value: 0, name: "", id: 0, routerUrl: ""}
      item1.value = this.faceData.siteOnline
      item1.name = "点位在线率"
      item1.id = 2
      item1.routerUrl = ""
      item1.style = {
        top: '23%',
        left: '19%'
      }
      this.faceList.push(item1)

      let item2 = {value: 0, name: "", id: 0, routerUrl: ""}
      item2.value = this.faceData.deviceDirectoryConsistent
      item2.name = "目录一致率"
      item2.id = 3
      item2.routerUrl = ""
      item2.style = {
        bottom: '18%',
        right: '2%'
      }
      this.faceList.push(item2)

      let item3 = {value: 0, name: "", id: 0, routerUrl: ""}
      item3.value = this.faceData.faceInformationCollectionAccuracy
      item3.name = "信息采集准确率"
      item3.id = 4
      item3.routerUrl = ""
      item3.style = {
        bottom: '2%',
        left: '19%'
      }
      this.faceList.push(item3)

      let item4 = {value: 0, name: "", id: 0, routerUrl: ""}
      item4.value = this.faceData.facePictureQualification
      item4.name = "抓拍图片合格性"
      item4.id = 5
      item4.routerUrl = ""
      item4.style = {
        top: '23%',
        right: '19%'
      }
      this.faceList.push(item4)

      let item5 = {value: 0, name: "", id: 0, routerUrl: ""}
      item5.value = this.faceData.faceTimingAccuracy
      item5.name = "抓拍图片时钟准确性"
      item5.id = 6
      item5.routerUrl = ""
      item5.style = {
        top: '13%',
        right: '2%'
      }
      this.faceList.push(item5)

      let item6 = {value: 0, name: "", id: 0, routerUrl: ""}
      item6.value = this.faceData.faceUploadTimeliness
      item6.name = "抓拍数据上传及时性"
      item6.id = 7
      item6.routerUrl = ""
      item6.style = {
        bottom: '2%',
        right: '19%'
      }
      this.faceList.push(item6)

      let item7 = {value: 0, name: "", id: 0, routerUrl: ""}
      item7.value = this.faceData.facePictureAvailability
      item7.name = "抓拍数据大图可用性"
      item7.id = 8
      item7.routerUrl = ""
      item7.style = {
        bottom: '18%',
        left: '2%'
      }
      this.faceList.push(item7)
    },
  }
}
</script>

<style lang="scss" scoped>
.screen-container {
  user-select: none;
  -webkit-user-select: none;
}
.screen {
  background: url('../../assets/images/screen/pageBg1.jpg') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
.container {
  width: 100vw;
  height: 100vh;
  // min-width: 1919px;
  background-image: url("../../assets/images/background-img.jpg");
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;

  header {
    position: relative;
    z-index: 4;

    img {
      width: 100%;
      display: block;
    }
  }

  .main-contaner {
    flex: 1;
    width: 100%;
    height: 0;
    display: flex;
    flex-direction: row;
    margin-top: -2%;
    position: relative;

    .data-statistics-content {
      width: 20.833333%;
      padding-left: 1%;
      padding-right: 1%;
      padding-top: 0.5%;
      box-sizing: border-box;
      height: 100%;
      display: flex;
      flex-direction: column;

      .title {
        width: 100%;
        flex-shrink: 0;
        flex-grow: 0;
        display: block;
      }

      .main-left-container {
        position: relative;
        height: 100%;
        border-bottom: 1px solid #3e97e4;
        border-left: 1px solid #3e97e4;
        padding: 4% 0 4% 4%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        &::after {
          width: 2px;
          height: 20px;
          content: "";
          position: absolute;
          left: -6px;
          top: -18px;
          background-color: #3e97e4;
          transform: rotate(-30deg);
        }

        &::before {
          width: 43px;
          height: 40px;
          content: "";
          position: absolute;
          background-image: url("../../assets/images/border-l-icon.png");
          bottom: 0;
          left: 0;
        }

        .work-order-container {
          height: 40%;
          flex-shrink: 0;
          flex-grow: 0;
          display: flex;
          flex-direction: column;

          .subheading-title {
            width: 97%;
            display: block;
            flex-shrink: 0;
            flex-grow: 0;
          }

          .statistics-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            flex: 1;
            margin: 0 -5px;

            .item-statistics-container {
              width: calc(33.33% - 10px);
              margin: 0 5px;
            }
          }

          .decorate-border {
            width: 100%;
            display: block;
          }
        }

        .histogram-container {
          padding-top: 5%;
          box-sizing: border-box;
          height: 60%;
          flex-shrink: 0;
          flex-grow: 0;
          display: flex;
          flex-direction: column;

          .subheading-title {
            width: 97.3%;
            display: block;
            flex-shrink: 0;
            flex-grow: 0;
          }

          .statistics-container {
            flex: 1;
            position: relative;

            .DrawLine-content {
              position: absolute;
              width: 100%;
              height: 100%;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
            }
          }
        }
      }

      .facility-container {
        height: 45.9754434%;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        flex-grow: 0;

        .title {
          width: 100%;
          flex-shrink: 0;
          flex-grow: 0;
          display: block;
        }

        .facility-content {
          flex: 1;
          position: relative;
          border-bottom: 1px solid #3e97e4;
          border-right: 1px solid #3e97e4;
          display: flex;
          padding-top: 4%;
          flex-direction: row;
          overflow: hidden;

          &::after {
            width: 2px;
            height: 20px;
            content: "";
            position: absolute;
            right: -6px;
            top: -18px;
            background-color: #3e97e4;
            transform: rotate(30deg);
          }

          &::before {
            width: 43px;
            height: 40px;
            content: "";
            position: absolute;
            background-image: url("../../assets/images/border-icon.png");
            bottom: 0;
            right: 0;
          }

          .item-facility-data {
            width: 33.33%;
            flex-shrink: 0;
            flex-grow: 0;
            background-image: url("../../assets/images/item-facility.png");
            background-size: 100% auto;
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            //justify-content: center;
            //align-items: center;

            .item-facility-icon {
              margin: 0 auto;
              margin-top: 10%;
              width: 73%;
              display: block;
              flex-shrink: 0;
              flex-grow: 0;
            }

            ul {
              flex: 1;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              text-align: center;
              list-style-type: none;
              //font-size: 14px;
              //padding-left: 0;

              li:nth-child(1) {
                .value {
                  color: #e4b54f;
                }

                .title {
                  color: #dcf8ff;
                }
              }

              li:nth-child(2) {
                .value {
                  color: #5cff9a;
                }

                .title {
                  color: #dcf8ff;
                }
              }

              li:nth-child(3) {
                .value {
                  color: #ff7b72;
                }

                .title {
                  color: #dcf8ff;
                }
              }
            }
          }
        }
      }

      .normal-container {
        margin-top: 2%;
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 0;
        //overflow: hidden;

        .title {
          width: 100%;
          flex-shrink: 0;
          flex-grow: 0;
          display: block;
        }

        .normal-statistics-content {
          flex: 1;
          position: relative;
          border-bottom: 1px solid #3e97e4;
          border-right: 1px solid #3e97e4;
          padding: 0 4% 4% 0;
          box-sizing: border-box;
          height: 0;

          &::after {
            width: 2px;
            height: 20px;
            content: "";
            position: absolute;
            right: -6px;
            top: -18px;
            background-color: #3e97e4;
            transform: rotate(30deg);
          }

          &::before {
            width: 43px;
            height: 40px;
            content: "";
            position: absolute;
            background-image: url("../../assets/images/border-icon.png");
            bottom: 0;
            right: 0;
          }

          .list-title-container {
            width: 100%;
            //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;
            background-color: #09316b;
            box-shadow: inset 0 0 16px rgba(25, 99, 210, 0.1);
            flex-shrink: 0;
            flex-grow: 0;
            position: relative;

            &::after {
              position: absolute;
              top: 0;
              left: 0;
              content: "";
              width: 15px;
              height: 15px;
              background-image: url("../../assets/images/list-t-l-icon.png");
            }

            &::before {
              position: absolute;
              top: 0;
              right: 0;
              content: "";
              width: 15px;
              height: 15px;
              background-image: url("../../assets/images/list-t-r-icon.png");
            }

            li {
              width: 25%;
              text-align: center;
              font-size: 14px;
              color: #00e6f4;
              flex-shrink: 0;
              flex-grow: 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .list-content {
            height: calc(100% - 45px);

            background-image: url("../../assets/images/list-bg.png");
            background-size: 100% 100%;
            box-shadow: inset 0 0 20px rgba(25, 99, 210, 0.1);
            position: relative;

            &::after {
              position: absolute;
              bottom: 0;
              left: 0;
              content: "";
              width: 15px;
              height: 15px;
              background-image: url("../../assets/images/list-b-l-icon.png");
            }

            &::before {
              position: absolute;
              bottom: 0;
              right: 0;
              content: "";
              width: 15px;
              height: 15px;
              background-image: url("../../assets/images/list-b-r-icon.png");
            }

            .list-content-to {
              height: 100%;
              overflow-y: hidden;
              overflow-x: hidden;
              //padding: 10px 0;
            }

            .item-list {
              display: flex;
              flex-direction: row;
              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: 0.72916667vw !important;
                color: #dcf8ff;
                flex-shrink: 0;
                flex-grow: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                //height: 28px;
                //line-height: 28px;
                height: 2.59vh;
                line-height: 2.59vh;
              }

              .name {
                color: #00b4ff;
              }
            }
          }
        }
      }
    }

    .map-container {
      flex: 1;
      height: 100%;
      margin: 0 1%;
      position: relative;
      overflow: hidden;
      // background-image: url('../assets//images/face-num-bg3.png');
      // border:1px solid #ddd;
      // box-sizing: border-box;

      .main-map {
        height: 100%;
        overflow: hidden;
      }

      .btn-container {
        width: 60%;
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;

        .bg-img {
          width: 100%;
        }

        .btn-list {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          padding-top: 3.3%;
          padding-left: 16.4%;
          padding-right: 16.4%;
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          img {
            width: 26.638484%;
            flex-shrink: 0;
            flex-grow: 0;
            display: block;
            cursor: pointer;
            user-select: none;
          }
        }
      }
    }

    .video-title {
      width: 60.5208333%;
      position: absolute;
      z-index: 8;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
    }
  }

  footer {
    .footer-title {
      width: 100%;
      display: block;
    }

    .footer-container {
      //height: 220px;
      height: 24.15vh;
      box-sizing: border-box;
      position: relative;
      background-image: url("../../assets/images/footer-bg.png");
      background-size: cover;
      background-position: center;

      .footer-statistics-container {
        width: 100%;
        height: 100%;
        padding-bottom: 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: stretch;

        .face-container,
        .car-container {
          flex: 1;
          height: 100%;
        }

        .face-container {
          position: relative;

          background-image: url("../../assets/images/face-bg.png");
          //background-size: 500px 200px;
          background-size: 26.04166vw auto;
          background-position: center;
          background-repeat: no-repeat;

          .item-face-container {
            position: absolute;
            z-index: 4;
            width: 22.296173%;

            .proportion {
              //width: 50px;
              width: 2.60416vw;
              margin: 0 auto;
              color: #00eaff;
              text-shadow: 2px 2px 4px #152944;
              position: relative;

              img {
                width: 100%;
                display: block;
              }

              .value {
                position: absolute;
                left: 50%;
                top: 53%;
                transform: translate(-50%, -50%);
                //font-size: 14px;
              }
            }

            .title {
              text-align: center;
              //font-size: 12px;
              font-size: 0.625vw;
              color: #dcf8ff;
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 隐藏超出的内容 */
              text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
            }
          }
        }

        .car-container {
          position: relative;
          background-image: url("../../assets/images/car-bg2.png");
          //background-size: 500px 200px;
          background-size: 26.04166vw auto;
          background-position: center;
          background-repeat: no-repeat;

          // .car-bj-img {
          //   position: absolute;
          //   left: 50%;
          //   top: 50%;
          //   transform: translate(-50%, -50%);
          //   width: 83.1946755%;
          //   display: block;
          //   z-index: 2;
          // }

          .item-car-container {
            background-image: url("../../assets/images/item-car-bg.png");
            background-size: 100% 100%;
            color: #dcf8ff;
            font-size: 12px;
            line-height: 26px;
            padding: 0 15px;
            font-size: 0.625vw;
            position: absolute;
            z-index: 5;

            span {
              color: #ffc23e;
            }
          }
        }

        .video-container {
          width: 37.6041667%;
          height: 100%;
          flex-shrink: 0;
          flex-grow: 0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: self-start;
          box-sizing: border-box;

          .item-video-data {
            width: 14.2857143%;
            flex-grow: 0;
            padding: 0 10px;
            box-sizing: border-box;
            height: 50%;
            display: flex;
            flex-direction: column;

            .video-data {
              flex: 1;
              position: relative;
              background-image: url("../../assets/images/item-video-bg.png");
              background-size: 100%;
              background-position: center;
              background-repeat: no-repeat;

              img {
                width: 100%;
                display: block;
              }

              .proportion {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                //font-size: 20px;
                font-size: 1.04166vw;
                font-weight: bold;
                color: #00fcff;
                text-shadow: 2px 2px 4px #152944;
              }
            }

            .item-video-title {
              text-align: center;
              color: #dcf8ff;
              //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;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}

</style>
.is-scroll-bar::-webkit-scrollbar {
  width: 4px;
}

.is-scroll-bar::-webkit-scrollbar-thumb {
  border-radius: 0px;
  box-shadow: inset 0 0 5px #1e75d9;
  background-color: #1e75d9;
  opacity: 0.2;
}

.is-scroll-bar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #0d172c;
  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>