界面优化

src/components/common/china-point-chart/index.vue

@@ -39,6 +39,13 @@ onMounted(() => {
 // ];
 const opacityColorList = ['rgba(22, 93, 255, 0.30)', 'rgba(0, 180, 42, 0.50)'];
 const props = defineProps({ data: Object });
+const handleVal = (val) => {
+  if (val < 10) {
+    return val * 8;
+  } else {
+    return 40 + Math.cell(val / 10);
+  }
+};
 const convertData = (data) => {
   var res = [];
   for (var i = 0; i < data.length; i++) {
@@ -55,7 +62,6 @@ const convertData = (data) => {
       });
     }
   }
-  console.log('res', res);
   return res;
 };
 const dataHandle = (data) => {
@@ -72,18 +78,18 @@ const dataHandle = (data) => {
           coordinateSystem: 'geo',
           data: convertData(item.data),
           symbolSize: function (val) {
-            return val[2] * 20;
+            return 5 + handleVal(val[2]);
+          },
+          label: {
+            normal: {
+              formatter: '{b}',
+              position: 'right',
+              show: false,
+            },
+            emphasis: {
+              show: true,
+            },
           },
-          // label: {
-          //   normal: {
-          //     formatter: '{b}',
-          //     position: 'right',
-          //     show: false,
-          //   },
-          //   emphasis: {
-          //     show: true,
-          //   },
-          // },
           itemStyle: {
             normal: {
               color: colorList[i],
@@ -133,14 +139,27 @@ const dataHandle = (data) => {
 };
 const options = computed(() => {
   return {
-    backgroundColor: 'rgba(0,0,0,.05)',
+    // backgroundColor: 'rgba(0,0,0,.05)',
+    backgroundColor: '#fff',
     tooltip: {
       trigger: 'item',
+      formatter: function (obj) {
+        let str = obj.seriesName + '<br />';
+        str =
+          str +
+          '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+          obj.color +
+          ';"></span>' +
+          obj.name +
+          ' : ' +
+          obj.value[2];
+        return str;
+      },
     },
     legend: {
       orient: 'horizontal',
       y: 'bottom',
-      x: 'center',
+      x: 'left',
       data: ['教务处', '研究生'],
       textStyle: {
         color: appStore.isFullscreen ? '#e5e5e5' : '#333',
@@ -154,14 +173,15 @@ const options = computed(() => {
           show: false,
         },
       },
-      top: '20%',
+      top: '28%',
 
       roam: true,
       label: {
         normal: {
-          // show: true,
-          show: false,
-          color: 'rgb(249, 249, 249)', //省份标签字体颜色
+          show: true,
+          // color: 'rgb(249, 249, 249)', //省份标签字体颜色
+          color: '#999', //省份标签字体颜色
+          fontSize: '7',
           formatter: (p) => {
             switch (p.name) {
               case '内蒙古自治区':
@@ -196,18 +216,24 @@ const options = computed(() => {
       },
       itemStyle: {
         normal: {
-          areaColor: '#24CFF4',
-          borderColor: '#53D9FF',
+          // areaColor: '#24CFF4',
+          areaColor: '#fff',
+          // borderColor: '#53D9FF',
+          borderColor: '#cfcfcf',
           borderWidth: 1.3,
-          shadowBlur: 15,
-          shadowColor: 'rgb(58,115,192)',
+          shadowBlur: 0,
+          // shadowBlur: 15,
+          // shadowColor: 'rgb(58,115,192)',
+          shadowColor: 'transparent',
           shadowOffsetX: 7,
           shadowOffsetY: 6,
         },
         emphasis: {
-          areaColor: '#8dd7fc',
-          borderWidth: 1.6,
-          shadowBlur: 25,
+          //悬浮上去后的背景色
+          // areaColor: '#8dd7fc',
+          areaColor: '#eee',
+          // borderWidth: 1.6,
+          // shadowBlur: 25,
         },
       },
     },

src/components/common/table-loop/index.vue

@@ -27,9 +27,18 @@
         :key="index"
         @click="rowClick(item)"
       >
-        <div class="td index"
-          ><div class="cell">{{ index + 1 }}</div></div
-        >
+        <div class="td index">
+          <div class="cell" v-if="index == 0"
+            ><img class="index" src="../../../assets/imgs/No1.png"
+          /></div>
+          <div class="cell" v-else-if="index == 1"
+            ><img class="index" src="../../../assets/imgs/No2.png"
+          /></div>
+          <div class="cell" v-else-if="index == 2"
+            ><img class="index" src="../../../assets/imgs/No3.png"
+          /></div>
+          <div class="cell" v-else>{{ index + 1 }}</div>
+        </div>
         <div
           class="td"
           v-for="(v, i) in columns"
@@ -40,7 +49,7 @@
             <t-tooltip
               v-if="v.prop !== 'rate'"
               placement="top"
-              :content="item[v.prop]"
+              :content="item[v.prop] + ''"
             >
               <span>{{ item[v.prop] }}</span>
             </t-tooltip>
@@ -120,6 +129,9 @@ const rowClick = (item) => {
         display: flex;
         justify-content: center;
         align-items: center;
+        img.index {
+          height: 14px;
+        }
         > span {
           overflow: hidden;
           white-space: nowrap;

src/views/report/dispatch-analysis/custom-type-drill-dialog.vue

@@ -52,13 +52,13 @@ import { CUSTOMER_TYPE } from '@/config/constants';
 import { dateFormat } from '@/utils/tool';
 import useFetchTable from '@/hooks/useFetchTable';
 import { customTypeDrill } from '@/api/report';
-import {customerTypeFilter, timestampFilter} from "@/utils/filter";
+import { customerTypeFilter, timestampFilter } from '@/utils/filter';
 const tableColumns = [
   { colKey: 'service', title: '服务单元' },
   { colKey: 'crmNo', title: '项目单号' },
-  { colKey: 'beginTime', title: '派单时间' , cell: 'begin-time'},
+  { colKey: 'beginTime', title: '派单时间', cell: 'begin-time' },
   { colKey: 'crmUserName', title: '客户经理' },
-  { colKey: 'customType', title: '客户类型' , cell: 'custom-type'},
+  { colKey: 'customType', title: '客户类型', cell: 'custom-type' },
   { colKey: 'custom', title: '客户名称' },
   { colKey: 'name', title: '项目名称' },
   { colKey: 'product', title: '实施产品' },
@@ -66,7 +66,7 @@ const tableColumns = [
 const props = defineProps({
   visible: Boolean,
   data: Object,
-  timeParams: Array,
+  timeParams: Object,
 });
 const emit = defineEmits(['close']);
 

src/views/report/dispatch-analysis/dispatch-statistics-drill-dialog.vue

@@ -52,13 +52,13 @@ import { CUSTOMER_TYPE } from '@/config/constants';
 import { dateFormat } from '@/utils/tool';
 import useFetchTable from '@/hooks/useFetchTable';
 import { dispatchStatisticsDrill } from '@/api/report';
-import {customerTypeFilter, timestampFilter} from "@/utils/filter";
+import { customerTypeFilter, timestampFilter } from '@/utils/filter';
 const tableColumns = [
   { colKey: 'service', title: '服务单元' },
   { colKey: 'crmNo', title: '项目单号' },
-  { colKey: 'beginTime', title: '派单时间' , cell: 'begin-time'},
+  { colKey: 'beginTime', title: '派单时间', cell: 'begin-time' },
   { colKey: 'crmUserName', title: '客户经理' },
-  { colKey: 'customType', title: '客户类型' , cell: 'custom-type'},
+  { colKey: 'customType', title: '客户类型', cell: 'custom-type' },
   { colKey: 'custom', title: '客户名称' },
   { colKey: 'name', title: '项目名称' },
   { colKey: 'product', title: '实施产品' },
@@ -66,7 +66,7 @@ const tableColumns = [
 const props = defineProps({
   visible: Boolean,
   data: Object,
-  timeParams: Array,
+  timeParams: Object,
 });
 const emit = defineEmits(['close']);
 

src/views/report/dispatch-analysis/index.vue

@@ -39,14 +39,34 @@
             <div class="statistics flex items-center">
               <div class="num-box flex h-full items-center">
                 <span class="title">派单累计</span>
-                <div class="num num1">{{ result9?.crm }}</div>
+                <div class="num num1">
+                  <span
+                    :class="{
+                      num: item.type === 'num',
+                      split: item.type === 'split',
+                    }"
+                    v-for="(item, index) in crmArr"
+                    :key="index"
+                    >{{ item.num }}</span
+                  >
+                </div>
               </div>
               <div class="num-box flex h-full items-center">
                 <span class="title">服务人次累计</span>
-                <div class="num num2">{{ result9?.person }}</div>
+                <div class="num num2">
+                  <span
+                    :class="{
+                      num: item.type === 'num',
+                      split: item.type === 'split',
+                    }"
+                    v-for="(item, index) in personArr"
+                    :key="index"
+                    >{{ item.num }}</span
+                  ></div
+                >
               </div>
             </div>
-            <div class="china-box">
+            <div class="china-box card">
               <ChinaPointChart
                 :data="chinaDataHandle(result5, result8)"
               ></ChinaPointChart>
@@ -194,6 +214,7 @@ import {
   dispatchStatisticsAnalysis,
   dispatchProjectCount,
 } from '@/api/report';
+import { groupSeparator } from '@/utils/tool';
 const chart2 = ref();
 const chart3 = ref();
 const showCustomTypeDrill = ref(false);
@@ -265,16 +286,36 @@ const {
   loading: loading9,
   run: run9,
 } = useRequest(dispatchProjectCount);
+const crmArr = computed(() => {
+  let num = result9.value?.crm || '';
+  let numStr = groupSeparator(num);
+  return numStr.split('').map((item) => {
+    return {
+      num: item,
+      type: Number(item) ? 'num' : 'split',
+    };
+  });
+});
 
+const personArr = computed(() => {
+  let num = result9.value?.person || '';
+  let numStr = groupSeparator(num);
+  return numStr.split('').map((item) => {
+    return {
+      num: item,
+      type: Number(item) ? 'num' : 'split',
+    };
+  });
+});
 const chinaDataHandle = (result5, result8) => {
   if (!result5 || !result8) {
     return null;
   } else {
-    let arr5 = result5?.day.map((item) => {
+    let arr5 = (result5 || []).map((item) => {
       item.value = Number(item.count);
       return item;
     });
-    let arr8 = result8?.day.map((item) => {
+    let arr8 = (result8 || []).map((item) => {
       item.value = Number(item.count);
       return item;
     });
@@ -326,13 +367,14 @@ const tableDataHandle = (data) => {
   if (!data) {
     return [];
   } else {
-    let totalCount = data.day.reduce((num, item) => {
-      return num + item.count;
-    }, 0);
-    return data.day.map((item) => {
-      item.rate = ((item.count * 100) / totalCount).toFixed(2) + '%';
-      return item;
-    });
+    // let totalCount = data.day.reduce((num, item) => {
+    //   return num + item.count;
+    // }, 0);
+    // return data.day.map((item) => {
+    //   item.rate = ((item.count * 100) / totalCount).toFixed(2) + '%';
+    //   return item;
+    // });
+    return data;
   }
 };
 onMounted(() => {
@@ -365,6 +407,7 @@ const options1 = computed(() => {
       title: '总数',
       center: ['50%', '40%'],
       seriesName: '客户类型',
+      radius: [30, 50],
     },
     {
       legend: {

src/views/report/dispatch-analysis/region-dispatch-drill-dialog.vue

@@ -57,13 +57,13 @@ import { CUSTOMER_TYPE } from '@/config/constants';
 import { dateFormat } from '@/utils/tool';
 import useFetchTable from '@/hooks/useFetchTable';
 import { regionDispatchDrill } from '@/api/report';
-import {customerTypeFilter, timestampFilter} from "@/utils/filter";
+import { customerTypeFilter, timestampFilter } from '@/utils/filter';
 const tableColumns = [
   { colKey: 'service', title: '服务单元' },
   { colKey: 'crmNo', title: '项目单号' },
-  { colKey: 'beginTime', title: '派单时间' , cell: 'begin-time'},
+  { colKey: 'beginTime', title: '派单时间', cell: 'begin-time' },
   { colKey: 'crmUserName', title: '客户经理' },
-  { colKey: 'customType', title: '客户类型' , cell: 'custom-type'},
+  { colKey: 'customType', title: '客户类型', cell: 'custom-type' },
   { colKey: 'custom', title: '客户名称' },
   { colKey: 'name', title: '项目名称' },
   { colKey: 'product', title: '实施产品' },
@@ -71,7 +71,7 @@ const tableColumns = [
 const props = defineProps({
   visible: Boolean,
   data: Object,
-  timeParams: Array,
+  timeParams: Object,
 });
 const emit = defineEmits(['close']);
 

src/views/report/dispatch-analysis/supplier-dispatch-drill-dialog.vue

@@ -52,13 +52,13 @@ import { CUSTOMER_TYPE } from '@/config/constants';
 import { dateFormat } from '@/utils/tool';
 import useFetchTable from '@/hooks/useFetchTable';
 import { supplierDispatchDrill } from '@/api/report';
-import {customerTypeFilter, timestampFilter} from "@/utils/filter";
+import { customerTypeFilter, timestampFilter } from '@/utils/filter';
 const tableColumns = [
   { colKey: 'service', title: '服务单元' },
   { colKey: 'crmNo', title: '项目单号' },
-  { colKey: 'beginTime', title: '派单时间' , cell: 'begin-time'},
+  { colKey: 'beginTime', title: '派单时间', cell: 'begin-time' },
   { colKey: 'crmUserName', title: '客户经理' },
-  { colKey: 'customType', title: '客户类型' , cell: 'custom-type'},
+  { colKey: 'customType', title: '客户类型', cell: 'custom-type' },
   { colKey: 'custom', title: '客户名称' },
   { colKey: 'name', title: '项目名称' },
   { colKey: 'product', title: '实施产品' },
@@ -66,7 +66,7 @@ const tableColumns = [
 const props = defineProps({
   visible: Boolean,
   data: Object,
-  timeParams: Array,
+  timeParams: Object,
 });
 const emit = defineEmits(['close']);