diff --git a/src/App.vue b/src/App.vue
index 392a172ed3eaa9a4bdcdf17d84afb9f9a7a82d74..4e20558eff50c0a78c1aa59a00ff982f5d49791d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <MainPage/>
+    <MainPage />
   </div>
 </template>
 
diff --git a/src/components/ChartsComponents/RightCharts.vue b/src/components/ChartsComponents/RightCharts.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ec0e9565c47abccd22c2d15c15e34bbe14f35f18
--- /dev/null
+++ b/src/components/ChartsComponents/RightCharts.vue
@@ -0,0 +1,406 @@
+<!-- 右上柱状图---设备通过人数统计  -->
+<template>
+  <div>
+    <!-- 右侧图表主标题 开始-->
+    <div
+      id="rightChartsTitle"
+      :style="{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        fontSize: '20px',
+        fontWeight: 'bold',
+        fontStyle: 'normal',
+        lineHeight: '1.5',
+        color: 'rgba(208, 226, 254, 1)',
+        textAlign: 'center',
+        textShadow: '',
+      }"
+    >
+      <p />
+    </div>
+    <!-- 右侧图表主标题 结束-->
+
+    <!-- 右侧主标题旁的img-->
+    <div id="item34b883f0-78c9-11ec-a443-6f43f7e52860">
+      <img
+        src="@/assets/images/22512ac6-8b7b-4b52-9f53-3da9aea389c6.png"
+        alt=""
+        :style="{ width: '100%', height: '100%' }"
+      >
+    </div>
+    <!-- 右侧主标题旁的img-->
+
+    <!-- 右侧图表Container  开始-->
+    <div id="rightChartsContainer">
+      <!-- 组件rightTopChartsTitle开始-->
+      <div
+        id="rightTopChartsTitle"
+        :style="{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          fontSize: '20px',
+          fontWeight: 'bold',
+          fontStyle: 'normal',
+          lineHeight: '1.5',
+          color: 'rgba(208, 226, 254, 1)',
+          textAlign: 'center',
+          textShadow: '',
+        }"
+      >
+        <p />
+      </div>
+      <!-- 组件rightTopChartsTitle结束-->
+
+      <!-- 组件rightCenterChartsTitle开始-->
+      <div
+        id="rightCenterChartsTitle"
+        :style="{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          fontSize: '20px',
+          fontWeight: 'bold',
+          fontStyle: 'normal',
+          lineHeight: '1.5',
+          color: 'rgba(208, 226, 254, 1)',
+          textAlign: 'center',
+          textShadow: '',
+        }"
+      >
+        <p />
+      </div>
+      <!-- 组件rightCenterChartsTitle-->
+
+      <!-- 组件rightBottomChartsTitle开始-->
+      <div
+        id="rightBottomChartsTitle"
+        :style="{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          fontSize: '20px',
+          fontWeight: 'bold',
+          fontStyle: 'normal',
+          lineHeight: '1.5',
+          color: 'rgba(208, 226, 254, 1)',
+          textAlign: 'center',
+          textShadow: '',
+        }"
+      >
+        <p />
+      </div>
+      <!-- 组件rightBottomChartsTitle结束-->
+
+      <!-- rightTopCharts开始-->
+      <div id="rightTopCharts" />
+      <!-- rightTopCharts结束-->
+
+      <!-- rightCenterChart开始-->
+      <div id="rightCenterChart" />
+      <!-- rightCenterChart结束-->
+
+      <!-- rightBottomChart开始-->
+      <div id="rightBottomChart" />
+      <!-- rightBottomChart结束-->
+    </div>
+    <!-- 右侧图表Container  结束-->
+
+    <!-- 右侧图表背景图  开始-->
+    <div id="item27fa9ff0-783c-11ec-9d8f-9d6659ff1262">
+      <img
+        src="@/assets/images/31de7d37-cacd-42c3-b788-950a7f464247.png"
+        alt=""
+        :style="{ width: '100%', height: '100%' }"
+      >
+    </div>
+    <!-- 右侧图表背景图结束-->
+  </div>
+</template>
+
+<script>
+
+import * as echarts from "echarts";
+
+export default {
+  components: {
+  },
+  data() {
+    return {}
+  },
+  created() {
+  },
+  mounted() {
+    this.getRightChartsTitle()
+    this.getRightTopChartsTitle()
+    this.getRightCenterChartsTitle()
+    this.getRightBottomChartsTitle()
+    this.rightTopChartInit()
+    this.rightCenterChartInit()
+    this.getRightBottomChartsTitle()
+  },
+  methods: {
+    // rightChartsTitle数据获取
+    getRightChartsTitle() {
+      const option = {
+        textColor: 'rgba(208, 226, 254, 1)',
+        color: ['#ffffff'],
+        fontSize: 20,
+        lineHeight: 1.5,
+        textIndent: 0,
+        fontWeight: 'bold',
+        fontStyle: 'normal',
+        textAlign: 'center',
+        justifyContent: 'center',
+        alignItems: 'center',
+        textShadow: {
+          show: false,
+          x: 0,
+          y: 0,
+          value: 14,
+          color: 'rgba(15, 146, 255,1)'
+        }
+      }
+      // 指定文字的数据
+      let data = [{ data: '设备综合数据' }]
+
+      // 映射
+      data = data.map((item) => {
+        return { data: item['data'] }
+      })
+      const pNode = document.querySelector(
+        '#rightChartsTitle p'
+      )
+      pNode.innerHTML = data[0].data
+      if (/\&nbsp\;/.test(data[0].data) || /\<br/.test(data[0].data)) {
+        pNode.style = {
+          color: 'rgba(208, 226, 254, 1)',
+          whiteSpace: 'nowrap',
+          overflow: 'visible',
+          lineHeight: '1.2',
+          letterSpacing: '-1px',
+          marginTop: '-2px'
+        }
+      } else {
+        pNode.style = {
+          color: 'rgba(208, 226, 254, 1)'
+        }
+      }
+    },
+
+    // -------图表标题--------//
+    getRightTopChartsTitle() {
+      const option = {
+        textColor: 'rgba(208, 226, 254, 1)',
+        color: ['#ffffff'],
+        fontSize: 20,
+        lineHeight: 1.5,
+        textIndent: 0,
+        fontWeight: 'bold',
+        fontStyle: 'normal',
+        textAlign: 'center',
+        justifyContent: 'center',
+        alignItems: 'center',
+        textShadow: {
+          show: false,
+          x: 0,
+          y: 0,
+          value: 14,
+          color: 'rgba(15, 146, 255,1)'
+        }
+      }
+      // 指定文字的数据
+      let data = [{ data: '设备通过人数统计' }]
+
+      // 映射
+      data = data.map((item) => {
+        return { data: item['data'] }
+      })
+      const pNode = document.querySelector(
+        '#rightTopChartsTitle p'
+      )
+      pNode.innerHTML = data[0].data
+      if (/\&nbsp\;/.test(data[0].data) || /\<br/.test(data[0].data)) {
+        pNode.style = {
+          color: 'rgba(208, 226, 254, 1)',
+          whiteSpace: 'nowrap',
+          overflow: 'visible',
+          lineHeight: '1.2',
+          letterSpacing: '-1px',
+          marginTop: '-2px'
+        }
+      } else {
+        pNode.style = {
+          color: 'rgba(208, 226, 254, 1)'
+        }
+      }
+    },
+
+    getRightCenterChartsTitle() {
+      const option = {
+        textColor: 'rgba(208, 226, 254, 1)',
+        color: ['#ffffff'],
+        fontSize: 20,
+        lineHeight: 1.5,
+        textIndent: 0,
+        fontWeight: 'bold',
+        fontStyle: 'normal',
+        textAlign: 'center',
+        justifyContent: 'center',
+        alignItems: 'center',
+        textShadow: {
+          show: false,
+          x: 0,
+          y: 0,
+          value: 14,
+          color: 'rgba(15, 146, 255,1)'
+        }
+      }
+      // 指定文字的数据
+      let data = [{ data: '设备报警次数统计' }]
+
+      // 映射
+      data = data.map((item) => {
+        return { data: item['data'] }
+      })
+      const pNode = document.querySelector(
+        '#rightCenterChartsTitle p'
+      )
+      pNode.innerHTML = data[0].data
+      if (/\&nbsp\;/.test(data[0].data) || /\<br/.test(data[0].data)) {
+        pNode.style = {
+          color: 'rgba(208, 226, 254, 1)',
+          whiteSpace: 'nowrap',
+          overflow: 'visible',
+          lineHeight: '1.2',
+          letterSpacing: '-1px',
+          marginTop: '-2px'
+        }
+      } else {
+        pNode.style = {
+          color: 'rgba(208, 226, 254, 1)'
+        }
+      }
+    },
+
+    getRightBottomChartsTitle() {
+      const option = {
+        textColor: 'rgba(208, 226, 254, 1)',
+        color: ['#ffffff'],
+        fontSize: 20,
+        lineHeight: 1.5,
+        textIndent: 0,
+        fontWeight: 'bold',
+        fontStyle: 'normal',
+        textAlign: 'center',
+        justifyContent: 'center',
+        alignItems: 'center',
+        textShadow: {
+          show: false,
+          x: 0,
+          y: 0,
+          value: 14,
+          color: 'rgba(15, 146, 255,1)'
+        }
+      }
+      // 指定文字的数据
+      let data = [{ data: '设备报警率统计' }]
+
+      // 映射
+      data = data.map((item) => {
+        return { data: item['data'] }
+      })
+      const pNode = document.querySelector(
+        '#rightBottomChartsTitle p'
+      )
+      pNode.innerHTML = data[0].data
+      if (/\&nbsp\;/.test(data[0].data) || /\<br/.test(data[0].data)) {
+        pNode.style = {
+          color: 'rgba(208, 226, 254, 1)',
+          whiteSpace: 'nowrap',
+          overflow: 'visible',
+          lineHeight: '1.2',
+          letterSpacing: '-1px',
+          marginTop: '-2px'
+        }
+      } else {
+        pNode.style = {
+          color: 'rgba(208, 226, 254, 1)'
+        }
+      }
+    },
+    // -------图表标题--------//
+
+    // ---rightTopCharts图表 ----//
+    rightTopChartInit() {
+      // 准备 echarts渲染的dom元素
+      const myChart = echarts.init(
+        document.getElementById('rightTopCharts')
+      )
+      // 设置 echarts 代码的头 与  尾
+      const codeHeader =
+        "function (echarts,myChart,chartDom){ \n let option;\let ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';\n"
+      const codeFooter = '\nreturn option; \n }'
+      //  拿到可见的配置项代码 进行拼接
+      const code0 =
+        "option = {\n  tooltip: {\n    trigger: 'axis',\n    axisPointer: {\n      type: 'shadow'\n    }\n  },\n  grid: {\n    left: '3%',\n    right: '4%',\n    bottom: '3%',\n    containLabel: true\n  },\n  xAxis: [\n    {\n      type: 'category',\n      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n      axisTick: {\n        alignWithLabel: true\n      }\n    }\n  ],\n  yAxis: [\n    {\n      type: 'value'\n    }\n  ],\n  series: [\n    {\n      name: 'Direct',\n      type: 'bar',\n      barWidth: '60%',\n      data: [10, 52, 200, 334, 390, 330, 220]\n    }\n  ]\n};  "
+      const code = codeHeader + code0 + codeFooter
+      const codeFunction = { init: eval('(' + code + ')') }
+      const option = codeFunction.init(echarts, this.myChart, this.chartDom)
+      if (myChart) {
+        myChart.clear()
+        myChart.setOption(option)
+      }
+    },
+    // ---rightTopCharts图表 /----//
+
+    // ---rightCenterChart图表---//
+    rightCenterChartInit() {
+      // 准备 echarts渲染的dom元素
+      const myChart = echarts.init(
+        document.getElementById('rightCenterChart')
+      )
+      // 设置 echarts 代码的头 与  尾
+      const codeHeader =
+        "function (echarts,myChart,chartDom){ \n let option;\let ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';\n"
+      const codeFooter = '\nreturn option; \n }'
+      //  拿到可见的配置项代码 进行拼接
+      const code0 =
+        "option = {\n  tooltip: {\n    trigger: 'axis',\n    axisPointer: {\n      type: 'shadow'\n    }\n  },\n  grid: {\n    left: '3%',\n    right: '4%',\n    bottom: '3%',\n    containLabel: true\n  },\n  xAxis: [\n    {\n      type: 'category',\n      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n      axisTick: {\n        alignWithLabel: true\n      }\n    }\n  ],\n  yAxis: [\n    {\n      type: 'value'\n    }\n  ],\n  series: [\n    {\n      name: 'Direct',\n      type: 'bar',\n      barWidth: '60%',\n      data: [10, 52, 200, 334, 390, 330, 220]\n    }\n  ]\n};"
+      const code = codeHeader + code0 + codeFooter
+      const codeFunction = { init: eval('(' + code + ')') }
+      const option = codeFunction.init(echarts, this.myChart, this.chartDom)
+      if (myChart) {
+        myChart.clear()
+        myChart.setOption(option)
+      }
+    },
+    // ---rightCenterChart图表 /---//
+
+    // -----rightBottomChart图表-----//
+    rightBottomChartInit() {
+      // 准备 echarts渲染的dom元素
+      const myChart = echarts.init(
+        document.getElementById('rightBottomChart')
+      )
+      // 设置 echarts 代码的头 与  尾
+      const codeHeader =
+        "function (echarts,myChart,chartDom){ \n let option;\let ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';\n"
+      const codeFooter = '\nreturn option; \n }'
+      //  拿到可见的配置项代码 进行拼接
+      const code0 =
+        "option = {\n  tooltip: {\n    trigger: 'axis',\n    axisPointer: {\n      type: 'shadow'\n    }\n  },\n  grid: {\n    left: '3%',\n    right: '4%',\n    bottom: '3%',\n    containLabel: true\n  },\n  xAxis: [\n    {\n      type: 'category',\n      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n      axisTick: {\n        alignWithLabel: true\n      }\n    }\n  ],\n  yAxis: [\n    {\n      type: 'value'\n    }\n  ],\n  series: [\n    {\n      name: 'Direct',\n      type: 'bar',\n      barWidth: '60%',\n      data: [10, 52, 200, 334, 390, 330, 220]\n    }\n  ]\n};"
+      const code = codeHeader + code0 + codeFooter
+      const codeFunction = { init: eval('(' + code + ')') }
+      const option = codeFunction.init(echarts, this.myChart, this.chartDom)
+      if (myChart) {
+        myChart.clear()
+        myChart.setOption(option)
+      }
+    }
+    // -----rightBottomChart图表 /-----//
+
+  }
+}
+</script>
diff --git a/src/main.js b/src/main.js
index 07a0e543559b2056eb1370a3943a408b3ab2fc80..e90fb57b5b7e562fff4199f823471f04c222cbf6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,12 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import _ from 'lodash'
-import * as Scroll from "./assets/js/seamscroll.min";
+import * as Scroll from './assets/js/seamscroll.min'
 
 Vue.config.productionTip = false
 Vue.prototype._ = _
 Vue.prototype.Scroll = Scroll
 
 new Vue({
-  render: h => h(App),
+  render: h => h(App)
 }).$mount('#app')
