From b7c9710bc03751436c04649ae157cee6f7f78ef1 Mon Sep 17 00:00:00 2001
From: "shengwen.chen" <jellymelon13@outlook.com>
Date: Wed, 20 Aug 2025 18:15:59 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E5=AF=B9=E6=8E=A5=E8=BF=90=E8=90=A5?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7=E5=8F=AF=E8=A7=86=E5=8C=96=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pageMonitor/bottomLeft/index.vue   | 120 +++++-
 src/views/pageMonitor/bottomRight/eLeft.vue  |  24 ++
 src/views/pageMonitor/bottomRight/eMid.vue   |  24 ++
 src/views/pageMonitor/bottomRight/eRight.vue | 145 +++++++
 src/views/pageMonitor/bottomRight/index.vue  | 380 +------------------
 5 files changed, 318 insertions(+), 375 deletions(-)
 create mode 100644 src/views/pageMonitor/bottomRight/eLeft.vue
 create mode 100644 src/views/pageMonitor/bottomRight/eMid.vue
 create mode 100644 src/views/pageMonitor/bottomRight/eRight.vue

diff --git a/src/views/pageMonitor/bottomLeft/index.vue b/src/views/pageMonitor/bottomLeft/index.vue
index 73be8c1..e38b545 100644
--- a/src/views/pageMonitor/bottomLeft/index.vue
+++ b/src/views/pageMonitor/bottomLeft/index.vue
@@ -6,6 +6,7 @@
       </div>
     </header>
     <main>
+      <div id="chart" class="h-full"></div>
     </main>
     <section class="sidebar ">
       <div class="top" :class="{ 'active': active == 'week' }" @click="changeActive('week')">
@@ -19,17 +20,126 @@
 </template>
 
 <script>
+import * as echarts from "echarts";
+import { GetMonitorOperationDept } from '@/api/monitor';
+import dayjs from 'dayjs';
 export default {
   data() {
     return {
-      active: 'week'
+      active: 'week',
+      startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
+      endDate: dayjs().format('YYYY-MM-DD'),
+      renderTimer: null,
+      getDataList: [],
     };
   },
   methods: {
-    changeActive(newActive) {
-      this.active = newActive
-    }
-  }
+    changeActive(newActive = '') {
+      if (!newActive) {
+        if (this.active == 'week') {
+          newActive = 'month'
+        } else {
+          newActive = 'week'
+        }
+      }
+      this.startDate = dayjs().subtract(newActive == 'week' ? 7 : 30, 'day').format('YYYY-MM-DD');
+      this.active = newActive;
+      this.onGetPageData();
+    },
+    onGetPageData() {
+      GetMonitorOperationDept({
+        startDate: this.startDate,
+        endDate: this.endDate,
+      }).then(res => {
+        this.getDataList = res['data']
+        this.updateChart();
+      });
+    },
+    updateChart() {
+      const myChart = echarts.init(document.getElementById("chart"));
+      let categories = ['骨科', '普外科', '内科', '神经外科', '肿瘤科']
+      let values = [0, 0, 0, 0, 0]
+      let maxVal = 10;
+      if (this.getDataList.length) {
+        categories = this.getDataList.map(item => {
+          return item['deptName']
+        })
+        values = this.getDataList.map(item => {
+          return item['deptCount']
+        })
+        maxVal = Math.ceil(Math.max(...values) / 20) * 20;
+      }
+      const option = {
+        grid: {
+          left: 80,
+          right: 50,
+          top: 20,
+          bottom: 20,
+        },
+        xAxis: {
+          max: maxVal,
+          axisLabel: {
+            color: `rgba(0, 0, 0, 0.3)`,
+            fontSize: 12,
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: categories,
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: {
+            color: `rgba(0, 0, 0, 0.3)`,
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            data: values,
+            barWidth: 20,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { offset: 0, color: "#a066f8" },
+                { offset: 1, color: "#6173f7" },
+              ]),
+              borderRadius: 10,
+            },
+            z: 2,
+          },
+          {
+            type: "scatter",
+            data: values,
+            symbolSize: 24,
+            itemStyle: {
+              color: "#fff",
+              borderColor: "#8a6df0",
+              borderWidth: 1,
+              shadowColor: "#fff",
+              shadowBlur: 5,
+            },
+            z: 3,
+            label: {
+              show: true,
+              position: "outside",
+              formatter: "{c}",
+              color: "#8a6df0",
+              fontSize: 14,
+              fontWeight: "bold",
+            },
+          },
+        ],
+      };
+
+      myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.onGetPageData();
+    setInterval(() => {
+      this.changeActive()
+    }, this.$store.getters.intervalTime);
+  },
 };
 </script>
 
