feat：对接景区接口

src/components/CircleProgress/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    class="progress"
     :id="id"
     :style="{
       width: styleUtil.px2vw(width),
@@ -10,10 +9,11 @@
 </template>
 
 <script setup>
-  import * as echarts from 'echarts'
-  import { guid } from '@/utils/util'
   import styleUtil from '@/utils/styleUtil'
   import { fitChartSize } from '@/utils/dataUtil'
+  import { useEchart } from '@/hooks/echart'
+
+  const { id, setOption } = useEchart()
 
   const props = defineProps({
     width: {
@@ -23,14 +23,36 @@
     height: {
       type: Number,
       default: () => 0
+    },
+    value: {
+      type: Number,
+      default: () => 0
+    },
+    title: {
+      type: [String, Number],
+      default: () => ''
+    },
+    subTitle: {
+      type: [String, Number],
+      default: () => ''
     }
   })
-  let progressChart = null
-  let id = ref(guid())
+
+  watch(
+    () => props.value,
+    (val) => {
+      setTimeout(() => {
+        init()
+      }, 1000)
+    },
+    { immediate: true }
+  )
+
+  let params = null
   let defaultCofig = {
     title: [
       {
-        text: '45.5%',
+        text: props.title,
         x: 'center',
         top: '34%',
         textStyle: {
@@ -39,7 +61,7 @@
         }
       },
       {
-        text: '完成率',
+        text: props.subTitle,
         x: 'center',
         top: '56%',
         textStyle: {
@@ -99,7 +121,7 @@
         },
         data: [
           {
-            value: 50
+            value: props.value
           }
         ]
       },
@@ -151,27 +173,24 @@
         },
         data: [
           {
-            value: 50
+            value: props.value
           }
         ]
       }
     ]
   }
 
-  onMounted(() => {
-    init()
-  })
   const init = () => {
-    // 基于准备好的dom，初始化echarts实例
-    progressChart = echarts.init(document.getElementById(id.value))
-    progressChart.setOption({ ...defaultCofig })
-    window.addEventListener('resize', resize)
-  }
-  const resize = () => {
-    if (progressChart) {
-      progressChart.dispose()
-      init()
+    if (!params) {
+      params = defaultCofig
+    } else {
+      params.title[0].text = props.title
+      params.title[1].text = props.subTitle
+      params.series.map((item) => {
+        item.data[0].value = props.value
+      })
     }
+    setOption(params)
   }
 </script>
 

src/components/CountItem/index.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="count-item">
     <div class="flex align-center">
-      <img src="@/assets/images/dot-primary.svg" />
+      <img v-if="type == 0" src="@/assets/images/dot-primary.svg" />
+      <img v-if="type == 1" src="@/assets/images/dot-error.svg" />
       <span class="label">{{ label }}</span>
     </div>
     <div class="count">
-      <img class="bg" src="@/assets/images/mask-success.png" />
+      <img v-if="type == 0" class="bg" src="@/assets/images/mask-success.png" />
+      <img v-if="type == 1" class="bg" src="@/assets/images/mask-error.png" />
       <div class="flex align-center">
         <countup class="value" :end-val="count" :style="{ color: color }" />
         <span class="suffix" :style="{ color: color }">{{ suffix }}</span>
@@ -26,6 +28,10 @@
       type: Number,
       default: 0
     },
