feat：完善功能

src/components/RegionTop/index.vue

@@ -1,17 +1,51 @@
 <!-- 客源地分析TOP5 -->
 <template>
-  <div class="top" :id="id" />
+  <div
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
 </template>
 
 <script setup>
+  import styleUtil from '@/utils/styleUtil'
   import { fitChartSize } from '@/utils/dataUtil'
   import { useEchart } from '@/hooks/echart'
-  import { useScenicStore } from '@/stores/scenic'
 
-  const scenicStore = useScenicStore()
+  let props = defineProps({
+    list: {
+      type: Array,
+      default: () => []
+    },
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    }
+  })
+
   const { id, setOption } = useEchart()
   let params = null
 
+  watch(
+    () => props.list,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          init()
+        }, 1000)
+      }
+    },
+    {
+      immediate: true
+    }
+  )
+
   const init = () => {
     if (!params) {
       params = {
@@ -68,7 +102,7 @@
                 }
               }
             },
-            data: scenicStore.userPortraitData.data.provinceRate.map((item) => Number(item.value))
+            data: props.list.map((item) => Number(item.value))
           }
         ],
         series: [
@@ -92,7 +126,7 @@
                 return params.data.name ?? '其他'
               }
             },
-            data: scenicStore.userPortraitData.data.provinceRate.map((item) => {
+            data: props.list.map((item) => {
               return {
                 name: item.name,
                 value: Number(item.value),
@@ -110,7 +144,7 @@
   }
 
   watch(
-    () => scenicStore.userPortraitData.data.provinceRate,
+    () => props.list,
     (val) => {
       if (val.length > 0) {
         setTimeout(() => {

src/components/TicketSource/index.vue

@@ -1,24 +1,40 @@
-<!-- 购票来源 -->
+<!-- 购买来源 -->
 <template>
-  <div class="ticket" :id="id" />
+  <div
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
 </template>
 
 <script setup>
   import { fitChartSize } from '@/utils/dataUtil'
   import { useEchart } from '@/hooks/echart'
-
+  import styleUtil from '@/utils/styleUtil'
-  import { useHomeStore } from '@/stores/home'
-
-  const homeStore = useHomeStore()
 
   const { id, setOption } = useEchart()
 
-  let x = 25
+  let props = defineProps({
-  let y = 35
+    list: {
+      type: Array,
+      default: () => []
+    },
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    }
+  })
+
   let params = null
 
   watch(
-    () => homeStore.userPortraitData.channel,
+    () => props.list,
     (val) => {
       if (val.length > 0) {
         setTimeout(() => {
@@ -31,30 +47,18 @@
     }
   )
 
-  const setSeries = () => {
+  const getSeriesData = () => {
-    return homeStore.userPortraitData.channel.map((item, index) => {
+    return props.list.map((item) => {
       return {
+        type: 'bar',
         name: item.name,
-        type: 'pie',
         clockwise: false,
         silent: true,
-        radius: [`${x * (index + 1)}%`, `${y + index * 25}%`],
+        roundCap: true,
-        center: ['50%', '40%'],
+        barWidth: '13%',
-        label: { show: false },
+        showBackground: true,
-        labelLine: { show: false },
+        coordinateSystem: 'polar',
-        emphasis: { show: false },
+        data: [item.value]
-        data: [
-          {
-            value: parseFloat(item.value),
-            name: item.name
-          }
-          // {
-          //   value: 100,
-          //   itemStyle: {
-          //     color: '#07439C'
-          //   }
-          // }
-        ]
       }
     })
   }
@@ -62,7 +66,6 @@
   const init = () => {
     if (!params) {
       params = {
-        backgroundColor: 'transparent',
         legend: {
           show: true,
           x: 'center',
@@ -71,7 +74,7 @@
           itemWidth: fitChartSize(12),
           itemGap: fitChartSize(6),
           formatter: function (name) {
-            let obj = homeStore.userPortraitData.channel.find((item) => item.name == name)
+            let obj = props.list.find((item) => item.name == name)
             return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
           },
           textStyle: {
@@ -89,20 +92,36 @@
           }
         },
         color: ['#F15A25', '#01FEFE', '#12B5FD'],
-        series: setSeries()
+        polar: {
+          center: ['50%', '40%']
+        },
+        angleAxis: {
+          max: 100,
+          show: false
+        },
+        radiusAxis: {
+          type: 'category',
+          show: true,
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: getSeriesData()
       }
     } else {
-      params.series = setSeries()
+      params.series = getSeriesData()
     }
     setOption(params)
   }
 </script>
 
 <style scoped lang="scss">
-  .ticket {
-    width: 100%;
-    height: vh(230);
-  }
   .legend {
     display: flex;
     align-items: center;

src/hooks/echart.js

@@ -9,8 +9,8 @@ export function useEchart() {
     const dom = document.getElementById(id.value)
     chart = echarts.init(dom)
   }
-  const setOption = (params) => {
+  const setOption = (params, update = false) => {
-    chart.setOption(params)
+    chart.setOption(params, update)
   }
   const dispose = () => {
     chart.dispose()

src/utils/config.js

@@ -1,4 +1,4 @@
-export const baseUrl = 'http://36.138.38.16:8001' // 'http://36.138.38.16:8001'
+export const baseUrl = 'http://36.138.38.16:8001' // http://36.138.38.16:8001
 export const proBaseUrl = 'http://192.168.77.200'
 
 export const socketBaseUrl = 'ws://36.138.38.16:81' // ws://36.138.38.16:81

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

@@ -112,7 +112,7 @@
 
       <div class="box-1">
         <Title3 title="客源地TOP5" />
-        <top />
+        <RegionTop :list="homeStore.userPortraitData.provinceRate" :width="230" :height="260" />
       </div>
 
       <div class="box-1">
@@ -120,17 +120,15 @@
         <div v-if="channelTotal > 0" class="count">
           游客总数：<countup :end-val="channelTotal" />
         </div>
-        <ticket />
+        <TicketSource :list="homeStore.userPortraitData.channel" :width="230" :height="230" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-  import top from './top'
   import age from './age'
   import gauge from './gauge'
-  import ticket from './ticket'
   import countup from 'vue-countup-v3'
   import { useHomeStore } from '@/stores/home'
 

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

@@ -194,7 +194,7 @@
         map.value.addOverlay(polyline)
       })
     })
-    getBaiduMapCrowded()
+    // getBaiduMapCrowded()
   }
   const getBaiduMapCrowded = async () => {
     let res = await getBaiduMapCrowdedApi({

src/views/home/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 { useHomeStore } from '@/stores/home'
-
-  const homeStore = useHomeStore()
-  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: '10%',
-          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: homeStore?.userPortraitData?.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: homeStore?.userPortraitData?.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(
-    () => homeStore?.userPortraitData?.provinceRate,
-    (val) => {
-      if (val.length > 0) {
-        setTimeout(() => {
-          init()
-        }, 1000)
-      }
-    },
-    {
-      immediate: true
-    }
-  )
-</script>
-
-<style scoped lang="scss">
-  .top {
-    width: 100%;
-    height: vh(260);
-  }
-</style>

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

@@ -63,7 +63,12 @@
 
     <template v-if="scenicSpotId">
       <div class="detection-top">
-        <img class="map-img" src="@/assets/images/map-img-1.jpg" />
+        <img
+          v-if="scenicSpotId == 'root000000'"
+          class="map-img"
+          src="@/assets/images/bdc.png"
+          alt=""
+        />
       </div>
       <div class="flex">
         <div class="monitor">
@@ -260,7 +265,6 @@
       height: 100%;
     }
   }
-
   .monitor {
     width: vw(405);
     margin-right: vw(8);
@@ -351,7 +355,6 @@
     background-image: url('@/assets/images/title-4.png');
     background-size: 100% 100%;
   }
-
   :deep(.el-select__wrapper) {
     background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
     border: none;
@@ -361,10 +364,6 @@
     font-size: vw(14);
     color: #fff;
   }
-  .line-chart {
-    width: 100%;
-    height: vh(200);
-  }
   .box-1 {
     margin-top: vh(120);
     width: vw(800);

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/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
+      scenicSpotId.value = data.scenicSpotId
-      console.log(id.value, 'id.value')
     })
   })
   onUnmounted(() => {

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

@@ -81,7 +81,7 @@
         <div class="chart-item">
           <Title3 title="拥堵类型分析" />
           <div class="chart-box">
-            <traffic-jam :series="item.series" :data="item.xdata" />
+            <traffic-jam :series="item.series" :data="item.xdata" :key="index" />
           </div>
         </div>
       </div>

src/views/traffic/components/traffic-jam.vue

@@ -22,7 +22,7 @@
   watch(
     () => props.series,
     (val) => {
-      if (val.length > 0) {
+      if (val.length) {
         setTimeout(() => {
           init()
         }, 1000)
@@ -34,20 +34,7 @@
   let params = null
 
   const getSeriesData = () => {
-    let colorMap = {
+    return props.series
-      1: '#00C000',
-      2: '#FFA700',
-      3: '#FFO000',
-      4: '#B50000'
-    }
-    return props.series.map((item) => {
-      return {
-        value: item,
-        itemStyle: {
-          color: colorMap[item]
-        }
-      }
-    })
   }
   const getXAxisData = () => {
     return props.data
@@ -63,9 +50,8 @@
           containLabel: true
         },
         xAxis: {
-          boundaryGap: false,
           type: 'category',
-          data: getXAxisData(),
+          boundaryGap: false,
           axisTick: {
             show: false
           },
@@ -77,7 +63,8 @@
           axisLabel: {
             fontSize: fitChartSize(12),
             color: 'rgba(255,255,255,0.9)'
-          }
+          },
+          data: getXAxisData()
         },
         yAxis: {
           type: 'value',
@@ -97,9 +84,6 @@
         series: [
           {
             type: 'bar',
-            emphasis: {
-              opacity: 1
-            },
             data: getSeriesData(),
             barWidth: fitChartSize(40),
             label: {
@@ -110,12 +94,23 @@
               formatter: (res) => {
                 let valueMap = {
                   1: '畅通',
-                  2: '高疑似事件拥堵',
+                  2: '缓行',
-                  3: '异常拥堵',
+                  3: '拥堵',
-                  4: '常规拥堵'
+                  4: '严重拥堵'
                 }
                 return valueMap[res.value]
               }
+            },
+            itemStyle: {
+              color: (res) => {
+                let colorMap = {
+                  1: '#00c000',
+                  2: '#ffa700',
+                  3: '#ff0000',
+                  4: '#b50000'
+                }
+                return colorMap[res.value]
+              }
             }
           }
         ]