diff --git a/src/views/MainPage.vue b/src/views/MainPage.vue
index 09e25d44be5b6b7e1f8a9d9d83189e8de5c42ca0..71b3a6e6c565076b4aaa862b29e754eecc052793 100644
--- a/src/views/MainPage.vue
+++ b/src/views/MainPage.vue
@@ -1,14 +1,12 @@
 <template>
   <div class="container">
-    <!-- 分组19f5cec0-7788-11ec-a975-8f9b0d833e75开始-->
+    <!-- 顶部标题  开始-->
     <div id="item19f5cec0-7788-11ec-a975-8f9b0d833e75">
-      <!-- 组件8953e5f0-7787-11ec-a975-8f9b0d833e75开始-->
-
+      <!-- 顶部标题文字  开始-->
       <div id="item8953e5f0-7787-11ec-a975-8f9b0d833e75" />
-      <!-- 组件8953e5f0-7787-11ec-a975-8f9b0d833e75结束-->
-
-      <!-- 组件e5d7cc80-778a-11ec-a975-8f9b0d833e75开始-->
+      <!-- 顶部标题文字  结束-->
 
+      <!-- 顶部时间  开始-->
       <div
         id="iteme5d7cc80-778a-11ec-a975-8f9b0d833e75"
         :style="{
