diff --git a/src/assets/images/biaotixiugai.png b/src/assets/images/biaotixiugai.png
new file mode 100644
index 0000000..01fe571
Binary files /dev/null and b/src/assets/images/biaotixiugai.png differ
diff --git a/src/assets/images/return.png b/src/assets/images/return.png
new file mode 100644
index 0000000..5ebfb56
Binary files /dev/null and b/src/assets/images/return.png differ
diff --git a/src/assets/images/zhubeijing.png b/src/assets/images/zhubeijing.png
new file mode 100644
index 0000000..7a19dce
Binary files /dev/null and b/src/assets/images/zhubeijing.png differ
diff --git a/src/views/mes/dv/largeScreen/components/AGVrate.vue b/src/views/mes/dv/largeScreen/components/AGVrate.vue
new file mode 100644
index 0000000..8b680e2
--- /dev/null
+++ b/src/views/mes/dv/largeScreen/components/AGVrate.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="app-container">
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div id="AGVrate" style="width: 100%; height: 150px"></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  components: { echarts, Treeselect },
+  props: ["message"], // 声明一个自定义的属性
+  data() {
+    return {
+      echartData: [],
+    };
+  },
+  watch: {
+    message: {
+      immediate: true,
+      handler(val) {
+        //  console.log(val,'差点撒旦阿萨=============');
+        this.echartData = val;
+        //  val.forEach((item) => {
+        //   this.getDataNum.push(Number(item.ytdUvNew))
+        //   this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
+        // })
+        this.$nextTick(() => {
+          //这里需要重新加载渲染
+          this.drawLine();
+        });
+      },
+    },
+  },
+
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById("AGVrate"));
+
+      let value = "10%";
+      let title = "设备在线率";
+      var option = {
+        title: [
+          {
+            text: "{a|" + value + "}\n{c|" + title + "}",
+            x: "center",
+            top: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: 15,
+                  color: "#ffffff",
+                },
+                c: {
+                  fontSize: 10,
+                  color: "#ffffff",
+                  padding: [5, 0],
+                },
+              },
+            },
+          },
+        ],
+        // backgroundColor: "#111",
+        polar: {
+          radius: ["70%", "95%"],
+          center: ["50%", "50%"],
+        },
+        angleAxis: {
+          max: 100,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "bar",
+            roundCap: true,
+            barWidth: 90,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(66, 66, 66, .3)",
+            },
+            data: [10],
+            coordinateSystem: "polar",
+
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#717171",
+                  },
+                  {
+                    offset: 1,
+                    color: "#717171",
+                  },
+                ]),
+              },
+            },
+          },
+          // {
+          //     name: '',
+          //     type: 'pie',
+          //     startAngle: 80,
+          //     radius: ['6%'],
+          //     hoverAnimation: false,
+          //     center: ['50%', '50%'],
+          //     itemStyle: {
+          //         color: 'rgba(66, 66, 66, .1)',
+          //         borderWidth: 1,
+          //         borderColor: '#5269EE',
+          //     },
+          //     data: [100],
+          // },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 80,
+            radius: ["100%"],
+            hoverAnimation: false,
+            center: ["50%", "50%"],
+            itemStyle: {
+              color: "rgba(66, 66, 66, .1)",
+              borderWidth: 1,
+              borderColor: "#5269EE",
+            },
+            data: [100],
+          },
+        ],
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0px !important;
+  min-height: calc(0vh - 0px) !important;
+}
+</style>
diff --git a/src/views/mes/dv/largeScreen/components/fault.vue b/src/views/mes/dv/largeScreen/components/fault.vue
new file mode 100644
index 0000000..b2c82ed
--- /dev/null
+++ b/src/views/mes/dv/largeScreen/components/fault.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="app-container">
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div id="fault" style="width: 100%; height: 70px"></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  components: { echarts, Treeselect },
+  props: ["message"], // 声明一个自定义的属性
+  data() {
+    return {
+      echartData: [],
+    };
+  },
+  watch: {
+    message: {
+      immediate: true,
+      handler(val) {
+        //  console.log(val,'差点撒旦阿萨=============');
+        this.echartData = val;
+        //  val.forEach((item) => {
+        //   this.getDataNum.push(Number(item.ytdUvNew))
+        //   this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
+        // })
+        this.$nextTick(() => {
+          //这里需要重新加载渲染
+          this.drawLine();
+        });
+      },
+    },
+  },
+
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById("fault"));
+
+      var option = {
+        title: [
+          {
+            text: "1%",
+            x: "center",
+            top: "35%",
+            textStyle: {
+              fontSize: "15",
+              color: "#FFFFFF",
+              fontFamily: "DINAlternate-Bold, DINAlternate",
+              foontWeight: "100",
+            },
+          },
+        ],
+        // backgroundColor: "#111",
+        polar: {
+          radius: ["75%", "90%"],
+          center: ["50%", "50%"],
+        },
+        angleAxis: {
+          max: 100,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "bar",
+            roundCap: true,
+            barWidth: 90,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(66, 66, 66, .3)",
+            },
+            data: [1],
+            coordinateSystem: "polar",
+
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#717171",
+                  },
+                  {
+                    offset: 1,
+                    color: "#717171",
+                  },
+                ]),
+              },
+            },
+          },
+          // {
+          //     name: '',
+          //     type: 'pie',
+          //     startAngle: 80,
+          //     radius: ['6%'],
+          //     hoverAnimation: false,
+          //     center: ['50%', '50%'],
+          //     itemStyle: {
+          //         color: 'rgba(66, 66, 66, .1)',
+          //         borderWidth: 1,
+          //         borderColor: '#5269EE',
+          //     },
+          //     data: [100],
+          // },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 80,
+            radius: ["100%"],
+            hoverAnimation: false,
+            center: ["50%", "50%"],
+            itemStyle: {
+              color: "rgba(66, 66, 66, .1)",
+              borderWidth: 1,
+              borderColor: "#5269EE",
+            },
+            data: [100],
+          },
+        ],
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0px !important;
+  min-height: calc(0vh - 0px) !important;
+}
+</style>
diff --git a/src/views/mes/dv/largeScreen/components/offline.vue b/src/views/mes/dv/largeScreen/components/offline.vue
new file mode 100644
index 0000000..e498ade
--- /dev/null
+++ b/src/views/mes/dv/largeScreen/components/offline.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="app-container">
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div id="offline" style="width: 100%; height: 70px"></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  components: { echarts, Treeselect },
+  props: ["message"], // 声明一个自定义的属性
+  data() {
+    return {
+      echartData: [],
+    };
+  },
+  watch: {
+    message: {
+      immediate: true,
+      handler(val) {
+        //  console.log(val,'差点撒旦阿萨=============');
+        this.echartData = val;
+        //  val.forEach((item) => {
+        //   this.getDataNum.push(Number(item.ytdUvNew))
+        //   this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
+        // })
+        this.$nextTick(() => {
+          //这里需要重新加载渲染
+          this.drawLine();
+        });
+      },
+    },
+  },
+
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById("offline"));
+
+      var option = {
+        title: [
+          {
+            text: "5%",
+            x: "center",
+            top: "35%",
+            textStyle: {
+              fontSize: "15",
+              color: "#FFFFFF",
+              fontFamily: "DINAlternate-Bold, DINAlternate",
+              foontWeight: "100",
+            },
+          },
+        ],
+        // backgroundColor: "#111",
+        polar: {
+          radius: ["75%", "90%"],
+          center: ["50%", "50%"],
+        },
+        angleAxis: {
+          max: 100,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "bar",
+            roundCap: true,
+            barWidth: 90,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(66, 66, 66, .3)",
+            },
+            data: [5],
+            coordinateSystem: "polar",
+
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#717171",
+                  },
+                  {
+                    offset: 1,
+                    color: "#717171",
+                  },
+                ]),
+              },
+            },
+          },
+          // {
+          //     name: '',
+          //     type: 'pie',
+          //     startAngle: 80,
+          //     radius: ['6%'],
+          //     hoverAnimation: false,
+          //     center: ['50%', '50%'],
+          //     itemStyle: {
+          //         color: 'rgba(66, 66, 66, .1)',
+          //         borderWidth: 1,
+          //         borderColor: '#5269EE',
+          //     },
+          //     data: [100],
+          // },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 80,
+            radius: ["100%"],
+            hoverAnimation: false,
+            center: ["50%", "50%"],
+            itemStyle: {
+              color: "rgba(66, 66, 66, .1)",
+              borderWidth: 1,
+              borderColor: "#5269EE",
+            },
+            data: [100],
+          },
+        ],
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0px !important;
+  min-height: calc(0vh - 0px) !important;
+}
+</style>
diff --git a/src/views/mes/dv/largeScreen/components/online.vue b/src/views/mes/dv/largeScreen/components/online.vue
new file mode 100644
index 0000000..0b3391e
--- /dev/null
+++ b/src/views/mes/dv/largeScreen/components/online.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="app-container">
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div id="main" style="width: 100%; height: 70px"></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  components: { echarts, Treeselect },
+  props: ["message"], // 声明一个自定义的属性
+  data() {
+    return {
+      echartData: [],
+    };
+  },
+  watch: {
+    message: {
+      immediate: true,
+      handler(val) {
+        //  console.log(val,'差点撒旦阿萨=============');
+        this.echartData = val;
+        //  val.forEach((item) => {
+        //   this.getDataNum.push(Number(item.ytdUvNew))
+        //   this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
+        // })
+        this.$nextTick(() => {
+          //这里需要重新加载渲染
+          this.drawLine();
+        });
+      },
+    },
+  },
+
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById("main"));
+
+      var option = {
+        title: [
+          {
+            text: "10%",
+            x: "center",
+            top: "35%",
+            textStyle: {
+              fontSize: "15",
+              color: "#FFFFFF",
+              fontFamily: "DINAlternate-Bold, DINAlternate",
+              foontWeight: "100",
+            },
+          },
+        ],
+        // backgroundColor: "#111",
+        polar: {
+          radius: ["75%", "90%"],
+          center: ["50%", "50%"],
+        },
+        angleAxis: {
+          max: 100,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "bar",
+            roundCap: true,
+            barWidth: 90,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(66, 66, 66, .3)",
+            },
+            data: [10],
+            coordinateSystem: "polar",
+
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#717171",
+                  },
+                  {
+                    offset: 1,
+                    color: "#717171",
+                  },
+                ]),
+              },
+            },
+          },
+          // {
+          //     name: '',
+          //     type: 'pie',
+          //     startAngle: 80,
+          //     radius: ['6%'],
+          //     hoverAnimation: false,
+          //     center: ['50%', '50%'],
+          //     itemStyle: {
+          //         color: 'rgba(66, 66, 66, .1)',
+          //         borderWidth: 1,
+          //         borderColor: '#5269EE',
+          //     },
+          //     data: [100],
+          // },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 80,
+            radius: ["100%"],
+            hoverAnimation: false,
+            center: ["50%", "50%"],
+            itemStyle: {
+              color: "rgba(66, 66, 66, .1)",
+              borderWidth: 1,
+              borderColor: "#5269EE",
+            },
+            data: [100],
+          },
+        ],
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0px !important;
+  min-height: calc(0vh - 0px) !important;
+}
+</style>
diff --git a/src/views/mes/dv/largeScreen/components/onlineRate.vue b/src/views/mes/dv/largeScreen/components/onlineRate.vue
new file mode 100644
index 0000000..d337424
--- /dev/null
+++ b/src/views/mes/dv/largeScreen/components/onlineRate.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="app-container">
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div id="onlineRate" style="width: 100%; height: 150px"></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  components: { echarts, Treeselect },
+  props: ["message"], // 声明一个自定义的属性
+  data() {
+    return {
+      echartData: [],
+    };
+  },
+  watch: {
+    message: {
+      immediate: true,
+      handler(val) {
+        //  console.log(val,'差点撒旦阿萨=============');
+        this.echartData = val;
+        //  val.forEach((item) => {
+        //   this.getDataNum.push(Number(item.ytdUvNew))
+        //   this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
+        // })
+        this.$nextTick(() => {
+          //这里需要重新加载渲染
+          this.drawLine();
+        });
+      },
+    },
+  },
+
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById("onlineRate"));
+
+      let value = "50%";
+      let title = "设备在线率";
+      var option = {
+        title: [
+          {
+            text: "{a|" + value + "}\n{c|" + title + "}",
+            x: "center",
+            top: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: 15,
+                  color: "#ffffff",
+                },
+                c: {
+                  fontSize: 10,
+                  color: "#ffffff",
+                  padding: [5, 0],
+                },
+              },
+            },
+          },
+        ],
+        // backgroundColor: "#111",
+        polar: {
+          radius: ["70%", "95%"],
+          center: ["50%", "50%"],
+        },
+        angleAxis: {
+          max: 100,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "bar",
+            roundCap: true,
+            barWidth: 90,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(66, 66, 66, .3)",
+            },
+            data: [50],
+            coordinateSystem: "polar",
+
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#717171",
+                  },
+                  {
+                    offset: 1,
+                    color: "#717171",
+                  },
+                ]),
+              },
+            },
+          },
+          // {
+          //     name: '',
+          //     type: 'pie',
+          //     startAngle: 80,
+          //     radius: ['6%'],
+          //     hoverAnimation: false,
+          //     center: ['50%', '50%'],
+          //     itemStyle: {
+          //         color: 'rgba(66, 66, 66, .1)',
+          //         borderWidth: 1,
+          //         borderColor: '#5269EE',
+          //     },
+          //     data: [100],
+          // },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 80,
+            radius: ["100%"],
+            hoverAnimation: false,
+            center: ["50%", "50%"],
+            itemStyle: {
+              color: "rgba(66, 66, 66, .1)",
+              borderWidth: 1,
+              borderColor: "#5269EE",
+            },
+            data: [100],
+          },
+        ],
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0px !important;
+  min-height: calc(0vh - 0px) !important;
+}
+</style>
diff --git a/src/views/mes/dv/largeScreen/components/roboticRate.vue b/src/views/mes/dv/largeScreen/components/roboticRate.vue
new file mode 100644
index 0000000..f564c9f
--- /dev/null
+++ b/src/views/mes/dv/largeScreen/components/roboticRate.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="app-container">
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div id="roboticRate" style="width: 100%; height: 150px"></div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  components: { echarts, Treeselect },
+  props: ["message"], // 声明一个自定义的属性
+  data() {
+    return {
+      echartData: [],
+    };
+  },
+  watch: {
+    message: {
+      immediate: true,
+      handler(val) {
+        //  console.log(val,'差点撒旦阿萨=============');
+        this.echartData = val;
+        //  val.forEach((item) => {
+        //   this.getDataNum.push(Number(item.ytdUvNew))
+        //   this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
+        // })
+        this.$nextTick(() => {
+          //这里需要重新加载渲染
+          this.drawLine();
+        });
+      },
+    },
+  },
+
+  mounted() {
+    this.drawLine();
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById("roboticRate"));
+
+      let value = "30%";
+      let title = "设备在线率";
+      var option = {
+        title: [
+          {
+            text: "{a|" + value + "}\n{c|" + title + "}",
+            x: "center",
+            top: "35%",
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: 15,
+                  color: "#ffffff",
+                },
+                c: {
+                  fontSize: 10,
+                  color: "#ffffff",
+                  padding: [5, 0],
+                },
+              },
+            },
+          },
+        ],
+        // backgroundColor: "#111",
+        polar: {
+          radius: ["70%", "95%"],
+          center: ["50%", "50%"],
+        },
+        angleAxis: {
+          max: 100,
+          show: false,
+        },
+        radiusAxis: {
+          type: "category",
+          show: true,
+          axisLabel: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "bar",
+            roundCap: true,
+            barWidth: 90,
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(66, 66, 66, .3)",
+            },
+            data: [30],
+            coordinateSystem: "polar",
+
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                  {
+                    offset: 0,
+                    color: "#717171",
+                  },
+                  {
+                    offset: 1,
+                    color: "#717171",
+                  },
+                ]),
+              },
+            },
+          },
+          // {
+          //     name: '',
+          //     type: 'pie',
+          //     startAngle: 80,
+          //     radius: ['6%'],
+          //     hoverAnimation: false,
+          //     center: ['50%', '50%'],
+          //     itemStyle: {
+          //         color: 'rgba(66, 66, 66, .1)',
+          //         borderWidth: 1,
+          //         borderColor: '#5269EE',
+          //     },
+          //     data: [100],
+          // },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 80,
+            radius: ["100%"],
+            hoverAnimation: false,
+            center: ["50%", "50%"],
+            itemStyle: {
+              color: "rgba(66, 66, 66, .1)",
+              borderWidth: 1,
+              borderColor: "#5269EE",
+            },
+            data: [100],
+          },
+        ],
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0px !important;
+  min-height: calc(0vh - 0px) !important;
+}
+</style>
diff --git a/src/views/mes/dv/largeScreen/index.vue b/src/views/mes/dv/largeScreen/index.vue
index 6abeca9..7bea25e 100644
--- a/src/views/mes/dv/largeScreen/index.vue
+++ b/src/views/mes/dv/largeScreen/index.vue
@@ -1,3 +1,643 @@
 <template>
