类型：开发

描述：
类型：开发
2026-04-27 16:58:11 +08:00 · 2026-02-09 12:20:57 +08:00 · 2026-02-09 10:28:57 +08:00 · 2026-02-03 23:50:29 +08:00 · 2026-02-03 23:38:44 +08:00 · 2026-02-03 10:29:49 +08:00
66 changed files with 3601 additions and 2206 deletions
--- a/dist01.zip
+++ b/dist01.zip
--- a/dist5.31.zip
+++ b/dist5.31.zip
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
        "hls.js": "^1.5.18",
        "jssip": "^3.10.1",
        "lodash": "^4.17.21",
+        "mpegts.js": "^1.8.0",
        "pinia": "^2.2.6",
        "pinia-plugin-persistedstate": "^4.2.0",
        "pubsub-js": "^1.9.5",
@@ -23,7 +24,8 @@
        "vue-echarts": "^7.0.3",
        "vue-router": "^4.4.5",
        "vue3-seamless-scroll": "^2.0.1",
-        "vuedraggable": "^4.1.0"
+        "vuedraggable": "^4.1.0",
+        "whepts": "^1.1.12"
      },
      "devDependencies": {
        "@vitejs/plugin-vue": "^5.2.1",
@@ -3201,6 +3203,12 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
+      "license": "MIT"
+    },
    "node_modules/esbuild": {
      "version": "0.25.1",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
@@ -3327,6 +3335,12 @@
      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
      "license": "MIT"
    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
    "node_modules/events": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -4272,6 +4286,16 @@
        "ufo": "^1.5.4"
      }
    },
+    "node_modules/mpegts.js": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/mpegts.js/-/mpegts.js-1.8.0.tgz",
+      "integrity": "sha512-ZtujqtmTjWgcDDkoOnLvrOKUTO/MKgLHM432zGDI8oPaJ0S+ebPxg1nEpDpLw6I7KmV/GZgUIrfbWi3qqEircg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "es6-promise": "^4.2.5",
+        "webworkify-webpack": "github:xqq/webworkify-webpack"
+      }
+    },
    "node_modules/mrmime": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -4306,6 +4330,21 @@
        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
      }
    },
+    "node_modules/nanostores": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/nanostores/-/nanostores-1.1.0.tgz",
+      "integrity": "sha512-yJBmDJr18xy47dbNVlHcgdPrulSn1nhSE6Ns9vTG+Nx9VPT6iV1MD6aQFp/t52zpf82FhLLTXAXr30NuCnxvwA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": "^20.0.0 || >=22.0.0"
+      }
+    },
    "node_modules/neo-async": {
      "version": "2.6.2",
      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
@@ -6143,6 +6182,21 @@
        "url": "https://opencollective.com/webpack"
      }
    },
+    "node_modules/webworkify-webpack": {
+      "version": "2.1.5",
+      "resolved": "git+ssh://git@github.com/xqq/webworkify-webpack.git#24d1e719b4a6cac37a518b2bb10fe124527ef4ef",
+      "license": "MIT"
+    },
+    "node_modules/whepts": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/whepts/-/whepts-1.1.12.tgz",
+      "integrity": "sha512-KllGslriMAhD6BDBbG6X653M8XgeYqxnjuEyaB7U/1nIZN6NoAGSWP3Av46g690r2UaaI69bNzfPn4efJBd+kA==",
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^5.0.4",
+        "nanostores": "^1.1.0"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
    "hls.js": "^1.5.18",
    "jssip": "^3.10.1",
    "lodash": "^4.17.21",
+    "mpegts.js": "^1.8.0",
    "pinia": "^2.2.6",
    "pinia-plugin-persistedstate": "^4.2.0",
    "pubsub-js": "^1.9.5",
@@ -24,7 +25,8 @@
    "vue-echarts": "^7.0.3",
    "vue-router": "^4.4.5",
    "vue3-seamless-scroll": "^2.0.1",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "^4.1.0",
+    "whepts": "^1.1.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,9 @@
 </script>

 <template>
-  <main class="wrapper"> <RouterView /> </main>
+  <main class="wrapper"> 
+	<RouterView /> 
+  </main>
 </template>

 <style scoped>
--- a/src/api/home.js
+++ b/src/api/home.js
@@ -50,6 +50,9 @@ export function getRegionsListApi(data){

 // 获取视频播放地址
 export function getPreviewUrlApi(data) {
+  if(data.cameraIndexCode==undefined || !data.cameraIndexCode){
+    return null;
+  }
  return request({
    url: '/fjtcc-api/api/largeScreen/video/getPreviewUrl',
    method: 'post',
@@ -132,3 +135,11 @@ export function getVideCollectCateSort(data) {
    data
  })
 }
+//今年游客总数
+export function getSpotVisitor(data) {
+  return request({
+    url: '/fjtcc-api/api/largeScreen/spot/spotVisitor',
+    method: 'get',
+    data
+  })
+}
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -12,6 +12,7 @@ const instance = axios.create({
  timeout: 100000,
  headers: {
    Authorization: mode == 'dev' ? devToken : proToken,
+	'User-Type':'2',
    'Content-Type': 'application/json;charset=UTF-8'
  }
 })
@@ -40,10 +41,11 @@ instance.interceptors.response.use(
    if (res.data.code == 200) {
      return res.data
    } else {
-      ElMessage({
-        message: res.data.msg,
-        type: 'error'
-      })
+        console.error("接口请求错误："+res.data.msg)
+        // ElMessage({
+        //   message: res.data.msg,
+        //   type: 'error'
+        // })
      return Promise.reject(res.data)
    }
  },
--- a/src/components/CircleProgress/index.vue
+++ b/src/components/CircleProgress/index.vue
@@ -57,7 +57,7 @@
        top: '20%',
        textStyle: {
          color: '#00D0FF',
-          fontSize: fitChartSize(18)
+          fontSize: fitChartSize(24)
        }
      },
      {
@@ -66,7 +66,7 @@
        top: '50%',
        textStyle: {
          color: '#fff',
-          fontSize: fitChartSize(16)
+          fontSize: fitChartSize(22)
        }
      }
    ],
@@ -91,13 +91,13 @@
              [0, '#075199'],
              [1, '#075199']
            ],
-            width: fitChartSize(6)
+            width: fitChartSize(10)
          }
        },
        progress: {
          show: true,
          roundCap: false,
-          width: fitChartSize(6)
+          width: fitChartSize(10)
        },
        pointer: {
          // 指针
@@ -143,13 +143,13 @@
              [0, '#075199'],
              [1, '#075199']
            ],
