feat：完善功能

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

@@ -35,7 +35,9 @@
         </div>
       </div>
     </div>
-    <div class="main"> </div>
+    <div class="main">
+      <img v-if="scenicSpotId == 'root000000'" src="@/assets/images/bdc.png" alt="" />
+    </div>
     <div class="footer">
       <div class="flex">
         <div class="item">
@@ -119,6 +121,13 @@
   const router = useRouter()
   const scenicStore = useScenicStore()
 
+  let props = defineProps({
+    scenicSpotId: {
+      type: String,
+      default: () => ''
+    }
+  })
+
   const handleMore = () => {
     router.push('/workOrder')
   }
@@ -192,6 +201,10 @@
     .main {
       width: 100%;
       height: vh(600);
+      > img {
+        width: 100%;
+        height: 100%;
+      }
     }
     .footer {
       .item {

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

@@ -213,16 +213,23 @@
           </div>
           <div class="border mr-8 flex-1">
             <Title3 title="客源地分析TOP5" />
-            <top />
+            <RegionTop
+              :list="scenicStore.userPortraitData.data.provinceRate"
+              :width="250"
+              :height="366"
+            />
           </div>
           <div class="border flex-1">
             <Title3 title="购票来源" />
             <div class="count">总人数：<countup :end-val="channelTotal" /></div>
-            <ticket />
+            <TicketSource
+              :list="scenicStore.userPortraitData.data.channel"
+              :width="240"
+              :height="330"
+            />
           </div>
         </div>
       </div>
-
       <div class="box-5">
         <Title1 title="车船信息" />
         <div class="flex mb-6">
@@ -304,12 +311,11 @@
   import shipIcon from '@/assets/images/ship.png'
 
   import age from './age'
-  import top from './top'
   import jam from './jam'
-  import ticket from './ticket'
   import TrafficFlow from './traffic-flow'
   import BigCarShipMap from './big-car-ship-map'
   import countup from 'vue-countup-v3'
+
   import { useMap } from '@/hooks/map'
   import { useScenicStore } from '@/stores/scenic'
 
@@ -522,6 +528,7 @@
         height: vw(74);
       }
       .car-item {
+        flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -544,6 +551,7 @@
       .suffix {
         font-size: vw(12);
         color: #02f9fa;
+        margin-bottom: vw(4);
       }
     }
     .sum {

src/views/scenic/components/ticket.vue

@@ -1,106 +0,0 @@
-<!-- 购票来源 -->
-<template>
-  <div class="ticket" :id="id" />
-</template>
-
-<script setup>
-  import { fitChartSize } from '@/utils/dataUtil'
-  import { useEchart } from '@/hooks/echart'
-
-  import { useScenicStore } from '@/stores/scenic'
-
-  const scenicStore = useScenicStore()
-
-  const { id, setOption } = useEchart()
-
-  let x = 30
-  let y = 40
-  let params = null
-
-  watch(
-    () => scenicStore.userPortraitData.data.channel,
-    (val) => {
-      if (val.length > 0) {
-        setTimeout(() => {
-          init()
-        }, 1000)
-      }
-    },
-    {
-      immediate: true
-    }
-  )
-
-  const setSeries = () => {
-    return scenicStore.userPortraitData.data.channel.map((item, index) => {
-      return {
-        name: item.name,
-        type: 'pie',
-        clockwise: false,
-        silent: true,
-        radius: [`${x * (index + 1)}%`, `${y + index * 30}%`],
-        center: ['50%', '40%'],
-        label: { show: false },
-        labelLine: { show: false },
-        emphasis: { show: false },
-        data: [
-          {
-            value: parseFloat(item.value),
-            name: item.name
-          },
-          {
-            value: 100,
-            itemStyle: {
-              color: '#07439C'
-            }
-          }
-        ]
-      }
-    })
-  }
-
-  const init = () => {
-    if (!params) {
-      params = {
-        backgroundColor: 'transparent',
-        legend: {
-          show: true,
-          x: 'center',
-          y: '70%',
-          itemHeight: fitChartSize(12),
-          itemWidth: fitChartSize(12),
-          itemGap: fitChartSize(6),
-          formatter: function (name) {
-            let obj = scenicStore.userPortraitData.data.channel.find((item) => item.name == name)
-            return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
-          },
-          textStyle: {
-            rich: {
-              name: {
-                color: '#fff',
-                fontSize: fitChartSize(12)
-              },
-              value: {
-                color: '#00D5F6',
-                fontWeight: 600,
-                fontSize: fitChartSize(12)
-              }
-            }
-          }
-        },
-        color: ['#F15A25', '#01FEFE', '#12B5FD'],
-        series: setSeries()
-      }
-    } else {
-      params.series = setSeries()
-    }
-    setOption(params)
-  }
-</script>
-
-<style scoped lang="scss">
-  .ticket {
-    width: vw(240);
-    height: vh(336);
-  }
-</style>

src/views/scenic/components/top.vue

@@ -1,132 +0,0 @@
-<!-- 客源地分析TOP5 -->
-<template>
-  <div class="top" :id="id" />
-</template>
-
-<script setup>
-  import { fitChartSize } from '@/utils/dataUtil'
-  import { useEchart } from '@/hooks/echart'
-  import { useScenicStore } from '@/stores/scenic'
-
-  const scenicStore = useScenicStore()
-  const { id, setOption } = useEchart()
-  let params = null
-
-  const init = () => {
-    if (!params) {
-      params = {
-        backgroundColor: 'transparent',
-        tooltip: {
-          show: false
-        },
-        legend: {
-          show: false
-        },
-        grid: {
-          left: '4%',
-          right: '4%',
-          top: '4%',
-          bottom: '-4%',
-          containLabel: false
-        },
-        xAxis: [{ max: 100, show: false }],
-        yAxis: [
-          {
-            type: 'category',
-            splitLine: {
-              show: false
-            },
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              show: false
-            }
-          },
-          {
-            type: 'category',
-            axisTick: 'none',
-            axisLine: 'none',
-            show: true,
-            axisLabel: {
-              color: '#fff',
-              fontSize: fitChartSize(18),
-              verticalAlign: 'bottom',
-              padding: [0, -fitChartSize(10), fitChartSize(10), 0],
-              inside: true,
-              formatter: function (value) {
-                return `{value|${value}}%`
-              },
-              rich: {
-                value: {
-                  align: 'center',
-                  color: '#fff',
-                  fontSize: fitChartSize(14)
-                }
-              }
-            },
-            data: scenicStore.userPortraitData.data.provinceRate.map((item) => Number(item.value))
-          }
-        ],
-        series: [
-          {
-            type: 'bar',
-            barWidth: fitChartSize(12),
-            showBackground: true,
-            borderRadius: [0, 0, 0, 0],
-            backgroundStyle: {
-              color: 'rgba(0, 150, 255, 0.15)'
-            },
-            label: {
-              show: true,
-              offset: [fitChartSize(12), -fitChartSize(20)],
-              color: '#D3E5FF',
-              fontWeight: 500,
-              position: 'left',
-              align: 'left',
-              fontSize: fitChartSize(14),
-              formatter: function (params) {
-                return params.data.name ?? '其他'
-              }
-            },
-            data: scenicStore.userPortraitData.data.provinceRate.map((item) => {
-              return {
-                name: item.name,
-                value: Number(item.value),
-                itemStyle: {
-                  borderRadius: [0, 0, 0, 0],
-                  color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
-                }
-              }
-            })
-          }
-        ]
-      }
-    }
-    setOption(params)
-  }
-
-  watch(
-    () => scenicStore.userPortraitData.data.provinceRate,
-    (val) => {
-      if (val.length > 0) {
-        setTimeout(() => {
-          init()
-        }, 1000)
-      }
-    },
-    {
-      immediate: true
-    }
-  )
-</script>
-
-<style scoped lang="scss">
-  .top {
-    width: vw(250);
-    height: vh(366);
-  }
-</style>

src/views/scenic/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <box1 />
+  <box1 :scenicSpotId="scenicSpotId" />
   <box2 />
 </template>
 
@@ -18,13 +18,13 @@
     `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/scenic-spot`
   )
 
-  let id = ref('')
+  let scenicSpotId = ref('')
 
   watch(
-    () => [isConnected.value, id.value],
+    () => [isConnected.value, scenicSpotId.value],
     (val) => {
       if (val[0] && val[1]) {
-        sendMessage(JSON.stringify({ action: 'start', type: '', scenicSpotId: id.value }))
+        sendMessage(JSON.stringify({ action: 'start', type: '', scenicSpotId: scenicSpotId.value }))
       }
     },
     { immediate: true }
@@ -34,7 +34,6 @@
     () => dataRes.value,
     (val) => {
       if (val) {
-        console.log(val, '景区接受消息')
         switch (val.type) {
           case 'wordkOrderlist':
             scenicStore.setWordkOrderList(val.data)
@@ -73,8 +72,7 @@
   let scenicChange = null
   onMounted(() => {
     scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
-      id.value = data.scenicSpotId
-      console.log(id.value, 'id.value')
+      scenicSpotId.value = data.scenicSpotId
     })
   })
   onUnmounted(() => {