diff --git a/src/assets/model/dataCentre/bg.png b/src/assets/model/dataCentre/bg.png
new file mode 100644
index 0000000..8059e69
Binary files /dev/null and b/src/assets/model/dataCentre/bg.png differ
diff --git a/src/assets/model/dataCentre/bg2.png b/src/assets/model/dataCentre/bg2.png
new file mode 100644
index 0000000..8aa4e5e
Binary files /dev/null and b/src/assets/model/dataCentre/bg2.png differ
diff --git a/src/assets/model/dataCentre/border.png b/src/assets/model/dataCentre/border.png
new file mode 100644
index 0000000..92d6ff2
Binary files /dev/null and b/src/assets/model/dataCentre/border.png differ
diff --git a/src/assets/model/dataCentre/border2.png b/src/assets/model/dataCentre/border2.png
new file mode 100644
index 0000000..d697251
Binary files /dev/null and b/src/assets/model/dataCentre/border2.png differ
diff --git a/src/assets/model/dataCentre/bottom.png b/src/assets/model/dataCentre/bottom.png
new file mode 100644
index 0000000..3c418fe
Binary files /dev/null and b/src/assets/model/dataCentre/bottom.png differ
diff --git a/src/assets/model/production/bg.png b/src/assets/model/production/bg.png
new file mode 100644
index 0000000..fac39da
Binary files /dev/null and b/src/assets/model/production/bg.png differ
diff --git a/src/views/model/dataCentre.vue b/src/views/model/dataCentre.vue
new file mode 100644
index 0000000..d8634e4
--- /dev/null
+++ b/src/views/model/dataCentre.vue
@@ -0,0 +1,1791 @@
+<template>
+  <div class="app-container">
+    <div class="exit" @click="exitFun"></div>
+
+    <div class="chart1">
+      <div class="title">订单执行分析</div>
+      <div class="border"></div>
+      <div class="chart11">
+        <Chart ref="chart11"></Chart>
+      </div>
+      <div class="chart12">
+        <Chart ref="chart12"></Chart>
+      </div>
+    </div>
+    <div class="chart2">
+      <div class="title">订单履约率</div>
+      <div class="border"></div>
+      <Chart ref="chart2"></Chart>
+    </div>
+    <div class="chart3">
+      <div class="title">准时交付率</div>
+      <div class="border"></div>
+      <Chart ref="chart3"></Chart>
+    </div>
+    <div class="chart4">
+      <div class="title"></div>
+      <div class="border"></div>
+      <div class="chart41">
+        <Chart ref="chart41"></Chart>
+      </div>
+      <div class="chart42">
+        <Chart ref="chart42"></Chart>
+      </div>
+      <div class="chart43">
+        <Chart ref="chart43"></Chart>
+      </div>
+    </div>
+    <div class="chart5">
+      <div class="title">质量分析</div>
+      <div class="border"></div>
+      <Chart ref="chart5"></Chart>
+    </div>
+    <div class="chart6">
+      <div class="title">当年市场不良率</div>
+      <div class="border"></div>
+      <Chart ref="chart6"></Chart>
+    </div>
+    <div class="chart7">
+      <div class="title">重点工序监控</div>
+      <div class="border"></div>
+      <Chart ref="chart7"></Chart>
+    </div>
+    <div class="bottom">
+      <div style="left: 20%">单台能耗</div>
+      <div style="left: 50%">设备状态</div>
+      <div style="left: 80%">产线OEE趋势</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chart from "@/components/board/Chart";
+
+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.chart11.setData({
+      tooltip: {
+        trigger: "item",
+      },
+      title: {
+        text: "3日完成订单",
+        left: "20%",
+        top: "10%",
+        textStyle: {
+          color: "#fff",
+          fontSize: 0.7 * vw,
+          align: "center",
+        },
+      },
+      series: [
+        {
+          name: "人员类型",
+          type: "pie",
+          center: ['42%', '60%'],
+          radius: ["23%", "35%"],
+          color: [
+            "#16ff39",
+            "#ffe716",
+          ],
+          labelLine: {
+            normal: {
+              show: true,
+              length: 0.3 * vw,
+              length2: 0.3 * vw,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          labelLayout: {
+            moveOverlap: 'shiftX'
+          },
+          label: {
+            normal: {
+              formatter: "{b}\n{c}",
+              fontSize: 0.7 * vw,
+              color: '#fff'
+            },
+          },
+          data: [
+            {
+              value: 30,
+              name: "已完成",
+            },
+            {
+              value: 70,
+              name: "未完成",
+            },
+          ],
+        },
+      ],
+    })
+    this.$refs.chart12.setData({
+      tooltip: {
+        trigger: "item",
+      },
+      title: {
+        text: "本月完成订单",
+        right: "20%",
+        top: "10%",
+        textStyle: {
+          color: "#fff",
+          fontSize: 0.7 * vw,
+          align: "center",
+        },
+      },
+      series: [
+        {
+          name: "人员类型",
+          type: "pie",
+          center: ['58%', '60%'],
+          radius: ["23%", "35%"],
+          color: [
+            "#16ff39",
+            "#ffe716",
+          ],
+          labelLine: {
+            normal: {
+              show: true,
+              length: 0.3 * vw,
+              length2: 0.3 * vw,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          labelLayout: {
+            moveOverlap: 'shiftX'
+          },
+          label: {
+            normal: {
+              formatter: "{b}\n{c}",
+              fontSize: 0.7 * vw,
+              color: '#fff'
+            },
+          },
+          data: [
+            {
+              value: 30,
+              name: "已完成",
+            },
+            {
+              value: 70,
+              name: "未完成",
+            },
+          ],
+        },
+      ],
+    })
+    this.$refs.chart2.setData({
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      grid: {
+        borderWidth: 0,
+        top: 1.5 * 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
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "日计划数",
+          type: "bar",
+          borderWidth: '15%',
+          itemStyle: {
+            normal: {
+              color: "#5ecee0",
+            },
+          },
+          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: "rgba(252,230,48,1)",
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: "top",
+                color: "#fff",
+                fontSize: 0.6 * vw,
+                formatter: function (p) {
+                  return (p.value > 0 ? p.value : "") + '%';
+                },
+              },
+            },
+          },
+          data: [
+            106, 111, 96, 65, 86, 126, 101, 94, 100
+          ],
+        },
+      ],
+    })
+    this.$refs.chart3.setData({
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      grid: {
+        borderWidth: 0,
+        top: 1.5 * 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
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "应完成订单",
+          type: "bar",
+          barWidth: '30%',
+          itemStyle: {
+            normal: {
+              color: "#5ecee0",
+              barBorderRadius: '50%',
+            },
+          },
+          data: [
+            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
+          ],
+        },
+
+        {
+          name: "实际完成订单",
+          type: "bar",
+          barWidth: '30%',
+          barGap: "-100%",
+          itemStyle: {
+            normal: {
+              color: "#78b4fe",
+              barBorderRadius: '50%',
+            },
+          },
+          data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001],
+        },
+        {
+          name: "准时交付率",
+          type: "line",
+          symbolSize: 10,
+          symbol: "circle",
+          yAxisIndex: 1,
+          itemStyle: {
+            normal: {
+              color: "#ebf2ff",
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: "top",
+                color: "#fff",
+                fontSize: 0.6 * vw,
+                formatter: function (p) {
+                  return (p.value > 0 ? p.value : "") + '%';
+                },
+              },
+            },
+          },
+          data: [
+            106, 111, 96, 65, 86, 126, 101, 94, 100
+          ],
+        },
+      ],
+    })
+    this.$refs.chart41.setData({
+      tooltip: {},
+      grid: {
+        top: "25%",
+        left: "5%",
+        right: "1%",
+        bottom: "8%",
+        containLabel: true,
+      },
+      legend: {
+        itemGap: 50,
+        top: "3%",
+        textStyle: {
+          fontSize: 0.6 * vw,
+          color: "#f9f9f9",
+          borderColor: "#fff",
+        },
+      },
+      xAxis: [
+        {
+          type: "category",
+          boundaryGap: true,
+          axisLine: {
+            //坐标轴轴线相关设置。数学上的x轴
+            show: true,
+            lineStyle: {
+              color: "#f9f9f9",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: "#d1e6eb",
+              margin: 15,
+              fontSize: 0.4 * vw,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+        },
+      ],
+      yAxis: [
+        {
+          name: '能耗/kw·h',
+          type: "value",
+          min: 0,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#0a3256",
+            },
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            margin: 5,
+            textStyle: {
+              color: "#d1e6eb",
+            },
+            fontSize: 0.4 * vw,
+            formatter: '{value}%'
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "能耗",
+          type: "line",
+          // smooth: true, //是否平滑曲线显示
+          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+          showAllSymbol: true,
+          symbol: "emptyCircle",
+          symbolSize: 6,
+          lineStyle: {
+            normal: {
+              color: "#4268aa", // 线条颜色
+            },
+            borderColor: "#ecf3ff",
+          },
+          label: {
+            show: true,
+            position: "top",
+            fontSize: 0.4 * vw,
+            textStyle: {
+              color: "#fff",
+            },
+            formatter: '{c}kw·h'
+          },
+          itemStyle: {
+            normal: {
+              color: "#28ffb3",
+            },
+          },
+          tooltip: {
+            show: false,
+          },
+          data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
+        },
+      ],
+    })
+    this.$refs.chart42.setData({
+      series: [
+        {
+          name: "第一个圆环",
+          type: "pie",
+          clockWise: false,
+          radius: ['35%', '40%'],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              shadowBlur: 0,
+              shadowColor: "#203665",
+            },
+          },
+          hoverAnimation: false,
+          center: ["20%", "50%"],
+          data: [
+            {
+              value: 25,
+              label: {
+                normal: {
+                  rich: {
+                    a: {
+                      color: "#3a7ad5",
+                      align: "center",
+                      fontSize: 1.1 * vw,
+                      fontWeight: "bold",
+                    },
+                    b: {
+                      color: "#fff",
+                      align: "center",
+                      fontSize: 0.6 * vw,
+                    },
+                  },
+                  formatter: function (params) {
+                    return (
+                      "{a|" +
+                      params.value +
+                      "}" +
+                      "\n{b|设备总数}"
+                    );
+                  },
+                  position: "center",
+                  show: true,
+                  textStyle: {
+                    fontSize: "14",
+                    fontWeight: "normal",
+                    color: "#fff",
+                  },
+                },
+              },
+              itemStyle: {
+                normal: {
+                  color: "#2c6cc4",
+                  shadowColor: "#2c6cc4",
+                  shadowBlur: 0,
+                },
+              },
+            },
+            {
+              value: 75,
+              name: "invisible",
+              itemStyle: {
+                normal: {
+                  color: "#24375c",
+                },
+                emphasis: {
+                  color: "#24375c",
+                },
+              },
+            },
+          ],
+        },
+        {
+          name: "第二个圆环",
+          type: "pie",
+          clockWise: false,
+          radius: ['35%', '40%'],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              shadowBlur: 0,
+              shadowColor: "#203665",
+            },
+          },
+          hoverAnimation: false,
+          center: ["50%", "50%"],
+          data: [
+            {
+              value: 50,
+              label: {
+                normal: {
+                  rich: {
+                    a: {
+                      color: "#d03e93",
+                      align: "center",
+                      fontSize: 1.1 * vw,
+                      fontWeight: "bold",
+                    },
+                    b: {
+                      color: "#fff",
+                      align: "center",
+                      fontSize: 0.5 * vw,
+                    },
+                  },
+                  formatter: function (params) {
+                    return (
+                      "{a|" +
+                      params.value +
+                      "}" +
+                      "\n{b|在网设备数}"
+                    );
+                  },
+                  position: "center",
+                  show: true,
+                  textStyle: {
+                    fontSize: "14",
+                    fontWeight: "normal",
+                    color: "#fff",
+                  },
+                },
+              },
+              itemStyle: {
+                normal: {
+                  color: "#ef45ac",
+                  shadowColor: "#ef45ac",
+                  shadowBlur: 0,
+                },
+              },
+            },
+            {
+              value: 50,
+              name: "invisible",
+              itemStyle: {
+                normal: {
+                  color: "#412a4e",
+                },
+                emphasis: {
+                  color: "#412a4e",
+                },
+              },
+            },
+          ],
+        },
+        {
+          name: "第三个圆环",
+          type: "pie",
+          clockWise: false,
+          radius: ['35%', '40%'],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              shadowBlur: 0,
+              shadowColor: "#203665",
+            },
+          },
+          hoverAnimation: false,
+          center: ["80%", "50%"],
+          data: [
+            {
+              value: 75,
+              label: {
+                normal: {
+                  rich: {
+                    a: {
+                      color: "#603dd0",
+                      align: "center",
+                      fontSize: 1.1 * vw,
+                      fontWeight: "bold",
+                    },
+                    b: {
+                      color: "#fff",
+                      align: "center",
+                      fontSize: 0.5 * vw,
+                    },
+                  },
+                  formatter: function (params) {
+                    return (
+                      "{a|" +
+                      params.value +
+                      "}" +
+                      "\n{b|离线设备数}"
+                    );
+                  },
+                  position: "center",
+                  show: true,
+                  textStyle: {
+                    fontSize: "14",
+                    fontWeight: "normal",
+                    color: "#fff",
+                  },
+                },
+              },
+              itemStyle: {
+                normal: {
+                  color: "#613fd1",
+                  shadowColor: "#613fd1",
+                  shadowBlur: 0,
+                },
+              },
+            },
+            {
+              value: 25,
+              name: "invisible",
+              itemStyle: {
+                normal: {
+                  color: "#453284",
+                },
+                emphasis: {
+                  color: "#453284",
+                },
+              },
+            },
+          ],
+        },
+      ],
+    })
+    this.$refs.chart43.setData({
+      tooltip: {},
+      grid: {
+        top: "25%",
+        left: "5%",
+        right: "1%",
+        bottom: "8%",
+        containLabel: true,
+      },
+      legend: {
+        itemGap: 0,
+        top: "3%",
+        textStyle: {
+          fontSize: 0.6 * vw,
+          color: "#f9f9f9",
+          borderColor: "#fff",
+        },
+      },
+      xAxis: [
+        {
+          type: "category",
+          boundaryGap: true,
+          axisLine: {
+            //坐标轴轴线相关设置。数学上的x轴
+            show: true,
+            lineStyle: {
+              color: "#f9f9f9",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: "#d1e6eb",
+              margin: 15,
+              fontSize: 0.4 * vw,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+        },
+      ],
+      yAxis: [
+        {
+          name: 'OEE',
+          type: "value",
+          min: 0,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#0a3256",
+            },
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            margin: 5,
+            textStyle: {
+              color: "#d1e6eb",
+            },
+            fontSize: 0.4 * vw,
+            formatter: '{value}%'
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "一期",
+          type: "line",
+          // smooth: true, //是否平滑曲线显示
+          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+          showAllSymbol: true,
+          symbol: "emptyCircle",
+          symbolSize: 6,
+          lineStyle: {
+            normal: {
+              color: "#e8f1ff", // 线条颜色
+            },
+            borderColor: "#28ffb3",
+          },
+          itemStyle: {
+            normal: {
+              color: "#28ffb3",
+            },
+          },
+          tooltip: {
+            show: false,
+          },
+          data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
+        },
+        {
+          name: "二期",
+          type: "line",
+          // smooth: true, //是否平滑曲线显示
+          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+          showAllSymbol: true,
+          symbol: "emptyCircle",
+          symbolSize: 6,
+          lineStyle: {
+            normal: {
+              color: "#4268aa", // 线条颜色
+            },
+            borderColor: "#ecf3ff",
+          },
+          itemStyle: {
+            normal: {
+              color: "#28ffb3",
+            },
+          },
+          tooltip: {
+            show: false,
+          },
+          data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
+        },
+      ],
+    })
+    this.$refs.chart5.setData({
+      series: [
+        {
+          name: "第一个圆环",
+          type: "pie",
+          clockWise: false,
+          radius: ['40%', '45%'],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              shadowBlur: 0,
+              shadowColor: "#203665",
+            },
+          },
+          hoverAnimation: false,
+          center: ["20%", "50%"],
+          data: [
+            {
+              value: 25,
+              label: {
+                normal: {
+                  rich: {
+                    a: {
+                      color: "#3a7ad5",
+                      align: "center",
+                      fontSize: 1.1 * vw,
+                      fontWeight: "bold",
+                    },
+                    b: {
+                      color: "#fff",
+                      align: "center",
+                      fontSize: 0.6 * vw,
+                    },
+                  },
+                  formatter: function (params) {
+                    return (
+                      "{a|" +
+                      params.value +
+                      "}" +
+                      "\n{b|合格率}"
+                    );
+                  },
+                  position: "center",
+                  show: true,
+                  textStyle: {
+                    fontSize: "14",
+                    fontWeight: "normal",
+                    color: "#fff",
+                  },
+                },
+              },
+              itemStyle: {
+                normal: {
+                  color: "#2c6cc4",
+                  shadowColor: "#2c6cc4",
+                  shadowBlur: 0,
+                },
+              },
+            },
+            {
+              value: 75,
+              name: "invisible",
+              itemStyle: {
+                normal: {
+                  color: "#24375c",
+                },
+                emphasis: {
+                  color: "#24375c",
+                },
+              },
+            },
+          ],
+        },
+        {
+          name: "第二个圆环",
+          type: "pie",
+          clockWise: false,
+          radius: ['40%', '45%'],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              shadowBlur: 0,
+              shadowColor: "#203665",
+            },
+          },
+          hoverAnimation: false,
+          center: ["50%", "50%"],
+          data: [
+            {
+              value: 50,
+              label: {
+                normal: {
+                  rich: {
+                    a: {
+                      color: "#d03e93",
+                      align: "center",
+                      fontSize: 1.1 * vw,
+                      fontWeight: "bold",
+                    },
+                    b: {
+                      color: "#fff",
+                      align: "center",
+                      fontSize: 0.5 * vw,
+                    },
+                  },
+                  formatter: function (params) {
+                    return (
+                      "{a|" +
+                      params.value +
+                      "}" +
+                      "\n{b|OQC抽检分数}"
+                    );
+                  },
+                  position: "center",
+                  show: true,
+                  textStyle: {
+                    fontSize: "14",
+                    fontWeight: "normal",
+                    color: "#fff",
+                  },
+                },
+              },
+              itemStyle: {
+                normal: {
+                  color: "#ef45ac",
+                  shadowColor: "#ef45ac",
+                  shadowBlur: 0,
+                },
+              },
+            },
+            {
+              value: 50,
+              name: "invisible",
+              itemStyle: {
+                normal: {
+                  color: "#412a4e",
+                },
+                emphasis: {
+                  color: "#412a4e",
+                },
+              },
+            },
+          ],
+        },
+        {
+          name: "第三个圆环",
+          type: "pie",
+          clockWise: false,
+          radius: ['40%', '45%'],
+          itemStyle: {
+            normal: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              shadowBlur: 0,
+              shadowColor: "#203665",
+            },
+          },
+          hoverAnimation: false,
+          center: ["80%", "50%"],
+          data: [
+            {
+              value: 75,
+              label: {
+                normal: {
+                  rich: {
+                    a: {
+                      color: "#603dd0",
+                      align: "center",
+                      fontSize: 1.1 * vw,
+                      fontWeight: "bold",
+                    },
+                    b: {
+                      color: "#fff",
+                      align: "center",
+                      fontSize: 0.5 * vw,
+                    },
+                  },
+                  formatter: function (params) {
+                    return (
+                      "{a|" +
+                      params.value +
+                      "}" +
+                      "\n{b|质量控制达标率}"
+                    );
+                  },
+                  position: "center",
+                  show: true,
+                  textStyle: {
+                    fontSize: "14",
+                    fontWeight: "normal",
+                    color: "#fff",
+                  },
+                },
+              },
+              itemStyle: {
+                normal: {
+                  color: "#613fd1",
+                  shadowColor: "#613fd1",
+                  shadowBlur: 0,
+                },
+              },
+            },
+            {
+              value: 25,
+              name: "invisible",
+              itemStyle: {
+                normal: {
+                  color: "#453284",
+                },
+                emphasis: {
+                  color: "#453284",
+                },
+              },
+            },
+          ],
+        },
+      ],
+    })
+    this.$refs.chart6.setData({
+      tooltip: {},
+      grid: {
+        top: "25%",
+        left: "5%",
+        right: "1%",
+        bottom: "8%",
+        containLabel: true,
+      },
+      legend: {
+        itemGap: 50,
+        top: "3%",
+        textStyle: {
+          fontSize: 0.6 * vw,
+          color: "#f9f9f9",
+          borderColor: "#fff",
+        },
+      },
+      xAxis: [
+        {
+          type: "category",
+          boundaryGap: true,
+          axisLine: {
+            //坐标轴轴线相关设置。数学上的x轴
+            show: true,
+            lineStyle: {
+              color: "#f9f9f9",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: "#d1e6eb",
+              margin: 15,
+              fontSize: 0.4 * vw,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+        },
+      ],
+      yAxis: [
+        {
+          name: '不良率',
+          type: "value",
+          min: 0,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#0a3256",
+            },
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            margin: 5,
+            textStyle: {
+              color: "#d1e6eb",
+            },
+            fontSize: 0.4 * vw,
+            formatter: '{value}%'
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "当年市场不良率",
+          type: "line",
+          // smooth: true, //是否平滑曲线显示
+          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+          showAllSymbol: true,
+          symbol: "emptyCircle",
+          symbolSize: 6,
+          lineStyle: {
+            normal: {
+              color: "#e8f1ff", // 线条颜色
+            },
+            borderColor: "#28ffb3",
+          },
+          label: {
+            show: true,
+            position: "bottom",
+            fontSize: 0.4 * vw,
+            textStyle: {
+              color: "#fff",
+            },
+            formatter: '{c}%'
+          },
+          itemStyle: {
+            normal: {
+              color: "#28ffb3",
+            },
+          },
+          tooltip: {
+            show: false,
+          },
+          data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
+        },
+        {
+          name: "目标市场不良率",
+          type: "line",
+          // smooth: true, //是否平滑曲线显示
+          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+          showAllSymbol: true,
+          symbol: "emptyCircle",
+          symbolSize: 6,
+          lineStyle: {
+            normal: {
+              color: "#4268aa", // 线条颜色
+            },
+            borderColor: "#ecf3ff",
+          },
+          label: {
+            show: true,
+            position: "top",
+            fontSize: 0.4 * vw,
+            textStyle: {
+              color: "#fff",
+            },
+            formatter: '{c}%'
+          },
+          itemStyle: {
+            normal: {
+              color: "#28ffb3",
+            },
+          },
+          tooltip: {
+            show: false,
+          },
+          data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
+        },
+      ],
+    })
+    this.$refs.chart7.setData({
+      tooltip: {},
+      grid: {
+        top: "25%",
+        left: "5%",
+        right: "5%",
+        bottom: "8%",
+        containLabel: true,
+      },
+      legend: {
+        itemGap: 50,
+        top: "2%",
+        textStyle: {
+          color: "#f9f9f9",
+          borderColor: "#fff",
+        },
+      },
+      xAxis: [
+        {
+          type: "category",
+          boundaryGap: true,
+          axisLine: {
+            //坐标轴轴线相关设置。数学上的x轴
+            show: true,
+            lineStyle: {
+              color: "#f9f9f9",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: "#d1e6eb",
+              margin: 15,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+        },
+      ],
+      yAxis: [
+        {
+          type: "value",
+          min: 0,
+          // max: 140,
+          splitNumber: 7,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#0a3256",
+            },
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            margin: 5,
+            textStyle: {
+              fontSize: 0.5 * vw,
+              color: "#d1e6eb",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        {
+          type: "value",
+          min: 0,
+          // max: 140,
+          splitNumber: 7,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#0a3256",
+            },
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            margin: 5,
+            textStyle: {
+              fontSize: 0.5 * vw,
+              color: "#d1e6eb",
+            },
+            formatter: '{value}%'
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "质检次数",
+          type: "bar",
+          barWidth: 20,
+          tooltip: {
+            show: false,
+          },
+          label: {
+            show: true,
+            position: "top",
+            textStyle: {
+              fontSize: 0.5 * vw,
+              color: "#fff",
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: '#72b3fe'
+            },
+          },
+          data: [200, 382, 102, 267, 186, 315, 316],
+        },
+        {
+          name: "合格率",
+          type: "line",
+          yAxisIndex: 1,
+          // smooth: true, //是否平滑曲线显示
+          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+          showAllSymbol: true,
+          symbol: "emptyCircle",
+          symbolSize: 6,
+          lineStyle: {
+            normal: {
+              color: "#ecf3ff", // 线条颜色
+            },
+            borderColor: "#6d88bf",
+          },
+          label: {
+            show: true,
+            position: "top",
+            textStyle: {
+              fontSize: 0.5 * vw,
+              color: "#fff",
+            },
+            formatter: '{c}%'
+          },
+          itemStyle: {
+            normal: {
+              color: "#28ffb3",
+            },
+          },
+          tooltip: {
+            show: false,
+          },
+          data: [96.74, 96.68, 98.76, 99.75, 98.58, 98.57, 98.43],
+        },
+      ],
+    })
+  },
+  methods: {
+    exitFun() {
+      this.exit()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.app-container {
+  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;
+}
+
+.chart1 {
+  content: "";
+  background-image: url("~@/assets/model/dataCentre/bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 10%;
+  left: 5%;
+  width: 18%;
+  height: 11.1vw;
+
+  .border {
+    content: "";
+    background-image: url("~@/assets/model/dataCentre/border.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .title {
+    position: absolute;
+    top: -2vw;
+    color: #fff;
+    font-size: 1vw;
+    border-left: 3px solid #0251d1;
+    padding-left: 12px;
+  }
+
+  .chart11 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 70%;
+    height: 100%;
+  }
+
+  .chart12 {
+    position: absolute;
+    top: 0;
+    left: 30%;
+    width: 70%;
+    height: 100%;
+  }
+}
+
+.chart2 {
+  background-image: url("~@/assets/model/dataCentre/bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 40%;
+  left: 5%;
+  width: 18%;
+  height: 11.1vw;
+
+  .border {
+    content: "";
+    background-image: url("~@/assets/model/dataCentre/border.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .title {
+    position: absolute;
+    top: -2vw;
+    color: #fff;
+    font-size: 1vw;
+    border-left: 3px solid #0251d1;
+    padding-left: 12px;
+  }
+}
+
+.chart3 {
+  background-image: url("~@/assets/model/dataCentre/bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 70%;
+  left: 5%;
+  width: 18%;
+  height: 11.1vw;
+
+  .border {
+    content: "";
+    background-image: url("~@/assets/model/dataCentre/border.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .title {
+    position: absolute;
+    top: -2vw;
+    color: #fff;
+    font-size: 1vw;
+    border-left: 3px solid #0251d1;
+    padding-left: 12px;
+  }
+}
+
+.chart4 {
+  background-image: url("~@/assets/model/dataCentre/bg2.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  transform: translateX(-50%);
+  top: 70%;
+  left: 50%;
+  width: 45%;
+  height: 11.1vw;
+
+  .border {
+    content: "";
+    background-image: url("~@/assets/model/dataCentre/border2.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .chart41 {
+    position: absolute;
+    top: 14%;
+    left: 3%;
+    width: 28%;
+    height: 80%;
+    border: 1px solid #fff9;
+  }
+
+  .chart42 {
+    position: absolute;
+    top: 14%;
+    left: 50%;
+    width: 28%;
+    height: 80%;
+    border: 1px solid #fff9;
+    transform: translateX(-50%);
+  }
+
+  .chart43 {
+    position: absolute;
+    top: 14%;
+    right: 3%;
+    width: 28%;
+    height: 80%;
+    border: 1px solid #fff9;
+  }
+}
+
+.chart5 {
+  background-image: url("~@/assets/model/dataCentre/bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 10%;
+  right: 5%;
+  width: 18%;
+  height: 11.1vw;
+
+  .border {
+    content: "";
+    background-image: url("~@/assets/model/dataCentre/border.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .title {
+    position: absolute;
+    top: -2vw;
+    color: #fff;
+    font-size: 1vw;
+    border-left: 3px solid #0251d1;
+    padding-left: 12px;
+  }
+}
+
+.chart6 {
+  background-image: url("~@/assets/model/dataCentre/bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 40%;
+  right: 5%;
+  width: 18%;
+  height: 11.1vw;
+
+  .border {
+    content: "";
+    background-image: url("~@/assets/model/dataCentre/border.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .title {
+    position: absolute;
+    top: -2vw;
+    color: #fff;
+    font-size: 1vw;
+    border-left: 3px solid #0251d1;
+    padding-left: 12px;
+  }
+}
+
+.chart7 {
+  background-image: url("~@/assets/model/dataCentre/bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 70%;
+  right: 5%;
+  width: 18%;
+  height: 11.1vw;
+
+  .border {
+    content: "";
+    background-image: url("~@/assets/model/dataCentre/border.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .title {
+    position: absolute;
+    top: -2vw;
+    color: #fff;
+    font-size: 1vw;
+    border-left: 3px solid #0251d1;
+    padding-left: 12px;
+  }
+}
+
+.bottom {
+  background-image: url("~@/assets/model/dataCentre/bottom.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 67%;
+  left: 50%;
+  width: 27%;
+  height: 1.4vw;
+  transform: translateX(-50%);
+
+  div {
+    position: absolute;
+    font-size: 0.6vw;
+    line-height: 1.4vw;
+    color: #fff;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/src/views/model/model.vue b/src/views/model/model.vue
index eee00f7..de47cba 100644
--- a/src/views/model/model.vue
+++ b/src/views/model/model.vue
@@ -16,7 +16,7 @@
           </div>
         </el-col>
         <el-col :span="3">
-          <div class="toolItem" @click="click1('数据中心')">
+          <div class="toolItem" @click="click1('dataCentre')">
             <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
             <div class="grid-content bg-purple">数据中心</div>
           </div>
@@ -34,7 +34,7 @@
           </div>
         </el-col>
         <el-col :span="3">
-          <div class="toolItem" @click="click1('生产')">
+          <div class="toolItem" @click="click1('production')">
             <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
             <div class="grid-content bg-purple">生产</div>
           </div>
@@ -60,12 +60,20 @@
     <transition name="children">
       <product-distribution :exit="exit" v-if="show === 'productDistribution'"/>
     </transition>
+    <transition name="children">
+      <data-centre :exit="exit" v-if="show === 'dataCentre'"/>
+    </transition>
+    <transition name="children">
+      <production :exit="exit" v-if="show === 'production'"/>
+    </transition>
   </div>
 </template>
 
 <script>
 import factoryIntroduction from './factoryIntroduction'
 import productDistribution from './productDistribution'
+import dataCentre from './dataCentre'
+import production from './production'
 
 const isAMRT = () => {
   return new Promise((resolve, reject) => {
@@ -84,7 +92,9 @@ export default {
   name: "Model",
   components: {
     factoryIntroduction,
-    productDistribution
+    productDistribution,
+    dataCentre,
+    production
   },
   data() {
     return {
@@ -102,21 +112,21 @@ export default {
     console.log(AMRT)
     let num = 0
     let modelArr = [
-      // '1720315475507941376',
-      // '1720315479907766272',
-      // '1720315484513112064',
-      // '1720315500866703360',
-      // '1720315558030872576',
-      // '1720315596551360512',
-      // '1720315644550975488',
-      // '1720315648946606080',
-      // '1720315687114772480',
-      // '1720315691422322688',
-      // '1720315722275622912',
-      // '1720315729129115648',
-      // '1720315768454909952',
-      // '1720316275214913536',
-      // '1720316297822212096',
+      '1720315475507941376',
+      '1720315479907766272',
+      '1720315484513112064',
+      '1720315500866703360',
+      '1720315558030872576',
+      '1720315596551360512',
+      '1720315644550975488',
+      '1720315648946606080',
+      '1720315687114772480',
+      '1720315691422322688',
+      '1720315722275622912',
+      '1720315729129115648',
+      '1720315768454909952',
+      '1720316275214913536',
+      '1720316297822212096',
     ]
     modelArr.forEach(e => {
       let model = viewer.loadModel(e, {
@@ -150,7 +160,7 @@ export default {
     click1(e) {
       this.show = e
     },
-    exit(){
+    exit() {
       this.show = ''
     }
   }
diff --git a/src/views/model/production.vue b/src/views/model/production.vue
new file mode 100644
index 0000000..ac97ac1
--- /dev/null
+++ b/src/views/model/production.vue
@@ -0,0 +1,512 @@
+<template>
+  <div class="app-container">
+    <div class="exit" @click="exitFun"></div>
+
+    <div class="chart1">
+      <Chart ref="chart1"></Chart>
+    </div>
+    <div class="chart2">
+      <Chart ref="chart2"></Chart>
+    </div>
+    <div class="chart3">
+      <Chart ref="chart3"></Chart>
+    </div>
+    <div class="chart4">
+      <Chart ref="chart4"></Chart>
+    </div>
+    <div class="chart5">
+      <Chart ref="chart5"></Chart>
+    </div>
+    <div class="chart6">
+      <Chart ref="chart6"></Chart>
+    </div>
+    <div class="chart7">
+      <Chart ref="chart7"></Chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chart from "@/components/board/Chart";
+
+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({
+      title: {
+        text: "3日完成订单",
+        left: "center",
+        top: "5%",
+        textStyle: {
+          color: "#fff",
+          fontSize: 0.7 * vw,
+          align: "center",
+        },
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      grid: {
+        borderWidth: 0,
+        top: '20%',
+        bottom: 1.5 * vw,
+        left: 2.5 * vw,
+        right: 2.5 * vw,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      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: true,
+            lineStyle: {
+              color: "#90979c33",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "应完成订单",
+          type: "bar",
+          barWidth: '30%',
+          itemStyle: {
+            normal: {
+              color: "#5ecee0",
+              barBorderRadius: '50%',
+            },
+          },
+          data: [
+            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
+          ],
+        },
+      ],
+    })
+    this.$refs.chart4.setData({
+      title: {
+        text: "7日内合格率",
+        left: "center",
+        top: "5%",
+        textStyle: {
+          color: "#fff",
+          fontSize: 0.7 * vw,
+          align: "center",
+        },
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      grid: {
+        borderWidth: 0,
+        top: '20%',
+        bottom: 1.5 * vw,
+        left: 2.5 * vw,
+        right: 2.5 * vw,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      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: true,
+            lineStyle: {
+              color: "#90979c44",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#90979c",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0,
+            fontSize: 0.5 * vw,
+            formatter:'{value}%'
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "总数",
+          type: "line",
+          symbolSize: 10,
+          symbol: "circle",
+          itemStyle: {
+            normal: {
+              color: "rgba(252,230,48,1)",
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: "top",
+                color: "#fff",
+                fontSize: 0.6 * vw,
+                formatter: function (p) {
+                  return (p.value > 0 ? p.value : "") + '%';
+                },
+              },
+            },
+          },
+          data: [
+            106, 111, 96, 65, 86, 126, 101, 94, 100
+          ],
+        },
+      ],
+    })
+    this.$refs.chart5.setData({
+      title: {
+        text: "订单履约率",
+        left: "center",
+        top: "5%",
+        textStyle: {
+          color: "#fff",
+          fontSize: 0.7 * vw,
+          align: "center",
+        },
+      },
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+      grid: {
+        borderWidth: 0,
+        top: '20%',
+        bottom: 1.5 * vw,
+        left: 2.5 * vw,
+        right: 2.5 * vw,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      legend: {
+        x: "center",
+        top: "12%",
+        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
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: "日计划数",
+          type: "bar",
+          borderWidth: '15%',
+          itemStyle: {
+            normal: {
+              color: "#5ecee0",
+            },
+          },
+          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: "rgba(252,230,48,1)",
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: "top",
+                color: "#fff",
+                fontSize: 0.6 * vw,
+                formatter: function (p) {
+                  return (p.value > 0 ? p.value : "") + '%';
+                },
+              },
+            },
+          },
+          data: [
+            106, 111, 96, 65, 86, 126, 101, 94, 100
+          ],
+        },
+      ],
+    })
+  },
+  methods: {
+    exitFun() {
+      this.exit()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.app-container {
+  background-image: url("~@/assets/model/production/bg.png");
+  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;
+}
+
+.chart1 {
+  position: absolute;
+  top: 10%;
+  left: 1.3%;
+  width: 25%;
+  height: 43%;
+  background-color: #0b184f;
+}
+
+.chart2 {
+  position: absolute;
+  top: 10%;
+  left: 27.6%;
+  width: 45%;
+  height: 21%;
+  background-color: #0b184f;
+}
+
+.chart3 {
+  position: absolute;
+  top: 32%;
+  left: 27.6%;
+  width: 45%;
+  height: 21%;
+  background-color: #0b184f;
+}
+
+.chart4 {
+  position: absolute;
+  top: 10%;
+  left: 73.9%;
+  width: 25%;
+  height: 43%;
+  background-color: #0b184f;
+}
+
+.chart5 {
+  position: absolute;
+  top: 54.5%;
+  left: 1.3%;
+  width: 25%;
+  height: 43%;
+  background-color: #0b184f;
+}
+
+.chart6 {
+  position: absolute;
+  top: 54.5%;
+  left: 27.6%;
+  width: 45%;
+  height: 43%;
+  background-color: #0b184f;
+}
+
+.chart7 {
+  position: absolute;
+  top: 54.5%;
+  left: 73.9%;
+  width: 25%;
+  height: 43%;
+  background-color: #0b184f;
+}
+</style>