feat:大屏数据对接;

src/api/home.ts

@@ -3,14 +3,15 @@
  * @description 查询数据
  */
 import request from '@/utils/request';
+
 /**
  * @description 查询数据
  */
 export const getData = () => {
-	return request({
-		url: `/api/v1/Bs/datashow`,
-		method: 'get'
-	});
+    return request({
+        url: `/api/v1/Bs/datashow`,
+        method: 'get'
+    });
 };
 /**
  * @description 分机列表
@@ -18,11 +19,11 @@ export const getData = () => {
  * @return {*}
  */
 export const extensionPaged = (params?: object) => {
-	return request({
-		url: `/api/v1/IPPbx/query-telstate`,
-		method: 'get',
-		params,
-	});
+    return request({
+        url: `/api/v1/IPPbx/query-telstate`,
+        method: 'get',
+        params,
+    });
 };
 /**
  * @description 坐席数据查询
@@ -30,9 +31,130 @@ export const extensionPaged = (params?: object) => {
  * @return {*}
  */
 export const agentPaged = (params?: object) => {
-	return request({
-		url: `/api/v1/Seat/base_data`,
-		method: 'get',
-		params,
-	});
+    return request({
+        url: `/api/v1/Seat/base_data`,
+        method: 'get',
+        params,
+    });
 }
+
+/**
+ * @description 工单统计数据
+ * @param {object} params
+ * @return {*}
+ */
+export const workOrder = (params?: object) => {
+    return request({
+        url: `/api/v1/DataScreen/order-statistics`,
+        method: 'get',
+        params,
+    });
+}
+/**
+ * @description 知识库统计
+ * @param {object} params
+ * @return {*}
+ */
+export const knowledge = (params?: object) => {
+    return request({
+        url: `/api/v1/DataScreen/knowledge-statistics`,
+        method: 'get',
+        params,
+    });
+}
+/**
+ * @description 受理类型办件分析
+ * @param {object} params
+ * @return {*}
+ */
+export const acceptType = (params?: object) => {
+    return request({
+        url: `/api/v1/DataScreen/ordertype-statistics`,
+        method: 'get',
+        params,
+    });
+}
+/**
+ * @description 热点预警
+ * @param {object} params
+ * @return {*}
+ */
+export const hotSpot = (params?: object) => {
+    return request({
+        url: `/api/v1/DataScreen/earlywarning-statistics`,
+        method: 'get',
+        params,
+    });
+}
+/**
+ * @description 工单当日统计及环比
+ * @param {object} params
+ * @return {*}
+ */
+export const orderDay = (params?: object) => {
+    return request({
+        url: `/api/v1/DataScreen/ordercount-statistics`,
+        method: 'get',
+        params,
+    });
+}
+/**
+ * @description 区域受理排行
+ * @param {object} params
+ * @return {*}
+ */
+export const areaAccept = (params?: object) => {
+    return request({
+        url: `/api/v1/DataScreen/orderarea-accept-statistics`,
+        method: 'get',
+        params,
+    });
+}
+/**
+ * @description 办理中工单阅览
+ * @param {object} params
+ * @return {*}
+ */
+export const orderView = (params?: object) => {
+    return request({
+        url: `/api/v1/DataScreen/order-handling-query`,
+        method: 'get',
+        params,
+    });
+}
+/**
+ * @description 近30天高频事项预警
+ * @param {object} params
+ * @return {*}
+ */
+export const highFrequency = (params?: object) => {
+    return request({
+        url: `/api/v1/DataScreen/highmatter-warning`,
+        method: 'get',
+        params,
+    });
+}
+/**
+ * @description 部门满意度排行
+ * @param {object} params
+ * @return {*}
+ */
+export const departmentSatisfaction = (params?: object) => {
+    return request({
+        url: `/api/v1/DataScreen/ordervisit-orgsatisfaction-rank`,
+        method: 'get',
+        params,
+    });
+}
+/**
+ * @description 占比分析
+ * @param {object} params
+ * @return {*}
+ */
+export const proportionAnalysis = (params?: object) => {
+    return request({
+        url: `/api/v1/DataScreen/order-source-accepttype-statistics`,
+        method: 'get',
+        params,
+    });
+}

src/router/index.ts

@@ -1,50 +1,51 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import {createRouter, createWebHistory} from 'vue-router'
 import type {RouteRecordRaw} from "vue-router"
+
 const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    redirect: '/index',
-  },
-  {
-    path: '/index',
-    name: 'index',
-    component: () => import('@/views/index/index.vue'),
-    meta: {
-      title: '宜宾市12345数据大屏',
-    }
-  },
-  {
-    path: '/seats',
-    name: 'seats',
-    component: () => import('@/views/seats/index.vue'),
-    meta: {
-      title: '宜宾市12345坐席监控中心',
-    }
-  },{
-    path: '/home',
-    name: 'home',
-    component: () => import('@/views/home/index.vue'),
-    meta: {
-      title: '宜宾市12345数据大屏(开发中)',
-    }
-  },
-  {
-    path: '/:pathMatch(.*)',
-    name: 'notFound',
-    component: () => import('@/views/error/404.vue'),
-    meta: {
-      title: '404',
-      isHide: true,
+    {
+        path: '/',
+        redirect: '/index',
+    },
+    {
+        path: '/index',
+        name: 'index',
+        component: () => import('@/views/index/index.vue'),
+        meta: {
+            title: '宜宾市12345数据大屏',
+        }
+    },
+    {
+        path: '/seats',
+        name: 'seats',
+        component: () => import('@/views/seats/index.vue'),
+        meta: {
+            title: '宜宾市12345坐席监控中心',
+        }
+    }, {
+        path: '/home',
+        name: 'home',
+        component: () => import('@/views/home/index.vue'),
+        meta: {
+            title: '宜宾市12345政务服务便民热线',
+        }
+    },
+    {
+        path: '/:pathMatch(.*)',
+        name: 'notFound',
+        component: () => import('@/views/error/404.vue'),
+        meta: {
+            title: '404',
+            isHide: true,
+        },
     },
-  },
 ]
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes,
 })
 
 router.beforeEach((to, from, next) => {
-  next();
+    next();
 })
 
 export default router

src/views/home/center-bottom.vue

@@ -17,22 +17,22 @@
         <div class="table-header-item">接办部门</div>
       </div>
       <div class="scroll">
