diff --git a/src/assets/model/equipment/bg2.png b/src/assets/model/equipment/bg2.png
new file mode 100644
index 0000000..f44eeb4
Binary files /dev/null and b/src/assets/model/equipment/bg2.png differ
diff --git a/src/assets/model/model/dataCentre.png b/src/assets/model/model/dataCentre.png
new file mode 100644
index 0000000..df62674
Binary files /dev/null and b/src/assets/model/model/dataCentre.png differ
diff --git a/src/assets/model/model/equipment.png b/src/assets/model/model/equipment.png
new file mode 100644
index 0000000..decd8cb
Binary files /dev/null and b/src/assets/model/model/equipment.png differ
diff --git a/src/assets/model/model/factoryIntroduction.png b/src/assets/model/model/factoryIntroduction.png
new file mode 100644
index 0000000..44b316a
Binary files /dev/null and b/src/assets/model/model/factoryIntroduction.png differ
diff --git a/src/assets/model/model/live.png b/src/assets/model/model/live.png
new file mode 100644
index 0000000..5c555c0
Binary files /dev/null and b/src/assets/model/model/live.png differ
diff --git a/src/assets/model/model/process.png b/src/assets/model/model/process.png
new file mode 100644
index 0000000..bed1333
Binary files /dev/null and b/src/assets/model/model/process.png differ
diff --git a/src/assets/model/model/productDistribution.png b/src/assets/model/model/productDistribution.png
new file mode 100644
index 0000000..deada8f
Binary files /dev/null and b/src/assets/model/model/productDistribution.png differ
diff --git a/src/assets/model/model/quality.png b/src/assets/model/model/quality.png
new file mode 100644
index 0000000..4f06221
Binary files /dev/null and b/src/assets/model/model/quality.png differ
diff --git a/src/assets/model/quality/bg.jpg b/src/assets/model/quality/bg.jpg
new file mode 100644
index 0000000..bf5ab59
Binary files /dev/null and b/src/assets/model/quality/bg.jpg differ
diff --git a/src/views/board/caseShell/index2.vue b/src/views/board/caseShell/index2.vue
index b0fcf96..b5d9ad1 100644
--- a/src/views/board/caseShell/index2.vue
+++ b/src/views/board/caseShell/index2.vue
@@ -751,9 +751,9 @@ export default {
 .meter {
   position: absolute;
   top: 19.7%;
-  left: 61.5%;
+  left: 62.2%;
   transform: translateY(-50%);
-  font-size: 0.8vw;
+  font-size: 0.9vw;
   color: #fff;
 }
 </style>
diff --git a/src/views/board/liner/index.vue b/src/views/board/liner/index.vue
index 5434522..4851735 100644
--- a/src/views/board/liner/index.vue
+++ b/src/views/board/liner/index.vue
@@ -677,7 +677,7 @@ export default {
   top: 19.7%;
   left: 62.5%;
   transform: translateY(-50%);
-  font-size: 0.8vw;
+  font-size: 0.9vw;
   color: #fff;
 }
 </style>
diff --git a/src/views/board/scanDown/index.vue b/src/views/board/scanDown/index.vue
index 0a8f513..4df0354 100644
--- a/src/views/board/scanDown/index.vue
+++ b/src/views/board/scanDown/index.vue
@@ -7,9 +7,9 @@
     </div>
     <div class="loss">{{loss}}</div>
     <div class="meter">{{meter}}</div>
-    <span style="position: absolute;top: 10%;left: 14%;color: #fff;font-size: 1vw;">目标：1000&nbsp;&nbsp;进度目标：1000&nbsp;&nbsp;实际：1000&nbsp;&nbsp;差异：0&nbsp;&nbsp;达成率：100% </span>
-    <span style="position: absolute;top: 54.3%;left: 19%;color: #fff;font-size: 1vw">目标：3% &nbsp;&nbsp;&nbsp;实际：1% &nbsp;&nbsp;&nbsp;累计不良数：1</span>
-    <span style="position: absolute;top: 54.3%;left: 66.7%;color: #CFD2D0;font-size: 1.0vw">合计：111</span>
+    <span style="position: absolute;top: 10%;left: 14%;color: #fff;font-size: 0.9vw;">目标：1000&nbsp;&nbsp;进度目标：1000&nbsp;&nbsp;实际：1000&nbsp;&nbsp;差异：0&nbsp;&nbsp;达成率：100% </span>
+    <span style="position: absolute;top: 54.3%;left: 19%;color: #fff;font-size: 0.9vw">目标：3% &nbsp;&nbsp;&nbsp;实际：1% &nbsp;&nbsp;&nbsp;累计不良数：1</span>
+    <span style="position: absolute;top: 54.3%;left: 66.7%;color: #CFD2D0;font-size: 0.9vw">合计：111</span>
 
     <div class="scrollTable">
       <div style="background-color: #094170">
diff --git a/src/views/board/week/index.vue b/src/views/board/week/index.vue
index 54bc1ea..4cd60e9 100644
--- a/src/views/board/week/index.vue
+++ b/src/views/board/week/index.vue
@@ -12,9 +12,9 @@
     <div class="classSelect">
 
 
-      <el-button :class="nowLine === 1 ? 'clickLine':''" @click="setLine(1)">产线1</el-button>
-      <el-button :class="nowLine === 2 ? 'clickLine':''" @click="setLine(2)">产线2</el-button>
-      <el-button :class="nowLine === 3 ? 'clickLine':''" @click="setLine(3)">合并</el-button>
+      <el-button :class="nowLine === 1 ? 'clickLine':''" @click="setLine(1)" size="mini">产线1</el-button>
+      <el-button :class="nowLine === 2 ? 'clickLine':''" @click="setLine(2)" size="mini">产线2</el-button>
+      <el-button :class="nowLine === 3 ? 'clickLine':''" @click="setLine(3)" size="mini">合并</el-button>
       <!--      <el-radio v-model="selectValue" label="1">产线1</el-radio>-->
       <!--      <el-radio v-model="selectValue" label="2">产线2</el-radio>-->
       <!--      <el-radio v-model="selectValue" label="3">合计</el-radio>-->
@@ -226,7 +226,7 @@ export default {
           },
           show: true,
         },
