feat：对接景区接口

src/views/scenic/components/age.vue

@@ -126,7 +126,6 @@
       params.series[0].data = getSeriesData()
       params.series[1].data = getSeriesData()
     }
-    console.log(params, 'params')
     setOption(params)
   }
 </script>

src/views/scenic/components/big-car-ship-map.vue

@@ -20,15 +20,15 @@
     (val) => {
       if (val && !map.value) {
         setTimeout(() => {
-          initMap('big-car-ship', 109.491961, 31.024285, 16)
-          addMarker(carIcon, [109.491045, 31.028725], [36, 50])
-          addMarker(carIcon, [109.483266, 31.024718], [36, 50])
-          addMarker(shipIcon, [109.479062, 31.021499], [36, 50])
-          addMarker(shipIcon, [109.488907, 31.017476], [36, 50])
-        }, 500)
+          initMap('big-car-ship', 109.552461, 31.049607, 15)
+          addMarker(carIcon, [109.551419, 31.050001], [36, 50])
+          addMarker(shipIcon, [109.551671, 31.04847], [36, 50])
+        }, 1000)
       }
     }
   )
+
+  onMounted(() => {})
 </script>
 
 <style scoped lang="scss">
@@ -42,15 +42,15 @@
     :deep(.el-dialog) {
       width: vw(2540);
       height: vh(900);
-      padding: 0;
+      padding: vh(40) vw(40);
     }
     :deep(.el-dialog__header) {
       padding-bottom: 0 !important;
     }
   }
   .big-car-ship {
-    width: vw(2540);
-    height: vh(900);
+    width: 100%;
+    height: vh(820);
   }
   .close {
     cursor: pointer;

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

@@ -39,35 +39,55 @@
     <div class="footer">
       <div class="flex">
         <div class="item">
-          <CircleProgress :width="170" :height="90" />
+          <circle-progress
+            :width="170"
+            :height="90"
+            :value="scenicStore.wordkOrderData.toDayData.rate"
+            :title="`${scenicStore.wordkOrderData.toDayData.rate}%`"
+            subTitle="完成率"
+          />
           <div>
             <div class="bg">
               <span class="label">今日工单总条数：</span>
-              <span class="value"> <countup :endVal="1234" /></span>
+              <span class="value success">
+                <countup :end-val="scenicStore.wordkOrderData.toDayData.count" />
+              </span>
             </div>
             <div class="bg">
               <span class="label">工单完成数：</span>
-              <span class="value"> <countup :endVal="1234" /></span>
+              <span class="value">
+                <countup :end-val="scenicStore.wordkOrderData.toDayData.end" />
+              </span>
             </div>
           </div>
         </div>
         <div class="item">
-          <CircleProgress :width="170" :height="90" />
+          <circle-progress
+            :width="170"
+            :height="90"
+            :value="scenicStore.wordkOrderData.warnData.rate"
+            :title="`${scenicStore.wordkOrderData.warnData.rate}%`"
+            subTitle="完成率"
+          />
           <div>
             <div class="bg">
-              <span class="label">今日工单总条数：</span>
-              <span class="value"> <countup :endVal="1234" /></span>
+              <span class="label">今日紧急工单数：</span>
+              <span class="value error">
+                <countup :end-val="scenicStore.wordkOrderData.warnData.count" />
+              </span>
             </div>
             <div class="bg">
-              <span class="label">工单完成数：</span>
-              <span class="value"> <countup :endVal="1234" /></span>
+              <span class="label">紧急工单完成数：</span>
+              <span class="value">
+                <countup :end-val="scenicStore.wordkOrderData.warnData.end" />
+              </span>
             </div>
           </div>
         </div>
       </div>
       <div class="flex align-center justify-between">
         <div>
-          <vue3-seamless-scroll
+          <Vue3SeamlessScroll
             class="list"
             :list="scenicStore.wordkOrderList"
             :limitScrollNum="3"
@@ -82,7 +102,7 @@
                 {{ item.title }}
               </p>
             </div>
-          </vue3-seamless-scroll>
+          </Vue3SeamlessScroll>
         </div>
         <img class="more" src="@/assets/images/more-col.png" alt="查看更多" @click="handleMore" />
       </div>
@@ -203,8 +223,14 @@
           .value {
             font-weight: bold;
             font-size: vw(28);
+            color: #fff;
+          }
+          .success {
             color: #02f9fa;
           }
+          .error {
+            color: #e21b1b;
+          }
         }
       }
       .list {

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

@@ -40,7 +40,13 @@
       <div class="box mr-8">
         <Title1 title="景区承载" />
         <div class="flex">
-          <circle-progress :width="200" :height="70" />
+          <circle-progress
+            :width="200"
+            :height="70"
+            :value="scenicStore.scenicBearData.header.jqRate"
+            :title="`${scenicStore.scenicBearData.header.jqRate}%`"
+            subTitle="景区承载率"
+          />
           <div class="flex flex-1 justify-between">
             <count-item
               label="景区当前人数"
@@ -69,14 +75,24 @@
       <div class="box-1 mr-8">
         <Title1 title="停车信息" />
         <div class="flex">
-          <div class="flex">
-            <circle-progress :width="140" :height="70" />
-            <circle-progress :width="140" :height="70" />
-            <circle-progress :width="140" :height="70" />
+          <div class="height70 flex flex-1">
+            <circle-progress
+              v-for="(item, index) in garageList"
+              :key="index"
+              :width="140"
+              :height="70"
+              :value="item.ratio"
+              :title="item.over"
+              :subTitle="`${item.name}剩余`"
+            />
           </div>
           <div class="ml-20 flex flex-1 justify-between">
-            <count-item label="总车位数" :count="561" suffix="个" />
-            <count-item label="剩余车位数" :count="15" suffix="个" />
+            <count-item label="总车位数" :count="scenicStore.stopCarData.info.count" suffix="个" />
+            <count-item
+              label="剩余车位数"
+              :count="scenicStore.stopCarData.info.remain"
+              suffix="个"
+            />
           </div>
         </div>
         <div class="flex">
@@ -103,9 +119,14 @@
       <div class="box-2">
         <Title1 title="安全信息 " />
         <div class="count-box flex">
-          <count-item label="当前告警总数" :count="561" suffix="次" />
-          <count-item label="安全告警总数" :count="561" suffix="次" />
-          <count-item label="已解除告警数" :count="561" />
+          <count-item
+            v-for="item in scenicStore.secureData.headList"
+            :label="item.name"
+            :count="item.count"
+            :type="item.type"
+            :color="item.type == 0 ? '#0096FF' : '#E21B1B'"
+            suffix="次"
+          />
         </div>
         <div class="border flex-1">
           <div class="pt-10">
@@ -115,7 +136,7 @@
             label="安全告警占比"
             :dataList="scenicStore.secureData.dataList"
             :total="alarmTotal"
-            :width="460"
+            :width="440"
             :height="300"
           />
         </div>
@@ -140,11 +161,21 @@
           </div>
           <div class="border mr-8">
             <Title3 title="拥堵次数占比" />
-            <jam :width="220" :height="160" />
+            <jam
+              :width="220"
+              :height="300"
+              sub-title="拥堵频次总数"
+              :list="scenicStore.trafficData.data.countRate"
+            />
           </div>
           <div class="border">
             <Title3 title="拥堵时长占比" />
-            <jam :width="220" :height="160" />
+            <jam
+              :width="220"
+              :height="300"
+              sub-title="拥堵总时长"
+              :list="scenicStore.trafficData.data.countRate"
+            />
           </div>
         </div>
       </div>
@@ -167,7 +198,7 @@
                 <span class="text">{{ item.name }}</span>
                 <div class="progress">
                   <el-progress
-                    :percentage="item.value"
+                    :percentage="parseFloat(item.value)"
                     :show-text="false"
                     :color="
                       item.name == '女'
@@ -186,7 +217,7 @@
           </div>
           <div class="border flex-1">
             <Title3 title="购票来源" />
-            <div class="count">总人数：<countup endVal="124563" /></div>
+            <div class="count">总人数：<countup :end-val="channelTotal" /></div>
             <ticket />
           </div>
         </div>
@@ -196,54 +227,66 @@
         <Title1 title="车船信息" />
         <div class="flex mb-6">
           <div class="border mr-8 pt-10 pb-10">
-            <Title2 title="景区车辆" />
+            <div class="flex justify-between">
+              <Title2 title="景区车辆" />
+              <div class="sum">
+                <span>总数：</span>
+                <countup
+                  :end-val="
+                    scenicStore.carShipData.car.count?.drivingCount +
+                    scenicStore.carShipData.car.count?.nonDrivingCount
+                  "
+                />
+              </div>
+            </div>
             <div class="car-box mt-10">
               <img class="icon" src="@/assets/images/icon-6.png" />
               <div class="car-item pr-20">
-                <div class="label">车总数</div>
-                <div class="value">130辆</div>
+                <div class="label">运营车辆</div>
+                <div class="value flex">
+                  <countup :end-val="scenicStore.carShipData.car.count?.drivingCount" />
+                  <span class="suffix"> 辆 </span>
+                </div>
               </div>
               <div class="car-item">
-                <div class="label">今日累计运营(班次)</div>
-                <div class="value">130次</div>
+                <div class="label">空闲车辆</div>
+                <div class="value flex">
+                  <countup :end-val="scenicStore.carShipData.car.count?.nonDrivingCount" />
+                  <span class="suffix"> 辆 </span>
+                </div>
               </div>
             </div>
-            <div class="progress-box">
-              <span class="text">运营130辆</span>
-              <div class="progress">
-                <el-progress
-                  :percentage="50"
-                  :show-text="false"
-                  color="linear-gradient(to right, rgba(0,150,255,0) 0%, #F15A25 100%)"
-                />
-              </div>
-              <span class="value">空余100辆</span>
-            </div>
           </div>
           <div class="border pt-10 pb-10">
-            <Title2 title="景区船只" />
+            <div class="flex justify-between">
+              <Title2 title="景区船只" />
+              <div class="sum">
+                <span>总数：</span>
+                <countup
+                  :end-val="
+                    scenicStore.carShipData.ship.count?.drivingCount +
+                    scenicStore.carShipData.ship.count?.nonDrivingCount
+                  "
+                />
+              </div>
+            </div>
             <div class="car-box mt-10">
               <img class="icon" src="@/assets/images/icon-6.png" />
               <div class="car-item pr-20">
-                <div class="label">船总数</div>
-                <div class="value">130辆</div>
+                <div class="label">运营船只</div>
+                <div class="value flex">
+                  <countup :end-val="scenicStore.carShipData.ship.count?.drivingCount" />
+                  <span class="suffix">辆</span>
+                </div>
               </div>
               <div class="car-item">
-                <div class="label">今日累计运营(班次)</div>
-                <div class="value">130次</div>
+                <div class="label">空闲船只</div>
+                <div class="value flex">
+                  <countup :end-val="scenicStore.carShipData.ship.count?.nonDrivingCount" />
+                  <span class="suffix">只</span>
+                </div>
               </div>
             </div>
-            <div class="progress-box">
-              <span class="text">运营130辆</span>
-              <div class="progress">
-                <el-progress
-                  :percentage="50"
-                  :show-text="false"
-                  color="linear-gradient(to right, rgba(0,150,255,0) 0%, #F15A25 100%)"
-                />
-              </div>
-              <span class="value">空余100辆</span>
-            </div>
           </div>
         </div>
         <div class="border pt-10 pb-10">
@@ -273,6 +316,21 @@
   const scenicStore = useScenicStore()
   const { initMap, addMarker } = useMap()
 
+  const garageList = computed(() => {
+    return scenicStore.stopCarData.headList.map((item) => {
+      return {
+        ...item,
+        ratio: ((item.count - item.over) / item.count) * 100
+      }
+    })
+  })
+
+  const channelTotal = computed(() => {
+    return scenicStore.userPortraitData.data.channel.reduce((pre, cur) => {
+      return pre + parseInt(cur.count)
+    }, 0)
+  })
+
   const ageTotal = computed(() => {
     return scenicStore.userPortraitData.data.genderRate.reduce((pre, cur) => {
       return pre + parseInt(cur.count)
@@ -313,12 +371,26 @@
   })
 
   let show = ref(false)
+
+  watch(
+    () => scenicStore.carShipData,
+    (val) => {
+      if (val.car.list.length > 0) {
+        setTimeout(() => {
+          val.car.list.map((item) => {
+            addMarker(carIcon, [109.551419, 31.050001], [36, 50])
+          })
+          val.ship.list.map((item) => {
+            addMarker(shipIcon, [109.551671, 31.04847], [36, 50])
+          })
+        }, 1000)
+      }
+    },
+    { immediate: true }
+  )
+
   onMounted(() => {
-    initMap('car-ship', 109.491961, 31.024285, 13)
-    addMarker(carIcon, [109.491045, 31.028725], [36, 50])
-    addMarker(carIcon, [109.483266, 31.024718], [36, 50])
-    addMarker(shipIcon, [109.479062, 31.021499], [36, 50])
-    addMarker(shipIcon, [109.488907, 31.017476], [36, 50])
+    initMap('car-ship', 109.552461, 31.049607, 15)
   })
 </script>
 
@@ -329,6 +401,9 @@
   :deep(.anchorBL) {
     display: none;
   }
+  .height70 {
+    height: vh(70);
+  }
   .legend {
     display: flex;
     align-items: center;
@@ -399,29 +474,7 @@
       height: vh(904);
     }
   }
-  .progress-box {
-    margin-top: vh(10);
-    height: vh(20);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(to right, rgba(0, 150, 255, 0) 0%, rgba(0, 150, 255, 0.17) 100%);
-    .text {
-      margin-right: vw(10);
-      font-weight: 400;
-      font-size: vw(14);
-      color: #ffffff;
-    }
-    .progress {
-      width: vw(70);
-    }
-    .value {
-      margin-left: vw(10);
-      font-weight: 400;
-      font-size: vw(14);
-      color: #f15a25;
-    }
-  }
+
   .container {
     margin: vh(120) 0 0 vw(10);
     .count-box {
@@ -491,11 +544,23 @@
         font-size: vw(24);
         color: #02f9fa;
         margin-top: vh(6);
+        align-items: flex-end;
       }
+      .suffix {
+        font-size: vw(12);
+        color: #02f9fa;
+      }
+    }
+    .sum {
+      font-weight: bold;
+      font-size: vw(18);
+      color: #02f9fa;
+      display: flex;
+      align-items: center;
     }
     .car-ship {
       width: vw(660);
-      height: vh(240);
+      height: vh(250);
     }
     .full {
       cursor: pointer;

src/views/scenic/components/jam.vue

@@ -22,77 +22,78 @@
       type: Number,
       default: () => 0
     },
-    config: {
-      type: Object,
-      default: () => {
-        return {}
-      }
+    list: {
+      type: Array,
+      default: () => []
+    },
+    title: {
+      type: [String, Number],
+      default: () => ''
+    },
+    subTitle: {
+      type: [String, Number],
+      default: () => ''
     }
   })
 
   const { id, setOption } = useEchart()
 
-  var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA', '']
-  var title = ['企业', '农业', '工业', '纺织']
-  var dataValue = ['15', '30', '35', '20']
-  var dataList = title.map((item, index) => {
-    return {
-      name: item,
-      value: dataValue[index]
-    }
-  })
+  watch(
+    () => props.list,
+    (val) => {
+      setTimeout(() => {
+        init()
+      }, 1000)
+    },
+    { immediate: true }
+  )
 
-  var defaultCofig = {
-    color: colorList,
-    series: [
-      {
-        type: 'pie',
-        startAngle: 360,
-        center: ['50%', '40%'],
-        radius: ['65%', '80%'],
-        label: {
-          show: false
-        },
-        labelLine: {
-          show: false
-        },
-        data: [
-          {
-            value: 50,
-            itemStyle: {
-              color: {
-                type: 'linear',
-                x: 1,
-                y: 1,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(0, 150, 255, 0)'
-                  },
-                  {
-                    offset: 0.5,
-                    color: 'rgba(0, 150, 255, 0.47)'
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0, 150, 255, 0)'
-                  }
-                ]
-              }
-            }
-          },
+  let params = null
 
-          {
-            name: 'bottom',
-            value: 50,
-            itemStyle: {
-              color: 'transparent'
-            }
-          }
-        ]
+  const getSeriesData = () => {
+    return props.list.map((item) => {
+      return {
+        ...item,
+        value: parseFloat(item.value)
+      }
+    })
+  }
+
+  const getTotal = () => {
+    return props.list.reduce((per, cur) => {
+      return per + cur.count
+    }, 0)
+  }
+
+  const formatLabel = () => {
+    return () => `{value|${getTotal()}}` + '\n' + `{name|${props.subTitle}}`
+  }
+
+  let defaultCofig = {
+    color: ['#A665F1', '#0063FF', '#00D0FF', '#01FEFE', '#FC2638', '#FED958'],
+    legend: {
+      x: 'left',
+      y: '74%',
+      itemHeight: fitChartSize(12),
+      itemWidth: fitChartSize(12),
+      itemGap: fitChartSize(10),
+      formatter: function (name) {
+        return '{name|' + name + '}'
       },
+      textStyle: {
+        rich: {
+          name: {
+            color: '#fff',
+            fontSize: fitChartSize(14)
+          },
+          value: {
+            color: '#00D5F6',
+            fontSize: fitChartSize(14)
+          }
+        }
+      }
+    },
+    series: [
       {
         type: 'pie',
         center: ['50%', '40%'],
@@ -105,9 +106,7 @@
           show: true,
           position: 'center',
           fontWeight: 'bold',
-          formatter: function (o) {
-            return `{value|123456}` + '\n' + `{name|整改率}`
-          },
+          formatter: formatLabel(),
           rich: {
             value: {
               color: '#fff',
@@ -116,7 +115,7 @@
               padding: [0, 0, 5, 0]
             },
             name: {
-              color: '#7894A8',
+              color: '#fff',
               fontSize: fitChartSize(12)
             }
           }
@@ -124,21 +123,20 @@
         labelLine: {
           show: false
         },
-        data: dataList
+        data: getSeriesData()
       }
     ]
   }
 
   const init = () => {
-    setOption({
-      ...defaultCofig,
-      ...props.config
-    })
+    if (!params) {
+      params = defaultCofig
+    } else {
+      params.series[0].label.formatter = formatLabel()
+      params.series[0].data = getSeriesData()
+    }
+    setOption(params)
   }
-
-  onMounted(() => {
-    init()
-  })
 </script>
 
 <style scoped lang="scss"></style>

src/views/scenic/components/ticket.vue

@@ -13,8 +13,8 @@
 
   const { id, setOption } = useEchart()
 
-  let x = 15
-  let y = 25
+  let x = 30
+  let y = 40
   let params = null
 
   watch(
@@ -38,7 +38,7 @@
         type: 'pie',
         clockwise: false,
         silent: true,
-        radius: [`${x * (index + 1)}%`, `${y + index * 15}%`],
+        radius: [`${x * (index + 1)}%`, `${y + index * 30}%`],
         center: ['50%', '40%'],
         label: { show: false },
         labelLine: { show: false },
@@ -100,7 +100,7 @@
 
 <style scoped lang="scss">
   .ticket {
-    width: vw(260);
+    width: vw(240);
     height: vh(336);
   }
 </style>

src/views/scenic/components/top.vue

@@ -25,7 +25,7 @@
         grid: {
           left: '4%',
           right: '4%',
-          top: '10%',
+          top: '4%',
           bottom: '-4%',
           containLabel: false
         },
@@ -52,10 +52,8 @@
             axisLine: 'none',
             show: true,
             axisLabel: {
-              textStyle: {
-                color: '#fff',
-                fontSize: fitChartSize(18)
-              },
+              color: '#fff',
+              fontSize: fitChartSize(18),
               verticalAlign: 'bottom',
               padding: [0, -fitChartSize(10), fitChartSize(10), 0],
               inside: true,
@@ -78,7 +76,7 @@
             type: 'bar',
             barWidth: fitChartSize(12),
             showBackground: true,
-            barBorderRadius: [0, 0, 0, 0],
+            borderRadius: [0, 0, 0, 0],
             backgroundStyle: {
               color: 'rgba(0, 150, 255, 0.15)'
             },
@@ -99,7 +97,7 @@
                 name: item.name,
                 value: Number(item.value),
                 itemStyle: {
-                  barBorderRadius: [0, 0, 0, 0],
+                  borderRadius: [0, 0, 0, 0],
                   color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
                 }
               }

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

@@ -1,3 +1,4 @@
+<!-- 交通负载 -->
 <template>
   <div class="traffic-flow" :id="id" />
 </template>
@@ -43,7 +44,7 @@
           left: '4%',
           right: '4%',
           top: '10%',
-          bottom: '10%',
+          bottom: '4%',
           containLabel: true
         },
         xAxis: {
@@ -82,6 +83,14 @@
             type: 'bar',
             showBackground: true,
             barWidth: fitChartSize(16),
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: {
+                color: '#fff',
+                fontSize: fitChartSize(10)
+              }
+            },
             itemStyle: {
               color: {
                 type: 'linear',