-            width: fitChartSize(6)
+            width: fitChartSize(10)
          }
        },
        progress: {
          show: true,
          roundCap: false,
-          width: fitChartSize(6)
+          width: fitChartSize(10)
        },
        pointer: {
          // 指针
--- a/src/components/CountItem/index.vue
+++ b/src/components/CountItem/index.vue
@@ -52,32 +52,34 @@
    flex: 1;
    .label {
      font-weight: 400;
-      font-size: vw(14);
+      font-size: font-vw(20);
      margin-left: vw(4);
      color: rgba(255, 255, 255, 0.9);
    }
    .count {
      position: relative;
-      margin-top: vh(10);
+      margin-top: vh(30);
      z-index: 1;
      .value {
        padding-left: vw(20);
        font-weight: bold;
-        font-size: vw(28);
+        font-size: font-vw(38);
        color: #02f9fa;
      }
      .suffix {
-        margin-top: vh(4);
+        // margin-top: vh(34);
        font-weight: bold;
-        font-size: vw(12);
+        font-size: font-vw(18);
        color: #02f9fa;
+		margin-left:vw(5);
      }
      .bg {
        position: absolute;
        left: 0;
        top: 0;
-        width: vw(134);
-        height: vh(30);
+        width: vw(184);
+        height: vh(50);
+		line-height: vh(50);
        z-index: -1;
      }
    }
--- a/src/components/HlsPlayer/index.vue
+++ b/src/components/HlsPlayer/index.vue
@@ -2,11 +2,13 @@
  <div v-show="isActive" class="myVideo-container">
    <video
        class="myVideo"
+        id="video"
        ref="videoElement"
        muted
        playsinline
+        preload="auto"
+        autoplay
        :controls="false"
-      disablePictureInPicture
    ></video>
    <!-- <div v-if="loading" class="loading-overlay pointer-events-none">
       <div class="loading-text">{{ loadingText }}</div>
@@ -15,9 +17,9 @@
 </template>

 <script>
-  import Hls from 'hls.js'
-
-  export default {
+import Hls from 'hls.js'
+import WebRTCWhep from "whepts";
+export default {
  name: 'HlsPlayer',
  props: {
    url: {
@@ -157,8 +159,23 @@

    initializePlayer() {
      if (!this.isActive || !this.url) return
-
      // 如果是重新初始化播放器，先清理已存在的资源
+      if(this.url.startsWith('http://192.168.77.200:8050/')){
+        this.hls = new WebRTCWhep({
+          url: this.url, // WHEP 服务器地址
+          container: this.video, // 视频播放容器
+          iceServers: [{ urls: 'turn:192.168.77.200:3478',username: 'ZLMediaKit',credential: 'ZLMediaKit'}]
+        })
+        this.hls.on('error', (error) => {
+          console.error('错误:', error.message, error.type)
+          if(error.type ==='REQUEST_ERROR' || error.type ==='NOT_FOUND_ERROR'){
+            this.initializePlayer();
+          }
+        })
+        this.hls.on('play:failed', (err) => {
+          // this.initializePlayer();
+        })
+      }else{
        if (this.hls) {
          this.immediateCleanup()
        }
@@ -211,6 +228,8 @@
        this.hls.on(Hls.Events.BUFFER_EOS, () => {
          this.cleanupNetworkResources()
        })
+      }
+
    },
    initVideo() {
      this.beforeDestroy()
@@ -314,24 +333,24 @@
    }
    this.fullCleanup()
  }
-  }
+}
 </script>

 <style scoped lang="scss">
-  .myVideo-container {
+.myVideo-container {
  position: relative;
  height: 100%;
-  }
+}

-  .myVideo {
+.myVideo {
  width: 100%;
  height: 100%;
  // aspect-ratio: 16/9;
  /* border: 1px solid #ccc; */
  // border-radius: vw(5);
-  }
+}

-  .loading-overlay {
+.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
@@ -341,12 +360,12 @@
  display: flex;
  justify-content: center;
  align-items: center;
-  }
+}

-  .loading-text {
+.loading-text {
  color: white;
  padding: vw(10);
  border-radius: vw(4);
  background: rgba(0, 0, 0, 0.6);
-  }
+}
 </style>
--- a/src/components/Line/index.vue
+++ b/src/components/Line/index.vue
@@ -84,7 +84,7 @@
                border: 1px solid #0096FF;
                color: #fff;
                font-weight: bold;
-                font-size: ${fitChartSize(16)}px;
+                font-size: ${fitChartSize(18)}px;
                border-radius: ${fitChartSize(4)}px;
                padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">
                ${valueStr}</div>`
@@ -93,7 +93,7 @@
    },
    grid: {
      left: '2%',
-      right: '2%',
+      right: '10%',
      bottom: '5%',
      top: '10%',
      containLabel: true
@@ -103,12 +103,12 @@
      x: 'center',
      y: 'top',
      icon: 'rect',
-      itemWidth: fitChartSize(8),
-      itemHeight: fitChartSize(4),
-      itemGap: fitChartSize(10),
+      itemWidth: fitChartSize(12),
+      itemHeight: fitChartSize(12),
+      itemGap: fitChartSize(12),
      textStyle: {
        color: '#ffffff',
-        fontSize: fitChartSize(12)
+        fontSize: fitChartSize(22)
      }
    },
    title: {
@@ -127,14 +127,14 @@
        }
      },
      axisLabel: {
-        fontSize: fitChartSize(12),
+        fontSize: fitChartSize(18),
        color: 'rgba(255,255,255,0.9)'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
-        fontSize: fitChartSize(12),
+        fontSize: fitChartSize(18),
        color: 'rgba(255,255,255,0.9)'
      },
      splitLine: {
@@ -224,7 +224,7 @@
 		top:0;
 		width: 100%;
 		height: 100%;
-		font-size:vw(18);
+		font-size:font-vw(18);
 		// color:#999;
 		color:#02f9fa;
 		display: flex;
--- a/src/components/PieRow/index.vue
+++ b/src/components/PieRow/index.vue
@@ -59,7 +59,7 @@
  watch(
    () => props.dataList,
    (newVal) => {
-		
+		console.log(newVal,'监听数据切换变化')
 		aIndex+=1
 		
 		if(aIndex>=3&&!newVal.length){
@@ -113,20 +113,21 @@
 	    color: colorList,
 	    legend: {
 	      orient: 'vertical',
-	      x: '64%',
-	      y: 'center',
-	      itemWidth: fitChartSize(12),
-	      itemHeight: fitChartSize(12),
+	      x: 'center',
+	      y: '60%',
+		  bottom:'20%',
+	      itemWidth: fitChartSize(20),
+	      itemHeight: fitChartSize(20),
 	      itemGap: fitChartSize(10),
 	      textStyle: {
 	        color: '#ffffff',
-	        fontSize: fitChartSize(14)
+	        fontSize: fitChartSize(18)
 	      }
 	    },
 	    series: [
 	      {
 	        type: 'pie',
-	        center: ['30%', '50%'],
+	        center: ['50%', '30%'],
 	        radius: ['40%', '55%'],
 	        itemStyle: {
 	          borderWidth: fitChartSize(4),
@@ -142,13 +143,13 @@
 	          rich: {
 	            value: {
 	              color: '#fff',
-	              fontSize: fitChartSize(24),
+	              fontSize: fitChartSize(18),
 	              fontWeight: 'bold',
 	              padding: [0, 0, 5, 0]
 	            },
 	            name: {
 	              color: '#fff',
-	              fontSize: fitChartSize(12)
+	              fontSize: fitChartSize(18)
 	            }
 	          }
 	        },
@@ -182,7 +183,7 @@
 		top:0;
 		width: 100%;
 		height: 100%;
-		font-size:vw(18);
+		font-size:font-vw(22);
 		// color:#999;
 		color:#02f9fa;
 		display: flex;
--- a/src/components/RegionTop/index.vue
+++ b/src/components/RegionTop/index.vue
@@ -81,7 +81,8 @@
          show: false
        },
        legend: {
-          show: false
+          show: false,
+		  
        },
        grid: {
          left: '4%',
@@ -114,7 +115,7 @@
            show: true,
            axisLabel: {
              color: '#fff',
-              fontSize: fitChartSize(18),
+              fontSize: fitChartSize(11),
              verticalAlign: 'bottom',
              padding: [0, -fitChartSize(10), fitChartSize(10), 0],
              inside: true,
@@ -125,7 +126,7 @@
                value: {
                  align: 'center',
                  color: '#fff',
-                  fontSize: fitChartSize(14)
+                  fontSize: fitChartSize(20)
                }
              }
            },
@@ -148,7 +149,7 @@
              fontWeight: 500,
              position: 'left',
              align: 'left',
-              fontSize: fitChartSize(14),
+              fontSize: fitChartSize(20),
              formatter: function (params) {
                return params.data.name ?? '其他'
              }
@@ -186,7 +187,7 @@
 		top:0;
 		width: 100%;
 		height: 100%;
-		font-size:vw(18);
+		font-size:vw(20);
 		// color:#999;
 		color:#02f9fa;
 		display: flex;
@@ -194,7 +195,7 @@
 		justify-content: center;
 	}
  .top {
-    width: vw(250);
-    height: vh(366);
+    width: vw(290);
+    height: vh(650);
  }
 </style>
--- a/src/components/TicketSource/index.vue
+++ b/src/components/TicketSource/index.vue
@@ -93,7 +93,7 @@
        legend: {
          show: true,
          x: 'center',
-          y: 'bottom',
+          y: '72%',
          itemHeight: fitChartSize(12),
          itemWidth: fitChartSize(12),
          itemGap: fitChartSize(6),
@@ -102,7 +102,6 @@
 				  let obj = props.list.find((item) => item.name == name)
 				  return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
 			  }
-            
 			// if(obj.value){
 				// obj.value?obj.value:0;
 				
@@ -113,12 +112,12 @@
            rich: {
              name: {
                color: '#fff',
-                fontSize: fitChartSize(12)
+                fontSize: fitChartSize(18)
              },
              value: {
                color: '#00D5F6',
                fontWeight: 600,
-                fontSize: fitChartSize(12)
+                fontSize: fitChartSize(18)
              }
            }
          }
@@ -165,7 +164,7 @@
 		top:0;
 		width: 100%;
 		height: 100%;
-		font-size:vw(18);
+		font-size:fonnt-vw(20);
 		// color:#999;
 		color:#02f9fa;
 		display: flex;
@@ -228,12 +227,12 @@
    }
    &-item-label {
      font-weight: 400;
-      font-size: vw(12);
+      font-size: vw(18);
      line-height: vh(14);
    }
    &-item-value {
      font-weight: bold;
-      font-size: vw(16);
+      font-size: vw(22);
      line-height: vh(18);
    }
  }
--- a/src/components/Title1/index.vue
+++ b/src/components/Title1/index.vue
@@ -20,9 +20,9 @@
  .title-1 {
    position: relative;
    .title {
-      margin: vh(10) auto;
-      width: vw(468);
-      height: vh(32);
+      margin: vh(20) auto;
+      width: vw(640);
+      height: vh(66);
      display: flex;
      align-items: center;
      justify-content: center;
@@ -30,7 +30,7 @@
      background-size: 100% 100%;
      & > span {
        font-weight: 800;
-        font-size: vw(16);
+        font-size: font-vw(20);
        background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
--- a/src/components/Title2/index.vue
+++ b/src/components/Title2/index.vue
@@ -33,8 +33,8 @@

 <style scoped lang="scss">
  .title-2 {
-    width: vw(240);
-    height: vh(28);
+    min-width: vw(240);
+    height: vh(80);
    display: flex;
    align-items: center;
    // background-image: url('@/assets/images/title-5.png');
@@ -47,7 +47,7 @@
 	}
    &  span {
      font-weight: bold;
-      font-size: vw(15);
+      font-size: font-vw(24);
      background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
--- a/src/components/Title3/index.vue
+++ b/src/components/Title3/index.vue
@@ -16,17 +16,17 @@
 <style scoped lang="scss">
  .title-3 {
    position: relative;
-    width: 100%;
-    height: vh(12);
+    // min-width: vw(400);
+    height: vh(22);
    margin-top: vh(20);
    background-image: url('@/assets/images/title-6.png');
-    background-size: 100% 100%;
 	
+    background-size: 100%;
    & > span {
      position: absolute;
      bottom: vh(4);
      left: vw(20);
-      font-size: vw(15);
+      font-size: font-vw(22);
      font-weight: bold;
      background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
      -webkit-background-clip: text;
--- a/src/components/VideoDialog/index.vue
+++ b/src/components/VideoDialog/index.vue
@@ -49,8 +49,8 @@

          </div>
          <div class="action-item">
-		    <div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-if="isDiy==0">收藏</div>
-			<div class="video-follow" @click="handleCollectAdd(cameraIndexCode, isDiy, index)" v-else="isDiy==1">取消收藏</div>
+            <div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==0">收藏</div>
+            <div class="video-follow" @click="handleCollectAdd()" v-if="isDayCurr==1">取消收藏</div>
          </div>

        </div>
@@ -61,22 +61,29 @@
 </template>

 <script setup>
-  import Hls from 'hls.js'
-  import { ElMessage } from 'element-plus'
-  import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor'
-  import { getColletDiyApi } from '@/api/home'
-  import pubSub from 'pubsub-js'
-  const Z00M_IN = 'ZOOM_IN' // 焦距变大
-  const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
-  const UP = 'UP' // 上转
-  const DOWN = 'DOWN' // 下转
-  const LEFT = 'LEFT' // 左转
-  const RIGHT = 'RIGHT' // 右转
-  const STOP = 'STOP' // 停止操作
-  let ACTION = '0'
-  let command = ref('')
+import Hls from 'hls.js'
+import { ElMessage } from 'element-plus'
+import { postVideoControlApi,postVideoCollectApi } from '@/api/monitor'
+import { getColletDiyApi } from '@/api/home'
+import pubSub from 'pubsub-js'
+// const Z00M_IN = 'ZOOM_IN' // 焦距变大
+// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+// const UP = 'UP' // 上转
+// const DOWN = 'DOWN' // 下转
+// const LEFT = 'LEFT' // 左转
+// const RIGHT = 'RIGHT' // 右转
+// const STOP = 'STOP' // 停止操作
+const Z00M_IN = 'zoomin' // 焦距变大
+const Z00M_OUT = 'zoomout' // 焦距变小
+const UP = 'up' // 上转
+const DOWN = 'down' // 下转
+const LEFT = 'left' // 左转
+const RIGHT = 'right' // 右转
+const STOP = 'stop' // 停止操作
+let ACTION = '0'
+let command = ref('')

-  const props = defineProps({
+const props = defineProps({
  src: {
    type: String,
    default: ''
@@ -93,28 +100,28 @@
    type: Number,
    default: 0
  }
-  })
-  let modelValue = defineModel()
-  let videoRef = ref()
-  let webRtcServer = null
-  let hlsRef = null
-  let colletCond = ref(props.isCollect)
-  let isDayCurr = ref(props.isDiy)
-  watch(
+})
+let modelValue = defineModel()
+let videoRef = ref()
+let webRtcServer = null
+let hlsRef = null
+let colletCond = ref(props.isCollect)
+let isDayCurr = ref(props.isDiy)
+watch(
    () =>modelValue.value,
    (val) => {
-		// colletCond.value = props.isCollect
-		// isDayCurr.value = props.isDiy
+      colletCond.value = props.isCollect
+      isDayCurr.value = props.isDiy
      console.log(props.isDiy,'val[0].value')

    },
    {
      immediate: true
    }
-  )
-	const emit = defineEmits(['isDiyChange']);
-  // 收藏
-  const handleCollectAdd = async (id, status, index) => {
+)
+const emit = defineEmits(['isDiyChange']);
+// 收藏
+const handleCollectAdd = async () => {
  await getColletDiyApi({
    cameraIndexCode:props.cameraIndexCode,
    isDiy: props.isDiy == 0 ? 1 : 0
@@ -129,9 +136,9 @@
  emit('isDiyChange', isDayCurr.value);
  pubSub.publish('videoIsDiy',{isDiy:props.isDiy,cameraIndexCode:props.cameraIndexCode} )

-  }
-  // 关注
-  const handleCollect = async (id, status, index) => {
+}
+// 关注
+const handleCollect = async (id, status, index) => {
  await postVideoCollectApi({
    cameraIndexCode:props.cameraIndexCode,
    isCollect: colletCond.value == 0 ? 1 : 0
@@ -145,10 +152,11 @@
  }
  pubSub.publish('videoCollect', props.cameraIndexCode)

-  }
-  const handleAction = async (e) => {
+}
+const handleAction = async (e) => {
  if (e == STOP) {
    ACTION = '1'
+    command.value = e
  } else {
    ACTION = '0'
    command.value = e
@@ -165,15 +173,15 @@
    message: '操作成功',
    type: 'success'
  })
-  }
-  const handleClose = () => {
+}
+const handleClose = () => {
  if (hlsRef) {
    hlsRef.destroy()
    hlsRef = null
  }
  modelValue.value = false
-  }
-  const init = () => {
+}
+const init = () => {
  hlsRef = new Hls({
    enableWorker: false, // 禁用 Worker 来避免额外的线程
    enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
@@ -202,15 +210,15 @@
      }
    }
  })
-  }
+}

-  onMounted(()=>{
+onMounted(()=>{

-  })
+})
 </script>

 <style scoped lang="scss">
-	.video-follow,.video-unfollow {
+.video-follow,.video-unfollow {
  // cursor: pointer;
  // display: none;
  // position: absolute;
@@ -223,15 +231,15 @@
  text-align: center;
  // line-height: vh(24);
  font-weight: 400;
-	  font-size: vw(16);
+  font-size:font-vw(16);
  color: #ffffff;
  // background-image: url('@/assets/images/unfollow.png');
  background-size: 100% 100%;
-	}
-	.video-item__follow {
+}
+.video-item__follow {
  // background-image: url('@/assets/images/unfollow.png');
-	}
-  .dialog {
+}
+.dialog {
  z-index: 9999;
  .action {
    &-box {
@@ -255,7 +263,7 @@
      > span {
        margin: 0 vw(16);
        font-weight: 400;
-          font-size: vw(16);
+        font-size:font-vw(16);
        color: #ffffff;
      }
      .pause {
@@ -271,7 +279,7 @@
    height: vw(980);
    color: #fff;
    font-weight: bold;
-      font-size: vw(30);
+    font-size:font-vw(30);
    transform: translate(-50%, -50%);
    z-index: 999;
  }
@@ -302,5 +310,5 @@
    width: vw(60);
    z-index: 9999;
  }
-  }
+}
 </style>
--- a/src/layout/components/CoreVideo/allList.vue
+++ b/src/layout/components/CoreVideo/allList.vue
@@ -12,7 +12,7 @@
          @click="handleItem(item)"
        >
          <div class="item-unfollow" @click.stop="handleCollect(item.cameraIndexCode, index)">取消关注</div>
-          <video class="item-video" :id="'video' + index" muted autoplay :controls="false">
+          <video class="item-video" :id="'videoall' + index" muted autoplay :controls="false">
            <source type="application/x-mpegURL" />
          </video>
          <p>
@@ -36,18 +36,20 @@
 </template>

 <script setup>
-  import { getVideoListApi,getColletListApi } from '@/api/home'
+  import { getPreviewUrlApi,getColletListApi } from '@/api/home'
  import { postVideoCollectApi } from '@/api/monitor'

  import primary from '@/assets/images/item-primary.png'

  import Hls from 'hls.js'
  import pubSub from 'pubsub-js'
+  import WebRTCWhep from "whepts";

  let modelValue = defineModel()
  let isCollect = ref(0)
  let list = ref([])
  let hlsRefs = []
+  let webrtcRefs = []
  let total = ref(0)
  let src = ref('')
  let cameraIndexCode = ref('')
@@ -94,8 +96,9 @@
    pubSub.publish('videoCollect')
  }
  const handleClose = () => {
-    clearHlsRefs()
 	modelValue.value = false
+	clearHlsRefs()
+
  }
  const clearHlsRefs = () => {
    if (hlsRefs.length > 0) {
@@ -104,33 +107,84 @@
      })
      hlsRefs = []
    }
+    if (webrtcRefs.length > 0) {
+      webrtcRefs.map((item) => {
+        item.close()
+      })
+      webrtcRefs = []
+    }
  }
  const pageNumChange = () => {
    clearHlsRefs()
    list.value = []
    getVideoList()
  }
+  const createPlayer = (cameraIndexCode,videoElement) => {
+    getPreviewUrlApi({
+      type: 'hls',
+      cameraIndexCode: cameraIndexCode,
+      subStream:1
+    }).then(res=>{
+      const url = res.data.url;
+      if(url.startsWith('http://192.168.77.200:8050/')){
+        const player = new WebRTCWhep({
+          url: url, // WHEP 服务器地址
+          container: videoElement, // 视频播放容器
+          iceServers: [{ urls: 'turn:192.168.77.200:3478',username: 'ZLMediaKit',credential: 'ZLMediaKit'}]
+        })
+        player.on('error', (error) => {
+          console.error('错误:', error.message, error.type)
+          if(error.type ==='REQUEST_ERROR' || error.type ==='NOT_FOUND_ERROR'){
+            createPlayer(cameraIndexCode,videoElement);
+          }
+        })
+        player.on('play:failed', (err) => {
+          // createPlayer(cameraIndexCode,videoElement);
+        })
+        webrtcRefs.push(player)
+      }
+      else{
+        const player = new Hls({
+          maxBufferLength: 10, // 最大缓冲长度（秒）
+          maxMaxBufferLength: 15, // 缓冲区长度的上限
+          maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+        })
+        player.loadSource(url)
+        player.attachMedia(videoElement)
+        player.on(Hls.Events.MANIFEST_PARSED, () => {
+          videoElement.play()
+        })
+        player.on(Hls.Events.ERROR, (event, data) => {
+          // 根据错误类型进行处理
+          if (data.fatal) {
+            switch (data.type) {
+              case Hls.ErrorTypes.NETWORK_ERROR:
+                console.log('网络错误，尝试重新加载');
+                player.startLoad();
+                break;
+              case Hls.ErrorTypes.MEDIA_ERROR:
+                console.log('媒体错误，尝试修复');
+                player.recoverMediaError();
+                break;
+              default:
+                console.log('无法恢复的错误，销毁播放器');
+                // hls.destroy();
+                break;
+            }
+          }
+        })
+        hlsRefs.push(player)
+      }
+    })
+  }
  const getVideoList = async () => {
    let res = await getColletListApi(params)
    list.value = res.data
    total.value = res.total
    nextTick(() => {
      list.value.forEach(async (item, index) => {
-        var video = document.getElementById(`video${index}`)
-        const hls = new Hls({
-          enableWorker: false, // 禁用 Worker 来避免额外的线程
-          enableSoftwareAES: true, // 使用软件解码器以避免硬件解码的额外请求
-          cache: true, // 启用缓存
-          maxBufferLength: 10, // 最大缓冲长度（秒）
-          maxMaxBufferLength: 15, // 缓冲区长度的上限
-          maxBufferSize: 20 * 1000 * 1000 // 最大缓冲大小（字节）
-        })
-        hls.loadSource(item.hlsUrl)
-        hls.attachMedia(video)
-        hls.on(Hls.Events.MANIFEST_PARSED, () => {
-          video.play()
-        })
-        hlsRefs.push(hls)
+        var video = document.getElementById(`videoall${index}`)
+        createPlayer(item.cameraIndexCode,video);
      })
    })
  }
@@ -144,8 +198,8 @@
 <style scoped lang="scss">
  .z-dialog {
    :deep(.el-dialog) {
-      width: vw(2100);
-      padding: vw(8);
+      width: vw(2500);
+      padding: vw(15);
      background-image: url('@/assets/images/dialog-bg.png') !important;
      background-size: 100% 100%;
    }
@@ -156,14 +210,14 @@
  .list {
    margin-top: vw(30);
    gap: vw(8);
-    height: vh(860);
+    height: vh(1200);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    .item {
      position: relative;
-      width: vw(410);
-      height: vh(280);
+      width: vw(500);
+      height: vh(400);
      padding: vw(12);
      box-sizing: border-box;
      background-image: url('@/assets/images/item-primary.png');
@@ -182,8 +236,8 @@
        > span {
          padding-left: vw(10);
          font-weight: 400;
-          font-size: vw(14);
-          line-height: vw(14);
+          font-size: font-vw(18);
+          line-height: vw(18);
          color: #ffffff;
        }
      }
@@ -194,13 +248,15 @@
        right: vw(4);
        top: vw(4);
        z-index: 99;
-        width: vw(64);
-        height: vw(30);
+        min-width: vw(100);
+        height: vw(50);
        text-align: center;
-        line-height: vw(30);
+        // line-height: vw(50);
        font-weight: 400;
-        font-size: vw(12);
+        font-size: font-vw(18);
        color: #ffffff;
+		padding:vw(10);
+		box-sizing: border-box;
        background-image: url('@/assets/images/unfollow.png');
        background-size: 100% 100%;
      }
--- a/src/layout/components/CoreVideo/index.vue
+++ b/src/layout/components/CoreVideo/index.vue
@@ -73,7 +73,6 @@ let isCollect = ref(0)
  let timer = null
  let isDiy = ref(0)
  const handleItem = (item) => {
-	  console.log(item,'1111111111111111111111111')
    src.value = item.hlsUrl
    cameraIndexCode.value = item.cameraIndexCode
 	isCollect.value = item.isCollect
@@ -82,18 +81,19 @@ let isCollect = ref(0)
  }

  const postVideoRemain = () => {
-    timer = setInterval(() => {
-		if(!list.value.length) return false;
-      postVideoRemainApi({
-        cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
-      })
-    }, 1500)
+    // timer = setInterval(() => {
+		// if(!list.value.length) return false;
+    //   postVideoRemainApi({
+    //     cameraIndexCode: list.value.map((item) => item.cameraIndexCode)
+    //   })
+    // }, 1500)
  }

  const getPreviewUrl = async (code) => {
    let res = await getPreviewUrlApi({
      cameraIndexCode: code,
-      type: 'hls'
+      type: 'hls',
+      subStream:1
    })
    src.value = res.data.url
    videoShow.value = true
--- a/src/layout/components/Correspondence/index.vue
+++ b/src/layout/components/Correspondence/index.vue
@@ -2,7 +2,7 @@
  <div class="correspondence">
    <div class="top-box">
      <div class="title">融合通信</div>
-      <div class="icon-box flex">
+      <div class="icon-box flex" style="height: initial;">
        <div
          class="item"
          v-for="item in deptsList"
@@ -340,6 +340,8 @@
  .item-name {
    width: 90%;
    text-align: center;
+	line-height: 1.6;
+	font-size:vw(18);
  }
  .sp-img {
    width: vw(100);
@@ -347,7 +349,8 @@
  .correspondence {
    margin: vw(8);
    width: vw(300);
-    height: vh(1070);
+    // height: vh(1070);
+	height: 100%;
    background-image: url('@/assets/images/bg-1.png');
    background-size: 100% 100%;
  }
@@ -370,11 +373,11 @@
 	  }
    .table {
      width: 100%;
-      margin-top: vh(5);
+      margin-top: vh(20);
      .header {
        height: vh(28);
        font-weight: 400;
-        font-size: vw(12);
+        font-size: font-vw(20);
        color: #fff;
        display: flex;
        background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
@@ -404,7 +407,7 @@
        .item {
          height: vh(50);
          font-weight: 400;
-          font-size: vw(14);
+          font-size: font-vw(14);
          color: #f1f7ff;
          display: flex;
          &:nth-child(2n + 1) {
@@ -430,7 +433,7 @@
      span {
        margin-left: vw(30);
        font-weight: 800;
-        font-size: vw(15);
+        font-size: font-vw(15);
        line-height: vh(26);
        text-align: center;
        font-style: normal;
@@ -446,9 +449,10 @@
  .top-box {
    width: 100%;
    height: vh(500);
+	height:50%;
    .icon-box {
      font-weight: 400;
-      font-size: vw(14);
+      font-size: font-vw(14);
      color: #ffffff;
      line-height: vh(16);
      flex-wrap: wrap;
@@ -475,7 +479,7 @@
      text-align: center;
      line-height: vh(26);
      margin-left: vw(32.5);
-      font-size: vw(16);
+      font-size: font-vw(22);
      font-weight: 800;
      color: #fff;
      background-image: url('@/assets/images/title-1.png');
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -3,6 +3,7 @@
 	  <div v-if="isBack" class="back2" @click="handleHome">
 	    <img class="icon" src="@/assets/images/home.png" alt="" /> 首页
 	  </div>
+	  <div class="btn-all" :class="!isBack?'all-home':''" v-if="!isBack" @click="allShow = true" >核心景区视频</div>
    <ul class="nav-left">
      <li
        class="nav-left-item"
@@ -85,25 +86,29 @@
    <div class="weather">
      <span>{{ weatherData?.temperature }}-{{ weatherData?.skycon }}</span>
      <span class="line">|</span>
-      <span>风速：{{ weatherData?.windSpeed }}</span>
-      <span class="line">|</span>
+      
+      <!-- <span class="line">|</span> -->
      <span>空气质量：{{ weatherData?.airQuality }}</span>
+	  <div class="top-20">
+		  <span>风速：{{ weatherData?.windSpeed }}</span>
+	  </div>
    </div>
    <p class="date">{{ currentDate }}</p>
    <div v-if="isBack" class="back" @click="handleBack">
      <img class="icon" src="@/assets/images/back.png" alt="" /> 返回
    </div>
  </div>
-  <div class="amplify" @click="handleAmplify">
+ <!-- <div class="amplify" @click="handleAmplify">
 	  <img class="icon-qp" src="@/assets/images/qping.png" alt="" />
-  </div>
+  </div> -->
+  <all-list v-model="allShow" />
 </template>
 <script>

 </script>
 <script setup>
  import { useRouter } from 'vue-router'
-
+  import allList from '../CoreVideo/allList'
  import title2 from '@/assets/images/title-2.png'
  import title3 from '@/assets/images/title-3.png'
  import title2Select from '@/assets/images/title-2-select.png'
@@ -119,7 +124,7 @@
  const homeStore = useHomeStore()
  const scenicStore = useScenicStore()
  const router = useRouter()
-
+  let allShow = ref(false)
  let currentDate = ref('')
  let weatherData = ref({})
  let title = ref('')
@@ -167,7 +172,6 @@
 	 router.push('/home')
  }
  const handleCommand = (item, type) => {
-
    current.value = ''
    if (type === 'hotel') {
      otherRightLabel.value = '其他场馆'
@@ -191,7 +195,7 @@

  // 点击导航
  const handleNav = (item) => {
-	  console.log(item,router.currentRoute.value.path,'测试一下 ')
+	  
    if (isSkip.value) {
      router.push(item.path)
    } else {
@@ -415,6 +419,9 @@
 </script>

 <style scoped lang="scss">
+	.top-20{
+		margin-top:vh(20);
+	}
 	.amplify{
 		position:absolute;
 		right:vw(20);
@@ -428,10 +435,10 @@
    left: vw(326);
    .weather {
      position: absolute;
-      right: 0;
-      top: vh(10);
+      right: vw(-300);
+      top: vh(30);
      font-weight: 400;
-      font-size: vw(18);
+      font-size: font-vw(18);
      color: #ffffff;
      .line {
        margin: 0 vw(10);
@@ -439,20 +446,20 @@
    }
    .date {
      position: absolute;
-      left: 0;
-      top: vh(10);
+      left: vw(-300);
+      top: vh(30);
      font-weight: 400;
-      font-size: vw(18);
+      font-size: font-vw(18);
      color: #ffffff;
    }
    .back {
      position: absolute;
-      right: 0;
-      top: vh(50);
-      width: vw(130);
-      height: vh(36);
+      right: vw(240);
+      top: vh(30);
+      width: vw(150);
+      height: vh(56);
      font-weight: 600;
-      font-size: vw(20);
+      font-size: vw(22);
      color: #ffffff;
      cursor: pointer;
      display: flex;
@@ -463,18 +470,39 @@
      background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
      .icon {
        margin-right: vw(10);
-        width: vw(24);
+        width: vw(34);
        height: auto;
      }
+    }
+	.btn-all{
+		position: absolute;
+    cursor: pointer;
+		left: vw(140);
+		top: vh(30);
+		min-width: vw(180);
+		padding:0 vw(15);
+		height: vh(56);
+		font-weight: 600;
+		font-size: vw(22);
+		color: #ffffff;
+		background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
+		border-radius: vw(60);
+		border: 1px solid rgba(0, 114, 220, 0.3);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.all-home{
+		left: vw(20);
 	}
 	.back2 {
 	  position: absolute;
-	  left: 0;
-	  top: vh(50);
-	  width: vw(130);
-	  height: vh(36);
+	  left: vw(-50);
+	  top: vh(30);
+	  width: vw(150);
+	  height: vh(56);
 	  font-weight: 600;
-	  font-size: vw(20);
+	  font-size: vw(22);
 	  color: #ffffff;
 	  cursor: pointer;
 	  display: flex;
@@ -485,7 +513,7 @@
 	  background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
 	  .icon {
 	    margin-right: vw(10);
-	    width: vw(24);
+	    width: vw(34);
 	    height: auto;
 	  }
 	}
@@ -523,7 +551,7 @@
        height: vh(56);
        line-height: vh(46);
        font-weight: 600;
-        font-size: vw(28);
+        font-size: font-vw(24);
        text-align: center;
        padding: 0 vw(50);
        color: rgba(208, 236, 255, 0.9);
@@ -550,7 +578,7 @@
        height: vh(56);
        line-height: vh(46);
        font-weight: 600;
-        font-size: vw(28);
+        font-size: font-vw(24);
        text-align: center;
        color: rgba(208, 236, 255, 0.9);
        background-image: url('@/assets/images/title-3.png');
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,11 +1,11 @@
 <template>
  <Header />
  <div class="flex flex-1">
-    <core-video v-if="homeStore.amplify" />
+    <!-- <core-video v-if="homeStore.amplify" /> -->
    <div class="mian">
      <router-view />
    </div>
-    <correspondence v-if="homeStore.amplify"/>
+    <!-- <correspondence v-if="homeStore.amplify"/> -->
  </div>
 </template>

--- a/src/styles/screen.scss
+++ b/src/styles/screen.scss
@@ -1,9 +1,10 @@
@use 'sass:math';

 //默认设计稿的宽度
-$designWidth: 3822;
+$designWidth: 3840;
 //默认设计稿的高度
-$designHeight: 1080;
+$designHeight: 2160;
+

 //px转为vw的函数
@function vw($px) {
@@ -14,3 +15,41 @@ $designHeight: 1080;
@function vh($px) {
  @return math.div($px, $designHeight) * 100vh;
 }
+// 字体大小转为vw的函数（放大1.4倍）
+/// 将像素值转换为vw单位，并自动放大1.4倍
+/// @param {Number} $px - 设计稿中的像素值
+/// @return {String} - 转换后的vw单位值
+@function font-vw($px) {
+  $scaled-px: $px * 1.4;
+  @return math.div($scaled-px, $designWidth) * 100vw;
+}
+
+// 字体大小转为vh的函数（放大1.4倍）
+/// 将像素值转换为vh单位，并自动放大1.4倍
+/// @param {Number} $px - 设计稿中的像素值
+/// @return {String} - 转换后的vh单位值
+@function font-vh($px) {
+  $scaled-px: $px * 1.4;
+  @return math.div($scaled-px, $designHeight) * 100vh;
+}
+// 字体大小声明mixin（默认使用vw单位）
+/// 声明字体大小，自动应用1.4倍放大
+/// @param {Number} $px - 设计稿中的像素值
+/// @param {String} $unit - 单位类型，可选'vw'或'vh'，默认'vw'
+@mixin font-size($px, $unit: vw) {
+  @if $unit == vw {
+    font-size: font-vw($px);
+  } @else if $unit == vh {
+    font-size: font-vh($px);
+  } @else {
+    @error "Unsupported unit: #{$unit}. Use 'vw' or 'vh'.";
+  }
+}
+// 通用放大函数
+/// 将值按指定比例放大
+/// @param {Number} $value - 原始值
+/// @param {Number} $factor - 放大系数，默认1.4
+/// @return {Number} - 放大后的值
+@function scale($value, $factor: 1.4) {
+  @return $value * $factor;
+}
--- a/src/utils/dataUtil.js
+++ b/src/utils/dataUtil.js
@@ -1,8 +1,8 @@
 /* Echarts图表尺寸自适应 */
-export const fitChartSize = (size, width = 3822) => {
+export const fitChartSize = (size, width = 3840) => {
  let clientWidth =
    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  if (!clientWidth) return size
  let scale = clientWidth / width
-  return Number((size * scale).toFixed(3))
+  return Number((size * scale).toFixed(3))*1.4
 }
--- a/src/utils/styleUtil.js
+++ b/src/utils/styleUtil.js
@@ -1,16 +1,16 @@
 //默认设计稿的宽度
-const designWidth = 3822
+const designWidth = 3840
 //默认设计稿的高度
-const designHeight = 1080
+const designHeight = 2160

 let styleUtil = {
  // px转vw
  px2vw: function (_px) {
-    return ((_px * 100.0) / designWidth).toFixed(3) + 'vw'
+    return ((_px * 100.0*4) / designWidth).toFixed(3) + 'vw'
  },
  // px转vh
  px2vh: function (_px) {
-    return ((_px * 100.0) / designHeight).toFixed(3) + 'vh'
+    return ((_px * 100.0*4) / designHeight).toFixed(3) + 'vh'
  }
 }

--- a/src/views/collect/components/video-box.vue
+++ b/src/views/collect/components/video-box.vue
@@ -35,14 +35,14 @@
 								</div>
 								<video
 									class="video-item__video"
-									:id="'monitorVideo' + element.cameraIndexCode"
+									:id="'collectmonitorVideo' + element.cameraIndexCode"
 									preload="auto"
 									muted
 									autoplay
 									:controls="false"
 								/>
 								<p class="video-item__title--primary">
-									{{ element.cameraName || element.scenicAreaId }}
+									{{ element.cameraName || element.cameraIndexCode }}
 								</p>
 							</div>
 						</div>
@@ -80,50 +80,59 @@
 </template>

 <script setup>
-	import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
-	import {
+import { getVideCollectCate,getVideCollectCateSort,getColletDiyApi,getPreviewUrlApi} from '@/api/home'
+import {
  getVideoTypeApi,
  getVideoRegionsApi,
  postVideoRemainApi,
  postVideoControlApi,
  postVideoCollectApi
-	} from '@/api/monitor'
-	import draggable from 'vuedraggable';
-	import pubSub from 'pubsub-js'
-	import Hls from 'hls.js'
-	import emptyIco from '@/assets/images/n-icon.png'
-	import { debounce } from 'lodash'
-	const Z00M_IN = 'ZOOM_IN' // 焦距变大
-	const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
-	const UP = 'UP' // 上转
-	const DOWN = 'DOWN' // 下转
-	const LEFT = 'LEFT' // 左转
-	const RIGHT = 'RIGHT' // 右转
-	const STOP = 'STOP' // 停止操作
-	let cond = ref(false)
-	let ACTION = '0'
-	let hlsRefs = []
-	let hlsRef = null
-	let timer = null
-	let videoLog = ref(1)
-	let videoList = ref([])
-	let cameraIndexCode = ref('')
-	let videoRef = ref()
-	let monitorChange = null
-	let total = ref(0)
-	let loading = ref(false)
-	let command = ref('')
-	let cameraName = ref('')
-	let regionList = ref()
-	let params = reactive({
+} from '@/api/monitor'
+import draggable from 'vuedraggable';
+import pubSub from 'pubsub-js'
+import Hls from 'hls.js'
+import emptyIco from '@/assets/images/n-icon.png'
+import { debounce } from 'lodash'
+import WebRTCWhep from 'whepts'
+// const Z00M_IN = 'ZOOM_IN' // 焦距变大
+// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+// const UP = 'UP' // 上转
+// const DOWN = 'DOWN' // 下转
+// const LEFT = 'LEFT' // 左转
+// const RIGHT = 'RIGHT' // 右转
+// const STOP = 'STOP' // 停止操作
+const Z00M_IN = 'zoomin' // 焦距变大
+const Z00M_OUT = 'zoomout' // 焦距变小
+const UP = 'up' // 上转
+const DOWN = 'down' // 下转
+const LEFT = 'left' // 左转
+const RIGHT = 'right' // 右转
+const STOP = 'stop' // 停止操作
+let cond = ref(false)
+let ACTION = '0'
+let hlsRefs = []
+let webrtcRefs = []
+let hlsRef = null
+let timer = null
+let videoLog = ref(1)
+let videoList = ref([])
+let cameraIndexCode = ref('')
+let videoRef = ref()
+let monitorChange = null
+let total = ref(0)
+let loading = ref(false)
+let command = ref('')
+let cameraName = ref('')
+let regionList = ref()
+let params = reactive({
  businessScenicArea: "",
  cameraName: "",
  pageNum: 1,
  pageSize: 6,
-	})
-	let grad = ref(3)
-	let show = ref(false)
-	const onMonitorChange = () => {
+})
+let grad = ref(3)
+let show = ref(false)
+const onMonitorChange = () => {
  monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
    params.businessScenicArea = data.name
    params.pageNum = 1
@@ -132,9 +141,9 @@
    cond.value = false
    getRegionsList()
  })
-	}
-	//弹窗收藏监听
-	const isDiyChange = (val)=>{
+}
+//弹窗收藏监听
+const isDiyChange = (val)=>{
  console.log(val,11222)
  isDiy.value = val
  if(!val){
@@ -147,11 +156,11 @@
  // 		it.isDiy = val
  // 	}
  // })
-	}
-	const onStart = (res)=>{
+}
+const onStart = (res)=>{

-	}
-	const onEnd = (evt)=>{
+}
+const onEnd = (evt)=>{
  const itemIndex = parseInt(evt.to.getAttribute('data-item-index')); // 当前拖拽的 item 的下标
  getVideCollectCateSort({
    key:videoList.value[itemIndex].key,
@@ -162,14 +171,13 @@
  })
  // postVideoRemain()
  initVideo()
-	}
-	// 获取关注列表
-	const  getVideCollectCateList = async () => {
+}
+// 获取关注列表
+const  getVideCollectCateList = async () => {
  clearHlsRefs()
  params.businessVideoDisplayPosition = ''
  let res = await getVideCollectCate(params)
  videoList.value = res.data
-	  console.log(res,videoList.value.length,'ressssssssssssss')
  if(videoList.value.length<=3){
    grad.value = 3
  }else if(videoList.value.length<=6){
@@ -181,9 +189,9 @@
  // total.value = res.total

  initVideo()
-	}
-	// 收藏
-	const handleCollect = async (id, status, index,element) => {
+}
+// 收藏
+const handleCollect = async (id, status, index,element) => {
  await getColletDiyApi({
    cameraIndexCode:id,
    isDiy: status == 0 ? 1 : 0
@@ -200,11 +208,12 @@
    show.value = false
  }
  // pubSub.publish('videoCollect', id)
-	}
-	// 采集
-	const handleAction = async (e) => {
+}
+// 采集
+const handleAction = async (e) => {
  if (e == STOP) {
    ACTION = '1'
+    command.value = e
  } else {
    ACTION = '0'
    command.value = e
@@ -221,47 +230,54 @@
    message: '操作成功',
    type: 'success'
  })
-	}
-	// 返回列表
-	const handleBack = () => {
+}
+// 返回列表
+const handleBack = () => {
  videoLog.value = 1
  hlsRef.destroy()
  initVideo()
-	}
-	let isCollect = ref(0)
-	let isDiy = ref(0)
-	let videoSrc = ref('')
-	let diyIndex = ref(null)
-	const handleCamera = async (itemCode,resource,index) => {
+}
+let isCollect = ref(0)
+let isDiy = ref(0)
+let videoSrc = ref('')
+let diyIndex = ref(null)
+const handleCamera = async (itemCode,resource,index) => {
  diyIndex.value = index
  show.value = true
  let res = await getPreviewUrlApi({
    type: 'hls',
-	    cameraIndexCode:itemCode
+    cameraIndexCode:itemCode,
+    sub_stream: 0
  })
  cameraIndexCode.value = itemCode;
  isCollect.value = resource.isCollect
  isDiy.value = resource.isDiy
  videoSrc.value = res.data.url
-	}
-	//清除 hls
-	const clearHlsRefs = () => {
+}
+//清除 hls
+const clearHlsRefs = () => {
  if (hlsRefs.length > 0) {
    hlsRefs.map((item) => {
      item.destroy()
    })
    hlsRefs = []
  }
+  if (webrtcRefs.length > 0) {
+    webrtcRefs.map((item) => {
+      item.close()
+    })
+    webrtcRefs = []
  }
-	// 分页
-	const currentChange = (e) => {
+}
+// 分页
+const currentChange = (e) => {
  clearHlsRefs()
  videoList.value = []
  getRegionsList()
-	}
+}

-	let thisVideo = ref(null)
-	const handleItemVideo = (url, type, code,item) => {
+let thisVideo = ref(null)
+const handleItemVideo = (url, type, code,item) => {
  thisVideo.value = item
  videoLog.value = 2
  cameraIndexCode.value = code
@@ -278,36 +294,82 @@
    })
    if (type == 100) initVideo()
  }, 1000)
+}
+const createPlayer = (cameraIndexCode,videoElement) => {
+  getPreviewUrlApi({
+    type: 'hls',
+    cameraIndexCode: cameraIndexCode,
+    subStream:1
+  }).then(res=>{
+    const url = res.data.url;
+    if(url.startsWith('http://192.168.77.200:8050/')){
+      const player = new WebRTCWhep({
+        url: url, // WHEP 服务器地址
+        container: videoElement, // 视频播放容器
+        iceServers: [{ urls: 'turn:192.168.77.200:3478',username: 'ZLMediaKit',credential: 'ZLMediaKit'}]
+      })
+      player.on('error', (error) => {
+        console.error('错误:', error.message, error.type)
+        if(error.type ==='REQUEST_ERROR' || error.type ==='NOT_FOUND_ERROR'){
+          createPlayer(cameraIndexCode,videoElement);
        }
-	const initVideo = () => {
+      })
+      player.on('play:failed', (err) => {
+        // createPlayer(cameraIndexCode,videoElement);
+      })
+      webrtcRefs.push(player)
+    }
+    else{
+      const player = new Hls({
+        maxBufferLength: 10, // 最大缓冲长度（秒）
+        maxMaxBufferLength: 15, // 缓冲区长度的上限
+        maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+      })
+      player.loadSource(url)
+      player.attachMedia(videoElement)
+      player.on(Hls.Events.MANIFEST_PARSED, () => {
+        videoElement.play()
+      })
+      player.on(Hls.Events.ERROR, (event, data) => {
+        // 根据错误类型进行处理
+        if (data.fatal) {
+          switch (data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR:
+              console.log('网络错误，尝试重新加载');
+              player.startLoad();
+              break;
+            case Hls.ErrorTypes.MEDIA_ERROR:
+              console.log('媒体错误，尝试修复');
+              player.recoverMediaError();
+              break;
+            default:
+              console.log('无法恢复的错误，销毁播放器');
+              // hls.destroy();
+              break;
+          }
+        }
+      })
+      hlsRefs.push(player)
+    }
+  })
+}
+const initVideo = () => {
  clearHlsRefs()
  nextTick(() => {
    videoList.value.forEach(async (it, i) => {

      it.videos.forEach((item,index)=>{
        setTimeout(() => {
-					const video = document.getElementById(`monitorVideo${item.cameraIndexCode}`)
-					if(item.hlsUrl){
-						const hls = new Hls({
-						  maxBufferLength: 10, // 最大缓冲长度（秒）
-						  maxMaxBufferLength: 15, // 缓冲区长度的上限
-						  maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-						})
-						hls.loadSource(item.hlsUrl)
-						hls.attachMedia(video)
-						hls.on(Hls.Events.MANIFEST_PARSED, () => {
-						  video.play()
-						})
-						hlsRefs.push(hls) 
-					} 
+          const video = document.getElementById(`collectmonitorVideo${item.cameraIndexCode}`)
+          createPlayer(item.cameraIndexCode,video);
        }, 1000)

      })

    })
  })
-	}
-	watch(
+}
+watch(
    () => videoList.value,
    (val) => {
      if (val.length) {
@@ -315,28 +377,27 @@
      }
    },
    { immediate: true }
-	)
-	// 更新视频
-	const postVideoRemain = async () => {
-	  timer = setInterval(() => {
-		clearInterval(timer)
-		  videoList.value.forEach((items,index)=>{
-			  setTimeout(()=>{
-				  postVideoRemainApi({
-				    cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
-				  })
-			  },1500)
-			
-		  })
-	   
-	  }, 1500)
-	}
-	const getVideoRegions = async () => {
+)
+// 更新视频
+const postVideoRemain = async () => {
+  // timer = setInterval(() => {
+  // clearInterval(timer)
+  //   videoList.value.forEach((items,index)=>{
+  // 	  setTimeout(()=>{
+  // 		  postVideoRemainApi({
+  // 		    cameraIndexCode: items.videos.map((item) => item.cameraIndexCode)
+  // 		  })
+  // 	  },1500)
+  //
+  //   })
+  //
+  // }, 1500)
+}
+const getVideoRegions = async () => {
  let res = await getVideoRegionsApi({
    cameraName: cameraName.value,
    businessScenicArea: params.businessScenicArea
  })
-	  console.log(res,11111111111111)
  regionList.value = res.data
  regionList.value.forEach((item,index)=>{
    // item.show = true
@@ -344,23 +405,23 @@
  })
  regionList.value[0].show = true

-	}
-	const handleRegions = (e) => {
+}
+const handleRegions = (e) => {
  regionList.value[e].show = !regionList.value[e].show
-	}
-	const onInput = debounce((e) => {
+}
+const onInput = debounce((e) => {
  getVideoRegions()
-	}, 500)
-	let hotelChange = null;
-	onMounted(()=>{
+}, 500)
+let hotelChange = null;
+onMounted(()=>{
  getVideCollectCateList()
  console.log(draggable,'draggable')
-	})
-	onUnmounted(() => {
+})
+onUnmounted(() => {
  if (timer) clearInterval(timer)
  clearHlsRefs()

-	})
+})
 </script>
 <style></style>
 <style scoped lang="scss">
@@ -370,7 +431,7 @@
 		border:vw(2) solid #0096FF;
 		padding:vh(40) vw(20);
 		position:relative;
-		height:vh(900);
+		height:vh(1950);
 		padding-bottom:vh(20);
 		.item-element{
 			display: flex;
@@ -404,7 +465,7 @@
 			width:100%;
 			height:vh(30);
 			padding:0 vw(30);
-			font-size:vw(24);
+			font-size: font-vw(24);
 			line-height:vh(30);
 			// line-height: vh(40);
 		}
@@ -421,7 +482,7 @@
 	.empty-box{
 		display:flex;
 		align-items: center;
-		font-size:vw(40);
+		font-size: font-vw(40);
 		height:vh(750);
 		justify-content: center;
 		text-align:center;
@@ -461,7 +522,7 @@
  .video-box {
 	display: flex;
 	flex: 1;
-    height: vh(950);
+    // height: vh(950);
    margin-top: vh(120);
    margin-left: vw(10);
    padding: vh(34) vw(26);
@@ -494,7 +555,7 @@
          > span {
            padding-left: vw(20);
            font-weight: 400;
-            font-size: vw(14);
+            font-size: font-vw(20);
            color: #ffffff;
            line-height: vh(40);
          }
@@ -528,7 +589,6 @@
    }
    &-list {
      // gap: vw(3);
-	  
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
@@ -547,14 +607,13 @@
 	  //   border-radius: 5px; /* 滑块的圆角 */
 	  // }
 	  // overflow: auto;
-	  
    }
    &-item {
      position: relative;
      // width: vw(720);
 	  // width:48%;
 	  // margin-right: 1%;
-      height: vh(275);
+      height: vh(600);
      padding: vh(10) vw(10);
 	  box-sizing: border-box;
 	  margin-bottom:vh(6);
@@ -574,11 +633,11 @@
      top: vw(8);
      z-index: 9999;
      padding: 0 vw(20);
-      height: vh(24);
+      height: vh(34);
      text-align: center;
-      line-height: vh(24);
+      line-height: vh(34);
      font-weight: 400;
-      font-size: vw(16);
+      font-size: font-vw(18);
      color: #ffffff;
      background-image: url('@/assets/images/unfollow.png');
      background-size: 100% 100%;
@@ -596,9 +655,9 @@
      left: 0;
      bottom: 0;
      width: 100%;
-      padding: vh(10) vw(10);
+      padding: vh(20) vw(20);
      color: #fff;
-      font-size: vw(14);
+      font-size: vw(20);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
@@ -606,15 +665,17 @@
    }
    &-item__title--error {
      @extend .video-item__title;
+	  font-size: font-vw(22);
      background-color: rgba(226, 27, 27, 0.72);
    }
    &-item__title--primary {
      @extend .video-item__title;
+	  font-size: font-vw(22);
      background-color: rgba(4, 30, 69, 0.72);
    }
    &-item__video {
      width: 100%;
-      height: vh(260);
+      height: vh(580);
 	  // height:100%;
      object-fit: fill;
    }
@@ -638,7 +699,7 @@
      top: 40 (vh);
      z-index: 9;
      font-weight: 400;
-      font-size: vw(14);
+      font-size: vw(22);
      color: #ffffff;
      padding: vw(20);
      display: flex;
@@ -713,7 +774,7 @@
          width: 100%;
          padding: vw(10);
          color: #fff;
-          font-size: vw(14);
+          font-size: vw(20);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
@@ -725,6 +786,7 @@
        }
        &-title--primary {
          @extend .item-title;
+		  font-size: font-vw(20);
          background-color: rgba(4, 30, 69, 0.72);
        }
        &-img {
--- a/src/views/home/components/age.vue
+++ b/src/views/home/components/age.vue
@@ -30,16 +30,17 @@

  const init = () => {
    if (!params) {
-      let center = ['25%', '50%']
+      let center = ['50%', '30%']
      params = {
        color: ['#00B1FF', '#00FFFF', '#FF3737', '#DD5627', '#D3F0FE'],
        legend: {
          orient: 'vertical',
-          right: 0,
-          y: 'center',
+          // right: 0,
+          y: '54%',
+		  bottom:20,
          itemHeight: fitChartSize(8),
          itemWidth: fitChartSize(8),
-          itemGap: fitChartSize(10),
+          itemGap: fitChartSize(12),
          formatter: function (name) {
            let obj = props.list.find((item) => item.name == name)
            return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
@@ -72,7 +73,7 @@
            label: {
              show: false,
              color: '#D3F0FE',
-              fontSize: fitChartSize(12)
+              fontSize: fitChartSize(14)
            },
            data: props.list || []
          },
@@ -90,7 +91,7 @@
            label: {
              show: false,
              color: '#D3F0FE',
-              fontSize: fitChartSize(12)
+              fontSize: fitChartSize(14)
            },
            data: props.list
          },
@@ -136,7 +137,7 @@

 <style lang="scss" scoped>
  .age {
-    width: vw(300);
-    height: vh(150);
+    width: 90%;
+    height: vh(420);
  }
 </style>
--- a/src/views/home/components/box-1.vue
+++ b/src/views/home/components/box-1.vue
@@ -31,13 +31,14 @@
            <span v-else class="statistic-value">暂无</span>
          </div>
        </div>
-        <div class="flex rela">
-          <Title3 title="景区排队人数" />
+        <div class=" rela">
+          <Title3 title="景区排队人数"/>
+		  
        </div>
        <div class="pt-20">
          <Line
-            :width="370"
-            :height="140"
+            width="95%"
+            :height="120"
            :config="{ legend: false }"
            :data="scenicQueueList"
            :xAxisData="scenicQueueXAxisData"
@@ -59,8 +60,8 @@
        <Title3 title="今日景区承载量" />
        <div class="pt-20">
          <Line
-            :width="370"
-            :height="140"
+            width="95%"
+            :height="120"
            :config="{ legend: false }"
            :data="scenicBearList"
            :xAxisData="scenicBearXAxisData"
@@ -119,14 +120,14 @@
        </div>
      </div>

-      <div class="box-1">
+      <div class="box-1" >
        <Title3 title="客源地TOP5" />
-        <RegionTop :list="homeStore.userPortraitData.provinceRate" :width="230" :height="260" />
+        <RegionTop :list="homeStore.userPortraitData.provinceRate" width="100%" :height="160" />
      </div>

      <div class="box-1">
        <Title3 title="购票渠道" />
-        <TicketSource :list="homeStore.userPortraitData.channel" :width="230" :height="260" />
+        <TicketSource :list="homeStore.userPortraitData.channel" width="100%" :height="160" />
      </div>
    </div>

@@ -192,16 +193,16 @@
  .select-box {
 	  width:vw(200);
 	  height:vh(30);
-	  font-size:vw(16);
+	  font-size: font-vw(16);
   }
  .box-2 {
    margin-top: vh(120);
-    width: vw(800);
-    height: vh(953);
+    width: vw(1200);
+    // height: vh(953);
    padding: vw(8);
    box-sizing: border-box;
-    background-image: url('@/assets/images/bg-2.png');
-    background-size: 100% 100%;
+    // background-image: url('@/assets/images/bg-2.png');
+    // background-size: 100% 100%;
    .dropdown {
      position: absolute;
      right: vw(8);
@@ -209,11 +210,11 @@
      z-index: 990;
    }
    .list {
-      height: vh(72);
+      height: vh(104);
    }
    .item {
      position: relative;
-      height: vh(52);
+      height: vh(104);
      margin: 0 vh(10);
      flex: 1;
      z-index: 1;
@@ -223,35 +224,35 @@
      &-icon {
        position: absolute;
        width: 100%;
-        height: auto;
+        // height: 100%;
        z-index: -1;
      }
      &-label {
        position: absolute;
-        left: vw(70);
-        top: vh(-10);
+        left: vw(120);
+        top: vh(-20);
        font-weight: 400;
-        font-size: vw(16);
+        font-size: font-vw(20);
        color: #ffffff;
      }
      &-value {
        position: absolute;
-        left: vw(70);
+        left: vw(120);
        .countup-wrap {
          color: #02f9fa;
-          font-size: vw(28);
+          font-size: font-vw(28);
          font-weight: bold;
        }
      }
    }
    .unit {
      color: #02f9fa;
-      font-size: vw(14);
+      font-size: font-vw(14);
      margin-bottom: vh(4);
    }
    .box {
-      width: vw(384);
-      height: vh(320);
+      width: 50%;
+      height: vh(795);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
      &:nth-child(1) {
@@ -262,7 +263,7 @@
        display: flex;
        margin-top: vh(12);
        width: 100%;
-        height: vh(88);
+        height: vh(150);
        background-image: url('@/assets/images/bg-4.png');
        background-size: 100% 100%;
        &-item {
@@ -274,20 +275,20 @@
 		  cursor:pointer;
        }
        &-title {
-          font-size: vw(16);
+          font-size: font-vw(18);
          color: #fff;
        }
        &-value {
          margin-top: vh(10);
          font-weight: bold;
-          font-size: vw(20);
+          font-size: font-vw(20);
          color: #02f9fa;
          display: flex;
          align-items: flex-end;
        }
        .value {
          font-weight: bold;
-          font-size: vw(28);
+          font-size: font-vw(28);

        }
        .active{
@@ -295,14 +296,14 @@
        }
        .prefix,
        .suffix {
-          font-size: vw(12);
+          font-size: font-vw(12);
          margin-bottom: vh(4);
        }
      }
    }
    .age-box {
-      width: vw(320);
-      height: vh(303);
+      width: vw(400);
+      height: vh(680);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
      &:nth-child(1) {
@@ -310,8 +311,9 @@
      }
    }
    .box-1 {
-      width: vw(230);
-      height: vh(303);
+      width: vw(400);
+	  height: vh(680);
+      
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
      &:nth-child(2) {
@@ -322,7 +324,7 @@
      margin: vh(10) vw(20) 0 vw(20);
      height: vh(24);
      font-weight: bold;
-      font-size: vw(14);
+      font-size: font-vw(14);
      color: #ffffff;
      display: flex;
      align-items: center;
@@ -350,7 +352,7 @@
      }
      .text {
        font-weight: 400;
-        font-size: vw(14);
+        font-size: font-vw(14);
        color: rgba(255, 255, 255, 0.9);
      }
      .progress {
@@ -362,21 +364,21 @@
      }
      .man {
        font-weight: bold;
-        font-size: vw(14);
+        font-size: font-vw(14);
        color: #02f9fa;
        margin-left: vw(10);
      }
      .woman {
        font-weight: bold;
-        font-size: vw(14);
+        font-size: font-vw(14);
        color: #f15a25;
        margin-left: vw(10);
      }
    }
    .ticket-box {
-      margin-top: vh(20);
+      margin-top: vh(10);
      width: 100%;
-      height: vh(106);
+      height: vh(196);
      background: linear-gradient(to right, rgba(0, 77, 136, 0) 0%, rgba(0, 77, 136, 0.6) 100%);
      .title {
        width: vw(253);
@@ -388,7 +390,7 @@
        & > span {
          padding-left: vw(22);
          font-weight: bold;
-          font-size: vw(15);
+          font-size: font-vw(15);
          background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
          -webkit-background-clip: text;
          background-clip: text;
@@ -398,12 +400,13 @@
      }
    }
    .ticket-wrap {
-      margin-top: vh(8);
+   //    margin-top: vh(18);
+	  // margin-bottom: vh(18);
      display: flex;
      align-items: center;
      justify-content: space-between;
      & > img {
-        width: vw(74);
+        width: vw(124);
        height: auto;
      }
      & > div {
@@ -417,12 +420,12 @@
      .label {
        padding-left: vw(10);
        font-weight: 400;
-        font-size: vw(14);
+        font-size: font-vw(20);
        color: rgba(255, 255, 255, 0.9);
      }
      .countup-wrap {
        color: #02f9fa;
-        font-size: vw(28);
+        font-size: font-vw(28);
        font-weight: bold;
      }
    }
--- a/src/views/home/components/box-2.vue
+++ b/src/views/home/components/box-2.vue
--- a/src/views/home/components/box-3.vue
+++ b/src/views/home/components/box-3.vue
@@ -36,8 +36,8 @@
        <div class="pt-10">
          <Title3 title="拥堵路段总数" />
 		  <Line
-		    :width="250"
-		    :height="150"
+		    width="95%"
+		    :height="100"
 		    :config="{ legend: false }"
 		    :data="congestionData"
 		    :xAxisData="congestionXAxisData"
@@ -91,8 +91,8 @@
          <Title3 title="停车场车流量" />
          <div class="pt-10">
            <Line
-              :width="250"
-              :height="150"
+              width="95%"
+              :height="94"
              :config="{ legend: false }"
              :data="parkData"
              :xAxisData="parkXAxisData"
@@ -121,17 +121,17 @@
      </div>
    </div>

-    <div class="flex">
-      <div class="flex-1">
+    <div class="flex" v-if="false">
+   <!--   <div class="flex-1">
        <Title1 title="车船信息" class="title1" />
-      </div>
-      <div class="flex-1">
+      </div> -->
+     <div class="flex-1" >
        <Title1 title="酒店信息" class="title1" />
      </div>
    </div>

-    <div class="flex">
-      <div class="car-ship">
+    <div class="flex" v-if="false">
+      <div class="car-ship" v-if="false">
        <div class="mb-6">
          <div class="car">
            <div class="label">车总数</div>
@@ -209,7 +209,7 @@
          </div>
        </div>
      </div>
-      <div class="hotel">
+      <div class="hotel" >
        <div>
          <div class="item">
            <div class="label">接入总数</div>
@@ -299,45 +299,47 @@
 	}
  .box-3 {
    margin-top: vh(120);
-    width: vw(774);
-    height: vh(956);
+    width: vw(1200);
+	height:100%;
+    // height: vh(2056);
    padding-left: vw(8);
    box-sizing: border-box;
-    background-image: url('@/assets/images/bg-5.png');
+    // background-image: url('@/assets/images/bg-5.png');
    background-size: 100% 100%;
    .traffic-info {
-      height: vh(80);
+      // height: vh(80);
    }
    .cell {
      display: flex;
      align-items: center;
      .icon {
-        width: vw(64);
+        width: vw(124);
        height: auto;
      }
      .countup-wrap {
        color: #02f9fa;
-        font-size: vw(24);
+        font-size: font-vw(24);
        font-weight: bold;
        text-shadow: 0 0 9px #0096ff;
      }
      .label {
        font-weight: 400;
-        font-size: vw(14);
+        font-size: font-vw(18);
        margin-top: vh(10);
        color: rgba(255, 255, 255, 0.9);
      }
    }
    .box {
-      width: vw(250);
-      height: vh(200);
+      width: 33%;
+      // height: vh(200);
      margin-right: vw(8);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
    }
    .box-1 {
-      width: vw(250);
-      height: vh(200);
+      // width: vw(300);
+	  flex:1;
+      height: vh(450);
      margin-right: vw(8);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
@@ -352,7 +354,7 @@

      & > div {
        flex: 1;
-        height: vh(70);
+        height: vh(120);
        display: flex;
        align-items: center;
        justify-content: space-evenly;
@@ -360,13 +362,13 @@
        background-size: 100% 100%;
        .label {
          font-weight: 400;
-          font-size: vw(14);
+          font-size: font-vw(16);
          color: rgba(255, 255, 255, 0.9);
        }
        .value {
          margin-top: vh(10);
          font-weight: bold;
-          font-size: vw(24);
+          font-size: font-vw(22);
          color: #ffffff;
        }
        .error {
@@ -384,20 +386,22 @@
      }
    }
    .car-ship {
-      flex: 1;
+		width:100%;
+      // flex: 1;
      & > div {
        position: relative;
-        height: vh(114);
+        height: vh(235);
        display: flex;
        align-items: center;
        background-image: url('@/assets/images/bg-4.png');
-        background-size: 100% 100%;
+        background-size: cover;
        .car {
          @extend .icon;
          width: vw(352);
          height: vw(70);
          padding-left: vw(90);
-          margin-left: vw(10);
+          margin-left: vw(30);
+		  
          display: flex;
          flex-direction: column;
          justify-content: center;
@@ -419,12 +423,12 @@
        .label {
          margin-bottom: vh(6);
          font-weight: 400;
-          font-size: vw(14);
+          font-size: font-vw(14);
          color: rgba(255, 255, 255, 0.9);
        }
        .value {
          font-weight: bold;
-          font-size: vw(24);
+          font-size: font-vw(22);
          color: #02f9fa;
        }
        .unit {
@@ -435,27 +439,31 @@
        }
        .table {
          position: absolute;
-          left: vw(160);
-          width: vw(226);
-          height: vh(96);
+          left: vw(200);
+          // width: vw(350);
+		  width:80%;
+          // height: vh(196);
+		  height:90%;
          z-index: 2;
          background: rgba(0, 150, 255, 0.17);
          .header {
            display: flex;
-            height: vh(18);
-            line-height: vh(18);
+            height: vh(48);
+            line-height: vh(48);
            text-align: center;
            background: rgba(0, 150, 255, 0.4);
            & > div {
              flex: 1;
              font-weight: 400;
-              font-size: vw(12);
+              font-size: font-vw(20);
              color: #fff;
+			  // height: vh(50);
+			  // line-height: vh(50);
            }
          }
          .content {
            overflow-y: hidden;
-            height: vh(82);
+            // height: vh(282);
            // /* 滚动条整体样式 */
            // &::-webkit-scrollbar {
            //   width: vw(4); /* 滚动条的宽度 */
@@ -472,8 +480,9 @@
          }
          .cell {
            display: flex;
-            height: vh(27);
-            line-height: vh(27);
+            // height: vh(50);
+            // line-height: vh(50);
+			padding:vw(10);
            text-align: center;
            background: #074686;
            &:nth-child(odd) {
@@ -486,37 +495,39 @@
              flex: 1;
            }
            & > div:nth-child(1) {
+		
 			  overflow: hidden;
 			  text-overflow: ellipsis;
 			  display: block;
 			  white-space: nowrap;
              font-weight: 400;
-              font-size: vw(12);
+              font-size: font-vw(18);
              color: rgba(255, 255, 255, 0.9);
            }
            & > div:nth-child(2) {
              font-weight: bold;
-              font-size: vw(18);
+              font-size: font-vw(18);
              color: #ffffff;
            }
            & > div:nth-child(3) {
              font-weight: bold;
-              font-size: vw(18);
+              font-size: font-vw(18);
              color: #02f9fa;
            }
            .unit-1 {
-              font-size: vw(12);
+              font-size: vw(18);
            }
          }
        }
      }
    }
    .hotel {
+		flex:1;
        margin: 0 vw(6);
      & > div:nth-child(1) {
        display: flex;
-        width: vw(360);
-        height: vh(70);
+        // width: vw(360);
+        height: vh(100);
        background-image: url('@/assets/images/bg-4.png');
        background-size: 100% 100%;
        .item {
@@ -527,13 +538,13 @@
          justify-content: center;
          .label {
            font-weight: 400;
-            font-size: vw(14);
+            font-size: font-vw(18);
            color: rgba(255, 255, 255, 0.9);
          }
          .value {
            margin-top: vh(10);
            font-weight: bold;
-            font-size: vw(24);
+            font-size: font-vw(20);
            color: #ffffff;
          }
          .success {
@@ -551,7 +562,7 @@
      & > div:nth-child(2) {
        padding-top: vh(6);
        margin-top: vh(6);
-        width: vw(360);
+        // width: vw(360);
        background-image: url('@/assets/images/bg-3.png');
        background-size: 100% 100%;
      }
@@ -564,7 +575,7 @@
  }
  .title1 {
    :deep(.title) {
-      width: vw(300) !important;
+      // width: vw(300) !important;
    }
  }
 </style>
--- a/src/views/home/components/gauge.vue
+++ b/src/views/home/components/gauge.vue
@@ -128,7 +128,7 @@

 <style lang="scss" scoped>
  .gauge {
-    width: vw(120);
-    height: vh(50);
+    width: vw(200);
+    height: vh(80);
  }
 </style>
--- a/src/views/home/components/jam-count.vue
+++ b/src/views/home/components/jam-count.vue
@@ -70,14 +70,14 @@
        grid: {
          left: '4%',
          right: '4%',
-          top: '4%',
+          top: '0',
          bottom: '4%',
          containLabel: true
        },
        legend: {
          orient: 'horizontal',
          x: 'center',
-          bottom: '-3%',
+          bottom: '5px',
          itemHeight: fitChartSize(12),
          itemWidth: fitChartSize(12),
          itemGap: fitChartSize(6),
@@ -90,11 +90,11 @@
            rich: {
              name: {
                color: '#fff',
-                fontSize: fitChartSize(12)
+                fontSize: fitChartSize(16)
              },
              value: {
                color: '#00D5F6',
-                fontSize: fitChartSize(12)
+                fontSize: fitChartSize(16)
              }
            }
          }
@@ -102,7 +102,7 @@
        series: [
          {
            type: 'pie',
-            center: ['50%', '40%'],
+            center: ['50%', '32%'],
            radius: ['45%', '60%'],
            itemStyle: {
              borderWidth: fitChartSize(4),
@@ -151,7 +151,7 @@
 		top:0;
 		width: 100%;
 		height: 100%;
-		font-size:vw(18);
+		font-size:vw(20);
 		// color:#999;
 		color:#02f9fa;
 		display: flex;
@@ -159,7 +159,7 @@
 		justify-content: center;
 	}
  .jam-count {
-    width: vw(250);
-    height: vh(150);
+    width: vw(350);
+    height: vh(400);
  }
 </style>
--- a/src/views/home/components/jam-duration.vue
+++ b/src/views/home/components/jam-duration.vue
@@ -140,7 +140,7 @@
            show: true,
            axisLabel: {
              color: '#fff',
-              fontSize: fitChartSize(12),
+              fontSize: fitChartSize(18),
              verticalAlign: 'bottom',
              padding: [0, 0, 6, 0],
              inside: true,
@@ -152,7 +152,7 @@
                  align: 'center',
                  color: '#fff',
                  fontWeight: 600,
-                  fontSize: fitChartSize(14)
+                  fontSize: fitChartSize(18)
                }
              }
            },
@@ -176,7 +176,7 @@
              fontWeight: 500,
              position: 'left',
              align: 'left',
-              fontSize: fitChartSize(14),
+              fontSize: fitChartSize(18),
              formatter: function (params) {
                return params.data.name
              }
@@ -213,7 +213,7 @@
 		top:0;
 		width: 100%;
 		height: 100%;
-		font-size:vw(18);
+		font-size:vw(20);
 		// color:#999;
 		color:#02f9fa;
 		display: flex;
@@ -221,7 +221,7 @@
 		justify-content: center;
 	}
  .jam {
-    width: vw(250);
-    height: vh(160);
+    width: vw(290);
+    height: vh(400);
  }
 </style>
--- a/src/views/home/components/occupancy.vue
+++ b/src/views/home/components/occupancy.vue
@@ -1,6 +1,6 @@
 <template>
  <!-- 酒店入住人数及入住率 -->
-  <div class="occupancy" :id="id" />
+  <div class="occupancyNew" :id="id" />
 </template>

 <script setup>
@@ -19,10 +19,11 @@
  watch(
    () => props.list,
    (val) => {
+		
      if (val.length > 0) {
        setTimeout(() => {
          init()
-        }, 1000)
+        }, 1500)
      }
    },
    { immediate: true }
@@ -123,7 +124,7 @@
            show: true,
            axisLabel: {
              color: '#fff',
-              fontSize: fitChartSize(12),
+              fontSize: fitChartSize(18),
              verticalAlign: 'bottom',
              padding: [0, 0, 10, 0],
              inside: true,
@@ -135,7 +136,7 @@
                  align: 'center',
                  color: '#fff',
                  fontWeight: 600,
-                  fontSize: fitChartSize(14)
+                  fontSize: fitChartSize(20)
                }
              }
            },
@@ -159,7 +160,7 @@
              fontWeight: 500,
              position: 'left',
              align: 'left',
-              fontSize: fitChartSize(14),
+              fontSize: fitChartSize(20),
              formatter: function (params) {
                return params.data.name
              }
@@ -190,8 +191,8 @@
 </script>

 <style scoped lang="scss">
-  .occupancy {
-    width: vw(360);
-    height: vh(130);
+  .occupancyNew {
+    width: 100%;
+    height: vh(360);
  }
 </style>
--- a/src/views/home/components/vacancy.vue
+++ b/src/views/home/components/vacancy.vue
@@ -128,7 +128,7 @@
            show: true,
            axisLabel: {
              color: '#fff',
-              fontSize: fitChartSize(12),
+              fontSize: fitChartSize(16),
              verticalAlign: 'bottom',
              padding: [0, 0, 6, 0],
              inside: true,
@@ -141,13 +141,13 @@
                  align: 'center',
                  color: '#fff',
                  fontWeight: 600,
-                  fontSize: fitChartSize(14)
+                  fontSize: fitChartSize(16)
                },
 				total: {
 				  align: 'center',
 				  color: '#fff',
 				  fontWeight: 600,
-				  fontSize: fitChartSize(14)
+				  fontSize: fitChartSize(16)
 				},
              }
            },
@@ -172,7 +172,7 @@
              fontWeight: 500,
              position: 'left',
              align: 'left',
-              fontSize: fitChartSize(14),
+              fontSize: fitChartSize(16),
              formatter: function (params) {
                return params.data.name
              }
@@ -206,7 +206,7 @@

 <style scoped lang="scss">
  .vacancy {
-    width: vw(250);
-    height: vh(160);
+    width: vw(400);
+    height: vh(400);
  }
 </style>
--- a/src/views/home/components/vehicle-source.vue
+++ b/src/views/home/components/vehicle-source.vue
@@ -60,14 +60,14 @@
            }
          },
          axisLabel: {
-            fontSize: fitChartSize(12),
+            fontSize: fitChartSize(18),
            color: 'rgba(255,255,255,0.9)'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
-            fontSize: fitChartSize(12),
+            fontSize: fitChartSize(18),
            color: 'rgba(255,255,255,0.9)'
          },
          splitLine: {
@@ -88,7 +88,7 @@
              show: true,
              position: 'top',
              color: '#fff',
-              fontSize: fitChartSize(10)
+              fontSize: fitChartSize(14)
            },
            itemStyle: {
              borderRadius: [0, 0, 0, 0],
@@ -125,6 +125,6 @@
 <style scoped lang="scss">
  .vehicle-source {
    width: 100%;
-    height: vh(160);
+    height: vh(400);
  }
 </style>
--- a/src/views/hotel/components/info-box.vue
+++ b/src/views/hotel/components/info-box.vue
@@ -119,11 +119,11 @@
  .info {
    margin-top: vh(120);
    width: vw(626);
-    height: vh(950);
+    // height: vh(950);
    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
    &-header {
      padding: vh(12) vw(12);
-      height: vh(167);
+      min-height: vh(330);
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
@@ -137,7 +137,7 @@
        margin-left: vw(20);
        > h2 {
          font-weight: 800;
-          font-size: vw(20);
+          font-size: font-vw(24);
          color: #ffffff;
          margin-bottom: vh(12);
          margin-top: vh(10);
@@ -155,36 +155,40 @@
      }
      &__text {
        font-weight: 400;
-        font-size: vw(16);
+        font-size: font-vw(20);
        color: #0096ff;
+		line-height: 2;
      }
    }
    .statistic {
+		// margin:vh(10);
      &-box {
-        height: vh(94);
+        height: vh(230);
        margin: 0 vw(26);
-        gap: vw(20);
+        // gap: vw(20);
        display: flex;
        align-items: center;
-		margin-top:vh(10);
+		margin-top:vh(20);
+		flex-wrap: wrap;
      }
      &-item {
-        flex: 1;
+        // flex: 1;
+		width:32%;
      }
      &-item__label {
-        margin-bottom: vh(16);
+        margin-bottom: vh(26);
        display: flex;
        align-items: center;
        > span {
          font-weight: 400;
-          font-size: vw(14);
+          font-size: font-vw(16);
          color: #ffffff;
          margin-left: vw(4);
        }
      }
      &-item__value {
-        width: vw(100);
-        height: vh(30);
+        width: vw(200);
+        height: vh(60);
        padding-left: vw(12);
        padding-bottom: vh(12);
        display: flex;
@@ -193,11 +197,11 @@
        background-size: 100% 100%;
        .countup-wrap {
          font-weight: bold;
-          font-size: vw(28);
+          font-size: font-vw(42);
          color: #02f9fa;
        }
        > span {
-          font-size: vw(12);
+          font-size: font-vw(24);
          color: #02f9fa;
          margin-left: vw(4);
        }
@@ -219,11 +223,11 @@
        margin: vh(20) 0 0 vw(20);
        padding-right: vw(20);
        overflow-y: auto;
-        height: vh(200);
+        height: vh(830);
        font-weight: 400;
-        font-size: vw(16);
+        font-size: font-vw(22);
        color: #ffffff;
-        line-height: vw(26);
+        line-height: 2;
        text-align: justify;
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
--- a/src/views/hotel/components/video-box.vue
+++ b/src/views/hotel/components/video-box.vue
@@ -78,7 +78,7 @@
 	          </div>
 	          <video
 	            class="video-item__video"
-	            :id="'monitorVideo' + index"
+	            :id="'hotelmonitorVideo' + index"
 	            preload="auto"
 	            muted
 	            autoplay
@@ -146,7 +146,7 @@
 	          class="item"
 	          v-for="(item, index) in videoList"
 	          :key="index"
-	          @click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
+	          @click="handleItemVideo(item.hlsUrl, 101, item.cameraIndexCode,item)"
 	        >
 	          <div>
 	            <p class="item-title--primary">
@@ -154,7 +154,7 @@
 	            </p>
 	            <video
 	              class="item-img"
-	              :id="'monitorVideo' + index"
+	              :id="'hotelmonitorVideo' + index"
 	              muted
 	              autoplay
 	              :controls="false"
@@ -182,50 +182,59 @@
  </div>
  <VideoDialog v-model="show" :cameraIndexCode="cameraIndexCode" :isDiy="isDiy"  :isCollect="isCollect" :src="videoSrc" />
 </template>
-
 <script setup>
-	import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
-	import {
+import { getRegionsListApi,getPreviewUrlApi } from '@/api/home'
+import {
  getVideoTypeApi,
  getVideoRegionsApi,
  postVideoRemainApi,
  postVideoControlApi,
  postVideoCollectApi
-	} from '@/api/monitor'
-	import pubSub from 'pubsub-js'
-	import Hls from 'hls.js'
-	import emptyIco from '@/assets/images/n-icon.png'
-	import { debounce } from 'lodash'
-	const Z00M_IN = 'ZOOM_IN' // 焦距变大
-	const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
-	const UP = 'UP' // 上转
-	const DOWN = 'DOWN' // 下转
-	const LEFT = 'LEFT' // 左转
-	const RIGHT = 'RIGHT' // 右转
-	const STOP = 'STOP' // 停止操作
-	let cond = ref(false)
-	let ACTION = '0'
-	let hlsRefs = []
-	let hlsRef = null
-	let timer = null
-	let videoLog = ref(1)
-	let videoList = ref([])
-	let cameraIndexCode = ref('')
-	let videoRef = ref()
-	let monitorChange = null
-	let total = ref(0)
-	let loading = ref(false)
-	let command = ref('')
-	let cameraName = ref('')
-	let regionList = ref()
-	let params = reactive({
+} from '@/api/monitor'
+import pubSub from 'pubsub-js'
+import Hls from 'hls.js'
+import emptyIco from '@/assets/images/n-icon.png'
+import { debounce } from 'lodash'
+// import mpegtsjs from "mpegts.js";
+import WebRTCWhep from "whepts";
+// const Z00M_IN = 'ZOOM_IN' // 焦距变大
+// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
+// const UP = 'UP' // 上转
+// const DOWN = 'DOWN' // 下转
+// const LEFT = 'LEFT' // 左转
+// const RIGHT = 'RIGHT' // 右转
+// const STOP = 'STOP' // 停止操作
+const Z00M_IN = 'zoomin' // 焦距变大
+const Z00M_OUT = 'zoomout' // 焦距变小
+const UP = 'up' // 上转
+const DOWN = 'down' // 下转
+const LEFT = 'left' // 左转
+const RIGHT = 'right' // 右转
+const STOP = 'stop' // 停止操作
+let cond = ref(false)
+let ACTION = '0'
+let hlsRefs = []
+let webrtcRefs = []
+let hlsRef = null
+let timer = null
+let videoLog = ref(1)
+let videoList = ref([])
+let cameraIndexCode = ref('')
+let videoRef = ref()
+let monitorChange = null
+let total = ref(0)
+let loading = ref(false)
+let command = ref('')
+let cameraName = ref('')
+let regionList = ref()
+let params = reactive({
  businessScenicArea: "",
  cameraName: "",
  pageNum: 1,
  pageSize: 6,
-	})
-	let show = ref(false)
-	const onMonitorChange = () => {
+})
+let show = ref(false)
+const onMonitorChange = () => {
  monitorChange = pubSub.subscribe('hotelChange', (res, data) => {
    params.businessScenicArea = data.name
    params.pageNum = 1
@@ -234,27 +243,31 @@
    cond.value = false
    getRegionsList()
  })
-	}
-	// 关注
-	const handleCollect = async (id, status, index) => {
+}
+// 关注
+const handleCollect = async (id, status, index) => {
  await postVideoCollectApi({
    cameraIndexCode:id,
    isCollect: status == 0 ? 1 : 0
  })
  if (status == 0) {
+    if(thisVideo.value){
      thisVideo.value.isCollect=1
+    }
    videoList.value[index].isCollect = 1
-		
  } else {
+    if(thisVideo.value){
      thisVideo.value.isCollect=0
+    }
    videoList.value[index].isCollect = 0
  }
  pubSub.publish('videoCollect', id)
-	}
-	// 采集
-	const handleAction = async (e) => {
+}
+// 采集
+const handleAction = async (e) => {
  if (e == STOP) {
    ACTION = '1'
+    command.value = e
  } else {
    ACTION = '0'
    command.value = e
@@ -271,44 +284,119 @@
    message: '操作成功',
    type: 'success'
  })
-	}
-	// 返回列表
-	const handleBack = () => {
+}
+// 返回列表
+const handleBack = () => {
  videoLog.value = 1
+  try{
    hlsRef.destroy()
-	  initVideo()
+  }catch (e) {
+
  }
-	let isCollect = ref(0)
-	let isDiy = ref(0)
-	let videoSrc = ref('')
-	const handleCamera = async (itemCode,resource) => {
+
+  initVideo()
+}
+let isCollect = ref(0)
+let isDiy = ref(0)
+let videoSrc = ref('')
+const handleCamera = async (itemCode,resource) => {
  show.value = true
  let res = await getPreviewUrlApi({
    type: 'hls',
-	    cameraIndexCode:itemCode
+    cameraIndexCode:itemCode,
+    subStream:0
  })
  cameraIndexCode.value = itemCode;
  isCollect.value = resource.isCollect
  isDiy.value = resource.isDiy
  videoSrc.value = res.data.url
-	}
-	//清除 hls
-	const clearHlsRefs = () => {
+}
+//清除 hls
+const clearHlsRefs = () => {
  if (hlsRefs.length > 0) {
    hlsRefs.map((item) => {
+      try{
        item.destroy()
+      }catch (e) {
+
+      }
+
    })
    hlsRefs = []
  }
+  if (webrtcRefs.length > 0) {
+    webrtcRefs.map((item) => {
+      item.close()
+    })
+    webrtcRefs = []
  }
-	// 分页
-	const currentChange = (e) => {
+}
+// 分页
+const currentChange = (e) => {
  clearHlsRefs()
  videoList.value = []
  getRegionsList()
+}
+const createPlayer = (cameraIndexCode,videoElement) => {
+  getPreviewUrlApi({
+    type: 'hls',
+    cameraIndexCode: cameraIndexCode,
+    subStream:1
+  }).then(res=>{
+    const url = res.data.url;
+    if(url.startsWith('http://192.168.77.200:8050/')){
+      const player = new WebRTCWhep({
+        url:url, // WHEP 服务器地址
+        container: videoElement, // 视频播放容器
+        iceServers: [{ urls: 'turn:192.168.77.200:3478',username: 'ZLMediaKit',credential: 'ZLMediaKit'}]
+      })
+      player.on('error', (error) => {
+        console.error('错误:', error.message, error.type)
+        if(error.type ==='REQUEST_ERROR' || error.type ==='NOT_FOUND_ERROR'){
+          createPlayer(cameraIndexCode,videoElement);
        }
-	//获取酒店视频列表
-	const getRegionsList = async()=>{
+      })
+      player.on('play:failed', (err) => {
+        // createPlayer(cameraIndexCode,videoElement);
+      })
+      webrtcRefs.push(player)
+    }
+    else{
+      const player = new Hls({
+        maxBufferLength: 10, // 最大缓冲长度（秒）
+        maxMaxBufferLength: 15, // 缓冲区长度的上限
+        maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
+      })
+      player.loadSource(url)
+      player.attachMedia(videoElement)
+      player.on(Hls.Events.MANIFEST_PARSED, () => {
+        videoElement.play()
+      })
+      player.on(Hls.Events.ERROR, (event, data) => {
+        // 根据错误类型进行处理
+        if (data.fatal) {
+          switch (data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR:
+              console.log('网络错误，尝试重新加载');
+              player.startLoad();
+              break;
+            case Hls.ErrorTypes.MEDIA_ERROR:
+              console.log('媒体错误，尝试修复');
+              player.recoverMediaError();
+              break;
+            default:
+              console.log('无法恢复的错误，销毁播放器');
+              // hls.destroy();
+              break;
+          }
+        }
+      })
+      hlsRefs.push(player)
+    }
+  })
+}
+//获取酒店视频列表
+const getRegionsList = async()=>{
  clearHlsRefs()
  videoLog.value = 1
  try {
@@ -321,39 +409,8 @@
      nextTick(() => {
        if(!videoList.value.length) return false
        videoList.value.forEach(async (x, index) => {
-			       const video = document.getElementById(`monitorVideo${index}`)
-			       const hls = new Hls({
-			         maxBufferLength: 10, // 最大缓冲长度（秒）
-			         maxMaxBufferLength: 15, // 缓冲区长度的上限
-			         maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-			       })
-			       hls.loadSource(x.hlsUrl)
-			       hls.attachMedia(video)
-			       hls.on(Hls.Events.MANIFEST_PARSED, () => {
-			         video.play()
-			       })
-				   hls.on(Hls.Events.ERROR, (event, data) => {
-					 console.error('HLS 播放器遇到错误:', data);
-					   // 根据错误类型进行处理
-					   // initVideo()
-					  if (data.fatal) {
-						switch (data.type) {
-						  case Hls.ErrorTypes.NETWORK_ERROR:
-							console.log('网络错误，尝试重新加载');
-							hls.startLoad();
-							break;
-						  case Hls.ErrorTypes.MEDIA_ERROR:
-							console.log('媒体错误，尝试修复');
-							hls.recoverMediaError();
-							break;
-						  default:
-							console.log('无法恢复的错误，销毁播放器');
-							// hls.destroy();
-							break;
-						}
-					  }
-				   })
-			       hlsRefs.push(hls)
+          const video = document.getElementById(`hotelmonitorVideo${index}`)
+          createPlayer(x.cameraIndexCode,video);
        })
      })
    } else {
@@ -366,13 +423,35 @@
    loading.value = false
  }

-	}
-	let thisVideo = ref(null)
-	const handleItemVideo = (url, type, code,item) => {
+}
+let thisVideo = ref(null)
+const handleItemVideo = async (url, type, code, item) => {
+  let res = await getPreviewUrlApi({
+    cameraIndexCode: code,
+    type: 'hls',
+    subStream:0
+  })
+  url = res.data.url
  thisVideo.value = item
  videoLog.value = 2
  cameraIndexCode.value = code
  setTimeout(() => {
+    if (url.startsWith('http://192.168.77.200:8050/')) {
+      hlsRef = new WebRTCWhep({
+        url: url, // WHEP 服务器地址
+        container: videoRef.value, // 视频播放容器
+        iceServers: [{ urls: 'turn:192.168.77.200:3478',username: 'ZLMediaKit',credential: 'ZLMediaKit'}]
+      })
+      hlsRef.on('error', (error) => {
+        console.error('错误:', error.message, error.type)
+        if(error.type ==='REQUEST_ERROR' || error.type ==='NOT_FOUND_ERROR'){
+          handleItemVideo(url, type, code, item);
+        }
+      })
+      hlsRef.on('play:failed', (err) => {
+        // handleItemVideo(url, type, code, item);
+      })
+    } else {
      hlsRef = new Hls({
        maxBufferLength: 10, // 最大缓冲长度（秒）
        maxMaxBufferLength: 15, // 缓冲区长度的上限
@@ -383,29 +462,21 @@
      hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
        videoRef.value.play()
      })
+    }
+
    if (type == 100) initVideo()
  }, 1000)
-	}
-	const initVideo = () => {
+}
+const initVideo = () => {
  clearHlsRefs()
  nextTick(() => {
    videoList.value.forEach(async (item, index) => {
-	      const video = document.getElementById(`monitorVideo${index}`)
-	      const hls = new Hls({
-	        maxBufferLength: 10, // 最大缓冲长度（秒）
-	        maxMaxBufferLength: 15, // 缓冲区长度的上限
-	        maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-	      })
-	      hls.loadSource(item.hlsUrl)
-	      hls.attachMedia(video)
-	      hls.on(Hls.Events.MANIFEST_PARSED, () => {
-	        video.play()
-	      })
-	      hlsRefs.push(hls)
+      const video = document.getElementById(`hotelmonitorVideo${index}`)
+      createPlayer(item.cameraIndexCode,video);
    })
  })
-	}
-	watch(
+}
+watch(
    () => videoList.value,
    (val) => {
      if (val.length) {
@@ -413,52 +484,53 @@
      }
    },
    { immediate: true }
-	)
-	// 更新视频
-	const postVideoRemain = async () => {
-	  timer = setInterval(() => {
-	    postVideoRemainApi({
-	      cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
-	    })
-	  }, 1500)
-	}
-	const getVideoRegions = async () => {
+)
+// 更新视频
+const postVideoRemain = async () => {
+  // timer = setInterval(() => {
+  //   postVideoRemainApi({
+  //     cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
+  //   })
+  // }, 1500)
+}
+const getVideoRegions = async () => {
  let res = await getVideoRegionsApi({
    cameraName: cameraName.value,
    businessScenicArea: params.businessScenicArea
  })
-	  console.log(res,11111111111111)
-	  regionList.value = res.data
-	  regionList.value.forEach((item,index)=>{
-	  	// item.show = true
-	  	item.videoResources=item.resourcesList[0].videoResources
-	  })
-	  regionList.value[0].show = true
-	  
+  if(res.data.length>0){
+    regionList.value = res.data[0].resourcesList;
+    regionList.value[0].show = false
  }
-	const handleRegions = (e) => {
+  // regionList.value.forEach((item,index)=>{
+  // 	// item.show = true
+  // 	item.videoResources=item.resourcesList[0].videoResources
+  // })
+}
+const handleRegions = (e) => {
  regionList.value[e].show = !regionList.value[e].show
-	}
-	const onInput = debounce((e) => {
+}
+const onInput = debounce((e) => {
  getVideoRegions()
-	}, 500)
-	let hotelChange = null;
-	onMounted(()=>{
+}, 500)
+let hotelChange = null;
+onMounted(()=>{
  hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
    cameraName.value = ''
    params.businessScenicArea = data.name
+    regionList.value=[];
    getVideoRegions()

  })
  onMonitorChange()

-	})
-	onUnmounted(() => {
+})
+onUnmounted(() => {
  clearHlsRefs()
  if (hotelChange) pubSub.unsubscribe(hotelChange)
  if (timer) clearInterval(timer)
  pubSub.unsubscribe(monitorChange)
-	})
+})
 </script>
 <style></style>
 <style scoped lang="scss">
@@ -468,8 +540,8 @@
 	.empty-box{
 		display:flex;
 		align-items: center;
-		font-size:vw(40);
-		height:vh(750);
+		font-size: font-vw(40);
+		// height:vh(750);
 		justify-content: center;
 		text-align:center;
 		width:100%;
@@ -497,7 +569,7 @@
 	    > span {
 	      margin: 0 vw(16);
 	      font-weight: 400;
-	      font-size: vw(16);
+	      font-size: font-vw(16);
 	      color: #ffffff;
 	    }
 	    .pause {
@@ -510,7 +582,7 @@
 	display: flex;
 	flex: 1;
    flex: 1;
-    height: vh(950);
+    // height: vh(950);
    margin-top: vh(120);
    margin-left: vw(10);
    padding: vh(34) vw(26);
@@ -542,7 +614,7 @@
          > span {
            padding-left: vw(20);
            font-weight: 400;
-            font-size: vw(14);
+            font-size: font-vw(14);
            color: #ffffff;
            line-height: vh(40);
          }
@@ -571,7 +643,7 @@
        padding: vh(10) vw(30);
        position: absolute;
        right: vw(30);
-        bottom: vh(20);
+        bottom: vh(50);
      }
    }
    &-list {
@@ -584,7 +656,7 @@
      position: relative;
      // width: vw(720);
 	  width:33%;
-      height: vh(380);
+      height: vh(880);
      padding: vh(10) vw(10);
      background-image: url('/src/assets/images/item-primary.png');
      background-size: 100% 100%;
@@ -606,7 +678,7 @@
      text-align: center;
      line-height: vh(24);
      font-weight: 400;
-      font-size: vw(16);
+      font-size: font-vw(16);
      color: #ffffff;
      background-image: url('@/assets/images/unfollow.png');
      background-size: 100% 100%;
@@ -618,15 +690,16 @@

    &-item__inner {
      position: relative;
+	  height:100%;
    }
    &-item__title {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
-      padding: vh(10) vw(10);
+      padding: vh(20) vw(20);
      color: #fff;
-      font-size: vw(14);
+      font-size: font-vw(20);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
@@ -634,15 +707,18 @@
    }
    &-item__title--error {
      @extend .video-item__title;
+	  font-size: font-vw(20);
      background-color: rgba(226, 27, 27, 0.72);
    }
    &-item__title--primary {
      @extend .video-item__title;
+	  font-size:font-vw(20);
      background-color: rgba(4, 30, 69, 0.72);
    }
    &-item__video {
      width: 100%;
-      height: vh(366);
+	  height:100%;
+      // height: vh(1860);
      object-fit: fill;
    }
    &-detail {
@@ -654,7 +730,7 @@
      position: relative;
      padding: vh(40) vw(50);
      width: vw(2060);
-      height: vh(960);
+      height: vh(1960);
      // background-image: url('/src/assets/images/one-video-bg.png');
      // background-size: 100% 100%;
    }
@@ -665,7 +741,7 @@
      top: 40 (vh);
      z-index: 9;
      font-weight: 400;
-      font-size: vw(14);
+      font-size: font-vw(14);
      color: #ffffff;
      padding: vw(20);
      display: flex;
@@ -674,14 +750,14 @@
    }
    &-detail__video {
      width: 100%;
-      height: vh(780);
+      height: vh(1780);
      object-fit: contain;
      background-color: #000;
    }
    &-right {
      margin-left: vw(8);
-      width: vw(440);
-      height: vh(890);
+      width: vw(540);
+      height: vh(1890);
      background: #082f5a;
      .back-box {
        cursor: pointer;
@@ -695,14 +771,14 @@
        }
        & > span {
          font-weight: bold;
-          font-size: vw(20);
+          font-size: font-vw(20);
          color: #ffffff;
        }
      }
      .list {
        overflow-y: auto;
        overflow-x: hidden;
-        height: vh(870);
+        height: vh(1870);
        padding: vw(8);
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
@@ -738,25 +814,28 @@
          position: absolute;
          bottom: 0;
          width: 100%;
-          padding: vw(10);
+          padding: vw(20);
          color: #fff;
-          font-size: vw(14);
+          font-size: font-vw(22);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          z-index: 999;
        }
        &-title--error {
-          @extend .item-title;
+          // @extend .item-title;
+		  font-size:font-vw(22);
          background-color: rgba(226, 27, 27, 0.72);
        }
        &-title--primary {
-          @extend .item-title;
+          // @extend .item-title;
+		  font-size: font-vw(20);
+		  padding:vw(10);
          background-color: rgba(4, 30, 69, 0.72);
        }
        &-img {
          width: 100%;
-          height: vh(164);
+          height: vh(264);
          display: block;
          object-fit: cover;
        }
@@ -803,7 +882,7 @@
          span {
            margin-left: vw(30);
            font-weight: 800;
-            font-size: vw(15);
+            font-size: font-vw(15);
            line-height: vh(26);
            text-align: center;
            font-style: normal;
@@ -835,7 +914,7 @@
            border-radius: 0px 0px 0px 0px;
            text-align: center;
            font-weight: 400;
-            font-size: vw(14);
+            font-size: font-vw(14);
            color: #ffffff;
            padding: vw(20);
            text-align: left;
@@ -855,15 +934,15 @@
 }
 .left-nav {
    margin: 0 vw(8);
-    width: vw(250);
-    background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
+    width: vw(450);
+    // background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
    .bom-box {
-      margin-top: vh(20);
+      margin-top: vh(40);
      .search-box {
        border-radius: vw(2);
-        height: vh(36);
+        height: vh(56);
        border: 1px solid #0096ff;
-        margin: vh(10) auto;
+        margin: vh(20) auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
@@ -877,7 +956,7 @@

      .tree-box {
        position: relative;
-        height: vh(750);
+        height: vh(1750);
        padding: 0 vw(20);
        overflow-y: auto;
        overflow-x: hidden;
@@ -920,7 +999,7 @@
            padding: 0 vw(20);
            display: block;
            font-weight: 400;
-            font-size: vw(15);
+            font-size: font-vw(24);
            color: #ffffff;
            text-align: left;
            font-style: normal;
@@ -951,7 +1030,7 @@
            cursor: pointer;
            color: rgb(192,216,254);
            font-weight: 400;
-            font-size: vw(15);
+            font-size: font-vw(22);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
@@ -978,7 +1057,7 @@
  }
  :deep(.el-input__inner) {
    height: vh(36);
-    font-size: vw(16);
+    font-size: font-vw(16);
    color: #ffffff;
  }
 </style>
--- a/src/views/monitor/components/alarmRate.vue
+++ b/src/views/monitor/components/alarmRate.vue
@@ -37,8 +37,8 @@
      orient: 'vertical',
      y: 'center',
      left: '50%',
-      itemWidth: fitChartSize(12),
-      itemHeight: fitChartSize(12),
+      itemWidth: fitChartSize(18),
+      itemHeight: fitChartSize(18),
      itemGap: fitChartSize(6),
      formatter: (name) => {
        let obj = props.dataList.find((item) => item.name == name)
@@ -48,11 +48,11 @@
        rich: {
          name: {
            color: '#fff',
-            fontSize: fitChartSize(12)
+            fontSize: fitChartSize(20)
          },
          value: {
            color: '#fff',
-            fontSize: fitChartSize(12)
+            fontSize: fitChartSize(20)
          }
        }
      }
@@ -73,13 +73,13 @@
          rich: {
            value: {
              color: '#fff',
-              fontSize: fitChartSize(16),
+              fontSize: fitChartSize(20),
              fontWeight: 'bold',
              padding: [0, 0, 5, 0]
            },
            name: {
              color: '#fff',
-              fontSize: fitChartSize(12)
+              fontSize: fitChartSize(22)
            }
          }
        },
@@ -132,7 +132,7 @@

 <style scoped lang="scss">
  .alarmRate {
-    width: vw(380);
-    height: vh(180);
+    width: 100%;
+    height: vh(400);
  }
 </style>
--- a/src/views/monitor/components/box-1.vue
+++ b/src/views/monitor/components/box-1.vue
@@ -41,17 +41,17 @@
          <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.handled" />
        </div>
      </div>
-      <div class="flex pt-20 gap8">
-        <div class="box">
+      <div class=" pt-20 gap8" style="margin-top:20px;">
+        <div class="box ">
          <Title3 title="异常告警" />
          <Line
-            :width="370"
-            :height="180"
+            width="100%"
+            :height="90"
            :data="abnormalAlarm"
            :xAxisData="abnormalAlarmXAxisData"
          />
        </div>
-        <div class="box">
+        <div class="box other-box" style="margin-top:20px;">
          <Title3 title="异常告警占比" />
          <div class="flex">
            <alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
@@ -83,9 +83,9 @@
      <div class="flex pt-20">
        <div class="box">
          <Title3 title="平均车速(KM/H)" />
-            <traffic-jam :width="760"
+            <traffic-jam width="100%"
            :series="jamlData[0].data"
-            :data="jamXAxisData" :height="180" />
+            :data="jamXAxisData" height="350" />
        </div>
      </div>
    </template>
@@ -105,11 +105,11 @@
          alt=""
        />
        <img v-if="scenicSpotId == '龙桥河'" class="map-img" src="@/assets/images/lqh.jpg" alt="" /> -->
-		<iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="/map/sxzd/bdc.html"></iframe>
-		<iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="/map/sxzd/sxzd.html"></iframe>
-		<iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="/map/lqh/lqh.html"></iframe>
+		<iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="http://192.168.77.200/map/sxzd/bdc.html"></iframe>
+		<iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="http://192.168.77.200/map/sxzd/sxzd.html"></iframe>
+		<iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="http://192.168.77.200/map/lqh/lqh.html"></iframe>
      </div>
-      <div class="flex">
+      <div class="">
        <div class="monitor">
          <div class="t-title">
            <span>监控点位统计</span>
@@ -142,8 +142,8 @@
          <div class="bg" style="cursor: pointer;" >
            <Title3 title="今日异常告警" @click="showAbnormalList" />
            <Line
-              :width="370"
-              :height="180"
+              width="100%"
+              :height="70"
              :data="abnormalAlarm"
              :xAxisData="abnormalAlarmXAxisData"
            />
@@ -180,7 +180,6 @@
            <Title3 title="异常告警占比" />
            <div class="flex">
              <alarmRate :dataList="abnormalData.abnormalAlarmPercent" />
-
            </div>
          </div>
        </div>
@@ -254,17 +253,17 @@
  const showTrafficEvent = function(){
    trafficEventShow.value = true;
  }
-  window.addEventListener("message", async(e) => {
-    let {code,data} = await getPreviewUrlApi({
-      type: 'hls',
-      cameraIndexCode:e.data.cameraIndexCode
-    })
-    if(code===200){
-      src.value = data.url
-      cameraIndexCode.value = e.data.cameraIndexCode
-      videoShow.value = true
-    }
-  });
+  // window.addEventListener("message", async(e) => {
+  //   let {code,data} = await getPreviewUrlApi({
+  //     type: 'hls',
+  //     cameraIndexCode:e.data.cameraIndexCode
+  //   })
+  //   if(code===200){
+  //     src.value = data.url
+  //     cameraIndexCode.value = e.data.cameraIndexCode
+  //     videoShow.value = true
+  //   }
+  // });
  // 异常告警
  let abnormalAlarm = computed(() => {
    return [{ data: abnormalData.value.abnormalAlarm.map((item) => item.value) }]
@@ -347,7 +346,7 @@
  .none {
    width: vw(380);
    height: vh(200);
-    font-size: vw(28);
+    font-size: font-vw(28);
    color: #f2f2f2;
    display: flex;
    align-items: center;
@@ -355,7 +354,7 @@
  }
  .detection-top {
    width: 100%;
-    height: vh(560);
+    height: vh(860);
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
@@ -381,10 +380,10 @@
    }
  }
  .monitor {
-    width: vw(405);
+    // width: vw(405);
    margin-right: vw(8);
    &-statistics {
-      height: vh(90);
+      height: vh(110);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
@@ -398,13 +397,13 @@
    &-statistics-item {
      &__label {
        font-weight: 400;
-        font-size: vw(14);
+        font-size: font-vw(20);
        color: #fff;
      }
      &__value {
        margin-top: vh(10);
        font-weight: bold;
-        font-size: vw(24);
+        font-size: font-vw(24);
        color: #ffffff;
      }
      &:nth-child(4) {
@@ -418,9 +417,9 @@
    }
  }
  .traffic-alarm {
-    width: vw(405);
+    // width: vw(405);
    &-statistics {
-      height: vh(90);
+      height: vh(110);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
@@ -434,20 +433,20 @@
    &-statistics-item {
      &__label {
        font-weight: 400;
-        font-size: vw(14);
+        font-size: font-vw(20);
        color: #fff;
      }
      &__value {
        margin-top: vh(10);
        font-weight: bold;
-        font-size: vw(24);
+        font-size: font-vw(24);
        color: #02f9fa;
        text-align: center;
      }
      &__error {
        margin-top: vh(10);
        font-weight: bold;
-        font-size: vw(24);
+        font-size: font-vw(24);
        color: #ff4400;
        text-align: center;
      }
@@ -468,11 +467,11 @@
    }
  }
  .t-title {
-    margin: vh(10) auto;
+    margin: vh(25) auto;
    width: 100%;
-    height: vh(32);
+    height: vh(50);
    font-weight: 800;
-    font-size: vw(16);
+    font-size: font-vw(22);
    color: #fff;
    display: flex;
    align-items: center;
@@ -486,31 +485,31 @@
    box-shadow: none;
    border-top-left-radius: vh(30);
    border-bottom-left-radius: vh(30);
-    font-size: vw(14);
+    font-size: font-vw(14);
    color: #fff;
  }
  .box-1 {
    margin-top: vh(120);
-    width: vw(800);
-    height: vh(950);
+    width: vw(1100);
+    // height: vh(950);
    padding: vw(8);
    box-sizing: border-box;
    background-image: url('@/assets/images/bg-2.png');
    background-size: 100% 100%;
    .traffic {
      margin-top: vh(20);
-      height: vh(72);
+      height: vh(142);
      display: flex;
      align-items: center;
      justify-content: space-evenly;

      &-item {
-        width: vw(229);
-        height: vw(72);
+        width: vw(339);
+        height: vw(102);
        font-weight: 400;
-        font-size: vw(14);
+        font-size: font-vw(14);
        color: #fff;
-        padding-left: vw(84);
+        padding-left: vw(150);
        display: flex;
        flex-direction: column;
        justify-content: center;
@@ -531,22 +530,22 @@
      &-item__title {
        margin-bottom: vh(6);
        font-weight: 400;
-        font-size: vw(14);
+        font-size: font-vw(18);
        color: #ffffff;
      }
      &-item__value--primary {
        font-weight: bold;
-        font-size: vw(24);
+        font-size: font-vw(24);
        color: #12b5fd;
      }
      &-item__value--success {
        font-weight: bold;
-        font-size: vw(24);
+        font-size: font-vw(24);
        color: #02f9fa;
      }
      &-item__value--error {
        font-weight: bold;
-        font-size: vw(24);
+        font-size: font-vw(24);
        color: #f15a25;
      }
    }
@@ -557,13 +556,14 @@
      gap: vw(20);

      &-item {
-        width: vw(182);
-        height: vw(106);
+        // width: vw(182);
+		flex:1;
+        height: vw(156);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
-
+		margin:vh(20) 0;
        &:nth-child(1) {
          background-image: url('/src/assets/images/four-t-1.png');
          background-size: 100% 100%;
@@ -604,28 +604,30 @@
      }
      &-item__label {
        font-weight: 400;
-        font-size: vw(14);
+        font-size: font-vw(20);
        color: #fff;
      }
      &-item__value {
        font-weight: bold;
-        font-size: vw(24);
+        font-size: font-vw(24);
        margin-top: vh(10);
      }
    }

    .unit {
      color: #02f9fa;
-      font-size: vw(14);
+      font-size: font-vw(14);
      margin-bottom: vh(4);
    }
+	.other-box{

+	  height: vh(350) !important;
+	}
    .box {
      flex: 1;
-      height: vh(220);
+      height: vh(400);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;
-
      // .title-2 {
      //   width: vw(253);
      //   height: vh(28);
@@ -636,7 +638,7 @@
      //   & > span {
      //     padding-left: vw(22);
      //     font-weight: bold;
-      //     font-size: vw(15);
+      //     font-size: font-vw(15);
      //     background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
      //     -webkit-background-clip: text;
      //     background-clip: text;
@@ -659,36 +661,36 @@
          justify-content: center;
        }
        &-title {
-          font-size: vw(14);
+          font-size: font-vw(14);
          color: rgba(255, 255, 255, 0.9);
        }
        &-value {
          margin-top: vh(10);
          font-weight: bold;
-          font-size: vw(24);
+          font-size: font-vw(24);
          color: #02f9fa;
        }
        &-error{
          margin-top: vh(10);
          font-weight: bold;
-          font-size: vw(24);
+          font-size: font-vw(24);
          color: #ff4400;
        }
        .count {
          font-weight: bold;
-          font-size: vw(28);
+          font-size: font-vw(28);
          color: #ff4400 !important;
        }
        .prefix,
        .suffix {
          color: #ff4400;
-          font-size: vw(12);
+          font-size: font-vw(12);
        }
      }
      .title-3 {
        position: relative;
        width: vw(344);
-        height: vh(12);
+        height: vh(16);
        margin-top: vh(20);
        background-image: url('@/assets/images/title-6.png');
        background-size: 100% 100%;
@@ -697,7 +699,7 @@
          position: absolute;
          bottom: vh(4);
          left: vw(20);
-          font-size: vw(15);
+          font-size: font-vw(18);
          font-weight: bold;
          background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
          -webkit-background-clip: text;
--- a/src/views/monitor/components/box-2.vue
+++ b/src/views/monitor/components/box-2.vue
@@ -10,9 +10,8 @@
              :key="index"
              @click="handleNav(index)"
          >
-			    <!-- <span v-if="!params.businessScenicArea && index == 0"> 核心路段 </span> -->
            <span>
-			      {{ item.dictLabel }} 
+			      {{ item }}
 			    </span>
          </div>
          <div
@@ -21,8 +20,6 @@
            <span>收藏夹</span>
          </div>
        </div>
-       
-		
      </div>
      <div class="bom-box">
        <Title2 title="检索" />
@@ -122,7 +119,7 @@
      </div>
    </div>

-    <div v-if="videoLog == 2" class="video-detail">
+    <div v-if="videoLog == 2" class="video-detail" style="flex:1;">
      <div class="video-detail__wrapper">
        <video class="video-detail__video" ref="videoRef" muted autoplay controls>
          <source type="application/x-mpegURL" />
@@ -168,7 +165,7 @@
            class="item"
            v-for="(item, index) in videoList"
            :key="index"
-            @click="handleItemVideo(item.hlsUrl, 101, item.handleItemVideo,item)"
+            @click="handleItemVideo(item.hlsUrl, 101, item.cameraIndexCode,item)"
          >
            <div>
              <p class="item-title--primary">
@@ -202,18 +199,19 @@
    postVideoControlApi,
    postVideoCollectApi
  } from '@/api/monitor'
+  import WebRTCWhep from 'whepts'

  import { debounce } from 'lodash'
  import pubSub from 'pubsub-js'
  import Hls from 'hls.js'

-  const Z00M_IN = 'ZOOM_IN' // 焦距变大
-  const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
-  const UP = 'UP' // 上转
-  const DOWN = 'DOWN' // 下转
-  const LEFT = 'LEFT' // 左转
-  const RIGHT = 'RIGHT' // 右转
-  const STOP = 'STOP' // 停止操作
+  const Z00M_IN = 'zoomin' // 焦距变大
+  const Z00M_OUT = 'zoomout' // 焦距变小
+  const UP = 'up' // 上转
+  const DOWN = 'down' // 下转
+  const LEFT = 'left' // 左转
+  const RIGHT = 'right' // 右转
+  const STOP = 'stop' // 停止操作
  let ACTION = '0'

  const props = {
@@ -245,34 +243,82 @@
    businessVideoDisplayPosition: ''
  })
  let hlsRefs = []
+  let webrtcRefs = []
  let hlsRef = null
  let timer = null

  const postVideoRemain = async () => {
-	if(!videoList.value.length) return false;
-    timer = setInterval(() => {
-      postVideoRemainApi({
-        cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
-      })
-    }, 2000)
+	// if(!videoList.value.length) return false;
+  //   timer = setInterval(() => {
+  //     postVideoRemainApi({
+  //       cameraIndexCode: videoList.value.map((item) => item.cameraIndexCode)
+  //     })
+  //   }, 2000)
  }
-
-  const initVideo = () => {
-    clearHlsRefs()
-    nextTick(() => {
-      videoList.value.forEach(async (item, index) => {
-        const video = document.getElementById(`monitorVideo${index}`)
-        const hls = new Hls({
+  const createPlayer = (cameraIndexCode,videoElement) => {
+    getPreviewUrlApi({
+      type: 'hls',
+      cameraIndexCode: cameraIndexCode,
+      subStream:1
+    }).then(res=>{
+      const url = res.data.url;
+      if(url.startsWith('http://192.168.77.200:8050/')){
+        const player = new WebRTCWhep({
+          url: url, // WHEP 服务器地址
+          container: videoElement, // 视频播放容器
+          iceServers: [{ urls: 'turn:192.168.77.200:3478',username: 'ZLMediaKit',credential: 'ZLMediaKit'}]
+        })
+        player.on('error', (error) => {
+          console.error('错误:', error.message, error.type)
+          if(error.type ==='REQUEST_ERROR' || error.type ==='NOT_FOUND_ERROR'){
+            createPlayer(cameraIndexCode,videoElement);
+          }
+        })
+        player.on('play:failed', (err) => {
+          // createPlayer(cameraIndexCode,videoElement);
+        })
+        webrtcRefs.push(player)
+      }
+      else{
+        const player = new Hls({
          maxBufferLength: 10, // 最大缓冲长度（秒）
          maxMaxBufferLength: 15, // 缓冲区长度的上限
          maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
        })
-        hls.loadSource(item.hlsUrl)
-        hls.attachMedia(video)
-        hls.on(Hls.Events.MANIFEST_PARSED, () => {
-          video.play()
+        player.loadSource(url)
+        player.attachMedia(videoElement)
+        player.on(Hls.Events.MANIFEST_PARSED, () => {
+          videoElement.play()
        })
-        hlsRefs.push(hls)
+        player.on(Hls.Events.ERROR, (event, data) => {
+          // 根据错误类型进行处理
+          if (data.fatal) {
+            switch (data.type) {
+              case Hls.ErrorTypes.NETWORK_ERROR:
+                console.log('网络错误，尝试重新加载');
+                player.startLoad();
+                break;
+              case Hls.ErrorTypes.MEDIA_ERROR:
+                console.log('媒体错误，尝试修复');
+                player.recoverMediaError();
+                break;
+              default:
+                console.log('无法恢复的错误，销毁播放器');
+                // hls.destroy();
+                break;
+            }
+          }
+        })
+        hlsRefs.push(player)
+      }
+    })
+  }
+  const initVideo = () => {
+    clearHlsRefs()
+    nextTick(() => {
+      videoList.value.forEach(async (item, index) => {
+        const videoElement = document.getElementById(`monitorVideo${index}`)
+        createPlayer(item.cameraIndexCode,videoElement);
      })
    })
  }
@@ -292,6 +338,16 @@
      })
      hlsRefs = []
    }
+    if(webrtcRefs.length>0){
+      webrtcRefs.map((item) => {
+        try{
+          item.close()
+        }catch (e) {
+
+        }
+      })
+      webrtcRefs = [];
+    }
  }
  const currentChange = (e) => {
 	  if(navList.value.length==current.value){
@@ -338,11 +394,33 @@
    initVideo()
  }
  let thisVideo = ref(null)
-  const handleItemVideo = (url, type, code,item) => {
+  const handleItemVideo = async (url, type, code, item) => {
+    let res = await getPreviewUrlApi({
+      cameraIndexCode: code,
+      type: 'hls',
+      subStream:0
+    })
+    url = res.data.url
    thisVideo.value = item
    videoLog.value = 2
    cameraIndexCode.value = code
    setTimeout(() => {
+      if (url.startsWith('http://192.168.77.200:8050/')) {
+        hlsRef = new WebRTCWhep({
+          url: url, // WHEP 服务器地址
+          container: videoRef.value, // 视频播放容器
+          iceServers: [{ urls: 'turn:192.168.77.200:3478',username: 'ZLMediaKit',credential: 'ZLMediaKit'}]
+        })
+        hlsRef.on('error', (error) => {
+          console.error('错误:', error.message, error.type)
+          if(error.type ==='REQUEST_ERROR' || error.type ==='NOT_FOUND_ERROR'){
+            handleItemVideo(url, type, code, item);
+          }
+        })
+        hlsRef.on('play:failed', (err) => {
+          // handleItemVideo(url, type, code, item);
+        })
+      } else {
        hlsRef = new Hls({
          maxBufferLength: 10, // 最大缓冲长度（秒）
          maxMaxBufferLength: 15, // 缓冲区长度的上限
@@ -353,15 +431,17 @@
        hlsRef.on(Hls.Events.MANIFEST_PARSED, () => {
          videoRef.value.play()
        })
+      }
+
      if (type == 100) initVideo()
    }, 1000)
  }
  const handleAction = async (e) => {
+    command.value = e
    if (e == STOP) {
      ACTION = '1'
    } else {
      ACTION = '0'
-      command.value = e
    }
    await postVideoControlApi({
      action: ACTION,
@@ -387,9 +467,9 @@
    show.value = true
    let res = await getPreviewUrlApi({
      type: 'hls',
-      cameraIndexCode:itemCode
+      cameraIndexCode: itemCode,
+      subStream: 0
    })
-	console.log(res,'rrrrrrrrrrrrrr')
    cameraIndexCode.value = itemCode;
    isCollect.value = resource.isCollect
    isDiy.value = resource.isDiy
@@ -445,7 +525,7 @@
 	  if(val==3){
 		  params.businessVideoDisplayPosition = ''
 	  }else{
-		 params.businessVideoDisplayPosition = navList.value[current.value].dictValue
+      params.businessVideoDisplayPosition = navList.value[current.value]
 	  }

      let res = await getVideoListApi(params)
@@ -453,46 +533,10 @@
      if (res.data.length > 0) {

        videoList.value = res.data
-		// console.log(videoList.value,'1111111111111111111111')
-		// postVideoRemain()
        nextTick(() => {
          videoList.value.forEach(async (x, index) => {
-            const video = document.getElementById(`monitorVideo${index}`)
-            const hls = new Hls({
-              maxBufferLength: 10, // 最大缓冲长度（秒）
-              maxMaxBufferLength: 15, // 缓冲区长度的上限
-              maxBufferSize: 30 * 1000 * 1000 // 最大缓冲大小（字节）
-            })
-            hls.loadSource(x.hlsUrl)
-            hls.attachMedia(video)
-            hls.on(Hls.Events.MANIFEST_PARSED, () => {
-              video.play()
-            })
-			 hls.on(Hls.Events.ERROR, (event, data) => {
-				 // console.error('HLS 播放器遇到错误:', data);
-				 // hls.startLoad();
-				 // initVideo()
-				   // 根据错误类型进行处理
-				  if (data.fatal) {
-					switch (data.type) {
-					  case Hls.ErrorTypes.NETWORK_ERROR:
-						console.log('网络错误，尝试重新加载');
-						hls.startLoad();
-						break;
-					  case Hls.ErrorTypes.MEDIA_ERROR:
-						console.log('媒体错误，尝试修复');
-						hls.recoverMediaError();
-						break;
-					  default:
-						console.log('无法恢复的错误，销毁播放器');
-						
-						// hls.destroy();
-						break;
-					}
-				  }
-			 })
-			
-            hlsRefs.push(hls)
+            const videoElement = document.getElementById(`monitorVideo${index}`)
+            createPlayer(x.cameraIndexCode,videoElement);
          })
        })
      } else {
@@ -588,6 +632,7 @@
 </script>

 <style lang="scss" scoped>
+
 	.new-title{
 		margin-bottom:vh(20);
 		color:#fff;
@@ -621,7 +666,7 @@
      > span {
        margin: 0 vw(16);
        font-weight: 400;
-        font-size: vw(16);
+        font-size: font-vw(16);
        color: #ffffff;
      }
      .pause {
@@ -642,28 +687,29 @@
  :deep(.el-input__inner) {
    background-color: rgba(0, 0, 0, 0) !important;
    color: #fff;
+	font-size: font-vw(22) !important;
  }

  .box-2 {
    margin-top: vh(120);
-    height: vh(950);
+    // height: vh(950);
    display: flex;
    flex: 1;
  }
  :deep(.el-input__inner) {
    height: vh(36);
-    font-size: vw(16);
+    font-size: font-vw(16);
    color: #ffffff;
  }
  .left-nav {
    margin: 0 vw(8);
-    width: vw(250);
+    width: vw(350);
    background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%);
    .bom-box {
      margin-top: vh(20);
      .search-box {
        border-radius: vw(2);
-        height: vh(36);
+        height: vh(70);
        border: 1px solid #0096ff;
        margin: vh(10) auto;
        display: flex;
@@ -679,12 +725,13 @@

      .tree-box {
        position: relative;
-        height: vh(490);
+         height: vh(1080);
        padding: 0 vw(20);
 		padding-right:0;
 		padding-bottom:vw(10);
        overflow-y: auto;
        overflow-x: hidden;
+		margin-top:vh(30);
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
          width: vw(4); /* 滚动条的宽度 */
@@ -701,7 +748,8 @@
        .tree-item {
          cursor: pointer;
          position: relative;
-          padding-top: vh(20);
+          padding-top: vh(30);
+
          // border-left: vw(2) solid #37d8fc;
          &:nth-child(1) {
            padding-top: 0;
@@ -724,7 +772,7 @@
            padding: 0 vw(5);
            display: block;
            font-weight: 400;
-            font-size: vw(15);
+            font-size: font-vw(20);
            color: #ffffff;
            text-align: left;
            font-style: normal;
@@ -755,7 +803,7 @@
            cursor: pointer;
            color: rgb(192,216,254);
            font-weight: 400;
-            font-size: vw(15);
+            font-size: font-vw(18);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
@@ -773,9 +821,9 @@
    }
    .ul {
      font-weight: 400;
-      font-size: vw(18);
+      font-size: font-vw(18);
      color: #fff;
-      height: vh(340);
+      height: vh(740);
      overflow-y: auto;
      overflow-x: hidden;
      /* 滚动条整体样式 */
@@ -794,13 +842,14 @@
      }
      .li {
        cursor: pointer;
-        width: vw(250);
-        height: vh(58);
-        line-height: vh(58);
+        // width: vw(250);
+        height: vh(120);
+        line-height: vh(120);
        text-align: center;
-        margin-bottom: vh(15);
+        margin-bottom: vh(25);
        background: url('/src/assets/images/m-nav-bg-1.png');
        background-size: 100% 100%;
+		font-size: font-vw(22);
      }
      .active {
        background: url('/src/assets/images/m-nav-bg-2.png');
@@ -813,7 +862,7 @@
    &-wrapper {
      position: relative;
      width: 100%;
-      height: vh(960);
+      // height: vh(960);
      padding: vh(30) vw(20);
      box-sizing: border-box;
      background-image: url('/src/assets/images/log-v-bg.png');
@@ -822,7 +871,7 @@
        padding: vh(10) vw(30);
        position: absolute;
        right: vw(30);
-        bottom: vh(20);
+        bottom: vh(50);
      }
    }
    &-list {
@@ -835,7 +884,7 @@
      position: relative;
      // width: vw(686);
 	  width: 33%;
-      height: vh(380);
+      height: vh(920);
      padding: vh(10) vw(10);
      background-image: url('/src/assets/images/item-primary.png');
      background-size: 100% 100%;
@@ -857,7 +906,7 @@
      text-align: center;
      line-height: vh(24);
      font-weight: 400;
-      font-size: vw(16);
+      font-size: font-vw(16);
      color: #ffffff;
      background-image: url('@/assets/images/unfollow.png');
      background-size: 100% 100%;
@@ -875,9 +924,9 @@
      left: 0;
      bottom: 0;
      width: 100%;
-      padding: vh(10) vw(10);
+      padding: vh(20) vw(20);
      color: #fff;
-      font-size: vw(14);
+      font-size: font-vw(20);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
@@ -889,11 +938,12 @@
    }
    &-item__title--primary {
      @extend .video-item__title;
+	  font-size: font-vw(20);
      background-color: rgba(4, 30, 69, 0.72);
    }
    &-item__video {
      width: 100%;
-      height: vh(366);
+      height: vh(900);
      object-fit: cover;
    }
    &-detail {
@@ -904,8 +954,9 @@
    &-detail__wrapper {
      position: relative;
      padding: vh(40) vw(50);
-      width: vw(1660);
-      height: vh(960);
+      // width: vw(1660);
+	  flex:1;
+      // height: vh(960);
      background-image: url('/src/assets/images/one-video-bg.png');
      background-size: 100% 100%;
    }
@@ -916,7 +967,7 @@
      top: 40 (vh);
      z-index: 9;
      font-weight: 400;
-      font-size: vw(14);
+      font-size: font-vw(14);
      color: #ffffff;
      padding: vw(20);
      display: flex;
@@ -925,20 +976,21 @@
    }
    &-detail__video {
      width: 100%;
-      height: vh(820);
+      height: vh(1820);
      object-fit: contain;
      background-color: #000;
    }
    &-right {
      margin-left: vw(8);
      width: vw(440);
-      height: vh(956);
+      // height: vh(956);
      background: #082f5a;
      .back-box {
        cursor: pointer;
        padding-right: vw(20);
        display: flex;
        align-items: center;
+		margin-bottom:vh(10);
        .icon {
          width: vw(30);
          height: auto;
@@ -946,14 +998,14 @@
        }
        & > span {
          font-weight: bold;
-          font-size: vw(20);
+          font-size: font-vw(20);
          color: #ffffff;
        }
      }
      .list {
        overflow-y: auto;
        overflow-x: hidden;
-        height: vh(920);
+        height: vh(1920);
        padding: vw(8);
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
@@ -991,7 +1043,7 @@
          width: 100%;
          padding: vw(10);
          color: #fff;
-          font-size: vw(14);
+          font-size: font-vw(14);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
@@ -1003,11 +1055,13 @@
        }
        &-title--primary {
          @extend .item-title;
+		  font-size: font-vw(20);
+		  padding:vw(10);
          background-color: rgba(4, 30, 69, 0.72);
        }
        &-img {
          width: 100%;
-          height: vh(164);
+          height: vh(264);
          display: block;
          object-fit: cover;
        }
@@ -1054,7 +1108,7 @@
          span {
            margin-left: vw(30);
            font-weight: 800;
-            font-size: vw(15);
+            font-size: font-vw(15);
            line-height: vh(26);
            text-align: center;
            font-style: normal;
@@ -1086,7 +1140,7 @@
            border-radius: 0px 0px 0px 0px;
            text-align: center;
            font-weight: 400;
-            font-size: vw(14);
+            font-size: font-vw(14);
            color: #ffffff;
            padding: vw(20);
            text-align: left;
--- a/src/views/monitor/components/traffic-jam.vue
+++ b/src/views/monitor/components/traffic-jam.vue
@@ -46,7 +46,7 @@
          left: '4%',
          right: '8%',
          top: '10%',
-          bottom: '14%',
+          bottom: '2%',
          containLabel: true
        },
        xAxis: {
@@ -61,7 +61,7 @@
            }
          },
          axisLabel: {
-            fontSize: fitChartSize(12),
+            fontSize: fitChartSize(16),
            color: 'rgba(255,255,255,0.9)'
          },
          data: getXAxisData()
@@ -79,7 +79,7 @@
          type: 'value',
          axisLabel: {
            show: true,
-            fontSize: fitChartSize(12),
+            fontSize: fitChartSize(18),
            color: 'rgba(255,255,255,0.9)'
          },
          splitLine: {
@@ -94,12 +94,12 @@
          {
            type: 'bar',
            data: getSeriesData(),
-            barWidth: fitChartSize(40),
+            barWidth: fitChartSize(32),
            label: {
              show: true,
              position: 'top',
              color: '#fff',
-              fontSize: fitChartSize(12),
+              fontSize: fitChartSize(20),
              formatter: (res) => {
                let valueMap = {
                  1: '畅通',
@@ -139,7 +139,8 @@

 <style scoped lang="scss">
  .traffic-jam {
-    width: vw(760);
-    height: vh(180);
+	margin-top: vh(10);
+    width:100%;
+    height: 100%;
  }
 </style>
--- a/src/views/scenic/components/age.vue
+++ b/src/views/scenic/components/age.vue
@@ -49,11 +49,11 @@
            rich: {
              name: {
                color: '#fff',
-                fontSize: fitChartSize(12)
+                fontSize: fitChartSize(18)
              },
              value: {
                color: '#00D5F6',
-                fontSize: fitChartSize(12)
+                fontSize: fitChartSize(18)
              }
            }
          }
@@ -92,7 +92,7 @@
            label: {
              show: false,
              color: '#D3F0FE',
-              fontSize: fitChartSize(12)
+              fontSize: fitChartSize(18)
            },
            data: getSeriesData()
          },
@@ -109,7 +109,7 @@
            label: {
              show: false,
              color: '#D3F0FE',
-              fontSize: fitChartSize(12)
+              fontSize: fitChartSize(18)
            },
            data: getSeriesData()
          },
@@ -151,7 +151,7 @@

 <style lang="scss" scoped>
  .age {
-    width: vw(240);
-    height: vh(280);
+    width: vw(260);
+    height: vh(850);
  }
 </style>
--- a/src/views/scenic/components/big-map.vue
+++ b/src/views/scenic/components/big-map.vue
@@ -650,7 +650,7 @@ let tabsIndex = ref(0)
  }
  .big-car-ship {
    flex: 1;
-    height: vh(820);
+    height: vh(850);
  }
  .close {
    cursor: pointer;
--- a/src/views/scenic/components/box-1.vue
+++ b/src/views/scenic/components/box-1.vue
@@ -14,7 +14,7 @@

      </div>
      <div class="rt-lable">
-        <div v-for="(item, index) in scenicStore.scenicSpotData.infoList" :key="index">
+        <div style="flex:1;" v-for="(item, index) in scenicStore.scenicSpotData.infoList" :key="index">
          <div class="label">{{ item.name }}</div>
          <p class="value" :class="{ error: item.type==2,warning: item.type==1 }">{{ item.value }}</p>
        </div>
@@ -25,16 +25,63 @@
 			查看详情
 			<!-- <img src="@/assets/images/d-ico-1.png" /> -->
 		</a>
-      <iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="/map/sxzd/bdc.html"></iframe>
-      <iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="/map/sxzd/sxzd.html"></iframe>
-      <iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="/map/lqh/lqh.html"></iframe>
+      <iframe v-if="scenicSpotId == 'root000000'" width="100%" height="100%" src="http://192.168.77.200/map/sxzd/bdc.html"></iframe>
+      <iframe v-if="scenicSpotId == 'root00000000'" width="100%" height="100%" src="http://192.168.77.200/map/sxzd/sxzd.html"></iframe>
+      <iframe v-if="scenicSpotId == '龙桥河'" width="100%" height="100%" src="http://192.168.77.200/map/lqh/lqh.html"></iframe>
+    </div>
+
+	<div class="box-1" style="padding: 0;margin:0;">
+	  <Title1 title="停车信息" />
+	  <div class="new-circle">
+	    <div class=" flex flex-1">
+	      <circle-progress
+	        v-for="(item, index) in garageList"
+	        :key="index"
+	        :width="80"
+	        :height="50"
+	        :value="parseFloat(item.rate)"
+	        :title="item.occupied"
+	        :subTitle="`${item.name}`"
+	      />
+	    </div>
+	    <div class="ml-20 mb-10 flex flex-1 justify-between">
+	      <count-item label="总停车场" :count="scenicStore.stopCarData.info.count" suffix="个" />
+	      <count-item
+	        label="剩余车位数"
+	        :count="scenicStore.stopCarData.info.occupiedSpaces"
+	        suffix="个"
+	      />
+	    </div>
 	  </div>
-    <div class="footer">
 	  <div class="flex">
+	    <div  class="border mr-8 flex-1">
+	      <div class="pt-10">
+	        <Title3 title="今日景区车流量" />
+	      </div>
+	      <Line width="100%" :height="133" :data="carBearData" :xAxisData="carBearXAxisData" />
+	    </div>
+	    <div  class="border flex-1">
+	      <div class="pt-10">
+	        <Title3 title="车辆归属地占比" />
+	      </div>
+	      <PieRow
+	        label="今日停车累计"
+	        :dataList="dataLists"
+	        :total="carTotal"
+	        width="98%"
+	        :height="133"
+	      />
+	    </div>
+	  </div>
+	</div>
+
+
+    <div class="footer" v-if="false">
+      <div class="">
        <div class="item">
          <circle-progress
-            :width="170"
-            :height="90"
+            :width="150"
+            :height="60"
            :value="parseFloat(scenicStore.wordkOrderData.toDayData.rate)"
            :title="`${scenicStore.wordkOrderData.toDayData.rate}%`"
            subTitle="完成率"
@@ -56,8 +103,8 @@
        </div>
        <div class="item">
          <circle-progress
-            :width="170"
-            :height="90"
+            :width="150"
+            :height="60"
            :value="parseFloat(scenicStore.wordkOrderData.warnData.rate)"
            :title="`${scenicStore.wordkOrderData.warnData.rate}%`"
            subTitle="完成率"
@@ -139,7 +186,35 @@ import pubSub from 'pubsub-js'
  const scenicStore = useScenicStore()
  const { initMap, addMarker, map, marker } = useMap()
 import { useHomeStore } from '@/stores/home'
+ const carBearData = computed(() => {

+   return [{ data: scenicStore.stopCarData.dataList.map((item) => item.value) }]
+ })
+ const carBearXAxisData = computed(() => {
+   return scenicStore.stopCarData.dataList.map((item) => item.name)
+ })
+ const carTotal = computed(() => {
+   return dataLists.value.reduce((pre, cur) => {
+     return pre + parseInt(cur.count)
+   }, 0)
+ })
+ const garageList = computed(() => {
+   return scenicStore.stopCarData.headList
+ })
+
+  let dataLists = ref([])
+  watch(
+    () => scenicStore.stopCarData.dataLists,
+    (val) => {
+      console.log(val.length, 'dataListsdataListsdataLists')
+      if (val.length) {
+        dataLists.value = val
+      } else {
+        dataLists.value = []
+      }
+    },
+    { immediate: true }
+  )
 const homeStore = useHomeStore()
  let props = defineProps({
    scenicSpotId: {
@@ -162,17 +237,17 @@ import pubSub from 'pubsub-js'
  let src = ref('')
  let cameraIndexCode = ref('')
  let videoShow = ref(false)
-  window.addEventListener("message", async(e) => {
-    let {code,data} = await getPreviewUrlApi({
-      type: 'hls',
-      cameraIndexCode:e.data.cameraIndexCode
-    })
-    if(code===200){
-      src.value = data.url
-      cameraIndexCode.value = e.data.cameraIndexCode
-      videoShow.value = true
-    }
-  });
+  // window.addEventListener("message", async(e) => {
+  //   let {code,data} = await getPreviewUrlApi({
+  //     type: 'hls',
+  //     cameraIndexCode:e.data.cameraIndexCode
+  //   })
+  //   if(code===200){
+  //     src.value = data.url
+  //     cameraIndexCode.value = e.data.cameraIndexCode
+  //     videoShow.value = true
+  //   }
+  // });
  let dialogTableVisible = ref(false)
  let gridData = ref([])
  let gridTitle = ref('')
@@ -220,43 +295,63 @@ import pubSub from 'pubsub-js'
 </script>

 <style scoped lang="scss">
+	.border {
+	  position: relative;
+	  padding: 0 vw(10);
+	  box-sizing: border-box;
+	  background-image: url('@/assets/images/bg-3.png');
+	  background-size: 100% 100%;
+	  flex:1;
+	}
 	.coll-box{
 		flex:1 !important;
 	}
 	.box-1 .rt-lable{
+		justify-content: center !important;
+		text-align: center;
 		.label{
-			font-size:vw(14) !important;
+			font-size: font-vw(20) !important; /* 22×1.2 */
 		}
 		.value{
-			font-size:vw(24) !important;
+			font-size: font-vw(24) !important; /* 32×1.2 */
 		}
 	}
  .box-1 {
    margin-top: vh(120);
-    width: vw(780);
+    min-width: vw(900);
 	// flex:1;
-    height: vh(950);
+    // height: vh(950);
    padding: vw(10);
    box-sizing: border-box;
    background-image: url('@/assets/images/bg-3.png');
    background-size: 100% 100%;
+	overflow: hidden;
+	// height: 100%;
+	.border {
+	  height:vh(612) !important;
+	}
+	.new-circle{
+		height:vh(340);
+	}
    .header {
-      display: flex;
-      margin-top: vh(10);
+      // display: flex;
+      padding: vh(20);
+	  height:vh(240);
+	  overflow: hidden;
      &__left {
        display: flex;
        align-items: center;
 		margin-right:vw(10);
 		cursor:pointer;
        > img {
-          width: vw(74);
-          height: auto;
+          // width: vw(150);
+          height: vh(100);
        }
      }
      &__left-item {
        position: relative;
-        width: vw(115);
-        height: vh(58);
+        width: vw(210);
+        height: vh(120);
        padding-left: vw(10);
        display: flex;
        flex-direction: column;
@@ -266,9 +361,9 @@ import pubSub from 'pubsub-js'
 		// margin-left:vw(30);
        .label {
          position: absolute;
-          top: vh(-4);
+          top: vh(-10);
          font-weight: 400;
-          font-size: vw(14);
+          font-size: font-vw(16);
          color: #ffffff;
 		  left:vw(0)
        }
@@ -279,12 +374,12 @@ import pubSub from 'pubsub-js'
        justify-content: space-between;
        .label {
          font-weight: 400;
-          font-size: vw(16);
+          font-size: font-vw(18); /* 16×1.2 */
          color: #ffffff;
        }
        .value {
          font-weight: bold;
-          font-size: vw(28);
+          font-size: font-vw(24); /* 28×1.2 */
          color: #02f9fa;
          text-align: center;
          line-height: vh(60);
@@ -299,13 +394,13 @@ import pubSub from 'pubsub-js'

      .countup-wrap {
        color: #02f9fa;
-        font-size: vw(28);
+        font-size: font-vw(28); /* 36×1.2 */
        font-weight: bold;
      }
    }
    .main {
      width: 100%;
-      height: vh(600);
+      height: vh(720);
      overflow-x: auto;
      overflow-y: hidden;
 	  position:relative;
@@ -320,7 +415,7 @@ import pubSub from 'pubsub-js'
 		  align-items: center;
 		  background: #0a4190;
 		  border-radius: vw(4);
-		  font-size: vw(16);
+		  font-size: font-vw(20); /* 22×1.2 */
 		  font-weight:700;
 		  color: #fff;
 		  z-index: 999;
@@ -354,18 +449,18 @@ import pubSub from 'pubsub-js'
    .footer {
      .item {
        flex: 1;
-        height: vh(140);
+        height: vh(280);
        display: flex;
        align-items: center;
        background-image: url('@/assets/images/bg-3.png');
-        background-size: 100% 100%;
+        background-size: cover;
        &:nth-child(1) {
-          margin-right: vw(10);
+          // margin-right: vw(10);
        }
        .bg {
          padding-left: vw(20);
          //width: vw(243);
-          height: vh(40);
+          height: vh(80);
          display: flex;
          align-items: center;
          background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);
@@ -373,14 +468,14 @@ import pubSub from 'pubsub-js'
            margin-bottom: vh(4);
          }
          .label {
-            width: vw(120);
+            // width: vw(120);
            font-weight: 400;
-            font-size: vw(14);
+            font-size: font-vw(24); /* 20×1.2 */
            color: #fff;
          }
          .value {
            font-weight: bold;
-            font-size: vw(28);
+            font-size: font-vw(38.4); /* 32×1.2 */
            color: #fff;
          }
          .success {
@@ -392,8 +487,8 @@ import pubSub from 'pubsub-js'
        }
      }
      .list {
-        margin-top: vh(4);
-        height: vh(116);
+        margin-top: vh(10);
+        height: vh(400);
        overflow: hidden;
      }
      .cell {
@@ -404,14 +499,15 @@ import pubSub from 'pubsub-js'
          margin-bottom: 0;
        }
        .tag {
-          padding: 0 vw(16);
+          padding:vw(16);
          font-weight: bold;
-          font-size: vw(14);
+          font-size: font-vw(18); /* 14×1.2 */
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: vw(2);
+		  min-width:vw(60);
        }
        .tag--important {
          @extend .tag;
@@ -426,16 +522,17 @@ import pubSub from 'pubsub-js'
          background: #2380fb;
        }
        .content {
-          margin-left: vw(4);
-          padding: 0 vw(10);
-          width: vw(760);
-          height: vh(24);
-          line-height: vh(24);
+          margin-left: vw(10);
+          padding:vw(15);
+          min-width: vw(840);
+		  // width:100%;
+          // height: vh(24);
+          // line-height: vh(24);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: 400;
-          font-size: vw(14);
+          font-size: font-vw(18); /* 14×1.2 */
          color: #ffffff;
          border-radius: vw(2);
          background: rgba(0, 150, 255, 0.28);
@@ -443,8 +540,8 @@ import pubSub from 'pubsub-js'
      }
      .more {
        cursor: pointer;
-        width: auto;
-        height: vh(100);
+        width: vw(40);
+        // height: vh(100);
        margin-top: vh(12);
      }
    }
@@ -453,7 +550,7 @@ import pubSub from 'pubsub-js'
 <style lang="scss" scoped>
 	:deep(.el-dialog__headerbtn .el-dialog__close){
 		color:#fff;
-		font-size:40px;
+		font-size:48px; /* 40×1.2 */
 		position:relative;
 		top:15px;
 		right:15px;
@@ -469,6 +566,7 @@ import pubSub from 'pubsub-js'
  :deep(.el-dialog__title) {
    color: #fff;
    font-weight: bold;
+    font-size: font-vw(28.8); /* 24×1.2 - 补充默认弹窗标题字体放大 */
  }

  .sp-ico {
@@ -495,7 +593,7 @@ import pubSub from 'pubsub-js'

  }
  .header-title{
-  		  font-size:vw(32);
+  		  font-size: font-vw(38.4); /* 32×1.2 */
  		  color:#fff;
  		  text-align:center;
  		  font-weight:bold;
@@ -513,7 +611,7 @@ import pubSub from 'pubsub-js'
      .header {
        height: vh(28);
        font-weight: 400;
-        font-size: vw(24);
+        font-size: font-vw(28.8); /* 24×1.2 */
        color: #fff;
        display: flex;
        background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
@@ -543,7 +641,7 @@ import pubSub from 'pubsub-js'
        .item {
          height: vh(50);
          font-weight: 400;
-          font-size: vw(24);
+          font-size: font-vw(28.8); /* 24×1.2 */
          color: #f1f7ff;
          display: flex;
          &:nth-child(2n + 1) {
@@ -569,7 +667,7 @@ import pubSub from 'pubsub-js'
      span {
        margin-left: vw(30);
        font-weight: 800;
-        font-size: vw(15);
+        font-size: font-vw(18); /* 15×1.2 */
        line-height: vh(26);
        text-align: center;
        font-style: normal;
@@ -587,7 +685,7 @@ import pubSub from 'pubsub-js'
    height: vh(500);
    .icon-box {
      font-weight: 400;
-      font-size: vw(14);
+      font-size: font-vw(16.8); /* 14×1.2 */
      color: #ffffff;
      line-height: vh(16);
      flex-wrap: wrap;
@@ -614,7 +712,7 @@ import pubSub from 'pubsub-js'
      text-align: center;
      line-height: vh(26);
      margin-left: vw(32.5);
-      font-size: vw(16);
+      font-size: font-vw(19.2); /* 16×1.2 */
      font-weight: 800;
      color: #fff;
      background-image: url('@/assets/images/title-1.png');
--- a/src/views/scenic/components/box-2.vue
+++ b/src/views/scenic/components/box-2.vue
@@ -31,24 +31,26 @@
            <Title3 title="景区排队人数" />
          </div>
          <Line
-            :width="490"
-            :height="300"
+            width="100%"
+            :height="145"
            :data="scenicQueueData"
            :xAxisData="scenicQueueXAxisData"
          />
        </div>
      </div>
-      <div class="box mr-8">
+      <div class="box box-9 mr-8">
        <Title1 title="景区承载" />
-        <div class="flex">
+		<div
+		style="cursor: pointer;"
+		class="count-box flex justify-between">
         <circle-progress
-            :width="200"
-            :height="70"
+            :width="70"
+            :height="35"
            :value="scenicStore.scenicBearData.header.jqRate"
            :title="`${scenicStore.scenicBearData.header.jqRate}%`"
            subTitle="景区承载率"
          />
-          <div class="flex flex-1 justify-between">
+          <div class="flex flex-1 justify-center" style="text-align: center;">
            <count-item
              label="景区当前在园人数"
              :count="scenicStore.scenicBearData.header.jrjdrs"
@@ -66,28 +68,28 @@
            <Title3 title="今日景区承载量" />
          </div>
          <Line
-            :width="490"
-            :height="300"
+            width="100%"
+            :height="145"
            :data="scenicBearData"
            :xAxisData="scenicBearXAxisData"
          />
        </div>
      </div>
-      <div class="box-1 mr-8" style="padding: 0;">
+      <div class="box-1 mr-8" v-if="false" style="padding: 0;">
        <Title1 title="停车信息" />
-        <div class="flex">
-          <div class="height70 flex flex-1">
+        <div class="">
+          <div class=" flex flex-1">
            <circle-progress
              v-for="(item, index) in garageList"
              :key="index"
-              :width="140"
-              :height="70"
+              :width="80"
+              :height="50"
              :value="parseFloat(item.rate)"
              :title="item.occupied"
              :subTitle="`${item.name}`"
            />
          </div>
-          <div class="ml-20 flex flex-1 justify-between">
+          <div class="ml-20 mb-10 flex flex-1 justify-between">
            <count-item label="总停车场" :count="scenicStore.stopCarData.info.count" suffix="个" />
            <count-item
              label="剩余车位数"
@@ -101,7 +103,7 @@
            <div class="pt-10">
              <Title3 title="今日景区车流量" />
            </div>
-            <Line :width="360" :height="300" :data="carBearData" :xAxisData="carBearXAxisData" />
+            <Line width="100%" :height="105" :data="carBearData" :xAxisData="carBearXAxisData" />
          </div>
          <div class="border flex-1">
            <div class="pt-10">
@@ -111,8 +113,8 @@
              label="今日停车累计"
              :dataList="dataLists"
              :total="carTotal"
-              :width="360"
-              :height="300"
+              width="100%"
+              :height="110"
            />
          </div>
        </div>
@@ -136,16 +138,16 @@
          </div>
          <PieRow
            label="告警总数"
-            :dataList="scenicStore.secureData.dataList"
+            :dataList="scenicStore?.secureData.dataList"
            :total="alarmTotal"
-            :width="440"
-            :height="300"
+            width="100%"
+            :height="145"
          />
        </div>
      </div>
    </div>
-    <div class="flex mt-8">
-      <div class="box-3 mr-8">
+    <div class="flex mt-8" >
+      <div class="box-3 mr-8" >
        <div class="look-box">
          <Title1 title="交通信息" />
          <div @click="hanldeLookMap" class="look-btn">查看详情</div>
@@ -166,8 +168,8 @@
          <div class="border mr-8">
            <Title3 title="拥堵次数占比" />
            <jam
-              :width="220"
-              :height="300"
+              width="100%"
+              :height="200"
              sub-title="拥堵频次总数"
              :list="scenicStore.trafficData.data.countRate"
 			  :text="'暂无拥堵'"
@@ -177,8 +179,8 @@
            <Title3 title="拥堵时长占比" />
            <jam
 			 :text="'暂无拥堵'"
-              :width="220"
-              :height="300"
+              width="100%"
+              :height="200"
              sub-title="拥堵总时长(分钟)"
              :list="scenicStore.trafficData.data.timeRate"
            />
@@ -188,7 +190,7 @@

      <div class="box-4 mr-8">
        <Title1 title="用户画像" />
-        <div class="flex">
+        <div class="flex" style="height: 90%;">
          <div class="border mr-8 flex-1">
            <Title3 title="年龄/性别占比" />
            <age :list="scenicStore.userPortraitData.data.ageRate" />
@@ -220,16 +222,16 @@
            <Title3 title="客源地分析TOP5" />
            <RegionTop
              :list="scenicStore.userPortraitData.data.provinceRate"
-              :width="250"
-              :height="366"
+              width="100%"
+              :height="220"
            />
          </div>
          <div class="border flex-1">
            <Title3 title="购票来源" />
            <TicketSource
              :list="scenicStore.userPortraitData.data.channel"
-              :width="240"
-              :height="330"
+              width="100%"
+              :height="200"
            />
          </div>
        </div>
@@ -563,7 +565,7 @@
  .box-1 {
    // margin-top: vh(120);
    width: vw(900);
-    height: vh(950);
+    // height: vh(950);
    padding: vw(10);
    box-sizing: border-box;
    background-image: url('@/assets/images/bg-3.png');
@@ -596,7 +598,7 @@
          position: absolute;
          top: vh(-4);
          font-weight: 400;
-          font-size: vw(14);
+          font-size: vw(16.8); /* 14×1.2 */
          color: #ffffff;
 		  left:vw(0)
        }
@@ -607,12 +609,12 @@
        justify-content: space-between;
        .label {
          font-weight: 400;
-          font-size: vw(16);
+          font-size: vw(19.2); /* 16×1.2 */
          color: #ffffff;
        }
        .value {
          font-weight: bold;
-          font-size: vw(28);
+          font-size: vw(33.6); /* 28×1.2 */
          color: #02f9fa;
          text-align: center;
          line-height: vh(60);
@@ -627,7 +629,7 @@

      .countup-wrap {
        color: #02f9fa;
-        font-size: vw(28);
+        font-size: vw(33.6); /* 28×1.2 */
        font-weight: bold;
      }
    }
@@ -648,7 +650,7 @@
 		  align-items: center;
 		  background: #0a4190;
 		  border-radius: vw(4);
-		  font-size: vw(16);
+		  font-size: font-vw(18); /* 16×1.2 */
 		  font-weight:700;
 		  color: #fff;
 		  z-index: 999;
@@ -703,12 +705,12 @@
          .label {
            width: vw(120);
            font-weight: 400;
-            font-size: vw(14);
+            font-size: vw(16.8); /* 14×1.2 */
            color: #fff;
          }
          .value {
            font-weight: bold;
-            font-size: vw(28);
+            font-size: vw(33.6); /* 28×1.2 */
            color: #fff;
          }
          .success {
@@ -734,7 +736,7 @@
        .tag {
          padding: 0 vw(16);
          font-weight: bold;
-          font-size: vw(14);
+          font-size: vw(16.8); /* 14×1.2 */
          color: #fff;
          display: flex;
          align-items: center;
@@ -763,7 +765,7 @@
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: 400;
-          font-size: vw(14);
+          font-size: vw(16.8); /* 14×1.2 */
          color: #ffffff;
          border-radius: vw(2);
          background: rgba(0, 150, 255, 0.28);
@@ -781,7 +783,7 @@
 <style lang="scss" scoped>
 	:deep(.el-dialog__headerbtn .el-dialog__close){
 		color:#fff;
-		font-size:40px;
+		font-size:48px; /* 40×1.2 */
 		position:relative;
 		top:15px;
 		right:15px;
@@ -797,6 +799,7 @@
  :deep(.el-dialog__title) {
    color: #fff;
    font-weight: bold;
+    font-size: vw(38.4); /* 32×1.2 */
  }

  .sp-ico {
@@ -823,7 +826,7 @@

  }
  .header-title{
-  		  font-size:vw(32);
+  		  font-size:vw(38.4); /* 32×1.2 */
  		  color:#fff;
  		  text-align:center;
  		  font-weight:bold;
@@ -841,7 +844,7 @@
      .header {
        height: vh(28);
        font-weight: 400;
-        font-size: vw(24);
+        font-size: vw(28.8); /* 24×1.2 */
        color: #fff;
        display: flex;
        background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
@@ -871,7 +874,7 @@
        .item {
          height: vh(50);
          font-weight: 400;
-          font-size: vw(24);
+          font-size: vw(28.8); /* 24×1.2 */
          color: #f1f7ff;
          display: flex;
          &:nth-child(2n + 1) {
@@ -897,7 +900,7 @@
      span {
        margin-left: vw(30);
        font-weight: 800;
-        font-size: vw(15);
+        font-size: vw(18); /* 15×1.2 */
        line-height: vh(26);
        text-align: center;
        font-style: normal;
@@ -915,7 +918,7 @@
    height: vh(500);
    .icon-box {
      font-weight: 400;
-      font-size: vw(14);
+      font-size: vw(16.8); /* 14×1.2 */
      color: #ffffff;
      line-height: vh(16);
      flex-wrap: wrap;
@@ -942,7 +945,7 @@
      text-align: center;
      line-height: vh(26);
      margin-left: vw(32.5);
-      font-size: vw(16);
+      font-size: vw(19.2); /* 16×1.2 */
      font-weight: 800;
      color: #fff;
      background-image: url('@/assets/images/title-1.png');
@@ -958,7 +961,7 @@
    align-items: center;
    color: #fff;
    text-align: center;
-    font-size: vw(20);
+    font-size: vw(24); 
    justify-content: center;
  }
  .look-box {
@@ -974,7 +977,7 @@
      align-items: center;
      background: #0a4190;
      border-radius: vw(4);
-      font-size: vw(14);
+      font-size: font-vw(18); 
      color: #fff;
    }
  }
@@ -1042,20 +1045,21 @@
    }
    &-item-label {
      font-weight: 400;
-      font-size: vw(12);
+      font-size: vw(14.4); 
      line-height: vh(14);
    }
    &-item-value {
      font-weight: bold;
-      font-size: vw(16);
+      font-size: vw(19.2); 
      line-height: vh(18);
    }
  }
  .container {
    margin: vh(120) 0 0 vw(10);
+	flex:1;
    .count-box {
      padding: 0 vw(10);
-      height: vh(70);
+      height: vh(140);
    }
    .bg {
      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
@@ -1070,39 +1074,51 @@
    }
    .box {
      @extend .bg;
-      width: vw(510);
-      height: vh(475);
+      // width: vw(650);
+      height: vh(880);
+	  min-width: vw(800);
+	  flex:1;
+    }
+	.box-9{
+		// width: vw(750);
 	}
    .box-1 {
      @extend .bg;
-      height: vh(475);
+	  	  
+      // height: vh(475);
    }
    .box-2 {
      @extend .bg;
-      height: vh(475);
+      height: vh(880);
+	  flex:1;
    }
    .box-3 {
      @extend .bg;
-      height: vh(465);
+	  flex:1;
+	  // width: vw(750);
+      // height: vh(465);
    }
    .box-4 {
      @extend .bg;
-      height: vh(465);
+	  flex:1;
+      // height: vh(465);
    }
    .box-5 {
+		// width: vw(750);
      @extend .bg;
-      height: vh(465);
+      // height: vh(465);
+	  height:100%;
 	  flex:1;
    }
    .car-box {
-      width: vw(316);
-      height: vh(74);
+      // width: vw(316);
+      height: vh(120);
      display: flex;
      align-items: center;
      .icon {
        position: absolute;
-        width: vw(350);
-        height: vw(74);
+        // width: vw(350);
+        height: vw(100);
      }
      .car-item {
        flex: 1;
@@ -1115,25 +1131,25 @@
      }
      .label {
        font-weight: 400;
-        font-size: vw(14);
+        font-size: vw(24); /* 20×1.2 */
        color: #fff;
      }
      .value {
        font-weight: bold;
-        font-size: vw(24);
+        font-size: vw(33.6); /* 28×1.2 */
        color: #02f9fa;
-        margin-top: vh(6);
+        margin-top: vh(10);
        align-items: flex-end;
      }
      .suffix {
-        font-size: vw(12);
+        font-size: vw(14.4); /* 12×1.2 */
        color: #02f9fa;
        margin-bottom: vw(4);
      }
    }
    .sum {
      font-weight: bold;
-      font-size: vw(18);
+      font-size: vw(26.4); /* 22×1.2 */
      color: #02f9fa;
      display: flex;
      align-items: center;
@@ -1141,7 +1157,7 @@
    .car-ship {
      // width: vw(660);
 	  width: 100%;
-      height: vh(250);
+      height: vh(780);
    }
    .full {
      cursor: pointer;
@@ -1155,7 +1171,7 @@
      margin: vw(20) vw(20) 0 vw(20);
      height: vh(24);
      font-weight: bold;
-      font-size: vw(14);
+      font-size: vw(16.8); /* 14×1.2 */
      color: #ffffff;
      display: flex;
      align-items: center;
@@ -1183,7 +1199,7 @@
      }
      .text {
        font-weight: 400;
-        font-size: vw(14);
+        font-size: vw(16.8); /* 14×1.2 */
        color: rgba(255, 255, 255, 0.9);
      }
      .progress {
@@ -1192,13 +1208,13 @@
      }
      .man {
        font-weight: bold;
-        font-size: vw(14);
+        font-size: vw(16.8); /* 14×1.2 */
        color: #02f9fa;
        margin-left: vw(10);
      }
      .woman {
        font-weight: bold;
-        font-size: vw(14);
+        font-size: vw(16.8); /* 14×1.2 */
        color: #f15a25;
        margin-left: vw(10);
      }
@@ -1218,7 +1234,7 @@
        & > span {
          padding-left: vw(22);
          font-weight: bold;
-          font-size: vw(15);
+          font-size: vw(18); /* 15×1.2 */
          background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
          -webkit-background-clip: text;
          background-clip: text;
@@ -1246,12 +1262,12 @@
      .label {
        padding-left: vw(10);
        font-weight: 400;
-        font-size: vw(14);
+        font-size: vw(16.8); /* 14×1.2 */
        color: rgba(255, 255, 255, 0.9);
      }
      .countup-wrap {
        color: #02f9fa;
-        font-size: vw(28);
+        font-size: vw(33.6); /* 28×1.2 */
        font-weight: bold;
      }
    }
--- a/src/views/scenic/components/jam.vue
+++ b/src/views/scenic/components/jam.vue
@@ -104,11 +104,11 @@
            rich: {
              name: {
                color: '#fff',
-                fontSize: fitChartSize(14)
+                fontSize: fitChartSize(18)
              },
              value: {
                color: '#00D5F6',
-                fontSize: fitChartSize(14)
+                fontSize: fitChartSize(18)
              }
            }
          }
@@ -136,7 +136,7 @@
                },
                name: {
                  color: '#fff',
-                  fontSize: fitChartSize(12)
+                  fontSize: fitChartSize(14)
                }
              }
            },
@@ -163,7 +163,7 @@
 		top:0;
 		width: 100%;
 		height: 100%;
-		font-size:vw(18);
+		font-size:vw(22);
 		// color:#999;
 		color:#02f9fa;
 		display: flex;
--- a/src/views/scenic/components/traffic-flow.vue
+++ b/src/views/scenic/components/traffic-flow.vue
@@ -77,14 +77,14 @@
            }
          },
          axisLabel: {
-            fontSize: fitChartSize(12),
+            fontSize: fitChartSize(14),
            color: 'rgba(255,255,255,0.9)'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
-            fontSize: fitChartSize(12),
+            fontSize: fitChartSize(14),
            color: 'rgba(255,255,255,0.9)'
          },
          splitLine: {
@@ -99,12 +99,12 @@
          {
            type: 'bar',
            showBackground: true,
-            barWidth: fitChartSize(16),
+            barWidth: fitChartSize(18),
            label: {
              show: true,
              position: 'top',
              color: '#fff',
-              fontSize: fitChartSize(10)
+              fontSize: fitChartSize(14)
            },
            itemStyle: {
              color: {
@@ -158,6 +158,6 @@
 	}
  .traffic-flow {
    width: vw(260);
-    height: vh(300);
+    height: vh(855);
  }
 </style>
--- a/src/views/scenic/index.vue
+++ b/src/views/scenic/index.vue
@@ -74,9 +74,11 @@
            scenicStore.setScenicBearData(val)
            break
          case 'stopCarData':
+		  console.log('soket 车辆归属地数据',val)
            scenicStore.setStopCarData(val)
            break
          case 'secureData':
+		  // console.log(val,'检查soket信息')
            scenicStore.setSecureData(val)
            break
          case 'trafficInformation':
--- a/src/views/sentiment/components/area.vue
+++ b/src/views/sentiment/components/area.vue
@@ -73,7 +73,7 @@
    right: vw(10);
  }
  .area {
-    width: vw(840);
-    height: vh(400);
+    width: 100%;
+    height:80%;
  }
 </style>
--- a/src/views/sentiment/components/dataSource.vue
+++ b/src/views/sentiment/components/dataSource.vue
@@ -53,9 +53,9 @@
    .header {
      display: flex;
      font-weight: 400;
-      font-size: vw(13);
+      font-size: font-vw(24);
      color: #0084ff;
-      height: vh(40);
+      height: vh(80);
      display: flex;
      align-items: center;
      background: rgba(3, 78, 153, 0.3);
@@ -66,7 +66,7 @@
    }
    .list {
      overflow-y: auto;
-      height: vh(370);
+      height: vh(800);
      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        width: vw(4); /* 滚动条的宽度 */
@@ -85,7 +85,7 @@
      //   background: #555; /* 滑块的背景色 */
      // }
      .cell {
-        height: vh(40);
+        height: vh(80);
        display: flex;
        align-items: center;
        &:nth-child(2n) {
@@ -99,10 +99,11 @@
        }
        .index {
          display: inline-block;
-          width: vw(40);
-          height: vh(24);
+          // width: vw(50);
+          // height: vh(30);
+		  padding:vw(15);
          font-weight: 400;
-          font-size: vw(12);
+          font-size: font-vw(20);
          color: #ffffff;
          display: flex;
          align-items: center;
@@ -124,17 +125,18 @@
        }
        .name {
          font-weight: 400;
-          font-size: vw(15);
+          font-size: font-vw(22);
          color: #ffffff;
        }
        .number {
          font-weight: 400;
-          font-size: vw(15);
+          font-size: font-vw(22);
          color: #02f9fa;
        }
        .status {
+			
          font-weight: 400;
-          font-size: vw(15);
+          font-size: font-vw(22);
          color: #e21b1b;
        }
      }
--- a/src/views/sentiment/components/wordCloud.vue
+++ b/src/views/sentiment/components/wordCloud.vue
@@ -56,7 +56,7 @@

 <style scoped lang="scss">
  .wordCloud {
-    width: vw(760);
-    height: vh(410);
+    width: 100%;
+    height: 80%;
  }
 </style>
--- a/src/views/sentiment/index.vue
+++ b/src/views/sentiment/index.vue
@@ -20,7 +20,7 @@
          </div>
        </div>
      </div>
-      <div class="box-2 mr-8" :class="homeStore.amplify?'':'coll-box'">
+      <div class="box-2 mr-8" style="flex:1;" :class="homeStore.amplify?'':'coll-box'">
        <div class="flex justify-center">
          <div class="top flex justify-evenly">
            <count-item label="今日舆情总数" :count="total" suffix="条" color="#ffffff" />
@@ -31,7 +31,7 @@
        <div class="flex mt-20 gap-8 ml-8 mr-8">
          <div v-for="(item, index) in stateList" :key="index" class="border flex-1">
            <Title3 :title="item.name" />
-            <pie-row :width="490" :height="330" :dataList="item.data" :total="item.total" />
+            <pie-row :width="150" :height="200" :dataList="item.data" :total="item.total" />
          </div>
        </div>
      </div>
@@ -41,7 +41,7 @@
      </div>
    </div>
    <div class="flex mt-8">
-      <div class="box-2 mr-8 rela" :class="homeStore.amplify?'':'coll-box'">
+      <div class="box-2 mr-8 rela" style="width: 33%;" :class="homeStore.amplify?'':'coll-box'">
        <Title1 title="舆情指数" />
        <div class="select-box">
          <Select
@@ -53,8 +53,8 @@
        </div>
 		<div class="coll-box-3">
 			<Line
-			  :width="1500"
-			  :height="400"
+			  width="100%"
+			  :height="220"
 			  :data="seriesData"
 			  :xAxisData="xAxisData"
 			  :seriesConfig="{ smooth: false, symbol: 'circle' }"
@@ -62,11 +62,11 @@
 		</div>
      
      </div>
-      <div class="box-4 mr-8 rela">
+      <div class="box-4 mr-8 rela" style="width: 33%;" >
        <Title1 title="地域分析" />
-        <Area />
+        <Area   width="100%" />
      </div>
-      <div class="box-3">
+      <div class="box-3" style="width: 33%;" >
        <Title1 title="词频分析" />
        <word-cloud />
      </div>
@@ -249,7 +249,7 @@
 .link {
  color: #1890ff;
  text-decoration: none;
-  // font-size:vw(14);
+  // font-size: font-vw(14);
 }

 .title {
@@ -332,7 +332,7 @@

  }
  .header-title{
-  		  font-size:vw(32);
+  		  font-size: font-vw(32);
  		  color:#fff;
  		  text-align:center;
  		  font-weight:bold;
@@ -350,7 +350,7 @@
      .header {
        height: vh(28);
        font-weight: 400;
-        font-size: vw(24);
+        font-size: font-vw(24);
        color: #fff;
        display: flex;
        background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
@@ -363,8 +363,9 @@
      }
      .list {
        overflow-y: auto;
-        height: vh(490);
+        height: vh(520);
        /* 滚动条整体样式 */
+		// height:100%;
        &::-webkit-scrollbar {
          width: vw(4); /* 滚动条的宽度 */
        }
@@ -380,7 +381,7 @@
        .item {
          height: vh(50);
          font-weight: 400;
-          font-size: vw(24);
+          font-size: font-vw(20);
          color: #f1f7ff;
          display: flex;
          &:nth-child(2n + 1) {
@@ -406,7 +407,7 @@
      span {
        margin-left: vw(30);
        font-weight: 800;
-        font-size: vw(15);
+        font-size: font-vw(22);
        line-height: vh(26);
        text-align: center;
        font-style: normal;
@@ -424,7 +425,7 @@
    height: vh(500);
    .icon-box {
      font-weight: 400;
-      font-size: vw(14);
+      font-size: font-vw(24);
      color: #ffffff;
      line-height: vh(16);
      flex-wrap: wrap;
@@ -451,7 +452,7 @@
      text-align: center;
      line-height: vh(26);
      margin-left: vw(32.5);
-      font-size: vw(16);
+      font-size: font-vw(16);
      font-weight: 800;
      color: #fff;
      background-image: url('@/assets/images/title-1.png');
@@ -477,33 +478,35 @@
      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
    }
    .top {
-      width: vw(600);
-      height: vh(50);
+      width: vw(800);
+      height: vh(150);
      margin-top: vh(35);
+	  font-size: font-vw(22);
    }
    .box-1 {
-      width: vw(790);
-      height: vh(470);
+      width: vw(1000);
+      // height: vh(470);
      @extend .bg;
    }
    .box-2 {
-      width: vw(1514);
-      height: vh(470);
+      // width: vw(1720);
+	  // min-width: vw(1440);
+      // height: vh(470);
      @extend .bg;
    }
    .box-3 {
      width: vw(810);
-      height: vh(470);
+      // height: vh(470);
      @extend .bg;
    }
    .box-4{
      width: vw(850);
-      height: vh(470);
+      // height: vh(470);
      @extend .bg;
    }
    .box-5{
-      width: vw(870);
-      height: vh(470);
+      width: vw(1200);
+      // height: vh(470);
      @extend .bg;
    }
    .border {
@@ -513,7 +516,7 @@
    .list {
      margin: 0 vw(20);
      overflow-y: auto;
-      height: vh(400);
+      height: vh(850);
      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        width: vw(4); /* 滚动条的宽度 */
@@ -530,20 +533,21 @@
      .item {
        display: flex;
        align-items: center;
-        height: vh(40);
+        height: vh(90);
        &:nth-child(2n + 1) {
          background: rgba(3, 78, 153, 0.3);
        }
        .status {
-          width: vw(40);
-          height: vh(20);
-          line-height: vh(20);
+          // width: vw(60);
+          // height: vh(40);
+          line-height: vh(40);
          text-align: center;
          margin: 0 vw(20);
          font-weight: 400;
-          font-size: vw(12);
+          font-size: font-vw(20);
          color: #ffffff;
          border-radius: vw(2);
+		  padding:vw(15);
          &-error {
            @extend .status;
            background: #d9011b;
@@ -561,16 +565,17 @@
        .content {
          flex: 1;
          font-weight: 400;
-          font-size: vw(15);
+          font-size: font-vw(22);
          color: #ffffff;
          white-space: nowrap; /* 保证文本在一行内显示 */
          overflow: hidden; /* 隐藏溢出的内容 */
          text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
+		  margin-top:0;
        }
        .date {
          margin: 0 vw(20);
          font-weight: 400;
-          font-size: vw(12);
+          font-size: font-vw(18);
          color: rgba(255, 255, 255, 0.7);
        }
      }
--- a/src/views/traffic/components/box-1.vue
+++ b/src/views/traffic/components/box-1.vue
@@ -32,8 +32,9 @@
      </div> -->
    </div>
    <div class="chart">
-      <div class="chart-item">
+      <div class="chart-item" >
        <Title3 title="拥堵频次占比" />
+		
        <div class="chart__inner">
          <div>
            <spotRate
@@ -41,8 +42,9 @@
              :total="chartData.totalNum"
              label="拥堵频次总数"
            />
-            <ul class="chart__legend">
+            <ul class="chart__legend flex" style="flex-wrap: wrap;">
              <li
+			 
                class="chart__legend-item"
                v-for="(item, index) in chartData.roadNum"
                :key="index"
@@ -65,6 +67,7 @@
 		   <div class="new-ul">
 			  <ul class="chart__legend">
 			    <li
+				
 			      class="chart__legend-item"
 			      v-for="(item, index) in chartData.typeNum"
 			      :key="index"
@@ -88,8 +91,9 @@
              :total="chartData.totalTime"
              label="拥堵总时长"
            />
-            <ul class="chart__legend">
+            <ul class="chart__legend flex" style="flex-wrap: wrap;">
              <li
+			
                class="chart__legend-item"
                v-for="(item, index) in chartData.roadTime"
                :key="index"
@@ -116,6 +120,7 @@
 			<div class="new-ul">
 				<ul class="chart__legend">
 				  <li
+				
 				    class="chart__legend-item"
 				    v-for="(item, index) in chartData.typeTime"
 				    :key="index"
@@ -179,45 +184,66 @@
 <style lang="scss" scoped>
 	.new-vehicle{
 		padding-top:vh(20);
+		width:100%;
 	}
 	.new-ul{
-		padding:0 vw(30);
+		padding:0 0;
 		margin-top:vh(20);
 	}
  .box-1 {
    margin-top: vh(120);
-    width: vw(626);
-    height: vh(950);
+    width: vw(800);
+    // height: vh(950);
+	// height: 100%;
    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);

    .chart {
      display: flex;
      flex-wrap: wrap;
-      gap: vw(8);
+      gap: vw(4);
      padding: 0 vw(8);
-
-      &-item {
-        width: vw(300);
+	  height:100%;
+	  overflow: auto;
+	  padding-bottom: vh(150);
 	  background-image: url('@/assets/images/bg-3.png');
 	  background-size: 100% 100%;
+	  &::-webkit-scrollbar {
+	    width: vw(0); /* 滚动条的宽度 */
+	  }
+      &-item {
+		  // display: flex;
+		  // align-items: center;
+		  width:100%;
+		  flex-wrap: wrap;
+		  justify-content: center;
+		  position: relative;
+		  // top:vh(-10);
+		  // height:20%;
+		  overflow: hidden;
+        // width: vw(300);
+        // background-image: url('@/assets/images/bg-3.png');
+        // background-size: 100% 100%;
      }

      &__inner {
+		  width:100%;
        display: flex;
        justify-content: center;
-        height: vh(380);
+        // height: vh(380);

      }

      &__legend {
        flex: 1;
+		display: flex;
+		flex-wrap: wrap;
        &-item {
          position: relative;
-          width: 100%;
-          height: vh(30);
+          width: 50%;
+          height: vh(50);
          display: flex;
          align-items: center;
-          margin-bottom: vh(8);
+          margin-bottom: vh(15);
          background: linear-gradient(90deg, rgba(0, 150, 255, 0.34) 0%, rgba(0, 150, 255, 0) 100%);

          &::before {
@@ -236,15 +262,15 @@

          .name {
            font-weight: 400;
-            font-size: vw(14);
+            font-size: font-vw(20);
            color: #ffffff;
-            width: vw(110);
+            // width: vw(110);
          }

          .value {
            // padding-right: vw(20);
            font-weight: bold;
-            font-size: vw(15);
+            font-size: font-vw(20);
            color: #ffffff;
          }
        }
@@ -261,7 +287,7 @@
        .item-t {
          display: flex;
          font-weight: 400;
-          font-size: vw(14);
+          font-size: font-vw(14);
          color: #fff;
          text-align: left;
          margin-bottom: vh(20);
@@ -277,7 +303,7 @@
          background-image: url('@/assets/images/t-box-title-bg-1.png');
          background-size: 100% 100%;
          font-weight: bold;
-          font-size: vw(24);
+          font-size: font-vw(24);
          color: #02f9fa;
          text-align: left;
          font-style: normal;
--- a/src/views/traffic/components/box-2.vue
+++ b/src/views/traffic/components/box-2.vue
@@ -191,7 +191,8 @@
  const getPreviewUrl = async (code) => {
    let res = await getPreviewUrlApi({
      cameraIndexCode: code,
-      type: 'hls'
+      type: 'hls',
+      subStream:0
    })
    src.value = res.data.url
    videoShow.value = true
@@ -234,6 +235,7 @@
 	.flex-1{
 		flex:1;
 		overflow:hidden;
+		height: 100%;
 	}
 	.title-1 {
 	  position: relative;
@@ -241,8 +243,8 @@
 	  .title {
 	    margin: vh(10) auto;
 		margin-top:0;
-	    width: vw(1500);
-	    height: vh(32);
+	    width: vw(1100);
+	    height: vh(62);
 	    display: flex;
 	    align-items: center;
 	    justify-content: center;
@@ -250,7 +252,7 @@
 	    background-size: 100% 100%;
 	    & > span {
 	      font-weight: 800;
-	      font-size: vw(24);
+	      font-size: font-vw(24);
 	      background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
 	      -webkit-background-clip: text;
 	      background-clip: text;
@@ -265,8 +267,9 @@
 	flex:1;
  }
  .nav {
-    width: vw(230);
-    height: vh(950);
+    width: vw(330);
+    // height: vh(950);
+	height:100%;
    margin-left: vw(8);
    padding-left: vw(5);
    overflow: auto;
@@ -279,10 +282,10 @@
    &-item {
      cursor: pointer;
      margin-bottom: vw(15);
-      width: vw(220);
-      height: vh(54);
+      width: 100%;
+      height: vh(100);
      font-weight: bold;
-      font-size: vw(18);
+      font-size: font-vw(20);
      color: #ffffff;
      display: flex;
      align-items: center;
@@ -302,6 +305,7 @@
    // width: vw(2116);
 	width:100%;
    height: vh(890);
+	height: 100%;
    margin-left: vw(8);
    box-sizing: border-box;
    background-image: url('/src/assets/images/map-bg-2.png');
@@ -334,7 +338,7 @@
      height: vh(60);
      font-family: Inter, Inter;
      font-weight: 400;
-      font-size: vw(12);
+      font-size: font-vw(12);
      color: #ffffff;
      line-height: vh(14);
      text-align: left;
@@ -343,8 +347,8 @@
    }
  }
  .list {
-    width: vw(806);
-    height: vh(952);
+    width: vw(1000);
+    height: 100%;
    margin-left: vw(8);
    overflow: auto;
    &::-webkit-scrollbar {
@@ -371,7 +375,7 @@
      }
      &-left__title {
        margin-right: vw(20);
-        font-size: vw(28);
+        font-size: font-vw(28);
        font-weight: bold;
        color: transparent;
        -webkit-background-clip: text;
@@ -384,7 +388,7 @@
        width: vw(120);
        height: vw(72);
        font-weight: 600;
-        font-size: vw(15);
+        font-size: font-vw(15);
        color: #ffffff;
        padding-left: vw(42);
        display: flex;
@@ -399,7 +403,7 @@
        width: vw(120);
        height: vw(72);
        font-weight: 600;
-        font-size: vw(15);
+        font-size: font-vw(15);
        color: #ffffff;
        padding-left: vw(42);
        display: flex;
@@ -409,9 +413,9 @@
      }
      &-status {
        min-width: vw(150);
-        height: vw(54);
+        height: vw(64);
        font-weight: 600;
-        font-size: vw(14);
+        font-size: font-vw(22);
        color: #fff;
        display: flex;
        align-items: center;
@@ -425,7 +429,7 @@
    .chart-item {
      padding: vw(1);
      margin-top: vh(10);
-      height: vh(293);
+      height: vh(500);
      background-image: url('@/assets/images/bg-3.png');
      background-size: 100% 100%;

@@ -447,7 +451,7 @@
          position: absolute;
          bottom: vh(4);
          left: vw(20);
-          font-size: vw(15);
+          font-size: font-vw(15);
          font-weight: bold;
          background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%);
          -webkit-background-clip: text;
@@ -461,7 +465,7 @@
    }

    .statistics {
-      height: vh(90);
+      height: vh(190);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
@@ -470,15 +474,15 @@

      &-item__label {
        font-weight: 400;
-        font-size: vw(14);
+        font-size: font-vw(22);
        color: #fff;
-        margin-bottom: vh(10);
+        margin-bottom: vh(30);
      }
      &-item__value {
        padding-left: vw(15);
-        height: vh(30);
+        height: vh(90);
        font-weight: bold;
-        font-size: vw(24);
+        font-size: font-vw(28);
        color: #02f9fa;
        background-image: url('@/assets/images/t-box-title-bg-1.png');
        background-size: 100% 100%;
@@ -487,7 +491,7 @@
        .item-t {
          display: flex;
          font-weight: 400;
-          font-size: vw(14);
+          font-size: font-vw(14);
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: vh(20);
          img {
@@ -503,7 +507,7 @@
          background-image: url('@/assets/images/t-box-title-bg-1.png');
          background-size: 100% 100%;
          font-weight: bold;
-          font-size: vw(24);
+          font-size: font-vw(24);
          color: #02f9fa;
          text-align: left;
          font-style: normal;
--- a/src/views/traffic/components/spotRate.vue
+++ b/src/views/traffic/components/spotRate.vue
@@ -59,13 +59,13 @@
          rich: {
            value: {
              color: '#fff',
-              fontSize: fitChartSize(20),
+              fontSize: fitChartSize(24),
              fontWeight: 'bold',
              padding: [0, 0, 5, 0]
            },
            name: {
              color: '#fff',
-              fontSize: fitChartSize(12)
+              fontSize: fitChartSize(16)
            }
          }
        },
@@ -124,7 +124,8 @@
 		justify-content: center;
 	}
  .spotRate {
-    width: vw(200);
-    height: vh(200);
+    width: vw(340);
+    height: vh(340);
+	margin:0 auto;
  }
 </style>
--- a/src/views/traffic/components/traffic-jam.vue
+++ b/src/views/traffic/components/traffic-jam.vue
@@ -61,7 +61,7 @@
            }
          },
          axisLabel: {
-            fontSize: fitChartSize(12),
+            fontSize: fitChartSize(20),
            color: 'rgba(255,255,255,0.9)'
          },
          data: getXAxisData()
@@ -70,7 +70,7 @@
          type: 'value',
          axisLabel: {
            show: false,
-            fontSize: fitChartSize(12),
+            fontSize: fitChartSize(20),
            color: 'rgba(255,255,255,0.9)'
          },
          splitLine: {
@@ -90,7 +90,7 @@
              show: true,
              position: 'top',
              color: '#fff',
-              fontSize: fitChartSize(12),
+              fontSize: fitChartSize(20),
              formatter: (res) => {
                let valueMap = {
                  1: '畅通',
@@ -125,7 +125,8 @@

 <style scoped lang="scss">
  .traffic-jam {
-    width: vw(800);
-    height: vh(250);
+    width: 100%;
+    height: vh(430);
+	margin-top:vh(30);
  }
 </style>
--- a/src/views/traffic/components/vehicle-source.vue
+++ b/src/views/traffic/components/vehicle-source.vue
@@ -60,14 +60,14 @@
            }
          },
          axisLabel: {
-            fontSize: fitChartSize(12),
+            fontSize: fitChartSize(20),
            color: 'rgba(255,255,255,0.9)'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
-            fontSize: fitChartSize(12),
+            fontSize: fitChartSize(20),
            color: 'rgba(255,255,255,0.9)'
          },
          splitLine: {
@@ -88,7 +88,7 @@
              show: true,
              position: 'top',
              color: '#fff',
-              fontSize: fitChartSize(10)
+              fontSize: fitChartSize(20)
            },
            itemStyle: {
              borderRadius: [0, 0, 0, 0],
@@ -124,7 +124,7 @@

 <style scoped lang="scss">
  .vehicle-source {
-    width:vw(310);
-    height: vh(160);
+    width:100%;
+    height: vh(350);
  }
 </style>
--- a/src/views/vehicles/components/big-map.vue
+++ b/src/views/vehicles/components/big-map.vue
@@ -21,6 +21,7 @@
            clearable
            placeholder="车牌号"
 			@input="onInput"
+			style="height:50px;margin:10px 0;"
          >
          </el-input>
          <ul class="tabs">
@@ -504,7 +505,7 @@ import PubSub from 'pubsub-js'
 		  .item {
 		    height: vh(50);
 		    font-weight: 400;
-		    font-size: vw(14);
+		    font-size: font-vw(20);
 		    color: #f1f7ff;
 		    display: flex;
 		    &:nth-child(2n + 1) {
@@ -542,12 +543,12 @@ import PubSub from 'pubsub-js'
 			justify-content: center;
 			.t-item{
 				// margin:0 vw(10);
-				font-size:vw(18);
+				font-size: font-vw(24);
 				color:#fff;
-				padding:vh(5) 0;
+				padding:vh(30) 0;
 				background: url('@/assets/images/title-2.png') no-repeat center 100%;
 				background-size:100% 100%;
-				padding:vw(10) vw(35);
+				padding:vw(30) vw(50);
 			}
 			.tabs-active{
 				// color:#409eff;
@@ -616,7 +617,7 @@ import PubSub from 'pubsub-js'
      height: vh(36);
      padding-left: vw(16);
      font-weight: 600;
-      font-size: vw(16);
+      font-size: font-vw(16);
      color: #ffffff;
      display: flex;
      align-items: center;
@@ -624,20 +625,20 @@ import PubSub from 'pubsub-js'
      background-size: 100% 100%;
    }
    &-header {
-      padding: vh(12) vw(14);
+      padding: vh(12) vw(20);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &-sim {
      font-weight: 600;
-      font-size: vw(16);
+      font-size: font-vw(16);
      color: #ffffff;
    }
    &-tag {
      padding: vh(5) vw(8);
      font-weight: 400;
-      font-size: vw(13);
+      font-size: font-vw(13);
      color: #0096ff;
      display: flex;
      align-items: center;
@@ -669,7 +670,7 @@ import PubSub from 'pubsub-js'
      > p {
        flex: 1;
        font-weight: 400;
-        font-size: vw(24);
+        font-size: font-vw(24);
        color: #ffffff;
        line-height: vh(20);
      }
@@ -678,12 +679,13 @@ import PubSub from 'pubsub-js'
 </style>
 <style scoped lang="scss">
  :deep(.el-input__inner) {
-    height: vh(32);
+    height: vh(42);
    color: #fff;
+	font-size: font-vw(22);
  }
  :deep(.el-input__wrapper) {
    margin-top: vh(8);
-    font-size: vw(16);
+    font-size: font-vw(16);
    border-radius: vw(2);
    border: vw(1) solid #0096ff;
    box-shadow: none !important;
@@ -696,9 +698,9 @@ import PubSub from 'pubsub-js'
      cursor: pointer;
      position: relative;
      flex: 1;
-      height: vh(44);
+      height: vh(88);
      font-weight: 600;
-      font-size: vw(14);
+      font-size: font-vw(22);
      color: #fff;
      display: flex;
      align-items: center;
@@ -725,11 +727,12 @@ import PubSub from 'pubsub-js'

  .dialog {
 	  width: vw(3170);
+	  width:100%;
 	  padding: vw(8);
 	  background-image: url('@/assets/images/dialog-bg.png') !important;
 	  background-size: 100% 100%;
 	  margin: 0 auto;
-	  height:vh(930);
+	  // height:vh(930);
 	  margin-top:vh(130);
    :deep(.el-dialog) {
      width: vw(3170);
@@ -742,14 +745,15 @@ import PubSub from 'pubsub-js'
    }
  }
  .list-box {
-    margin-right: vw(10);
+    margin-right: vw(20);
    background-image: url('@/assets/images/bg-3.png');
    background-size: 100% 100%;
+	width:vw(1200);
  }
  .list {
    // width: vw(400);
-    height: vh(790);
-    padding-top: vh(10);
+    height: vh(1820);
+    padding-top: vh(20);
    overflow-y: auto;
    box-sizing: border-box;
 	justify-content: center;
@@ -775,8 +779,8 @@ import PubSub from 'pubsub-js'
    .item {
      cursor: pointer;
      font-weight: 400;
-      font-size: vw(14);
-      height: vh(30);
+      font-size: font-vw(22);
+      height: vh(90);
      padding: 0 vw(20);
      color: #0096ff;
      display: flex;
@@ -816,7 +820,7 @@ import PubSub from 'pubsub-js'
  }
  .big-car-ship {
    flex: 1;
-    height: vh(910);
+    height: vh(2010);
  }
  .close {
    cursor: pointer;
--- a/src/views/workOrder/components/box-1.vue
+++ b/src/views/workOrder/components/box-1.vue
@@ -27,8 +27,8 @@

 <style lang="scss" scoped>
  .work-box-1 {
-    width: vw(815);
-    height: vh(950);
+    width: vw(1000);
+    height:100%;
    margin-top: vh(120);
    box-sizing: border-box;
    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
@@ -49,6 +49,7 @@
        border-radius: 5px; /* 滑块的圆角 */
      }
      height: vh(895);
+	  height:100%;
      overflow: auto;
      .li:nth-child(odd) {
        background: rgba(3, 78, 153, 0.3);
@@ -62,15 +63,16 @@
        justify-content: flex-start;
        padding: vh(8) vh(10);
        .label {
-          width: vw(60);
-          height: vh(24);
+          // width: vw(60);
+          // height: vh(24);
          line-height: vh(24);
          color: #fff;
          border-radius: vw(2);
-          font-size: vw(14);
+          font-size: font-vw(20);
          text-align: center;
          display: inline-block;
          margin-right: vw(10);
+		  padding:vw(15);
        }
        .normal {
          @extend .label;
@@ -86,9 +88,9 @@
        }
        .time {
          font-weight: 400;
-          font-size: vw(12);
+          font-size: font-vw(20);
          color: rgba(255, 255, 255, 0.6);
-          line-height: 14px;
+          // line-height: 14px;
          text-align: left;
          font-style: normal;
          text-transform: none;
@@ -96,7 +98,7 @@
        }
        p {
          font-weight: 400;
-          font-size: vw(15);
+          font-size: font-vw(22);
          color: #ffffff;
          text-align: left;
          font-style: normal;
--- a/src/views/workOrder/components/box-2.vue
+++ b/src/views/workOrder/components/box-2.vue
@@ -5,7 +5,7 @@
        <Title1 title="今日工单" />
      </div>
      <div class="hd-list">
-        <img class="h-icon" src="@/assets/images/work-icon-1.png" />
+        <!-- <img class="h-icon" src="@/assets/images/work-icon-1.png" /> -->
        <div class="item item1">
          今日工单总条数 <span class="color1"><countup :end-val="totalData.total" /></span>
        </div>
@@ -23,9 +23,10 @@
        </div>
      </div>
      <div class="chart">
-        <div class="chart__wrapper mr-8">
+        <div class="chart__wrapper">
          <Title3 title="工单总数" />
-          <Line :width="680" :height="320" :data="seriesData" :xAxisData="xAxisData" />
+		  <div style="margin-top:10px;"></div>
+          <Line width="100%" :height="90" :data="seriesData" :xAxisData="xAxisData" />
        </div>
        <div class="chart__wrapper">
          <Title3 title="工单类型完成比例" />
@@ -67,9 +68,9 @@
        </div>
      </div>
    </div>
-    <div class="box-2 mt-8">
-      <Title1 title="不同景区工单占比" />
-      <div class="chart">
+    <div class="box-2">
+      <Title1 title="景区工单占比" />
+      <div class="chart" style="padding-top: 0;">
        <div class="chart__wrapper">
          <Title3 title="景区工单占比" />
          <div class="chart__inner">
@@ -94,24 +95,24 @@
                <p class="value">{{ item.value }}%</p>
              </li>
            </ul>
-            <div v-if="pointRankData.length > 0" class="alarm">
-              <Title2 title="异常点位告警排名" />
-              <ul class="alarm__wrapper">
-                <li class="alarm-item" v-for="(item, index) in pointRankData" :key="index">
-                  <p
-                    class="alarm-item__rank"
-                    :class="{
-                      'alarm-item__rank--error': index == 0,
-                      'alarm-item__rank--warning': index == 1,
-                      'alarm-item__rank--primary': index == 2
-                    }"
-                  >
-                    {{ index + 1 }}
-                  </p>
-                  <p class="alarm-item__content">{{ item.link_title }}</p>
-                </li>
-              </ul>
-            </div>
+<!--            <div v-if="pointRankData.length > 0" class="alarm">-->
+<!--              <Title2 title="异常点位告警排名" />-->
+<!--              <ul class="alarm__wrapper">-->
+<!--                <li class="alarm-item" v-for="(item, index) in pointRankData" :key="index">-->
+<!--                  <p-->
+<!--                    class="alarm-item__rank"-->
+<!--                    :class="{-->
+<!--                      'alarm-item__rank&#45;&#45;error': index == 0,-->
+<!--                      'alarm-item__rank&#45;&#45;warning': index == 1,-->
+<!--                      'alarm-item__rank&#45;&#45;primary': index == 2-->
+<!--                    }"-->
+<!--                  >-->
+<!--                    {{ index + 1 }}-->
+<!--                  </p>-->
+<!--                  <p class="alarm-item__content">{{ item.link_title }}</p>-->
+<!--                </li>-->
+<!--              </ul>-->
+<!--            </div>-->
          </div>
        </div>
      </div>
@@ -195,7 +196,7 @@
    border-radius: 0;
  }
  :deep(.el-progress__text) {
-    font-size: vw(14) !important;
+    font-size: font-vw(20) !important;
    color: #fff;
  }

@@ -213,7 +214,7 @@
        margin-left: vw(5);
        display: inline-block;
        font-weight: 400;
-        font-size: vw(13);
+        font-size: font-vw(20);
        color: #0084ff;
        text-align: center;
        font-style: normal;
@@ -230,25 +231,25 @@
  .work-box-2 {
    margin-top: vh(120);
    margin-left: vw(8);
-
+	flex:1;
    .box-1 {
      padding: vw(1) 0;
      box-sizing: border-box;
      background: linear-gradient(to bottom, #0b2f64 0%, #062b57 100%);
      .chart {
-        display: flex;
+        // display: flex;
        justify-content: space-between;
        padding: vw(20) vw(15);

        &__wrapper {
-          width: vw(740);
-          height: vh(370);
+          // width: vw(740);
+          height: vh(400);
          padding: 0 vw(20);
          background-image: url('@/assets/images/bg-3.png');
          background-size: 100% 100%;
          .progress {
            padding: vw(30);
-            padding-top: vh(40);
+            padding-top: vh(50);
            &-item {
              display: flex;
              width: 100%;
@@ -257,7 +258,7 @@
            }
            &-item__label {
              font-weight: bold;
-              font-size: vw(14);
+              font-size: font-vw(22);
              color: #ffffff;
              text-align: left;
              font-style: normal;
@@ -279,27 +280,27 @@
          left: vw(70);
          top: 50%;
          transform: translateY(-50%);
-          width: vw(74);
+          width: vw(94);
          height: auto;
        }
        .item {
          display: flex;
-          width: vw(210);
-          height: vh(58);
-          line-height: vh(58);
+          min-width: vw(250);
+          height: vh(78);
+          line-height: vh(78);
          padding-left: vw(10);
          text-align: center;
          margin: 0 vw(15);
          font-weight: 400;
-          font-size: vw(14);
+          font-size: font-vw(22);
          color: rgba(255, 255, 255, 0.9);
          text-align: left;
          font-style: normal;
          text-transform: none;
          span {
-            font-size: vw(24);
+            font-size: font-vw(28);
            position: relative;
-            top: vh(2);
+            top: vh(0);
            margin-left: vw(5);
          }
          .color1 {
@@ -321,19 +322,19 @@
      }
    }
    .box-2 {
-      padding: vw(1);
-      height: vh(442);
+      // padding: vw(1);
+      // height: vh(442);
      box-sizing: border-box;
      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);

      .chart {
-        display: flex;
+        // display: flex;
        justify-content: space-between;
        padding: vw(20) vw(15);

        &__wrapper {
-          width: vw(740);
-          height: vh(370);
+          // width: vw(740);
+          // height: vh(370);
          padding: 0 vw(20);
          background-image: url('@/assets/images/bg-3.png');
          background-size: 100% 100%;
@@ -342,15 +343,17 @@
        &__inner {
          display: flex;
          align-items: center;
+		  justify-content: center;
        }

        &__legend {
-          flex: 1;
-
+          // flex: 1;
+		  width: vw(800);
+			margin-left:vw(50);
          &-item {
            position: relative;
-            width: 100%;
-            height: vh(40);
+            width: 50%;
+            height: vh(60);
            display: flex;
            align-items: center;
            margin-bottom: vh(8);
@@ -364,26 +367,26 @@
              position: absolute;
              content: '';
              width: vw(4);
-              height: vh(40);
+              height: vh(60);
              background-color: #0096ff;
            }

            .dot {
-              width: vw(10);
-              height: vw(10);
+              width: vw(20);
+              height: vw(20);
              margin: 0 vw(16);
            }

            .name {
              font-weight: 400;
-              font-size: vw(12);
+              font-size: font-vw(22);
              color: #ffffff;
-              width: vw(130);
+              // width: vw(130);
            }

            .value {
              font-weight: bold;
-              font-size: vw(15);
+              font-size: font-vw(22);
              color: #ffffff;
            }
          }
@@ -391,11 +394,12 @@
      }

      .alarm {
-        width: vw(200);
+        width: vw(600);
        background: #0a4190;

        &__wrapper {
-          width: vw(200);
+          width: vw(400);
+		  width:100%;
          height: vh(270);
          background: #054581; /* 滚动条整体样式 */
          &::-webkit-scrollbar {
@@ -418,15 +422,15 @@
          &:nth-child(2n) {
            background: #054d8d;
          }
-          height: vh(40);
+          height: vh(60);
          display: flex;
          align-items: center;
        }

        &-item__rank {
-          width: vw(24);
-          height: vh(16);
-          font-size: vw(12);
+          width: vw(34);
+          height: vh(30);
+          font-size: font-vw(20);
          color: #ffffff;
          display: flex;
          align-items: center;
@@ -445,7 +449,7 @@
        &-item__content {
          padding-left: vw(20);
          font-weight: 400;
-          font-size: vw(14);
+          font-size: font-vw(20);
          color: #ffffff;
        }
      }
--- a/src/views/workOrder/components/box-3.vue
+++ b/src/views/workOrder/components/box-3.vue
@@ -44,15 +44,15 @@
          </div>
        </div>
      </div>
-      <div class="chart-box">
-        <pie
-          v-for="(item, index) in newsStateList"
-          :key="index"
-          :value="item.value"
-          :label="item.name"
-          :width="150"
-          :height="150"
-        />
+      <div class="chart-box" style="justify-content: center;align-items: center;">
+        <newsRate :dataList="newsStateList" />
+        <ul class="chart__legend">
+          <li class="chart__legend-item" v-for="(item, index) in newsStateList" :key="index">
+            <p class="dot" :style="{ background: colors[index] }" />
+            <p class="name">{{ item.name }}</p>
+            <p class="value">{{ item.value }}</p>
+          </li>
+        </ul>
      </div>
    </div>
    <div class="work-box-1">
@@ -79,7 +79,8 @@
  import countup from 'vue-countup-v3'
  import pie from './pie.vue'
  import { getNewsListApi, getNewsStateApi, getNewsTotalApi } from '@/api/news'
-
+  import NewsRate from "@/views/workOrder/components/newsRate.vue";
+  const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
  let list = ref([])
  let countInfo = ref({
    important: 0,
@@ -109,20 +110,84 @@
 </script>

 <style lang="scss" scoped>
+.chart {
+  display: flex;
+  justify-content: space-between;
+  padding: vw(20) vw(15);
+
+  &__wrapper {
+    width: vw(740);
+    height: vh(370);
+    padding: 0 vw(20);
+    background-image: url('@/assets/images/bg-3.png');
+    background-size: 100% 100%;
+  }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+  }
+
+  &__legend {
+    flex: 1;
+
+    &-item {
+      position: relative;
+      width: 100%;
+      height: vh(40);
+      display: flex;
+      align-items: center;
+      margin-bottom: vh(8);
+      background: linear-gradient(
+              90deg,
+              rgba(0, 150, 255, 0.34) 0%,
+              rgba(0, 150, 255, 0) 100%
+      );
+
+      &::before {
+        position: absolute;
+        content: '';
+        width: vw(4);
+        height: vh(40);
+        background-color: #0096ff;
+      }
+
+      .dot {
+        width: vw(10);
+        height: vw(10);
+        margin: 0 vw(16);
+      }
+
+      .name {
+        font-weight: 400;
+        font-size: font-vw(18);
+        color: #ffffff;
+        width: vw(130);
+      }
+
+      .value {
+        font-weight: bold;
+        font-size: font-vw(20);
+        color: #ffffff;
+      }
+    }
+  }
+}
  .work-box-3 {
-    width: vw(840);
+    width: vw(1000);
    margin-top: vh(120);
    margin-left: vw(8);

    .work-box-1 {
      padding: 0 vw(20);
-      height: vh(566);
+      // height: vh(566);
      display: flex;
      flex-direction: column;
      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);

      .list {
-        height: vh(500);
+        height: vh(1600);
+		// height:100%;
        overflow: auto;
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
@@ -147,33 +212,43 @@
          display: flex;
          align-items: center;
          justify-content: flex-start;
-          padding: vh(8) vh(10);
+          padding: vh(20) vh(10);
          .label {
            width: vw(60);
-            height: vh(24);
-            line-height: vh(24);
+            height: vh(34);
+            line-height: vh(34);
            color: #fff;
            border-radius: 2px 2px 2px 2px;
-            font-size: vw(14);
+            font-size: font-vw(20);
            text-align: center;
            display: inline-block;
            margin-right: vw(10);
          }
          .label--primary {
            @extend .label;
+			width:initial;
+			height:initial;
+			padding:vw(15);
            background: #2380fb;
          }
          .label--warning {
            @extend .label;
-            background: #feae00;
+			width:initial;
+			height:initial;
+			padding:vw(15);
+            background: #d9011b;
          }
          .label--error {
+			  width:initial;
+			  height:initial;
            @extend .label;
-            background: #d9011b;
+			padding:vw(15);
+            
+			background: #feae00;
          }
          .time {
            font-weight: 400;
-            font-size: vw(12);
+            font-size: font-vw(18);
            color: rgba(255, 255, 255, 0.6);
            line-height: 14px;
            text-align: left;
@@ -183,7 +258,7 @@
          }
          p {
            font-weight: 400;
-            font-size: vw(15);
+            font-size: font-vw(20);
            color: #ffffff;
            text-align: left;
            font-style: normal;
@@ -202,8 +277,8 @@
    .work-2-flex {
      display: flex;
      flex-direction: column;
-      height: vh(380);
-      margin-bottom: vw(8);
+      // height: vh(380);
+      margin-bottom: vw(20);
      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);

      .chart-box {
@@ -219,7 +294,7 @@
        justify-content: space-around;
        &-item {
          font-weight: 400;
-          font-size: vw(14);
+          font-size: font-vw(20);
        }
        &-item__icon {
          width: vw(24);
@@ -227,7 +302,7 @@
        }
        &-item__label {
          color: #fff;
-          font-size: vw(14);
+          font-size: font-vw(20);
        }
        &-item__value {
          position: relative;
@@ -237,11 +312,12 @@
          display: flex;
          align-items: center;
          font-weight: bold;
-          font-size: vw(28);
+          font-size: font-vw(28);
          color: #fff;
          &--primary {
            @extend .statistics-item__value;
            color: #02f9fa;
+
            background-image: url('@/assets/images/mask-primary.png');
            background-size: 100% 100%;
          }
@@ -262,7 +338,7 @@
          }
        }
        &-item__value-suffix {
-          font-size: vw(12);
+          font-size: font-vw(12);
          margin-top: vh(6);
        }
      }
--- a/src/views/workOrder/components/newsRate.vue
+++ b/src/views/workOrder/components/newsRate.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="alarmRate" :id="id" />
+</template>
+
+<script setup>
+  import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const props = defineProps({
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    dataList: {
+      type: Array,
+      default: () => []
+    },
+    total: {
+      type: Number,
+      default: () => 0
+    },
+    colors: {
+      type: Array,
+      default: () => ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
+    }
+  })
+
+  const { id, chart, setOption } = useEchart()
+
+  let params = null
+
+  let defaultCofig = {
+    color: [],
+    legend: {
+      orient: 'vertical',
+      y: 'center',
+      left: '50%',
+      itemWidth: fitChartSize(12),
+      itemHeight: fitChartSize(12),
+      itemGap: fitChartSize(6),
+      formatter: (name) => {
+        let obj = props.dataList.find((item) => item.name == name)
+        let total = getTotal();
+        if(total==0){
+          return `{name|${name}} {value|0}{value|%}`
+        }else{
+          let value = ((obj?.value/total).toFixed(4)*100).toFixed(2);
+          return `{name|${name}} {value|${value}}{value|%}`
+        }
+
+      },
+      textStyle: {
+        rich: {
+          name: {
+            color: '#fff',
+            fontSize: fitChartSize(18)
+          },
+          value: {
+            color: '#fff',
+            fontSize: fitChartSize(18)
+          }
+        }
+      }
+    },
+    series: [
+      {
+        type: 'pie',
+        center: ['24%', '50%'],
+        radius: ['35%', '50%'],
+        itemStyle: {
+          borderWidth: fitChartSize(4),
+          borderColor: '#093672'
+        },
+        label: {
+          show: true,
+          position: 'center',
+          fontWeight: 'bold',
+          rich: {
+            value: {
+              color: '#fff',
+              fontSize: fitChartSize(18),
+              fontWeight: 'bold',
+              padding: [0, 0, 5, 0]
+            },
+            name: {
+              color: '#fff',
+              fontSize: fitChartSize(18)
+            }
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: []
+      }
+    ]
+  }
+
+  let getTotal = () => {
+    return props.dataList.reduce((per, cur) => {
+      return per + cur.value
+    }, 0)
+  }
+
+  watch(
+    () => props.dataList,
+    () => {
+      if (props.dataList.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    { immediate: true }
+  )
+
+  const init = () => {
+    if (!params) {
+      defaultCofig.color = props.colors
+      defaultCofig.series[0].data = props.dataList
+      defaultCofig.series[0].label.formatter = () => {
+        return `{value|${getTotal()}}` + '\n' + `{name|消息总数}`
+      }
+      params = {
+        ...defaultCofig,
+        ...props.config
+      }
+    } else {
+      params.series[0].data = props.dataList
+      params.series[0].label.formatter = () => {
+        return `{value|${getTotal()}}` + '\n' + `{name|消息总数}`
+      }
+    }
+    const changeChart = setOption(params)
+    changeChart.off('legendselectchanged');
+    changeChart.on('legendselectchanged', function (e) {
+      var echartsArr = [];
+      for (let key in e.selected) {
+        if (e.selected[key]) {
+          echartsArr.push(key)
+        }
+      }
+      var echartsNum = 0;
+      props.dataList.forEach(item => {
+        if(echartsArr.includes(item.name)){
+          echartsNum += parseFloat(item.value)
+        }
+      })
+      params.series[0].label.formatter = () => {
+        return `{value|${echartsNum}}` + '\n' + `{name|告警总数}`
+      }
+      setOption(params)
+    });
+  }
+</script>
+
+<style scoped lang="scss">
+  .alarmRate {
+    width: vw(440);
+    height: vh(300);
+  }
+
+</style>
--- a/src/views/workOrder/components/pie.vue
+++ b/src/views/workOrder/components/pie.vue
@@ -52,7 +52,7 @@
            top: '56%',
            textStyle: {
              color: '#fff',
-              fontSize: fitChartSize(12)
+              fontSize: fitChartSize(20)
            }
          }
        ],
@@ -175,7 +175,7 @@

 <style lang="scss" scoped>
  .pie {
-    width: vw(200);
-    height: vh(200);
+    width: vw(250);
+    height: vh(250);
  }
 </style>
--- a/src/views/workOrder/components/spotRate.vue
+++ b/src/views/workOrder/components/spotRate.vue
@@ -35,11 +35,35 @@

  var defaultCofig = {
  color: [],
+    legend: {
+      orient: 'vertical',
+      y: 'center',
+      left: '50%',
+      itemWidth: fitChartSize(18),
+      itemHeight: fitChartSize(18),
+      itemGap: fitChartSize(6),
+      formatter: (name) => {
+        let obj = props.dataList.find((item) => item.name == name)
+        return `{name|${name}} {value|${obj?.value}}{value|%}`
+      },
+      textStyle: {
+        rich: {
+          name: {
+            color: '#fff',
+            fontSize: fitChartSize(18)
+          },
+          value: {
+            color: '#fff',
+            fontSize: fitChartSize(18)
+          }
+        }
+      }
+    },
    series: [
      {
        type: 'pie',
-        center: ['50%', '50%'],
-        radius: ['70%', '90%'],
+        center: ['24%', '50%'],
+        radius: ['35%', '50%'],
        itemStyle: {
          borderWidth: fitChartSize(4),
          borderColor: '#093672'
@@ -51,13 +75,13 @@
          rich: {
            value: {
              color: '#fff',
-              fontSize: fitChartSize(24),
+              fontSize: fitChartSize(20),
              fontWeight: 'bold',
              padding: [0, 0, 5, 0]
            },
            name: {
              color: '#fff',
-              fontSize: fitChartSize(12)
+              fontSize: fitChartSize(22)
            }
          }
        },
@@ -92,7 +116,7 @@

 <style scoped lang="scss">
  .spotRate {
-    width: vw(240);
-    height: vh(320);
+    width: vw(640);
+    height: vh(400);
  }
 </style>
Author	SHA1	Message	Date
lixuefeng	1651188051	类型：开发描述：	2026-04-27 16:58:11 +08:00
lixuefeng	224fa546bf	类型：开发描述：	2026-02-09 12:20:57 +08:00
lixuefeng	7eaa48e2cb	类型：开发描述：	2026-02-09 10:28:57 +08:00
lixuefeng	e21e9999c7	类型：开发描述：	2026-02-03 23:50:29 +08:00
lixuefeng	bc827e1cc8	类型：开发描述：	2026-02-03 23:38:44 +08:00
lixuefeng	5301a74ec9	类型：开发描述：	2026-02-03 10:29:49 +08:00
duanliang	c0012f5305	fix bug修改	2026-01-28 18:54:27 +08:00
lixuefeng	d10e504db9	类型：开发描述：	2026-01-28 18:50:45 +08:00
lixuefeng	01586539db	类型：开发描述：	2026-01-28 18:42:42 +08:00
duanliang	970795110d	fix bug修复	2026-01-28 12:02:22 +08:00
duanliang	bc401377a4	fix 优化	2026-01-28 09:54:41 +08:00
duanliang	dc70c68ad5	fix bug 修改	2026-01-27 11:11:15 +08:00
duanliang	ee5e891425	fix bug修改	2026-01-27 10:24:53 +08:00
duanliang	4d81265f97	fix 样式优化	2026-01-25 19:05:28 +08:00
lixuefeng	e23a541799	类型：开发描述：	2026-01-23 00:57:16 +08:00
lixuefeng	7d9036ac2d	类型：开发描述：	2026-01-23 00:56:34 +08:00
lixuefeng	e4f42a7136	类型：开发描述：	2026-01-23 00:23:43 +08:00
lixuefeng	fab9537aad	类型：开发描述：	2026-01-21 01:01:48 +08:00
lixuefeng	bdd849f244	类型：开发描述：	2026-01-21 00:31:03 +08:00
lixuefeng	1ab7624913	类型：开发描述：	2026-01-21 00:30:10 +08:00
lixuefeng	d8ff29800a	类型：开发描述：	2026-01-21 00:28:34 +08:00
lixuefeng	421a842190	Merge remote-tracking branch 'origin/dlnew' into dlnew	2026-01-20 14:40:33 +08:00
duanliang	0523deed26	feat 今年游客总数弹窗	2026-01-20 12:50:41 +08:00
duanliang	9b28389836	feat 游客数弹窗	2026-01-19 15:36:27 +08:00
lixuefeng	3db25e2536	类型：开发描述：	2026-01-19 13:27:36 +08:00
duanliang	1e1d4e56cc	fix bug修改	2026-01-15 15:04:10 +08:00
duanliang	9705c0bb26	fix bug修改	2026-01-15 14:30:57 +08:00
lixuefeng	5d95c101ba	类型：开发描述：	2026-01-14 09:58:27 +08:00
lixuefeng	c5c7f6af44	类型：开发描述：	2026-01-14 01:29:32 +08:00
lixuefeng	80a448f9b9	类型：开发描述：	2026-01-14 01:11:54 +08:00
lixuefeng	3aea6f740b	类型：开发描述：	2026-01-14 00:58:18 +08:00
lixuefeng	ed5876c55b	类型：开发描述：	2026-01-14 00:51:15 +08:00
lixuefeng	4bf2d63aa4	类型：开发描述：	2026-01-14 00:28:40 +08:00
duanliang	0a45b06fd5	fix 优化	2026-01-13 19:24:37 +08:00
duanliang	79a9226fa0	fix 优化	2026-01-13 16:39:07 +08:00
duanliang	23f1998a34	fix 优化	2026-01-13 14:17:29 +08:00
duanliang	4b77459658	fix 优化	2026-01-13 11:05:05 +08:00
duanliang	c864132820	fix 优化	2026-01-06 14:33:52 +08:00
duanliang	586fe3f80d	fix 优化	2026-01-06 14:25:46 +08:00
duanliang	0ed5a3bab2	fix 优化	2026-01-04 11:21:25 +08:00
duanliang	d571dadf8c	fix 优化	2026-01-04 11:13:50 +08:00
duanliang	6533857dae	fix 1	2025-12-21 17:52:47 +08:00
lixuefeng	5fd201a41a	类型：开发描述：	2025-12-10 14:00:33 +08:00
duanliang	5cbb12f15d	feat 核心视频	2025-12-10 12:50:20 +08:00
lixuefeng	3c255f9623	类型：开发描述：	2025-12-10 11:53:45 +08:00
lixuefeng	69213dac03	类型：开发描述：	2025-12-09 17:58:30 +08:00
duanliang	e967ca0514	新版式	2025-11-27 22:17:26 +08:00
duanliang	b7f4cca716	新版式	2025-11-26 23:36:37 +08:00
duanliang	d05a0f645e	新版式	2025-11-26 23:25:22 +08:00
duanliang	2f34ab23a6	新版式	2025-11-25 22:23:38 +08:00
duanliang	974b307258	新版式	2025-11-25 01:07:20 +08:00
duanliang	7d28f8b0a4	新版式	2025-11-25 00:52:18 +08:00
duanliang	5c17235581	新版式	2025-11-24 23:17:46 +08:00