@@ -21,15 +19,15 @@
           letterSpacing: '2px',
         }"
       />
-      <!-- 组件e5d7cc80-778a-11ec-a975-8f9b0d833e75结束-->
+      <!-- 顶部时间  结束-->
     </div>
-    <!-- 分组19f5cec0-7788-11ec-a975-8f9b0d833e75结束-->
+    <!-- 顶部标题  结束-->
 
-    <!-- 分组53aecd00-78d3-11ec-9368-f3f928853655开始-->
+    <!-- 中间菜单  开始-->
     <div id="item53aecd00-78d3-11ec-9368-f3f928853655">
-      <!-- 分组9db74920-78f8-11ec-a3e6-b9940a698494开始-->
+      <!-- 中一开始-->
       <div id="item9db74920-78f8-11ec-a3e6-b9940a698494">
-        <!-- 组件48d25850-78f8-11ec-a3e6-b9940a698494开始-->
+        <!-- 中一文字  开始-->
         <div
           id="item48d25850-78f8-11ec-a3e6-b9940a698494"
           :style="{
@@ -47,9 +45,9 @@
         >
           <p />
         </div>
-        <!-- 组件48d25850-78f8-11ec-a3e6-b9940a698494结束-->
+        <!-- 中一文字  结束-->
 
-        <!-- 组件482cc950-78d3-11ec-9368-f3f928853655开始-->
+        <!-- 中一背景  开始-->
         <div
           id="item482cc950-78d3-11ec-9368-f3f928853655"
           :style="{
