feat：完善功能

src/components/Select/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="select">
+    <el-select v-model="modelValue" clearable :placeholder="label" @change="onChange">
+      <el-option v-for="item in options" :key="item.id" :label="item.ssname" :value="item.id" />
+    </el-select>
+  </div>
+</template>
+
+<script setup>
+  defineProps({
+    label: {
+      type: String,
+      default: '选择排队景区'
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  })
+  let modelValue = defineModel()
+  let emit = defineEmits(['on-change'])
+  const onChange = (e) => {
+    emit('on-change', e)
+  }
+</script>
+
+<style scoped lang="scss">
+  .select {
+    :deep(.el-select__wrapper) {
+      width: vw(240);
+      padding: vh(10) vw(20);
+      border-radius: vw(54);
+      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%);
+    }
+    :deep(.el-select__placeholder) {
+      font-weight: 400;
+      font-size: vw(20);
+      color: #ffffff;
+    }
+  }
+
+  .label {
+    font-weight: 400;
+    font-size: vw(24);
+  }
+</style>

src/views/home/components/age.vue

@@ -13,11 +13,6 @@
   watch(
     () => homeData.value?.userPortrait?.ageRate,
     () => {
-      init()
-    }
-  )
-
-  const init = () => {
       setOption({
         tooltip: {
           trigger: 'item'
@@ -65,6 +60,7 @@
         ]
       })
     }
+  )
 </script>
 
 <style lang="scss" scoped>

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

@@ -7,9 +7,10 @@
     </Title1>
     <div class="flex pt-20">
       <div
-        v-for="(item, index) in homeData?.scenicSpot"
         class="item"
         :class="{ core: index == 0, queue: index == 1, congestion: index == 2 }"
+        v-for="(item, index) in homeData?.scenicSpot"
+        :key="index"
       >
         <span class="label">{{ item.name }}</span>
         <div class="flex align-end">
@@ -146,9 +147,9 @@
       <Title2 title="景区购票数" />
       <div class="ticket-wrap">
         <img src="@/assets/images/ticket.png" />
-        <div> <span class="label">当日购票量：</span><countup endVal="768578" /> </div>
+        <div v-for="(item, index) in homeData?.admission" :key="index">
-        <div> <span class="label">未来3天购票量：</span><countup endVal="768578" /> </div>
+          <span class="label">{{ item.name }}：</span><countup :end-val="item.value" />
-        <div> <span class="label">3天后购票量：</span><countup endVal="768578" /> </div>
+        </div>
       </div>
     </div>
 
@@ -157,8 +158,12 @@
       <div class="box-1">
         <Title3 title="年龄/性别占比" />
         <age />
-        <div class="count">总人数：<countup endVal="124563" /></div>
+        <div class="count">总人数：<countup :end-val="ageRateTotal" /></div>
-        <div class="cell pt-20" v-for="item in homeData?.userPortrait.genderRate">
+        <div
+          class="cell pt-20"
+          v-for="(item, index) in homeData?.userPortrait.genderRate"
+          :key="index"
+        >
           <img class="icon" src="@/assets/images/man.png" />
           <div class="bg">
             <span class="text">{{ item.name }}性</span>
@@ -181,7 +186,7 @@
       </div>
       <div class="box-1">
         <Title3 title="购票来源" />
-        <div class="count">总人数：<countup endVal="124563" /></div>
+        <div class="count">总人数：<countup :end-val="channelTotal" /></div>
         <ticket />
       </div>
     </div>
@@ -196,6 +201,19 @@
   import ticket from './ticket.vue'
 
   const homeData = inject('homeData')
+
+  const ageRateTotal = computed(() => {
+    return homeData.value?.userPortrait.genderRate.reduce(
+      (total, current) => Number(current.count) + total,
+      0
+    )
+  })
+  const channelTotal = computed(() => {
+    return homeData.value?.userPortrait.channel.reduce(
+      (total, current) => Number(current.count) + total,
+      0
+    )
+  })
 </script>
 
 <style lang="scss" scoped>

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

@@ -164,7 +164,7 @@
       <div class="box-1">
         <div class="pt-10">
           <Title3 title="拥堵路段总数" />
-          <traffic-flow />
+          <traffic />
         </div>
       </div>
       <div class="box-1">
@@ -188,7 +188,7 @@
           <div class="car">
             <div class="label">车总数</div>
             <div class="flex align-center">
