Merge branch 'master' of http://192.168.100.32:3000/fanfan/xt-front

src/api/biz/stats/suppliesStatsApi.ts

@@ -0,0 +1,12 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  drugStats = '/biz/SuppliesStats/drugStats',
+}
+// 查询药品用量API
+export const getDrugStats = (params?: object) => {
+  return defHttp.post({
+    url: Api.drugStats,
+    params,
+  });
+};

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
-  font-family: 'iconfont'; /* Project id 3806176 */
-  src: url('iconfont.woff2?t=1695089019525') format('woff2'),
-    url('iconfont.woff?t=1695089019525') format('woff'),
-    url('iconfont.ttf?t=1695089019525') format('truetype');
+  font-family: 'iconfont'; /* Project id 4279382 */
+  src: url('iconfont.woff2?t=1703296062271') format('woff2'),
+    url('iconfont.woff?t=1703296062271') format('woff'),
+    url('iconfont.ttf?t=1703296062271') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-xt-download-download_default:before {
+  content: '\e621';
+}
+
+.icon-xt-download-download_selected:before {
+  content: '\e622';
+}
+
 .icon-tingyong-moren:before {
   content: '\e60e';
 }
@@ -485,134 +493,6 @@
   content: '\e64a';
 }
 
-.icon-unlock:before {
-  content: '\e808';
-}
-
-.icon-lock:before {
-  content: '\e809';
-}
-
-.icon-customerservice:before {
-  content: '\e80a';
-}
-
-.icon-medicinebox:before {
-  content: '\e80b';
-}
-
-.icon-shop:before {
-  content: '\e80c';
-}
-
-.icon-rocket:before {
-  content: '\e80d';
-}
-
-.icon-shopping:before {
-  content: '\e80e';
-}
-
-.icon-folder:before {
-  content: '\e80f';
-}
-
-.icon-folder-open:before {
-  content: '\e810';
-}
-
-.icon-folder-add:before {
-  content: '\e811';
-}
-
-.icon-accountbook:before {
-  content: '\e812';
-}
-
-.icon-contacts:before {
-  content: '\e813';
-}
-
-.icon-carryout:before {
-  content: '\e814';
-}
-
-.icon-calendar-check:before {
-  content: '\e815';
-}
-
-.icon-calendar:before {
-  content: '\e816';
-}
-
-.icon-scan:before {
-  content: '\e817';
-}
-
-.icon-select:before {
-  content: '\e818';
-}
-
-.icon-laptop:before {
-  content: '\e819';
-}
-
-.icon-barcode:before {
-  content: '\e81a';
-}
-
-.icon-camera:before {
-  content: '\e81b';
-}
-
-.icon-cluster:before {
-  content: '\e81c';
-}
-
-.icon-gateway:before {
-  content: '\e81d';
-}
-
-.icon-car:before {
-  content: '\e81e';
-}
-
-.icon-printer:before {
-  content: '\e81f';
-}
-
-.icon-read:before {
-  content: '\e820';
-}
-
-.icon-cloud-server:before {
-  content: '\e821';
-}
-
-.icon-cloud-upload:before {
-  content: '\e822';
-}
-
-.icon-cloud:before {
-  content: '\e823';
-}
-
-.icon-cloud-download:before {
-  content: '\e824';
-}
-
-.icon-cloud-sync:before {
-  content: '\e825';
-}
-
-.icon-video:before {
-  content: '\e826';
-}
-
-.icon-notification:before {
-  content: '\e827';
-}
-
 .icon-sound:before {
   content: '\e828';
 }
@@ -1393,6 +1273,134 @@
   content: '\e807';
 }
 