+    type: {
+      type: Number,
+      default: 0
+    },
     color: {
       type: String,
       default: '#02f9fa'

src/components/Header/index.vue

@@ -12,7 +12,12 @@
       >
         {{ item.name }}
       </li>
-      <!-- <el-dropdown v-if="navLeft.length > 3" trigger="click" @command="handleCommand">
+      <!-- v-if="navLeft.length > 3" -->
+      <el-dropdown
+        v-if="router.currentRoute.value.path == '/scenic'"
+        trigger="click"
+        @command="handleCommand"
+      >
         <li
           class="nav-left-item"
           :style="{
@@ -24,12 +29,12 @@
         </li>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item v-for="(item, index) in navLeft" :key="index" :command="item">
+            <el-dropdown-item v-for="(item, index) in otherNav" :key="index" :command="item">
               <span class="label"> {{ item.name }}</span>
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
-      </el-dropdown> -->
+      </el-dropdown>
     </ul>
     <div class="title">
       <span>{{ title }}</span>
@@ -63,9 +68,9 @@
   import title2 from '@/assets/images/title-2.png'
   import title2Select from '@/assets/images/title-2-select.png'
   import { getWeatherApi } from '@/api/home'
-  import { getSpotApi } from '@/api/sentiment'
+  import { getSpotListApi } from '@/api/sentiment'
 
-  const emit = defineEmits(['change'])
+  import pubSub from 'pubsub-js'
 
   const router = useRouter()
 
@@ -78,6 +83,18 @@
   let isBack = ref(false)
   let current = ref(0)
   let otherScenic = ref('')
+  let otherNav = ref([
+    {
+      name: '大窝景区'
+    },
+    {
+      name: '天坑景区'
+    },
+    {
+      name: '旅游环线'
+    }
+  ])
+  let spotList = ref([])
 
   // 补零
   const fillZero = (value) => {
@@ -102,6 +119,7 @@
   const handleBack = () => {
     router.go(-1)
   }
+  const handleCommand = () => {}
   // 点击导航
   const handleNav = (item, index) => {
     if (isSkip.value) {
@@ -111,15 +129,24 @@
       otherScenic.value = ''
       current.value = index
       title.value = item.name
+      pubSub.publish('scenicChange', item)
     }
   }
+
   // 获取天气数据
   const getWeather = async () => {
     let res = await getWeatherApi()
     weatherData.value = res.data
   }
+  // 获取景区列表
+  const getSpotList = async () => {
+    let res = await getSpotListApi()
+    spotList.value = res.data
+  }
   // 设置当前路由导航栏
   const setNav = async () => {
+    navLeft.value = []
+    navRight.value = []
     switch (router.currentRoute.value.path) {
       case '/home':
         title.value = '奉节县旅游指挥调度中心'
@@ -138,55 +165,29 @@
       case '/scenic':
         isSkip.value = false
         isBack.value = true
-        let res = await getSpotApi()
-        navLeft.value = res.data.map((item) => {
-          return {
-            name: item.ssname,
-            id: item.id
-          }
-        })
+        let res = await getSpotListApi()
+        navLeft.value = res.data
         title.value = navLeft.value[current.value].name
-        navRight.value = []
+        pubSub.publish('scenicChange', navLeft.value[current.value])
+
         break
       case '/sentiment':
         title.value = '舆情检测'
-        navLeft.value = []
-        navRight.value = []
+
         isBack.value = true
         break
       case '/workOrder':
         title.value = '工单消息'
-        navLeft.value = []
-        navRight.value = []
         isBack.value = true
         break
       case '/traffic':
         title.value = '交通大屏'
-        navLeft.value = []
-        navRight.value = []
         isBack.value = true
         break
       case '/monitor':
         title.value = '监控大屏'
-        navLeft.value = [
-          {
-            name: '奉节县',
-            path: '/sceneTesting'
-          },
-          {
-            name: '三峡之巅',
-            path: '/sceneTesting'
-          },
-          {
-            name: '白帝城',
-            path: '/sceneTesting'
-          },
-          {
-            name: '龙河桥',
-            path: '/sceneTesting'
-          }
-        ]
-        navRight.value = []
+        let res1 = await getSpotListApi()
+        navLeft.value = res1.data
         isBack.value = true
         break
       case '/sceneTesting':
@@ -240,6 +241,7 @@
   )
   onMounted(() => {
     getWeather()
+    getSpotList()
     getCurrentDate()
     setInterval(() => {
       getCurrentDate()
@@ -253,7 +255,7 @@
     left: vw(326);
     .weather {
       position: absolute;
-      left: 0;
+      right: 0;
       top: vh(10);
       font-weight: 400;
       font-size: vw(18);
@@ -264,7 +266,7 @@
     }
     .date {
       position: absolute;
-      right: 0;
+      left: 0;
       top: vh(10);
       font-weight: 400;
       font-size: vw(18);
@@ -293,7 +295,7 @@
       }
     }
     .title {
-      width: vw(3133);
+      width: vw(3170);
       height: vh(120);
       line-height: vh(90);
       text-align: center;
@@ -316,7 +318,7 @@
     }
     .nav-left {
       position: absolute;
-      right: vw(2100);
+      right: vw(2120);
       top: vh(34);
       display: flex;
       &-item {
@@ -338,7 +340,7 @@
     }
     .nav-right {
       position: absolute;
-      left: vw(2110);
+      left: vw(2130);
       top: vh(34);
       display: flex;
       &-item {