diff --git a/src/components/Histogram.vue b/src/components/Histogram.vue
index fbca642..2b7462f 100644
--- a/src/components/Histogram.vue
+++ b/src/components/Histogram.vue
@@ -89,27 +89,27 @@ export default {
         {
           label: "骨科",
           value: [32],
-          isHave:false
+          isHave: false,
         },
         {
           label: "心胸外科",
           value: [24],
-          isHave:false
+          isHave: false,
         },
         {
           label: "普通外科",
           value: [42],
-          isHave:false
+          isHave: false,
         },
         {
           label: "神经外科",
           value: [20],
-          isHave:false
+          isHave: false,
         },
         {
           label: "整形外科",
           value: [18],
-          isHave:false
+          isHave: false,
         },
       ],
       colors: [
@@ -135,61 +135,83 @@ export default {
         ],
       ],
       option: {},
+      myChart: null,
     };
   },
+  watch: {
+    getDataList(newVal) {
+      if (this.$store.getters.isMock) {
+        return;
+      }
+      if (newVal.length) {
+        this.wrapData(newVal);
+        this.initOption();
+        // 手动更新数据
+        this.option && this.myChart && this.myChart.setOption(this.option);
+      }
+    },
+  },
   created() {
-    // 包装接口数据
-    this.wrapData(this.getDataList);
-
-    this.option = {
-      grid: {
-        height: "80%",
-        top: "8%",
-        // bottom: "5%",
-      },
-      xAxis: {
-        axisTick: {
-          show: false,
-        },
-        nameTextStyle: {
-          color: "#fff",
+    // 包装接口数据--初始化调用
+    if (this.getDataList.length) {
+      if (this.$store.getters.isMock) {
+        console.log("sssxx");
+      } else {
+        this.wrapData(this.getDataList);
+      }
+    }
+    this.initOption();
+  },
+  methods: {
+    initOption() {
+      this.option = {
+        grid: {
+          height: "80%",
+          top: "8%",
+          // bottom: "5%",
         },
-        data: this.labels,
-        axisLabel: {
-          interval: 0,
-          rotate: -20, // 表示倾斜的角度
-          color: "#fff",
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          nameTextStyle: {
+            color: "#fff",
+          },
+          data: this.labels,
+          axisLabel: {
+            interval: 0,
+            rotate: -20, // 表示倾斜的角度
+            color: "#fff",
+          },
         },
-      },
-      legend: {
-        // data: this.getlegendData(),
-        // right: "25",
-        // top: "18",
-        // icon: "rect",
-        // itemHeight: 10,
-        // itemWidth: 10,
-        // textStyle: {
-        //   color: "red",
-        // },
-        show: false,
-      },
-      yAxis: {
-        type: "value",
-        axisLabel: {
-          color: "#fff",
+        legend: {
+          // data: this.getlegendData(),
+          // right: "25",
+          // top: "18",
+          // icon: "rect",
+          // itemHeight: 10,
+          // itemWidth: 10,
+          // textStyle: {
+          //   color: "red",
+          // },
+          show: false,
         },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type: "dashed",
-            color: ["#fff"],
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            color: "#fff",
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: ["#fff"],
+            },
           },
         },
-      },
-      series: this.getSeriesData(),
-    };
-  },
-  methods: {
+        series: this.getSeriesData(),
+      };
+    },
     getlegendData() {
       let that = this;
       const data = [];
@@ -227,13 +249,13 @@ export default {
               color: "#fff",
             },
             formatter: function (data) {
-              let txt = '';
-              that.seriesData.forEach(a =>{
+              let txt = "";
+              that.seriesData.forEach((a) => {
                 if (a.label == data.seriesName && !a.isHave) {
                   a.isHave = true;
                   txt = data.value;
                 }
-              })
+              });
               return txt;
             },
           },