+.icon-unlock:before {
+  content: '\e808';
+}
+
+.icon-lock:before {
+  content: '\e809';
+}
+
+.icon-customerservice:before {
+  content: '\e80a';
+}
+
+.icon-medicinebox:before {
+  content: '\e80b';
+}
+
+.icon-shop:before {
+  content: '\e80c';
+}
+
+.icon-rocket:before {
+  content: '\e80d';
+}
+
+.icon-shopping:before {
+  content: '\e80e';
+}
+
+.icon-folder:before {
+  content: '\e80f';
+}
+
+.icon-folder-open:before {
+  content: '\e810';
+}
+
+.icon-folder-add:before {
+  content: '\e811';
+}
+
+.icon-accountbook:before {
+  content: '\e812';
+}
+
+.icon-contacts:before {
+  content: '\e813';
+}
+
+.icon-carryout:before {
+  content: '\e814';
+}
+
+.icon-calendar-check:before {
+  content: '\e815';
+}
+
+.icon-calendar:before {
+  content: '\e816';
+}
+
+.icon-scan:before {
+  content: '\e817';
+}
+
+.icon-select:before {
+  content: '\e818';
+}
+
+.icon-laptop:before {
+  content: '\e819';
+}
+
+.icon-barcode:before {
+  content: '\e81a';
+}
+
+.icon-camera:before {
+  content: '\e81b';
+}
+
+.icon-cluster:before {
+  content: '\e81c';
+}
+
+.icon-gateway:before {
+  content: '\e81d';
+}
+
+.icon-car:before {
+  content: '\e81e';
+}
+
+.icon-printer:before {
+  content: '\e81f';
+}
+
+.icon-read:before {
+  content: '\e820';
+}
+
+.icon-cloud-server:before {
+  content: '\e821';
+}
+
+.icon-cloud-upload:before {
+  content: '\e822';
+}
+
+.icon-cloud:before {
+  content: '\e823';
+}
+
+.icon-cloud-download:before {
+  content: '\e824';
+}
+
+.icon-cloud-sync:before {
+  content: '\e825';
+}
+
+.icon-video:before {
+  content: '\e826';
+}
+
+.icon-notification:before {
+  content: '\e827';
+}
+
 .icon-close-circle:before {
   content: '\e782';
 }

src/assets/iconfont/iconfont.json

@@ -1,10 +1,24 @@
 {
-  "id": "3806176",
-  "name": "ant Design 官方",
+  "id": "4279382",
+  "name": "ant Design 官方-copy",
   "font_family": "iconfont",
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "38691369",
+      "name": "xt-下载-默认",
+      "font_class": "xt-download-download_default",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "38691368",
+      "name": "xt-下载-鼠标上移",
+      "font_class": "xt-download-download_selected",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    },
     {
       "icon_id": "37422611",
       "name": "xt-停用-默认",
@@ -831,230 +845,6 @@
       "unicode": "e64a",
       "unicode_decimal": 58954
     },