-    <h1>123</h1>
-</template>
\ No newline at end of file
+  <div class="shopping-classify">
+    <div class="right-menu" id="container">
+      <!-- 头 -->
+      <div style="height: 10%">
+        <el-row type="flex" justify="space-between" style="height: 100%">
+          <el-col :span="10">
+            <div
+              class="grid-content bg-purple"
+              style="display: flex; flex-direction: row-reverse"
+            >
+              <!-- <svg-icon
+                :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+                style="
+                  width: 20px;
+                  height: 20px;
+                  color: #f4deb0;
+                  margin: 0% -70% 1% 0%;
+                "
+                @click="buttoncli"
+              /> -->
+              <img
+                @click="buttoncli"
+                style="height: 40px; margin: 5% 4.3% 0% 0%"
+                src="../../../../assets/images/return.png"
+              /></div
+          ></el-col>
+          <el-col
+            :span="5"
+            style="
+              display: flex;
+              flex-direction: column;
+              justify-content: space-evenly;
+              align-items: center;
+            "
+            ><div style="color: #fff; font-size: 30px; font-weight: 700">
+              {{ this.title }}
+            </div>
+            <div
+              style="color: rgb(9 207 255); font-size: 21px; margin-bottom: 4%"
+            >
+              2024.01.11 09:18:18
+            </div>
+          </el-col>
+          <el-col :span="10"
+            ><div class="grid-content bg-purple" style="display: flex">
+              <img
+                style="height: 40px; margin: 5% 0% 0% 4%"
+                src="../../../../assets/images/biaotixiugai.png"
+                @click="handleChange"
+              />
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <!-- 第一部分 -->
+      <div style="height: 10%">
+        <el-row type="flex" class="row-bg-1" justify="space-between">
+          <el-col :span="8"
+            ><div class="grid-content bg-purple">
+              <el-row
+                :gutter="8"
+                style="display: flex; justify-content: center"
+              >
+                <el-col :span="3"
+                  ><div class="grid-content bg-purple" style="width: 70px">
+                    <online :message="this.barquantity" /></div
+                ></el-col>
+                <el-col :span="4"
+                  ><div class="grid-content bg-purple" style="margin-top: 10%">
+                    <div style="font-size: 25px">12</div>
+                    <div>当前在线</div>
+                  </div></el-col
+                >
+              </el-row>
+            </div></el-col
+          >
+          <el-col :span="8"
+            ><div class="grid-content bg-purple">
+              <el-row
+                :gutter="8"
+                style="display: flex; justify-content: center"
+              >
+                <el-col :span="3"
+                  ><div class="grid-content bg-purple" style="width: 70px">
+                    <offline :message="this.offlineData" /></div
+                ></el-col>
+                <el-col :span="4"
+                  ><div class="grid-content bg-purple" style="margin-top: 10%">
+                    <div style="font-size: 25px">12</div>
+                    <div>当前离线</div>
+                  </div></el-col
+                >
+              </el-row>
+            </div></el-col
+          >
+          <el-col :span="8"
+            ><div class="grid-content bg-purple">
+              <el-row
+                :gutter="8"
+                style="display: flex; justify-content: center"
+              >
+                <el-col :span="3"
+                  ><div class="grid-content bg-purple" style="width: 70px">
+                    <fault :message="this.faultData" /></div
+                ></el-col>
+                <el-col :span="4"
+                  ><div class="grid-content bg-purple" style="margin-top: 10%">
+                    <div style="font-size: 25px">12</div>
+                    <div>当前故障</div>
+                  </div></el-col
+                >
+              </el-row>
+            </div></el-col
+          >
+        </el-row>
+      </div>
+
+      <!-- 第二部分 -->
+      <div style="height: 80%">
+        <el-row type="flex" class="row-bg-3" justify="space-between">
+          <el-col :span="8"
+            ><div style="display: flex; flex-direction: column; height: 100%">
+              <div style="height: 10%">
+                <el-radio-group
+                  size="mini"
+                  v-model="radio1"
+                  style="
+                    display: flex;
+                    justify-content: flex-end;
+                    margin: 2% 5% 0% 0%;
+                  "
+                >
+                  <el-radio-button :label="1">当前</el-radio-button>
+                  <el-radio-button :label="2">本月</el-radio-button>
+                </el-radio-group>
+              </div>
+              <div style="height: 20%">
+                <div style="height: 100%">
+                  <el-row :gutter="20">
+                    <el-col :span="6"
+                      ><div style="margin-left: 28%">
+                        <onlineRate :message="this.onlineRateData" /></div
+                    ></el-col>
+                    <el-col :span="6"
+                      ><div style="margin: 45% 0% 0% 17%">2</div></el-col
+                    >
+                    <el-col :span="6"
+                      ><div style="margin: 45% 27% 0% 0%; color: #2cc195">
+                        3
+                      </div></el-col
+                    >
+                    <el-col :span="6"
+                      ><div style="margin: 45% 55% 0% 0%; color: #ec1821">
+                        4
+                      </div></el-col
+                    >
+                  </el-row>
+                </div>
+              </div>
+              <div style="height: 25%">
+                <div style="height: 100%">
+                  <el-row :gutter="24">
+                    <el-col :span="8"
+                      ><div style="margin: 40% 0% 0% 3%">2</div></el-col
+                    >
+                    <el-col :span="8"
+                      ><div style="margin: 40% 7% 0% 0%; color: #f5c959">
+                        3
+                      </div></el-col
+                    >
+                    <el-col :span="8"
+                      ><div style="margin: 40% 18% 0% 0%">4</div></el-col
+                    >
+                  </el-row>
+                </div>
+              </div>
+              <div style="height: 45%">
+                <div style="height: 100%">
+                  <el-row :gutter="20">
+                    <el-col :span="6"
+                      ><div style="margin: 25% 0% 0% 33%">1</div></el-col
+                    >
+                    <el-col :span="6"
+                      ><div style="margin: 25% 0% 0% 5%; color: #f5c959">
+                        2
+                      </div></el-col
+                    >
+                    <el-col :span="6"
+                      ><div style="margin: 25% 27% 0% 0%; color: #ec1821">
+                        3
+                      </div></el-col
+                    >
+                    <el-col :span="6"
+                      ><div style="margin: 25% 60% 0% 0%; color: #2cc195">
+                        4
+                      </div></el-col
+                    >
+                  </el-row>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div style="display: flex; flex-direction: column; height: 100%">
+              <div style="height: 10%">
+                <el-radio-group
+                  size="mini"
+                  v-model="radio1"
+                  style="
+                    display: flex;
+                    justify-content: flex-end;
+                    margin: 2% 5% 0% 0%;
+                  "
+                >
+                  <el-radio-button :label="1">当前</el-radio-button>
+                  <el-radio-button :label="2">本月</el-radio-button>
+                </el-radio-group>
+              </div>
+              <div style="height: 20%">
+                <div style="height: 100%">
+                  <el-row :gutter="20">
+                    <el-col :span="6"
+                      ><div style="margin-left: 28%">
+                        <roboticRate :message="this.roboticRateData" /></div
+                    ></el-col>
+                    <el-col :span="6"
+                      ><div style="margin: 45% 0% 0% 30%">2</div></el-col
+                    >
+                    <el-col :span="6"
+                      ><div style="margin: 45% 15% 0% 0%; color: #2cc195">
+                        3
+                      </div></el-col
+                    >
+                    <el-col :span="6"
+                      ><div style="margin: 45% 40% 0% 0%; color: #ec1821">
+                        4
+                      </div></el-col
+                    >
+                  </el-row>
+                </div>
+              </div>
+              <div style="height: 25%">
+                <div style="height: 100%">
+                  <el-row :gutter="24">
+                    <el-col :span="8"
+                      ><div style="margin: 40% 0% 0% 12%">2</div></el-col
+                    >
+                    <el-col :span="8"
+                      ><div style="margin: 40% 0% 0% 2%; color: #f5c959">
+                        3
+                      </div></el-col
+                    >
+                    <el-col :span="8"
+                      ><div style="margin: 40% 10% 0% 0%">4</div></el-col
+                    >
+                  </el-row>
+                </div>
+              </div>
+              <div style="height: 45%">
+                <div style="height: 100%">
+                  <el-row :gutter="20">
+                    <el-col :span="6"
+                      ><div style="margin: 25% 0% 0% 46%">1</div></el-col
+                    >
+                    <el-col :span="6"
+                      ><div style="margin: 25% 0% 0% 17%; color: #f5c959">
+                        2
+                      </div></el-col
+                    >
+                    <el-col :span="6"
+                      ><div style="margin: 25% 17% 0% 0%; color: #ec1821">
+                        3
+                      </div></el-col
+                    >
+                    <el-col :span="6"
+                      ><div style="margin: 25% 50% 0% 0%; color: #2cc195">
+                        4
+                      </div></el-col
+                    >
+                  </el-row>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div style="display: flex; flex-direction: column; height: 100%">
+              <div style="height: 10%">
+                <el-radio-group
+                  size="mini"
+                  v-model="radio1"
+                  style="
+                    display: flex;
+                    justify-content: flex-end;
+                    margin: 2% 5% 0% 0%;
+                  "
+                >
+                  <el-radio-button :label="1">当前</el-radio-button>
+                  <el-radio-button :label="2">本月</el-radio-button>
+                </el-radio-group>
+              </div>
+              <div style="height: 20%">
+                <div style="height: 100%">
+                  <el-row :gutter="20">
+                    <el-col :span="6"
+                      ><div style="margin-left: 28%">
+                        <AGVrate :message="this.AGVrateData" /></div
+                    ></el-col>
+                    <el-col :span="6"
+                      ><div style="margin: 45% 0% 0% 32%">2</div></el-col
+                    >
+                    <el-col :span="6"
+                      ><div style="margin: 45% 0% 0% 0%; color: #2cc195">
+                        3
+                      </div></el-col
+                    >
+                    <el-col :span="6"
+                      ><div style="margin: 45% 40% 0% 0%; color: #ec1821">
+                        4
+                      </div></el-col
+                    >
+                  </el-row>
+                </div>
+              </div>
+              <div style="height: 25%">
+                <div style="height: 100%">
+                  <el-row :gutter="24">
+                    <el-col :span="8"
+                      ><div style="margin: 40% 0% 0% 17%">2</div></el-col
+                    >
+                    <el-col :span="8"
+                      ><div style="margin: 40% 0% 0% 6%; color: #f5c959">
+                        3
+                      </div></el-col
+                    >
+                    <el-col :span="8"
+                      ><div style="margin: 40% 4% 0% 0%">4</div></el-col
+                    >
+                  </el-row>
+                </div>
+              </div>
+              <div style="height: 45%">
+                <div style="height: 100%"></div>
+              </div></div
+          ></el-col>
+        </el-row>
+      </div>
+
+      <!--标题修改-->
+      <el-dialog :visible.sync="titleVisible" append-to-body width="30%">
+        <el-form ref="installForm" :model="installForm" label-width="80px">
+          <el-form-item label="标题修改">
+            <el-input
+              maxlength="11"
+              show-word-limit
+              v-model="installForm.name"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="titleVisible = false">取消</el-button>
+          <el-button type="primary" @click="sumitInstall">确认</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import * as statisServer from "@/api/statistics";
+// import { getInfo } from "@/api/user";
+import screenfull from "screenfull";
+import online from "./components/online.vue";
+import offline from "./components/offline.vue";
+import fault from "./components/fault.vue";
+import onlineRate from "./components/onlineRate.vue";
+import roboticRate from "./components/roboticRate.vue";
+import AGVrate from "./components/AGVrate.vue";
+
+export default {
+  components: { online, offline, fault, onlineRate, roboticRate, AGVrate },
+  data() {
+    return {
+      screenfull: false,
+      title: "设备监控分析",
+      titleVisible: false,
+      installForm: { name: "" },
+      taskForm: {
+        total_num: 0, // 采样任务百分比 （完成/总数量）
+        completed_num: 0,
+        incompleted_num: 0,
+      },
+      lineChartData: {},
+      totalarr: 0, // 求和
+      month: "", //获取当月合同
+      Contracts: "",
+      barquantity: [],
+      offlineData: [],
+      faultData: [],
+      onlineRateData: [],
+      roboticRateData: [],
+      AGVrateData: [],
+      signarr: [],
+      detection: [],
+      reports: "",
+      issue: "1",
+      accumulation: true,
+      thisYear: false,
+      isFullscreen: false,
+      radio1: 1,
+    };
+  },
+
+  created() {
+    // 监听事件
+    window.addEventListener("resize", this.onresize);
+    this.getList();
+    this.findTasks();
+    this.findContactList();
+    this.findSampleClass();
+    this.findvalid();
+    this.findSortContNumList();
+    this.NumberReports();
+    this.factorNumber();
+  },
+
+  // beforeDestroy() {
+  //   // 取消监听事件
+  //   window.removeEventListener("resize", this.onresize);
+  // },
+  methods: {
+    // 监听是否全屏状态
+    onresize(event) {
+      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
+      let winFlag = window.innerHeight === window.screen.height;
+      // 利用window全屏标识来判断 -- IE无效
+      let isFull = window.fullScreen || document.webkitIsFullScreen;
+
+      if (isFull === undefined) {
+        this.isFullscreen = winFlag;
+      } else {
+        this.isFullscreen = winFlag || isFull;
+      }
+      // console.log(winFlag); // true全屏   false不是全屏
+    },
+    buttoncli() {
+      const element = document.getElementById("container");
+      if (!screenfull) {
+        this.$message({
+          message: "浏览器不能全屏，安装其他版本试试",
+          type: "warning",
+        });
+        return false;
+      }
+      screenfull.toggle(element);
+      this.findSampleClass();
+      this.findSortContNumList();
+      this.factorNumber();
+    },
+
+    buttoncliArr() {
+      const element = document.getElementById("container");
+      if (!screenfull) {
+        this.$message({
+          message: "浏览器不能全屏，安装其他版本试试",
+          type: "warning",
+        });
+        return false;
+      }
+      screenfull.toggle(element);
+    },
+
+    getList() {
+      //   getInfo().then(res => {
+      //     this.title = res.result.screenName;
+      //   });
+    },
+
+    // 任务
+    findTasks() {
+      //   statisServer.findCompleteTask({ type: 1 }).then(res => {
+      //     if (res.code === 200) {
+      //       const taskForm = res.result.find(i => i.name === "报告编制任务");
+      //       this.taskForm.total_num = taskForm.totalCnt;
+      //       this.taskForm.completed_num = Number(
+      //         taskForm.totalCnt - taskForm.completeCnt
+      //       ).toFixed(0);
+      //       this.taskForm.incompleted_num = taskForm.completeCnt;
+      //     }
+      //   });
+    },
+    //合同总数
+    findContactList() {
+      //   statisServer.findValidContractsForPass11Month().then(res => {
+      //     if (res.code === 200) {
+      //       this.lineChartData = res.result || [];
+      //       // 求和
+      //       this.lineChartData.contactNum.forEach(item => {
+      //         this.totalarr += item;
+      //       });
+      //       //获取当月合同
+      //       this.month = this.lineChartData.contactNum.pop();
+      //     }
+      //   });
+    },
+
+    //样品类别
+    findSampleClass() {
+      //   statisServer.findStoredSampleClassificationCnt({ limit: 6 }).then(res => {
+      //     if (res.code === 200) {
+      //       var arr = [];
+      //       var barData = res.result.xNameData;
+      //       var barquantity = res.result.xValData;
+      //       //
+      //       barData.forEach((item, i) => {
+      //         arr.push({
+      //           name: item,
+      //           value: barquantity[i]
+      //         });
+      //       });
+      //       this.barquantity = arr;
+      //     }
+      //   });
+    },
+
+    findvalid() {
+      //   statisServer.findValidContracts({ type: 0 }).then(res => {
+      //     if (res.code === 200) {
+      //       this.Contracts = res.result.cusSum;
+      //     }
+      //   });
+    },
+    //签合同排名
+    findSortContNumList() {
+      //   statisServer.findSortContNum({ type: 1, limit: 5 }).then(res => {
+      //     if (res.code === 200) {
+      //       var arr = [];
+      //       var barData = res.result.xNameData;
+      //       var barquantity = res.result.xValData;
+      //       //
+      //       barData.forEach((item, i) => {
+      //         arr.push({
+      //           code: item,
+      //           fundPost: barquantity[i]
+      //         });
+      //       });
+      //       arr.sort((a, b) => {
+      //         return b.fundPost - a.fundPost;
+      //       }); //升序
+      //       this.signarr = arr.slice(0, 10);
+      //     }
+      //   });
+    },
+    //签发报告数
+    NumberReports() {
+      //   statisServer.getReport({ type: this.issue }).then(res => {
+      //     if (res.code === 200) {
+      //       this.reports = res.result;
+      //     }
+      //   });
+    },
+    //因子数
+    factorNumber() {
+      //   statisServer.detectorFactor().then(res => {
+      //     if (res.code === 200) {
+      //       var arr = res.result;
+      //       arr.sort((a, b) => {
+      //         return b.value - a.value;
+      //       }); //升序
+      //       this.detection = arr.slice(0, 10);
+      //     }
+      //   });
+    },
+
+    handleChange() {
+      this.titleVisible = true;
+    },
+    //修改确认
+    sumitInstall() {
+      //   statisServer.updateName(this.installForm).then(res => {
+      //     if (res.code === 200) {
+      //       this.$notify({
+      //         title: "修改成功",
+      //         message: res.message,
+      //         type: "success"
+      //       });
+      //       this.titleVisible = false;
+      //       this.getList();
+      //     }
+      //   });
+    },
+    accumulationClick() {
+      this.issue = 2;
+      this.accumulation = false;
+      this.thisYear = true;
+      this.NumberReports();
+    },
+    thisYearClick() {
+      this.issue = 1;
+      this.accumulation = true;
+      this.thisYear = false;
+      this.NumberReports();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+#container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  background: url("../../../../assets/images/zhubeijing.png") center center
+    no-repeat;
+  background-size: 100% 100%;
+}
+.row-bg-1 {
+  height: 70px;
+  color: #fff;
+  text-align: center;
+}
+.row-bg-3 {
+  height: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+}
+.row-bg-4 {
+  color: #8bdbe6;
+  font-size: 25px;
+  margin-top: 27%;
+  font-weight: 500;
+}
+.row-bg-5 {
+  height: 365px;
+  text-align: center;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+}
+</style>