-        <vue3-seamless-scroll :list="state.list" hover :singleHeight="100">
-          <div class="item" v-for="(item, index) in state.list" :key="index">
+        <vue3-seamless-scroll :list="list" hover :singleHeight="100">
+          <div class="item" v-for="(item, index) in list" :key="index">
             <span>
-              <span class="exceedSoon" v-if="item.exceed === '即将超期'">{{ item.exceed }}</span>
-              <span class="exceed" v-if="item.exceed === '已超期'">{{ item.exceed }}</span>
-              <span class="normal" v-if="item.exceed === '正常'">{{ item.exceed }}</span>
+              <span class="exceedSoon" v-if="item.expiredStatus === 1">{{ item.expiredStatusText }}</span>
+              <span class="exceed" v-if="item.expiredStatus === 2">{{ item.expiredStatusText }}</span>
+              <span class="normal" v-if="item.expiredStatus === 0">{{ item.expiredStatusText }}</span>
             </span>
-            <span>{{ item.source }}</span>
+            <span>{{ item.sourceChannel }}</span>
             <el-tooltip placement="top">
               <template #content> {{ item.title }}</template>
               <span>{{ item.title }}</span>
             </el-tooltip>
             <span>{{ item.acceptType }}</span>
-            <span>{{ item.hotspot }}</span>
-            <span>{{ item.area }}</span>
-            <span>{{ item.department }}</span>
+            <span>{{ item.hotspotName }}</span>
+            <span>{{ item.county }}</span>
+            <span>{{ item.actualHandleOrgName }}</span>
           </div>
         </vue3-seamless-scroll>
       </div>
@@ -40,80 +40,25 @@
   </div>
 </template>
 <script setup lang="ts">
-import {reactive} from "vue";
+import {ref, onMounted} from "vue";
 import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
+import {orderView} from "api/home";
+import dayjs from "dayjs";
 
-const state = reactive<any>({
-  list: [
-    {
-      exceed: '即将超期',
-      source: '电话',
-      title: "Vue3.0 无缝滚动组件展示数据第1条",
-      acceptType: '投诉',
-      hotspot: '环境保护',
-      area: '宜宾市',
-      department: '市容卫士'
-    },
-    {
-      exceed: '已超期',
-      source: '电话',
-      title: "Vue3.0 无缝滚动组件展示数据第2条",
-      acceptType: '投诉',
-      hotspot: '环境保护',
-      area: '宜宾市',
-      department: '市容卫士'
-    }, {
-      exceed: '正常',
-      source: '电话',
-      title: "Vue3.0 无缝滚动组件展示数据第3条",
-      acceptType: '投诉',
-      hotspot: '环境保护',
-      area: '宜宾市',
-      department: '市容卫士'
-    }, {
-      exceed: '即将超期',
-      source: '电话',
-      title: "Vue3.0 无缝滚动组件展示数据第4条",
-      acceptType: '投诉',
-      hotspot: '环境保护',
-      area: '宜宾市',
-      department: '市容卫士'
-    }, {
-      exceed: '即将超期',
-      source: '电话',
-      title: "Vue3.0 无缝滚动组件展示数据第5条",
-      acceptType: '投诉',
-      hotspot: '环境保护',
-      area: '宜宾市',
-      department: '市容卫士'
-    }, {
-      exceed: '即将超期',
-      source: '电话',
-      title: "Vue3.0 无缝滚动组件展示数据第6条",
-      acceptType: '投诉',
-      hotspot: '环境保护',
-      area: '宜宾市',
-      department: '市容卫士'
-    }, {
-      exceed: '即将超期',
-      source: '电话',
-      title: "Vue3.0 无缝滚动组件展示数据第7条",
-      acceptType: '投诉',
-      hotspot: '环境保护',
-      area: '宜宾市',
-      department: '市容卫士'
-    }, {
-      exceed: '即将超期',
-      source: '电话',
-      title: "Vue3.0 无缝滚动组件展示数据第8条",
-      acceptType: '投诉',
-      hotspot: '环境保护',
-      area: '宜宾市',
-      department: '市容卫士'
-    },
-  ]
-});
+const list = ref([])
+const getData = async () => {
+  try {
+    const {result} = await orderView();
+    list.value = result;
+  } catch (e) {
+    console.log(e);
+  }
+}
+onMounted(() => {
+  getData();
+})
 </script>