-    {
-      "icon_id": "4766694",
-      "name": "unlock",
-      "font_class": "unlock",
-      "unicode": "e808",
-      "unicode_decimal": 59400
-    },
-    {
-      "icon_id": "4766695",
-      "name": "lock",
-      "font_class": "lock",
-      "unicode": "e809",
-      "unicode_decimal": 59401
-    },
-    {
-      "icon_id": "4766762",
-      "name": "customerservice",
-      "font_class": "customerservice",
-      "unicode": "e80a",
-      "unicode_decimal": 59402
-    },
-    {
-      "icon_id": "4766774",
-      "name": "medicinebox",
-      "font_class": "medicinebox",
-      "unicode": "e80b",
-      "unicode_decimal": 59403
-    },
-    {
-      "icon_id": "4766775",
-      "name": "shop",
-      "font_class": "shop",
-      "unicode": "e80c",
-      "unicode_decimal": 59404
-    },
-    {
-      "icon_id": "4766778",
-      "name": "rocket",
-      "font_class": "rocket",
-      "unicode": "e80d",
-      "unicode_decimal": 59405
-    },
-    {
-      "icon_id": "4766779",
-      "name": "shopping",
-      "font_class": "shopping",
-      "unicode": "e80e",
-      "unicode_decimal": 59406
-    },
-    {
-      "icon_id": "4766846",
-      "name": "folder",
-      "font_class": "folder",
-      "unicode": "e80f",
-      "unicode_decimal": 59407
-    },
-    {
-      "icon_id": "4766847",
-      "name": "folder-open",
-      "font_class": "folder-open",
-      "unicode": "e810",
-      "unicode_decimal": 59408
-    },
-    {
-      "icon_id": "4766848",
-      "name": "folder-add",
-      "font_class": "folder-add",
-      "unicode": "e811",
-      "unicode_decimal": 59409
-    },
-    {
-      "icon_id": "4766854",
-      "name": "account book",
-      "font_class": "accountbook",
-      "unicode": "e812",
-      "unicode_decimal": 59410
-    },
-    {
-      "icon_id": "4766855",
-      "name": "contacts",
-      "font_class": "contacts",
-      "unicode": "e813",
-      "unicode_decimal": 59411
-    },
-    {
-      "icon_id": "4766856",
-      "name": "carry out",
-      "font_class": "carryout",
-      "unicode": "e814",
-      "unicode_decimal": 59412
-    },
-    {
-      "icon_id": "4766857",
-      "name": "calendar-check",
-      "font_class": "calendar-check",
-      "unicode": "e815",
-      "unicode_decimal": 59413
-    },
-    {
-      "icon_id": "4766858",
-      "name": "calendar",
-      "font_class": "calendar",
-      "unicode": "e816",
-      "unicode_decimal": 59414
-    },
-    {
-      "icon_id": "4766861",
-      "name": "scan",
-      "font_class": "scan",
-      "unicode": "e817",
-      "unicode_decimal": 59415
-    },
-    {
-      "icon_id": "4766862",
-      "name": "select",
-      "font_class": "select",
-      "unicode": "e818",
-      "unicode_decimal": 59416
-    },
-    {
-      "icon_id": "4766881",
-      "name": "laptop",
-      "font_class": "laptop",
-      "unicode": "e819",
-      "unicode_decimal": 59417
-    },
-    {
-      "icon_id": "4766882",
-      "name": "barcode",
-      "font_class": "barcode",
-      "unicode": "e81a",
-      "unicode_decimal": 59418
-    },
-    {
-      "icon_id": "4766883",
-      "name": "camera",
-      "font_class": "camera",
-      "unicode": "e81b",
-      "unicode_decimal": 59419
-    },
-    {
-      "icon_id": "4766884",
-      "name": "cluster",
-      "font_class": "cluster",
-      "unicode": "e81c",
-      "unicode_decimal": 59420
-    },
-    {
-      "icon_id": "4766885",
-      "name": "gateway",
-      "font_class": "gateway",
-      "unicode": "e81d",
-      "unicode_decimal": 59421
-    },
-    {
-      "icon_id": "4766886",
-      "name": "car",
-      "font_class": "car",
-      "unicode": "e81e",
-      "unicode_decimal": 59422
-    },
-    {
-      "icon_id": "4766887",
-      "name": "printer",
-      "font_class": "printer",
-      "unicode": "e81f",
-      "unicode_decimal": 59423
-    },
-    {
-      "icon_id": "4766888",
-      "name": "read",
-      "font_class": "read",
-      "unicode": "e820",
-      "unicode_decimal": 59424
-    },
-    {
-      "icon_id": "4766900",
-      "name": "cloud-server",
-      "font_class": "cloud-server",
-      "unicode": "e821",
-      "unicode_decimal": 59425
-    },
-    {
-      "icon_id": "4766901",
-      "name": "cloud-upload",
-      "font_class": "cloud-upload",
-      "unicode": "e822",
-      "unicode_decimal": 59426
-    },
-    {
-      "icon_id": "4766902",
-      "name": "cloud",
-      "font_class": "cloud",
-      "unicode": "e823",
-      "unicode_decimal": 59427
-    },
-    {
-      "icon_id": "4766903",
-      "name": "cloud-download",
-      "font_class": "cloud-download",
-      "unicode": "e824",
-      "unicode_decimal": 59428
-    },
-    {
-      "icon_id": "4766904",
-      "name": "cloud-sync",
-      "font_class": "cloud-sync",
-      "unicode": "e825",
-      "unicode_decimal": 59429
-    },
-    {
-      "icon_id": "4766905",
-      "name": "video",
-      "font_class": "video",
-      "unicode": "e826",
-      "unicode_decimal": 59430
-    },
-    {
-      "icon_id": "4766906",
-      "name": "notification",
-      "font_class": "notification",
-      "unicode": "e827",
-      "unicode_decimal": 59431
-    },
     {
       "icon_id": "4766907",
       "name": "sound",
@@ -2420,6 +2210,230 @@
       "unicode": "e807",
       "unicode_decimal": 59399
     },