-              <countup class="value" :end-val="homeData?.carShipData.car.count" />
+              <countup class="value" :end-val="homeData?.carShipData?.car?.count || 0" />
               <span class="unit">辆</span>
             </div>
           </div>
@@ -198,7 +198,7 @@
               <div>调度</div>
               <div>空余</div>
             </div>
-            <div class="cell" v-for="item in homeData?.carShipData.car.info" :key="index">
+            <div class="cell" v-for="(item, index) in homeData?.carShipData?.car.info" :key="index">
               <div>{{ item.scenic_area }}</div>
               <div>{{ item.started_count }}<span class="unit-1">辆</span></div>
               <div>{{ item.not_started_count }}<span class="unit-1">辆</span></div>
@@ -209,7 +209,7 @@
           <div class="ship">
             <div class="label">车总数</div>
             <div class="flex align-center">
-              <countup class="value" :end-val="homeData?.carShipData.ship.count" />
+              <countup class="value" :end-val="homeData?.carShipData?.ship?.count || 0" />
               <span class="unit">辆</span>
             </div>
             <div class="table">
@@ -259,7 +259,7 @@
           </div>
         </div>
         <div>
-          <div class="lodging">
+          <div class="occupancy">
             <Title3 title="酒店入住人数及入住率" />
           </div>
           <occupancy />
@@ -273,7 +273,7 @@
   import jam from './jam.vue'
   import vacancy from './vacancy.vue'
   import occupancy from './occupancy.vue'
-  import TrafficFlow from './traffic-flow.vue'
+  import traffic from './traffic.vue'
   import countup from 'vue-countup-v3'
   import icon1 from '@/assets/images/icon-1.png'
   import icon2 from '@/assets/images/icon-2.png'
@@ -519,7 +519,7 @@
       }
     }
   }
