From e64b1f4113bc76c87fcbe817109a788408a8b871 Mon Sep 17 00:00:00 2001
From: "@0Melon0" <576788380@qq.com>
Date: Mon, 11 Sep 2023 14:50:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Decharts=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                            |  28 +++
 package.json                                 |   1 +
 src/views/pageMonitor/bottomMiddle/index.vue |   7 +-
 src/views/pageMonitor/topLeft/index.vue      |   2 +-
 src/views/pageMonitor/topRight/index.vue     |   6 +-
 src/views/pageOperation/leftTop/index.vue    |   3 +-
 src/views/pageRoom/index.vue                 |   5 +-
 src/views/pageRoom/leftMiddle/index.vue      | 132 +++++++++---
 src/views/pageRoom/rightMiddle/index.vue     | 208 ++++++++++++++-----
 9 files changed, 303 insertions(+), 89 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9504b8d..4ddeec4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@jiaminghi/data-view": "^2.10.0",
         "core-js": "^3.8.3",
         "dayjs": "^1.11.9",
+        "echarts": "^5.4.3",
         "element-ui": "^2.15.14",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
@@ -5209,6 +5210,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.4"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -11783,6 +11798,19 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
+    },
+    "node_modules/zrender": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   }
 }
diff --git a/package.json b/package.json
index fce713c..1111a4b 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@jiaminghi/data-view": "^2.10.0",
     "core-js": "^3.8.3",
     "dayjs": "^1.11.9",
+    "echarts": "^5.4.3",
     "element-ui": "^2.15.14",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
diff --git a/src/views/pageMonitor/bottomMiddle/index.vue b/src/views/pageMonitor/bottomMiddle/index.vue
index aff512f..f91d39a 100644
--- a/src/views/pageMonitor/bottomMiddle/index.vue
+++ b/src/views/pageMonitor/bottomMiddle/index.vue
@@ -67,12 +67,13 @@ export default {
                 fontSize: 14,
               },
             },
-            gradient: {
-              color: ['#83bff6', '#188df0', '#188df0'],
-            },
+            // gradient: {
+            //   color: ['#83bff6', '#188df0', '#188df0'],
+            // },
             backgroundBar: {
               show: true,
             },
+            independentColor: true,
           },
         ],
       },
diff --git a/src/views/pageMonitor/topLeft/index.vue b/src/views/pageMonitor/topLeft/index.vue
index 15e4f64..a5f83c3 100644
--- a/src/views/pageMonitor/topLeft/index.vue
+++ b/src/views/pageMonitor/topLeft/index.vue
@@ -17,7 +17,7 @@
         </dv-border-box-2>
         <dv-border-box-2 class="item">
           <p class="active numFont">80个</p>
-          <p>急症患者</p>
+          <p>急诊患者</p>
         </dv-border-box-2>
       </div>
     </dv-border-box-13>
diff --git a/src/views/pageMonitor/topRight/index.vue b/src/views/pageMonitor/topRight/index.vue
index c796da4..2465ebd 100644
--- a/src/views/pageMonitor/topRight/index.vue
+++ b/src/views/pageMonitor/topRight/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="topRight">
     <dv-border-box-13>
-      <el-carousel direction="vertical" :autoplay="false" :interval="5000">
+      <el-carousel direction="vertical" :autoplay="true" :interval="5000">
         <el-carousel-item v-for="item in 3" :key="item">
           <template v-for="(item1, index) in 21">
             <div class="item" :key="item1">
@@ -60,10 +60,10 @@ export default {
             justify-content: space-evenly;
             letter-spacing: 0.1vh;
             p:first-child {
-              font-size: 2.4vh;
+              font-size: 2.2vh;
             }
             p:last-child {
-              font-size: 2.6vh;
+              font-size: 2.4vh;
             }
           }
         }