+    {
+      "icon_id": "4766694",
+      "name": "unlock",
+      "font_class": "unlock",
+      "unicode": "e808",
+      "unicode_decimal": 59400
+    },
+    {
+      "icon_id": "4766695",
+      "name": "lock",
+      "font_class": "lock",
+      "unicode": "e809",
+      "unicode_decimal": 59401
+    },
+    {
+      "icon_id": "4766762",
+      "name": "customerservice",
+      "font_class": "customerservice",
+      "unicode": "e80a",
+      "unicode_decimal": 59402
+    },
+    {
+      "icon_id": "4766774",
+      "name": "medicinebox",
+      "font_class": "medicinebox",
+      "unicode": "e80b",
+      "unicode_decimal": 59403
+    },
+    {
+      "icon_id": "4766775",
+      "name": "shop",
+      "font_class": "shop",
+      "unicode": "e80c",
+      "unicode_decimal": 59404
+    },
+    {
+      "icon_id": "4766778",
+      "name": "rocket",
+      "font_class": "rocket",
+      "unicode": "e80d",
+      "unicode_decimal": 59405
+    },
+    {
+      "icon_id": "4766779",
+      "name": "shopping",
+      "font_class": "shopping",
+      "unicode": "e80e",
+      "unicode_decimal": 59406
+    },
+    {
+      "icon_id": "4766846",
+      "name": "folder",
+      "font_class": "folder",
+      "unicode": "e80f",
+      "unicode_decimal": 59407
+    },
+    {
+      "icon_id": "4766847",
+      "name": "folder-open",
+      "font_class": "folder-open",
+      "unicode": "e810",
+      "unicode_decimal": 59408
+    },
+    {
+      "icon_id": "4766848",
+      "name": "folder-add",
+      "font_class": "folder-add",
+      "unicode": "e811",
+      "unicode_decimal": 59409
+    },
+    {
+      "icon_id": "4766854",
+      "name": "account book",
+      "font_class": "accountbook",
+      "unicode": "e812",
+      "unicode_decimal": 59410
+    },
+    {
+      "icon_id": "4766855",
+      "name": "contacts",
+      "font_class": "contacts",
+      "unicode": "e813",
+      "unicode_decimal": 59411
+    },
+    {
+      "icon_id": "4766856",
+      "name": "carry out",
+      "font_class": "carryout",
+      "unicode": "e814",
+      "unicode_decimal": 59412
+    },
+    {
+      "icon_id": "4766857",
+      "name": "calendar-check",
+      "font_class": "calendar-check",
+      "unicode": "e815",
+      "unicode_decimal": 59413
+    },
+    {
+      "icon_id": "4766858",
+      "name": "calendar",
+      "font_class": "calendar",
+      "unicode": "e816",
+      "unicode_decimal": 59414
+    },
+    {
+      "icon_id": "4766861",
+      "name": "scan",
+      "font_class": "scan",
+      "unicode": "e817",
+      "unicode_decimal": 59415
+    },
+    {
+      "icon_id": "4766862",
+      "name": "select",
+      "font_class": "select",
+      "unicode": "e818",
+      "unicode_decimal": 59416
+    },
+    {
+      "icon_id": "4766881",
+      "name": "laptop",
+      "font_class": "laptop",
+      "unicode": "e819",
+      "unicode_decimal": 59417
+    },
+    {
+      "icon_id": "4766882",
+      "name": "barcode",
+      "font_class": "barcode",
+      "unicode": "e81a",
+      "unicode_decimal": 59418
+    },
+    {
+      "icon_id": "4766883",
+      "name": "camera",
+      "font_class": "camera",
+      "unicode": "e81b",
+      "unicode_decimal": 59419
+    },
+    {
+      "icon_id": "4766884",
+      "name": "cluster",
+      "font_class": "cluster",
+      "unicode": "e81c",
+      "unicode_decimal": 59420
+    },
+    {
+      "icon_id": "4766885",
+      "name": "gateway",
+      "font_class": "gateway",
+      "unicode": "e81d",
+      "unicode_decimal": 59421
+    },
+    {
+      "icon_id": "4766886",
+      "name": "car",
+      "font_class": "car",
+      "unicode": "e81e",
+      "unicode_decimal": 59422
+    },
+    {
+      "icon_id": "4766887",
+      "name": "printer",
+      "font_class": "printer",
+      "unicode": "e81f",
+      "unicode_decimal": 59423
+    },
+    {
+      "icon_id": "4766888",
+      "name": "read",
+      "font_class": "read",
+      "unicode": "e820",
+      "unicode_decimal": 59424
+    },
+    {
+      "icon_id": "4766900",
+      "name": "cloud-server",
+      "font_class": "cloud-server",
+      "unicode": "e821",
+      "unicode_decimal": 59425
+    },
+    {
+      "icon_id": "4766901",
+      "name": "cloud-upload",
+      "font_class": "cloud-upload",
+      "unicode": "e822",
+      "unicode_decimal": 59426
+    },
+    {
+      "icon_id": "4766902",
+      "name": "cloud",
+      "font_class": "cloud",
+      "unicode": "e823",
+      "unicode_decimal": 59427
+    },
+    {
+      "icon_id": "4766903",
+      "name": "cloud-download",
+      "font_class": "cloud-download",
+      "unicode": "e824",
+      "unicode_decimal": 59428
+    },
+    {
+      "icon_id": "4766904",
+      "name": "cloud-sync",
+      "font_class": "cloud-sync",
+      "unicode": "e825",
+      "unicode_decimal": 59429
+    },
+    {
+      "icon_id": "4766905",
+      "name": "video",
+      "font_class": "video",
+      "unicode": "e826",
+      "unicode_decimal": 59430
+    },
+    {
+      "icon_id": "4766906",
+      "name": "notification",
+      "font_class": "notification",
+      "unicode": "e827",
+      "unicode_decimal": 59431
+    },
     {
       "icon_id": "4765725",
       "name": "close-circle",

src/views/biz/stats/chart/pie.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="pie">
+    <!-- <div class="pie-percentage no-print" @click="handlePercentage"
+      >{{ showPercentage ? '隐藏' : '显示' }}百分比</div> -->
+    <div ref="chartRef" :style="{ height, width }" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, PropType, ref, Ref, watch } from 'vue';
+
+  import { useECharts } from '/@/hooks/web/useECharts';
+  const props = defineProps({
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '400px',
+    },
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  });
+  // console.log('props', props);
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  const showPercentage = ref(true);
+  onMounted(async () => {
+    setChart();
+  });
+  watch(
+    () => props.data,
+    _newVal => {
+      setChart();
+    },
+  );
+  // function handlePercentage() {
+  //   showPercentage.value = !showPercentage.value;
+  //   setChart();
+  // }
+  function setChart() {
+    const data = props.data?.content;
+    const sum = data?.reduce((pre, cur) => pre + cur.value, 0) || 0;
+    let legend = {} as any;
+    legend =
+      props.data.id != 'bubble' &&
+      props.data.id != 'jam' &&
+      props.data.id != 'noBox' &&
+      props.data.id != 'limit' &&
+      props.data.id != 'lowBattery' &&
+      props.data.id != 'outOfControl' &&
+      props.data.id != 'machine'
+        ? {
+            orient: 'vertical',
+            right: 20,
+            top: 40,
+            bottom: 20,
+          }
+        : {
+            orient: 'horizontal',
+            right: 20,
+            top: 40,
+            type: 'scroll',
+          };
+
+    const lableFormatter = showPercentage.value ? '{b} (数量: {c}, 占比: {d}%)' : '{b} ({c})';
+    setOptions({
+      title: {
+        show: false,
+        text: props.data?.description || '',
+        left: 'left',
+      },
+      tooltip: {
+        trigger: 'item',
+        valueFormatter: (value: number) =>
+          '数量: ' + value + ' 占比: ' + (Number(((value / sum) * 100).toFixed(2)) || 0) + '%',
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {
+            type: 'png',
+          },
+        },
+      },
+      legend,
+      series: [
+        {
+          type: 'pie',
+          radius: '50%',
+          data: props.data?.content || [],
+          minAngle: 5,
+          avoidLabelOverlap: true,
+          label: {
+            show: true,
+            formatter: lableFormatter,
+            overflow: 'break',
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+        },
+      ],
+    });
+  }
+</script>
+<style lang="less" scoped>
+  .pie {
+    position: relative;
+
+    &-percentage {
+      position: absolute;
+      top: 4px;
+      right: 35px;
+      z-index: 99;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      padding: 2px 4px;
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 0.3s ease-in-out;
+
+      &:hover {
+        box-shadow: 2px 4px 4px rgb(12 12 12 / 10%);
+      }
+    }
+  }
+</style>

