4.1

src/components/Title2/index.vue

@@ -3,16 +3,18 @@
     <span>{{ title }}</span>
   </div>
   <div v-if="type==2" class="title-2">
-	  <div class="item active">
+	  <div @click="handleTitleClick(0)" class="item " :class="current==0?'active':''" >
-		  <span >{{ title }}</span>
+		  <span >景区购票</span>
 	  </div>
-	  <div class="item">
+	  <div @click="handleTitleClick(1)" class="item" :class="current==1?'active':''">
 		  <span>直通车购票</span>
 	  </div>
   </div>
 </template>
 
 <script setup>
+  let current = ref(0)
+  const emits = defineEmits(['changClick'])
   let props = defineProps({
     title: {
       type: String,
@@ -23,6 +25,10 @@
 		default:1
 	}
   })
+  const handleTitleClick = (index)=>{
+	  current.value = index
+	  emits('changClick',index)
+  }
 </script>
 
 <style scoped lang="scss">

src/stores/home.js

@@ -15,6 +15,14 @@ export const useHomeStore = defineStore('home', () => {
       { name: '3天后购票量：', value: 0 }
     ]
   })
+  //直通车购票
+  let trainData = ref({
+	  data: [
+	    { name: '当日购票量：', value: 0 },
+	    { name: '未来3天购票量：', value: 0 },
+	    { name: '3天后购票量：', value: 0 }
+	  ]
+  })
   // 景区排队数据
   let scenicQueueData = ref({
     dataList: [],
@@ -142,10 +150,16 @@ export const useHomeStore = defineStore('home', () => {
   const setScenicData = (val) => {
     scenicData.value = val
   }
+  // 直通车
+  const setTrainData = (val)=>{
+	  trainData.value = val
+  }
   const setUserPortraitData = (val) => {
     userPortraitData.value = val
   }
   return {
+	trainData,
+	setTrainData,
     scenicData,
     userPortraitData,
     baiduMapData,

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

@@ -69,7 +69,7 @@
     </div>
 
     <div class="ticket-box">
-      <Title2 :type="2" title="景区购票" />
+      <Title2 @changClick="CheckClick" :type="2" title="景区购票" />
 	  
 	<!-- <div class="select-box">
 	    <Select
@@ -147,8 +147,10 @@
 	  }
   ])
   const homeStore = useHomeStore()
-  const getScenicChart = ()=>{
+  const countList = ref([])
-	  
+  const CheckClick = (index)=>{
+	  if(index==0) countList.value = homeStore.scenicData.data;
+	  if(index==1) countList.value =  homeStore.trainData.data; 
   }
   // 今日景区承载量
   const scenicBearList = computed(() => {
@@ -167,6 +169,9 @@
   const scenicQueueXAxisData = computed(() => {
     return homeStore.scenicQueueData.dataList.map((item) => item.name)
   })
+  onMounted(()=>{
+	  countList.value = homeStore.scenicData.data;
+  })
 </script>
 
 <style lang="scss" scoped>