diff --git a/src/views/pageOperation/leftTop/index.vue b/src/views/pageOperation/leftTop/index.vue
index 9a438b6..cb35641 100644
--- a/src/views/pageOperation/leftTop/index.vue
+++ b/src/views/pageOperation/leftTop/index.vue
@@ -22,6 +22,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 35,
+            center: ['50%', '45%'],
             data: [{ name: 'itemA', value: 80, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }],
             axisLabel: {
               show: false,
@@ -70,7 +71,7 @@ export default {
   .dataSection {
     width: 100%;
     position: absolute;
-    bottom: 1.4vh;
+    bottom: 1.2vh;
     p {
       color: #fff;
       font-size: 2.4vh;
diff --git a/src/views/pageRoom/index.vue b/src/views/pageRoom/index.vue
index ad86bdf..967d0c1 100644
--- a/src/views/pageRoom/index.vue
+++ b/src/views/pageRoom/index.vue
@@ -29,13 +29,14 @@ export default {
   display: flex;
   justify-content: space-between;
   .leftBox {
-    flex-basis: 18%;
+    flex-basis: 25%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   .rightBox {
-    flex-basis: 80%;
+    flex-basis: 74%;
+    margin-left: 1%;
   }
 }
 </style>
diff --git a/src/views/pageRoom/leftMiddle/index.vue b/src/views/pageRoom/leftMiddle/index.vue
index 3b2c45b..48f7db0 100644
--- a/src/views/pageRoom/leftMiddle/index.vue
+++ b/src/views/pageRoom/leftMiddle/index.vue
@@ -2,25 +2,102 @@
   <div class="leftMiddle">
     <dv-border-box-13>
       <dv-border-box-2 class="item">
-        <p>手术间数</p>
-        <span class="numFont">80</span>
+        <dv-charts :option="option"></dv-charts>
+        <section class="dataSection">
+          <p>手术间数<span class="numFont">100</span></p>
+        </section>
       </dv-border-box-2>
       <dv-decoration-2 />
       <dv-border-box-2 class="item">
-        <p>手术间利用率</p>
-        <span class="numFont">72%</span>
-      </dv-border-box-2>
-      <dv-decoration-2 />
-      <dv-border-box-2 class="item">
-        <p>平均接台时间</p>
-        <span class="numFont">45分钟</span>
+        <dv-charts :option="option1" />
+        <section class="dataSection">
+          <p>平均接台时间<span class="numFont">45</span> min</p>
+        </section>
       </dv-border-box-2>
     </dv-border-box-13>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      option: {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: -Math.PI / 2,
+            endAngle: Math.PI * 1.5,
+            arcLineWidth: 35,
+            center: ['50%', '45%'],
+            data: [{ name: 'itemA', value: 80, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }],
+            axisLabel: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            dataItemStyle: {
+              lineCap: 'round',
+            },
+            details: {
+              show: true,
+              formatter: '手术间利用率 {value}%',
+              style: {
+                fill: 'aqua',
+                fontSize: 24,
+              },
+            },
+            backgroundArc: {
+              style: {
+                stroke: '#4F518C',
+              },
+            },
+          },
+        ],
+      },
+      option1: {
+        grid: {
+          left: '0%',
+          top: '10%',
+        },
+        series: [
+          {
+            type: 'gauge',
+            data: [{ name: 'itemA', value: 45, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }],
+            center: ['50%', '45%'],
+            arcLineWidth: 25,
+            max: 120,
+            splitNum: 6,
+            axisLabel: {
+              formatter: '{value} min',
+              style: {
+                fill: '#fff',
+                fontSize: 14,
+              },
+            },
+            axisTick: {
+              style: {
+                stroke: '#fff',
+              },
+            },
+            dataItemStyle: {
+              lineCap: 'round',
+            },
+            backgroundArc: {
+              style: {
+                stroke: '#4F518C',
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -34,27 +111,28 @@ export default {};
       flex-direction: column;
       justify-content: space-around;
       align-items: center;
-      .item {
-        height: 45%;
-        .border-box-content {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          align-items: center;
-          padding: 2vh 0;
-          box-sizing: border-box;
-          p {
-            font-size: 2.4vh;
-          }
+      position: relative;
+      .dv-decoration-2 {
+        height: 2%;
+      }
+      .dataSection {
+        width: 100%;
+        position: absolute;
+        bottom: 4vh;
+        p {
+          color: #fff;
+          font-size: 2.4vh;
+          text-align: center;
+          letter-spacing: 0.2vh;
+          line-height: 4vh;
           span {
-            font-size: 3.6vh;
-            color: #61bad3;
+            font-size: 2.6vh;
+            color: aqua;
+            letter-spacing: 0.1vh;
+            margin-left: 1vh;
           }
         }
       }
-      .dv-decoration-2 {
-        height: 2%;
-      }
     }
   }
 }
diff --git a/src/views/pageRoom/rightMiddle/index.vue b/src/views/pageRoom/rightMiddle/index.vue
index 5e7bd14..b9c3ea6 100644
--- a/src/views/pageRoom/rightMiddle/index.vue
+++ b/src/views/pageRoom/rightMiddle/index.vue
@@ -2,85 +2,193 @@
   <div class="rightMiddle">
     <dv-border-box-13>
       <dv-loading v-if="isLoding">Loading...</dv-loading>
-      <section v-else>
-        <dv-charts :option="option"></dv-charts>
-      </section>
+      <section v-else ref="echartsContainer"></section>
     </dv-border-box-13>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
+import dayjs from 'dayjs';
 export default {
   data() {
     return {
-      isLoding: true,
-      option: {
+      isLoding: false,
+      chartOptions: {
+        grid: {
+          width: '92%',
+          height: '88%',
+          left: '6%',
+          top: '10%',
+        },
+        legend: {
+          type: 'scroll',
+          data: ['手术准备', '手术中', '完成手术'],
+          top: 10,
+          left: 10,
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+          },
+        },
         xAxis: {
-          type: 'category',
+          type: 'time',
           position: 'top',
-          data: 'value',
-          min: 0,
-          max: 24,
-          minInterval: 1,
-          splitNumber: 25,
+          splitNumber: 24,
           axisLabel: {
-            style: {
-              stroke: '#fff',
-              fontSize: 14,
+            color: '#fff',
+            fontSize: 14,
+            formatter: function (value) {
+              var date = new Date(value);
+              var hours = date.getHours();
+              var minutes = date.getMinutes();
+              if (hours === 0 && minutes === 0) {
+                return '00:00';
+              } else {
+                return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;
+              }
             },
-            formatter: dataItem => `${String(dataItem.value).padStart(2, '0')}:00`,
           },
         },
         yAxis: {
+          type: 'category',
           data: [],
-          splitLine: { show: false },
           axisLabel: {
-            style: {
-              stroke: '#fff',
-              fontSize: 14,
-            },
+            color: '#fff',
+            fontSize: 14,
           },
         },
         series: [],
       },
     };
   },
-  mounted() {
-    setTimeout(() => {
+  methods: {
+    initData() {
+      // 创建一个数组来存储整点时间
+      const currentDate = dayjs().format('YYYY-MM-DD');
+      const hours = new Date().getHours();
+      this.chartOptions.xAxis.min = `${currentDate} 08:00:00`;
+      this.chartOptions.xAxis.max = `${dayjs().add(1, 'day').format('YYYY-MM-DD')} 07:00:00`;
       // 手术间数量
-      const num = 12;
+      const num = 20;
+      // 时间数组
+      const timeArr = [];
       // 生成手术间
       for (let index = num; index >= 1; index--) {
-        this.option.yAxis.data.push(`手术间${String(index).padStart(2, '0')}`);
+        this.chartOptions.yAxis.data.push(`手术间${String(index).padStart(2, '0')}`);
+        const isUseArr = this.getUseTime();
+        for (let j = 1; j < isUseArr.length; j += 2) {
+          if (isUseArr[j] <= hours) {
+            timeArr.push({
+              startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
+              endTime: `${currentDate} ${isUseArr[j]}:00:00`,
+              yValue: index - 1,
+              color: '#87ceeb',
+              diff: dayjs(`${currentDate} ${isUseArr[j]}:00:00`).diff(
+                dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
+                'minute'
+              ),
+              name: '完成手术',
+            });
+          } else if (isUseArr[j] > hours && isUseArr[j - 1] < hours) {
+            timeArr.push({
+              startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
+              endTime: `${currentDate} ${hours}:00:00`,
+              yValue: index - 1,
+              color: '#72BDA3',
+              diff: dayjs(`${currentDate} ${hours}:00:00`).diff(
+                dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
+                'minute'
+              ),
+              name: '手术中',
+            });
+          } else if (isUseArr[j] > hours && isUseArr[j - 1] == hours) {
+            timeArr.push({
+              startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
+              endTime: `${currentDate} ${hours}:05:00`,
+              yValue: index - 1,
+              color: '#ECBA82',
+              diff: dayjs(`${currentDate} ${hours}:05:00`).diff(
+                dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
+                'minute'
+              ),
+              name: '手术准备',
+            });
+          }
+        }
       }
-      // 生成对应的使用率数据
-      for (let index = 1; index <= 24; index++) {
-        let seriesData = {
-          name: `bar${String(index).padStart(2, '0')}`,
-          type: 'bar',
-          stack: 'bar',
-          data: [],
-          independentColor: true,
-          independentColors: [],
-          barWidth: '40%',
-          barStyle: {
-            stroke: 'rgb(128,128,128)',
+      // 生成series数据
+      this.chartOptions.series = this.seriesData(timeArr);
+    },
+    seriesData(data) {
+      return data.map(function (item) {
+        return {
+          type: 'custom',
+          name: item.name,
+          renderItem: function (params, api) {
+            var xStart = api.coord([item.startTime, item.yValue]);
+            var xEnd = api.coord([item.endTime, item.yValue]);
+            var textX = (xStart[0] + xEnd[0]) / 2;
+            var textY = xStart[1] - 20;
+            return {
+              type: 'group',
+              children: [
+                {
+                  type: 'line',
+                  shape: {
+                    x1: xStart[0],
+                    y1: xStart[1],
+                    x2: xEnd[0],
+                    y2: xEnd[1],
+                  },
+                  style: {
+                    stroke: item.color,
+                    lineWidth: 8,
+                  },
+                },
+                {
+                  type: 'text',
+                  position: [textX, textY],
+                  style: {
+                    text: `${item.diff} min`,
+                    fill: item.color,
+                    textSize: '14px',
+                    textAlign: 'center',
+                  },
+                },
+              ],
+            };
           },
+          data: [item],
         };
-        for (let sunIndex = 0; sunIndex < num; sunIndex++) {
-          const isUse = Math.random() < 0.7;
-          seriesData.data.push(1);
-          if (isUse) {
-            seriesData.independentColors.push('#87ceeb');
-          } else {
-            seriesData.independentColors.push('rgb(128,128,128)');
-          }
+      });
+    },
+    getUseTime() {
+      // 随机生成当天手术室的使用时间
+      function getRandomUniqueValues(min, max, count) {
+        const values = new Set();
+        while (values.size < count) {
+          values.add(Math.floor(Math.random() * (max - min + 1)) + min);
         }
-        this.option.series.push(seriesData);
+        return Array.from(values);
       }
-      this.option = { ...this.option };
-      this.isLoding = false;
-    }, 500);
+
+      const numValues = Math.floor(Math.random() * 3) + 8;
+      const randomValues = getRandomUniqueValues(8, 24, numValues % 2 ? numValues + 1 : numValues);
+      return randomValues.sort((a, b) => {
+        return a - b;
+      });
+    },
+  },
+  mounted() {
+    const chartContainer = this.$refs.echartsContainer;
+    const chart = echarts.init(chartContainer);
+    this.initData();
+    // console.group('group');
+    // console.log(this.chartOptions);
+    // console.log(JSON.stringify(this.chartOptions));
+    // console.groupEnd();
+    chart.setOption(this.chartOptions);
   },
 };
 </script>
@@ -93,10 +201,6 @@ export default {
     box-sizing: border-box;
     section {
       height: 100%;
-      background-color: gray;
-      .dv-charts-container {
-        height: 100%;
-      }
     }
   }
 }