-        data: ['人A', '人B', '人C', '人D', '人E', '人F', '人G', '人H'],
+        data: ['组A', '组B', '组C', '组D', '组E', '组F', '组G', '组H'],
         type: 'category',
       },
       yAxis: {
@@ -1181,26 +1181,26 @@ export default {
 
 .totalNum {
   position: absolute;
-  top: 11.5%;
+  top: 11.3%;
   left: 18%;
   transform: translateY(-50%);
   color: #fff;
-  font-size: 0.8vw;
+  font-size: 0.9vw;
 }
 
 .info1 {
   position: absolute;
-  top: 11.5%;
+  top: 11.3%;
   left: 44.5%;
   transform: translateY(-50%);
   color: #fff;
-  font-size: 0.8vw;
+  font-size: 1vw;
 }
 
 .classSelect {
   position: absolute;
-  top: 5%;
-  left: 9%;
+  top: 6.5%;
+  left: 4%;
 }
 
 .el-radio {
diff --git a/src/views/model/equipment.vue b/src/views/model/equipment.vue
new file mode 100644
index 0000000..caa0bff
--- /dev/null
+++ b/src/views/model/equipment.vue
@@ -0,0 +1,1490 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">设备运营中心</div>
+    <div class="exit" @click="exitFun"></div>
+
+
+    <div class="box1">
+      <div class="boxTitle">点检统计分析</div>
+      <div class="chart1">
+        <Chart ref="chart1"></Chart>
+      </div>
+    </div>
+    <div class="box2">
+      <div class="boxTitle">保养统计分析</div>
+      <div class="chart2">
+        <Chart ref="chart2"></Chart>
+      </div>
+    </div>
+    <div class="box3">
+      <div class="boxTitle">设备状态</div>
+    </div>
+    <div class="box4">
+      <div class="boxTitle">故障类型统计</div>
+      <div class="chart4">
+        <Chart ref="chart4"></Chart>
+      </div>
+    </div>
+    <div class="box5">
+      <div class="boxTitle">单台能耗</div>
+      <div class="chart5">
+        <Chart ref="chart5"></Chart>
+      </div>
+    </div>
+    <div class="box6">
+      <div class="boxTitle">故障统计分析</div>
+      <div class="chart6">
+        <Chart ref="chart6"></Chart>
+      </div>
+    </div>
+    <div class="box7">
+      <div class="boxTitle">保养看板</div>
+      <div class="scrollTable">
+        <div style="background-color: #09417066">
+          <div class="scrollTableItem" style="font-weight: bold;">
+            序号
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            设备编号
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            设备名称
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            保养项目
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            指派人
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            当前状态
+          </div>
+        </div>
+        <vue-seamless-scroll
+          :class-option="scrollTableOption"
+          :data="scrollTableData"
+          class="case-item"
+          style="height: 84%;overflow: hidden;"
+        >
+          <div
+            v-for="(item, index) in scrollTableData"
+            :key="index"
+          >
+            <div :style='"background-color:" + ((index % 2 === 0)? "#05346066":"#032d5766") '>
+              <div
+                class="scrollTableItem">
+                {{ item.value1 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value1 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value2 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value3 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value4 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value5 }}
+              </div>
+            </div>
+          </div>
+        </vue-seamless-scroll>
+      </div>
+    </div>
+    <div class="box8">
+      <div class="boxTitle">异常看板</div>
+      <div class="scrollTable">
+        <div style="background-color: #09417066">
+          <div class="scrollTableItem" style="font-weight: bold;">
+            设备编号
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            设备名称
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            报警时间
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            报警描述
+          </div>
+          <div class="scrollTableItem" style="font-weight: bold;">
+            状态持续时间
+          </div>
+        </div>
+        <vue-seamless-scroll
+          :class-option="scrollTableOption"
+          :data="scrollTableData"
+          class="case-item"
+          style="height: 84%;overflow: hidden;"
+        >
+          <div
+            v-for="(item, index) in scrollTableData"
+            :key="index"
+          >
+            <div :style='"background-color:" + ((index % 2 === 0)? "#05346066":"#032d5766") '>
+              <div
+                class="scrollTableItem">
+                {{ item.value1 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value1 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value2 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value3 }}
+              </div>
+              <div
+                class="scrollTableItem">
+                {{ item.value4 }}
+              </div>
+            </div>
+          </div>
+        </vue-seamless-scroll>
+      </div>
+    </div>
+
+    <div class="chart11">
+      <Chart ref="chart11"></Chart>
+    </div>
+    <div class="chart12">
+      <Chart ref="chart12"></Chart>
+    </div>
+    <div class="chart13">
+      <Chart ref="chart13"></Chart>
+    </div>
+    <div class="chart14">
+      <Chart ref="chart14"></Chart>
+    </div>
+    <div class="chart15">
+      <Chart ref="chart15"></Chart>
+    </div>
+    <div class="chart16">
+      <Chart ref="chart16"></Chart>
+    </div>
+    <div class="electricity">
+      <div class="span1">用电消耗</div>
+      <div class="span2">11111kw·h</div>
+      <div class="span3">当日总耗电量</div>
+      <div class="span4">环比：
+        <div class="span5">57.00% ↑</div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import vueSeamlessScroll from "vue-seamless-scroll";
+import Chart from "@/components/board/Chart";
+import {getData} from "@/api/board/getData";
+import * as echarts from 'echarts'
+
+export default {
+  name: "Liner",
+  components: {
+    Chart,
+    vueSeamlessScroll,
+  },
+  props: {
+    exit: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+    this.$refs.chart1.setData({
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      grid: {
+        borderWidth: 0,
+        top: 2 * vw,
+        bottom: 1.5 * vw,
+        left: 2.5 * vw,
+        right: 2.5 * vw,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      legend: {
+        x: "center",
+        top: "0",
+        textStyle: {
+          fontSize: 0.6 * vw,
+          color: "#90979c",
+        },
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+          },
+          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+        {
+          type: "value",
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+            formatter: "{value}%"
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "需点检",
+          type: "bar",
+          borderWidth: '15%',
+          itemStyle: {
+            normal: {
+              color: "#3fd498",
+            },
+          },
+          data: [
+            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
+          ],
+        },
+
+        {
+          name: "已点检",
+          type: "bar",
+          borderWidth: '15%',
+          barGap: "-100%",
+          itemStyle: {
+            normal: {
+              color: "#78b4fe",
+              barBorderRadius: 0,
+            },
+          },
+          data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001],
+        },
+        {
+          name: "点检率",
+          type: "line",
+          symbolSize: 10,
+          symbol: "circle",
+          yAxisIndex: 1,
+          itemStyle: {
+            normal: {
+              color: "#885576",
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: "top",
+                color: "#fff",
+                fontSize: 0.6 * vw,
+                formatter: function (p) {
+                  return (p.value > 0 ? p.value : "") + '%';
+                },
+              },
+            },
+          },
+          data: [
+            96, 91, 96, 65, 86, 96, 91, 94, 100
+          ],
+        },
+      ],
+    })
+    this.$refs.chart2.setData({
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      grid: {
+        borderWidth: 0,
+        top: 2 * vw,
+        bottom: 1.5 * vw,
+        left: 2.5 * vw,
+        right: 2.5 * vw,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      legend: {
+        x: "center",
+        top: "0",
+        textStyle: {
+          fontSize: 0.6 * vw,
+          color: "#90979c",
+        },
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+          },
+          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+        {
+          type: "value",
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+            formatter: "{value}%"
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "需保养",
+          type: "bar",
+          borderWidth: '15%',
+          itemStyle: {
+            normal: {
+              color: "#f27f2b",
+            },
+          },
+          data: [
+            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
+          ],
+        },
+
+        {
+          name: "已保养",
+          type: "bar",
+          borderWidth: '15%',
+          barGap: "-100%",
+          itemStyle: {
+            normal: {
+              color: "#78b4fe",
+              barBorderRadius: 0,
+            },
+          },
+          data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001],
+        },
+        {
+          name: "点检率",
+          type: "line",
+          symbolSize: 10,
+          symbol: "circle",
+          yAxisIndex: 1,
+          itemStyle: {
+            normal: {
+              color: "#885576",
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: "top",
+                color: "#fff",
+                fontSize: 0.6 * vw,
+                formatter: function (p) {
+                  return (p.value > 0 ? p.value : "") + '%';
+                },
+              },
+            },
+          },
+          data: [
+            96, 91, 96, 65, 86, 96, 91, 94, 100
+          ],
+        },
+      ],
+    })
+    this.$refs.chart4.setData({
+      grid: {
+        top: "15%",
+        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          label: {
+            show: true,
+          },
+        },
+      },
+      legend: {
+        data: ["占比"],
+        top: "3%",
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      xAxis: {
+        data: [
+          "测温",
+          "捡漏",
+          "后板",
+          "系统件",
+        ],
+        axisLine: {
+          show: true, //隐藏X轴轴线
+          lineStyle: {
+            color: "#ffffff66",
+          },
+        },
+        axisTick: {
+          show: true, //隐藏X轴刻度
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#ffffff66", //X轴文字颜色
+          },
+        },
+      },
+      yAxis: [
+        {
+          type: "value",
+          name: "缺陷占比",
+          nameTextStyle: {
+            color: "#ffffff66",
+          },
+          position: "left",
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#ffffff66",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "占比",
+          type: "line",
+          label: {
+            normal: {
+              show: true,
+              position: "bottom",
+              textStyle: {
+                color: "#a8aab0",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          },
+          showAllSymbol: true, //显示所有图形。
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 5, //标记的大小
+          itemStyle: {
+            //折线拐点标志的样式
+            color: "#ffffff",
+          },
+          lineStyle: {
+            color: "#ffffff",
+          },
+          data: [94.7, 93.2, 94.7, 93.4],
+        },
+      ],
+    })
+    this.$refs.chart5.setData({
+      grid: {
+        top: "15%",
+        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          label: {
+            show: true,
+          },
+        },
+      },
+      legend: {
+        data: ["能耗"],
+        top: "3%",
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      xAxis: {
+        data: [
+          "01",
+          "02",
+          "03",
+          "04",
+        ],
+        axisLine: {
+          show: true, //隐藏X轴轴线
+          lineStyle: {
+            color: "#ffffff66",
+          },
+        },
+        axisTick: {
+          show: true, //隐藏X轴刻度
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#ffffff66", //X轴文字颜色
+          },
+        },
+      },
+      yAxis: [
+        {
+          type: "value",
+          name: "能耗/kw·h",
+          nameTextStyle: {
+            color: "#ffffff66",
+          },
+          position: "left",
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#ffffff66",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "能耗",
+          type: "line",
+          label: {
+            normal: {
+              show: true,
+              position: "bottom",
+              formatter: '{c}kw·h',
+              textStyle: {
+                color: "#a8aab0",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          },
+          showAllSymbol: true, //显示所有图形。
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 5, //标记的大小
+          itemStyle: {
+            //折线拐点标志的样式
+            color: "#ffffff",
+          },
+          lineStyle: {
+            color: "#ffffff",
+          },
+          data: [94.7, 93.2, 94.7, 93.4],
+        },
+      ],
+    })
+    this.$refs.chart6.setData({
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      grid: {
+        borderWidth: 0,
+        top: 2 * vw,
+        bottom: 1.5 * vw,
+        left: 2.5 * vw,
+        right: 2.5 * vw,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      legend: {
+        x: "center",
+        top: "0",
+        textStyle: {
+          fontSize: 0.6 * vw,
+          color: "#90979c",
+        },
+      },
+      xAxis: [
+        {
+          type: "category",
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+          },
+          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+        },
+      ],
+      yAxis: [
+        {
+          name: '故障数',
+          type: "value",
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "故障数",
+          type: "bar",
+          borderWidth: '15%',
+          itemStyle: {
+            normal: {
+              color: "#62aafe",
+            },
+          },
+          data: [
+            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
+          ],
+        },
+      ],
+    })
+
+    this.$refs.chart11.setData({
+      tooltip: {
+        trigger: "item",
+        formatter: "{a} <br/>{b} : {c} ({d}%)",
+      },
+      series: [
+        {
+          name: "",
+          type: "pie",
+          center: ["50%", "50%"],
+          radius: ["85%", "100%"],
+          data: [
+            {value: 280, name: "设备总数"},
+          ],
+          label: {
+            normal: {
+              rich: {
+                a: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 1.5 * vw,
+                  fontWeight: "bold",
+                },
+                b: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 0.8 * vw,
+                },
+              },
+              formatter: function (params) {
+                return (
+                  "{a|" +
+                  params.value +
+                  "}" +
+                  "\n{b|" +
+                  params.name +
+                  "}"
+                );
+              },
+              position: "center",
+              show: true,
+              textStyle: {
+                fontSize: "14",
+                fontWeight: "normal",
+                color: "#fff",
+              },
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: "#fa2f5a",
+              label: {
+                show: false,
+                formatter: "{b} : {c} ({d}%)",
+                color: "#fff"
+              },
+            },
+            labelLine: {show: true},
+          },
+        },
+      ],
+    })
+    this.$refs.chart12.setData({
+      tooltip: {
+        trigger: "item",
+      },
+      color: ['#5470c6', '#0000'],
+      series: [
+        {
+          name: "在线设备数",
+          type: "pie",
+          center: ["50%", "50%"],
+          radius: ["85%", "100%"],
+          data: [
+            {value: 254, name: "在线设备数"},
+            {value: 26, name: "0"},
+          ],
+          label: {
+            normal: {
+              rich: {
+                a: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 1.5 * vw,
+                  fontWeight: "bold",
+                },
+                b: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 0.8 * vw,
+                },
+              },
+              formatter: function (params) {
+                return (
+                  "{a|" +
+                  params.value +
+                  "}" +
+                  "\n{b|" +
+                  params.name +
+                  "}"
+                );
+              },
+              position: "center",
+              show: true,
+              textStyle: {
+                fontSize: "14",
+                fontWeight: "normal",
+                color: "#fff",
+              },
+            },
+          },
+          itemStyle: {
+            normal: {
+              // color: "#62aafe",
+              label: {
+                show: false,
+                formatter: "{b} : {c} ({d}%)",
+                color: "#fff"
+              },
+            },
+            labelLine: {show: true},
+          },
+        },
+      ],
+    })
+    this.$refs.chart13.setData({
+      tooltip: {
+        trigger: "item",
+      },
+      color: ['#fae92f', '#0000'],
+      series: [
+        {
+          name: "",
+          type: "pie",
+          center: ["50%", "50%"],
+          radius: ["85%", "100%"],
+          data: [
+            {value: 26, name: "离线设备数"},
+            {value: 254, name: "0"},
+          ],
+          label: {
+            normal: {
+              rich: {
+                a: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 1.5 * vw,
+                  fontWeight: "bold",
+                },
+                b: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 0.8 * vw,
+                },
+              },
+              formatter: function (params) {
+                return (
+                  "{a|" +
+                  26 +
+                  "}" +
+                  "\n{b|" +
+                  '离线设备数' +
+                  "}"
+                );
+              },
+              position: "center",
+              show: true,
+              textStyle: {
+                fontSize: "14",
+                fontWeight: "normal",
+                color: "#fff",
+              },
+            },
+          },
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+                formatter: "{b} : {c} ({d}%)",
+                color: "#fff"
+              },
+            },
+            labelLine: {show: true},
+          },
+        },
+      ],
+    })
+    this.$refs.chart14.setData({
+      tooltip: {
+        trigger: "item",
+      },
+      color: ['#2ffae0', '#0000'],
+      series: [
+        {
+          name: "",
+          type: "pie",
+          center: ["50%", "50%"],
+          radius: ["85%", "100%"],
+          data: [
+            {value: 4, name: "吸附设备OEE"},
+            {value: 96, name: "0"},
+          ],
+          label: {
+            normal: {
+              rich: {
+                a: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 1.5 * vw,
+                  fontWeight: "bold",
+                },
+                b: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 0.8 * vw,
+                },
+              },
+              formatter: function (params) {
+                return (
+                  "{a|" +
+                  4 +
+                  "%}" +
+                  "\n{b|" +
+                  '吸附设备OEE' +
+                  "}"
+                );
+              },
+              position: "center",
+              show: true,
+              textStyle: {
+                fontSize: "14",
+                fontWeight: "normal",
+                color: "#fff",
+              },
+            },
+          },
+          itemStyle: {
+            normal: {},
+            labelLine: {show: true},
+          },
+        },
+      ],
+    })
+    this.$refs.chart15.setData({
+      tooltip: {
+        trigger: "item",
+      },
+      color: ['#2ffae0', '#0000'],
+      series: [
+        {
+          name: "",
+          type: "pie",
+          center: ["50%", "50%"],
+          radius: ["85%", "100%"],
+          data: [
+            {value: 0, name: "箱壳设备OEE"},
+            {value: 100, name: "0"},
+          ],
+          label: {
+            normal: {
+              rich: {
+                a: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 1.5 * vw,
+                  fontWeight: "bold",
+                },
+                b: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 0.8 * vw,
+                },
+              },
+              formatter: function (params) {
+                return (
+                  "{a|" +
+                  0 +
+                  "%}" +
+                  "\n{b|" +
+                  '箱壳设备OEE' +
+                  "}"
+                );
+              },
+              position: "center",
+              show: true,
+              textStyle: {
+                fontSize: "14",
+                fontWeight: "normal",
+                color: "#fff",
+              },
+            },
+          },
+          itemStyle: {
+            normal: {},
+            labelLine: {show: true},
+          },
+        },
+      ],
+    })
+    this.$refs.chart16.setData({
+      tooltip: {
+        trigger: "item",
+      },
+      color: ['#2ffae0', '#0000'],
+      series: [
+        {
+          name: "",
+          type: "pie",
+          center: ["50%", "50%"],
+          radius: ["85%", "100%"],
+          data: [
+            {value: 0, name: "铝侧板设备OEE"},
+            {value: 96, name: "0"},
+          ],
+          label: {
+            normal: {
+              rich: {
+                a: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 1.5 * vw,
+                  fontWeight: "bold",
+                },
+                b: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 0.8 * vw,
+                },
+              },
+              formatter: function (params) {
+                return (
+                  "{a|" +
+                  0 +
+                  "%}" +
+                  "\n{b|" +
+                  '铝侧板设备OEE' +
+                  "}"
+                );
+              },
+              position: "center",
+              show: true,
+              textStyle: {
+                fontSize: "14",
+                fontWeight: "normal",
+                color: "#fff",
+              },
+            },
+          },
+          itemStyle: {
+            normal: {},
+            labelLine: {show: true},
+          },
+        },
+      ],
+    })
+  },
+  methods: {
+    exitFun() {
+      this.exit()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.app-container {
+  background-image: url("~@/assets/model/quality/bg.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-color: #021e31;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.exit {
+  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 1%;
+  right: 1%;
+  font-weight: bold;
+  width: 2vw;
+  height: 2vw;
+  color: #e7b219;
+}
+
+
+.headTitle {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  font-size: 1.5vw;
+  color: #d6eaed;
+  letter-spacing: 10px;
+}
+
+.boxTitle {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 2vw;
+  line-height: 2vw;
+  background: linear-gradient(to right, #152049, #184680);
+  color: #fff;
+  font-size: 1vw;
+  text-align: center;
+}
+
+.box1 {
+  position: absolute;
+  top: 7%;
+  left: 1%;
+  width: 29%;
+  height: 35%;
+  border: 1px solid #123061;
+
+  .chart1 {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+}
+
+.box2 {
+  position: absolute;
+  top: 43%;
+  left: 1%;
+  width: 29%;
+  height: 35%;
+  border: 1px solid #123061;
+
+  .chart2 {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+}
+
+.box3 {
+  position: absolute;
+  top: 7%;
+  left: 31%;
+  width: 38%;
+  height: 40%;
+  border: 1px solid #123061;
+
+  .chart3 {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.box4 {
+  position: absolute;
+  top: 48%;
+  left: 31%;
+  width: 38%;
+  height: 30%;
+  border: 1px solid #123061;
+
+  .chart4 {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+}
+
+.box5 {
+  position: absolute;
+  top: 7%;
+  left: 70%;
+  width: 29%;
+  height: 35%;
+  border: 1px solid #123061;
+
+  .chart5 {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+}
+
+.box6 {
+  position: absolute;
+  top: 43%;
+  left: 70%;
+  width: 29%;
+  height: 35%;
+  border: 1px solid #123061;
+
+  .chart6 {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+}
+
+.box7 {
+  position: absolute;
+  top: 79%;
+  left: 1%;
+  width: 37%;
+  height: 20%;
+  border: 1px solid #123061;
+
+  .scrollTable {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+
+  .scrollTableItem {
+    color: rgb(185, 186, 192);
+    margin: auto 0px;
+    padding: 4px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+    display: inline-block;
+    width: calc(100% / 6);
+  }
+}
+
+.box8 {
+  position: absolute;
+  top: 79%;
+  left: 62%;
+  width: 37%;
+  height: 20%;
+  border: 1px solid #123061;
+
+
+  .scrollTable {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+
+  .scrollTableItem {
+    color: rgb(185, 186, 192);
+    margin: auto 0px;
+    padding: 4px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+    display: inline-block;
+    width: calc(100% / 5);
+  }
+}
+
+.chart11 {
+  position: absolute;
+  top: 20%;
+  left: 37%;
+  width: 9%;
+  height: 15%;
+  transform: translate(-50%, -50%);
+}
+
+.chart12 {
+  position: absolute;
+  top: 20%;
+  left: 50%;
+  width: 9%;
+  height: 15%;
+  transform: translate(-50%, -50%);
+}
+
+.chart13 {
+  position: absolute;
+  top: 20%;
+  left: 64%;
+  width: 9%;
+  height: 15%;
+  transform: translate(-50%, -50%);
+}
+
+.chart14 {
+  position: absolute;
+  top: 38%;
+  left: 37%;
+  width: 9%;
+  height: 15%;
+  transform: translate(-50%, -50%);
+}
+
+.chart15 {
+  position: absolute;
+  top: 38%;
+  left: 50%;
+  width: 9%;
+  height: 15%;
+  transform: translate(-50%, -50%);
+}
+
+.chart16 {
+  position: absolute;
+  top: 38%;
+  left: 64%;
+  width: 9%;
+  height: 15%;
+  transform: translate(-50%, -50%);
+}
+
+.centerTitle {
+  position: absolute;
+  top: 15%;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #fff;
+  font-size: 1.4vw;
+}
+
+.electricity {
+  position: absolute;
+  bottom: 1%;
+  left: 50%;
+  width: 40vh;
+  height: 20vh;
+  transform: translateX(-50%);
+  background-image: url("~@/assets/model/equipment/bg2.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  .span1 {
+    position: absolute;
+    top: 2%;
+    left: 50%;
+    transform: translateX(-50%);
+    color:#FFF;
+    font-size: 1vw;
+  }
+
+  .span2 {
+    position: absolute;
+    bottom: 52%;
+    left: 50%;
+    transform: translateX(-50%);
+    color:#FFF;
+    font-size: 2vw;
+  }
+
+  .span3 {
+    position: absolute;
+    top: 52%;
+    left: 50%;
+    transform: translateX(-50%);
+    color:#2ffae0;
+    font-size: 0.8vw;
+  }
+
+  .span4 {
+    position: absolute;
+    bottom: 2%;
+    left: 50%;
+    transform: translateX(-50%);
+    color:#fff;
+    font-size: 1vw;
+    display: inline-block;
+    .span5 {
+      display: inline-block;
+      font-size: 1.5vw;
+      color:#edbc37;
+    }
+  }
+}
+</style>
diff --git a/src/views/model/model.vue b/src/views/model/model.vue
index ca53cc6..12fac37 100644
--- a/src/views/model/model.vue
+++ b/src/views/model/model.vue
@@ -6,49 +6,49 @@
         <el-row>
           <el-col :span="3">
             <div class="toolItem" @click="click1('factoryIntroduction')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/factoryIntroduction.png" />
               <div class="grid-content bg-purple">工厂介绍</div>
             </div>
           </el-col>
           <el-col :span="3">
             <div class="toolItem" @click="click1('productDistribution')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/productDistribution.png" />
               <div class="grid-content bg-purple-light">产品分布</div>
             </div>
           </el-col>
           <el-col :span="3">
             <div class="toolItem" @click="click1('dataCentre')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/dataCentre.png" />
               <div class="grid-content bg-purple">数据中心</div>
             </div>
           </el-col>
           <el-col :span="3">
             <div class="toolItem" @click="click1('live')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/live.png" />
               <div class="grid-content bg-purple">现场直播</div>
             </div>
           </el-col>
           <el-col :span="3">
             <div class="toolItem" @click="click2()">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/process.png" />
               <div class="grid-content bg-purple-light">工艺流程</div>
             </div>
           </el-col>
           <el-col :span="3">
             <div class="toolItem" @click="click1('production')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+              <img class="icon" src="@/assets/model/model/production.png" />
               <div class="grid-content bg-purple">生产</div>
             </div>
           </el-col>
           <el-col :span="3">
-            <div class="toolItem" @click="click1('质量')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+            <div class="toolItem" @click="click1('quality')">
+              <img class="icon" src="@/assets/model/model/quality.png" />
               <div class="grid-content bg-purple-light">质量</div>
             </div>
           </el-col>
           <el-col :span="3">
-            <div class="toolItem" @click="click1('厂房视角')">
-              <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
+            <div class="toolItem" @click="click1('equipment')">
+              <img class="icon" src="@/assets/model/model/equipment.png" />
               <div class="grid-content bg-purple-light">设备</div>
             </div>
           </el-col>
@@ -70,13 +70,19 @@
       <transition name="children">
         <live :exit="exit" v-if="show === 'live'"/>
       </transition>
+      <transition name="children">
+        <quality :exit="exit" v-if="show === 'quality'"/>
+      </transition>
+      <transition name="children">
+        <equipment :exit="exit" v-if="show === 'equipment'"/>
+      </transition>
 
 
       <div class="flowChart" v-show="show1">
         <div class="flowItem" v-for="(i,k) in flowItemOptions" @click="setNowFlowIndex(k)"
              :class="nowFlowIndex === k ? 'wireAnimation' : ''"
-             :style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background: linear-gradient(to bottom, ${nowFlowIndex === k ? '#00911F': i.bgColor+'66'}, ${nowFlowIndex === k ? '#00370C': i.bgColor});z-index:2;`">
-          <span>{{ i.text }}</span>
+             :style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background: linear-gradient(to bottom, ${nowFlowIndex === k ? '#00911F': i.bgColor+'99'}, ${nowFlowIndex === k ? '#00370C': i.bgColor});z-index:2;`">
+          <span v-html="i.text"></span>
         </div>
         <div class="wire" v-for="i in wireOptions"
              :style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background-color:${i.bgColor};z-index:0;`"></div>
@@ -97,6 +103,8 @@ import productDistribution from './productDistribution'
 import dataCentre from './dataCentre'
 import production from './production'
 import live from './live'
+import quality from './quality'
+import equipment from './equipment'
 
 const isAMRT = () => {
   return new Promise((resolve, reject) => {
@@ -118,7 +126,9 @@ export default {
     productDistribution,
     dataCentre,
     production,
-    live
+    live,
+    quality,
+    equipment
   },
   data() {
     return {
@@ -133,15 +143,15 @@ export default {
           left: 1,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '内胆自助成型'
+          bgColor: '#2f5597',
+          text: '内胆<br>自动成型'
         },
         {
           top: 2,
           left: 9.3,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
+          bgColor: '#ed7d31',
           text: '内胆预装'
         },
         {
@@ -149,8 +159,8 @@ export default {
           left: 17.6,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '内胆集存库'
+          bgColor: '#7f7f7f',
+          text: '内胆<br>集存库'
         },
 
         // 二层
@@ -159,15 +169,15 @@ export default {
           left: 1,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '箱壳自动成型'
+          bgColor: '#2f5597',
+          text: '箱壳<br>自动成型'
         },
         {
           top: 35,
           left: 9.3,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
+          bgColor: '#ed7d31',
           text: '箱壳预装'
         },
         {
@@ -175,8 +185,8 @@ export default {
           left: 17.6,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '箱壳集存库'
+          bgColor: '#7f7f7f',
+          text: '箱壳<br>集存库'
         },
 
         // 一二合
@@ -185,39 +195,39 @@ export default {
           left: 25.9,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '壳胆组装'
+          bgColor: '#f4b183',
+          text: '壳胆<br>组装'
         },
         {
           top: 17,
           left: 34.2,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '箱体预装'
+          bgColor: '#7f7f7f',
+          text: '箱体<br>预装'
         },
         {
           top: 17,
           left: 42.5,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '箱体发泡'
+          bgColor: '#00b050',
+          text: '箱体<br>发泡'
         },
         {
           top: 17,
           left: 50.8,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '门体安装'
+          bgColor: '#f4b183',
+          text: '门体<br>安装'
         },
         {
           top: 17,
           left: 59.1,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
+          bgColor: '#7f7f7f',
           text: '发泡箱体库'
         },
         {
@@ -225,7 +235,7 @@ export default {
           left: 67.4,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
+          bgColor: '#ffc000',
           text: '焊接'
         },
         {
@@ -233,24 +243,24 @@ export default {
           left: 75.7,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '抽空灌注'
+          bgColor: '#00b050',
+          text: '抽空<br>灌注'
         },
         {
           top: 17,
           left: 84,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '性能检测'
+          bgColor: '#ffc000',
+          text: '性能<br>检测'
         },
         {
           top: 17,
           left: 92.3,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '包装入库'
+          bgColor: '#f4b183',
+          text: '包装<br>入库'
         },
 
         // 三层
@@ -259,15 +269,15 @@ export default {
           left: 1,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '门壳自动成型'
+          bgColor: '#2f5597',
+          text: '门壳<br>自动成型'
         },
         {
           top: 68,
           left: 17.6,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
+          bgColor: '#ed7d31',
           text: '门壳预装'
         },
         {
@@ -275,16 +285,16 @@ export default {
           left: 34.2,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '门体发泡'
+          bgColor: '#00b050',
+          text: '门体<br>发泡'
         },
         {
           top: 68,
           left: 50.8,
           width: 6,
           height: 4,
-          bgColor: '#00aa00',
-          text: '箱、门匹配输送'
+          bgColor: '#7030a0',
+          text: '箱、门<br>匹配输送'
         }
       ],
       wireOptions: [
@@ -635,10 +645,15 @@ export default {
   padding: 0
 }
 
+.icon {
+  width:2vw;
+  margin:0 auto ;
+}
+
 .container {
   width: 100vw;
-  //height: 33.33vw;
-  height: 100vh;
+  height: 33.33vw;
+  //height: 100vh;
 }
 
 .tool {
@@ -664,8 +679,8 @@ export default {
 .test {
   //top: 20%;
   width: 100vw;
-  //height: 33.33vw;
-  height: 100vh;
+  height: 33.33vw;
+  //height: 100vh;
   position: absolute;
 }
 
diff --git a/src/views/model/quality.vue b/src/views/model/quality.vue
new file mode 100644
index 0000000..37bddae
--- /dev/null
+++ b/src/views/model/quality.vue
@@ -0,0 +1,1224 @@
+<template>
+  <div class="app-container">
+    <div class="headTitle">质量可视化管理</div>
+    <div class="exit" @click="exitFun"></div>
+
+
+    <div class="centerTitle">本月综合质量</div>
+    <div class="chart11">
+      <Chart ref="chart11"></Chart>
+    </div>
+    <div class="chart12">
+      <Chart ref="chart12"></Chart>
+    </div>
+    <div class="chart13">
+      <Chart ref="chart13"></Chart>
+    </div>
+    <div class="chart14">
+      <Chart ref="chart14"></Chart>
+    </div>
+    <div class="box1">
+      <div class="boxTitle">一次校验合格率</div>
+      <div class="chart1">
+        <Chart ref="chart1"></Chart>
+      </div>
+    </div>
+    <div class="box2">
+      <div class="boxTitle">OQC抽检分数</div>
+      <div class="chart2">
+        <Chart ref="chart2"></Chart>
+      </div>
+    </div>
+    <div class="box3">
+      <div class="chart3">
+        <Chart ref="chart3"></Chart>
+      </div>
+    </div>
+    <div class="box4">
+      <div class="boxTitle">本月缺陷占比</div>
+      <div class="chart4">
+        <Chart ref="chart4"></Chart>
+      </div>
+    </div>
+    <div class="box5">
+      <div class="boxTitle">重点工序监控</div>
+      <div class="chart5">
+        <Chart ref="chart5"></Chart>
+      </div>
+    </div>
+    <div class="box6">
+      <div class="boxTitle">当年市场不良率</div>
+      <div class="chart6">
+        <Chart ref="chart6"></Chart>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import Chart from "@/components/board/Chart";
+import {getData} from "@/api/board/getData";
+import * as echarts from 'echarts'
+
+export default {
+  name: "Liner",
+  components: {
+    Chart
+  },
+  props: {
+    exit: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+    this.$refs.chart1.setData({
+      grid: {
+        top: "15%",
+        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          label: {
+            show: true,
+          },
+        },
+      },
+      legend: {
+        data: ["产品数", "合格率"],
+        top: "3%",
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      xAxis: {
+        data: [
+          "01",
+          "02",
+          "03",
+          "04",
+        ],
+        axisLine: {
+          show: true, //隐藏X轴轴线
+          lineStyle: {
+            color: "#ffffff66",
+          },
+        },
+        axisTick: {
+          show: true, //隐藏X轴刻度
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#ffffff66", //X轴文字颜色
+          },
+        },
+      },
+      yAxis: [
+        {
+          type: "value",
+          name: "数量",
+          nameTextStyle: {
+            color: "#ffffff66",
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#ffffff66",
+            },
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#ffffff66",
+            },
+          },
+        },
+        {
+          type: "value",
+          name: "合格率",
+          nameTextStyle: {
+            color: "#ffffff66",
+          },
+          position: "right",
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            formatter: "{value} %", //右侧Y轴文字显示
+            textStyle: {
+              color: "#ffffff66",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "合格率",
+          type: "line",
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: '{c}%',
+              textStyle: {
+                color: "#a8aab0",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          },
+          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+          smooth: true, //平滑曲线显示
+          showAllSymbol: true, //显示所有图形。
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 5, //标记的大小
+          itemStyle: {
+            //折线拐点标志的样式
+            color: "#ffffff",
+          },
+          lineStyle: {
+            color: "#ffffff",
+          },
+          data: [94.2, 93.8, 94.8, 93.5],
+        },
+        {
+          name: "产品数",
+          type: "bar",
+          label: {
+            normal: {
+              show: true,
+              position: ['0%', '50%'],
+              textStyle: {
+                color: "#ffffff",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          },
+          barWidth: 15,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#45e9a7",
+                },
+                {
+                  offset: 1,
+                  color: "#35a075",
+                },
+              ]),
+            },
+          },
+          data: [4.2, 3.8, 4.8, 3.5],
+        },
+      ],
+    })
+    this.$refs.chart2.setData({
+      grid: {
+        top: "15%",
+        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          label: {
+            show: true,
+          },
+        },
+      },
+      legend: {
+        data: ["OQC抽检分数", "目标值"],
+        top: "3%",
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      xAxis: {
+        data: [
+          "01",
+          "02",
+          "03",
+          "04",
+        ],
+        axisLine: {
+          show: true, //隐藏X轴轴线
+          lineStyle: {
+            color: "#ffffff66",
+          },
+        },
+        axisTick: {
+          show: true, //隐藏X轴刻度
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#ffffff66", //X轴文字颜色
+          },
+        },
+      },
+      yAxis: [
+        {
+          type: "value",
+          name: "OQC抽检分数",
+          nameTextStyle: {
+            color: "#ffffff66",
+          },
+          position: "left",
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#ffffff66",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "OQC抽检分数",
+          type: "line",
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "#a8aab0",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          },
+          showAllSymbol: true, //显示所有图形。
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 5, //标记的大小
+          itemStyle: {
+            //折线拐点标志的样式
+            color: "#ffffff",
+          },
+          lineStyle: {
+            color: "#ffffff",
+          },
+          data: [94.6, 93.4, 94.7, 93.3],
+        },
+        {
+          name: "目标值",
+          type: "line",
+          label: {
+            normal: {
+              show: true,
+              position: "bottom",
+              textStyle: {
+                color: "#a8aab0",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          },
+          showAllSymbol: true, //显示所有图形。
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 5, //标记的大小
+          itemStyle: {
+            //折线拐点标志的样式
+            color: "#ffffff",
+          },
+          lineStyle: {
+            color: "#ffffff",
+          },
+          data: [94.7, 93.2, 94.7, 93.4],
+        },
+      ],
+    })
+    this.$refs.chart3.setData({
+      tooltip: {
+        trigger: "item",
+        formatter: "{a} <br/>{b} : {c} ({d}%)",
+      },
+      series: [
+        {
+          name: "",
+          type: "pie",
+          center: ["50%", "50%"],
+          data: [
+            {value: 335, name: "测温"},
+            {value: 310, name: "捡漏"},
+            {value: 234, name: "后板"},
+            {value: 135, name: "系统件"},
+          ],
+          itemStyle: {
+            normal: {
+              label: {
+                show: true,
+                formatter: "{b} : {c} ({d}%)",
+                color:'#fff'
+              },
+            },
+            labelLine: {show: true},
+          },
+        },
+      ],
+    })
+    this.$refs.chart4.setData({
+      grid: {
+        top: "15%",
+        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          label: {
+            show: true,
+          },
+        },
+      },
+      legend: {
+        data: ["占比"],
+        top: "3%",
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      xAxis: {
+        data: [
+          "测温",
+          "捡漏",
+          "后板",
+          "系统件",
+        ],
+        axisLine: {
+          show: true, //隐藏X轴轴线
+          lineStyle: {
+            color: "#ffffff66",
+          },
+        },
+        axisTick: {
+          show: true, //隐藏X轴刻度
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#ffffff66", //X轴文字颜色
+          },
+        },
+      },
+      yAxis: [
+        {
+          type: "value",
+          name: "缺陷占比",
+          nameTextStyle: {
+            color: "#ffffff66",
+          },
+          position: "left",
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#ffffff66",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "占比",
+          type: "line",
+          label: {
+            normal: {
+              show: true,
+              position: "bottom",
+              textStyle: {
+                color: "#a8aab0",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          },
+          showAllSymbol: true, //显示所有图形。
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 5, //标记的大小
+          itemStyle: {
+            //折线拐点标志的样式
+            color: "#ffffff",
+          },
+          lineStyle: {
+            color: "#ffffff",
+          },
+          data: [94.7, 93.2, 94.7, 93.4],
+        },
+      ],
+    })
+    this.$refs.chart5.setData({
+      grid: {
+        top: "15%",
+        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          label: {
+            show: true,
+          },
+        },
+      },
+      legend: {
+        data: ["质检次数", "合格率"],
+        top: "3%",
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      xAxis: {
+        data: [
+          "01",
+          "02",
+          "03",
+          "04",
+        ],
+        axisLine: {
+          show: true, //隐藏X轴轴线
+          lineStyle: {
+            color: "#ffffff66",
+          },
+        },
+        axisTick: {
+          show: true, //隐藏X轴刻度
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#ffffff66", //X轴文字颜色
+          },
+        },
+      },
+      yAxis: [
+        {
+          type: "value",
+          name: "数量",
+          nameTextStyle: {
+            color: "#ffffff66",
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#ffffff66",
+            },
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#ffffff66",
+            },
+          },
+        },
+        {
+          type: "value",
+          name: "合格率",
+          nameTextStyle: {
+            color: "#ffffff66",
+          },
+          position: "right",
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            formatter: "{value} %", //右侧Y轴文字显示
+            textStyle: {
+              color: "#ffffff66",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "合格率",
+          type: "line",
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: '{c}%',
+              textStyle: {
+                color: "#a8aab0",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          },
+          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+          smooth: true, //平滑曲线显示
+          showAllSymbol: true, //显示所有图形。
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 5, //标记的大小
+          itemStyle: {
+            //折线拐点标志的样式
+            color: "#ffffff",
+          },
+          lineStyle: {
+            color: "#ffffff",
+          },
+          data: [94.2, 93.8, 94.8, 93.5],
+        },
+        {
+          name: "质检次数",
+          type: "bar",
+          label: {
+            normal: {
+              show: true,
+              position: ['0%', '50%'],
+              textStyle: {
+                color: "#ffffff",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          },
+          barWidth: 15,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#96c4fc",
+                },
+                {
+                  offset: 1,
+                  color: "#32547d",
+                },
+              ]),
+            },
+          },
+          data: [4.2, 3.8, 4.8, 3.5],
+        },
+      ],
+    })
+    this.$refs.chart6.setData({
+      grid: {
+        top: "15%",
+        bottom: "10%", //也可设置left和right设置距离来控制图表的大小
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          label: {
+            show: true,
+          },
+        },
+      },
+      legend: {
+        data: ["当年市场不良率", "目标市场不良率"],
+        top: "3%",
+        textStyle: {
+          color: "#ffffff",
+        },
+      },
+      xAxis: {
+        data: [
+          "01",
+          "02",
+          "03",
+          "04",
+        ],
+        axisLine: {
+          show: true, //隐藏X轴轴线
+          lineStyle: {
+            color: "#ffffff66",
+          },
+        },
+        axisTick: {
+          show: true, //隐藏X轴刻度
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#ffffff66", //X轴文字颜色
+          },
+        },
+      },
+      yAxis: [
+        {
+          type: "value",
+          name: "当年市场不良率",
+          nameTextStyle: {
+            color: "#ffffff66",
+          },
+          position: "left",
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            formatter: '{value}%',
+            textStyle: {
+              color: "#ffffff66",
+            },
+          },
+        },
+      ],
+      series: [
+        {
+          name: "当年市场不良率",
+          type: "line",
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              formatter: '{c}%',
+              textStyle: {
+                color: "#a8aab0",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          },
+          showAllSymbol: true, //显示所有图形。
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 5, //标记的大小
+          itemStyle: {
+            //折线拐点标志的样式
+            color: "#45e9a7",
+          },
+          lineStyle: {
+            color: "#45e9a7",
+          },
+          data: [4.6, 3.4, 4.7, 3.3],
+        },
+        {
+          name: "目标市场不良率",
+          type: "line",
+          label: {
+            normal: {
+              show: true,
+              position: "bottom",
+              formatter: '{c}%',
+              textStyle: {
+                color: "#a8aab0",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          },
+          showAllSymbol: true, //显示所有图形。
+          symbol: "circle", //标记的图形为实心圆
+          symbolSize: 5, //标记的大小
+          itemStyle: {
+            //折线拐点标志的样式
+            color: "#ffffff",
+          },
+          lineStyle: {
+            color: "#ffffff",
+          },
+          data: [4.7, 3.2, 4.7, 3.4],
+        },
+      ],
+    })
+    this.$refs.chart11.setData({
+      tooltip: {
+        trigger: "item",
+        formatter: "{a} <br/>{b} : {c} ({d}%)",
+      },
+      series: [
+        {
+          name: "",
+          type: "pie",
+          center: ["50%", "50%"],
+          radius: ["85%", "100%"],
+          data: [
+            {value: 91.21, name: "合格率"},
+          ],
+          label: {
+            normal: {
+              rich: {
+                a: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 1.5 * vw,
+                  fontWeight: "bold",
+                },
+                b: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 0.8 * vw,
+                },
+              },
+              formatter: function (params) {
+                return (
+                  "{a|" +
+                  params.value +
+                  "%}" +
+                  "\n{b|" +
+                  params.name +
+                  "}"
+                );
+              },
+              position: "center",
+              show: true,
+              textStyle: {
+                fontSize: "14",
+                fontWeight: "normal",
+                color: "#fff",
+              },
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: "#fa2f5a",
+              label: {
+                show: false,
+                formatter: "{b} : {c} ({d}%)",
+                color: "#fff"
+              },
+            },
+            labelLine: {show: true},
+          },
+        },
+      ],
+    })
+    this.$refs.chart12.setData({
+      tooltip: {
+        trigger: "item",
+        formatter: "{a} <br/>{b} : {c} ({d}%)",
+      },
+      series: [
+        {
+          name: "",
+          type: "pie",
+          center: ["50%", "50%"],
+          radius: ["85%", "100%"],
+          data: [
+            {value: 99.65, name: "质量控制达标率"},
+          ],
+          label: {
+            normal: {
+              rich: {
+                a: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 1.5 * vw,
+                  fontWeight: "bold",
+                },
+                b: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 0.8 * vw,
+                },
+              },
+              formatter: function (params) {
+                return (
+                  "{a|" +
+                  params.value +
+                  "%}" +
+                  "\n{b|" +
+                  params.name +
+                  "}"
+                );
+              },
+              position: "center",
+              show: true,
+              textStyle: {
+                fontSize: "14",
+                fontWeight: "normal",
+                color: "#fff",
+              },
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: "#62aafe",
+              label: {
+                show: false,
+                formatter: "{b} : {c} ({d}%)",
+                color: "#fff"
+              },
+            },
+            labelLine: {show: true},
+          },
+        },
+      ],
+    })
+    this.$refs.chart13.setData({
+      tooltip: {
+        trigger: "item",
+        formatter: "{a} <br/>{b} : {c} ({d}%)",
+      },
+      series: [
+        {
+          name: "",
+          type: "pie",
+          center: ["50%", "50%"],
+          radius: ["85%", "100%"],
+          data: [
+            {value: 1.85, name: "当年市场不良率"},
+          ],
+          label: {
+            normal: {
+              rich: {
+                a: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 1.5 * vw,
+                  fontWeight: "bold",
+                },
+                b: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 0.8 * vw,
+                },
+              },
+              formatter: function (params) {
+                return (
+                  "{a|" +
+                  params.value +
+                  "%}" +
+                  "\n{b|" +
+                  params.name +
+                  "}"
+                );
+              },
+              position: "center",
+              show: true,
+              textStyle: {
+                fontSize: "14",
+                fontWeight: "normal",
+                color: "#fff",
+              },
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: "#2ffae0",
+              label: {
+                show: false,
+                formatter: "{b} : {c} ({d}%)",
+                color: "#fff"
+              },
+            },
+            labelLine: {show: true},
+          },
+        },
+      ],
+    })
+    this.$refs.chart14.setData({
+      tooltip: {
+        trigger: "item",
+        formatter: "{a} <br/>{b} : {c} ({d}%)",
+      },
+      series: [
+        {
+          name: "",
+          type: "pie",
+          center: ["50%", "50%"],
+          radius: ["85%", "100%"],
+          data: [
+            {value: 45.90, name: "OQC抽检分数"},
+          ],
+          label: {
+            normal: {
+              rich: {
+                a: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 1.5 * vw,
+                  fontWeight: "bold",
+                },
+                b: {
+                  color: "#fff",
+                  align: "center",
+                  fontSize: 0.8 * vw,
+                },
+              },
+              formatter: function (params) {
+                return (
+                  "{a|" +
+                  params.value +
+                  "}" +
+                  "\n{b|" +
+                  params.name +
+                  "}"
+                );
+              },
+              position: "center",
+              show: true,
+              textStyle: {
+                fontSize: "14",
+                fontWeight: "normal",
+                color: "#fff",
+              },
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: "#fae92f",
+            },
+            labelLine: {show: true},
+          },
+        },
+      ],
+    })
+  },
+  methods: {
+    exitFun() {
+      this.exit()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.app-container {
+  background-image: url("~@/assets/model/quality/bg.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-color: #021e31;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.exit {
+  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 1%;
+  right: 1%;
+  font-weight: bold;
+  width: 2vw;
+  height: 2vw;
+  color: #e7b219;
+}
+
+
+.headTitle {
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -100%);
+  font-size: 1.5vw;
+  color: #d6eaed;
+  letter-spacing: 10px;
+}
+
+.boxTitle {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 2vw;
+  line-height: 2vw;
+  background: linear-gradient(to right, #152049, #184680);
+  color: #fff;
+  font-size: 1vw;
+  text-align: center;
+}
+
+.box1 {
+  position: absolute;
+  top: 10%;
+  left: 2%;
+  width: 34%;
+  height: 43%;
+  border: 1px solid #123061;
+
+  .chart1 {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+}
+
+.box2 {
+  position: absolute;
+  top: 55%;
+  left: 2%;
+  width: 34%;
+  height: 41%;
+  border: 1px solid #123061;
+
+  .chart2 {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+}
+
+.box3 {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  width: 25%;
+  height: 25%;
+  border: 1px solid #123061;
+  transform: translateX(-50%);
+
+  .chart3 {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.box4 {
+  position: absolute;
+  top: 70%;
+  left: 50%;
+  width: 25%;
+  height: 25%;
+  border: 1px solid #123061;
+  transform: translateX(-50%);
+
+  .chart4 {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+}
+
+.box5 {
+  position: absolute;
+  top: 10%;
+  right: 2%;
+  width: 34%;
+  height: 43%;
+  border: 1px solid #123061;
+
+  .chart5 {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+}
+
+.box6 {
+  position: absolute;
+  top: 55%;
+  right: 2%;
+  width: 34%;
+  height: 41%;
+  border: 1px solid #123061;
+
+  .chart6 {
+    position: absolute;
+    top: 2vw;
+    width: 100%;
+    height: calc(100% - 2vw);
+  }
+}
+
+.chart11 {
+  position: absolute;
+  top: 17%;
+  left: 41%;
+  width: 9%;
+  height: 15%;
+  transform: translate(-50%, -50%);
+}
+
+.chart12 {
+  position: absolute;
+  top: 32%;
+  left: 46%;
+  width: 9%;
+  height: 15%;
+  transform: translate(-50%, -50%);
+}
+
+.chart13 {
+  position: absolute;
+  top: 32%;
+  left: 54%;
+  width: 9%;
+  height: 15%;
+  transform: translate(-50%, -50%);
+}
+
+.chart14 {
+  position: absolute;
+  top: 17%;
+  left: 59%;
+  width: 9%;
+  height: 15%;
+  transform: translate(-50%, -50%);
+}
+.centerTitle{
+  position: absolute;
+  top: 15%;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #fff;
+  font-size: 1.4vw;
+}
+</style>