src/views/biz/stats/supplies/data.ts

@@ -0,0 +1,6 @@
+export const BasicTab = [
+  { key: 'suppliesStats', value: 0, title: '耗材用量' },
+  { key: 'pharmaceuticalsStats', value: 1, title: '药品用量' },
+];
+
+export const BasicTabActive = BasicTab[0].key;

src/views/biz/stats/supplies/index.vue

@@ -1,7 +1,52 @@
 <template>
-  <div> 占位符 </div>
+  <div class="m-4">
+    <div class="mb-4">
+      <XTTitle :title="title" :go-back="false" />
+    </div>
+    <div class="py-2 bg-white">
+      <a-tabs v-model:activeKey="activeKey" :destroyInactiveTabPane="true">
+        <a-tab-pane
+          v-for="item in tabData"
+          :key="item.key"
+          :tab="item.title"
+          :class="'tab-' + item.key"
+        >
+          <!-- 耗材用量 0 -->
+          <div v-if="item.value == 0 && info.id"> 耗材用量 </div>
+          <!-- 药品用量 1 -->
+          <div v-if="item.value == 1 && info.id">
+            <PharmaceuticalsStats />
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { BasicTab, BasicTabActive } from './data';
+  import PharmaceuticalsStats from './pharmaceuticalsStats/index.vue';
+  import { useRoute } from 'vue-router';
+  import { XTTitle } from '/@/components/XTTitle/index';
 
