diff --git a/src/router/index.js b/src/router/index.js
index 300690e..6ce8294 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -38,6 +38,12 @@ const routes = [
         meta: { title: '手术间利用率' },
         component: () => import('@/views/pageRoom/index.vue'),
       },
+      {
+        path: '/pagecare',
+        name: 'pagecare',
+        meta: { title: '护理监控数据可视化' },
+        component: () => import('@/views/pageCare/index.vue'),
+      },
     ],
   },
   {
diff --git a/src/views/pageCare/bottomLeft/index.scss b/src/views/pageCare/bottomLeft/index.scss
new file mode 100644
index 0000000..30096bc
--- /dev/null
+++ b/src/views/pageCare/bottomLeft/index.scss
@@ -0,0 +1,92 @@
+.box {
+  width: vw(552);
+  height: vh(438);
+  box-sizing: border-box;
+  border: 2px solid #DFE0F3;
+  box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
+  background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
+  border-radius: vw(8);
+  padding: vh(16) vw(8);
+  position: relative;
+
+  header {
+    height: vh(48);
+    background-image: url("@/assets/img/pageMonitor/headerLine.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center bottom;
+
+    div {
+      width: vw(200);
+      height: vh(40);
+      background-image: url("@/assets/img/pageMonitor/headerBg.png");
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      margin-left: vw(12);
+      display: flex;
+      align-items: center;
+
+      p {
+        color: #444444;
+        font-size: vw(22);
+        padding-left: vw(32);
+      }
+    }
+  }
+
+  main {
+    height: vh(350);
+  }
+
+  .sidebar {
+    position: absolute;
+    right: -1px;
+    top: 16%;
+
+    >div {
+      width: vw(40);
+      height: vh(70);
+      background: #E9E4FF;
+      display: flex;
+      justify-content: center;
+      position: relative;
+      z-index: 10;
+
+      span {
+        color: rgba(90, 73, 173, 0.5);
+        font-size: vw(16);
+
+      }
+
+      &:first-of-type {
+        transform: skewY(-30deg);
+
+        span {
+          transform: skewY(30deg);
+          line-height: vh(60);
+        }
+      }
+
+      &:last-of-type {
+        margin-top: vw(-24);
+        transform: skewY(30deg);
+
+        span {
+          transform: skewY(-30deg);
+          line-height: vh(90);
+        }
+      }
+
+      &.active {
+        background: #5C4BAD;
+        z-index: 1;
+        height: vh(82);
+
+        span {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/pageCare/bottomLeft/index.vue b/src/views/pageCare/bottomLeft/index.vue
new file mode 100644
index 0000000..36c9da0
--- /dev/null
+++ b/src/views/pageCare/bottomLeft/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="box">
+    <header>
+      <div>
+        <p class="panmen">护理人员人力分布</p>
+      </div>
+    </header>
+    <main>
+      <div id="chartBottomLeft" class="h-full"></div>
+    </main>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { GetMonitorOperationNumber } from '@/api/monitor';
+import dayjs from 'dayjs';
+export default {
+  data() {
+    return {
+      active: 'week',
+      startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
+      endDate: dayjs().format('YYYY-MM-DD'),
+      renderTimer: null,
+      getDataList: [20, 38, 12],
+      myChart: null
+    };
+  },
+  methods: {
+    changeActive(newActive = '') {
+      if (!newActive) {
+        if (this.active == 'week') {
+          newActive = 'month'
+        } else {
+          newActive = 'week'
+        }
+      }
+      this.startDate = dayjs().subtract(newActive == 'week' ? 7 : 30, 'day').format('YYYY-MM-DD');
+      this.active = newActive;
+      this.onGetPageData();
+    },
+    onGetPageData() {
+      GetMonitorOperationNumber({
+        startDate: this.startDate,
+        endDate: this.endDate,
+      }).then(res => {
+        // this.getDataList = [res['data']['electiveCount'], res['data']['emergencyCount'], res['data']['daySurgeryCount'], res['data']['outSurgeryCount']]
+        this.updateChart();
+      });
+    },
+    updateChart() {
+      let categories = ['手术中', '在岗', '休息']
+      let maxVal = 10
+      if (Math.max(...this.getDataList) > 0) {
+        maxVal = Math.ceil(Math.max(...this.getDataList) / 10) * 10;
+      }
+      const option = {
+        grid: {
+          left: 80,
+          right: 50,
+          top: 20,
+          bottom: 20,
+        },
+        xAxis: {
+          max: maxVal,
+          axisLine: { show: true, lineStyle: { color: "rgba(0, 0, 0, 0.3)" } },
+          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,
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            data: this.getDataList,
+            barWidth: 24,
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { offset: 0, color: "#a066f8" },
+                { offset: 1, color: "#6173f7" },
+              ]),
+              borderRadius: 10,
+            },
+            z: 2,
+          },
+          {
+            type: "scatter",
+            data: this.getDataList,
+            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,
+              fontWeight: "bold",
+            },
+          },
+        ],
+      };
+
+      this.myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.myChart = echarts.init(document.getElementById("chartBottomLeft"));
+    this.onGetPageData();
+    window.addEventListener("resize", () => {
+      this.myChart.resize();
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss'
+</style>
diff --git a/src/views/pageCare/bottomRight/eMid.vue b/src/views/pageCare/bottomRight/eMid.vue
new file mode 100644
index 0000000..2440203
--- /dev/null
+++ b/src/views/pageCare/bottomRight/eMid.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="opstatisticBox box">
+    <header>
+      <div>
+        <p class="panmen">近七天平均接台时间趋势</p>
+      </div>
+    </header>
+    <main>
+      <div ref="chartBottomRight" class="h-full"></div>
+    </main>
+  </div>
+</template>
+
+
+<script>
+import * as echarts from 'echarts';
+import dayjs from 'dayjs';
+import { GetMonitorFirstOperationMonth } from '@/api/operation';
+let chart = null;
+export default {
+  data() {
+    return {
+      chartOptions: {
+        grid: {
+          top: '13%',
+          left: '13%',
+          right: '10%',
+          bottom: '13%',
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [],
+          axisLabel: {
+            fontSize: '16px',
+            color: '#5D49AF',
+            fontFamily: 'panmen',
+          },
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: '{value}分',
+            fontSize: '16px',
+            color: '#5D49AF',
+            fontFamily: 'panmen',
+            opacity: 0.6
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#624D96',
+              width: 0.1,
+            },
+          },
+        },
+        series: [
+          {
+            data: [],
+            type: 'line',
+            smooth: true,
+            itemStyle: {
+              color: '#7052E8',
+            },
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(156, 132, 255, 0.6)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(186, 169, 255, 0.15)',
+                  },
+                ],
+              },
+            },
+            "label": {
+              "show": true,
+              "position": "top",
+              "color": "#5D49AF",
+              "fontSize": 14,
+              "formatter": "{c}"
+            }
+          },
+        ],
+      },
+      isLoading: true,
+    };
+  },
+  methods: {
+    onGetPageData() {
+      GetMonitorFirstOperationMonth().then(res => {
+        this.chartOptions['xAxis']['data'] = Array.from({ length: 7 }, (_, i) =>
+          dayjs().subtract(i, 'day').format('YYYY-MM-DD')
+        ).reverse();
+        this.chartOptions['series'][0]['data'] = [48, 62, 56, 49, 47, 54, 58];
+        console.log(this.chartOptions);
+
+        chart.setOption(this.chartOptions);
+        this.isLoading = false;
+      });
+    },
+  },
+  mounted() {
+    chart = echarts.init(this.$refs.chartBottomRight);
+    this.onGetPageData();
+    setInterval(() => {
+      this.onGetPageData();
+    }, this.$store.getters.intervalTime);
+    window.addEventListener("resize", () => {
+      chart.resize();
+    });
+  },
+};
+</script>
diff --git a/src/views/pageCare/bottomRight/eRight.vue b/src/views/pageCare/bottomRight/eRight.vue
new file mode 100644
index 0000000..030cb96
--- /dev/null
+++ b/src/views/pageCare/bottomRight/eRight.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="opstatisticBox box">
+    <header>
+      <div>
+        <p class="panmen">今日质量指标</p>
+      </div>
+    </header>
+    <main>
+      <div class="bottom">
+        <div>
+          <img src="@/assets/img/pageMonitor/trianglePurple.png" />
+          <p class="secondRow">
+            安全核查完成率
+          </p>
+          <p class="thridRow">
+            <span class="panmen">100</span>%
+          </p>
+        </div>
+        <div>
+          <img src="@/assets/img/pageMonitor/trianglePurple.png" />
+          <p class="secondRow">
+            不良事件率
+          </p>
+          <p class="thridRow">
+            <span class="panmen">0</span>%
+          </p>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+
+<script>
+import dayjs from 'dayjs';
+export default {
+  data() {
+    return {
+      active: 'week',
+      startDate: dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
+      endDate: dayjs().format('YYYY-MM-DD'),
+      renderTimer: null,
+      pageList: [],
+      myChart: null
+    };
+  },
+  methods: {
+  },
+  mounted() {
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import './index.scss'
+</style>
diff --git a/src/views/pageCare/bottomRight/index.scss b/src/views/pageCare/bottomRight/index.scss
new file mode 100644
index 0000000..092e415
--- /dev/null
+++ b/src/views/pageCare/bottomRight/index.scss
@@ -0,0 +1,176 @@
+.boxWrap {
+  width: vw(1280);
+  height: vh(438);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .opGradeBox {}
+
+  .asaGradeBox {
+    width: vw(340);
+    height: 100%;
+
+    header {
+      height: vh(48);
+      background-image: url("@/assets/img/pageMonitor/headerLine.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center bottom;
+
+      div {
+        width: vw(200);
+        height: vh(40);
+        background-image: url("@/assets/img/pageMonitor/headerBg.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        margin-left: vw(12);
+        display: flex;
+        align-items: center;
+
+        p {
+          color: #444444;
+          font-size: vw(22);
+          padding-left: vw(32);
+        }
+      }
+    }
+  }
+
+  .opstatisticBox {
+    width: vw(624);
+    height: 100%;
+
+    header {
+      height: vh(48);
+      background-image: url("@/assets/img/pageMonitor/headerLine.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center bottom;
+
+      div {
+        width: vw(300);
+        height: vh(40);
+        background-image: url("@/assets/img/pageMonitor/headerBg.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        margin-left: vw(12);
+        display: flex;
+        align-items: center;
+
+        p {
+          color: #444444;
+          font-size: vw(22);
+          padding-left: vw(32);
+        }
+      }
+    }
+
+    .sidebar {
+      position: absolute;
+      right: -1px;
+      top: 16%;
+
+      >div {
+        width: vw(40);
+        height: vh(70);
+        background: #E9E4FF;
+        display: flex;
+        justify-content: center;
+        position: relative;
+        z-index: 10;
+
+        span {
+          color: rgba(90, 73, 173, 0.5);
+          font-size: vw(16);
+
+        }
+
+        &:first-of-type {
+          transform: skewY(-30deg);
+
+          span {
+            transform: skewY(30deg);
+            line-height: vh(60);
+          }
+        }
+
+        &:last-of-type {
+          margin-top: vw(-24);
+          transform: skewY(30deg);
+
+          span {
+            transform: skewY(-30deg);
+            line-height: vh(90);
+          }
+        }
+
+        &.active {
+          background: #5C4BAD;
+          z-index: 1;
+          height: vh(82);
+
+          span {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  .box {
+    box-sizing: border-box;
+    border: 2px solid #DFE0F3;
+    box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
+    background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
+    border-radius: vw(8);
+    padding: vh(16) vw(8);
+    position: relative;
+  }
+
+  main {
+    height: vh(350);
+  }
+}
+
+.opstatisticBox {
+  .bottom {
+    height: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    flex-direction: column;
+
+    div {
+      width: vw(560);
+      height: vh(150);
+      box-sizing: border-box;
+      padding: vh(24) vw(20);
+      background: linear-gradient(180deg, #F2F3FA 0%, #DEE6FF 100%);
+      border: 2px solid #EDE9F4;
+      border-radius: vw(4);
+
+      .secondRow {
+        margin-top: vh(12);
+        margin-bottom: vh(4);
+        font-size: vw(20);
+        color: #302D32;
+      }
+
+      .thridRow {
+        font-size: vw(28);
+        color: #605C68;
+
+        span {
+          font-size: vw(44);
+          color: #5D49AF;
+          margin-right: 2px;
+        }
+      }
+    }
+
+  }
+
+}
diff --git a/src/views/pageCare/bottomRight/index.vue b/src/views/pageCare/bottomRight/index.vue
new file mode 100644
index 0000000..d8b0c4f
--- /dev/null
+++ b/src/views/pageCare/bottomRight/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <section class="boxWrap">
+    <eMid />
+    <eRight />
+  </section>
+</template>
+
+<script>
+import eMid from './eMid.vue';
+import eRight from './eRight.vue';
+export default {
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+
+  },
+  mounted() {
+  },
+  components: { eMid, eRight }
+};
+</script>
+
+<style lang="scss">
+@import './index.scss'
+</style>
diff --git a/src/views/pageCare/index.vue b/src/views/pageCare/index.vue
new file mode 100644
index 0000000..915858a
--- /dev/null
+++ b/src/views/pageCare/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <section class="flex justify-evenly items-center flex-wrap">
+    <topLeft />
+    <topRight />
+    <bottomLeft />
+    <bottomRight />
+  </section>
+</template>
+
+<script>
+import topLeft from "./topLeft/index.vue";
+import topRight from "./topRight/index.vue";
+import bottomLeft from "./bottomLeft/index.vue";
+import bottomRight from './bottomRight/index.vue';
+
+export default {
+  data() {
+    return {
+    }
+  },
+  components: {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight,
+  },
+};
+</script>
+
+<style></style>
diff --git a/src/views/pageCare/topLeft/index.scss b/src/views/pageCare/topLeft/index.scss
new file mode 100644
index 0000000..025894e
--- /dev/null
+++ b/src/views/pageCare/topLeft/index.scss
@@ -0,0 +1,177 @@
+.box {
+  width: vw(552);
+  height: vh(444);
+  box-sizing: border-box;
+  margin-bottom: vh(24);
+  border: 2px solid #DFE0F3;
+  box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
+  background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
+  border-radius: vw(8);
+  padding: vh(8) vw(8);
+
+  header {
+    height: vh(48);
+    background-image: url("@/assets/img/pageMonitor/headerLine.png");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center bottom;
+
+    div {
+      width: vw(200);
+      height: vh(40);
+      background-image: url("@/assets/img/pageMonitor/headerBg.png");
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      margin-left: vw(12);
+      display: flex;
+      align-items: center;
+
+      p {
+        color: #444444;
+        font-size: vw(22);
+        padding-left: vw(32);
+      }
+    }
+  }
+
+  main {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: center;
+    height: vh(390);
+
+    .top {
+      width: vw(488);
+      height: vh(160);
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      background: linear-gradient(180deg, #F2F3FA 0%, #EAE9FE 100%);
+      border: 1px solid #EDE9F4;
+      box-sizing: border-box;
+      border-radius: vw(4);
+
+      .left {
+        div:first-of-type {
+          display: flex;
+          align-items: center;
+          margin-bottom: vh(12);
+          min-width: vw(120);
+
+          img {
+            margin-right: vw(8);
+          }
+
+          span {
+            font-size: vw(20);
+            color: #302D32;
+          }
+        }
+
+        div:last-of-type {
+          color: #876395;
+          font-size: vw(24);
+          line-height: vw(44);
+          letter-spacing: 2px;
+
+          span {
+            color: #924AAC;
+            font-size: vw(44);
+            vertical-align: bottom;
+          }
+        }
+      }
+
+      .right {
+        .numBox {
+          width: vw(276);
+          height: vh(50);
+          background: linear-gradient(272deg, rgba(255, 85, 238, 0.045) 2%, rgba(150, 35, 135, 0.066) 99%);
+          border: 2px solid;
+          border-image: linear-gradient(161deg, rgba(255, 169, 205, 0.4) -11%, rgba(255, 169, 202, 0) 42%) 1.5;
+          box-sizing: border-box;
+          padding: 0 vw(16);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .leftTextBox {
+            display: flex;
+            align-items: center;
+
+            .potionBox {
+              width: vw(4);
+              height: vw(4);
+              border-radius: 100%;
+              background: #D58DFF;
+              box-shadow: 0px 0px vw(4) vw(2) #D58DFF;
+              margin-right: vw(12);
+            }
+
+            span {
+              font-size: vw(16);
+              color: #571273;
+            }
+          }
+
+          .rightTextBox {
+            font-size: vw(14);
+            color: #571273;
+            line-height: vw(28);
+
+            span {
+              font-size: vw(28);
+              color: #924AAC;
+              vertical-align: bottom;
+              margin-right: vw(4);
+            }
+          }
+
+          &:first-of-type {
+            margin-bottom: vh(20);
+          }
+        }
+      }
+
+    }
+
+    .bottom {
+      width: vw(488);
+      height: vh(160);
+      display: flex;
+      justify-content: space-between;
+
+      div {
+        width: vw(146);
+        height: vh(160);
+        box-sizing: border-box;
+        padding: vh(24) vw(20);
+        background: linear-gradient(180deg, #F2F3FA 0%, #DEE6FF 100%);
+        border: 2px solid #EDE9F4;
+        border-radius: vw(4);
+
+        .secondRow {
+          margin-top: vh(12);
+          margin-bottom: vh(4);
+          font-size: vw(16);
+          color: #302D32;
+        }
+
+        .thridRow {
+          font-size: vw(28);
+          color: #605C68;
+
+          span {
+            font-size: vw(44);
+            color: #5D49AF;
+            margin-right: 2px;
+          }
+        }
+      }
+
+    }
+
+  }
+}
diff --git a/src/views/pageCare/topLeft/index.vue b/src/views/pageCare/topLeft/index.vue
new file mode 100644
index 0000000..b6821b3
--- /dev/null
+++ b/src/views/pageCare/topLeft/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="box">
+    <header>
+      <div>
+        <p class="panmen">手术室换台情况</p>
+      </div>
+    </header>
+    <main>
+      <div class="top">
+        <div class="left">
+          <div>
+            <img src="@/assets/img/pageMonitor/triangle.png">
+            <span>总人数</span>
+          </div>
+          <div>
+            <span class="panmen">{{ totalPopulation }}</span>人
+          </div>
+        </div>
+        <div class="right">
+          <template v-for="(item, index) in peopleData">
+            <div class="numBox" :key="index">
+              <div class="leftTextBox">
+                <div class="potionBox"></div>
+                <span>{{ item['itemName'] }}</span>
+              </div>
+              <div class="rightTextBox">
+                <span class="panmen">{{ item['itemVal'] }}</span>人
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <div class="bottom">
+        <template v-for="(item, index) in overviewData">
+          <div :key="index">
+            <img src="@/assets/img/pageMonitor/trianglePurple.png" />
+            <p class="secondRow">
+              {{ item['itemName'] }}
+            </p>
+            <p class="thridRow">
+              <span class="panmen">{{ item['itemVal'] }}</span>{{ item['itemUnit'] }}
+            </p>
+          </div>
+        </template>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+import { GetMonitorOperationCount } from '@/api/monitor';
+import dayjs from 'dayjs';
+export default {
+  data() {
+    return {
+      overviewData: [
+        {
+          itemName: '首台准点率',
+          itemVal: '0',
+          itemUnit: '%',
+        },
+        {
+          itemName: '手术间利用率',
+          itemVal: '0',
+          itemUnit: '%',
+        },
+        {
+          itemName: '急诊患者',
+          itemVal: '0',
+          itemUnit: '个',
+        },
+      ],
+      peopleData: [
+        {
+          itemName: '进行中',
+          itemVal: '50',
+        },
+        {
+          itemName: '待进行',
+          itemVal: '300',
+        },
+      ],
+      totalPopulation: 0,
+      isLoading: true,
+    };
+  },
+  methods: {
+    onGetPageData() {
+      this.isLoading = true;
+      let nowDay = dayjs().format('YYYY-MM-DD');
+      if (this.$store.getters.isMock) {
+        nowDay = '2024-06-06';
+      }
+      GetMonitorOperationCount(nowDay).then(res => {
+        if (!res.data) {
+          return;
+        }
+        let fisrtRate = res['data']['firstPunctualityRate'];
+        if (fisrtRate.includes('%')) {
+          this.overviewData[0]['itemVal'] = fisrtRate.slice(0, -1);
+        } else {
+          this.overviewData[0]['itemVal'] = Number(fisrtRate);
+        }
+        let roomUserRate = res['data']['roomUserRate'];
+        if (roomUserRate.includes('%')) {
+          this.overviewData[1]['itemVal'] = roomUserRate.slice(0, -1);
+        } else {
+          this.overviewData[1]['itemVal'] = Number(roomUserRate);
+        }
+        this.overviewData[2]['itemVal'] = res['data']['patEmergencyCount'];
+        this.totalPopulation = res['data']['patCount'];
+        this.peopleData[0]['itemVal'] = res['data']['patOperationing'];
+        this.peopleData[1]['itemVal'] = res['data']['patWating'];
+        this.isLoading = false;
+      });
+    },
+  },
+  mounted() {
+    this.onGetPageData();
+    setInterval(() => {
+      this.onGetPageData();
+    }, this.$store.getters.intervalTime);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss'
+</style>
diff --git a/src/views/pageCare/topRight/index.scss b/src/views/pageCare/topRight/index.scss
new file mode 100644
index 0000000..d797114
--- /dev/null
+++ b/src/views/pageCare/topRight/index.scss
@@ -0,0 +1,145 @@
+.box {
+  width: vw(1280);
+  height: vh(444);
+  box-sizing: border-box;
+  margin-bottom: vh(24);
+  box-sizing: border-box;
+  border: 2px solid #DFE0F3;
+  box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2);
+  background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%);
+  border-radius: vw(8);
+  padding: vh(24);
+  position: relative;
+}
+
+:deep(.el-carousel) {
+  height: 100%;
+
+  .el-carousel__container {
+    height: 100%;
+
+    .el-carousel__item {
+      section {
+        height: 100%;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, vw(186));
+        justify-content: space-between;
+        align-content: space-between;
+
+        >div {
+          height: vh(112);
+          box-sizing: border-box;
+          background: linear-gradient(180deg, rgba(232, 238, 255, 0.4) 0%, #E8EEFF 100%);
+          border: 2px solid #E3E5FD;
+          border-radius: vw(8);
+
+          p {
+            font-size: vw(22);
+            color: #000;
+            text-align: center;
+            letter-spacing: 2px;
+            line-height: vh(54);
+          }
+
+          .line {
+            height: 1px;
+            background: linear-gradient(90deg, rgba(0, 109, 171, 0) -1%, #A7DFFF 50%, rgba(0, 109, 171, 0) 98%);
+          }
+
+          div:last-of-type {
+            box-sizing: border-box;
+            height: vh(54);
+            padding: 0 vw(20);
+            display: flex;
+            align-items: center;
+            justify-content: space-evenly;
+
+            span {
+              color: #000;
+              font-size: vw(20);
+              letter-spacing: 1px;
+            }
+          }
+
+          &.opEnter {
+            p {
+              color: #0F69D6;
+            }
+
+            div:last-of-type {
+              span {
+                color: #0F69D6;
+              }
+            }
+
+          }
+
+          &.anesStart {
+            p {
+              color: #424CFE;
+            }
+
+            div:last-of-type {
+              span {
+                color: #424CFE;
+              }
+            }
+
+          }
+
+          &.opStart {
+            p {
+              color: #8B2CAD;
+            }
+
+            div:last-of-type {
+              span {
+                color: #8B2CAD;
+              }
+            }
+
+          }
+
+          &.opEnd {
+            p {
+              color: #37900B;
+            }
+
+            div:last-of-type {
+              span {
+                color: #37900B;
+              }
+            }
+
+          }
+
+          &.anesEnd {
+            p {
+              color: #5B4CAF;
+            }
+
+            div:last-of-type {
+              span {
+                color: #5B4CAF;
+              }
+            }
+
+          }
+
+          &.empty {
+            p {
+              color: #037E7E;
+            }
+
+            div:last-of-type {
+              span {
+                color: #037E7E;
+              }
+            }
+
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/pageCare/topRight/index.vue b/src/views/pageCare/topRight/index.vue
new file mode 100644
index 0000000..fa1f169
--- /dev/null
+++ b/src/views/pageCare/topRight/index.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="box">
+    <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">
+            <div :class="subItem['className']" :key="index">
+              <p class="panmen">
+                {{ subItem['roomName'] }}
+              </p>
+              <div class="line"></div>
+              <div>
+                <img :src="subItem['iconUrl']" />
+                <span>{{ subItem['operStatusName'] }}</span>
+              </div>
+            </div>
+          </template>
+        </section>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+
+<script>
+import { Carousel, CarouselItem } from 'element-ui';
+import { GetMonitorOperationRoomStatus } from '@/api/monitor';
+import dayjs from 'dayjs';
+export default {
+  data() {
+    return {
+      opList: [],
+    };
+  },
+  methods: {
+    onGetPageData() {
+      let nowDay = dayjs().format('YYYY-MM-DD');
+      if (this.$store.getters.isMock) {
+        nowDay = '2025-08-11';
+      }
+
+      GetMonitorOperationRoomStatus(nowDay).then(res => {
+        this.formatData(res['data']);
+      });
+    },
+    formatData(pageData) {
+      this.opList = [];
+      let group = 0;
+      for (let i = 0; i < pageData['length']; i++) {
+        if (i % 6 == 0) {
+          pageData[i]['procStatus'] = 10;
+          pageData[i]['operStatusName'] = `入手术间`;
+        }
+        if (i % 6 == 1) {
+          pageData[i]['procStatus'] = 15;
+          pageData[i]['operStatusName'] = `麻醉开始`;
+        }
+        if (i % 6 == 2) {
+          pageData[i]['procStatus'] = 20;
+          pageData[i]['operStatusName'] = `手术开始`;
+        }
+        if (i % 6 == 3) {
+          pageData[i]['procStatus'] = 25;
+          pageData[i]['operStatusName'] = `手术结束`;
+        }
+        if (i % 6 == 4) {
+          pageData[i]['procStatus'] = 30;
+          pageData[i]['operStatusName'] = `麻醉结束`;
+        }
+        if (i % 6 == 5) {
+          pageData[i]['procStatus'] = 35;
+          pageData[i]['operStatusName'] = `空置中`;
+        }
+        if (pageData[i]['procStatus'] == 10) {
+          pageData[i]['className'] = `opEnter`
+          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpRooms.svg`)
+        } else if (pageData[i]['procStatus'] == 15) {
+          pageData[i]['className'] = `anesStart`
+          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/AnesStarts.svg`)
+        } else if (pageData[i]['procStatus'] == 20) {
+          pageData[i]['className'] = `opStart`
+          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpingIcons.svg`)
+        } else if (pageData[i]['procStatus'] == 25) {
+          pageData[i]['className'] = `opEnd`
+          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpEnds.svg`)
+        } else if (pageData[i]['procStatus'] == 30) {
+          pageData[i]['className'] = `anesEnd`
+          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpendIcons.svg`)
+        } else {
+          pageData[i]['className'] = `empty`
+          pageData[i]['iconUrl'] = require(`@/assets/svg/Monitor/TopRight/OpWaitIcons.svg`)
+        }
+        group = parseInt(i / 18);
+        if (this.opList[group]) {
+          this.opList[group].push(pageData[i]);
+        } else {
+          this.opList[group] = [pageData[i]];
+        }
+      }
+    },
+  },
+  mounted() {
+    this.onGetPageData();
+    // setInterval(() => {
+    //   this.onGetPageData();
+    // }, this.$store.getters.intervalTime);
+  },
+  components: {
+    'el-carousel': Carousel,
+    'el-carousel-item': CarouselItem,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss'
+</style>
diff --git a/src/views/waitList/index.vue b/src/views/waitList/index.vue
index 51c1ae3..6167acf 100644
--- a/src/views/waitList/index.vue
+++ b/src/views/waitList/index.vue
@@ -144,8 +144,8 @@ export default {
     statusToTxt,
     textWaitToColor,
     onGetPageData() {
-      // let today = dayjs().format('YYYY-MM-DD');
-      let today = '2024-06-06';
+      let today = dayjs().format('YYYY-MM-DD');
+      // let today = '2024-06-06';
       // let today = '2025-02-26';
       const QueryFiledDic = {};
       this.queryCondition.forEach(queryItem => {