feat：完善舆情监测功能

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

@@ -150,12 +150,12 @@
             <span class="text">男性</span>
             <div class="progress">
               <el-progress
-                :percentage="50"
+                :percentage="genderRate['男']"
                 :show-text="false"
                 color="linear-gradient( to right, #074D90 0%, #55E0FF 100%)"
               />
             </div>
-            <span class="man">50%</span>
+            <span class="man">{{ genderRate['男'] }}%</span>
           </div>
         </div>
         <div class="cell pt-20">
@@ -164,13 +164,13 @@
             <span class="text">女性</span>
             <div class="progress">
               <el-progress
-                :percentage="50"
+                :percentage="genderRate['女']"
                 :show-text="false"
                 color="linear-gradient( to right,
               #0A4482 0%, #FF7021 100%)"
               />
             </div>
-            <span class="woman">50%</span>
+            <span class="woman">{{ genderRate['女'] }}%</span>
           </div>
         </div>
       </div>
@@ -189,10 +189,23 @@
 
 <script setup>
   import countup from 'vue-countup-v3'
-  import AgeRatio from './age-ratio.vue'
   import top from './top.vue'
   import gauge from './gauge.vue'
   import ticket from './ticket.vue'
+  import ageRatio from './age-ratio.vue'
+  let props = defineProps({
+    data: {
+      type: Object,
+      default: () => ({})
+    }
+  })
+  let genderRate = computed(() => {
+    if (props.data?.userPortrait) return props.data?.userPortrait.genderRate
+    return {
+      男: 0,
+      女: 0
+    }
+  })
   let xAxisData = ref([
     '12-16 10:00',
     '12-16 14:00',

src/views/home/index.vue

@@ -1,16 +1,21 @@
 <template>
   <Header title="奉节县旅游指挥调度中心" is-skip :nav-left="navLeft" :nav-right="navRight" />
   <CoreVideo />
-  <box2 />
+  <box1 :data="data" />
   <box3 />
   <box4 />
   <Correspondence />
 </template>
 
 <script setup>
-  import box2 from './components/box-2.vue'
+  import box1 from './components/box-1.vue'
   import box3 from './components/box-3.vue'
   import box4 from './components/box-4.vue'
+
+  import { useWebSocket } from '@/hooks/socket'
+
+  const { data, sendMessage } = useWebSocket('ws://36.138.38.16:81/ws/third-party')
+
   const navLeft = [
     { name: '安全', path: '/monitor' },
     { name: '景区', path: '/scenic' },
@@ -22,30 +27,4 @@
     { name: '舆情', path: '/sentiment' },
     { name: '酒店' }
   ]
-  onMounted(() => {
-    let socket = new WebSocket('ws://36.138.38.16:81/ws/third-party', 'echo-protocol', {
-      headers: {
-        Authorization:
-          'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1OWFmNWYwLTU3OWItNDJkNy1hZDJhLTY0Y2JlODA5ZWI1NiJ9.BTxvu6jUWbN0qONWf5K6VzXopE8T8qXzKuX-mij21VJT4U0LdgnqToyqeNDQ2OyJ6cvpdJBzQ9mEEb-dnwrTpQ'
-      }
-    })
-    socket.onopen = () => {
-      console.log('WebSocket connected')
-      socket.send(
-        JSON.stringify({
-          action: 'start',
-          type: 'index'
-        })
-      )
-    }
-    socket.onerror = (error) => {
-      console.error('WebSocket error:', error)
-    }
-    socket.onmessage = (message) => {
-      console.log('Received message:', message.data)
-      let data = JSON.parse(message.data)
-      console.log('Received message:', data)
-    }
-    socket.onclose = () => {}
-  })
 </script>