-<style lang="less" scoped></style>
+  const route = useRoute();
+  console.log('🚀 ~ file: index.vue:25 ~ route:', route);
+  const info = ref({
+    id: String(route.query?.id),
+    name: route.query?.name,
+  });
+  const activeKey = ref(BasicTabActive);
+  const tabData = ref(BasicTab);
+  const title = '药品耗材';
+</script>
+
+<style lang="less" scoped>
+  .tab-medicalDocuments {
+    padding: 0;
+  }
+
+  ::v-deep(.ant-tabs-tab) {
+    padding: 12px;
+  }
+</style>

src/views/biz/stats/supplies/pharmaceuticalsStats/data.ts

@@ -0,0 +1,37 @@
+import { BasicColumn } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '药品类型',
+    dataIndex: 'type',
+    align: 'left',
+  },
+  {
+    title: '数量',
+    dataIndex: 'sum',
+    align: 'left',
+  },
+  {
+    title: '占比',
+    dataIndex: 'proportion',
+    align: 'left',
+  },
+];
+
+export const detailColumns: BasicColumn[] = [
+  {
+    title: '药品名称',
+    dataIndex: 'type',
+    align: 'left',
+  },
+  {
+    title: '数量',
+    dataIndex: 'sum',
+    align: 'left',
+  },
+  {
+    title: '占比',
+    dataIndex: 'proportion',
+    align: 'left',
+  },
+];