@@ -58,13 +56,13 @@
             background: 'rgba(11, 29, 35, 0.54)',
           }"
         />
-        <!-- 组件482cc950-78d3-11ec-9368-f3f928853655结束-->
+        <!-- 中一背景结束-->
       </div>
-      <!-- 分组9db74920-78f8-11ec-a3e6-b9940a698494结束-->
+      <!-- 中一结束-->
 
-      <!-- 分组cf541760-78f8-11ec-a3e6-b9940a698494开始-->
+      <!-- 中二开始-->
       <div id="itemcf541760-78f8-11ec-a3e6-b9940a698494">
-        <!-- 组件ac98cb80-78f8-11ec-a3e6-b9940a698494开始-->
+        <!-- 中二文字开始-->
         <div
           id="itemac98cb80-78f8-11ec-a3e6-b9940a698494"
           :style="{
@@ -82,10 +80,9 @@
         >
           <p />
         </div>
-        <!-- 组件ac98cb80-78f8-11ec-a3e6-b9940a698494结束-->
-
-        <!-- 组件4adb2070-78d3-11ec-9368-f3f928853655开始-->
+        <!-- 中二文字结束-->
 
+        <!-- 中二背景开始-->
         <div
           id="item4adb2070-78d3-11ec-9368-f3f928853655"
           :style="{
@@ -94,14 +91,13 @@
             background: 'rgba(11, 29, 35, 0.54)',
           }"
         />
-        <!-- 组件4adb2070-78d3-11ec-9368-f3f928853655结束-->
+        <!-- 中二背景结束-->
       </div>
-      <!-- 分组cf541760-78f8-11ec-a3e6-b9940a698494结束-->
+      <!-- 中二结束-->
 
-      <!-- 分组3d7c9f50-78f9-11ec-a3e6-b9940a698494开始-->
+      <!-- 中三开始-->
       <div id="item3d7c9f50-78f9-11ec-a3e6-b9940a698494">
-        <!-- 组件1f8480d0-78f9-11ec-a3e6-b9940a698494开始-->
-
+        <!-- 中三文字开始-->
         <div
           id="item1f8480d0-78f9-11ec-a3e6-b9940a698494"
           :style="{
@@ -114,15 +110,14 @@
             lineHeight: '1.6',
             color: 'rgba(224, 155, 155, 1)',
             textAlign: 'center',
-            textShadow: false ? '0px 0px 14px rgba(15, 146, 255,1)' : '',
+            textShadow: '',
           }"
         >
           <p />
         </div>
-        <!-- 组件1f8480d0-78f9-11ec-a3e6-b9940a698494结束-->
-
-        <!-- 组件4ee4c1d0-78d3-11ec-9368-f3f928853655开始-->
+        <!-- 中三文字结束-->
 
+        <!-- 中三背景开始-->
         <div
           id="item4ee4c1d0-78d3-11ec-9368-f3f928853655"
           :style="{
@@ -131,22 +126,22 @@
             background: 'rgba(11, 29, 35, 0.54)',
           }"
         />