@@ -295,15 +317,15 @@ export default {
         that.seriesData.push({
           label: item.deptName,
           value: [item.deptCount],
-          isHave:false
+          isHave: false,
         });
       });
     },
   },
   mounted() {
     var chartDom = document.getElementById("main");
-    var myChart = echarts.init(chartDom);
-    this.option && myChart.setOption(this.option);
+    this.myChart = echarts.init(chartDom);
+    this.option && this.myChart.setOption(this.option);
   },
 };
 </script>
diff --git a/src/store/index.js b/src/store/index.js
index 3201cae..af2912c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,14 +1,14 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
+import Vue from "vue";
+import Vuex from "vuex";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    isMock: false,
+    isMock: true,
   },
   getters: {
-    isMock: state => state.isMock,
+    isMock: (state) => state.isMock,
   },
   mutations: {},
   actions: {},
diff --git a/src/views/pageMonitor/bottomLeft/OpHistogram.vue b/src/views/pageMonitor/bottomLeft/OpHistogram.vue
new file mode 100644
index 0000000..123bf06
--- /dev/null
+++ b/src/views/pageMonitor/bottomLeft/OpHistogram.vue
@@ -0,0 +1,329 @@
+<template>
+  <div id="opMain"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+// 定义柱状图左侧图形元素
+const leftRect = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+    width: 15, //柱状图宽
+    zWidth: 8, //阴影折角宽
+    zHeight: 4, //阴影折角高
+  },
+  buildPath: function (ctx, shape) {
+    const api = shape.api;
+    const xAxisPoint = api.coord([shape.xValue, 0]);
+    const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
+    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
+    const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
+    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
+    const p4 = [shape.x + shape.width / 2, shape.y];
+
+    ctx.moveTo(p0[0], p0[1]);
+    ctx.lineTo(p1[0], p1[1]);
+    ctx.lineTo(p2[0], p2[1]);
+    ctx.lineTo(p3[0], p3[1]);
+    ctx.lineTo(p4[0], p4[1]);
+    ctx.lineTo(p0[0], p0[1]);
+    ctx.closePath();
+  },
+});
+// 定义柱状图右侧以及顶部图形元素
+const rightRect = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+    width: 14,
+    zWidth: 10,
+    zHeight: 8,
+  },
+  buildPath: function (ctx, shape) {
+    const api = shape.api;
+    const xAxisPoint = api.coord([shape.xValue, 0]);
+    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
+    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
+    const p4 = [shape.x + shape.width / 2, shape.y];
+    const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
+    const p6 = [
+      shape.x + shape.width / 2 + shape.zWidth,
+      shape.y - shape.zHeight / 2,
+    ];
+    const p7 = [
+      shape.x - shape.width / 2 + shape.zWidth,
+      shape.y - shape.zHeight,
+    ];
+    ctx.moveTo(p4[0], p4[1]);
+    ctx.lineTo(p3[0], p3[1]);
+    ctx.lineTo(p5[0], p5[1]);
+    ctx.lineTo(p6[0], p6[1]);
+    ctx.lineTo(p4[0], p4[1]);
+
+    ctx.moveTo(p4[0], p4[1]);
+    ctx.lineTo(p6[0], p6[1]);
+    ctx.lineTo(p7[0], p7[1]);
+    ctx.lineTo(p1[0], p1[1]);
+    ctx.lineTo(p4[0], p4[1]);
+    ctx.closePath();
+  },
+});
+
+// 注册图形元素
+echarts.graphic.registerShape("leftRect", leftRect);
+echarts.graphic.registerShape("rightRect", rightRect);
+
+export default {
+  name: "OpHistogram",
+  props: {
+    getDataList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      labels: ["择期", "急诊", "日间", "门诊"],
+      seriesData: [
+        {
+          label: "择期",
+          value: [54],
+          isHave: false,
+        },
+        {
+          label: "急诊",
+          value: [35],
+          isHave: false,
+        },
+        {
+          label: "日间",
+          value: [19],
+          isHave: false,
+        },
+        {
+          label: "门诊",
+          value: [60],
+          isHave: false,
+        },
+      ],
+      colors: [
+        [
+          { offset: 0, color: "rgba(26, 132, 191, 1)" },
+          { offset: 1, color: "rgba(52, 163, 224, 0.5)" },
+        ],
+        [
+          { offset: 0, color: "rgba(137, 163, 164, 1)" },
+          { offset: 1, color: "rgba(137, 163, 164, 0.5)" },
+        ],
+        [
+          { offset: 0, color: "rgba(44, 166, 166, 1)" },
+          { offset: 1, color: "rgba(44, 166, 166, 0.5)" },
+        ],
+        [
+          { offset: 0, color: "rgba(34, 66, 186, 1)" },
+          { offset: 1, color: "rgba(34, 66, 186, 0.5)" },
+        ],
+      ],
+      option: {},
+      myChart: null,
+    };
+  },
+  watch: {
+    getDataList(newVal) {
+      if (this.$store.getters.isMock) {
+        return;
+      }
+      if (newVal.length) {
+        this.wrapData(newVal);
+        this.initOption();
+        // 手动更新数据
+        this.option && this.myChart && this.myChart.setOption(this.option);
+      }
+    },
+  },
+  created() {
+    // 包装接口数据--初始化调用
+    if (this.getDataList.length) {
+      if (this.$store.getters.isMock) {
+        console.log("sssxx");
+      } else {
+        this.wrapData(this.getDataList);
+      }
+    }
+    this.initOption();
+  },
+  methods: {
+    initOption() {
+      this.option = {
+        grid: {
+          height: "80%",
+          top: "8%",
+          // bottom: "5%",
+        },
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          nameTextStyle: {
+            color: "#fff",
+          },
+          data: this.labels,
+          axisLabel: {
+            interval: 0,
+            rotate: 0, // 表示倾斜的角度
+            color: "#fff",
+            padding: [0, 0, 0, 8],
+          },
+        },
+        legend: {
+          // data: this.getlegendData(),
+          // right: "25",
+          // top: "18",
+          // icon: "rect",
+          // itemHeight: 10,
+          // itemWidth: 10,
+          // textStyle: {
+          //   color: "red",
+          // },
+          show: false,
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            color: "#fff",
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: ["#fff"],
+            },
+          },
+        },
+        series: this.getSeriesData(),
+      };
+    },
+    getlegendData() {
+      let that = this;
+      const data = [];
+      this.labels.forEach((item, index) => {
+        data.push({
+          name: item,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(
+              1,
+              0,
+              0,
+              0,
+              that.colors[index]
+            ),
+          },
+        });
+      });
+      return data;
+    },
+    getSeriesData() {
+      let that = this;
+      const data = [];
+      this.seriesData.forEach((item, index) => {
+        data.push({
+          type: "custom",
+          name: item.label,
+          renderItem: function (params, api) {
+            return that.getRenderItem(params, api);
+          },
+          label: {
+            show: true, // 显示数值
+            position: "insideTop", // 数值显示的位置
+            textStyle: {
+              //数值样式
+              color: "#fff",
+            },
+            formatter: function (data) {
+              let txt = "";
+              that.seriesData.forEach((a) => {
+                if (a.label == data.seriesName && !a.isHave) {
+                  a.isHave = true;
+                  txt = data.value;
+                }
+              });
+              return txt;
+            },
+          },
+          data: item.value,
+          itemStyle: {
+            color: () => {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                that.colors[index]
+              );
+            },
+          },
+        });
+      });
+      return data;
+    },
+    getRenderItem(params, api) {
+      const index = params.seriesIndex;
+      let location = api.coord([api.value(0) + index, api.value(1)]);
+      //   var extent = api.size([0, api.value(1)]);
+      return {
+        type: "group",
+        children: [
+          {
+            type: "leftRect",
+            shape: {
+              api,
+              xValue: api.value(0) + index,
+              yValue: api.value(1),
+              x: location[0],
+              y: location[1],
+            },
+            style: api.style(),
+          },
+          {
+            type: "rightRect",
+            shape: {
+              api,
+              xValue: api.value(0) + index,
+              yValue: api.value(1),
+              x: location[0],
+              y: location[1],
+            },
+            style: api.style(),
+          },
+        ],
+      };
+    },
+    wrapData(list) {
+      let that = this;
+      that.labels = [];
+      that.seriesData = [];
+      list.forEach((item) => {
+        that.labels.push(item.deptName);
+        that.seriesData.push({
+          label: item.deptName,
+          value: [item.deptCount],
+          isHave: false,
+        });
+      });
+    },
+  },
+  mounted() {
+    var chartDom = document.getElementById("opMain");
+    this.myChart = echarts.init(chartDom);
+    this.option && this.myChart.setOption(this.option);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#opMain {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/pageMonitor/bottomLeft/index.vue b/src/views/pageMonitor/bottomLeft/index.vue
index 290dfef..b6979c1 100644
--- a/src/views/pageMonitor/bottomLeft/index.vue
+++ b/src/views/pageMonitor/bottomLeft/index.vue
@@ -45,7 +45,7 @@
 <script>
 import { GetMonitorOperationNumber } from "@/api/monitor";
 import dayjs from "dayjs";
-import Histogram from "@/components/Histogram.vue";
+import Histogram from "./OpHistogram.vue";
 
 export default {
   data() {
@@ -71,7 +71,7 @@ export default {
         startDate: this.startDate,
         endDate: this.endDate,
       }).then((res) => {
-        this.getDataList = res["data"] || [];
+        this.getDataList = [res["data"]] || [];
         this.isLoading = false;
       });
     },
diff --git a/src/views/pageMonitor/bottomMiddle/index.vue b/src/views/pageMonitor/bottomMiddle/index.vue
index 7ec72c8..bb560e6 100644
--- a/src/views/pageMonitor/bottomMiddle/index.vue
+++ b/src/views/pageMonitor/bottomMiddle/index.vue
@@ -60,8 +60,8 @@ export default {
             },
             labelLine: {
               show: true,
-              length: 20,
-              length2: 25,
+              length: 15,
+              length2: 18,
               smooth: 0.6, // 可以使引导线稍微弯曲，使得标签位置更加合理
             },
             padAngle: 5,
@@ -203,8 +203,8 @@ export default {
             },
             labelLine: {
               show: true,
-              length: 20,
-              length2: 25,
+              length: 15,
+              length2: 18,
               smooth: 0.6, // 可以使引导线稍微弯曲，使得标签位置更加合理
             },
             padAngle: 5,
diff --git a/src/views/pageMonitor/bottomRight/DepHistogram.vue b/src/views/pageMonitor/bottomRight/DepHistogram.vue
new file mode 100644
index 0000000..50b392c
--- /dev/null
+++ b/src/views/pageMonitor/bottomRight/DepHistogram.vue
@@ -0,0 +1,337 @@
+<template>
+  <div id="main"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+// 定义柱状图左侧图形元素
+const leftRect = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+    width: 15, //柱状图宽
+    zWidth: 8, //阴影折角宽
+    zHeight: 4, //阴影折角高
+  },
+  buildPath: function (ctx, shape) {
+    const api = shape.api;
+    const xAxisPoint = api.coord([shape.xValue, 0]);
+    const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
+    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
+    const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
+    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
+    const p4 = [shape.x + shape.width / 2, shape.y];
+
+    ctx.moveTo(p0[0], p0[1]);
+    ctx.lineTo(p1[0], p1[1]);
+    ctx.lineTo(p2[0], p2[1]);
+    ctx.lineTo(p3[0], p3[1]);
+    ctx.lineTo(p4[0], p4[1]);
+    ctx.lineTo(p0[0], p0[1]);
+    ctx.closePath();
+  },
+});
+// 定义柱状图右侧以及顶部图形元素
+const rightRect = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+    width: 14,
+    zWidth: 10,
+    zHeight: 8,
+  },
+  buildPath: function (ctx, shape) {
+    const api = shape.api;
+    const xAxisPoint = api.coord([shape.xValue, 0]);
+    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
+    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
+    const p4 = [shape.x + shape.width / 2, shape.y];
+    const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
+    const p6 = [
+      shape.x + shape.width / 2 + shape.zWidth,
+      shape.y - shape.zHeight / 2,
+    ];
+    const p7 = [
+      shape.x - shape.width / 2 + shape.zWidth,
+      shape.y - shape.zHeight,
+    ];
+    ctx.moveTo(p4[0], p4[1]);
+    ctx.lineTo(p3[0], p3[1]);
+    ctx.lineTo(p5[0], p5[1]);
+    ctx.lineTo(p6[0], p6[1]);
+    ctx.lineTo(p4[0], p4[1]);
+
+    ctx.moveTo(p4[0], p4[1]);
+    ctx.lineTo(p6[0], p6[1]);
+    ctx.lineTo(p7[0], p7[1]);
+    ctx.lineTo(p1[0], p1[1]);
+    ctx.lineTo(p4[0], p4[1]);
+    ctx.closePath();
+  },
+});
+
+// 注册图形元素
+echarts.graphic.registerShape("leftRect", leftRect);
+echarts.graphic.registerShape("rightRect", rightRect);
+
+export default {
+  name: "DepHistogram",
+  props: {
+    getDataList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      labels: ["骨科", "心胸外科", "普通外科", "神经外科", "整形外科"],
+      seriesData: [
+        {
+          label: "骨科",
+          value: [32],
+          isHave: false,
+        },
+        {
+          label: "心胸外科",
+          value: [24],
+          isHave: false,
+        },
+        {
+          label: "普通外科",
+          value: [42],
+          isHave: false,
+        },
+        {
+          label: "神经外科",
+          value: [20],
+          isHave: false,
+        },
+        {
+          label: "整形外科",
+          value: [18],
+          isHave: false,
+        },
+      ],
+      colors: [
+        [
+          { offset: 0, color: "rgba(26, 132, 191, 1)" },
+          { offset: 1, color: "rgba(52, 163, 224, 0.5)" },
+        ],
+        [
+          { offset: 0, color: "rgba(137, 163, 164, 1)" },
+          { offset: 1, color: "rgba(137, 163, 164, 0.5)" },
+        ],
+        [
+          { offset: 0, color: "rgba(44, 166, 166, 1)" },
+          { offset: 1, color: "rgba(44, 166, 166, 0.5)" },
+        ],
+        [
+          { offset: 0, color: "rgba(34, 66, 186, 1)" },
+          { offset: 1, color: "rgba(34, 66, 186, 0.5)" },
+        ],
+        [
+          { offset: 0, color: "rgba(250,200,88, 1)" },
+          { offset: 1, color: "rgba(250,200,88, 0.6)" },
+        ],
+      ],
+      option: {},
+      myChart: null,
+    };
+  },
+  watch: {
+    getDataList(newVal) {
+      if (this.$store.getters.isMock) {
+        return;
+      }
+      if (newVal.length) {
+        this.wrapData(newVal);
+        this.initOption();
+        // 手动更新数据
+        this.option && this.myChart && this.myChart.setOption(this.option);
+      }
+    },
+  },
+  created() {
+    // 包装接口数据--初始化调用
+    if (this.getDataList.length) {
+      if (this.$store.getters.isMock) {
+        console.log("sssxx");
+      } else {
+        this.wrapData(this.getDataList);
+      }
+    }
+    this.initOption();
+  },
+  methods: {
+    initOption() {
+      this.option = {
+        grid: {
+          height: "80%",
+          top: "8%",
+          // bottom: "5%",
+        },
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          nameTextStyle: {
+            color: "#fff",
+          },
+          data: this.labels,
+          axisLabel: {
+            interval: 0,
+            rotate: -20, // 表示倾斜的角度
+            color: "#fff",
+          },
+        },
+        legend: {
+          // data: this.getlegendData(),
+          // right: "25",
+          // top: "18",
+          // icon: "rect",
+          // itemHeight: 10,
+          // itemWidth: 10,
+          // textStyle: {
+          //   color: "red",
+          // },
+          show: false,
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            color: "#fff",
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: ["#fff"],
+            },
+          },
+        },
+        series: this.getSeriesData(),
+      };
+    },
+    getlegendData() {
+      let that = this;
+      const data = [];
+      this.labels.forEach((item, index) => {
+        data.push({
+          name: item,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(
+              1,
+              0,
+              0,
+              0,
+              that.colors[index]
+            ),
+          },
+        });
+      });
+      return data;
+    },
+    getSeriesData() {
+      let that = this;
+      const data = [];
+      this.seriesData.forEach((item, index) => {
+        data.push({
+          type: "custom",
+          name: item.label,
+          renderItem: function (params, api) {
+            return that.getRenderItem(params, api);
+          },
+          label: {
+            show: true, // 显示数值
+            position: "insideTop", // 数值显示的位置
+            textStyle: {
+              //数值样式
+              color: "#fff",
+            },
+            formatter: function (data) {
+              let txt = "";
+              that.seriesData.forEach((a) => {
+                if (a.label == data.seriesName && !a.isHave) {
+                  a.isHave = true;
+                  txt = data.value;
+                }
+              });
+              return txt;
+            },
+          },
+          data: item.value,
+          itemStyle: {
+            color: () => {
+              return new echarts.graphic.LinearGradient(
+                0,
+                0,
+                0,
+                1,
+                that.colors[index]
+              );
+            },
+          },
+        });
+      });
+      return data;
+    },
+    getRenderItem(params, api) {
+      const index = params.seriesIndex;
+      let location = api.coord([api.value(0) + index, api.value(1)]);
+      //   var extent = api.size([0, api.value(1)]);
+      return {
+        type: "group",
+        children: [
+          {
+            type: "leftRect",
+            shape: {
+              api,
+              xValue: api.value(0) + index,
+              yValue: api.value(1),
+              x: location[0],
+              y: location[1],
+            },
+            style: api.style(),
+          },
+          {
+            type: "rightRect",
+            shape: {
+              api,
+              xValue: api.value(0) + index,
+              yValue: api.value(1),
+              x: location[0],
+              y: location[1],
+            },
+            style: api.style(),
+          },
+        ],
+      };
+    },
+    wrapData(list) {
+      let that = this;
+      that.labels = [];
+      that.seriesData = [];
+      list.forEach((item) => {
+        that.labels.push(item.deptName);
+        that.seriesData.push({
+          label: item.deptName,
+          value: [item.deptCount],
+          isHave: false,
+        });
+      });
+    },
+  },
+  mounted() {
+    var chartDom = document.getElementById("main");
+    this.myChart = echarts.init(chartDom);
+    this.option && this.myChart.setOption(this.option);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#main {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/pageMonitor/bottomRight/index.vue b/src/views/pageMonitor/bottomRight/index.vue
index c572330..b49a315 100644
--- a/src/views/pageMonitor/bottomRight/index.vue
+++ b/src/views/pageMonitor/bottomRight/index.vue
@@ -48,7 +48,7 @@
 <script>
 import { GetMonitorOperationDept } from "@/api/monitor";
 import dayjs from "dayjs";
-import Histogram from "@/components/Histogram.vue";
+import Histogram from "./DepHistogram.vue";
 
 export default {
   data() {
diff --git a/src/views/pageScheduling/index.vue b/src/views/pageScheduling/index.vue
index d0bfce6..adf4d23 100644
--- a/src/views/pageScheduling/index.vue
+++ b/src/views/pageScheduling/index.vue
@@ -50,7 +50,7 @@ export default {
     onGetPageData() {
       this.isLoading = true;
       GetMonitorOperationNurseSchedule(this.toDate).then(res => {
-        if (res['data']['nurseScheduleDetails']['length']) {
+        if (res['data']['nurseScheduleDetails']['length'] && !this.$store.getters.isMock) {
           this.roomCount = res['data']['roomCount'];
           this.nurseCount = res['data']['nurseCount'];
           this.schedulingList = [];