删除无用布局

src/layout/header/head-com.vue

@@ -1,162 +0,0 @@
-<template>
-  <div class="head-com">
-    <div class="head-com-left">
-      <CusEllipsis v-if="initDuty" :value="dutyPeopleCpt"/>
-    </div>
-    <div class="head-com-right">
-      <img class="icon-date" src="@/assets/images/layout/head_icon-1.png">
-      <div class="date">{{currentDateCpt}}</div>
-      <img class="icon-user" src="@/assets/images/layout/head_icon-2.png">
-      <div class="name">{{$store.state.app.userInfo?.displayName}}</div>
-      <div class="dept">{{$store.state.app.userInfo?.dept?.organizationName}}</div>
-      <div class="button __hover" @click="onLogout">退出</div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  computed,
-  onMounted,
-  ref,
-  reactive,
-  watch,
-  getCurrentInstance,
-  ComponentInternalInstance,
-  toRefs,
-  nextTick
-} from 'vue'
-import {useStore} from 'vuex'
-import {useRouter, useRoute} from 'vue-router'
-import {toLogin} from "@/utils/permissions";
-import {ElMessageBox} from "element-plus";
-
-export default defineComponent({
-  name: '',
-  components: {},
-  setup() {
-    const store = useStore();
-    const router = useRouter();
-    const route = useRoute();
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({
-      initDuty: false
-    })
-    const dutyPeopleCpt = computed(() => {
-      let str = ''
-      const dutyHallLeader = `值班厅领导：${store.state.app.dutyInfo?.dutyHallLeader ? store.state.dictionary.dutyHallLeaderMap.get(store.state.app.dutyInfo.dutyHallLeader) : '无'}`
-      const totalClass = `总值班：${store.state.app.dutyInfo?.totalClass ? store.state.dictionary.totalClassMap.get(store.state.app.dutyInfo.totalClass) : '无'}`
-      const shiftLeader = `带班领导：${store.state.app.dutyInfo?.shiftLeader ? store.state.dictionary.shiftLeaderMap.get(store.state.app.dutyInfo.shiftLeader) : '无'}`
-      const dutyPerson = `值班员：${store.state.app.dutyInfo?.dutyPerson ? store.state.app.dutyInfo.dutyPerson.split(',').map(v => store.state.dictionary.dutyPersonMap.get(v)).join('、') : '无'}`
-      str += `${dutyHallLeader} ${totalClass}   ${shiftLeader}   ${dutyPerson}`
-      return str
-    })
-    const currentDateCpt = computed(() => {
-      let d = ''
-      switch (new Date(store.state.app.timestamp).getDay()) {
-        case 0: d = '星期日'
-          break
-        case 1: d = '星期一'
-          break
-        case 2: d = '星期二'
-          break
-        case 3: d = '星期三'
-          break
-        case 4: d = '星期四'
-          break
-        case 5: d = '星期五'
-          break
-        case 6: d = '星期六'
-          break
-      }
-      return that.$util.YMDHms(store.state.app.timestamp) + ' ' + d
-    })
-    const onLogout = () => {
-      ElMessageBox.confirm('请确认是否退出登录！', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: "warning",
-      }).then(() => {
-        that.$api.logout()
-        toLogin()
-      }).catch(() => {})
-    }
-    //  获取字典
-    const initDictionary = () => {
-      Promise.all([
-        store.dispatch('dictionary/LOAD_DICT_LIST', 'duty_hall_leader'),
-        store.dispatch('dictionary/LOAD_DICT_LIST', 'total_class'),
-        store.dispatch('dictionary/LOAD_DICT_LIST', 'shift_leader'),
-        store.dispatch('dictionary/LOAD_DICT_LIST', 'duty_person'),
-      ]).then(() => {
-        state.initDuty = true
-      })
-    }
-    onMounted(() => {
-      initDictionary()
-      store.dispatch('app/LOAD_DUTY_INFO')
-    })
-    return {
-      ...toRefs(state),
-      dutyPeopleCpt,
-      currentDateCpt,
-      onLogout
-    }
-  },
-})
-</script>
-
-<style scoped lang="scss">
-  .head-com {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
-    padding-top: 42px;
-    box-sizing: border-box;
-    background-image: url("@/assets/images/layout/head_bg.png");
-    background-size: 100% 100%;
-    font-size: 14px;
-    font-family: PingFang SC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #2EB8FF;
-    line-height: 20px;
-    .head-com-left {
-      width: 30%;
-      margin-left: 30px;
-      height: fit-content;
-      word-spacing: 16px;
-    }
-    .head-com-right {
-      margin-right: 30px;
-      height: fit-content;
-      display: flex;
-      .icon-date, .icon-user {
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-        margin-top: 1px;
-      }
-      .date {
-        margin-right: 16px;
-      }
-      .name {
-        margin-right: 4px;
-      }
-      .dept {
-        margin-right: 16px;
-      }
-      .button {
-        background-image: url("@/assets/images/layout/head_exit.png");
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        width: 54px;
-        height: 26px;
-        color: #FFFFFF;
-        display: flex;
-        justify-content: center;
-      }
-    }
-  }
-</style>

