优化

src/components/MyComponent/MyChart/my-bar.vue

@@ -5,8 +5,8 @@
 <script lang="ts">
 import { defineComponent, onMounted, PropType, watchEffect } from 'vue'
 import { use } from 'echarts/core'
-import { LineChart, BarChart } from 'echarts/charts'
-use([LineChart, BarChart])
+import { LineChart, BarChart, PictorialBarChart } from 'echarts/charts'
+use([LineChart, BarChart, PictorialBarChart])
 import useChartGenerate from './useChartGenerate'
 import { BarOption, DatasetComponentOption } from './types'
 

src/components/MyComponent/MyEmpty/my-empty.vue

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-import img from '@/assets/images/no-data.png'
+import defaultImg from '@/assets/images/no-data.png'
 
 export default defineComponent({
   name: 'MyEmpty',
@@ -20,7 +20,7 @@ export default defineComponent({
     },
     img: {
       type: String as PropType<string>,
-      default: () => img,
+      default: () => defaultImg,
     },
     hiddenText: {
       type: Boolean as PropType<boolean>,

src/components/MyComponent/MyProgress/my-progress.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, PropType, ref } from 'vue'
+import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, ref } from 'vue'
 import MonitorCount from '../MyCount/my-count.vue'
 
 export interface ProgressProps {
@@ -68,11 +68,16 @@ export default defineComponent({
       return { background: props.color }
     })
     const percent = ref(0)
+    const timer = ref<any>(null)
     onMounted(() => {
-      setTimeout(() => {
+      timer.value = setTimeout(() => {
         percent.value = props.value > 100 ? 100 : props.value
       }, 500)
     })
+    onBeforeUnmount(() => {
+      clearTimeout(timer.value)
+      timer.value = null
+    })
     return {
       barColor,
       bgColor,

src/view/components/person-list.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, PropType, ref, watch } from 'vue'
+import { defineComponent, PropType, ref, watch } from 'vue'
 import empty from '@/assets/images/empty.png'
 import { ajax, api } from '@/ajax'
 import store from '@/store'
@@ -47,18 +47,16 @@ export default defineComponent({
   emits: ['select'],
   setup(props, ctx) {
     const handleClick = (data: unknown) => {
-      console.log(data)
-
       ctx.emit('select', data)
     }
     const data = ref<any>([])
     watch(
       () => props.list,
       async (content) => {
-        if (content && content.length > 0) {
         store.commit('SET_LOADING', true)
+        if (content && content.length > 0) {
           const res = await Promise.all(
-            content.map(async (item: any) => {
+            content.map((item: any) => {
               return ajax.get({
                 url: api.GET_PERSON,
                 params: { pageSize: 100, liveAddr_l: item.addr },
@@ -68,16 +66,15 @@ export default defineComponent({
           )
           if (res && res.length > 0) {
             content.forEach((item: any, index: number) => {
-              item.personInfo =
-                (res[index] && res[index].data && res[index].data.content) || {}
+              item.personInfo = res[index]?.data?.content || []
             })
             data.value = content
           }
-        }
-        await nextTick()
           store.commit('SET_LOADING', false)
-      },
-      { immediate: true }
+        } else {
+          data.value = []
+        }
+      }
     )
     const persons = (data: any) => {
       const { personInfo } = data

src/view/components/search-view.vue

@@ -30,7 +30,7 @@
         <CommunityList :list="list" select-able @select="handleSelect" />
       </template>
     </template>
-    <m-empty v-else />
+    <m-empty v-else :img="empty" hidden-text />
   </div>
   <m-drawer v-model="caseModal">
     <CaseDrawer
@@ -66,6 +66,7 @@ import { ajax, api } from '@/ajax'
 import CaseList from './case-list.vue'
 import PersonList from './person-list.vue'
 import CommunityList from './community-list.vue'
+import empty from '@/assets/images/empty.png'
 
 export default defineComponent({
   name: 'SearchView',
@@ -335,6 +336,7 @@ export default defineComponent({
       caseInfo,
       buildingInfo,
       roomInfo,
+      empty,
     }
   },
 })

src/view/drawers/community-drawer.vue

@@ -53,7 +53,7 @@
             </div>
           </div>
           <div v-else style="height: 30vh">
-            <m-empty />
+            <m-empty :img="empty" hidden-text />
           </div>
         </template>
       </template>
@@ -102,7 +102,7 @@
           ]"
           :data="communityInfo.hocInfo.memberList"
         />
-        <m-empty v-else />
+        <m-empty v-else :img="empty" hidden-text />
       </template>
       <template v-else-if="curTab === 'device'">
         <div class="select-bar">
@@ -128,7 +128,7 @@
             :data="deviceList"
           />
         </div>
-        <m-empty v-else />
+        <m-empty v-else :img="empty" hidden-text />
       </template>
       <template v-else-if="curTab === 'public'">
         <div class="select-bar">
@@ -183,7 +183,7 @@
             :data="publicList"
           /> -->
         </div>
-        <m-empty v-else />
+        <m-empty v-else :img="empty" hidden-text />
       </template>
     </m-card>
   </div>
@@ -196,6 +196,7 @@ import SubTabs from '../components/sub-tabs.vue'
 import SubTitle from '../components/sub-title.vue'
 import CaseList from '../components/case-list.vue'
 import { ajax, api } from '@/ajax'
+import empty from '@/assets/images/empty.png'
 
 export default defineComponent({
   name: 'CommunityDrawer',
@@ -389,6 +390,7 @@ export default defineComponent({
       publicOptions,
       curSubtabKey,
       formatter,
+      empty,
     }
   },
 })

src/view/drawers/population-drawer.vue

@@ -85,7 +85,7 @@
               </div>
             </div>
             <div v-else style="height: 30vh">
-              <m-empty />
+              <m-empty :img="empty" hidden-text />
             </div>
           </template>
         </template>
@@ -134,7 +134,7 @@
             ]"
             :data="communityInfo.hocInfo.memberList"
           />
-          <m-empty v-else />
+          <m-empty v-else :img="empty" hidden-text />
         </template>
         <template v-else-if="curTab2 === 'device'">
           <div class="select-bar">
@@ -160,7 +160,7 @@
               :data="deviceList"
             />
           </div>
-          <m-empty v-else />
+          <m-empty v-else :img="empty" hidden-text />
         </template>
         <template v-else-if="curTab2 === 'public'">
           <div class="select-bar">
@@ -215,7 +215,7 @@
               :data="publicList"
             /> -->
           </div>
-          <m-empty v-else />
+          <m-empty v-else :img="empty" hidden-text />
         </template>
       </template>
       <template v-else>
@@ -275,6 +275,7 @@ import SubTabs from '../components/sub-tabs.vue'
 import SubTitle from '../components/sub-title.vue'
 import CaseList from '../components/case-list.vue'
 import { ajax, api } from '@/ajax'
+import empty from '@/assets/images/empty.png'
 
 export default defineComponent({
   name: 'PopulationDrawer',
@@ -526,6 +527,7 @@ export default defineComponent({
       publicOptions,
       curSubtabKey,
       formatter,
+      empty,
     }
   },
 })

src/view/right/key-task.vue

@@ -9,13 +9,13 @@ import {
   defineComponent,
   watch,
   computed,
-  ref,
+  shallowRef,
   onMounted,
   PropType,
   nextTick,
   onBeforeUnmount,
 } from 'vue'
-import * as echarts from 'echarts'
+import { init as initChart, ECharts } from 'echarts/core'
 import 'echarts-wordcloud'
 
 export default defineComponent({
@@ -83,19 +83,12 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const cloudRef = ref<HTMLElement | null>(null)
     const sizeRate = computed(() => Math.floor((screen.height * 1.6) / 100))
-    onMounted(() => {
-      window.addEventListener('resize', init)
-      window.addEventListener('orientationchange', init)
-    })
-    onBeforeUnmount(() => {
-      window.removeEventListener('resize', init)
-      window.removeEventListener('orientationchange', init)
-    })
+    const cloudRef = shallowRef<HTMLElement | null>(null)
+    const myChart = shallowRef<ECharts | null>(null)
     const init = () => {
       if (!cloudRef.value) return
-      const myChart = echarts.init(cloudRef.value)
+      myChart.value = initChart(cloudRef.value)
       const option = {
         tooltip: {
           show: false,
@@ -124,10 +117,22 @@ export default defineComponent({
         ],
       }
       // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option)
-      myChart.resize()
+      myChart.value.setOption(option)
+      myChart.value.resize()
     }
 
+    onMounted(() => {
+      window.addEventListener('resize', init)
+      window.addEventListener('orientationchange', init)
+    })
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', init)
+      window.removeEventListener('orientationchange', init)
+      if (!myChart.value) return
+      myChart.value.dispose()
+      myChart.value = null
+    })
+
     watch(
       () => props.show,
       async (type) => {