+
 <style scoped lang="scss">
 .center_bottom {
   padding: 0 30px;

src/views/home/center-float.vue

@@ -9,17 +9,33 @@
     <div class="table-body">
       <div v-for="(item,index) in list" :key="item.id" class="table-body-item">
         <span :class="index<=2 ? 'num' : ''"><CountUp :endVal="index + 1" :duration="1"/></span>
-        <span :class=" (index<=2 ? 'color' : '')">{{ item.area }}</span>
-        <span :class=" (index<=2 ? 'color' : '')"> <CountUp :endVal="item.acceptNum" :duration="2"/></span>
-        <span class="color">{{ item.finishRate }}</span>
+        <span :class=" (index<=2 ? 'color' : '')">{{ item.areaName }}</span>
+        <span :class=" (index<=2 ? 'color' : '')"> {{ item.acceptedCount }}</span>
+        <span class="color">{{ item.completionRate }}%</span>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import {ref} from 'vue'
+import {ref, onMounted, watch} from 'vue'
 import CountUp from "@/components/count-up";
+import dayjs from "dayjs";
+import {areaAccept} from "api/home";
 
+const props = defineProps({
+  dateArray: {
+    type: Array,
+    default: () => []
+  }
+})
+const date = ref([]);
+watch(() => props.dateArray, (val: any) => {
+  date.value = val;
+}, {immediate: true})
+
+watch(() => props.dateArray, (val: any) => {
+  getData();
+})
 const list = ref([
   {
     id: 1,
@@ -82,6 +98,22 @@ const list = ref([
     finishRate: '100%'
   }
 ])
+const getData = async () => {
+  try {
+    const {result} = await areaAccept({
+      StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
+      EndDate: dayjs(date.value[1]).format('YYYY-MM-DD'),
+    });
+    list.value = result;
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+
+onMounted(() => {
+  getData();
+});
 </script>
 <style scoped lang="scss">
 .center-float {

src/views/home/center-map.vue

@@ -66,7 +66,6 @@ const tooltipMap = (myChart, option) => {
 };
 setTimeout(() => {
   tooltipMap(centerMapRef.value!.chart, option.value);
-  console.log(centerMapRef)
   centerMapRef.value.setOption(option.value);
 }, 1000);
 

src/views/home/center-top.vue

@@ -3,40 +3,61 @@
     <div class="center-top-box">
       <div class="center-top-box-title">
         <span>今日工单量</span>
-        <span class="center-top-box-title-hb">环比+12.5%</span>
+        <span class="center-top-box-title-hb">环比 {{ state.orderDay.toDayQoQ }}%</span>
       </div>
       <div class="center-top-box-num">
-        <CountFlop :val="2364" suffix=""/>
+        <CountFlop :val="state.orderDay.toDayCount"/>
         <span>件</span>
       </div>
     </div>
     <div class="center-top-box">
       <div class="center-top-box-title">
-        <span>今日工单量</span>
-        <span class="center-top-box-title-hb">环比+12.5%</span>
+        <span>本月工单量</span>
+        <span class="center-top-box-title-hb">环比 {{ state.orderDay.toMonthQoQ }}%</span>
       </div>
       <div class="center-top-box-num num-2">
-        <CountFlop :val="16322" suffix=""/>
+        <CountFlop :val="state.orderDay.toMonthCount" suffix=""/>
         <span>件</span>
       </div>
     </div>
     <div class="center-top-box">
       <div class="center-top-box-title">
-        <span>今日工单量</span>
-        <span class="center-top-box-title-hb">环比+12.5%</span>
+        <span>本年工单量</span>
+        <span class="center-top-box-title-hb">环比 {{ state.orderDay.toYearQoQ }}%</span>
       </div>
       <div class="center-top-box-num num-3">
-        <CountFlop :val="32722" suffix=""/>
+        <CountFlop :val="state.orderDay.toYearCount" suffix=""/>
         <span>件</span>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import {defineAsyncComponent} from "vue";
+import {defineAsyncComponent, reactive, onMounted} from "vue";
+import {orderDay} from '@/api/home';
 
 const CountFlop = defineAsyncComponent(() => import('@/components/Count-flop/index.vue'));
-
+const state = reactive({
+  orderDay: {
+    toDayCount: 920132131,
+    toDayQoQ: 0,
+    toMonthCount: 0,
+    toMonthQoQ: 0,
+    toYearCount: 0,
+    toYearQoQ: 0
+  }
+})
+const getData = async () => {
+  try {
+    const {result} = await orderDay();
+    state.orderDay = result;
+  } catch (error) {
+    console.log(error);
+  }
+}
+onMounted(() => {
+  getData();
+})
 </script>
 <style scoped lang="scss">
 .center-top {
@@ -52,6 +73,8 @@ const CountFlop = defineAsyncComponent(() => import('@/components/Count-flop/ind
   }
 
   .center-top-box {
+    width: 242px;
+
     &:nth-child(1) {
       color: #24FFFB;
     }

src/views/home/center.map.ts

@@ -45,7 +45,6 @@ export const optionHandle = (regionCode: string,
                 }
             },
             formatter: function (params: any) {
-                console.log(params)
                 let tipHtml = '';
                 tipHtml = `
                     <div class="custom-tooltip-style">
@@ -195,6 +194,7 @@ export const optionHandle = (regionCode: string,
                 showLegendSymbol: true,
                 label: {
                     show: true,
+                    color: '#ccc'
                 },
                 itemStyle: {
                     areaColor: {

src/views/home/container.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="container-box">
     <div class="container-left">
-      <LeftTop class="container-left-top"/>
-      <LeftCenter class="container-left-center"/>
-      <LeftBottom class="container-left-bottom"/>
+      <LeftTop class="container-left-top" :dateArray="dateArray"/>
+      <LeftCenter class="container-left-center" :dateArray="dateArray"/>
+      <LeftBottom class="container-left-bottom" :dateArray="dateArray"/>
     </div>
     <div class="container-center">
-      <CenterTop class="container-center-top"/>
-      <CenterMap class="container-center-map"/>
-      <CenterFloat class="container-center-float"/>
-      <CenterBottom class="container-center-bottom"/>
+      <CenterTop class="container-center-top" :dateArray="dateArray"/>
+      <CenterMap class="container-center-map" :dateArray="dateArray"/>
+      <CenterFloat class="container-center-float" :dateArray="dateArray"/>
+      <CenterBottom class="container-center-bottom" :dateArray="dateArray"/>
     </div>
     <div class="container-right">
-      <RightTop class="container-right-top"/>
-      <RightCenter class="container-right-center"/>
-      <RightBottom class="container-right-bottom"/>
+      <RightTop class="container-right-top" :dateArray="dateArray"/>
+      <RightCenter class="container-right-center" :dateArray="dateArray"/>
+      <RightBottom class="container-right-bottom" :dateArray="dateArray"/>
     </div>
   </div>
 </template>
@@ -29,6 +29,13 @@ import CenterBottom from "@/views/home/center-bottom.vue";
 import RightTop from "@/views/home/right-top.vue";
 import RightCenter from "@/views/home/right-center.vue";
 import RightBottom from "@/views/home/right-bottom.vue";
+
+const props = defineProps({
+  dateArray: {
+    type: Array,
+    default: () => []
+  }
+})
 </script>
 <style scoped lang="scss">
 .container-box {

src/views/home/header.vue

@@ -9,11 +9,13 @@
           start-placeholder="开始时间"
           end-placeholder="结束时间"
           :shortcuts="shortcuts"
+          :clearable="false"
+          @change="changeDate"
       />
     </div>
     <div class="d-flex jc-center">
       <div class="title">
-        <span class="title-text">宜宾市12345政务服务便民热线</span>
+        <span class="title-text">{{ title }}</span>
       </div>
     </div>
     <div class="timers">
@@ -25,11 +27,17 @@
 import {reactive, ref} from "vue";
 import dayjs from "dayjs";
 
+const emit = defineEmits(["changeDate"]);
+
+const title = ref("宜宾市12345政务服务便民热线");
 const timeValue = ref<any>([
   dayjs().subtract(1, "month").toDate(),
   dayjs().toDate(),
 ]); //默认近一个月
-
+emit("changeDate", timeValue.value);
+const changeDate = (val: any) => {
+  emit("changeDate", val);
+};
 const shortcuts = [
   {
     text: '上一周',
@@ -69,7 +77,7 @@ const dateData = reactive<any>({
 const weekday = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
 const timeFn = () => {
   dateData.timing = setInterval(() => {
-    dateData.dateDay = dayjs().format("YYYY-MM-DD hh : mm : ss");
+    dateData.dateDay = dayjs().format("YYYY-MM-DD hh:mm:ss");
     dateData.dateWeek = weekday[dayjs().day()];
   }, 1000);
 };

src/views/home/index.vue

@@ -12,26 +12,31 @@
       :autoScale="isScale"
   >
     <div class="home-content-wrap">
-      <Headers />
-      <Container />
+      <Headers @changeDate="changeDate"/>
+      <Container :dateArray="dateArray"/>
     </div>
   </scale-screen>
 </template>
 <script setup lang="ts" name="home">
-import {defineAsyncComponent} from "vue";
+import {defineAsyncComponent, ref} from "vue";
 import {useSettingStore} from "@/stores/setting";
 import {storeToRefs} from "pinia";
+
 const ScaleScreen = defineAsyncComponent(() => import('@/components/scale-screen'));
 const Headers = defineAsyncComponent(() => import('@/views/home/header.vue'));
 const Container = defineAsyncComponent(() => import('@/views/home/container.vue'));
 
 const settingStore = useSettingStore();
-const { isScale } = storeToRefs(settingStore);
+const {isScale} = storeToRefs(settingStore);
 const wrapperStyle = {};
+const dateArray = ref([]);
+const changeDate = (date: any[]) => {
+  dateArray.value = date;
+};
 </script>
 
 <style scoped lang="scss">
-.home-content-wrap{
+.home-content-wrap {
   width: 100%;
   height: 100%;
   box-sizing: border-box;

src/views/home/left-bottom.vue

@@ -5,30 +5,27 @@
         <img src="@/assets/img/home/title_arrow.png" alt="">
         预警热点
       </div>
-      <el-dropdown>
+      <el-dropdown @command="handleCommand">
         <el-button type="primary" link>
-          宜宾市
+          {{ areaText }}
           <el-icon class="el-icon--right">
             <arrow-down/>
           </el-icon>
         </el-button>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item>Action 1</el-dropdown-item>
-            <el-dropdown-item>Action 2</el-dropdown-item>
-            <el-dropdown-item>Action 3</el-dropdown-item>
-            <el-dropdown-item>Action 4</el-dropdown-item>
-            <el-dropdown-item>Action 5</el-dropdown-item>
+            <el-dropdown-item v-for="item in areaList" :key="item.value" :command="item">{{ item.name }}</el-dropdown-item>
+            "
           </el-dropdown-menu>
         </template>
       </el-dropdown>
     </div>
     <div class="left_bottom-content">
-      <div class="left_bottom-content-item" v-for="item in state.list" :key="item.id">
-        <span class="left_bottom-content-item-title text-ellipsis text-no-wrap" style="display:inline-block;max-width: 100px" :title="item.title">{{ item.title }}</span>
+      <div class="left_bottom-content-item" v-for="item in list" :key="item.hotspotId">
+        <span class="left_bottom-content-item-title text-ellipsis text-no-wrap" style="display:inline-block;max-width: 100px" :title="item.hotspotName">{{ item.hotspotName }}</span>
         <div class="left_bottom-content-item-content">
           <b>
-            <CountUp :endVal="item.num" :duration="3"/>
+            <CountUp :endVal="item.sumCount" :duration="3"/>
           </b>件
         </div>
         <img src="@/assets/img/home/zhui.png" alt="">
@@ -37,44 +34,96 @@
   </div>
 </template>
 <script setup lang="ts">
-import SeamlessScroll from "@/components/seamless-scroll";
-import {computed, onMounted, onUnmounted, reactive} from "vue";
-import {useSettingStore} from "@/stores/setting";
-import {storeToRefs} from "pinia";
-import EmptyCom from "@/components/empty-com";
-import {formatDate} from "@/utils/formatTime";
-import mittBus from '@/utils/mitt';
+import {onMounted, reactive, ref, watch} from "vue";
 import {ArrowDown} from '@element-plus/icons-vue'
 import CountUp from "@/components/count-up";
+import {hotSpot} from "@/api/home";
+import dayjs from "dayjs";
 
-const state = reactive<any>({
-  list: [
-    {
-      id: 1,
-      title: '农村管理农村管理农村管理农村管理农村管理农村管理',
-      num: 1,
-    },
-    {
-      id: 2,
-      title: '环境保护环境保护环境保护环境保护环境保护',
-      num: 12,
-    },
-    {
-      id: 3,
-      title: '公共服务',
-      num: 123,
-    },
-    {
-      id: 4,
-      title: '政务服务公共服务公共服务公共服务',
-      num: 89,
-    },
-    {
-      id: 5,
-      title: '城市管理',
-      num: 72,
-    }
-  ]
+const props = defineProps({
+  dateArray: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const areaList = ref([
+  {
+    name: '宜宾市',
+    value: '511500'
+  },
+  {
+    name: '翠屏区',
+    value: '511502'
+  },
+  {
+    name: '南溪区',
+    value: '511503'
+  },
+  {
+    name: '叙州区',
+    value: '511504'
+  },
+  {
+    name: '江安县',
+    value: '511523'
+  },
+  {
+    name: '长宁县',
+    value: '511524'
+  },
+  {
+    name: '高县',
+    value: '511525'
+  },
+  {
+    name: '珙县',
+    value: '511526'
+  },
+  {
+    name: '筠连县',
+    value: '511527'
+  },
+  {
+    name: '兴文县',
+    value: '511528'
+  },
+  {
+    name: '屏山县',
+    value: '511529'
+  }
+]);
+const date = ref([]);
+watch(() => props.dateArray, (val: any) => {
+  date.value = val;
+}, {immediate: true})
+
+watch(() => props.dateArray, (val: any) => {
+  getData();
+})
+const areaCode = ref('511500');
+const areaText = ref('宜宾市');
+const list = ref<any>([]);
+const getData = async () => {
+  try {
+    const {result} = await hotSpot({
+      StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
+      EndDate: dayjs(date.value[1]).format('YYYY-MM-DD'),
+      AreaCode: areaCode.value
+    });
+    list.value = result;
+  } catch (e) {
+    console.log(e);
+  }
+}
+// 选择省市区
+const handleCommand = (command: any) => {
+  areaCode.value = command.value;
+  areaText.value = command.name;
+  getData();
+}
+onMounted(() => {
+  getData();
 });
 </script>
 <style scoped lang="scss">

src/views/home/left-center.vue

@@ -8,107 +8,139 @@
   </div>
 </template>
 <script setup lang="ts">
-import {ref, onMounted} from "vue";
-import Mock from "mockjs";
+import {ref, onMounted, watch} from "vue";
+import {acceptType} from "@/api/home";
+import dayjs from "dayjs";
+
+const props = defineProps({
+  dateArray: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const date = ref([]);
+watch(() => props.dateArray, (val: any) => {
+  date.value = val;
+}, {immediate: true})
+
+watch(() => props.dateArray, (val: any) => {
+  getData();
+})
+
 
-let colors = ["#0BFC7F", "#A0A0A0", "#F48C02", "#F4023C"];
 const option = ref({});
-const totalNum = ref(0)
 
+const getData = async () => {
+  try {
+    const {result} = await acceptType({StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'), EndDate: dayjs(date.value[1]).format('YYYY-MM-DD')});
+    const xData = result.map((item: any) => item.acceptType);
+    const totalData = result.reduce((pre: any, cur: any) => {
+      pre.push(cur.sumCount);
+      return pre;
+    }, []);
+    const handlingCount = result.reduce((pre: any, cur: any) => {
+      pre.push(cur.handlingCount);
+      return pre;
+    }, []);
+    const filedCount = result.reduce((pre: any, cur: any) => {
+      pre.push(cur.filedCount);
+      return pre;
+    }, []);
+    const overTimeCount = result.reduce((pre: any, cur: any) => {
+      pre.push(cur.overTimeCount);
+      return pre;
+    }, []);
+    // mock 数据
+    let dataArr = {
+      xData: xData,
+      result: [
+        {name: '总数', data: totalData},
+        {name: '已办', data: handlingCount},
+        {name: '在办', data: filedCount},
+        {name: '超期', data: overTimeCount},
+      ],
+      series: []
+    }
+    const diamondData = dataArr.result.reduce((pre, cur, index) => {
+      pre[index] = cur.data.map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
+      return pre
+    }, [])
+    const color = [
+      [{offset: 0, color: "#efff37",}, {offset: 1, color: "#d5e700",}],
+      [{offset: 0, color: "#32ffee",}, {offset: 1, color: "#00e8d5",}],
+      [{offset: 0, color: "#46c9ff",}, {offset: 1, color: "#00b4ff",}],
+      [{offset: 0, color: "#54a0ff",}, {offset: 1, color: "#1f83ff",}],
+    ]
 
-const getData = () => {
-  // mock 数据
-  const dataArr = {
-    xdata: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
-    result: [
-      {name: '总数', data: [320, 435, 490, 340, 320, 270, 360]},
-      {name: '已办', data: [150, 220, 210, 310, 140, 180, 288]},
-      {name: '在办', data: [250, 120, 240, 280, 240, 180, 288]},
-      {name: '超期', data: [180, 420, 370, 250, 210, 180, 288]},
-    ],
-    series: []
-  }
-  const diamondData = dataArr.result.reduce((pre, cur, index) => {
-    pre[index] = cur.data.map((el, id) => el + (pre[index - 1] ? pre[index - 1][id] : 0))
-    return pre
-  }, [])
+    dataArr.series = dataArr.result.reduce((p, c, i, array) => {
+      p.push({
+        z: i + 1,
+        stack: true,
+        type: 'bar',
+        name: c.name,
+        barWidth: 15,
+        data: c.data,
+        itemStyle: {
+          color:
+              {type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: color[i]}
+        },
+      }, {
+        z: i + 10,
+        name: c.name,
+        type: 'pictorialBar',
+        symbolPosition: 'end',
+        symbol: 'circle',
+        symbolOffset: [0, '-50%'],
+        symbolSize: [15, 12.5],
+        data: diamondData[i],
+        itemStyle: {
+          color: color[i + 1] ? color[i + 1][0].color : null
+        },
+        tooltip: {show: false},
+      })
+
+      return p
+    }, [])
 
-  const color = [
-    [{offset: 0, color: "#efff37",}, {offset: 1, color: "#d5e700",}],
-    [{offset: 0, color: "#32ffee",}, {offset: 1, color: "#00e8d5",}],
-    [{offset: 0, color: "#46c9ff",}, {offset: 1, color: "#00b4ff",}],
-    [{offset: 0, color: "#54a0ff",}, {offset: 1, color: "#1f83ff",}],
-  ]
 
-  dataArr.series = dataArr.result.reduce((p, c, i, array) => {
-    p.push({
-      z: i + 1,
-      stack: true,
-      type: 'bar',
-      name: c.name,
-      barWidth: 15,
-      data: c.data,
+// 最上边顶
+    dataArr.series.push({
+      name: dataArr.result[dataArr.result.length - 1].name,
+      z: 20,
+      type: "pictorialBar",
+      symbolPosition: "end",
+      data: diamondData[diamondData.length - 1],
+      symbol: "circle",
+      symbolOffset: ["0%", "-50%"],
+      symbolSize: [15, 12.5],
       itemStyle: {
-        color:
-            {type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: color[i]}
+        color: color[color.length - 1][0].color
       },
-    }, {
-      z: i + 10,
-      name: c.name,
-      type: 'pictorialBar',
-      symbolPosition: 'end',
-      symbol: 'circle',
-      symbolOffset: [0, '-50%'],
+      tooltip: {show: false},
+    })
+
+// 最下边底
+    dataArr.series.push({
+      name: dataArr.result[0].name,
+      z: 30,
+      type: "pictorialBar",
+      symbolPosition: "start",
+      data: diamondData[0],
+      symbol: "circle",
+      symbolOffset: ["0%", "50%"],
       symbolSize: [15, 12.5],
-      data: diamondData[i],
       itemStyle: {
-        // color: {
-        // 	type: 'linear',
-        // 	x: 0, x2: 0, y: 0, y2: 1,
-        // 	colorStops: color[i + 1]
-        // },
-        color: color[i + 1] ? color[i + 1][0].color : null
+        color: color[0][0].color
       },
       tooltip: {show: false},
     })
 
-    return p
-  }, [])
-
-
-// 最上边顶
-  dataArr.series.push({
-    name: dataArr.result[dataArr.result.length - 1].name,
-    z: 20,
-    type: "pictorialBar",
-    symbolPosition: "end",
-    data: diamondData[diamondData.length - 1],
-    symbol: "circle",
-    symbolOffset: ["0%", "-50%"],
-    symbolSize: [15, 12.5],
-    itemStyle: {
-      color: color[color.length - 1][0].color
-    },
-    tooltip: {show: false},
-  })
-
-// 最下边底
-  dataArr.series.push({
-    name: dataArr.result[0].name,
-    z: 30,
-    type: "pictorialBar",
-    symbolPosition: "start",
-    data: diamondData[0],
-    symbol: "circle",
-    symbolOffset: ["0%", "50%"],
-    symbolSize: [15, 12.5],
-    itemStyle: {
-      color: color[0][0].color
-    },
-    tooltip: {show: false},
-  })
+    setOption(dataArr);
+  } catch (e) {
+    console.log(e);
+  }
 
-  setOption(dataArr);
 };
 const setOption = (data: any) => {
   option.value = {
@@ -117,7 +149,7 @@ const setOption = (data: any) => {
       axisTick: {show: true},
       axisLine: {lineStyle: {color: 'rgba(255,255,255, .2)'}},
       axisLabel: {fontSize: 12, color: '#fff'},
-      data: data.xdata
+      data: data.xData
     },
     yAxis: [{
       name: '单位：件',

src/views/home/left-top.vue

@@ -10,12 +10,10 @@
         <div class="left-top-content-item-text">
           <div class="left-top-content-item-text-title">办结工单</div>
           <div class="left-top-content-item-text-num"><b>
-            <CountUp :endVal="224" :duration="2"/>
+            <CountUp :endVal="state.order.completionCount" :duration="2"/>
           </b> 件
           </div>
-          <div class="left-top-content-item-text-rate">办结率：
-            <CountUp :endVal="20" :duration="2"/>
-            %
+          <div class="left-top-content-item-text-rate">办结率：{{ state.order.completionRate }}%
           </div>
         </div>
       </div>
@@ -24,12 +22,10 @@
         <div class="left-top-content-item-text">
           <div class="left-top-content-item-text-title">待受理工单</div>
           <div class="left-top-content-item-text-num"><b>
-            <CountUp :endVal="224" :duration="2"/>
+            <CountUp :endVal="state.order.haveToAcceptCount" :duration="2"/>
           </b> 件
           </div>
-          <div class="left-top-content-item-text-rate">待受理率：
-            <CountUp :endVal="22" :duration="2"/>
-            %
+          <div class="left-top-content-item-text-rate">待受理率：{{ state.order.haveToAcceptRate }}%
           </div>
         </div>
       </div>
@@ -38,12 +34,10 @@
         <div class="left-top-content-item-text">
           <div class="left-top-content-item-text-title">超期工单</div>
           <div class="left-top-content-item-text-num"><b>
-            <CountUp :endVal="224" :duration="2"/>
+            <CountUp :endVal="state.order.overTimeCount" :duration="2"/>
           </b> 件
           </div>
-          <div class="left-top-content-item-text-rate">超期率：
-            <CountUp :endVal="24" :duration="2"/>
-            %
+          <div class="left-top-content-item-text-rate">超期率：{{ state.order.overTimeRate }}%
           </div>
         </div>
       </div>
@@ -52,12 +46,10 @@
         <div class="left-top-content-item-text">
           <div class="left-top-content-item-text-title">延期工单</div>
           <div class="left-top-content-item-text-num"><b>
-            <CountUp :endVal="224" :duration="2"/>
+            <CountUp :endVal="state.order.delayCount" :duration="2"/>
           </b> 件
           </div>
-          <div class="left-top-content-item-text-rate">延期率：
-            <CountUp :endVal="22" :duration="2"/>
-            %
+          <div class="left-top-content-item-text-rate">延期率：{{ state.order.delayRate }}%
           </div>
         </div>
       </div>
@@ -66,12 +58,10 @@
         <div class="left-top-content-item-text">
           <div class="left-top-content-item-text-title">满意工单</div>
           <div class="left-top-content-item-text-num"><b>
-            <CountUp :endVal="224" :duration="2"/>
+            <CountUp :endVal="state.order.satisfiedCount" :duration="2"/>
           </b> 件
           </div>
-          <div class="left-top-content-item-text-rate">总满意率：
-            <CountUp :endVal="22" :duration="2"/>
-            %
+          <div class="left-top-content-item-text-rate">总满意率：{{ state.order.satisfiedRate }}%
           </div>
         </div>
       </div>
@@ -80,12 +70,10 @@
         <div class="left-top-content-item-text">
           <div class="left-top-content-item-text-title">省工单</div>
           <div class="left-top-content-item-text-num"><b>
-            <CountUp :endVal="224" :duration="2"/>
+            <CountUp :endVal="state.order.provinceOrderCount" :duration="2"/>
           </b> 件
           </div>
-          <div class="left-top-content-item-text-rate">已办结：
-            <CountUp :endVal="224" :duration="2"/>
-            件
+          <div class="left-top-content-item-text-rate">已办结：{{ state.order.provinceOrderCompletionCount }}件
           </div>
         </div>
       </div>
@@ -96,7 +84,7 @@
         <div class="left-top-content-item-text">
           <div class="left-top-content-item-text-title">本月新增知识数量</div>
           <div class="left-top-content-item-text-num"><b>
-            <CountUp :endVal="224" :duration="2"/>
+            <CountUp :endVal="state.knowledge.todayAddCount" :duration="2"/>
           </b> 条
           </div>
         </div>
@@ -106,7 +94,7 @@
         <div class="left-top-content-item-text">
           <div class="left-top-content-item-text-title">本月更新知识数</div>
           <div class="left-top-content-item-text-num"><b>
-            <CountUp :endVal="30" :duration="2"/>
+            <CountUp :endVal="state.knowledge.thisMonthModifyCount" :duration="2"/>
           </b> 条
           </div>
         </div>
@@ -116,7 +104,7 @@
         <div class="left-top-content-item-text">
           <div class="left-top-content-item-text-title">今日知识阅读量</div>
           <div class="left-top-content-item-text-num"><b>
-            <CountUp :endVal="327" :duration="2"/>
+            <CountUp :endVal="state.knowledge.todayReadCount" :duration="2"/>
           </b> 条
           </div>
         </div>
@@ -126,7 +114,7 @@
         <div class="left-top-content-item-text">
           <div class="left-top-content-item-text-title">知识总数</div>
           <div class="left-top-content-item-text-num"><b>
-            <CountUp :endVal="422" :duration="2"/>
+            <CountUp :endVal="state.knowledge.knowledgeCount" :duration="2"/>
           </b> 条
           </div>
         </div>
@@ -135,30 +123,71 @@
   </div>
 </template>
 <script setup lang="ts">
-import {onMounted, reactive, ref, onUnmounted} from "vue";
+import {onMounted, reactive, ref, watch} from "vue";
 import CountUp from "@/components/count-up";
-import mittBus from '@/utils/mitt';
+import {knowledge, workOrder} from "@/api/home";
+import dayjs from "dayjs";
 
+const active = ref('0');
+const props = defineProps({
+  dateArray: {
+    type: Array,
+    default: () => []
+  }
+})
+const date = ref([]);
+watch(() => props.dateArray, (val: any) => {
+  date.value = val;
+}, {immediate: true})
+
+watch(() => props.dateArray, (val: any) => {
+  getWorkOrder();
+})
 const duration = ref(2);
 const state = reactive({
-  monthTotal: 0,
-  monthCompleted: 0,
-  todayTotal: 0,
-  todayCompleted: 0,
+  order: {
+    completionCount: 0,
+    completionRate: 0,
+    haveToAcceptCount: 0,
+    haveToAcceptRate: 0,
+    overTimeCount: 0,
+    overTimeRate: 0,
+    delayCount: 0,
+    delayRate: 0,
+    satisfiedCount: 0,
+    satisfiedRate: 0,
+    provinceOrderCount: 0,
+    provinceOrderCompletionCount: 0
+  },
+  knowledge: {
+    todayAddCount: 0,
+    thisMonthModifyCount: 0,
+    todayReadCount: 0,
+    knowledgeCount: 0
+  }
 });
-const active = ref('0');
+// 获取工单统计
+const getWorkOrder = async () => {
+  try {
+    const {result} = await workOrder({StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'), EndDate: dayjs(date.value[1]).format('YYYY-MM-DD')});
+    state.order = result;
+  } catch (e) {
+    console.log(e);
+  }
+}
+// 获取知识库统计
+const getKnowledge = async () => {
+  try {
+    const {result} = await knowledge();
+    state.knowledge = result;
+  } catch (e) {
+    console.log(e);
+  }
+}
+
 onMounted(() => {
-  // 接收消息
-  mittBus.on('BsDataShowArea1', (res: any) => {
-    state.monthTotal = res.monthTotal;
-    state.monthCompleted = res.monthCompleted;
-    state.todayTotal = res.todayTotal;
-    state.todayCompleted = res.todayCompleted;
-  });
-})
-onUnmounted(() => {
-  // 取消接收消息
-  mittBus.off('BsDataShowArea1');
+  getWorkOrder();
+  getKnowledge();
 })
 </script>
 <style scoped lang="scss">

src/views/home/right-bottom.vue

@@ -16,7 +16,25 @@
   </div>
 </template>
 <script setup lang="ts">
-import {ref, onMounted} from "vue";
+import {ref, onMounted, watch} from "vue";
+import {proportionAnalysis} from "api/home";
+import dayjs from "dayjs";
+
+
+const props = defineProps({
+  dateArray: {
+    type: Array,
+    default: () => []
+  }
+})
+const date = ref([]);
+watch(() => props.dateArray, (val: any) => {
+  date.value = val;
+}, {immediate: true})
+
+watch(() => props.dateArray, (val: any) => {
+  getData();
+})
 
 const activeIndex = ref(0);
 const option = ref<any>({});
@@ -24,27 +42,25 @@ const change = (index: number) => {
   activeIndex.value = index;
   getData();
 };
-let dataList = [
-  {"name": "电话", "value": "38"},
-  {"name": "微信", "value": "18"},
-  {"name": "微博", "value": "10"},
-  {"name": "App", "value": "10"},
-  {"name": "小程序", "value": "5"},
-  {"name": "市长与网民", "value": "4"},
-]
-const getData = () => {
-  let data = []
-  let legendDate = []
-// 循环添加数据
-  for (let i = 0; i < dataList.length; i++) {
-    data.push({
-      name: dataList[i].name,
-      value: dataList[i].value,
-
+const dataList = ref([])
+const getData = async () => {
+  try {
+    const {result} = await proportionAnalysis({
+      StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
+      EndDate: dayjs(date.value[1]).format('YYYY-MM-DD'),
+      IsSource: activeIndex.value === 0
+    });
+    const legendDate = result.map((item: any) => item.name);
+    dataList.value = result.map((item: any) => {
+      return {
+        name: item.name,
+        value: item.hasCount
+      }
     });
-    legendDate.push(dataList[i].name)
+    setOption(legendDate, dataList.value);
+  } catch (e) {
+    console.log(e);
   }
-  setOption(legendDate, data);
 };
 const setOption = (legendDate, data: any) => {
   option.value =
@@ -69,7 +85,7 @@ const setOption = (legendDate, data: any) => {
           formatter: name => {
             let total = 0;
             let value;
-            dataList.forEach((item) => {
+            dataList.value.forEach((item) => {
               total += Number(item.value);
               if (item.name == name) {
                 value = item.value;

src/views/home/right-center.vue

@@ -8,61 +8,53 @@
     </div>
     <div class="right_center-content">
       <div class="scroll">
-        <div class="scroll-item" v-for="(item, index) in state.list" :key="index">
+        <div class="scroll-item" v-for="(item, index) in list" :key="index">
           <span class="scroll-item-area" :class="index<=2 ? 'three' : ''">NO.{{ index + 1 }}</span>
           <el-tooltip placement="top">
-            <template #content> {{ item.title }}</template>
-            <span class="scroll-item-title">{{ item.title }}</span>
+            <template #content> {{ item.visitOrgName }}</template>
+            <span class="scroll-item-title">{{ item.visitOrgName }}</span>
           </el-tooltip>
-          <span class="scroll-item-hotspot"><CountUp :endVal="item.num " :duration="2"/>(件)</span>
-          <span class="scroll-item-num">{{ item.rate }}</span>
+          <span class="scroll-item-hotspot"><CountUp :endVal="item.visitCount " :duration="2"/>(件)</span>
+          <span class="scroll-item-num">{{ item.satisfiedRate }}%</span>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import {reactive} from "vue";
+import {onMounted, ref, watch} from "vue";
 import CountUp from "@/components/count-up";
+import {departmentSatisfaction} from "api/home";
+import dayjs from "dayjs";
 
-const state = reactive<any>({
-  list: [
-    {
-      id: 1,
-      title: '农村管理农村管理农村管理农村管理农村管理农村管理',
-      area: '翠屏区',
-      rate: '89%',
-      num: 1,
-    },
-    {
-      id: 2,
-      title: '环境保护环境保护环境保护环境保护环境保护',
-      area: '翠屏区',
-      rate: '89%',
-      num: 12,
-    },
-    {
-      id: 3,
-      title: '公共服务',
-      area: '翠屏区',
-      rate: '89%',
-      num: 123,
-    },
-    {
-      id: 4,
-      title: '政务服务公共服务公共服务公共服务',
-      area: '翠屏区',
-      rate: '89%',
-      num: 89,
-    },
-    {
-      id: 5,
-      title: '城市管理',
-      area: '翠屏区',
-      rate: '89%',
-      num: 72,
-    }
-  ]
+const props = defineProps({
+  dateArray: {
+    type: Array,
+    default: () => []
+  }
+})
+const date = ref([]);
+watch(() => props.dateArray, (val: any) => {
+  date.value = val;
+}, {immediate: true})
+
+watch(() => props.dateArray, (val: any) => {
+  getData();
+})
+const list = ref<any>([]);
+const getData = async () => {
+  try {
+    const {result} = await departmentSatisfaction({
+      StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
+      EndDate: dayjs(date.value[1]).format('YYYY-MM-DD'),
+    });
+    list.value = result;
+  } catch (e) {
+    console.log(e);
+  }
+}
+onMounted(() => {
+  getData();
 });
 </script>
 <style scoped lang="scss">
@@ -79,7 +71,6 @@ const state = reactive<any>({
 
   &-content {
     margin-top: 15px;
-    display: flex;
 
     .scroll {
       height: 300px;

src/views/home/right-top.vue

@@ -7,85 +7,38 @@
       </div>
     </div>
     <div class="scroll">
-      <vue3-seamless-scroll :list="state.list" hover :singleHeight="100">
-        <div class="scroll-item" v-for="(item, index) in state.list" :key="index">
-          <span class="scroll-item-area">{{ item.area }}</span>
+      <vue3-seamless-scroll :list="list" hover :singleHeight="100">
+        <div class="scroll-item" v-for="item in list" :key="item.id">
+          <span class="scroll-item-area">{{ item.areaName }}</span>
           <el-tooltip placement="top">
             <template #content> {{ item.title }}</template>
             <span class="scroll-item-title">{{ item.title }}</span>
           </el-tooltip>
-          <span class="scroll-item-hotspot">{{ item.hotspot }}</span>
-          <span class="scroll-item-num"> <CountUp :endVal="item.num " :duration="2"/>次</span>
+          <span class="scroll-item-hotspot">{{ item.hotspotName }}</span>
+          <span class="scroll-item-num"> <CountUp :endVal="item.sumCount " :duration="2"/>次</span>
         </div>
       </vue3-seamless-scroll>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import {reactive} from "vue";
+import {onMounted, ref} from "vue";
 import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
 import CountUp from "@/components/count-up";
+import {highFrequency} from "@/api/home";
 
-const state = reactive<any>({
-  list: [
-    {
-      id: 1,
-      title: '农村管理农村管理农村管理农村管理农村管理农村管理',
-      area: '翠屏区',
-      hotspot: '环境保护',
-      num: 1,
-    },
-    {
-      id: 2,
-      title: '环境保护环境保护环境保护环境保护环境保护',
-      area: '翠屏区',
-      hotspot: '环境保护',
-      num: 12,
-    },
-    {
-      id: 3,
-      title: '公共服务',
-      area: '翠屏区',
-      hotspot: '环境保护',
-      num: 123,
-    },
-    {
-      id: 4,
-      title: '政务服务公共服务公共服务公共服务',
-      area: '翠屏区',
-      hotspot: '环境保护',
-      num: 89,
-    },
-    {
-      id: 5,
-      title: '城市管理',
-      area: '翠屏区',
-      hotspot: '环境保护',
-      num: 72,
-    },
-    {
-      id: 6,
-      title: '公共服务',
-      area: '翠屏区',
-      hotspot: '环境保护',
-      num: 123,
-    },
-    {
-      id: 7,
-      title: '政务服务公共服务公共服务公共服务',
-      area: '翠屏区',
-      hotspot: '环境保护',
-      num: 89,
-    },
-    {
-      id: 8,
-      title: '城市管理',
-      area: '翠屏区',
-      hotspot: '环境保护',
-      num: 72,
-    }
-  ]
-});
+const list = ref<any>([]);
+const getData = async () => {
+  try {
+    const {result} = await highFrequency();
+    list.value = result;
+  } catch (e) {
+    console.log(e);
+  }
+}
+onMounted(() => {
+  getData();
+})
 </script>
 <style scoped lang="scss">
 .right_top {
@@ -131,11 +84,11 @@ const state = reactive<any>({
       }
 
       &-hotspot {
+        width: 30%;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         flex: 1;
-        margin-left: 30px;
       }
     }
   }

tsconfig.json

@@ -26,7 +26,7 @@
       ],
       "api/*": [
         "src/api/*"
-      ],
+      ]
     }
   },
   "include": [
@@ -35,9 +35,13 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "types/env.d.ts",
-    "types/*.d.ts"
+    "types/*.d.ts",
+    "node_modules/@vue/reactivity/dist/reactivity.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "public"
   ],
-  "exclude": ["node_modules","public"],
   "references": [
     {
       "path": "./tsconfig.config.json"