通用

src/router/modules/gis.ts

@@ -2,7 +2,7 @@ export const gisRouter: any = [
   {
     name: '6f2684a7-78b6-497d-9af2-1e6f1f61b791',
     path: 'index',
-    meta: {title: '默认', noMenu: true},
+    meta: {title: 'GIS一张图', noMenu: true},
     component: () => import('@/views/gis/business/default/index.vue'),
   },
   {

src/views/gis/business/common/business-main.vue

@@ -3,7 +3,10 @@
     <div class="business-main-com_expend __hover" :class="{'business-main-com_expend-not': !expend}" @click="expend = !expend"></div>
     <div class="business-main-com_content __box-shadow" v-show="expend">
       <div class="business-main-com_content-head">
-        <SvgIcon name="close_2" size="18" class="__hover" @click="$router.push('/gis/index')"/>{{title}}
+        {{title}}
+        <div class="close __hover">
+          <SvgIcon name="close_2" size="18" @click="$router.push('/gis/index')"/>
+        </div>
       </div>
       <slot/>
     </div>
@@ -58,12 +61,14 @@ export default defineComponent({
   width: 410px;
   height: calc(100% - 20px);
   .business-main-com_expend {
-    width: 14px;
-    height: 110px;
-    background: black;
+    width: 20px;
+    height: 116px;
+    background-image: url("@/assets/images/gis-business/business-main_expend.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
     position: absolute;
-    top: calc((100% - 110px) / 2);
-    right: -14px;
+    top: calc((100% - 116px) / 2);
+    right: -19px;
     &.business-main-com_expend-not {
       position: fixed;
       left: 0;
@@ -76,9 +81,35 @@ export default defineComponent({
     display: flex;
     flex-direction: column;
     .business-main-com_content-head {
-      height: 60px;
+      height: 54px;
       width: 100%;
-      background-color: red;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #0096FF;
+      &:after {
+        content: '';
+        width: 387px;
+        height: 32px;
+        background-image: url("@/assets/images/gis-business/business-main_head.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        bottom: 0;
+      }
+      .close {
+        position: absolute;
+        right: 15px;
+        top: 13px;
+        z-index: 2;
+        width: 18px;
+        height: 18px;
+        display: flex;
+      }
     }
   }
 }

src/views/gis/business/common/focus-content.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="focus-content-com">
-    <div class="focus-content-com_bg"></div>
+    <div class="focus-content-com_bg">
+      <div class="icon-1"/>
+      <div class="icon-1"/>
+      <div class="icon-1"/>
+      <div class="icon-1"/>
+      <div class="icon-2"/>
+      <div class="icon-2"/>
+    </div>
     <div class="focus-content-com_slot">
       <slot/>
     </div>
@@ -60,6 +67,51 @@ export default defineComponent({
     left: 0;
     background: #FFFFFF;
     border: 1px solid #D6D6D6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon-1 {
+      width: 13px;
+      height: 13px;
+      background-image: url("@/assets/images/gis-business/focus-content_icon1.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      &:nth-child(1) {
+        left: 0;
+        top: 0;
+      }
+      &:nth-child(2) {
+        right: 0;
+        top: 0;
+        transform: rotate(90deg);
+      }
+      &:nth-child(3) {
+        right: 0;
+        bottom: 0;
+        transform: rotate(180deg);
+      }
+      &:nth-child(4) {
+        left: 0;
+        bottom: 0;
+        transform: rotate(270deg);
+      }
+    }
+    .icon-2 {
+      width: 3px;
+      height: 45px;
+      background-image: url("@/assets/images/gis-business/focus-content_icon2.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      &:nth-child(5) {
+        left: 0;
+      }
+      &:nth-child(6) {
+        right: 0;
+        transform: rotate(180deg);
+      }
+    }
   }
   .focus-content-com_slot {
     position: absolute;

src/views/gis/business/common/pie-simple-chart.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="value">
+      <div class="percent">{{(num / total * 100).toFixed(1)}}%</div>
+      <div class="num">{{num}}家</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: {
+    num: {
+      required: true,
+      default: 0
+    },
+    total: {
+      required: true,
+      default: 0
+    },
+    color: {
+      default: '#ffffff'
+    },
+  },
+  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: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['60%', '85%'],
+            minAngle: 30,
+            label: {
+              show: false
+            },
+            emphasis: {
+              disabled: true
+            },
+            data: [
+              {value: props.num, label: 'yes', itemStyle: {color: props.color}},
+              {value: props.total - props.num, label: 'no', itemStyle: {color: '#C4DAF8'}},
+            ]
+          }
+        ]
+      };
+      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.num, () => {
+      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;
+  background-image: url("@/assets/images/gis-layout/gis-layout-tools_example-bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+  .value {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #0096FF;
+    .num {
+      font-size: 12px;
+      font-weight: 400;
+    }
+  }
+}
+</style>

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

@@ -2,7 +2,31 @@
   <BusinessMainCom title="企业一张图">
     <div class="enterprise">
       <div class="__gis-business-main_title">数量统计</div>
-      <FocusContentCom class="one">1</FocusContentCom>
+      <FocusContentCom class="one" v-loading="loading.statistic">
+        <div class="one-top">
+
+        </div>
+        <div class="one-bottom">
+          <div class="one-bottom-item">
+            <div class="chart">
+              <PieSimpleChartCom :num="statistic.qy.lgszyjkscsb" :total="statistic.qy.total" color="#00FFFF"/>
+            </div>
+            <div class="text">零关税自用<br/>进口生产设备</div>
+          </div>
+          <div class="one-bottom-item">
+            <div class="chart">
+              <PieSimpleChartCom :num="statistic.qy.jgzzmgs" :total="statistic.qy.total" color="#FFCC8F"/>
+            </div>
+            <div class="text">加工增值免关税</div>
+          </div>
+          <div class="one-bottom-item">
+            <div class="chart">
+              <PieSimpleChartCom :num="statistic.qy.lgsjkyfl" :total="statistic.qy.total" color="#EB90FF"/>
+            </div>
+            <div class="text">零关税进口<br/>原辅料</div>
+          </div>
+        </div>
+      </FocusContentCom>
       <FocusContentCom class="two">2</FocusContentCom>
       <div class="__gis-business-main_title">企业列表</div>
       <div class="form">
@@ -70,12 +94,14 @@ 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 PieSimpleChartCom from '../common/pie-simple-chart.vue'
 
 export default defineComponent({
   name: '',
   components: {
     BusinessMainCom,
     FocusContentCom,
+    PieSimpleChartCom
   },
   props: {},
   setup(props, {emit}) {
@@ -96,6 +122,18 @@ export default defineComponent({
           pageSize: 10,
           total: 0
         }
+      },
+      statistic: {
+        qy: {
+          total: 0,
+          lgszyjkscsb: 0,
+          jgzzmgs: 0,
+          lgsjkyfl: 0
+        },
+        warning: 0
+      },
+      loading: {
+        statistic: false
       }
     })
     const onSearch = () => {
@@ -124,9 +162,25 @@ export default defineComponent({
         })
       }
     }
+    const initStatistic = () => {
+      state.loading.statistic = true
+      setTimeout(() => {
+        state.statistic = {
+          qy: {
+            total: 125,
+            lgszyjkscsb: 95,
+            jgzzmgs: 21,
+            lgsjkyfl: 9
+          },
+          warning: 1200
+        }
+        state.loading.statistic = false
+      })
+    }
     onMounted(() => {
       state.enterprise.form = JSON.parse(JSON.stringify(state.enterprise.tempForm))
       handleSearch()
+      initStatistic()
     })
     return {
       ...toRefs(state),
@@ -148,6 +202,35 @@ export default defineComponent({
   overflow: hidden;
   .one {
     height: 238px;
+    display: flex;
+    flex-direction: column;
+    .one-top {}
+    .one-bottom {
+      display: flex;
+      justify-content: space-between;
+      .one-bottom-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .chart {
+          width: 100px;
+          height: 100px;
+        }
+        .text {
+          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;
+        }
+      }
+
+    }
   }
   .two {
     margin-top: 10px;

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

@@ -1,5 +1,5 @@
 <template>
-  <BusinessMainCom title="企业一张图">
+  <BusinessMainCom title="处置力量一张图">
     <div class="power">
       <div class="__gis-business-main_title">数量统计</div>
       <FocusContentCom class="one">1</FocusContentCom>