feat:完善景区数据

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

@@ -57,7 +57,7 @@
         </div>
       </div>
     </div>
-    <Title1 title="停车信息(调试中)" />
+    <Title1 title="停车信息" />
     <div class="stop-box">
       <div>
         <img class="icon" src="@/assets/images/icon-5.png" alt="" />

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

@@ -41,7 +41,7 @@
           <countup class="scenic-item__value" :end-val="scenicAiAnalyzeData.handled" />
         </div>
       </div>
-      <div class="flex pt-20">
+      <div class="flex pt-20 gap8">
         <div class="box">
           <Title3 title="异常告警" />
           <Line
@@ -66,20 +66,13 @@
           :key="index"
         >
           <span class="scenic-item__label">{{ item.name }}</span>
-          <!--          <countup class="scenic-item__value" :end-val="item.value" />-->
+          <countup class="scenic-item__value" :end-val="item.value" />
-          <span class="scenic-item__value"> {{ item.value }}</span>
         </div>
       </div>
       <div class="flex pt-20">
         <div class="box">
           <Title3 title="拥堵告警" />
-          <Line :width="370" :height="180" :data="jamlData" :xAxisData="jamXAxisData" />
+          <Line :width="760" :height="180" :data="jamlData" :xAxisData="jamXAxisData" />
-        </div>
-        <div class="box">
-          <Title3 title="拥堵告警占比" />
-          <div class="flex">
-            <alarmRate :dataList="trafficAbnormalityData.dataLists" />
-          </div>
         </div>
       </div>
     </template>
@@ -303,6 +296,9 @@
 </script>
 
 <style scoped lang="scss">
+  .gap8 {
+    gap: vw(8);
+  }
   .none {
     width: vw(380);
     height: vh(200);
@@ -565,31 +561,29 @@
     }
 
     .box {
-      width: vw(394);
+      flex: 1;
       height: vh(220);
       background-image: url('@/assets/images/bg-3.png');
       background-size: 100% 100%;
-      &:nth-child(1) {
+
-        margin-right: vw(10);
+      // .title-2 {
-      }
+      //   width: vw(253);
-      .title-2 {
+      //   height: vh(28);
-        width: vw(253);
+      //   display: flex;
-        height: vh(28);
+      //   align-items: center;
-        display: flex;
+      //   background-image: url('@/assets/images/title-5.png');
-        align-items: center;
+      //   background-size: 100% 100%;
-        background-image: url('@/assets/images/title-5.png');
+      //   & > span {
-        background-size: 100% 100%;
+      //     padding-left: vw(22);
-        & > span {
+      //     font-weight: bold;
-          padding-left: vw(22);
+      //     font-size: vw(15);
-          font-weight: bold;
+      //     background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
-          font-size: vw(15);
+      //     -webkit-background-clip: text;
-          background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%);
+      //     background-clip: text;
-          -webkit-background-clip: text;
+      //     -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
-          background-clip: text;
+      //     color: transparent; /* 兼容其他浏览器 */
-          -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */
+      //   }
-          color: transparent; /* 兼容其他浏览器 */
+      // }
-        }
-      }
       .statistic {
         display: flex;
         margin-top: vh(12);

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

@@ -43,7 +43,7 @@
           <circle-progress
             :width="170"
             :height="90"
-            :value="scenicStore.wordkOrderData.toDayData.rate"
+            :value="parseFloat(scenicStore.wordkOrderData.toDayData.rate)"
             :title="`${scenicStore.wordkOrderData.toDayData.rate}%`"
             subTitle="完成率"
           />
@@ -66,7 +66,7 @@
           <circle-progress
             :width="170"
             :height="90"
-            :value="scenicStore.wordkOrderData.warnData.rate"
+            :value="parseFloat(scenicStore.wordkOrderData.warnData.rate)"
             :title="`${scenicStore.wordkOrderData.warnData.rate}%`"
             subTitle="完成率"
           />

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

@@ -73,7 +73,7 @@
         </div>
       </div>
       <div class="box-1 mr-8">
-        <Title1 title="停车信息（调试中）" />
+        <Title1 title="停车信息" />
         <div class="flex">
           <div class="height70 flex flex-1">
             <circle-progress
@@ -81,7 +81,7 @@
               :key="index"
               :width="140"
               :height="70"
-              :value="item.rate"
+              :value="parseFloat(item.rate)"
               :title="item.occupied"
               :subTitle="`${item.name}剩余`"
             />
@@ -90,7 +90,7 @@
             <count-item label="总停车场" :count="scenicStore.stopCarData.info.count" suffix="个" />
             <count-item
               label="剩余车位数"
-              :count="scenicStore.stopCarData.info.remain"
+              :count="scenicStore.stopCarData.info.occupiedSpaces"
               suffix="个"
             />
           </div>
@@ -98,13 +98,13 @@
         <div class="flex">
           <div class="border mr-8 flex-1">
             <div class="pt-10">
-              <Title3 title="今日景区车流量（调试中）" />
+              <Title3 title="今日景区车流量" />
             </div>
             <Line :width="360" :height="300" :data="carBearData" :xAxisData="carBearXAxisData" />
           </div>
           <div class="border flex-1">
             <div class="pt-10">
-              <Title3 title="车辆归属地占比（调试中）" />
+              <Title3 title="车辆归属地占比" />
             </div>
             <PieRow
               label="停车总数"
@@ -144,13 +144,13 @@
     </div>
     <div class="flex mt-8">
       <div class="box-3 mr-8">
-        <Title1 title="交通信息（调试中）" />
+        <Title1 title="交通信息" />
         <div class="count-box flex">
           <count-item
             v-for="(item, index) in scenicStore.trafficData.infoList"
             :key="index"
             :label="item.name"
-            :count="item.value"
+            :count="item?.value || 0"
           />
         </div>
         <div class="flex">
@@ -347,7 +347,7 @@
 
   const carTotal = computed(() => {
     return scenicStore.stopCarData.dataLists.reduce((pre, cur) => {
-      return pre + cur.count
+      return pre + parseInt(cur.count)
     }, 0)
   })
 

src/views/scenic/components/jam.vue

@@ -40,10 +40,12 @@
 
   watch(
     () => props.list,
-    (val) => {
+    () => {
-      setTimeout(() => {
+      if (props.list.length > 0) {
-        init()
+        setTimeout(() => {
-      }, 1000)
+          init()
+        }, 1000)
+      }
     },
     { immediate: true }
   )

src/views/scenic/components/traffic-flow.vue

@@ -86,10 +86,8 @@
             label: {
               show: true,
               position: 'top',
-              textStyle: {
+              color: '#fff',
-                color: '#fff',
+              fontSize: fitChartSize(10)
-                fontSize: fitChartSize(10)
-              }
             },
             itemStyle: {
               color: {