src/layout/index.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="layout">
-    <div class="layout-head">
-      <HeadCom/>
-    </div>
-    <div class="layout-main">
-      <div class="layout-main-sub-menu" v-if="hasSubMenu">
-        <SubMenuCom/>
-      </div>
-      <div class="layout-main-content">
-<!--        <NavigationCom v-if="hasSubMenu"/>-->
-        <RouterViewCom/>
-      </div>
-    </div>
-    <div class="layout-foot">
-      <MenuCom/>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  computed,
-  onMounted,
-  ref,
-  reactive,
-  watch,
-  getCurrentInstance,
-  ComponentInternalInstance,
-  toRefs,
-  nextTick
-} from 'vue'
-import {useStore} from 'vuex'
-import {useRouter, useRoute} from 'vue-router'
-import RouterViewCom from './router-view.vue'
-import MenuCom from './menu/menu.vue'
-import SubMenuCom from './menu/sub-menu.vue'
-import HeadCom from './header/head-com.vue'
-
-export default defineComponent({
-  name: '',
-  components: {RouterViewCom, MenuCom, SubMenuCom, HeadCom},
-  setup() {
-    const store = useStore();
-    const router = useRouter();
-    const route = useRoute();
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({
-    })
-    const hasSubMenu = computed(() => {
-      return store.state.menu.subMenuRouter?.length > 0
-          && ![store.state.menu.homeRouterName].includes(route.name as string)
-    })
-    // 测试切换分支
-    return {
-      ...toRefs(state),
-      hasSubMenu,
-    }
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.layout {
-  width: 100%;
-  height: 100vh;
-  //background-image: url("@/assets/images/layout/layout_bg.png");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  .layout-head {
-    position: absolute;
-    width: 100%;
-    height: 135px;
-    top: 0;
-    left: 0;
-    z-index: 1;
-  }
-  $mt: 91px;
-  .layout-main {
-    z-index: 2;
-    margin-top: $mt;
-    width: 100%;
-    height: calc(100% - #{$mt});
-    display: flex;
-    .layout-main-sub-menu {
-
-    }
-    .layout-main-content {
-      flex: 1;
-    }
-  }
-  .layout-foot {
-    z-index: 3;
-    position: absolute;
-    bottom: 0;
-  }
-}
-</style>

src/layout/menu/menu.vue

@@ -1,87 +0,0 @@
-<!--顶部一级菜单-->
-<template>
-  <div class="menu">
-    <template v-for="(item, index) in $store.state.menu.allRouters">
-      <div class="menu-item __hover" @click="toMenu(item)">
-        <img :src="item.meta.icon"/>
-        <div class="menu-item-title">
-          {{item.meta.title}}
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  computed,
-  onMounted,
-  ref,
-  reactive,
-  watch,
-  getCurrentInstance,
-  ComponentInternalInstance,
-  toRefs,
-  nextTick
-} from 'vue'
-import {useStore} from 'vuex'
-import {useRouter, useRoute} from 'vue-router'
-
-export default defineComponent({
-  name: '',
-  components: {},
-  props: {
-  },
-  setup() {
-    const store = useStore();
-    const router = useRouter();
-    const route = useRoute();
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({
-    })
-    const toMenu = (menu: any) => {
-      if (!route.matched.some(v => menu.path === v.path)) {
-        router.push({
-          path: menu.redirect || menu.path
-        })
-      }
-    }
-    return {
-      ...toRefs(state),
-      toMenu,
-    }
-  },
-})
-</script>
-
-<style scoped lang="scss">
-  .menu {
-    width: 1198px;
-    height: 49px;
-    background-image: url("@/assets/images/layout/menu_bg.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    display: flex;
-    justify-content: center;
-    position: relative;
-    .menu-item {
-      height: 26px;
-      display: flex;
-      align-items: center;
-      font-family: PangMenZhengDao;
-      font-size: 20px;
-      font-weight: 400;
-      color: #FFFFFF;
-      position: relative;
-      top: -9px;
-      margin-right: 24px;
-      &:last-child {
-        margin-right: 0;
-      }
-      >img {
-        margin-right: 8px;
-      }
-    }
-  }
-</style>

src/layout/menu/sub-menu.vue

@@ -1,136 +0,0 @@
-<!--左侧二级菜单树-->
-<template>
-  <div class="sub-menu-main">
-    <div class="sub-menu-main-content">
-      <template v-for="(item, index) in $store.state.menu.subMenuRouter">
-        <div class="sub-menu-item __hover" :class="{active: item.name === $route.name}" @click="toSubMenu(item)">
-          <div class="sub-menu-item-content">
-            <div class="icon"/>
-            {{item.meta.title}}
-          </div>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  defineComponent,
-  computed,
-  onMounted,
-  ref,
-  reactive,
-  watch,
-  getCurrentInstance,
-  ComponentInternalInstance,
-  toRefs,
-  nextTick
-} from 'vue'
-import {useStore} from 'vuex'
-import {useRouter, useRoute} from 'vue-router'
-
-export default defineComponent({
-  name: '',
-  components: {},
-  props: {
-  },
-  setup() {
-    const store = useStore();
-    const router = useRouter();
-    const route = useRoute();
-    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
-    const toSubMenu = (menu: any) => {
-      const deep = (r: any) => {
-        if (r.children?.length > 0) {
-          deep(r.children[0])
-        } else {
-          if (menu.name !== route.name) {
-            router.push({
-              path: r.path
-            })
-          }
-        }
-      }
-      deep(menu)
-    }
-    onMounted(() => {
-    })
-    return {
-      ...toRefs(state),
-      toSubMenu
-    }
-  },
-})
-</script>
-
-<style scoped lang="scss">
-  .sub-menu-main {
-    width: 290px;
-    height: 918px;
-    background-image: url("@/assets/images/layout/sub-menu_bg.png");
-    background-repeat: no-repeat;
-    background-size: 100% auto;
-    position: relative;
-    .sub-menu-main-content {
-      position: absolute;
-      display: flex;
-      flex-direction: column;
-      top: 172px;
-      left: 30px;
-      .sub-menu-item {
-        width: 185px;
-        height: 66px;
-        display: flex;
-        align-items: center;
-        position: relative;
-        &:after {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          width: 100%;
-          height: 2px;
-          background: linear-gradient(270deg, rgba(51,146,255,0) 0%, #3392FF 51%, rgba(51,146,255,0) 100%);
-        }
-        &.active {
-          &:before {
-            content: '';
-            position: absolute;
-            width: 167px;
-            height: 42px;
-            background: linear-gradient(90deg, rgba(0,242,254,0) 0%, #00F2FE 39%, #00F2FE 61%, rgba(0,242,254,0) 95%);
-            z-index: 1;
-            opacity: 0.4;
-          }
-          .sub-menu-item-content {
-            text-shadow: 0px 2px 4px rgba(0,0,0,0.4);
-            color: #FFFFFF;
-            .icon {
-              background-color: #75fbff;
-              box-shadow: 0px 0px 20px 3px #75fbff;
-            }
-          }
-        }
-        .sub-menu-item-content {
-          height: 42px;
-          font-size: 20px;
-          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
-          font-weight: bold;
-          color: rgba(255,255,255,0.5);
-          display: flex;
-          align-items: center;
-          padding-left: 30px;
-          z-index: 2;
-          .icon {
-            width: 16px;
-            height: 16px;
-            background-color: rgba(42, 187, 255, 0.3);
-            margin-right: 10px;
-            transform: rotate(45deg);
-          }
-        }
-      }
-    }
-  }
-</style>

src/router/index.ts

@@ -1,5 +1,4 @@
 import {createRouter, createWebHistory} from 'vue-router'
-import LayoutCom from '@/layout/index.vue'
 import GisLayoutCom from '@/views/gis/layout/index.vue'
 import staticRouter from './modules/static'
 import store from '@/store/index'
@@ -17,7 +16,7 @@ const routes = [
     {
         path: '/',
         name: store.state.menu.menuRootName, // 菜单根路由name标识
-        component: LayoutCom,
+        component: RouterViewCom,
         children: [
         ]
     },

src/views/gis/business/resources/index.vue

@@ -15,7 +15,36 @@
           />
         </div>
       </div>
-      <FocusContentCom class="one">1</FocusContentCom>
+      <FocusContentCom class="one">
+        <div class="one-top">
+          <img src="@/assets/images/gis-business/resource_icon1.png" alt=""/>
+          <StatisticTitleCom title="总数" :num="lxfb.total" unit="台"/>
+        </div>
+        <div class="one-bottom">
+          <div class="one-bottom-item">
+            <div class="chart">
+              <PieSimpleChartCom :num="lxfb.gal" :total="lxfb.total" color="#00FFFF"/>
+            </div>
+            <div class="text">公安类</div>
+          </div>
+          <div class="one-bottom-item">
+            <div class="chart">
+              <PieSimpleChartCom :num="lxfb.shl" :total="lxfb.total" color="#FFCC8F"/>
+            </div>
+            <div class="text">社会类</div>
+          </div>
+          <div class="one-bottom-item">
+            <div class="chart">
+              <PieSimpleChartCom :num="lxfb.myl" :total="lxfb.total" color="#EB90FF"/>
+            </div>
+            <div class="text">民用类</div>
+          </div>
+        </div>
+        <div class="one-foot">
+          <LxfbZxlChartCom :online="lxfb.online" :offline="lxfb.offline"/>
+          <LxfbCxChartCom :value="lxfb.cx"/>
+        </div>
+      </FocusContentCom>
       <div class="__gis-business-main_title">全省TOP10</div>
       <FocusContentCom class="two">2</FocusContentCom>
     </div>
@@ -40,12 +69,20 @@ import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
 import BusinessMainCom from '../common/business-main.vue'
 import FocusContentCom from '../common/focus-content.vue'
+import StatisticTitleCom from "../common/statistic-title.vue";
+import PieSimpleChartCom from "../common/pie-simple-chart.vue";
+import LxfbZxlChartCom from "./lxfb-zxl-chart.vue";
+import LxfbCxChartCom from "./lxfb-cx-chart.vue";
 
 export default defineComponent({
   name: '',
   components: {
+    PieSimpleChartCom,
+    StatisticTitleCom,
     BusinessMainCom,
     FocusContentCom,
+    LxfbZxlChartCom,
+    LxfbCxChartCom,
   },
   props: {},
   setup(props, {emit}) {
@@ -54,7 +91,16 @@ export default defineComponent({
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
-      area: ''
+      area: '',
+      lxfb: {
+        total: 35600,
+        gal: 25988,
+        shl: 9612,
+        myl: 9612,
+        online: 27768,
+        offline: 7832,
+        cx: 10
+      }
     })
     onMounted(() => {
     })
@@ -80,6 +126,50 @@ export default defineComponent({
   }
   .one {
     height: 410px;
+    .one-top {
+      display: flex;
+      align-items: center;
+      padding: 22px 22px 20px 23px;
+      >img {
+        margin-right: 16px;
+      }
+    }
+    .one-bottom {
+      display: flex;
+      justify-content: space-between;
+      padding: 6px 12px 0 12px;
+      .one-bottom-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .chart {
+          width: 100px;
+          height: 100px;
+        }
+        .text {
+          margin-top: 8px;
+          flex: 1;
+          text-align: center;
+          font-size: 12px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #434343;
+          line-height: 14px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+    .one-foot {
+      display: flex;
+      justify-content: space-between;
+      padding: 22px 14px 0 26px;
+      >div {
+        width: 150px;
+        height: 150px;
+      }
+    }
   }
   .two {
     flex: 1;

src/views/gis/business/resources/lxfb-cx-chart.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="chart-ref" ref="ref_chart"/>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick, onUnmounted
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import * as echarts from 'echarts';
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    value: {
+      required: true,
+      default: 0
+    },
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      resizeObserver: <any>null,
+      chart: <any>null
+    })
+    const ref_chart = ref();
+    const ref_main = ref();
+    const initChart = () => {
+      const chart = echarts.init(ref_chart.value);
+      const option = {
+        series: [
+          {
+            type: 'gauge',
+            radius: '100%',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: [
+                  [0.3, '#1280F1'],
+                  [0.7, '#FFB335'],
+                  [1, '#FD668C'],
+                ]
+              }
+            },
+            progress: {
+              show: false,
+              width: '14'
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              distance: -10,
+              length: 10,
+              lineStyle: {
+                color: 'auto',
+              }
+            },
+            axisLabel: {
+              distance: -4,
+              color: '#B4C4C7',
+              fontSize: 10
+            },
+            pointer: {
+              showAbove: false,
+              icon: 'rect',
+              width: 2,
+              length: 60,
+              itemStyle: {
+                color: '#3694FF',
+                opacity: 0.7,
+              }
+            },
+            anchor: {
+              show: true,
+              showAbove: false,
+              size: 10,
+              itemStyle: {
+                color: '#ffffff',
+                borderWidth: 2,
+                borderColor: '#3694FF'
+              }
+            },
+            data: [
+              {
+                value: props.value
+              }
+            ]
+          }
+        ]
+      };
+      chart.setOption(option);
+      state.resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          chart && chart.resize()
+        }
+      })
+      state.resizeObserver.observe(ref_main.value);
+      return chart
+    }
+    watch(() => props.value, () => {
+      state.chart = initChart()
+    })
+    onMounted(() => {
+      nextTick(() => {
+        state.chart = initChart()
+      })
+      return () => {
+        state.resizeObserver?.unobserve(ref_main?.value)
+        state.resizeObserver?.disconnect()
+      }
+    })
+    return {
+      ...toRefs(state),
+      ref_chart,
+      ref_main,
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.chart-main {
+  width: 100%;
+  height: 100%;
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/gis/business/resources/lxfb-zxl-chart.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="value">
+      <div class="percent">{{(online / (online + offline) * 100).toFixed(0)}}%</div>
+      <div class="title">在线率</div>
+    </div>
+    <div class="num">
+      <div>在线设备&nbsp;{{online}}</div>
+      <div>离线设备&nbsp;{{offline}}</div>
+    </div>
+    <div class="chart-ref" ref="ref_chart"/>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick, onUnmounted
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import * as echarts from 'echarts';
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    online: {
+      required: true,
+      default: 0
+    },
+    offline: {
+      required: true,
+      default: 0
+    },
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      resizeObserver: <any>null,
+      chart: <any>null
+    })
+    const ref_chart = ref();
+    const ref_main = ref();
+    const initChart = () => {
+      const chart = echarts.init(ref_chart.value);
+      const pieStyle = {
+        label: {
+          show: false
+        },
+        emphasis: {
+          disabled: true
+        },
+        clockwise: false,
+      }
+      const option = {
+        series: [
+          {
+            ...pieStyle,
+            name: '在线率',
+            type: 'pie',
+            radius: ['88%', '100%'],
+            data: [
+              {
+                value: props.online,
+                label: 'yes',
+                itemStyle: {
+                  color: '#4FADFE',
+                },
+              },
+              {
+                value: props.offline,
+                label: 'no',
+                itemStyle: {
+                  color: '#D0E6FC',
+                }
+              },
+            ]
+          },
+          {
+            ...pieStyle,
+            name: '离线率',
+            type: 'pie',
+            radius: ['64%', '76%'],
+            data: [
+              {
+                value: props.offline,
+                label: 'yes',
+                itemStyle: {
+                  color: '#80A5D1',
+                },
+              },
+              {
+                value: props.online,
+                label: 'no',
+                itemStyle: {
+                  color: '#D0E6FC',
+                }
+              },
+            ]
+          }
+        ]
+      };
+      chart.setOption(option);
+      state.resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          chart && chart.resize()
+        }
+      })
+      state.resizeObserver.observe(ref_main.value);
+      return chart
+    }
+    watch(() => props.online, () => {
+      state.chart = initChart()
+    })
+    onMounted(() => {
+      nextTick(() => {
+        state.chart = initChart()
+      })
+      return () => {
+        state.resizeObserver?.unobserve(ref_main?.value)
+        state.resizeObserver?.disconnect()
+      }
+    })
+    return {
+      ...toRefs(state),
+      ref_chart,
+      ref_main,
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.chart-main {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+  .value {
+    z-index: 2;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .percent {
+      margin-bottom: 4px;
+      font-size: 20px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #434343;
+    }
+    .title {
+      font-size: 20px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #434343;
+    }
+  }
+  .num {
+    z-index: 2;
+    position: absolute;
+    top: -2px;
+    left: 50%;
+    font-size: 12px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #1280F1;
+    background-color: #FFFFFF;
+    padding-left: 10px;
+    padding-bottom: 10px;
+    word-break: keep-all;
+    >div:first-child {
+      color: #4FADFE;
+    }
+    >div:last-child {
+      margin-top: 6px;
+      color: #80A5D1;
+    }
+  }
+}
+</style>