选择组件

src/components/selectDate.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="selectDate">
+    <div
+      v-for="(itm) in btns"
+      :key="itm.val"
+      :class="{ active: itm.val === checkId ,disabled:itm.disabled}"
+      @click="changeFn(itm.val)"
+    >
+      {{ itm.label }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits<{(evt: 'dateChange', type: number): void
+}>()
+const checkId = ref(1)
+const btns = [
+  { val: 3, label: '总', disabled: true },
+  { val: 2, label: '年', disabled: false },
+  { val: 1, label: '月', disabled: false },
+  { val: 0, label: '日', disabled: true }
+]
+function changeFn(id: number) {
+  checkId.value = id
+  emit('dateChange', checkId.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.selectDate {
+  position: absolute;
+  height: 30px;
+  border-radius: 30px;
+  border: solid 1px #2185E8;
+  left: 50%;
+  transform: translate(-50%, 0);
+  top: 10px;
+  z-index: 2;
+  display: flex;
+  cursor: not-allowed;
+
+  &>div {
+    width: 90px;
+    color: white;
+    font-size: 16px;
+    text-align: center;
+    cursor: pointer;
+    line-height: 30px;
+
+    &:not(:first-child) {
+      border-left: solid 1px #2185E8;
+    }
+
+    &.disabled{
+      cursor: not-allowed;
+      pointer-events: none;
+      // background: #ccc;
+    }
+  }
+  .active {
+    background: #2185e860;
+  }
+}
+</style>

src/pages/views/home/components/HomePage.vue

@@ -44,19 +44,10 @@
               :height="455"
               :name="item.name"
             >
-              <div
+              <SelectDate
                 v-if="index === 0"
-                class="dateChange"
-              >
-                <div
-                  v-for="(itm, index) in item.btns"
-                  :key="index"
-                  :class="{ active: index === item.checkId }"
-                  @click="changeFn(index, item)"
-                >
-                  {{ itm }}
-                </div>
-              </div>
+                @date-change="selectDatechange"
+              />
               <Echart :option="item.option" />
             </Box>
           </template>
@@ -292,6 +283,8 @@
 import Layout from '@/components/layout.vue'
 import { onMounted, ref } from 'vue'
 import Box from '@/components/box.vue'
+import SelectDate from '@/components/selectDate.vue'
+
 import { Vue3Marquee } from 'vue3-marquee'
 import { graphic } from 'echarts'
 import Echart from '@/components/chart.vue'
@@ -951,7 +944,6 @@ const rightContent = ref([
 function changeFn(id: number, item: any) {
   item.checkId = id
 }
-const type = 1
 
 async function getBusSummaryInfo() {
   const res = await homeService.getBusSummaryInfo()
@@ -965,7 +957,7 @@ async function getBusSummaryInfo() {
 }
 getBusSummaryInfo()
 
-async function getBusTrafficVolume() {
+async function getBusTrafficVolume(type: number) {
   const res = await homeService.getBusTrafficVolume(type)
   const xData = res.map((item: any) => item.time)
   const trafficVolumeData = res.map((item: any) => item.trafficVolume)
@@ -1009,8 +1001,12 @@ async function getBusWarning() {
 }
 getBusWarning()
 
+function selectDatechange(type: any) {
+  getBusTrafficVolume(type)
+}
+
 onMounted(() => {
-  getBusTrafficVolume()
+  selectDatechange(1)
   getBusStatistics()
 })
 </script>
@@ -1071,35 +1067,6 @@ onMounted(() => {
 
     :deep(.box-content) {
       position: relative;
-
-      .dateChange {
-        position: absolute;
-        height: 30px;
-        border-radius: 30px;
-        border: solid 1px #2185E8;
-        left: 50%;
-        transform: translate(-50%, 0);
-        top: 10px;
-        z-index: 2;
-        display: flex;
-
-        &>div {
-          width: 90px;
-          color: white;
-          font-size: 16px;
-          text-align: center;
-          cursor: pointer;
-          line-height: 30px;
-
-          &:not(:first-child) {
-            border-left: solid 1px #2185E8;
-          }
-        }
-
-        .active {
-          background: #2185e860;
-        }
-      }
     }
 
   }

src/pages/views/home/services/homepage.service.ts

@@ -16,7 +16,7 @@ export default class HomeService extends Service {
   }
 
   /** 客运量数据 type 1月 2年  /homePage/getBusTrafficVolume */
-  async getBusTrafficVolume(type: 1|2) {
+  async getBusTrafficVolume(type: number) {
     const { success, data } = await this.netService.get(`/homePage/getBusTrafficVolume?type=${type}`)
     if (success) {
       return data