src/views/biz/stats/supplies/pharmaceuticalsStats/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="flex items-center xt-form">
+    <XTForm :form-data="formData" @change="callForm" />
+    <Button type="default" @click="handleDownload"
+      ><Icon icon="icon-xt-download-download_default|iconfont" :size="14" />
+    </Button>
+  </div>
+  <div class="mb-4">
+    <XTTitle :title="title" :go-back="false" />
+  </div>
+  <Row style="max-height: 400px">
+    <Col :span="16">
+      <Pie :data="pieData" />
+    </Col>
+    <Col :span="8">
+      <BasicTable @register="registerTable">
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'type'">
+            <span> {{ formatDictValue(durgTypeOptions, record.type) }}</span>
+          </template>
+          <template v-if="column.key === 'sum'">
+            <a @click="handleDetail(record)">{{ record.sum }}</a>
+          </template>
+        </template>
+      </BasicTable>
+    </Col>
+  </Row>
+  <Row style="max-height: 200px">
+    <Col :span="24">
+      <BasicTable @register="registerDetailTable">
+        <template #headerCell="{ column }">
+          <template v-if="column.key === 'type'"> {{ detailName }} </template>
+          <template v-if="column.key === 'sum'"> 数量 </template>
+          <template v-if="column.key === 'proportion'"> 占比 </template>
+        </template>
+      </BasicTable>
+    </Col>
+  </Row>
+</template>
+
+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import { Row, Col, Button } from 'ant-design-vue';
+  import { XTForm } from '/@/components/XTForm/index';
+  import { XTTitle } from '/@/components/XTTitle/index';
+  import { getDrugStats } from '/@/api/biz/stats/suppliesStatsApi';
+  import { BasicTable, useTable } from '@/components/Table';
+  import { columns, detailColumns } from './data';
+  import { Icon } from '/@/components/Icon';
+  import { formatDictValue } from '/@/utils';
+  import { listDictModel } from '/@/api/common';
+  import Pie from '../../chart/pie.vue';
+  // formdata
+  const title = ref('药品用量统计');
+  const pieData = ref({} as any); // Echart图表组件赋值变量
+  const tableData = ref([]); // 药品类型统计数据
+  const detailTableData = ref([]);
+  const patrolTime = ref([]); // 时间查询参数
+  const detailName = ref('');
+  const formData = [
+    {
+      name: 'patrolTime',
+      componentType: 'RangePicker',
+      placeholder: '请选择维修时间',
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
+    {},
+  ];
+  // 药品类型统计表格配置
+  const [registerTable, { setTableData }] = useTable({
+    showIndexColumn: false,
+    bordered: true,
+    striped: false,
+    pagination: false,
+    maxHeight: 200,
+    dataSource: tableData.value,
+    columns: columns,
+  });
+
+  const [registerDetailTable, { setTableData: setDetailTableData }] = useTable({
+    showIndexColumn: false,
+    bordered: true,
+    striped: false,
+    pagination: false,
+    maxHeight: 200,
+    dataSource: detailTableData.value,
+    columns: detailColumns,
+  });
+
+  const durgTypeOptions = ref();
+  onMounted(async () => {
+    durgTypeOptions.value = await listDictModel({ dictCode: 'pht' }); // 查询药品类型字典数据
+    getDatas(); // 执行获取统计数据方法
+  });
+
+  // 查询组件回调
+  async function callForm(data) {
+    patrolTime.value = data.patrolTime || [];
+    getDatas();
+  }
+  // 获取统计数据
+  async function getDatas() {
+    const params = {
+      statsTime: patrolTime.value,
+    };
+    const res = await getDrugStats(params); // 请求药品统计接口
+    tableData.value = res.data;
+    await setTableData(res.data); // 右侧统计数据表格赋值
+    // 组合Echart图表数据格式
+    const dataList = {
+      content: [],
+      description: title.value,
+    };
+    res.data.forEach(item => {
+      dataList.content.push({
+        name: formatDictValue(durgTypeOptions.value, item.type),
+        value: item.sum,
+      });
+    });
+    pieData.value = dataList; // Echart图表赋值
+    handleDetail(tableData.value[0]);
+  }
+  // 统计下载事件
+  function handleDownload() {
+    console.log('下载按钮');
+  }
+  // 点击表格中数字
+  async function handleDetail(record) {
+    const params = {
+      statsTime: patrolTime.value,
+      drugType: record.type,
+    };
+    const res = await getDrugStats(params); // 请求药品统计接口
+    detailName.value = formatDictValue(durgTypeOptions.value, record.type);
+    await setDetailTableData(res.data);
+  }
+</script>
+
+<style lang="less" scoped>
+  ::v-deep(.xt-title) {
+    padding-left: 40px;
+    background-color: #f6f8fa;
+  }
+
+  .xt-form {
+    justify-content: flex-end;
+    margin-right: 20px;
+  }
+
+  ::v-deep(.ant-row) {
+    max-height: 460px;
+  }
+</style>