feat: 完成监控页面改版

.eslintrc.js

@@ -11,5 +11,6 @@ module.exports = {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'vue/multi-word-component-names': 'off',
+    "no-unused-vars": "warn"
   },
 };

src/assets/svg/Monitor/TopRight/opRoom.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg0_674_17513"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#008BB6" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#44D3FF" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg1_674_17853"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="54.6875%" stop-color="#7BE0FF" stop-opacity="0"/><stop offset="100%" stop-color="#0AC5FF" stop-opacity="0.5"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg2_674_16437"><stop offset="0%" stop-color="#08C5FF" stop-opacity="0.699999988079071"/><stop offset="100%" stop-color="#0083AC" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg3_674_16863"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#13C8FF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="-3.0616171314629196e-17" x2="0.5" y2="1" id="master_svg4_674_17869"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#35CEFD" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13,0C13,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13,30,13,30C13,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13,0,13,0C13,0,13,0,13,0Z" fill="url(#master_svg0_674_17513)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13,0L0,7.5L0,22.5L13,30L26,22.5ZM1,8.07756L13,1.15449L25,8.07756L25,21.9224L13,28.8455L1,21.9224L1,8.07756Z" fill-rule="evenodd" fill="url(#master_svg1_674_17853)" fill-opacity="1"/></g><g><path d="M13.000024945144654,3.888885736465454C13.000024945144654,3.888885736465454,22.629694945144653,9.444465736465453,22.629694945144653,9.444465736465453C22.629694945144653,9.444465736465453,22.629694945144653,20.555585736465453,22.629694945144653,20.555585736465453C22.629694945144653,20.555585736465453,13.000024945144654,26.111085736465455,13.000024945144654,26.111085736465455C13.000024945144654,26.111085736465455,3.3703949451446533,20.555585736465453,3.3703949451446533,20.555585736465453C3.3703949451446533,20.555585736465453,3.3703949451446533,9.444465736465453,3.3703949451446533,9.444465736465453C3.3703949451446533,9.444465736465453,13.000024945144654,3.888885736465454,13.000024945144654,3.888885736465454Z" fill="url(#master_svg2_674_16437)" fill-opacity="1"/><path d="M22.629694945144653,20.555585736465453L22.629694945144653,9.444465736465453L13.000024945144654,3.888885736465454L3.3703949451446533,9.444465736465453L3.3703949451446533,20.555585736465453L13.000024945144654,26.111085736465455L22.629694945144653,20.555585736465453ZM4.370394945144653,10.022025736465455L13.000024945144654,5.043375736465454L21.629694945144653,10.022025736465455L21.629694945144653,19.977985736465453L13.000024945144654,24.956585736465453L4.370394945144653,19.977985736465453L4.370394945144653,10.022025736465455Z" fill-rule="evenodd" fill="url(#master_svg3_674_16863)" fill-opacity="1"/></g></g><g><path d="M9.5,10L8,10L8,19L9.5,19L9.5,10ZM10,10L17,10C17.55228,10,18,10.447715,18,11L18,18C18,18.55229,17.55228,19,17,19L10,19L10,10ZM15,12.11768L13.5,12.11768L13.5,13.70595L12,13.70595L12,15.29419L13.5,15.29419L13.5,16.88238L15,16.88238L15,15.29419L16.5,15.29419L16.5,13.70595L15,13.70595L15,12.11768Z" fill-rule="evenodd" fill="url(#master_svg4_674_17869)" fill-opacity="1"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="26" height="30" viewBox="0 0 26 30"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_6964_171200"><stop offset="0%" stop-color="#C2E8FF" stop-opacity="0"/><stop offset="79.16666865348816%" stop-color="#005AC8" stop-opacity="0.30000001192092896"/><stop offset="100%" stop-color="#2C8BFF" stop-opacity="0.699999988079071"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg1_6964_171202"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="55.714285373687744%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#0A79FF" stop-opacity="0.5"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg2_6964_171195"><stop offset="0%" stop-color="#2B8BFF" stop-opacity="0.699999988079071"/><stop offset="100%" stop-color="#006EB3" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg3_6964_171197"><stop offset="0%" stop-color="#97D7FF" stop-opacity="0"/><stop offset="100%" stop-color="#C0DCFF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg4_6964_171206"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#117CFF" stop-opacity="1"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg5_6964_171206"><stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/><stop offset="46.33803069591522%" stop-color="#CDE9FF" stop-opacity="1"/><stop offset="100%" stop-color="#117CFF" stop-opacity="1"/></linearGradient></defs><g><g><g><path d="M13.000002,0C13.000002,0,26,7.5,26,7.5C26,7.5,26,22.5,26,22.5C26,22.5,13.000002,30,13.000002,30C13.000002,30,0,22.5,0,22.5C0,22.5,0,7.5,0,7.5C0,7.5,13.000002,0,13.000002,0C13.000002,0,13.000002,0,13.000002,0Z" fill="url(#master_svg0_6964_171200)" fill-opacity="1"/><path d="M26,22.5L26,7.5L13.000002,0L0,7.5L0,22.5L13.000002,30L26,22.5ZM1,8.0775642L13.000003,1.154487L25,8.0775642L25,21.922438L13.000003,28.845514L1,21.922438L1,8.0775642Z" fill-rule="evenodd" fill="url(#master_svg1_6964_171202)" fill-opacity="1"/></g><g><path d="M13.000026945144654,3.888885736465454C13.000026945144654,3.888885736465454,22.629652945144652,9.444464436465454,22.629652945144652,9.444464436465454C22.629652945144652,9.444464436465454,22.629652945144652,20.555572736465454,22.629652945144652,20.555572736465454C22.629652945144652,20.555572736465454,13.000026945144654,26.111103736465456,13.000026945144654,26.111103736465456C13.000026945144654,26.111103736465456,3.3703949451446533,20.555572736465454,3.3703949451446533,20.555572736465454C3.3703949451446533,20.555572736465454,3.3703949451446533,9.444464436465454,3.3703949451446533,9.444464436465454C3.3703949451446533,9.444464436465454,13.000026945144654,3.888885736465454,13.000026945144654,3.888885736465454Z" fill="url(#master_svg2_6964_171195)" fill-opacity="1"/><path d="M22.629652945144652,20.555572736465454L22.629652945144652,9.444464436465454L13.000026945144654,3.888885736465454L3.3703949451446533,9.444464436465454L3.3703949451446533,20.555572736465454L13.000026945144654,26.111103736465456L22.629652945144652,20.555572736465454ZM4.370394945144653,10.022027736465454L13.000026945144654,5.043373836465454L21.629652945144652,10.022026736465454L21.629652945144652,19.978008736465455L13.000026945144654,24.956619736465456L4.370394945144653,19.978008736465455L4.370394945144653,10.022027736465454Z" fill-rule="evenodd" fill="url(#master_svg3_6964_171197)" fill-opacity="1"/></g></g><g><g><path d="M11.3333077,15.49914859814148L8,15.49914859814148L8,14.12413119814148L11.3332965,14.12413119814148L11.3332965,12.74911379814148L13.333281,14.811628298141478L11.3332965,16.874131898141478L11.3333077,15.49914859814148Z" fill="url(#master_svg4_6964_171206)" fill-opacity="1"/></g><g><path d="M18.00000047701416,10L18.00000047701416,18.9374971L14.00005367701416,21L14.00005367701416,18.9374971L10.00008487701416,18.9374971L10.00008487701416,16.1875086L10.66674661701416,16.1875086L10.66674661701416,18.25L14.00003167701416,18.25L14.00003167701416,12.0624793L16.66668887701416,10.6874972L10.66676872701416,10.6874972L10.66676872701416,13.4375091L10.00010732392316,13.4375091L10.00010732392316,10L18.00000047701416,10Z" fill="url(#master_svg5_6964_171206)" fill-opacity="1"/></g></g></g></svg>

