fix: 修复echarts样式

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=="
     }
   }
 }

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",

src/views/pageMonitor/bottomMiddle/index.vue

@@ -67,12 +67,13 @@ export default {
                 fontSize: 14,
               },
             },
-            gradient: {
+            // gradient: {
-              color: ['#83bff6', '#188df0', '#188df0'],
+            //   color: ['#83bff6', '#188df0', '#188df0'],
-            },
+            // },
             backgroundBar: {
               show: true,
             },
+            independentColor: true,
           },
         ],
       },

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>

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;
             }
           }
         }

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;

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>

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>
+        <dv-charts :option="option"></dv-charts>
-        <span class="numFont">80</span>
+        <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>
+        <dv-charts :option="option1" />
-        <span class="numFont">72%</span>
+        <section class="dataSection">
-      </dv-border-box-2>
+          <p>平均接台时间<span class="numFont">45</span> min</p>
-      <dv-decoration-2 />
+        </section>
-      <dv-border-box-2 class="item">
-        <p>平均接台时间</p>
-        <span class="numFont">45分钟</span>
       </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 {
+      position: relative;
-        height: 45%;
+      .dv-decoration-2 {
-        .border-box-content {
+        height: 2%;
-          display: flex;
+      }
-          flex-direction: column;
+      .dataSection {
-          justify-content: space-around;
+        width: 100%;
-          align-items: center;
+        position: absolute;
-          padding: 2vh 0;
+        bottom: 4vh;
-          box-sizing: border-box;
         p {
+          color: #fff;
           font-size: 2.4vh;
-          }
+          text-align: center;
+          letter-spacing: 0.2vh;
+          line-height: 4vh;
           span {
-            font-size: 3.6vh;
+            font-size: 2.6vh;
-            color: #61bad3;
+            color: aqua;
+            letter-spacing: 0.1vh;
+            margin-left: 1vh;
           }
         }
       }
-      .dv-decoration-2 {
-        height: 2%;
-      }
     }
   }
 }

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>
+      <section v-else ref="echartsContainer"></section>
-        <dv-charts :option="option"></dv-charts>
-      </section>
     </dv-border-box-13>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
+import dayjs from 'dayjs';
 export default {
   data() {
     return {
-      isLoding: true,
+      isLoding: false,
-      option: {
+      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',
+          splitNumber: 24,
-          min: 0,
-          max: 24,
-          minInterval: 1,
-          splitNumber: 25,
           axisLabel: {
-            style: {
+            color: '#fff',
-              stroke: '#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: {
+            color: '#fff',
-              stroke: '#fff',
             fontSize: 14,
           },
         },
-        },
         series: [],
       },
     };
   },
-  mounted() {
+  methods: {
-    setTimeout(() => {
+    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 = {
+      // 生成series数据
-          name: `bar${String(index).padStart(2, '0')}`,
+      this.chartOptions.series = this.seriesData(timeArr);
-          type: 'bar',
+    },
-          stack: 'bar',
+    seriesData(data) {
-          data: [],
+      return data.map(function (item) {
-          independentColor: true,
+        return {
-          independentColors: [],
+          type: 'custom',
-          barWidth: '40%',
+          name: item.name,
-          barStyle: {
+          renderItem: function (params, api) {
-            stroke: 'rgb(128,128,128)',
+            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',
+                  },
+                },
+              ],
             };
-        for (let sunIndex = 0; sunIndex < num; sunIndex++) {
+          },
-          const isUse = Math.random() < 0.7;
+          data: [item],
-          seriesData.data.push(1);
+        };
-          if (isUse) {
+      });
-            seriesData.independentColors.push('#87ceeb');
+    },
-          } else {
+    getUseTime() {
-            seriesData.independentColors.push('rgb(128,128,128)');
+      // 随机生成当天手术室的使用时间
-          }
+      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;
+      const numValues = Math.floor(Math.random() * 3) + 8;
-    }, 500);
+      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%;
-      }
     }
   }
 }