-  .lodging {
+  .occupancy {
     :deep(.title-3) {
       margin-top: vh(10);
     }

src/views/home/components/occupancy.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="lodging-ratio" id="lodging-ratio" />
+  <div class="lodging-ratio" :id="id" />
 </template>
 
 <script setup>
   import { fitChartSize } from '@/utils/dataUtil'
-  import * as echarts from 'echarts'
+  import { useEchart } from '@/hooks/echart'
 
-  let topChart = null
+  const { id, setOption } = useEchart()
-  let result = [
+
-    { name: '酒店1', value: 86 },
+  const homeData = inject('homeData')
-    { name: '酒店2', value: 83 },
+  watch(
-    { name: '酒店3', value: 73 }
+    () => homeData.value?.hotelData?.list,
-  ]
+    () => {
-  let option = {
+      setOption({
         backgroundColor: 'transparent',
         tooltip: {
           show: false
@@ -40,7 +40,7 @@
             axisTick: {
               show: false
             },
-        data: result.map((item) => item.name),
+            data: homeData.value?.hotelData?.list.map((item) => item.hotel_name),
             axisLabel: {
               show: false
             }
@@ -76,7 +76,7 @@
                 }
               }
             },
-        data: result.map((item) => item.value)
+            data: homeData.value?.hotelData?.list.map((item) => item.occupancy_rate)
           }
         ],
         series: [
@@ -103,10 +103,10 @@
                 return params.data.name
               }
             },
-        data: result.map((item, index) => {
+            data: homeData.value?.hotelData?.list.map((item) => {
               return {
-            name: item.name,
+                name: item.hotel_name,
-            value: item.value,
+                value: item.occupancy_rate,
                 itemStyle: {
                   barBorderRadius: [3, 0, 0, 3],
                   color: {
@@ -140,10 +140,10 @@
             symbol: 'circle',
             symbolSize: fitChartSize(10),
             z: 2,
-        data: result.map((item, index) => {
+            data: homeData.value?.hotelData?.list.map((item) => {
               return {
-            name: item.name,
+                name: item.hotel_name,
-            value: item.value,
+                value: item.occupancy_rate,
                 itemStyle: {
                   color: '#fff',
                   opacity: 1
@@ -153,22 +153,9 @@
             animationDelay: 500
           }
         ]
-  }
-  const init = () => {
-    topChart = echarts.init(document.getElementById('lodging-ratio'))
-    topChart.setOption(option)
-  }
-  const resize = () => {
-    if (topChart) {
-      topChart.dispose()
-      topChart = null
-      init()
-    }
-  }
-  onMounted(() => {
-    init()
-    window.addEventListener('resize', resize)
       })
+    }
+  )
 </script>
 
 <style scoped lang="scss">

src/views/home/components/ticket.vue

@@ -1,55 +1,31 @@
 <template>
-  <div class="ticket" id="ticket" />
+  <div class="ticket" :id="id" />
 </template>
 
 <script setup>
   import { fitChartSize } from '@/utils/dataUtil'
-  import * as echarts from 'echarts'
+  import { useEchart } from '@/hooks/echart'
 
-  let ticketChart = null
+  const { id, setOption } = useEchart()
-  var qxzbData = [
+
-    {
+  const homeData = inject('homeData')
-      name: '处理中',
+
-      value: 500,
+  let x = 15
-      full: 1000 // 最大值
+  let y = 25
-    },
+
-    {
+  watch(
-      name: '超期中',
+    () => homeData.value?.userPortrait?.channel,
-      value: 756,
+    () => {
-      full: 1000
+      setOption({
-    },
-    {
-      name: '延期中',
-      value: 800,
-      full: 1000
-    }
-  ]
-  var returnData = function (qxzbData, name) {
-    for (var a = 0; a < qxzbData.length; a++) {
-      if (qxzbData[a].name == name) {
-        return qxzbData[a].value
-      }
-    }
-  }
-  let option = {
         backgroundColor: 'transparent',
-    tooltip: {
-      trigger: 'item',
-      formatter: function (rsp) {
-        if (rsp.name != '') {
-          return rsp.name + '<br/>' + rsp.marker + ' ' + rsp.value + ' （' + rsp.percent + '）'
-        }
-      }
-    },
         legend: {
           x: 'center',
           y: 'bottom',
-      data: qxzbData,
           itemHeight: fitChartSize(8),
           itemWidth: fitChartSize(8),
           itemGap: fitChartSize(20),
           formatter: function (name) {
-        return '{title|' + name + '}  {value|' + returnData(qxzbData, name) + '}'
+            return '{title|' + name + '}'
           },
           textStyle: {
             rich: {
@@ -65,126 +41,33 @@
           }
         },
         color: ['#F15A25', '#01FEFE', '#12B5FD'],
-    series: [
+        series: homeData.value?.userPortrait?.channel.map((item, index) => {
-      {
+          return {
-        name: qxzbData[0].name, //最里面的圈
+            name: item.name,
             type: 'pie',
-        clockWise: false, //顺时加载
+            clockwise: false, //顺时加载
-        radius: ['15%', '25%'],
+            radius: [`${x * (index + 1)}%`, `${y + index * 15}%`],
             center: ['50%', '40%'],
-        label: {
+            label: { show: false },
-          normal: {
+            labelLine: { show: false },
-            show: false
+            emphasis: { show: false },
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        itemStyle: {
-          emphasis: {
-            show: false
-          }
-        },
             data: [
               {
-            value: qxzbData[0].value,
+                value: parseFloat(item.value),
-            name: qxzbData[0].name
+                name: item.name
               },
               {
-            value: qxzbData[0].full,
+                value: 100,
                 itemStyle: {
-              normal: {
                   color: '#07439C'
                 }
               }
-          }
-        ]
-      },
-      {
-        name: qxzbData[1].name, //第二个圈
-        type: 'pie',
-        clockWise: false, //顺时加载
-        radius: ['30%', '40%'],
-        center: ['50%', '40%'],
-        label: {
-          normal: {
-            show: false
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        itemStyle: {
-          emphasis: {
-            show: false
-          }
-        },
-        data: [
-          {
-            value: qxzbData[1].value,
-            name: qxzbData[1].name
-          },
-          {
-            value: qxzbData[1].full,
-            itemStyle: {
-              normal: {
-                color: '#07439C'
-              }
-            }
-          }
-        ]
-      },
-      {
-        name: qxzbData[2].name, //最外层圈
-        type: 'pie',
-        clockWise: false, //顺时加载
-        radius: ['45%', '55%'],
-        center: ['50%', '40%'],
-        label: {
-          normal: {
-            show: false
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        itemStyle: {
-          emphasis: {
-            show: false
-          }
-        },
-        data: [
-          {
-            value: qxzbData[2].value,
-            name: qxzbData[2].name
-          },
-          {
-            value: qxzbData[2].full,
-            itemStyle: {
-              normal: {
-                color: '#07439C'
-              }
-            }
-          }
             ]
           }
-    ]
-  }
-  const init = () => {
-    ticketChart = echarts.init(document.getElementById('ticket'))
-    ticketChart.setOption(option)
-    window.addEventListener('resize', resize)
-  }
-  const resize = () => {
-    if (ticketChart) {
-      ticketChart.dispose()
-      ticketChart = null
-      init()
-    }
-  }
-  onMounted(() => {
-    init()
         })
+      })
+    }
+  )
 </script>
 
 <style scoped lang="scss">

src/views/home/components/top.vue

@@ -10,13 +10,6 @@
 
   const homeData = inject('homeData')
 
-  watch(
-    () => homeData.value?.userPortrait?.provinceRate,
-    () => {
-      init()
-    }
-  )
-
   const init = () => {
     setOption({
       backgroundColor: 'transparent',
@@ -138,6 +131,13 @@
       ]
     })
   }
+
+  watch(
+    () => homeData.value?.userPortrait?.provinceRate,
+    () => {
+      init()
+    }
+  )
 </script>
 
 <style scoped lang="scss">

src/views/sentiment/components/area.vue

@@ -1,28 +1,38 @@
 <template>
+  <div class="select-box">
+    <Select v-model="params.id" :options="options" @on-change="initChart" />
+  </div>
   <div class="area" :id="id" />
 </template>
 
 <script setup>
   import { useEchart } from '@/hooks/echart'
   import { fitChartSize } from '@/utils/dataUtil'
-  import { getAreaApi } from '@/api/sentiment.js'
+  import { getAreaApi, getSpotApi } from '@/api/sentiment.js'
 
   const { id, setOption } = useEchart()
+
+  let params = reactive({ id: '' })
+  let option = null
+  let options = ref([])
   const initChart = async () => {
-    let res = await getAreaApi()
+    let res = await getAreaApi(params)
-    setOption({
+    if (option) {
+      option.series[0].data = res.data
+    } else {
+      option = {
         legend: {
-        top: 'top',
+          top: '10%',
-        itemWidth: fitChartSize(30),
+          itemWidth: fitChartSize(20),
-        itemHeight: fitChartSize(30),
+          itemHeight: fitChartSize(20),
           textStyle: {
-          fontSize: fitChartSize(14),
+            color: '#fff',
-          color: '#fff'
+            fontSize: fitChartSize(20)
           }
         },
         series: [
           {
-          name: 'Nightingale Chart',
+            name: '',
             type: 'pie',
             radius: ['30%', '60%'],
             center: ['50%', '56%'],
@@ -39,16 +49,29 @@
             data: res.data
           }
         ]
-    })
+      }
+    }
+    setOption(option)
+  }
+  const getStop = async () => {
+    let res = await getSpotApi()
+    options.value = res.data
   }
   onMounted(() => {
+    getStop()
     initChart()
   })
 </script>
 
 <style scoped lang="scss">
+  .select-box {
+    position: absolute;
+    z-index: 9999;
+    top: vh(40);
+    right: vw(10);
+  }
   .area {
-    width: vw(740);
+    width: vw(840);
     height: vh(400);
   }
 </style>

src/views/sentiment/index.vue

@@ -38,7 +38,9 @@
     <div class="flex mt-10">
       <div class="box-2 mr-10 rela">
         <Title1 title="舆情指数" />
-        <div class="dropdown"> <Dropdown :options="options" @on-change="onChange" /> </div>
+        <div class="select-box">
+          <Select v-model="params.id" :options="options" @on-change="getLineChart" />
+        </div>
         <Line
           :width="1560"
           :height="400"
@@ -47,7 +49,7 @@
           :seriesConfig="{ smooth: false, symbol: 'circle' }"
         />
       </div>
-      <div class="box-1 mr-10">
+      <div class="box-1 mr-10 rela">
         <Title1 title="地域分析" />
         <Area />
       </div>
@@ -80,9 +82,8 @@
   let unsensitive = ref(0)
   let stateList = ref([])
   let options = ref([])
-  const onChange = (e) => {
+  let params = reactive({ id: '' })
-    getLineChart(e.id)
+
-  }
   const getStop = async () => {
     let res = await getSpotApi()
     options.value = res.data
@@ -97,8 +98,8 @@
     let res = await getStateApi()
     stateList.value = res.data
   }
-  const getLineChart = async (id) => {
+  const getLineChart = async () => {
-    let res = await getLineChartApi({ id })
+    let res = await getLineChartApi(params)
     xAxisData.value = res.data.data
     seriesData.value = res.data.series
   }
@@ -116,9 +117,10 @@
 </script>
 
 <style scoped lang="scss">
-  .dropdown {
+  .select-box {
     position: absolute;
     z-index: 9999;
+    top: vh(10);
     right: vw(10);
   }
   .container {