事件数量

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

@@ -443,7 +443,7 @@ export default defineComponent({
             display: flex;
             align-items: center;
             padding-left: 10px;
-            background-color: #C0D9FF;
+            background: linear-gradient(270deg, rgba(18,128,241,0.05) 0%, rgba(18,128,241,0.1) 60%, rgba(18,128,241,0.2) 100%);
             width: 100%;
             height: 24px;
             font-size: 12px;

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

@@ -60,7 +60,7 @@ export default defineComponent({
             name: '',
             type: 'pie',
             radius: ['60%', '85%'],
-            minAngle: 30,
+            clockwise: false,
             label: {
               show: false
             },

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

@@ -26,7 +26,25 @@
       </div>
       <div class="statistic-content">
         <div class="__gis-business-main_title">事件数量</div>
-        <FocusContentCom class="one">1</FocusContentCom>
+        <FocusContentCom class="one">
+          <div class="one-main">
+            <div class="one-main-left">
+              <div class="one-main-left-title">
+                <div>总数</div>
+                <div>{{ sjsl.total }}<span>起</span></div>
+              </div>
+              <img src="@/assets/images/gis-business/clue_sh-bg.png" alt=""/>
+            </div>
+            <div class="one-main-right">
+              <div class="one-main-right-total">国籍分布</div>
+              <div class="one-main-right-info">
+                <SjslChartCom title="国内" color="#00BD7E" :num="sjsl.in" :total="sjsl.total"/>
+                <SjslChartCom title="国外" color="#FFA254" :num="sjsl.out" :total="sjsl.total"/>
+                <SjslChartCom title="未知" color="#783FD4" :num="sjsl.none" :total="sjsl.total"/>
+              </div>
+            </div>
+          </div>
+        </FocusContentCom>
         <div class="__gis-business-main_title">热点类型</div>
         <FocusContentCom class="two">2</FocusContentCom>
         <div class="__gis-business-main_title">类型占比</div>
@@ -79,12 +97,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 SjslChartCom from './sjsl-chart.vue'
 
 export default defineComponent({
   name: '',
   components: {
     BusinessMainCom,
     FocusContentCom,
+    SjslChartCom
   },
   props: {},
   setup(props, {emit}) {
@@ -107,6 +127,12 @@ export default defineComponent({
         {label: '近一年', value: '4'},
         {label: '自定义', value: '0'},
       ],
+      sjsl: {
+        total: 2285,
+        in: 380,
+        out: 1226,
+        none: 679
+      },
       fzssj: {
         form: {},
         tempForm: {
@@ -270,6 +296,91 @@ export default defineComponent({
     overflow-y: auto;
     .one {
       height: 150px;
+      .one-main {
+        width: 100%;
+        height: 100%;
+        padding: 20px 16px;
+        display: flex;
+        align-items: center;
+        .one-main-left {
+          height: 100%;
+          width: 113px;
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .one-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: #434343;
+            }
+            >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;
+              >span {
+                font-size: 16px;
+              }
+            }
+          }
+          >img {
+            z-index: -1;
+            position: absolute;
+            bottom: 7px;
+          }
+        }
+        .one-main-right {
+          flex: 1;
+          margin-left: 10px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          .one-main-right-total {
+            display: flex;
+            align-items: center;
+            padding-left: 10px;
+            background: linear-gradient(270deg, rgba(18,128,241,0.05) 0%, rgba(18,128,241,0.1) 60%, rgba(18,128,241,0.2) 100%);
+            width: 100%;
+            height: 24px;
+            font-size: 12px;
+            font-family: PingFang SC;
+            font-weight: 600;
+            color: #434343;
+            position: relative;
+            &:before {
+              content: '';
+              position: absolute;
+              width: 2px;
+              height: 100%;
+              left: 0;
+              background-color: #1280F1;
+            }
+          }
+          .one-main-right-info {
+            width: 100%;
+            height: 68px;
+            padding: 10px 0 0 10px;
+            display: flex;
+            >div {
+              width: 67px;
+              height: 67px;
+            }
+          }
+        }
+      }
     }
     .two {
       height: 220px;

src/views/gis/business/situation/sjsl-chart.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="value">
+      <div class="title">{{title}}</div>
+      <div class="percent" :style="`color: ${color};`">{{(num / total * 100).toFixed(0)}}%</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
+    },
+    title: {
+      required: true,
+    },
+    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: ['75%', '90%'],
+            label: {
+              show: false
+            },
+            clockwise: false,
+            startAngle: 70,
+            emphasis: {
+              disabled: true
+            },
+            data: [
+              {
+                value: props.num,
+                label: 'yes',
+                itemStyle: {
+                  color: props.color,
+                  borderColor: props.color,
+                  borderWidth: 4,
+                  borderJoin: 'miter',
+                },
+              },
+              {
+                value: props.total - props.num,
+                label: 'no',
+                itemStyle: {
+                  color: props.color,
+                  opacity: 0.1
+                }
+              },
+            ]
+          }
+        ]
+      };
+      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;
+  .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;
+    .title {
+      font-size: 10px;
+      line-height: 12px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #434343;
+    }
+    .percent {
+      line-height: 18px;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+    }
+  }
+}
+</style>