图表接口修改

src/components/global/report-header/index.vue

@@ -4,14 +4,14 @@
       <span class="report-header-title" style="margin-right: 10px">{{
         props.title
       }}</span>
-      <slot />
       <CustomDatePicker
         v-if="!props.hideTimePicker"
-        style="margin-left: 10px"
+        style="margin-right: 10px"
         v-model="range"
         @timeChange="timeChange"
-      ></CustomDatePicker
-    ></div>
+      ></CustomDatePicker>
+      <slot
+    /></div>
     <div class="right-box flex h-full items-center">
       <img class="time-icon" src="../../../assets//imgs/time.png" />
       <p>{{ timeText }} &nbsp; {{ getCurrentWeek() }}</p>

src/utils/chart.js

@@ -136,6 +136,9 @@ export const createStackingBarOption = ({ xData, seriesData }, extend = {}) => {
             show: true,
             // position: 'insideRight',
             color: '#fff',
+            formatter: (obj) => {
+              return obj.value > 0 ? obj.value : '';
+            },
           },
         },
         itemStyle: {

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

@@ -96,7 +96,7 @@ const statusMap = {
   ISOUT: '占用',
   BREAK_DOWN: '故障',
 };
-supplierListApi({ type: 'DEVICE' }).then((res) => {
+supplierListApi().then((res) => {
   supplierList.value = res || [];
   res?.length && (supplierId.value = res[0].id);
 });

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

@@ -225,6 +225,7 @@ import {
 } from '@/api/report';
 import SupplierDetailDrillDialog from './supplier-detail-drill-dialog.vue';
 import { FullscreenIcon } from 'tdesign-icons-vue-next';
+import { cloneDeep } from 'lodash';
 const chart8 = ref();
 
 const showSupplierDetailDrill = ref(false);
@@ -522,29 +523,60 @@ const options7 = computed(() => {
 });
 
 const options8 = computed(() => {
-  let res = result8.value || [];
-  res = res.map((item) => {
-    if (!item.name) {
-      item.name = 'null';
+  let res = result8.value || {};
+  let xData = (res.regionPersonnelInfo || []).map((item) => item.regionName);
+  let regionPersonnelInfo = res.regionPersonnelInfo || [];
+  let allSupplier = regionPersonnelInfo
+    .map((item) => item.supplierPersonnelInfo)
+    .flat();
+  let supplierIdSet = res.supplierIdSet || [];
+  for (let i = 0; i < regionPersonnelInfo.length; i++) {
+    let item = regionPersonnelInfo[i];
+    let arr = [];
+    for (let j = 0; j < supplierIdSet.length; j++) {
+      let find = item.supplierPersonnelInfo.find(
+        (v) => v.supplierId == supplierIdSet[j]
+      );
+      let find2 = allSupplier.find((v) => v.supplierId == supplierIdSet[j]);
+      arr.push(
+        find ? cloneDeep(find) : { supplierName: find2.supplierName, count: 0 }
+      );
     }
-    return item;
-  });
-  let xData = Array.from(new Set(res.map((item) => item.region_name)));
-  let names = Array.from(new Set(res.map((item) => item.name)));
+    item.supplierPersonnelInfo = arr;
+  }
+  let matrixArr = regionPersonnelInfo.map((item) => item.supplierPersonnelInfo);
   let sData = [];
+  let names = [];
+  if (supplierIdSet.length) {
+    let first = regionPersonnelInfo[0];
+    names = first.supplierPersonnelInfo.map((item) => item.supplierName);
+  }
   for (let i = 0; i < names.length; i++) {
-    let data = [];
-    for (let j = 0; j < xData.length; j++) {
-      let find = res.find(
-        (v) => v.name == names[i] && v.region_name == xData[j]
-      );
-      data.push(find?.count || 0);
-    }
-    sData.push({
-      name: names[i],
-      data: data,
-    });
+    let data = matrixArr.map((arr) => arr[i].count);
+    sData.push({ name: names[i], data });
   }
+  // res = res.map((item) => {
+  //   if (!item.name) {
+  //     item.name = 'null';
+  //   }
+  //   return item;
+  // });
+  // let xData = Array.from(new Set(res.map((item) => item.region_name)));
+  // let names = Array.from(new Set(res.map((item) => item.name)));
+  // let sData = [];
+  // for (let i = 0; i < names.length; i++) {
+  //   let data = [];
+  //   for (let j = 0; j < xData.length; j++) {
+  //     let find = res.find(
+  //       (v) => v.name == names[i] && v.region_name == xData[j]
+  //     );
+  //     data.push(find?.count || 0);
+  //   }
+  //   sData.push({
+  //     name: names[i],
+  //     data: data,
+  //   });
+  // }
   return createStackingBarOption(
     {
       xData: xData,
@@ -554,7 +586,29 @@ const options8 = computed(() => {
       // ],
       seriesData: sData,
     },
-    {}
+    {
+      tooltip: {
+        formatter: function (obj) {
+          let name = obj[0].name;
+          let str = name + '<br />';
+
+          for (let i = 0; i < obj.length; i++) {
+            str =
+              obj[i].value !== 0
+                ? str +
+                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
+                  obj[i]['color'] +
+                  ';"></span>' +
+                  obj[i]['seriesName'] +
+                  ' :  ' +
+                  obj[i]['value'] +
+                  '<br />'
+                : str + '';
+          }
+          return str;
+        },
+      },
+    }
   );
 });
 </script>