feat:完善功能

src/components/HlsPlayer/index.vue

@@ -4,14 +4,13 @@
       class="myVideo"
       ref="videoElement"
       muted
-      :style="videoStyle"
       playsinline
       :controls="false"
       disablePictureInPicture
     ></video>
-    <div v-if="loading" class="loading-overlay pointer-events-none">
+    <!-- <div v-if="loading" class="loading-overlay pointer-events-none">
       <div class="loading-text">{{ loadingText }}</div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -297,11 +296,10 @@
 
   .myVideo {
     width: 100%;
-    height: auto;
+    height: 100%;
     // aspect-ratio: 16/9;
     /* border: 1px solid #ccc; */
-    border-radius: vw(5);
+    // border-radius: vw(5);
-    background-color: #000;
   }
 
   .loading-overlay {

src/components/Select/index.vue

@@ -27,9 +27,12 @@
 <style scoped lang="scss">
   .select {
     :deep(.el-select__wrapper) {
-      width: vw(240);
+      min-width: vw(180);
-      padding: vh(10) vw(20);
+      padding: vh(4) vw(20);
-      border-radius: vw(54);
+      min-height: vh(30) !important;
+      line-height: vh(30) !important;
+      font-size: vw(14) !important;
+      border-radius: vw(100) !important;
       box-shadow: none;
       border: 1px solid rgba(0, 114, 220, 0.3);
       background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);

src/views/home/components/age.vue

@@ -30,11 +30,12 @@
 
   const init = () => {
     if (!params) {
+      let center = ['25%', '50%']
       params = {
         color: ['#00B1FF', '#00FFFF', '#FF3737', '#DD5627', '#D3F0FE'],
         legend: {
           orient: 'vertical',
-          left: '54%',
+          left: '48%',
           y: 'center',
           itemHeight: fitChartSize(8),
           itemWidth: fitChartSize(8),
@@ -61,8 +62,8 @@
             type: 'pie',
             clockwise: false,
             silent: true,
-            center: ['30%', '50%'],
+            center: center,
-            radius: ['50%', '60%'],
+            radius: ['44%', '54%'],
             itemStyle: {
               borderColor: 'transparent',
               borderRadius: fitChartSize(2),
@@ -79,7 +80,7 @@
             type: 'pie',
             clockwise: false,
             silent: true,
-            center: ['30%', '50%'],
+            center: center,
             radius: ['44%', '48%'],
             itemStyle: {
               borderColor: 'transparent',
@@ -97,7 +98,7 @@
             type: 'pie',
             clockwise: false,
             silent: true,
-            center: ['30%', '50%'],
+            center: center,
             radius: ['0', '40%'],
             itemStyle: {
               color: '#065EAD'
@@ -111,7 +112,7 @@
             type: 'pie',
             clockwise: false,
             silent: true,
-            center: ['30%', '50%'],
+            center: center,
             radius: ['0', '26%'],
             itemStyle: {
               color: '#0477D1'

src/views/home/components/box-1.vue

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

src/views/monitor/components/alarmRate.vue

@@ -133,6 +133,6 @@
 <style scoped lang="scss">
   .alarmRate {
     width: vw(380);
-    height: vh(200);
+    height: vh(180);
   }
 </style>

src/views/monitor/components/box-1.vue

@@ -97,7 +97,7 @@
           alt=""
         />
         <img
-          v-if="scenicSpotId == '三峡之巅'"
+          v-if="scenicSpotId == 'root00000000'"
           class="map-img"
           src="@/assets/images/sxzd.png"
           alt=""
@@ -322,10 +322,13 @@
   }
   .detection-top {
     width: 100%;
-    height: vh(580);
+    height: vh(560);
     overflow-x: auto;
     overflow-y: hidden;
-    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
     /* 滚动条整体样式 */
     &::-webkit-scrollbar {
       height: vh(10); /* 滚动条的宽度 */
@@ -348,7 +351,7 @@
     width: vw(405);
     margin-right: vw(8);
     &-statistics {
-      height: vh(70);
+      height: vh(90);
       display: flex;
       align-items: center;
       justify-content: space-evenly;
@@ -381,7 +384,7 @@
   .traffic-alarm {
     width: vw(405);
     &-statistics {
-      height: vh(70);
+      height: vh(90);
       display: flex;
       align-items: center;
       justify-content: space-evenly;

src/views/scenic/components/box-1.vue

@@ -15,13 +15,13 @@
       <div>
         <div v-for="(item, index) in scenicStore.scenicSpotData.infoList" :key="index">
           <div class="label">{{ item.name }}</div>
-          <p class="value" :class="{ error: item.type == 4 }">{{ item.value }}</p>
+          <p class="value" :class="{ error: [3, 4].includes(item.type) }">{{ item.value }}</p>
         </div>
       </div>
     </div>
     <div class="main">
       <img v-if="scenicSpotId == 'root000000'" src="@/assets/images/bdc.png" alt="" />
-      <img v-if="scenicSpotId == '三峡之巅'" src="@/assets/images/sxzd.png" alt="" />
+      <img v-if="scenicSpotId == 'root00000000'" src="@/assets/images/sxzd.png" alt="" />
       <img v-if="scenicSpotId == '龙桥河'" src="@/assets/images/lqh.jpg" alt="" />
       <!-- <div class="scenic-box" id="scenic-map"></div> -->
     </div>

src/views/sentiment/components/area.vue

@@ -69,7 +69,7 @@
   .select-box {
     position: absolute;
     z-index: 99;
-    top: vh(40);
+    top: vh(10);
     right: vw(10);
   }
   .area {

src/views/sentiment/index.vue

@@ -31,11 +31,11 @@
         <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="500" :height="330" :dataList="item.data" :total="item.total" />
+            <pie-row :width="490" :height="330" :dataList="item.data" :total="item.total" />
           </div>
         </div>
       </div>
-      <div class="box-3">
+      <div class="box-5">
         <Title1 title="数据来源分析" />
         <data-source />
       </div>
@@ -52,14 +52,14 @@
           />
         </div>
         <Line
-          :width="1560"
+          :width="1500"
           :height="400"
           :data="seriesData"
           :xAxisData="xAxisData"
           :seriesConfig="{ smooth: false, symbol: 'circle' }"
         />
       </div>
-      <div class="box-1 mr-8 rela">
+      <div class="box-4 mr-8 rela">
         <Title1 title="地域分析" />
         <Area />
       </div>
@@ -141,6 +141,7 @@
     }
     .top {
       width: vw(600);
+      height: vh(50);
       margin-top: vh(35);
     }
     .box-1 {
@@ -149,7 +150,7 @@
       @extend .bg;
     }
     .box-2 {
-      width: vw(1574);
+      width: vw(1514);
       height: vh(470);
       @extend .bg;
     }
@@ -158,6 +159,16 @@
       height: vh(470);
       @extend .bg;
     }
+    .box-4{
+      width: vw(850);
+      height: vh(470);
+      @extend .bg;
+    }
+    .box-5{
+      width: vw(870);
+      height: vh(470);
+      @extend .bg;
+    }
     .border {
       background-image: url('@/assets/images/bg-3.png');
       background-size: 100% 100%;