src/views/pageMonitor/bottomLeft/index.vue

@@ -6,7 +6,7 @@
       </div>
     </header>
     <main>
-      <div id="chart" class="h-full"></div>
+      <div id="chartBottomLeft" class="h-full"></div>
     </main>
     <section class="sidebar ">
       <div class="top" :class="{ 'active': active == 'week' }" @click="changeActive('week')">
@@ -21,7 +21,7 @@
 
 <script>
 import * as echarts from "echarts";
-import { GetMonitorOperationDept } from '@/api/monitor';
+import { GetMonitorOperationNumber } from '@/api/monitor';
 import dayjs from 'dayjs';
 export default {
   data() {
@@ -30,7 +30,8 @@ export default {
       startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
       endDate: dayjs().format('YYYY-MM-DD'),
       renderTimer: null,
-      getDataList: [],
+      getDataList: [0, 0, 0, 0],
+      myChart: null
     };
   },
   methods: {
@@ -47,27 +48,22 @@ export default {
       this.onGetPageData();
     },
     onGetPageData() {
-      GetMonitorOperationDept({
+      GetMonitorOperationNumber({
         startDate: this.startDate,
         endDate: this.endDate,
       }).then(res => {
-        this.getDataList = res['data']
+        this.getDataList = [res['data']['electiveCount'], res['data']['emergencyCount'], res['data']['daySurgeryCount'], res['data']['outSurgeryCount']]
         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;
+      if (!this.myChart) {
+        this.myChart = echarts.init(document.getElementById("chartBottomLeft"));
+      }
+      let categories = ['择期手术', '急诊手术', '日间手术', '门诊手术']
+      let maxVal = 10
+      if (Math.max(...this.getDataList) > 0) {
+        maxVal = Math.ceil(Math.max(...this.getDataList) / 10) * 10;
       }
       const option = {
         grid: {
@@ -78,6 +74,7 @@ export default {
         },
         xAxis: {
           max: maxVal,
+          axisLine: { show: true, lineStyle: { color: "rgba(0, 0, 0, 0.3)" } },
           axisLabel: {
             color: `rgba(0, 0, 0, 0.3)`,
             fontSize: 12,
@@ -96,8 +93,8 @@ export default {
         series: [
           {
             type: "bar",
-            data: values,
-            barWidth: 20,
+            data: this.getDataList,
+            barWidth: 24,
             itemStyle: {
               color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                 { offset: 0, color: "#a066f8" },
@@ -109,7 +106,7 @@ export default {
           },
           {
             type: "scatter",
-            data: values,
+            data: this.getDataList,
             symbolSize: 24,
             itemStyle: {
               color: "#fff",
@@ -131,7 +128,7 @@ export default {
         ],
       };
 
-      myChart.setOption(option);
+      this.myChart.setOption(option);
     },
   },
   mounted() {

src/views/pageMonitor/bottomRight/eLeft.vue

@@ -6,19 +6,112 @@
       </div>
     </header>
     <main>
+      <div id="chartBottomMidLeft" class="h-full"></div>
     </main>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
+import { GetMonitorOperationLevel } from '@/api/monitor';
+import dayjs from 'dayjs';
 export default {
   data() {
     return {
+      pageList: [
+        { name: "I 级", value: 0, color: "#23C2DB" },
+        { name: "II 级", value: 0, color: "#5B98E3" },
+        { name: "III 级", value: 0, color: "#946FEC" },
+        { name: "IV 级", value: 0, color: "#B53FDF" }
+      ],
+      myChart: null
     };
   },
   methods: {
+    onGetPageData() {
+      GetMonitorOperationLevel(dayjs().format('YYYY-MM-DD')).then(res => {
+        this.pageList[0].value = res.data['level1'];
+        this.pageList[0].name = `一级 ${res.data['level1'].toString().padStart(4, ' ')}`;
+        this.pageList[1].value = res.data['level2'];
+        this.pageList[1].name = `二级 ${res.data['level2'].toString().padStart(4, ' ')}`;
+        this.pageList[2].value = res.data['level3'];
+        this.pageList[2].name = `三级 ${res.data['level3'].toString().padStart(4, ' ')}`;
+        this.pageList[3].value = res.data['level4'];
+        this.pageList[3].name = `四级 ${res.data['level4'].toString().padStart(4, ' ')}`;
+        this.updateChart();
+      });
+    },
+    updateChart() {
+      if (!this.myChart) {
+        this.myChart = echarts.init(document.getElementById("chartBottomMidLeft"));
+      }
+
+      const total = this.pageList.reduce((sum, item) => sum + item.value, 0);
+
+      // 每个数据后面插入一个透明块，用来制造断开效果
+      const seriesData = [];
+      this.pageList.forEach(item => {
+        seriesData.push({
+          value: item.value,
+          name: item.name,
+          itemStyle: {
+            color: item.color,
+            borderRadius: 10
+          }
+        });
+        if (total > 0) {
+          seriesData.push({
+            value: total * 0.004,
+            itemStyle: { color: "transparent" },
+            tooltip: { show: false }
+          });
+        }
+
+      });
+
+      const option = {
+        legend: {
+          bottom: 0,
+          orient: "horizontal",
+          icon: "circle",
+          itemWidth: 12,
+          itemHeight: 12,
+          itemGap: 20,
+          width: 150,
+          textStyle: { color: "#666" },
+          data: this.pageList.map(d => d.name)
+        },
+        graphic: {
+          type: "text",
+          left: "center",
+          top: "41%",
+          style: {
+            text: "手术分级",
+            textAlign: "center",
+            fill: "#91909A",
+            fontSize: 28,
+            fontWeight: 500
+          }
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["64%", "76%"],
+            center: ["50%", "45%"],
+            avoidLabelOverlap: false,
+            label: { show: false },
+            labelLine: { show: false },
+            hoverAnimation: false,
+            data: seriesData
+          }
+        ]
+      };
+
+      this.myChart.setOption(option);
+    }
   },
   mounted() {
+    this.onGetPageData();
   },
 };
 </script>

src/views/pageMonitor/bottomRight/eMid.vue

@@ -1,24 +1,125 @@
 <template>
-  <div class="asaGradeBox box">
+  <div class="opGradeBox box">
     <header>
       <div>
-        <p class="panmen">ASA分级</p>
+        <p class="panmen">ASA等级</p>
       </div>
     </header>
     <main>
+      <div id="chartBottomMid" class="h-full"></div>
     </main>
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts';
+import { GetMonitorOperationASALevel } from '@/api/monitor';
+import dayjs from 'dayjs';
 export default {
   data() {
     return {
+      pageList: [
+        { name: "I 级", value: 0, color: "#23C2DB" },
+        { name: "II 级", value: 0, color: "#5B98E3" },
+        { name: "III 级", value: 0, color: "#946FEC" },
+        { name: "IV 级", value: 0, color: "#B53FDF" },
+        { name: "V 级", value: 0, color: "#fbc357" },
+        { name: "VI 级", value: 0, color: "#91c7ae" }
+      ],
+      myChart: null
     };
   },
   methods: {
+    onGetPageData() {
+      GetMonitorOperationASALevel(dayjs().format('YYYY-MM-DD')).then(res => {
+        console.log(res.data);
+
+        this.pageList[0].value = res.data['asaLevel1'];
+        this.pageList[0].name = `一级 ${res.data['asaLevel1'].toString().padStart(4, ' ')}`;
+        this.pageList[1].value = res.data['asaLevel2'];
+        this.pageList[1].name = `二级 ${res.data['asaLevel2'].toString().padStart(4, ' ')}`;
+        this.pageList[2].value = res.data['asaLevel3'];
+        this.pageList[2].name = `三级 ${res.data['asaLevel3'].toString().padStart(4, ' ')}`;
+        this.pageList[3].value = res.data['asaLevel4'];
+        this.pageList[3].name = `四级 ${res.data['asaLevel4'].toString().padStart(4, ' ')}`;
+        this.pageList[4].value = res.data['asaLevel5'];
+        this.pageList[4].name = `五级 ${res.data['asaLevel5'].toString().padStart(4, ' ')}`;
+        this.pageList[5].value = res.data['asaLevel6'];
+        this.pageList[5].name = `六级 ${res.data['asaLevel6'].toString().padStart(4, ' ')}`;
+        this.updateChart();
+      });
+    },
+    updateChart() {
+      if (!this.myChart) {
+        this.myChart = echarts.init(document.getElementById("chartBottomMid"));
+      }
+
+      const total = this.pageList.reduce((sum, item) => sum + item.value, 0);
+
+      // 每个数据后面插入一个透明块，用来制造断开效果
+      const seriesData = [];
+      this.pageList.forEach(item => {
+        seriesData.push({
+          value: item.value,
+          name: item.name,
+          itemStyle: {
+            color: item.color,
+            borderRadius: 10
+          }
+        });
+        if (total > 0) {
+          seriesData.push({
+            value: total * 0.004,
+            itemStyle: { color: "transparent" },
+            tooltip: { show: false }
+          });
+        }
+
+      });
+
+      const option = {
+        legend: {
+          bottom: 0,
+          orient: "horizontal",
+          icon: "circle",
+          itemWidth: 12,
+          itemHeight: 12,
+          itemGap: 20,
+          width: 280,
+          textStyle: { color: "#666" },
+          data: this.pageList.map(d => d.name)
+        },
+        graphic: {
+          type: "text",
+          left: "center",
+          top: "41%",
+          style: {
+            text: "ASA分级",
+            textAlign: "center",
+            fill: "#91909A",
+            fontSize: 28,
+            fontWeight: 500
+          }
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["64%", "76%"],
+            center: ["50%", "45%"],
+            avoidLabelOverlap: false,
+            label: { show: false },
+            labelLine: { show: false },
+            hoverAnimation: false,
+            data: seriesData
+          }
+        ]
+      };
+
+      this.myChart.setOption(option);
+    }
   },
   mounted() {
+    this.onGetPageData();
   },
 };
 </script>

src/views/pageMonitor/bottomRight/eRight.vue

@@ -31,7 +31,8 @@ export default {
       startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
       endDate: dayjs().format('YYYY-MM-DD'),
       renderTimer: null,
-      getDataList: [],
+      pageList: [],
+      myChart: null
     };
   },
   methods: {
@@ -52,87 +53,78 @@ export default {
         startDate: this.startDate,
         endDate: this.endDate,
       }).then(res => {
-        this.getDataList = res['data']
+        this.pageList = res['data']
         this.updateChart();
       });
     },
     updateChart() {
-      const myChart = echarts.init(document.getElementById("chartBottomRight"));
+      if (!this.myChart) {
+        this.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 => {
+      let maxVal = 20;
+      if (this.pageList.length) {
+        categories = this.pageList.map(item => {
           return item['deptName']
         })
-        values = this.getDataList.map(item => {
+        values = this.pageList.map(item => {
           return item['deptCount']
         })
         maxVal = Math.ceil(Math.max(...values) / 20) * 20;
       }
       const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: { type: "shadow" }
+        },
         grid: {
-          left: 80,
-          right: 50,
-          top: 20,
-          bottom: 20,
+          left: "5%",
+          right: "10%",
+          bottom: "5%",
+          top: "10%",
+          containLabel: true
         },
         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,
-          },
+          axisLine: { lineStyle: { color: "rgba(0, 0, 0, 0.3)" } },
+          axisLabel: { color: `rgba(0, 0, 0, 0.3)`, fontSize: 12, }
+        },
+        yAxis: {
+          type: "value",
+          axisLine: { show: true, lineStyle: { color: "rgba(0, 0, 0, 0.3)" } },
+          axisLabel: { color: `rgba(0, 0, 0, 0.3)`, fontSize: 12, },
+          max: maxVal
         },
         series: [
           {
             type: "bar",
             data: values,
-            barWidth: 20,
+            barWidth: 24,
             itemStyle: {
-              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                { offset: 0, color: "#a066f8" },
-                { offset: 1, color: "#6173f7" },
+              borderRadius: [8, 8, 0, 0],
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: "#8e5fff" },
+                { offset: 1, color: "#4a90e2" }
               ]),
-              borderRadius: 10,
+              shadowColor: "rgba(0,0,0,0.1)",
+              shadowBlur: 6,
+              shadowOffsetY: 3
             },
-            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,
+              position: "top",
+              color: "#a170ff",
               fontWeight: "bold",
-            },
-          },
-        ],
+              fontSize: 16,
+              formatter: "{c}"
+            }
+          }
+        ]
       };
 
-      myChart.setOption(option);
+      this.myChart.setOption(option);
     },
   },
   mounted() {

src/views/pageMonitor/topRight/index.scss

@@ -63,12 +63,12 @@
 
           &.opEnter {
             p {
-              color: #35CEFD;
+              color: #0F69D6;
             }
 
             div:last-of-type {
               span {
-                color: #35CEFD;
+                color: #0F69D6;
               }
             }
 
@@ -89,12 +89,12 @@
 
           &.opStart {
             p {
-              color: #B53FDF;
+              color: #8B2CAD;
             }
 
             div:last-of-type {
               span {
-                color: #B53FDF;
+                color: #8B2CAD;
               }
             }
 
@@ -102,12 +102,12 @@
 
           &.opEnd {
             p {
-              color: #BAE7A4;
+              color: #37900B;
             }
 
             div:last-of-type {
               span {
-                color: #BAE7A4;
+                color: #37900B;
               }
             }
 
@@ -115,12 +115,12 @@
 
           &.anesEnd {
             p {
-              color: #946FEC;
+              color: #5B4CAF;
             }
 
             div:last-of-type {
               span {
-                color: #946FEC;
+                color: #5B4CAF;
               }
             }
 

src/views/pageMonitor/topRight/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="box">
-    <el-carousel direction="vertical" :autoplay="false" :interval="5000" indicatorPosition="none">
+    <el-carousel direction="vertical" :autoplay="true" :interval="5000" indicatorPosition="none">
       <el-carousel-item v-for="item in opList" :key="item['roomCode']">
         <section>
           <template v-for="(subItem, index) in item">
@@ -73,16 +73,16 @@ export default {
         }
         if (pageData[i]['procStatus'] == 10) {
           pageData[i]['className'] = `opEnter`
-          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/opRoom.svg`)
+          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpRoom.svg`)
         } else if (pageData[i]['procStatus'] == 15) {
           pageData[i]['className'] = `anesStart`
-          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/anesStart.svg`)
+          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/AnesStart.svg`)
         } else if (pageData[i]['procStatus'] == 20) {
           pageData[i]['className'] = `opStart`
           pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpingIcon.svg`)
         } else if (pageData[i]['procStatus'] == 25) {
           pageData[i]['className'] = `opEnd`
-          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/opEnd.svg`)
+          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpEnd.svg`)
         } else if (pageData[i]['procStatus'] == 30) {
           pageData[i]['className'] = `anesEnd`
           pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpendIcon.svg`)