From c2a96eac6137b6a29816e565fe6a2a7125043607 Mon Sep 17 00:00:00 2001
From: "@0Melon0" <576788380@qq.com>
Date: Fri, 15 Sep 2023 20:50:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E9=A6=96=E5=8F=B0=E7=8E=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   9 +-
 src/assets/scss/pxtovw.scss                   |   3 +
 src/components/comGauge/index.vue             | 116 +++++++++
 src/components/comHeader/index.vue            |   8 +-
 src/router/index.js                           |   6 +
 src/views/pageOperation/index.vue             |   7 +-
 src/views/pageOperation/leftBottom/index.vue  |  68 +++--
 src/views/pageOperation/leftTop/index.vue     | 136 +++++-----
 src/views/pageOperation/rightMiddle/index.vue | 237 ++++++++++++++++--
 src/views/pageRoom/rightMiddle/index.vue      |  57 +++--
 src/views/pageTest/index.vue                  |  58 +++++
 11 files changed, 558 insertions(+), 147 deletions(-)
 create mode 100644 src/assets/scss/pxtovw.scss
 create mode 100644 src/components/comGauge/index.vue
 create mode 100644 src/views/pageTest/index.vue

diff --git a/src/App.vue b/src/App.vue
index c702bc8..348e045 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,7 +26,7 @@ export default {
     enterFullscreen() {
       const element = document.documentElement;
       // 请求全屏模式
-      if (!this.isLoding) {
+      if (this.isLoding) {
         if (element.webkitRequestFullscreen) {
           // Chrome, Safari and Opera
           element.webkitRequestFullscreen();
@@ -80,4 +80,11 @@ export default {
     padding-top: 0px;
   }
 }
+/* 定义渐变的样式 */
+.gradientText {
+  background: linear-gradient(to top, #0592ff, #fff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
 </style>
diff --git a/src/assets/scss/pxtovw.scss b/src/assets/scss/pxtovw.scss
new file mode 100644
index 0000000..c4313d4
--- /dev/null
+++ b/src/assets/scss/pxtovw.scss
@@ -0,0 +1,3 @@
+@function vw($px) {
+  @return $px/1920 * 100vw;
+}
\ No newline at end of file
diff --git a/src/components/comGauge/index.vue b/src/components/comGauge/index.vue
new file mode 100644
index 0000000..20099f1
--- /dev/null
+++ b/src/components/comGauge/index.vue
@@ -0,0 +1,116 @@
+<template>
+  <section ref="echartsContainer"></section>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  props: {
+    title: String,
+    maxNum: {
+      type: Number,
+      default: 100,
+    },
+    nowNum: Number,
+    unit: {
+      type: String,
+      default: '%',
+    },
+  },
+  data() {
+    return {
+      chartOptions: {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            pointer: {
+              show: false,
+            },
+            max: this.maxNum,
+            radius: '100%',
+            center: ['50%', '50%'],
+            progress: {
+              show: true,
+              overlap: false,
+              roundCap: true,
+              clip: false,
+              itemStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: '#03c2fd',
+                    },
+                    {
+                      offset: 0.5,
+                      color: '#1ed3e5',
+                    },
+                    {
+                      offset: 1,
+                      color: '#2fded6',
+                    },
+                  ],
+                  global: false,
+                },
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: [[1, '#4F518C']],
+                opacity: 0.7,
+                width: 30,
+              },
+            },
+            splitLine: {
+              show: false,
+              distance: 0,
+              length: 10,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+              distance: 50,
+            },
+            data: [
+              {
+                value: this.nowNum,
+                name: this.title,
+                title: {
+                  offsetCenter: ['0%', '20%'],
+                  fontSize: 22,
+                  fontFamily: 'Microsoft YaHei',
+                  color: '#fff',
+                  overflow: 'break',
+                  lineHeight: 20,
+                },
+                detail: {
+                  valueAnimation: true,
+                  offsetCenter: ['0%', '-15%'],
+                  fontSize: 40,
+                  fontFamily: 'DIN-Bold,Microsoft YaHei',
+                  color: '#03FFFF',
+                  formatter: `{value}${this.unit}`,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    const chartContainer = this.$refs.echartsContainer;
+    const chart = echarts.init(chartContainer);
+    chart.setOption(this.chartOptions);
+  },
+};
+</script>
diff --git a/src/components/comHeader/index.vue b/src/components/comHeader/index.vue
index 6f87301..4e6b3e2 100644
--- a/src/components/comHeader/index.vue
+++ b/src/components/comHeader/index.vue
@@ -3,10 +3,10 @@
     <dv-decoration-8 class="left" />
     <dv-decoration-5 class="center" />
     <dv-decoration-8 class="right" :reverse="true" />
-    <div class="centerTitle">{{ $route.meta.title }}</div>
-    <dv-decoration-7 class="dateBox"
-      ><span>{{ curTime }}</span></dv-decoration-7
-    >
+    <div class="centerTitle gradientText">{{ $route.meta.title }}</div>
+    <dv-decoration-7 class="dateBox">
+      <span>{{ curTime }}</span>
+    </dv-decoration-7>
   </Header>
 </template>
 
diff --git a/src/router/index.js b/src/router/index.js
index 8287d0a..d750f1c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -33,6 +33,12 @@ const routes = [
     meta: { title: '手术间利用率' },
     component: () => import('@/views/pageRoom/index.vue'),
   },
+  {
+    path: '/test',
+    name: 'test',
+    meta: { title: '手术间利用率' },
+    component: () => import('@/views/pageTest/index.vue'),
+  },
 ];
 
 const router = new VueRouter({
diff --git a/src/views/pageOperation/index.vue b/src/views/pageOperation/index.vue
index 0bf9bbc..cb8ec1b 100644
--- a/src/views/pageOperation/index.vue
+++ b/src/views/pageOperation/index.vue
@@ -26,21 +26,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/scss/pxtovw.scss';
 .operation {
   width: 100%;
   height: 100%;
-  padding: 2vh;
+  padding: vw(20);
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   .leftBox {
-    flex-basis: 25%;
+    flex-basis: vw(462);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   .rightBox {
-    flex-basis: 74%;
+    flex-basis: vw(1326);
   }
 }
 </style>
diff --git a/src/views/pageOperation/leftBottom/index.vue b/src/views/pageOperation/leftBottom/index.vue
index 8d3e382..471d961 100644
--- a/src/views/pageOperation/leftBottom/index.vue
+++ b/src/views/pageOperation/leftBottom/index.vue
@@ -1,53 +1,57 @@
 <template>
-  <div class="leftBottom">
-    <dv-border-box-13>
-      <dv-charts :option="option"></dv-charts>
-    </dv-border-box-13>
-  </div>
+  <dv-border-box-13 class="leftBottom">
+    <div class="echartsContainer" ref="echartsContainer"></div>
+  </dv-border-box-13>
 </template>
 
 <script>
+import * as echarts from 'echarts';
 export default {
   data() {
     return {
-      option: {
+      chartOptions: {
         grid: {
-          left: '18%',
+          top: '13%',
+          left: '13%',
+          right: '10%',
+          bottom: '13%',
         },
         xAxis: {
           type: 'category',
+          boundaryGap: false,
           data: ['3月', '4月', '5月', '6月', '7月', '8月'],
           axisLabel: {
-            style: {
-              stroke: '#fff',
-              fontSize: 14,
-            },
+            color: '#fff',
           },
         },
         yAxis: {
           type: 'value',
-          data: 'value',
-          max: 100,
-          min: 0,
           axisLabel: {
             formatter: '{value}%',
-            style: {
-              stroke: '#fff',
-              fontSize: 14,
-            },
+            color: '#fff',
           },
         },
         series: [
           {
+            data: [20, 86, 61, 69, 33, 50],
             type: 'line',
-            data: [92, 89, 96, 98, 95, 95],
-            label: {
-              show: true,
-              position: 'top',
-              formatter: '{value}%',
-              style: {
-                stroke: '#fff',
-                fontSize: 14,
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(0, 128, 255, 0.7)', // 开始颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(200, 254, 255, 0)', // 结束颜色
+                  },
+                ],
               },
             },
           },
@@ -55,11 +59,21 @@ export default {
       },
     };
   },
+  mounted() {
+    const chartContainer = this.$refs.echartsContainer;
+    const chart = echarts.init(chartContainer);
+    chart.setOption(this.chartOptions);
+  },
 };
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/scss/pxtovw.scss';
 .leftBottom {
-  height: 39%;
+  height: vw(380);
+  background: #011343;
+  .echartsContainer {
+    height: 100%;
+  }
 }
 </style>
diff --git a/src/views/pageOperation/leftTop/index.vue b/src/views/pageOperation/leftTop/index.vue
index 7303f74..e5e9e34 100644
--- a/src/views/pageOperation/leftTop/index.vue
+++ b/src/views/pageOperation/leftTop/index.vue
@@ -1,89 +1,93 @@
 <template>
   <div class="leftTop">
     <dv-border-box-13>
-      <dv-charts :option="option"></dv-charts>
+      <comGauge class="echartsContainer" :title="'首台准点率'" :nowNum="86"></comGauge>
       <section class="dataSection">
-        <p>总人数<span class="numFont">350</span></p>
-        <p>进行中<span class="numFont">50</span></p>
-        <p>待进行<span class="numFont">220</span></p>
+        <div class="left">
+          <p>总人数</p>
+          <span class="numFont gradientText">350</span>
+        </div>
+        <div class="right">
+          <div>
+            <p>进行中</p>
+            <span class="numFont gradientText">50</span>
+          </div>
+          <div>
+            <p>待进行</p>
+            <span class="numFont gradientText">220</span>
+          </div>
+        </div>
       </section>
     </dv-border-box-13>
   </div>
 </template>
 
 <script>
+import comGauge from '@/components/comGauge';
 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: 86, 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',
-              },
-            },
-          },
-        ],
-      },
-    };
+  components: {
+    comGauge,
   },
 };
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/scss/pxtovw.scss';
 .leftTop {
-  height: 59%;
+  height: vw(500);
   position: relative;
+  background-color: #011343;
   :deep(.dv-border-box-13) {
-    padding: 2vh;
+    padding: vw(40) vw(18);
     box-sizing: border-box;
-    .dv-charts-container {
-      height: 80%;
-    }
-  }
-  .dataSection {
-    position: absolute;
-    bottom: 1.2vh;
-    left: 50%;
-    transform: translateX(-50%);
-    p {
-      color: #fff;
-      font-size: 2.4vh;
-      letter-spacing: .2vh;
-      line-height: 4vh;
-      text-align: left;
-      span {
-        font-size: 2.6vh;
-        color: aqua;
-        letter-spacing: 0.1vh;
-        margin-left: 1vh;
+    .border-box-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .echartsContainer {
+        height: vw(252);
+      }
+      .dataSection {
+        height: vw(120);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .left {
+          flex-basis: vw(210);
+          border: 1px solid #4f518c;
+          height: 100%;
+          box-sizing: border-box;
+          padding-left: vw(32);
+          padding-top: vw(16);
+          p {
+            font-size: vw(20);
+            margin-bottom: vw(4);
+          }
+          span {
+            font-size: vw(44);
+          }
+        }
+        .right {
+          flex-basis: vw(210);
+          div {
+            height: vw(58);
+            border: 1px solid #4f518c;
+            box-sizing: border-box;
+            padding: vw(16) vw(24);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            p {
+              font-size: vw(20);
+            }
+            span {
+              font-size: vw(24);
+            }
+          }
+          div:first-child {
+            margin-bottom: vw(4);
+          }
+        }
       }
     }
   }
diff --git a/src/views/pageOperation/rightMiddle/index.vue b/src/views/pageOperation/rightMiddle/index.vue
index 8f9d3af..819e575 100644
--- a/src/views/pageOperation/rightMiddle/index.vue
+++ b/src/views/pageOperation/rightMiddle/index.vue
@@ -15,31 +15,196 @@ export default {
       config: {
         header: ['手术间', '手术名称', '申请类型', '入手术室时间', '麻醉开始时间', '手术开始时间', '是否准点'],
         data: [
-          ['WK01', '阑尾切除术', '紧急', '2023-09-10 08:00', '2023-09-10 08:30', '2023-09-10 09:15', '准点'],
-          ['WK02', '膝关节置换术', '择期', '2023-09-11 09:30', '2023-09-11 10:00', '2023-09-11 10:45', '不准点'],
-          ['WK03', '白内障手术', '择期', '2023-09-12 14:45', '2023-09-12 15:15', '2023-09-12 15:45', '准点'],
-          ['WK04', '胆囊切除术', '紧急', '2023-09-13 08:30', '2023-09-13 09:00', '2023-09-13 09:45', '准点'],
-          ['WK05', '阑尾切除术', '紧急', '2023-09-14 07:45', '2023-09-14 08:15', '2023-09-14 08:45', '不准点'],
-          ['WK06', '膝关节置换术', '择期', '2023-09-15 10:00', '2023-09-15 10:30', '2023-09-15 11:15', '准点'],
-          ['WK07', '阑尾切除术', '紧急', '2023-09-16 08:15', '2023-09-16 08:45', '2023-09-16 09:30', '不准点'],
-          ['WK08', '白内障手术', '择期', '2023-09-17 14:30', '2023-09-17 15:00', '2023-09-17 15:45', '准点'],
-          ['WK09', '胆囊切除术', '紧急', '2023-09-18 08:45', '2023-09-18 09:15', '2023-09-18 10:00', '不准点'],
-          ['WK10', '膝关节置换术', '择期', '2023-09-19 10:15', '2023-09-19 10:45', '2023-09-19 11:30', '准点'],
-          ['WK11', '阑尾切除术', '紧急', '2023-09-20 08:30', '2023-09-20 09:00', '2023-09-20 09:45', '准点'],
-          ['WK12', '白内障手术', '择期', '2023-09-21 14:15', '2023-09-21 14:45', '2023-09-21 15:30', '不准点'],
-          ['WK13', '胆囊切除术', '紧急', '2023-09-22 08:00', '2023-09-22 08:30', '2023-09-22 09:15', '不准点'],
-          ['WK14', '阑尾切除术', '紧急', '2023-09-23 07:30', '2023-09-23 08:00', '2023-09-23 08:45', '不准点'],
-          ['WK15', '膝关节置换术', '择期', '2023-09-24 10:30', '2023-09-24 11:00', '2023-09-24 11:45', '准点'],
-          ['WK16', '白内障手术', '择期', '2023-09-25 14:00', '2023-09-25 14:30', '2023-09-25 15:15', '不准点'],
-          ['WK17', '胆囊切除术', '紧急', '2023-09-26 08:15', '2023-09-26 08:45', '2023-09-26 09:30', '不准点'],
-          ['WK18', '阑尾切除术', '紧急', '2023-09-27 07:45', '2023-09-27 08:15', '2023-09-27 09:00', '不准点'],
-          ['WK19', '膝关节置换术', '择期', '2023-09-28 10:45', '2023-09-28 11:15', '2023-09-28 12:00', '准点'],
-          ['WK20', '白内障手术', '择期', '2023-09-29 13:45', '2023-09-29 14:15', '2023-09-29 14:45', '不准点'],
+          [
+            'WK01',
+            '阑尾切除术',
+            '<span class="emergent">紧急</span>',
+            '2023-09-10 08:00',
+            '2023-09-10 08:30',
+            '2023-09-10 09:15',
+            '<span class="colorBlue">准点</span>',
+          ],
+          [
+            'WK02',
+            '膝关节置换术',
+            '<span class="otherDay">择期</span>',
+            '2023-09-11 09:30',
+            '2023-09-11 10:00',
+            '2023-09-11 10:45',
+            '<span class="colorpurple">不准点</span>',
+          ],
+          [
+            'WK03',
+            '白内障手术',
+            '<span class="otherDay">择期</span>',
+            '2023-09-12 14:45',
+            '2023-09-12 15:15',
+            '2023-09-12 15:45',
+            '<span class="colorBlue">准点</span>',
+          ],
+          [
+            'WK04',
+            '胆囊切除术',
+            '<span class="emergent">紧急</span>',
+            '2023-09-13 08:30',
+            '2023-09-13 09:00',
+            '2023-09-13 09:45',
+            '<span class="colorBlue">准点</span>',
+          ],
+          [
+            'WK05',
+            '阑尾切除术',
+            '<span class="emergent">紧急</span>',
+            '2023-09-14 07:45',
+            '2023-09-14 08:15',
+            '2023-09-14 08:45',
+            '<span class="colorpurple">不准点</span>',
+          ],
+          [
+            'WK06',
+            '膝关节置换术',
+            '<span class="otherDay">择期</span>',
+            '2023-09-15 10:00',
+            '2023-09-15 10:30',
+            '2023-09-15 11:15',
+            '<span class="colorBlue">准点</span>',
+          ],
+          [
+            'WK07',
+            '阑尾切除术',
+            '<span class="emergent">紧急</span>',
+            '2023-09-16 08:15',
+            '2023-09-16 08:45',
+            '2023-09-16 09:30',
+            '<span class="colorpurple">不准点</span>',
+          ],
+          [
+            'WK08',
+            '白内障手术',
+            '<span class="otherDay">择期</span>',
+            '2023-09-17 14:30',
+            '2023-09-17 15:00',
+            '2023-09-17 15:45',
+            '<span class="colorBlue">准点</span>',
+          ],
+          [
+            'WK09',
+            '胆囊切除术',
+            '<span class="emergent">紧急</span>',
+            '2023-09-18 08:45',
+            '2023-09-18 09:15',
+            '2023-09-18 10:00',
+            '<span class="colorpurple">不准点</span>',
+          ],
+          [
+            'WK10',
+            '膝关节置换术',
+            '<span class="otherDay">择期</span>',
+            '2023-09-19 10:15',
+            '2023-09-19 10:45',
+            '2023-09-19 11:30',
+            '<span class="colorBlue">准点</span>',
+          ],
+          [
+            'WK11',
+            '阑尾切除术',
+            '<span class="emergent">紧急</span>',
+            '2023-09-20 08:30',
+            '2023-09-20 09:00',
+            '2023-09-20 09:45',
+            '<span class="colorBlue">准点</span>',
+          ],
+          [
+            'WK12',
+            '白内障手术',
+            '<span class="otherDay">择期</span>',
+            '2023-09-21 14:15',
+            '2023-09-21 14:45',
+            '2023-09-21 15:30',
+            '<span class="colorpurple">不准点</span>',
+          ],
+          [
+            'WK13',
+            '胆囊切除术',
+            '<span class="emergent">紧急</span>',
+            '2023-09-22 08:00',
+            '2023-09-22 08:30',
+            '2023-09-22 09:15',
+            '<span class="colorpurple">不准点</span>',
+          ],
+          [
+            'WK14',
+            '阑尾切除术',
+            '<span class="emergent">紧急</span>',
+            '2023-09-23 07:30',
+            '2023-09-23 08:00',
+            '2023-09-23 08:45',
+            '<span class="colorpurple">不准点</span>',
+          ],
+          [
+            'WK15',
+            '膝关节置换术',
+            '<span class="otherDay">择期</span>',
+            '2023-09-24 10:30',
+            '2023-09-24 11:00',
+            '2023-09-24 11:45',
+            '<span class="colorBlue">准点</span>',
+          ],
+          [
+            'WK16',
+            '白内障手术',
+            '<span class="otherDay">择期</span>',
+            '2023-09-25 14:00',
+            '2023-09-25 14:30',
+            '2023-09-25 15:15',
+            '<span class="colorpurple">不准点</span>',
+          ],
+          [
+            'WK17',
+            '胆囊切除术',
+            '<span class="emergent">紧急</span>',
+            '2023-09-26 08:15',
+            '2023-09-26 08:45',
+            '2023-09-26 09:30',
+            '<span class="colorpurple">不准点</span>',
+          ],
+          [
+            'WK18',
+            '阑尾切除术',
+            '<span class="emergent">紧急</span>',
+            '2023-09-27 07:45',
+            '2023-09-27 08:15',
+            '2023-09-27 09:00',
+            '<span class="colorpurple">不准点</span>',
+          ],
+          [
+            'WK19',
+            '膝关节置换术',
+            '<span class="otherDay">择期</span>',
+            '2023-09-28 10:45',
+            '2023-09-28 11:15',
+            '2023-09-28 12:00',
+            '<span class="colorBlue">准点</span>',
+          ],
+          [
+            'WK20',
+            '白内障手术',
+            '<span class="otherDay">择期</span>',
+            '2023-09-29 13:45',
+            '2023-09-29 14:15',
+            '2023-09-29 14:45',
+            '<span class="colorpurple">不准点</span>',
+          ],
         ],
         rowNum: 12,
-        waitTime: 10000,
+        waitTime: 100000,
         carousel: 'page',
-        headerBGC:"#033860",
+        headerBGC: 'rgba(74, 78, 103, 0.4)',
+        oddRowBGC: 'rgba(74, 78, 103, 0.15)',
+        evenRowBGC: 'rgba(74, 78, 103, 0.15)',
+        headerHeight: '48',
+        align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'],
+        columnWidth: [95, 220, 90],
       },
     };
   },
@@ -47,23 +212,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/scss/pxtovw.scss';
 .rightMiddle {
   height: 100%;
+  background: #011343;
   :deep(.dv-border-box-13) {
     box-sizing: border-box;
-    padding: 2vh;
+    padding: vw(20);
     .dv-scroll-board {
       height: 100%;
       .header-item {
-        font-size: 2vh;
+        font-size: vw(16);
+        color: '#aaa';
       }
       .ceil {
-        font-size: 1.8vh;
+        font-size: vw(16);
         white-space: nowrap;
       }
       .row-item {
-        .ceil:last-child {
-          color: #87ceeb;
+        .colorBlue {
+          color: #349afc !important;
+        }
+        .colorpurple {
+          color: #a53faf !important;
+        }
+        .emergent {
+          padding: vw(5) vw(10);
+          color: #03f0b4;
+          border: 1px solid #03f0b4;
+          border-radius: 4px;
+        }
+        .otherDay {
+          padding: vw(5) vw(10);
+          color: #f08503;
+          border: 1px solid #f08503;
+          border-radius: 4px;
         }
       }
     }
diff --git a/src/views/pageRoom/rightMiddle/index.vue b/src/views/pageRoom/rightMiddle/index.vue
index ca05013..156e2a9 100644
--- a/src/views/pageRoom/rightMiddle/index.vue
+++ b/src/views/pageRoom/rightMiddle/index.vue
@@ -23,7 +23,7 @@ export default {
         },
         legend: {
           type: 'scroll',
-          data: ['手术准备', '手术中', '完成手术'],
+          // data: ['入手术室', '开始手术', '手术结束', '出手术室'],
           top: 10,
           right: 1,
           textStyle: {
@@ -59,7 +59,7 @@ export default {
           },
         },
         series: [],
-      },   
+      },
     };
   },
   methods: {
@@ -83,36 +83,50 @@ export default {
               startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
               endTime: `${currentDate} ${isUseArr[j]}:00:00`,
               yValue: index - 1,
-              color: '#87ceeb',
+              color: '#64cfb7',
               diff: dayjs(`${currentDate} ${isUseArr[j]}:00:00`).diff(
                 dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
                 'minute'
               ),
-              name: '完成手术',
+              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: '手术中',
-            });
+            if (Math.random() > 0.5) {
+              timeArr.push({
+                startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
+                endTime: `${currentDate} ${hours}:00:00`,
+                yValue: index - 1,
+                color: '#e889a8',
+                diff: dayjs(`${currentDate} ${hours}:00:00`).diff(
+                  dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
+                  'minute'
+                ),
+                name: '开始手术',
+              });
+            } else {
+              timeArr.push({
+                startTime: `${currentDate} ${isUseArr[j - 1]}:00:00`,
+                endTime: `${currentDate} ${hours}:00:00`,
+                yValue: index - 1,
+                color: '#efb763',
+                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',
+              color: '#fce94e',
               diff: dayjs(`${currentDate} ${hours}:05:00`).diff(
                 dayjs(`${currentDate} ${isUseArr[j - 1]}:00:00`),
                 'minute'
               ),
-              name: '手术准备',
+              name: '入手术室',
             });
           }
         }
@@ -121,7 +135,9 @@ export default {
       this.chartOptions.series = this.seriesData(timeArr);
     },
     seriesData(data) {
-      return data.map(function (item) {
+      // const obj = {};
+      const res = data.map(function (item) {
+        // obj[item.name] = item.color;
         return {
           type: 'custom',
           name: item.name,
@@ -151,7 +167,7 @@ export default {
                   position: [textX, textY],
                   style: {
                     text: `${item.diff} min`,
-                    fill: item.color,
+                    fill: '#fff',
                     textSize: '14px',
                     textAlign: 'center',
                   },
@@ -162,6 +178,9 @@ export default {
           data: [item],
         };
       });
+      // console.log(obj);
+      // console.log(JSON.stringify(res));
+      return res;
     },
     getUseTime() {
       // 随机生成当天手术室的使用时间
diff --git a/src/views/pageTest/index.vue b/src/views/pageTest/index.vue
new file mode 100644
index 0000000..c9f6355
--- /dev/null
+++ b/src/views/pageTest/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="rightMiddle">
+    <dv-border-box-13>
+      <dv-loading v-if="isLoding">Loading...</dv-loading>
+      <section v-else ref="echartsContainer"></section>
+    </dv-border-box-13>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  data() {
+    return {
+      isLoding: false,
+      chartOptions: {
+        legend: {},
+        tooltip: {},
+        dataset: {
+          source: [
+            ['product', '2012', '2013', '2014', '2015'],
+            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
+            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
+            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4],
+          ],
+        },
+        xAxis: { type: 'category' },
+        yAxis: {},
+        series: [
+          { type: 'bar', encode: { x: 'product', y: '2012' } },
+          { type: 'bar', encode: { x: 'product', y: '2013' } },
+          { type: 'bar', encode: { x: 'product', y: '2014' } },
+          { type: 'bar', encode: { x: 'product', y: '2015' } },
+        ],
+      },
+    };
+  },
+  mounted() {
+    const chartContainer = this.$refs.echartsContainer;
+    const chart = echarts.init(chartContainer);
+    chart.setOption(this.chartOptions);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.rightMiddle {
+  width: 100%;
+  height: 100%;
+  :deep(.dv-border-box-13) {
+    padding: 2vh;
+    box-sizing: border-box;
+    section {
+      height: 100%;
+    }
+  }
+}
+</style>