diff --git a/src/views/pageMonitor/bottomRight/eLeft.vue b/src/views/pageMonitor/bottomRight/eLeft.vue
new file mode 100644
index 0000000..c4e9d98
--- /dev/null
+++ b/src/views/pageMonitor/bottomRight/eLeft.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="opGradeBox box">
+    <header>
+      <div>
+        <p class="panmen">手术等级</p>
+      </div>
+    </header>
+    <main>
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    };
+  },
+  methods: {
+  },
+  mounted() {
+  },
+};
+</script>
diff --git a/src/views/pageMonitor/bottomRight/eMid.vue b/src/views/pageMonitor/bottomRight/eMid.vue
new file mode 100644
index 0000000..b20d70a
--- /dev/null
+++ b/src/views/pageMonitor/bottomRight/eMid.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="asaGradeBox box">
+    <header>
+      <div>
+        <p class="panmen">ASA分级</p>
+      </div>
+    </header>
+    <main>
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    };
+  },
+  methods: {
+  },
+  mounted() {
+  },
+};
+</script>
diff --git a/src/views/pageMonitor/bottomRight/eRight.vue b/src/views/pageMonitor/bottomRight/eRight.vue
new file mode 100644
index 0000000..461cde3
--- /dev/null
+++ b/src/views/pageMonitor/bottomRight/eRight.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="opstatisticBox box">
+    <header>
+      <div>
+        <p class="panmen">科室手术量统计（前五）</p>
+      </div>
+    </header>
+    <main>
+      <div id="chartBottomRight" class="h-full"></div>
+    </main>
+    <section class="sidebar">
+      <div class="top" :class="{ 'active': active == 'week' }" @click="changeActive('week')">
+        <span>周</span>
+      </div>
+      <div class="bottom" :class="{ 'active': active == 'month' }" @click="changeActive('month')">
+        <span>月</span>
+      </div>
+    </section>
+  </div>
+</template>
+
+
+<script>
+import * as echarts from "echarts";
+import { GetMonitorOperationDept } from '@/api/monitor';
+import dayjs from 'dayjs';
+export default {
+  data() {
+    return {
+      active: 'week',
+      startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
+      endDate: dayjs().format('YYYY-MM-DD'),
+      renderTimer: null,
+      getDataList: [],
+    };
+  },
+  methods: {
+    changeActive(newActive = '') {
+      if (!newActive) {
+        if (this.active == 'week') {
+          newActive = 'month'
+        } else {
+          newActive = 'week'
+        }
+      }
+      this.startDate = dayjs().subtract(newActive == 'week' ? 7 : 30, 'day').format('YYYY-MM-DD');
+      this.active = newActive;
+      this.onGetPageData();
+    },
+    onGetPageData() {
+      GetMonitorOperationDept({
+        startDate: this.startDate,
+        endDate: this.endDate,
+      }).then(res => {
+        this.getDataList = res['data']
+        this.updateChart();
+      });
+    },
+    updateChart() {
+      const myChart = echarts.init(document.getElementById("chartBottomRight"));
+      let categories = ['骨科', '普外科', '内科', '神经外科', '肿瘤科']
+      let values = [0, 0, 0, 0, 0]
+      let maxVal = 10;
+      if (this.getDataList.length) {
+        categories = this.getDataList.map(item => {
+          return item['deptName']
+        })
+        values = this.getDataList.map(item => {
+          return item['deptCount']
+        })
+        maxVal = Math.ceil(Math.max(...values) / 20) * 20;
+      }
+      const option = {
+        grid: {
+          left: 80,
+          right: 50,
+          top: 20,
+          bottom: 20,
+        },
+        xAxis: {
+          max: maxVal,
+          axisLabel: {
+            color: `rgba(0, 0, 0, 0.3)`,
+            fontSize: 12,
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: categories,
+          axisLine: { show: false },
+          axisTick: { show: false },
+          axisLabel: {
+            color: `rgba(0, 0, 0, 0.3)`,
+            fontSize: 12,
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            data: values,
+            barWidth: 20,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { offset: 0, color: "#a066f8" },
+                { offset: 1, color: "#6173f7" },
+              ]),
+              borderRadius: 10,
+            },
+            z: 2,
+          },
+          {
+            type: "scatter",
+            data: values,
+            symbolSize: 24,
+            itemStyle: {
+              color: "#fff",
+              borderColor: "#8a6df0",
+              borderWidth: 1,
+              shadowColor: "#fff",
+              shadowBlur: 5,
+            },
+            z: 3,
+            label: {
+              show: true,
+              position: "outside",
+              formatter: "{c}",
+              color: "#8a6df0",
+              fontSize: 14,
+              fontWeight: "bold",
+            },
+          },
+        ],
+      };
+
+      myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.onGetPageData();
+    setInterval(() => {
+      this.changeActive()
+    }, this.$store.getters.intervalTime);
+  },
+};
+</script>
diff --git a/src/views/pageMonitor/bottomRight/index.vue b/src/views/pageMonitor/bottomRight/index.vue
index ee255cc..866c50e 100644
--- a/src/views/pageMonitor/bottomRight/index.vue
+++ b/src/views/pageMonitor/bottomRight/index.vue
@@ -1,390 +1,30 @@
 <template>
   <section class="boxWrap">
