feat:大屏数据对接;

src/utils/constants.ts

@@ -0,0 +1,75 @@
+export const loadingOptions = {
+    text: '加载中...',
+    color: '#c23531',
+    textColor: '#fff',
+    maskColor: 'rgba(0, 0, 0, 0.1)',
+    spinnerRadius: 10,
+    fontSize: 14,
+}
+export const shortcuts = [
+    {
+        text: '近一周',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            return [start, end]
+        },
+    },
+    {
+        text: '近一个月',
+        value: () => {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            return [start, end]
+        },
+    }, {
+        text: '上季度',
+        value: () => {
+            let oDate = new Date();
+            let thisYear = oDate.getFullYear();
+            let thisMonth = oDate.getMonth() + 1;
+            let n = Math.ceil(thisMonth / 3); // 季度
+            let Month = n * 3 - 1;
+            let start = new Date(thisYear, Month - 2, 1);
+            let end = new Date();
+            return [start, end];
+        },
+    },
+    {
+        text: '本季度',
+        value: () => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            return [start, end];
+        },
+    },
+    {
+        text: '去年',
+        value: () => {
+            let oDate = new Date();
+            let prevYear = oDate.getFullYear() - 1;
+            const end = new Date();
+            const start = new Date();
+            start.setFullYear(prevYear);
+            start.setMonth(0);
+            start.setDate(1);
+            end.setFullYear(prevYear);
+            end.setMonth(11);
+            end.setDate(31);
+            return [start, end];
+        },
+    },
+    {
+        text: '今年',
+        value: () => {
+            const end = new Date();
+            const start = new Date();
+            start.setMonth(0);
+            start.setDate(1);
+            return [start, end];
+        },
+    },
+]

src/views/home/center-bottom.vue

@@ -16,7 +16,7 @@
         <div class="table-header-item">区域</div>
         <div class="table-header-item">接办部门</div>
       </div>
-      <div class="scroll">
+      <div class="scroll" v-loading="loading">
         <vue3-seamless-scroll :list="list" hover :singleHeight="100">
           <div class="item" v-for="(item, index) in list" :key="index">
             <span>
@@ -46,17 +46,22 @@ import {orderView} from "api/home";
 import mittBus from "@/utils/mitt";
 
 const list = ref([])