-        <!-- 组件4ee4c1d0-78d3-11ec-9368-f3f928853655结束-->
+        <!-- 中三背景结束-->
       </div>
-      <!-- 分组3d7c9f50-78f9-11ec-a3e6-b9940a698494结束-->
+      <!-- 中三结束-->
     </div>
-    <!-- 分组53aecd00-78d3-11ec-9368-f3f928853655结束-->
+    <!-- 中间菜单  结束-->
 
-    <!-- 分组a3037690-778d-11ec-a975-8f9b0d833e75开始-->
+    <!-- 左右菜单栏   开始-->
     <div id="itema3037690-778d-11ec-a975-8f9b0d833e75">
-      <!-- 分组30dbd420-7807-11ec-94a6-35c656a9d7d1开始-->
+      <!-- 左侧菜单  开始-->
       <div id="item30dbd420-7807-11ec-94a6-35c656a9d7d1">
-        <!-- 分组9c5804f0-7800-11ec-94a6-35c656a9d7d1开始-->
+        <!-- 左一 开始-->
         <div id="item9c5804f0-7800-11ec-94a6-35c656a9d7d1">
-          <!-- 组件64990070-77fe-11ec-94a6-35c656a9d7d1开始-->
-
+          <!-- 左一文字 开始-->
           <div
             id="item64990070-77fe-11ec-94a6-35c656a9d7d1"
+            style="cursor: pointer"
             :style="{
               display: 'flex',
               justifyContent: 'center',
@@ -157,15 +152,14 @@
               lineHeight: '1.6',
               color: 'rgba(255, 255, 255, 1)',
               textAlign: 'center',
-              textShadow: false ? '0px 0px 14px rgba(15, 146, 255,1)' : '',
+              textShadow: '',
             }"
           >
             <p />
           </div>
-          <!-- 组件64990070-77fe-11ec-94a6-35c656a9d7d1结束-->
-
-          <!-- 组件92a74d00-778b-11ec-a975-8f9b0d833e75开始-->
+          <!-- 左一文字 结束-->
 
+          <!-- 左一背景 开始-->
           <div
             id="item92a74d00-778b-11ec-a975-8f9b0d833e75"
             :style="{
@@ -174,14 +168,13 @@
               background: 'rgba(17, 24, 54, 0.8)',
             }"
           />
-          <!-- 组件92a74d00-778b-11ec-a975-8f9b0d833e75结束-->
+          <!-- 左一背景 结束-->
         </div>
-        <!-- 分组9c5804f0-7800-11ec-94a6-35c656a9d7d1结束-->
+        <!-- 左一 结束-->
 
-        <!-- 分组72535600-7800-11ec-94a6-35c656a9d7d1开始-->
+        <!-- 左二  开始-->
         <div id="item72535600-7800-11ec-94a6-35c656a9d7d1">
-          <!-- 组件b794acf0-7800-11ec-94a6-35c656a9d7d1开始-->
-
+          <!-- 左二文字 开始-->
           <div
             id="itemb794acf0-7800-11ec-94a6-35c656a9d7d1"
             :style="{
@@ -199,10 +192,9 @@
           >
             <p />
           </div>
-          <!-- 组件b794acf0-7800-11ec-94a6-35c656a9d7d1结束-->
-
-          <!-- 组件94118b60-778b-11ec-a975-8f9b0d833e75开始-->
+          <!-- 左二文字 结束-->
 
+          <!-- 左二背景   开始-->
           <div
             id="item94118b60-778b-11ec-a975-8f9b0d833e75"
             :style="{
@@ -211,14 +203,13 @@
               background: 'rgba(17, 24, 54, 0.8)',
             }"
           />
-          <!-- 组件94118b60-778b-11ec-a975-8f9b0d833e75结束-->
+          <!-- 左二背景   结束-->
         </div>
-        <!-- 分组72535600-7800-11ec-94a6-35c656a9d7d1结束-->
+        <!-- 左二  结束-->
 
-        <!-- 分组60b6dce0-7801-11ec-94a6-35c656a9d7d1开始-->
+        <!-- 左三   开始-->
         <div id="item60b6dce0-7801-11ec-94a6-35c656a9d7d1">
-          <!-- 组件596eb250-7801-11ec-94a6-35c656a9d7d1开始-->
-
+          <!-- 左三文字开始-->
           <div
             id="item596eb250-7801-11ec-94a6-35c656a9d7d1"
             :style="{
@@ -236,10 +227,9 @@
           >
             <p />
           </div>
-          <!-- 组件596eb250-7801-11ec-94a6-35c656a9d7d1结束-->
-
-          <!-- 组件9822a6d0-778b-11ec-a975-8f9b0d833e75开始-->
+          <!-- 左三文字结束-->
 
+          <!-- 左三背景开始-->
           <div
             id="item9822a6d0-778b-11ec-a975-8f9b0d833e75"
             :style="{
@@ -248,14 +238,13 @@
               background: 'rgba(17, 24, 54, 0.8)',
             }"
           />
-          <!-- 组件9822a6d0-778b-11ec-a975-8f9b0d833e75结束-->
+          <!-- 左三背景结束-->
         </div>
-        <!-- 分组60b6dce0-7801-11ec-94a6-35c656a9d7d1结束-->
+        <!-- 左三   结束-->
 
-        <!-- 分组9dd0ccd0-7801-11ec-94a6-35c656a9d7d1开始-->
+        <!-- 左四  开始-->
         <div id="item9dd0ccd0-7801-11ec-94a6-35c656a9d7d1">