-    <div class="opGradeBox box">
-      <header>
-        <div>
-          <p class="panmen">手术等级</p>
-        </div>
-      </header>
-      <main>
-        <div class="h-full" ref="echartsContainerLeft"></div>
-      </main>
-    </div>
-    <div class="asaGradeBox box">
-      <header>
-        <div>
-          <p class="panmen">ASA分级</p>
-        </div>
-      </header>
-      <main>
-        <div class="h-full" ref="echartsContainerRight"></div>
-      </main>
-    </div>
-    <div class="opstatisticBox box">
-      <header>
-        <div>
-          <p class="panmen">科室手术量统计（前五）</p>
-        </div>
-      </header>
-      <main></main>
-      <section class="sidebar">
-        <div class="top" :class="{ 'active': active == 'week' }" @click="changeActive('week')">
-          <span>周</span>
-        </div>
-        <div class="bottom" :class="{ 'active': active == 'month' }" @click="changeActive('month')">
-          <span>月</span>
-        </div>
-      </section>
-    </div>
+    <eLeft />
+    <eMid />
+    <eRight />
   </section>
 </template>
 
 <script>
-import * as echarts from 'echarts';
-import { GetMonitorOperationLevel, GetMonitorOperationASALevel } from '@/api/monitor';
-import { fnR } from '@/utils/common';
-import dayjs from 'dayjs';
-let chartLeft = null;
-let chartRight = null;
+import eLeft from './eLeft.vue';
+import eMid from './eMid.vue';
+import eRight from './eRight.vue';
 export default {
   data() {
     return {
-      active: 'week',
-      nowIndex: 0,
-      chartOptionsLeft: {
-        series: [
-          {
-            type: 'pie',
-            radius: ['32%', '50%'],
-            selectedMode: 'single',
-            data: [
-              { name: '一级', value: 148, selected: false },
-              { name: '二级', value: 87, selected: false },
-              { name: '三级', value: 75, selected: false },
-              { name: '四级', value: 40, selected: false },
-            ],
-            label: {
-              formatter: '{b}{c}',
-              color: 'inherit',
-            },
-            labelLine: {
-              show: true,
-              length: 15,
-              length2: 18,
-              smooth: 0.6, // 可以使引导线稍微弯曲，使得标签位置更加合理
-            },
-            padAngle: 5,
-            itemStyle: {
-              borderRadius: 10,
-            },
-          },
-          {
-            name: '外边框-outBig',
-            type: 'pie',
-            clockWise: false, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            center: ['50%', '50%'],
-            radius: ['62%', '62%'],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            data: [
-              {
-                value: 9,
-                name: '',
-                itemStyle: {
-                  normal: {
-                    borderWidth: 2,
-                    borderColor: '#2F58B4',
-                  },
-                },
-              },
-            ],
-          },
-          {
-            name: '外边框-outSmall',
-            type: 'pie',
-            clockWise: false, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            center: ['50%', '50%'],
-            radius: ['57%', '57%'],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            showEmptyCircle: true,
-            itemStyle: {
-              shadowColor: 'rgba(255, 0, 0, 1)',
-              shadowBlur: 10,
-              opacity: 1,
-            },
-            data: [
-              {
-                value: 9,
-                name: '',
-                itemStyle: {
-                  normal: {
-                    borderWidth: 2,
-                    borderColor: '#0D447C',
-                  },
-                },
-              },
-            ],
-          },
-          {
-            name: '内边框-inBig',
-            type: 'pie',
-            clockWise: true, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            center: ['50%', '50%'],
-            radius: ['25%', '25%'],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            itemStyle: {
-              shadowColor: 'rgba(255, 0, 0, 1)',
-              shadowBlur: 10,
-              opacity: 1,
-            },
-            data: [
-              {
-                value: 9,
-                name: '',
-                itemStyle: {
-                  normal: {
-                    borderWidth: 2,
-                    borderColor: '#006CFF',
-                    opacity: 0.4,
-                  },
-                },
-              },
-            ],
-          },
-          {
-            name: '内边框-inSmall',
-            type: 'pie',
-            clockWise: true, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            center: ['50%', '50%'],
-            radius: ['20%', '20%'],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            data: [
-              {
-                value: 9,
-                name: '',
-                itemStyle: {
-                  normal: {
-                    borderWidth: 2,
-                    borderColor: '#fff',
-                    opacity: 0.2,
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      },
-      chartOptionsRight: {
-        series: [
-          {
-            type: 'pie',
-            radius: ['32%', '50%'],
-            selectedMode: 'single',
-            data: [
-              { name: 'I级', value: 137, selected: false },
-              { name: 'II级', value: 105, selected: false },
-              { name: 'III级', value: 58, selected: false },
-              { name: 'IV级', value: 37, selected: false },
-              { name: 'V级', value: 13, selected: false },
-            ],
-            label: {
-              formatter: '{b}{c}',
-              color: 'inherit',
-            },
-            labelLine: {
-              show: true,
-              length: 15,
-              length2: 18,
-              smooth: 0.6, // 可以使引导线稍微弯曲，使得标签位置更加合理
-            },
-            padAngle: 5,
-            itemStyle: {
-              borderRadius: 10,
-            },
-          },
-          {
-            name: '外边框-outBig',
-            type: 'pie',
-            clockWise: false, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            center: ['50%', '50%'],
-            radius: ['62%', '62%'],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            data: [
-              {
-                value: 9,
-                name: '',
-                itemStyle: {
-                  normal: {
-                    borderWidth: 2,
-                    borderColor: '#2F58B4',
-                  },
-                },
-              },
-            ],
-          },
-          {
-            name: '外边框-outSmall',
-            type: 'pie',
-            clockWise: false, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            center: ['50%', '50%'],
-            radius: ['57%', '57%'],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            showEmptyCircle: true,
-            itemStyle: {
-              shadowColor: 'rgba(255, 0, 0, 1)',
-              shadowBlur: 10,
-              opacity: 1,
-            },
-            data: [
-              {
-                value: 9,
-                name: '',
-                itemStyle: {
-                  normal: {
-                    borderWidth: 2,
-                    borderColor: '#0D447C',
-                  },
-                },
-              },
-            ],
-          },
-          {
-            name: '内边框-inBig',
-            type: 'pie',
-            clockWise: true, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            center: ['50%', '50%'],
-            radius: ['25%', '25%'],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            itemStyle: {
-              shadowColor: 'rgba(255, 0, 0, 1)',
-              shadowBlur: 10,
-              opacity: 1,
-            },
-            data: [
-              {
-                value: 9,
-                name: '',
-                itemStyle: {
-                  normal: {
-                    borderWidth: 2,
-                    borderColor: '#006CFF',
-                    opacity: 0.4,
-                  },
-                },
-              },
-            ],
-          },
-          {
-            name: '内边框-inSmall',
-            type: 'pie',
-            clockWise: true, //顺时加载
-            hoverAnimation: false, //鼠标移入变大
-            center: ['50%', '50%'],
-            radius: ['20%', '20%'],
-            label: {
-              normal: {
-                show: false,
-              },
-            },
-            data: [
-              {
-                value: 9,
-                name: '',
-                itemStyle: {
-                  normal: {
-                    borderWidth: 2,
-                    borderColor: '#fff',
-                    opacity: 0.2,
-                  },
-                },
-              },
-            ],
-          },
-        ],
-      },
-      toDate: dayjs().format('YYYY-MM-DD'),
+
     };
   },
   methods: {
-    changeActive(newActive) {
-      this.active = newActive
-    },
-    onGetPageData() {
-      this.isLoading = true;
-      Promise.all([GetMonitorOperationLevel(this.toDate), GetMonitorOperationASALevel(this.toDate)]).then(res => {
-        this.chartOptionsLeft.series[0].data[0].value = res[0].data['level1'];
-        this.chartOptionsLeft.series[0].data[1].value = res[0].data['level2'];
-        this.chartOptionsLeft.series[0].data[2].value = res[0].data['level3'];
-        this.chartOptionsLeft.series[0].data[3].value = res[0].data['level4'];
-        this.chartOptionsRight.series[0].data[0].value = res[1].data['asaLevel1'];
-        this.chartOptionsRight.series[0].data[1].value = res[1].data['asaLevel2'];
-        this.chartOptionsRight.series[0].data[2].value = res[1].data['asaLevel3'];
-        this.chartOptionsRight.series[0].data[3].value = res[1].data['asaLevel4'];
-        this.chartOptionsRight.series[0].data[4].value = res[1].data['asaLevel5'];
-        if (this.$store.getters.isMock) {
-          this.chartOptionsLeft.series[0].data[0].value = fnR();
-          this.chartOptionsLeft.series[0].data[1].value = fnR();
-          this.chartOptionsLeft.series[0].data[2].value = fnR();
-          this.chartOptionsLeft.series[0].data[3].value = fnR();
-          this.chartOptionsRight.series[0].data[0].value = fnR();
-          this.chartOptionsRight.series[0].data[1].value = fnR();
-          this.chartOptionsRight.series[0].data[2].value = fnR();
-          this.chartOptionsRight.series[0].data[3].value = fnR();
-          this.chartOptionsRight.series[0].data[4].value = fnR();
-        }
-        chartLeft.setOption(this.chartOptionsLeft);
-        chartRight.setOption(this.chartOptionsRight);
-        this.isLoading = false;
-      });
-    },
+
   },
   mounted() {
-    chartLeft = echarts.init(this.$refs.echartsContainerLeft);
-    chartLeft.setOption(this.chartOptionsLeft);
-    chartRight = echarts.init(this.$refs.echartsContainerRight);
-    chartRight.setOption(this.chartOptionsRight);
-    this.onGetPageData();
-    setInterval(() => {
-      this.onGetPageData();
-    }, this.$store.getters.intervalTime);
   },
+  components: { eLeft, eMid, eRight }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import './index.scss'
 </style>