fix: 运营监控手术量统计和科室手术量统计模块互换及echart区域宽高调整

src/views/pageMonitor/bottomLeft/OpHistogram.vue

@@ -165,6 +165,7 @@ export default {
         grid: {
           height: "80%",
           top: "8%",
+          right: 0,
           // bottom: "5%",
         },
         xAxis: {

src/views/pageMonitor/bottomLeft/index.vue

@@ -4,12 +4,15 @@
     v-loading="isLoading"
   >
     <div
-      class="w-[12.4vh] h-[5.07vh] ml-[1.85vh] flex justify-between items-center"
+      class="w-[45%] h-[5.07vh] ml-[1.85vh] flex justify-between items-center"
     >
       <img src="@/assets/svg/Monitor/Triangle.svg" />
-      <span class="text-[2.03vh] youshe leading-none">手术量统计</span>
+      <span class="text-[2.03vh] youshe leading-none"
+        >科室手术量统计(前五)</span
+      >
     </div>
-    <div class="w-[42.96vh] h-[27.12vh] ml-[2.96vh] my-[3.7vh]">
+    <div class="w-[42.96vh] ml-[2.96vh] deptBody">
+      <div class="h-[30vh] w-full">
         <Histogram
           v-if="getDataList.length"
           :getDataList="getDataList"
@@ -22,6 +25,7 @@
           <span>暂无数据</span>
         </div>
       </div>
+    </div>
     <div
       class="absolute right-0 top-1/4 w-[3.51vh] h-[12.6vh]"
       :class="sliderClass"
@@ -43,10 +47,12 @@
 </template>
 
 <script>
-import { GetMonitorOperationNumber } from "@/api/monitor";
+// import { GetMonitorOperationNumber } from "@/api/monitor";
+import { GetMonitorOperationDept } from "@/api/monitor";
 import dayjs from "dayjs";
-import Histogram from "./OpHistogram.vue";
-
+// import Histogram from "./OpHistogram.vue";
+// import Histogram from "@/views/pageMonitor/bottomLeft/OpHistogram.vue";
+import Histogram from "@/views/pageMonitor/bottomRight/DepHistogram.vue";
 export default {
   data() {
     return {
@@ -67,11 +73,13 @@ export default {
   methods: {
     onGetPageData() {
       this.isLoading = true;
-      GetMonitorOperationNumber({
+      GetMonitorOperationDept({
         startDate: this.startDate,
         endDate: this.endDate,
       }).then((res) => {
-        this.getDataList = [res["data"]] || [];
+        // this.getDataList = [res["data"]] || [];
+        // this.isLoading = false;
+        this.getDataList = res["data"] || [];
         this.isLoading = false;
       });
     },
@@ -120,4 +128,11 @@ export default {
 .bgMonthBox {
   background-image: url("@/assets/svg/Monitor/BottomLeft/MonthActive.svg");
 }
+
+.deptBody {
+  height: calc(100% - 5.07vh);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>

src/views/pageMonitor/bottomRight/DepHistogram.vue

@@ -168,6 +168,8 @@ export default {
         grid: {
           height: "80%",
           top: "8%",
+          right: 0,
+          bottom: 0,
           // bottom: "5%",
         },
         xAxis: {

src/views/pageMonitor/bottomRight/index.vue

@@ -4,12 +4,10 @@
     v-loading="isLoading"
   >
     <div
-      class="w-[20.8vh] h-[5.07vh] ml-[1.85vh] flex justify-between items-center"
+      class="w-[34%] h-[5.07vh] ml-[1.85vh] flex justify-between items-center"
     >
       <img src="@/assets/svg/Monitor/Triangle.svg" />
-      <span class="text-[2.03vh] youshe leading-none"
-        >科室手术量统计(前五)</span
-      >
+      <span class="text-[2.03vh] youshe leading-none">手术量统计</span>
     </div>
     <div class="w-[35.46vh] h-[28.05vh] ml-[2.4vh] my-[3.7vh]">
       <!-- <div ref="echartsContainer"></div> -->
@@ -46,9 +44,11 @@
 </template>
 
 <script>
-import { GetMonitorOperationDept } from "@/api/monitor";
+import { GetMonitorOperationNumber } from "@/api/monitor";
 import dayjs from "dayjs";
-import Histogram from "./DepHistogram.vue";
+// import Histogram from "./DepHistogram.vue";
+// import Histogram from "@/views/pageMonitor/bottomRight/DepHistogram.vue"
+import Histogram from "@/views/pageMonitor/bottomLeft/OpHistogram.vue";
 
 export default {
   data() {
@@ -70,11 +70,14 @@ export default {
   methods: {
     onGetPageData() {
       this.isLoading = true;
-      GetMonitorOperationDept({
+      GetMonitorOperationNumber({
         startDate: this.startDate,
         endDate: this.endDate,
       }).then((res) => {
-        this.getDataList = res["data"] || [];
+        // this.getDataList = res["data"] || [];
+        // this.isLoading = false;
+
+        this.getDataList = [res["data"]] || [];
         this.isLoading = false;
       });
     },