+const loading = ref(false);
 const getData = async () => {
+  loading.value = true;
   try {
     const {result} = await orderView();
     list.value = result;
+    loading.value = false;
   } catch (e) {
     console.log(e);
+    loading.value = false;
   }
 }
 onMounted(() => {
   // 接收消息
   mittBus.on('orderHandlingDetail', (res: any) => {
+    console.log('办理中工单概览', res)
     list.value = res;
   });
   getData();

src/views/home/center-map.vue

@@ -4,17 +4,20 @@
         class="chart"
         :option="option"
         ref="centerMapRef"
+        :loading="loading"
+        :loading-options="loadingOptions"
     />
   </div>
 </template>
 <script setup lang="ts">
-import {ref, nextTick, onMounted, watch} from "vue";
+import {ref, onMounted, watch} from "vue";
 import {registerMap, getMap} from "echarts/core";
-import {optionHandle, regionCodes} from "./center.map";
+import {optionHandle} from "./center.map";
 import {loopShowTooltip} from "@/utils/tooltip-auto-show";
 import axios from "axios";
 import {areaDetail} from "api/home";
 import dayjs from "dayjs";
+import {loadingOptions} from "@/utils/constants";
 
 const props = defineProps({
   dateArray: {
@@ -30,7 +33,7 @@ watch(() => props.dateArray, (val: any) => {
 watch(() => props.dateArray, (val: any) => {
   getData();
 })
-
+const loading = ref(false);
 const option = ref({});
 const code = ref("511500"); //100000 代表中国 其他地市是行政编码
 const dataSetHandle = async (regionCode: string, list: object[]) => {
@@ -66,12 +69,12 @@ const getGeoJson = (regionCode: string) => {
 };
 // 获取数据设置到地图中
 const getData = async () => {
+  loading.value = true;
   try {
     const {result} = await areaDetail({
       StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
       EndDate: dayjs(date.value[1]).format('YYYY-MM-DD')
     });
-
     const regionData = result.map((item: any) => {
       return {
         name: item.areaName,
@@ -79,8 +82,10 @@ const getData = async () => {
       }
     })
     await dataSetHandle(code.value, regionData);
+    loading.value = false;
   } catch (e) {
     console.log(e);
+    loading.value = false;
   }
 };
 const tooltipTimer = ref<any>(null);

src/views/home/header.vue

@@ -26,6 +26,7 @@
 <script setup lang="ts">
 import {reactive, ref} from "vue";
 import dayjs from "dayjs";
+import {shortcuts} from '@/utils/constants';
 
 const emit = defineEmits(["changeDate"]);
 
@@ -38,35 +39,6 @@ emit("changeDate", timeValue.value);
 const changeDate = (val: any) => {
   emit("changeDate", val);
 };
-const shortcuts = [
-  {
-    text: '上一周',
-    value: () => {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-      return [start, end]
-    },
-  },
-  {
-    text: '上个月',
-    value: () => {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-      return [start, end]
-    },
-  },
-  {
-    text: '近三个月',
-    value: () => {
-      const end = new Date()
-      const start = new Date()
-      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-      return [start, end]
-    },
-  },
-]
 const dateData = reactive<any>({
   dateDay: "",
   dateYear: "",

src/views/home/left-center.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="left-center-content">
       <template v-if="xData.length">
-        <v-chart class="chart" :option="option"/>
+        <v-chart class="chart" :option="option" :loading="loading" :loading-options="loadingOptions"/>
       </template>
       <template v-else>
         <EmptyCom></EmptyCom>
@@ -19,6 +19,7 @@ import {ref, onMounted, watch} from "vue";
 import {acceptType} from "@/api/home";
 import dayjs from "dayjs";
 import EmptyCom from "@/components/empty-com";
+import {loadingOptions} from "@/utils/constants";
 
 const props = defineProps({
   dateArray: {
@@ -39,7 +40,9 @@ watch(() => props.dateArray, (val: any) => {
 
 const option = ref({});
 const xData = ref([]);
+const loading = ref(true);
 const getData = async () => {
+  loading.value = true;
   try {
     const {result} = await acceptType({StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'), EndDate: dayjs(date.value[1]).format('YYYY-MM-DD')});
     xData.value = result.map((item: any) => item.acceptType);
@@ -143,12 +146,12 @@ const getData = async () => {
       },
       tooltip: {show: false},
     })
-
     setOption(dataArr);
+    loading.value = false;
   } catch (e) {
     console.log(e);
+    loading.value = false;
   }
-
 };
 const setOption = (data: any) => {
   option.value = {

src/views/home/left-top.vue

@@ -4,7 +4,7 @@
       <span :class="{active:active === '0'}" @click="active = '0'">工单统计</span>
       <span :class="{active:active === '1'}" @click="active = '1'">知识库统计</span>
     </div>
-    <div v-if="active === '0'" class="flex flex-wrap left-top-content-order">
+    <div v-if="active === '0'" class="flex flex-wrap left-top-content-order" v-loading="loading">
       <div class="flex left-top-content-item">
         <img src="@/assets/img/home/done_order.png" alt="">
         <div class="left-top-content-item-text">
@@ -78,7 +78,7 @@
         </div>
       </div>
     </div>
-    <div v-if="active === '1'" class="flex flex-wrap left-top-content-knowledge">
+    <div v-if="active === '1'" class="flex flex-wrap left-top-content-knowledge" v-loading="loading">
       <div class="flex left-top-content-item">
         <img src="@/assets/img/home/knowledge_add.png" alt="">
         <div class="left-top-content-item-text">
@@ -135,6 +135,7 @@ const props = defineProps({
     default: () => []
   }
 })
+const loading = ref(false);
 const date = ref([]);
 watch(() => props.dateArray, (val: any) => {
   date.value = val;
@@ -168,20 +169,26 @@ const state = reactive({
 });
 // 获取工单统计
 const getWorkOrder = async () => {
+  loading.value = true;
   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;
+    loading.value = false;
   } catch (e) {
     console.log(e);
+    loading.value = false;
   }
 }
 // 获取知识库统计
 const getKnowledge = async () => {
+  loading.value = true;
   try {
     const {result} = await knowledge();
     state.knowledge = result;
+    loading.value = false;
   } catch (e) {
     console.log(e);
+    loading.value = false;
   }
 }
 

src/views/home/right-bottom.vue

@@ -12,7 +12,7 @@
     </div>
     <div class="left_bottom-content">
       <template v-if="dataList.length">
-        <v-chart class="chart" :option="option"/>
+        <v-chart class="chart" :option="option" :loading="loading" :loading-options="loadingOptions"/>
       </template>
       <template v-else>
         <EmptyCom></EmptyCom>
@@ -25,6 +25,7 @@ import {ref, onMounted, watch} from "vue";
 import {proportionAnalysis} from "api/home";
 import dayjs from "dayjs";
 import EmptyCom from "@/components/empty-com";
+import {loadingOptions} from "@/utils/constants";
 
 
 const props = defineProps({
@@ -49,7 +50,9 @@ const change = (index: number) => {
   getData();
 };
 const dataList = ref([])
+const loading = ref(false);
 const getData = async () => {
+  loading.value = true;
   try {
     const {result} = await proportionAnalysis({
       StartDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
@@ -64,7 +67,9 @@ const getData = async () => {
       }
     });
     setOption(legendDate, dataList.value);
+    loading.value = false;
   } catch (e) {
+    loading.value = false;
     console.log(e);
   }
 };

src/views/home/right-center.vue

@@ -8,7 +8,7 @@
     </div>
     <div class="right_center-content">
       <template v-if="list.length">
-        <div class="scroll">
+        <div class="scroll" v-loading="loading">
           <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">
@@ -48,15 +48,19 @@ watch(() => props.dateArray, (val: any) => {
   getData();
 })
 const list = ref<any>([]);
+const loading = ref(false);
 const getData = async () => {
+  loading.value = true;
   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;
+    loading.value = false;
   } catch (e) {
     console.log(e);
+    loading.value = false;
   }
 }
 onMounted(() => {

src/views/home/right-top.vue

@@ -6,7 +6,7 @@
         近30天高频事项预警
       </div>
     </div>
-    <div class="scroll">
+    <div class="scroll" v-loading="loading">
       <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>
@@ -28,12 +28,16 @@ import CountUp from "@/components/count-up";
 import {highFrequency} from "@/api/home";
 
 const list = ref<any>([]);
+const loading = ref(false);
 const getData = async () => {
+  loading.value = true;
   try {
     const {result} = await highFrequency();
     list.value = result;
+    loading.value = false;
   } catch (e) {
     console.log(e);
+    loading.value = false;
   }
 }
 onMounted(() => {