-          <!-- 组件96887b30-7801-11ec-94a6-35c656a9d7d1开始-->
-
+          <!-- 左四文字开始-->
           <div
             id="item96887b30-7801-11ec-94a6-35c656a9d7d1"
             :style="{
@@ -268,15 +257,14 @@
               lineHeight: '1.6',
               color: '#ffffff',
               textAlign: 'center',
-              textShadow: false ? '0px 0px 14px rgba(15, 146, 255,1)' : '',
+              textShadow: '',
             }"
           >
             <p />
           </div>
-          <!-- 组件96887b30-7801-11ec-94a6-35c656a9d7d1结束-->
-
-          <!-- 组件98eaffe0-778b-11ec-a975-8f9b0d833e75开始-->
+          <!-- 左四文字结束-->
 
+          <!-- 左四背景    开始-->
           <div
             id="item98eaffe0-778b-11ec-a975-8f9b0d833e75"
             :style="{
@@ -285,18 +273,17 @@
               background: 'rgba(17, 24, 54, 0.8)',
             }"
           />
-          <!-- 组件98eaffe0-778b-11ec-a975-8f9b0d833e75结束-->
+          <!-- 左四背景   结束-->
         </div>
-        <!-- 分组9dd0ccd0-7801-11ec-94a6-35c656a9d7d1结束-->
+        <!-- 左四   结束-->
       </div>
-      <!-- 分组30dbd420-7807-11ec-94a6-35c656a9d7d1结束-->
+      <!-- 左侧菜单  结束-->
 
-      <!-- 分组35107d20-7807-11ec-94a6-35c656a9d7d1开始-->
+      <!-- 右侧菜单开始-->
       <div id="item35107d20-7807-11ec-94a6-35c656a9d7d1">
-        <!-- 分组dc844880-7801-11ec-94a6-35c656a9d7d1开始-->
+        <!-- 右一        开始-->
         <div id="itemdc844880-7801-11ec-94a6-35c656a9d7d1">
-          <!-- 组件d388c8a0-7801-11ec-94a6-35c656a9d7d1开始-->
-
+          <!-- 右一文字        开始-->
           <div
             id="itemd388c8a0-7801-11ec-94a6-35c656a9d7d1"
             :style="{
@@ -314,10 +301,9 @@
           >
             <p />
           </div>
-          <!-- 组件d388c8a0-7801-11ec-94a6-35c656a9d7d1结束-->
-
-          <!-- 组件99fee0e0-778b-11ec-a975-8f9b0d833e75开始-->
+          <!-- 右一文字        结束-->
 
+          <!-- 右一背景        开始-->
           <div
             id="item99fee0e0-778b-11ec-a975-8f9b0d833e75"
             :style="{
@@ -326,14 +312,13 @@
               background: 'rgba(17, 24, 54, 0.8)',
             }"
           />
-          <!-- 组件99fee0e0-778b-11ec-a975-8f9b0d833e75结束-->
+          <!-- 右一背景        结束-->
         </div>
-        <!-- 分组dc844880-7801-11ec-94a6-35c656a9d7d1结束-->
+        <!-- 右一        结束-->
 
-        <!-- 分组4d335440-7802-11ec-94a6-35c656a9d7d1开始-->
+        <!-- 右二        开始-->
         <div id="item4d335440-7802-11ec-94a6-35c656a9d7d1">
-          <!-- 组件377c8d60-7802-11ec-94a6-35c656a9d7d1开始-->
-
+          <!-- 右二文字      开始-->
           <div
             id="item377c8d60-7802-11ec-94a6-35c656a9d7d1"
             :style="{
@@ -351,10 +336,9 @@
           >
             <p />
           </div>
-          <!-- 组件377c8d60-7802-11ec-94a6-35c656a9d7d1结束-->
-
-          <!-- 组件9b584f00-778e-11ec-a975-8f9b0d833e75开始-->
+          <!-- 右二文字      结束-->
 
+          <!-- 右二背景       开始-->
           <div
             id="item9b584f00-778e-11ec-a975-8f9b0d833e75"
             :style="{
@@ -363,14 +347,13 @@
               background: 'rgba(17, 24, 54, 0.8)',
             }"
           />
-          <!-- 组件9b584f00-778e-11ec-a975-8f9b0d833e75结束-->
+          <!-- 右二背景       结束-->
         </div>
-        <!-- 分组4d335440-7802-11ec-94a6-35c656a9d7d1结束-->
+        <!-- 右二        结束-->
 
-        <!-- 分组166861d0-7802-11ec-94a6-35c656a9d7d1开始-->
+        <!-- 右三        开始-->
         <div id="item166861d0-7802-11ec-94a6-35c656a9d7d1">
-          <!-- 组件f61f0050-7801-11ec-94a6-35c656a9d7d1开始-->
-
+          <!-- 右三文字     开始-->
           <div
             id="itemf61f0050-7801-11ec-94a6-35c656a9d7d1"
             :style="{
@@ -388,10 +371,9 @@
           >
             <p />
           </div>
-          <!-- 组件f61f0050-7801-11ec-94a6-35c656a9d7d1结束-->
-
-          <!-- 组件8ad5bc40-778d-11ec-a975-8f9b0d833e75开始-->
+          <!-- 右三文字     结束-->
 
