审核情况

src/components/cus/CusNumberSplit.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="cus-number-split">
+    {{formatStrCpt}}
+  </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: 'CusNumberSplit',
+  components: {},
+  props: {
+    value: { required: true },
+    unit: {default: ','},
+    space: {default: 3}
+  },
+  setup(props) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    const formatStrCpt = computed(() => {
+      let arr: Array<string> = []
+      const strArr = String(props.value).split('').reverse()
+      strArr.forEach((v, i) => {
+        arr.push(v)
+        if ((i + 1) % props.space === 0 && i !== strArr.length - 1) {
+          arr.push(props.unit)
+        }
+      })
+      return arr.reverse().join('')
+    })
+    return {
+      ...toRefs(state),
+      formatStrCpt
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.cus-number-split {
+}
+</style>

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

@@ -67,10 +67,54 @@
               :options="[]"
           />
         </div>
-        <FocusContentCom class="three">3</FocusContentCom>
-        <FocusContentCom class="four">4</FocusContentCom>
+        <FocusContentCom class="three">
+          <div class="three-main">
+            <div class="three-main-left">
+              <div class="three-main-left-title">
+                <div>审核率</div>
+                <div>{{ sh.percent }}%</div>
+              </div>
+              <img src="@/assets/images/gis-business/clue_sh-bg.png" alt=""/>
+            </div>
+            <div class="three-main-right">
+              <div class="three-main-right-total">全部：{{sh.total}}</div>
+              <div class="three-main-right-info">
+                <div class="three-main-right-info-item">
+                  <img src="@/assets/images/gis-business/clue_sh-icon1.png" alt=""/>
+                  <div>
+                    <div>待审核</div>
+                    <CusNumberSplit :value="sh.dsh"/>
+                  </div>
+                </div>
+                <div class="three-main-right-info-item">
+                  <img src="@/assets/images/gis-business/clue_sh-icon2.png" alt=""/>
+                  <div>
+                    <div>审核通过</div>
+                    <CusNumberSplit :value="sh.shtg"/>
+                  </div>
+                </div>
+                <div class="three-main-right-info-item">
+                  <img src="@/assets/images/gis-business/clue_sh-icon3.png" alt=""/>
+                  <div>
+                    <div>审核不通过</div>
+                    <CusNumberSplit :value="sh.shbtg"/>
+                  </div>
+                </div>
+                <div class="three-main-right-info-item">
+                  <img src="@/assets/images/gis-business/clue_sh-icon4.png" alt=""/>
+                  <div>
+                    <div>已终止</div>
+                    <CusNumberSplit :value="sh.yzz"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="three-chart">
+            <ShChartCom :data="sh.chart"/>
+          </div>
+        </FocusContentCom>
       </div>
-
     </div>
   </BusinessMainCom>
 </template>
@@ -95,6 +139,7 @@ import BusinessMainCom from '../common/business-main.vue'
 import FocusContentCom from '../common/focus-content.vue'
 import Top5ChartCom from './top5-chart.vue'
 import AreaChartCom from './area-chart.vue'
+import ShChartCom from './sh-chart.vue'
 
 export default defineComponent({
   name: '',
@@ -103,6 +148,7 @@ export default defineComponent({
     FocusContentCom,
     Top5ChartCom,
     AreaChartCom,
+    ShChartCom,
   },
   props: {},
   setup(props, {emit}) {
@@ -155,7 +201,23 @@ export default defineComponent({
         {area: '海口市17', clue: 200, power: 3},
         {area: '海口市18', clue: 200, power: 3},
         {area: '海口市19', clue: 200, power: 3},
-      ]
+      ],
+      sh: {
+        percent: 70,
+        total: 8880,
+        dsh: 457345,
+        shtg: 457345,
+        shbtg: 457345,
+        yzz: 457345,
+        chart: [
+          {value: '171', name: '反走私'},
+          {value: '101', name: '岸线船舶研判预警'},
+          {value: '70', name: '公共场所风险预防'},
+          {value: '230', name: '消防救援'},
+          {value: '171', name: '企业风险防控'},
+          {value: '171', name: '社会治理风险防控'},
+        ]
+      }
     })
     const onSearch = () => {
       state.clue.form = JSON.parse(JSON.stringify(state.clue.tempForm))
@@ -324,11 +386,120 @@ export default defineComponent({
       }
     }
     .three {
-      height: 140px;
-    }
-    .four {
-      margin-top: 10px;
-      height: 140px;
+      height: 290px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .three-main {
+        width: 100%;
+        height: 140px;
+        padding: 20px 16px;
+        display: flex;
+        align-items: center;
+        .three-main-left {
+          height: 100%;
+          width: 113px;
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .three-main-left-title {
+            position: absolute;
+            bottom: 55px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            >div:nth-child(1) {
+              font-size: 14px;
+              font-family: PingFang SC;
+              font-weight: 600;
+              color: #007EFF;
+            }
+            >div:nth-child(2) {
+              font-size: 26px;
+              font-family: YouSheBiaoTiHei;
+              font-weight: 400;
+              line-height: 22px;
+              background: linear-gradient(180deg, #50EAFF 0%, #007EFF 100%);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+            }
+          }
+          >img {
+            z-index: -1;
+            position: absolute;
+            bottom: 7px;
+          }
+        }
+        .three-main-right {
+          flex: 1;
+          margin-left: 10px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          .three-main-right-total {
+            display: flex;
+            align-items: center;
+            padding-left: 10px;
+            background-color: #C0D9FF;
+            width: 100%;
+            height: 24px;
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 600;
+            color: #1DA5FF;
+            position: relative;
+            &:before {
+              content: '';
+              position: absolute;
+              width: 2px;
+              height: 100%;
+              left: 0;
+              background-color: #1280F1;
+            }
+          }
+          .three-main-right-info {
+            padding: 10px 0 0 10px;
+            width: 100%;
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            row-gap: 10px;
+            .three-main-right-info-item {
+              display: flex;
+              align-items: center;
+              height: 28px;
+              >img {
+                margin-right: 2px;
+              }
+              >div {
+                display: flex;
+                flex-direction: column;
+                >div:nth-child(1) {
+                  font-size: 12px;
+                  font-family: PingFang SC;
+                  font-weight: 400;
+                  color: #434343;
+                  line-height: 14px;
+                }
+                >div:nth-child(2) {
+                  font-size: 12px;
+                  font-family: PingFang SC;
+                  font-weight: 600;
+                  color: #43AEFE;
+                  line-height: 14px;
+                }
+              }
+            }
+          }
+        }
+      }
+      .three-chart {
+        flex: 1;
+        width: 100%;
+        height: 140px;
+      }
     }
   }
 

src/views/gis/business/clue/sh-chart.vue

@@ -0,0 +1,124 @@
+<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: {
+    data: {
+      required: true,
+      default: () => []
+    },
+  },
+  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 = {
+        tooltip: {
+          trigger: 'item'
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            minAngle: 10,
+            percentPrecision: 0,
+            label: {
+              lineHeight: 15,
+              color: '#4C4C4C' ,
+              fontWeight: 400,
+              fontFamily: 'Microsoft YaHei' ,
+              fontSize: 12,
+              formatter: (p) => {
+                return `{name|${p.name}}\n{num|${p.value},${p.percent}%}`
+              },
+              rich: {
+                name: {
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: 'rgba(52,52,52,0.5)',
+                },
+                num: {
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: '#43AEFE',
+                }
+              }
+            },
+            labelLine: {
+            },
+            data: props.data
+          }
+        ]
+      };
+      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.data, () => {
+      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/clue/top5-chart.vue

@@ -92,7 +92,6 @@ export default defineComponent({
               fontSize: 10,
               color: 'rgba(52,52,52,0.5)',
               formatter: (p) => {
-                console.log(p)
                 return `{name|${p.name}} {num|${p.data.num}}`
               },
               rich: {