+          <!-- 右三背景        开始-->
           <div
             id="item8ad5bc40-778d-11ec-a975-8f9b0d833e75"
             :style="{
@@ -400,16 +382,16 @@
               background: 'rgba(17, 24, 54, 0.8)',
             }"
           />
-          <!-- 组件8ad5bc40-778d-11ec-a975-8f9b0d833e75结束-->
+          <!-- 右三背景        结束-->
         </div>
-        <!-- 分组166861d0-7802-11ec-94a6-35c656a9d7d1结束-->
+        <!-- 右三        结束-->
 
-        <!-- 分组ccafd340-7804-11ec-94a6-35c656a9d7d1开始-->
+        <!-- 右四        开始-->
         <div id="itemccafd340-7804-11ec-94a6-35c656a9d7d1">
-          <!-- 组件c26b58a0-7804-11ec-94a6-35c656a9d7d1开始-->
-
+          <!-- 右四文字        开始-->
           <div
             id="itemc26b58a0-7804-11ec-94a6-35c656a9d7d1"
+            style="cursor: pointer"
             :style="{
               display: 'flex',
               justifyContent: 'center',
@@ -420,15 +402,14 @@
               lineHeight: '1.6',
               color: '#ffffff',
               textAlign: 'center',
-              textShadow: false ? '0px 0px 14px rgba(15, 146, 255,1)' : '',
+              textShadow: '',
             }"
           >
             <p />
           </div>
-          <!-- 组件c26b58a0-7804-11ec-94a6-35c656a9d7d1结束-->
-
-          <!-- 组件be02a750-7804-11ec-94a6-35c656a9d7d1开始-->
+          <!-- 右四文字        结束-->
 
+          <!-- 右四背景        开始-->
           <div
             id="itembe02a750-7804-11ec-94a6-35c656a9d7d1"
             :style="{
@@ -437,21 +418,21 @@
               background: 'rgba(17, 24, 54, 0.8)',
             }"
           />
-          <!-- 组件be02a750-7804-11ec-94a6-35c656a9d7d1结束-->
+          <!-- 右四背景        结束-->
         </div>
-        <!-- 分组ccafd340-7804-11ec-94a6-35c656a9d7d1结束-->
+        <!-- 右四        结束-->
       </div>
-      <!-- 分组35107d20-7807-11ec-94a6-35c656a9d7d1结束-->
+      <!-- 右侧菜单结束-->
     </div>
-    <!-- 分组a3037690-778d-11ec-a975-8f9b0d833e75结束-->
+    <!-- 左右菜单栏  结束-->
 
-    <!-- -------报警率图表-----  -->
+    <!-- -------中上图表-----报警率图表-----  -->
     <div id="centerTopContainer">
       <CenterTopChartsComponets />
     </div>
-    <!-- -------报警率图表-----  结束-->
+    <!-- -------中上图表-----报警率图表-----  结束-->
 
-    <!-- 分组b716ec90-7920-11ec-984c-d7441fe9086e开始-->
+    <!-- 左上图表----设备报警次数TOP5  开始-->
     <div id="itemb716ec90-7920-11ec-984c-d7441fe9086e">
       <!-- 组件423cce60-7918-11ec-984c-d7441fe9086e开始-->
 
@@ -474,9 +455,9 @@
       </div>
       <!-- 组件befc5240-7904-11ec-a3e6-b9940a698494结束-->
     </div>
-    <!-- 分组b716ec90-7920-11ec-984c-d7441fe9086e结束-->
+    <!-- 左一图表----设备报警次数TOP5   结束-->
 
-    <!-- 分组915e97e0-7921-11ec-984c-d7441fe9086e开始-->
+    <!-- 左下图表---报警次数周分析开始-->
     <div id="item915e97e0-7921-11ec-984c-d7441fe9086e">
       <!-- 组件3b13fd70-7a9e-11ec-8264-c76a521cd45f开始-->
 
@@ -499,9 +480,9 @@
       </div>
       <!-- 组件915e97e3-7921-11ec-984c-d7441fe9086e结束-->
     </div>
-    <!-- 分组915e97e0-7921-11ec-984c-d7441fe9086e结束-->
+    <!-- 左下图表---报警次数周分析结束-->
 
-    <!-- 分组730c1ce0-783b-11ec-9d8f-9d6659ff1262开始-->
+    <!-- 中下图表-----安检门实时数据    开始-->
     <div id="item730c1ce0-783b-11ec-9d8f-9d6659ff1262">
       <!-- 分组0c8d4c80-9b92-11ec-b6db-9f277d23970e开始-->
       <div id="item0c8d4c80-9b92-11ec-b6db-9f277d23970e">
@@ -679,11 +660,11 @@
       </div>
       <!-- 分组2413a340-9b92-11ec-b6db-9f277d23970e结束-->
     </div>
-    <!-- 分组730c1ce0-783b-11ec-9d8f-9d6659ff1262结束-->
+    <!-- 中下图表-----安检门实时数据     结束-->
 
     <!-- 右侧图表开始-->
-    <div id="rightChartsGround">
-      <!-- 右侧图表主标题 开始-->
+    <!--    <div id="rightChartsGround">
+      &lt;!&ndash; 右侧图表主标题 开始&ndash;&gt;
       <div
         id="rightChartsTitle"
         :style="{
@@ -701,9 +682,9 @@
       >
         <p />
       </div>
-      <!-- 右侧图表主标题 结束-->
+      &lt;!&ndash; 右侧图表主标题 结束&ndash;&gt;
 
-      <!-- 右侧主标题旁的img-->
+      &lt;!&ndash; 右侧主标题旁的img&ndash;&gt;
       <div id="item34b883f0-78c9-11ec-a443-6f43f7e52860">
         <img
           src="@/assets/images/22512ac6-8b7b-4b52-9f53-3da9aea389c6.png"
@@ -711,11 +692,11 @@
           :style="{ width: '100%', height: '100%' }"
         >
       </div>
-      <!-- 右侧主标题旁的img-->
+      &lt;!&ndash; 右侧主标题旁的img&ndash;&gt;
 
-      <!-- 右侧图表Container  开始-->
+      &lt;!&ndash; 右侧图表Container  开始&ndash;&gt;
       <div id="rightChartsContainer">
-        <!-- 组件rightTopChartsTitle开始-->
+        &lt;!&ndash; 组件rightTopChartsTitle开始&ndash;&gt;
         <div
           id="rightTopChartsTitle"
           :style="{
@@ -733,9 +714,9 @@
         >
           <p />
         </div>
-        <!-- 组件rightTopChartsTitle结束-->
+        &lt;!&ndash; 组件rightTopChartsTitle结束&ndash;&gt;
 
-        <!-- 组件rightCenterChartsTitle开始-->
+        &lt;!&ndash; 组件rightCenterChartsTitle开始&ndash;&gt;
         <div
           id="rightCenterChartsTitle"
           :style="{
@@ -753,9 +734,9 @@
         >
           <p />
         </div>
-        <!-- 组件rightCenterChartsTitle-->
+        &lt;!&ndash; 组件rightCenterChartsTitle&ndash;&gt;
 
-        <!-- 组件rightBottomChartsTitle开始-->
+        &lt;!&ndash; 组件rightBottomChartsTitle开始&ndash;&gt;
         <div
           id="rightBottomChartsTitle"
           :style="{
@@ -773,23 +754,23 @@
         >
           <p />
         </div>
-        <!-- 组件rightBottomChartsTitle结束-->
+        &lt;!&ndash; 组件rightBottomChartsTitle结束&ndash;&gt;
 
-        <!-- rightTopCharts开始-->
+        &lt;!&ndash; rightTopCharts开始&ndash;&gt;
         <div id="rightTopCharts" />
-        <!-- rightTopCharts结束-->
+        &lt;!&ndash; rightTopCharts结束&ndash;&gt;
 
-        <!-- rightCenterChart开始-->
+        &lt;!&ndash; rightCenterChart开始&ndash;&gt;
         <div id="rightCenterChart" />
-        <!-- rightCenterChart结束-->
+        &lt;!&ndash; rightCenterChart结束&ndash;&gt;
 
-        <!-- rightBottomChart开始-->
+        &lt;!&ndash; rightBottomChart开始&ndash;&gt;
         <div id="rightBottomChart" />
-        <!-- rightBottomChart结束-->
+        &lt;!&ndash; rightBottomChart结束&ndash;&gt;
       </div>
-      <!-- 右侧图表Container  结束-->
+      &lt;!&ndash; 右侧图表Container  结束&ndash;&gt;
 
-      <!-- 右侧图表背景图  开始-->
+      &lt;!&ndash; 右侧图表背景图  开始&ndash;&gt;
       <div id="item27fa9ff0-783c-11ec-9d8f-9d6659ff1262">
         <img
           src="@/assets/images/31de7d37-cacd-42c3-b788-950a7f464247.png"
@@ -797,7 +778,11 @@
           :style="{ width: '100%', height: '100%' }"
         >
       </div>
-      <!-- 右侧图表背景图结束-->
+      &lt;!&ndash; 右侧图表背景图结束&ndash;&gt;
+    </div>
+    -->
+    <div id="rightChartsGround">
+      <RightChart />
     </div>
     <!-- 右侧图表结束-->
   </div>
@@ -810,22 +795,24 @@ import '@/assets/css/custom-animation.css'
 import * as echarts from 'echarts'
 import 'echarts-wordcloud'
 import 'echarts-liquidfill'
-import axios from 'axios'
-import QRCode from 'qrcodejs2'
-import { swiper, swiperSlide } from 'vue-awesome-swiper'
-import vueSeamlessScroll from 'vue-seamless-scroll'
+// import axios from 'axios'
+// import QRCode from 'qrcodejs2'
+// import { swiper, swiperSlide } from 'vue-awesome-swiper'
+// import vueSeamlessScroll from 'vue-seamless-scroll'
 import 'swiper/css/swiper.css'
 import dayjs from 'dayjs'
 import 'dayjs/locale/zh-cn'
-import countTo from 'vue-count-to'
+// import countTo from 'vue-count-to'
 import utils from '../assets/js/utils.js'
 import CenterTopChartsComponets from '@/components/ChartsComponents/CenterTopChartsComponets'
+import RightChart from '@/components/ChartsComponents/RightCharts'
 export default {
   components: {
-    swiper,
-    swiperSlide,
-    vueSeamlessScroll,
-    countTo,
+    RightChart,
+    // swiper,
+    // swiperSlide,
+    // vueSeamlessScroll,
+    // countTo,
     CenterTopChartsComponets
   },
   data() {