diff --git a/src/views/mes/pro/production/components/AGVrate.vue b/src/views/mes/pro/production/components/AGVrate.vue
deleted file mode 100644
index 8b680e2..0000000
--- a/src/views/mes/pro/production/components/AGVrate.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<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/pro/production/components/complete.vue b/src/views/mes/pro/production/components/complete.vue
new file mode 100644
index 0000000..45e11cb
--- /dev/null
+++ b/src/views/mes/pro/production/components/complete.vue
@@ -0,0 +1,288 @@
+<template>
+  <div class="app-container">
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div id="completeData" style="width: 100%; height: 360px"></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("completeData"));
+
+      var option = {
+        tooltip: {
+          //提示框组件
+          trigger: "axis",
+          formatter: "{b}<br />{a0}: {c0}<br />{a1}: {c1}",
+          axisPointer: {
+            type: "shadow",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
+          textStyle: {
+            color: "#fff",
+            fontStyle: "normal",
+            fontFamily: "微软雅黑",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          left: "5%",
+          right: "4%",
+          bottom: "6%",
+          top: 60,
+          padding: "0 0 10 0",
+          containLabel: true,
+        },
+        legend: {
+          //图例组件，颜色和名字
+          right: 10,
+          top: 20,
+          itemGap: 16,
+          itemWidth: 18,
+          itemHeight: 10,
+          data: [
+            {
+              name: "实际完成工单数",
+              //icon:'image://../wwwroot/js/url2.png', //路径
+            },
+            {
+              name: "计划工单数",
+            },
+          ],
+          textStyle: {
+            color: "#a8aab0",
+            fontStyle: "normal",
+            fontFamily: "微软雅黑",
+            fontSize: 12,
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true, //坐标轴两边留白
+            data: [
+              "2023-08",
+              "2023-09",
+              "2023-10",
+              "2023-11",
+              "2023-12",
+              "2023-13",
+              "2023-14",
+              "2023-15",
+              "2023-16",
+              "2023-17",
+            ],
+            axisLabel: {
+              //坐标轴刻度标签的相关设置。
+              interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+              margin: 15,
+              textStyle: {
+                color: "#078ceb",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 12,
+              },
+            },
+            axisTick: {
+              //坐标轴刻度相关设置。
+              show: false,
+            },
+            axisLine: {
+              //坐标轴轴线相关设置
+              lineStyle: {
+                color: "#fff",
+                opacity: 0.2,
+              },
+            },
+            splitLine: {
+              //坐标轴在 grid 区域中的分隔线。
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitNumber: 5,
+            axisLabel: {
+              textStyle: {
+                color: "#a8aab0",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 12,
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: ["#fff"],
+                opacity: 0.06,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "实际完成工单数",
+            type: "bar",
+            data: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6, 4.2, 3.6, 6, 6.4],
+            barWidth: 10,
+            barGap: 0, //柱间距离
+            label: {
+              //图形上的文本标签
+              normal: {
+                show: true,
+                position: "top",
+                textStyle: {
+                  color: "#a8aab0",
+                  fontStyle: "normal",
+                  fontFamily: "微软雅黑",
+                  fontSize: 12,
+                },
+              },
+            },
+            itemStyle: {
+              //图形样式
+              normal: {
+                barBorderRadius: [5, 5, 0, 0],
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 1,
+                      color: "rgba(127, 128, 225, 0.7)",
+                    },
+                    {
+                      offset: 0.9,
+                      color: "rgba(72, 73, 181, 0.7)",
+                    },
+                    {
+                      offset: 0.31,
+                      color: "rgba(0, 208, 208, 0.7)",
+                    },
+                    {
+                      offset: 0.15,
+                      color: "rgba(0, 208, 208, 0.7)",
+                    },
+                    {
+                      offset: 0,
+                      color: "rgba(104, 253, 255, 0.7)",
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+          },
+          {
+            name: "计划工单数",
+            type: "bar",
+            data: [2.9, 5, 4.4, 2.7, 5.7, 4.6, 1.2, 2.7, 4.8, 6.0],
+            barWidth: 10,
+            barGap: 0.2, //柱间距离
+            label: {
+              //图形上的文本标签
+              normal: {
+                show: true,
+                position: "top",
+                textStyle: {
+                  color: "#a8aab0",
+                  fontStyle: "normal",
+                  fontFamily: "微软雅黑",
+                  fontSize: 12,
+                },
+              },
+            },
+            itemStyle: {
+              //图形样式
+              normal: {
+                barBorderRadius: [5, 5, 0, 0],
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 1,
+                      color: "rgba(127, 128, 225, 0.7)",
+                    },
+                    {
+                      offset: 0.9,
+                      color: "rgba(72, 73, 181, 0.7)",
+                    },
+                    {
+                      offset: 0.25,
+                      color: "rgba(226, 99, 74, 0.7)",
+                    },
+                    {
+                      offset: 0,
+                      color: "rgba(253, 200, 106, 0.7)",
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+          },
+        ],
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      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/pro/production/components/defective.vue b/src/views/mes/pro/production/components/defective.vue
new file mode 100644
index 0000000..fcfe57b
--- /dev/null
+++ b/src/views/mes/pro/production/components/defective.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="app-container">
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div id="defectiveData" style="width: 100%; height: 310px"></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("defectiveData"));
+
+      var scale = 1;
+      var echartData = [
+        {
+          value: 50,
+          name: "材料不良",
+        },
+        {
+          value: 100,
+          name: "工序不良",
+        },
+        {
+          value: 300,
+          name: "尺寸不良",
+        },
+        {
+          value: 50,
+          name: "其他不良",
+        },
+      ];
+      var rich = {
+        yellow: {
+          color: "#fff",
+          fontSize: 14 * scale,
+          padding: [5, 4],
+          align: "center",
+        },
+        total: {
+          color: "#49dff0",
+          fontSize: 24 * scale,
+          align: "center",
+        },
+        white: {
+          color: "#fff",
+          align: "center",
+          fontSize: 14 * scale,
+          padding: [5, 0],
+        },
+        blue: {
+          color: "#49dff0",
+          fontSize: 12 * scale,
+          align: "center",
+        },
+        hr: {
+          borderColor: "#0b5263",
+          width: "100%",
+          borderWidth: 1,
+          height: 0,
+        },
+      };
+      var option = {
+        title: {
+          text: "总考生数",
+          left: "center",
+          top: "53%",
+          padding: [20, 0],
+          textStyle: {
+            color: "#fff",
+            fontSize: 16 * scale,
+            align: "center",
+          },
+        },
+        legend: {
+          selectedMode: false,
+          formatter: function (name) {
+            var total = 0; //各科正确率总和
+            var averagePercent; //综合正确率
+            echartData.forEach(function (value, index, array) {
+              total += value.value;
+            });
+            return "{total|" + total + "}";
+          },
+          data: [echartData[0].name],
+          // data: ['高等教育学'],
+          // itemGap: 50,
+          left: "center",
+          top: "center",
+          icon: "none",
+          align: "center",
+          textStyle: {
+            color: "#fff",
+            fontSize: 16 * scale,
+            rich: rich,
+          },
+        },
+        series: [
+          {
+            name: "不良品总数",
+            type: "pie",
+            radius: ["42%", "50%"],
+            hoverAnimation: false,
+            color: [
+              "#c487ee",
+              "#deb140",
+              "#49dff0",
+              "#034079",
+              "#6f81da",
+              "#00ffb4",
+            ],
+            label: {
+              normal: {
+                formatter: function (params, ticket, callback) {
+                  var total = 0; //考生总数量
+                  var percent = 0; //考生占比
+                  echartData.forEach(function (value, index, array) {
+                    total += value.value;
+                  });
+                  percent = ((params.value / total) * 100).toFixed(1);
+                  return (
+                    "{white|" +
+                    params.value +
+                    "}\n{hr|}\n{yellow|" +
+                    params.name +
+                    "}\n"
+                  );
+                },
+                rich: rich,
+              },
+            },
+            labelLine: {
+              normal: {
+                length: 55 * scale,
+                length2: 0,
+                lineStyle: {
+                  color: "#0b5263",
+                },
+              },
+            },
+            data: echartData,
+          },
+        ],
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      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/pro/production/components/fault.vue b/src/views/mes/pro/production/components/fault.vue
deleted file mode 100644
index b2c82ed..0000000
--- a/src/views/mes/pro/production/components/fault.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<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/pro/production/components/offline.vue b/src/views/mes/pro/production/components/offline.vue
deleted file mode 100644
index e498ade..0000000
--- a/src/views/mes/pro/production/components/offline.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<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/pro/production/components/online.vue b/src/views/mes/pro/production/components/online.vue
deleted file mode 100644
index 0b3391e..0000000
--- a/src/views/mes/pro/production/components/online.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<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/pro/production/components/onlineRate.vue b/src/views/mes/pro/production/components/onlineRate.vue
deleted file mode 100644
index d337424..0000000
--- a/src/views/mes/pro/production/components/onlineRate.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<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/pro/production/components/roboticRate.vue b/src/views/mes/pro/production/components/roboticRate.vue
deleted file mode 100644
index f564c9f..0000000
--- a/src/views/mes/pro/production/components/roboticRate.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<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/pro/production/components/ticket.vue b/src/views/mes/pro/production/components/ticket.vue
new file mode 100644
index 0000000..c48575c
--- /dev/null
+++ b/src/views/mes/pro/production/components/ticket.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="app-container">
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <div id="ticketData" style="width: 100%; height: 360px"></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("ticketData"));
+
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+        },
+        legend: {
+          // data: ["已完成", "进行中"],
+          top: "5%",
+          right: "5%",
+          icon: "rect",
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        grid: {
+          top: "20%",
+          left: "5%",
+          right: "5%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,0.8)",
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,0.3)", // 分割线颜色
+            },
+          },
+        },
+        yAxis: {
+          type: "category",
+          //   data: ["已签收", "配送中", "已出库", "采购中", "接单中"],
+          axisLabel: {
+            color: "rgba(255,255,255,0.8)",
+          },
+        },
+        series: [
+          {
+            name: "计划数量",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            // data: [121, 828, 144, 368, 390],
+            barWidth: 12,
+            itemStyle: {
+              label: {
+                show: true,
+              },
+              labelLine: {
+                show: false,
+              },
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: "rgba(7,165,255,0.2)" },
+                { offset: 1, color: "rgba(7,165,255,1)" },
+              ]),
+              borderColor: "rgba(7,165,255,0.7)",
+              shadowBlur: 16,
+              shadowColor: "rgba(7,165,255,1)",
+            },
+          },
+          {
+            name: "产出数量",
+            type: "bar",
+            stack: "total",
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            // data: [271, 132, 413, 210, 521],
+            barWidth: 12,
+            itemStyle: {
+              label: {
+                show: true,
+              },
+              labelLine: {
+                show: false,
+              },
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: "rgba(41,244,236,0)" },
+                { offset: 1, color: "rgba(41,244,236,1)" },
+              ]),
+              borderColor: "#a2f9f7",
+              shadowBlur: 16,
+              shadowColor: "#a2f9f7",
+            },
+          },
+        ],
+        dataset: {
+          source: [
+            { status: "今飞智造2.1订单", value1: 33, value2: 93 },
+            { status: "今飞餐达1.15订单", value1: 53, value2: 32 },
+            { status: "今飞智造1.1订单", value1: 78, value2: 65 },
+            { status: "今飞智适12.15打单", value1: 12, value2: 35 },
+            { status: "今飞智适12.1订单", value1: 90, value2: 52 },
+          ],
+        },
+      };
+
+      // 使用刚指定的配置项和数据显示图表。
+      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/pro/production/index.vue b/src/views/mes/pro/production/index.vue
index 9b8dde7..64add2b 100644
--- a/src/views/mes/pro/production/index.vue
+++ b/src/views/mes/pro/production/index.vue
@@ -54,13 +54,173 @@
         </el-row>
       </div>
       <!-- 第一部分 -->
-      <div style="height: 10%">
-
+      <div style="height: 15%">
+        <div>
+          <el-row>
+            <el-col
+              :span="24"
+              style="color: #fff; font-size: 30px; font-weight: 700"
+            >
+              <div
+                style="
+                  display: flex;
+                  justify-content: center;
+                  margin-top: -10px;
+                  margin-bottom: 20px;
+                "
+              >
+                <el-radio-group v-model="radio4" size="mini">
+                  <el-radio-button :label="1">今日</el-radio-button>
+                  <el-radio-button :label="2">昨日</el-radio-button>
+                  <el-radio-button :label="3">本周</el-radio-button>
+                  <el-radio-button :label="4">本月</el-radio-button>
+                </el-radio-group>
+              </div></el-col
+            >
+          </el-row>
+        </div>
+        <div>
+          <el-row
+            :gutter="24"
+            style="color: #fff; font-size: 30px; font-weight: 700"
+          >
+            <el-col :span="4"
+              ><div
+                class="grid-content bg-purple"
+                style="margin: 10% 10% 10% 27%"
+              >
+                21
+              </div></el-col
+            >
+            <el-col :span="4"
+              ><div
+                class="grid-content bg-purple"
+                style="margin: 10% 10% 10% 35%"
+              >
+                30
+              </div></el-col
+            >
+            <el-col :span="4"
+              ><div
+                class="grid-content bg-purple"
+                style="margin: 10% 10% 10% 37%"
+              >
+                50%
+              </div></el-col
+            >
+            <el-col :span="4"
+              ><div
+                class="grid-content bg-purple"
+                style="margin: 10% 10% 10% 44%"
+              >
+                121
+              </div></el-col
+            >
+            <el-col :span="4"
+              ><div
+                class="grid-content bg-purple"
+                style="margin: 10% 10% 10% 47%"
+              >
+                1651
+              </div></el-col
+            >
+            <el-col :span="4"
+              ><div
+                class="grid-content bg-purple"
+                style="margin: 10% 10% 10% 60%"
+              >
+                1%
+              </div></el-col
+            >
+          </el-row>
+        </div>
       </div>
 
       <!-- 第二部分 -->
-      <div style="height: 80%">
-
+      <div style="height: 75%">
+        <div style="height: 50%; display: flex">
+          <div style="width: 80%">
+            <ticket :message="this.ticketData" />
+          </div>
+          <div style="width: 24%; margin-top: 50px">
+            <defective :message="this.defectiveData" />
+          </div>
+        </div>
+        <div style="height: 50%; display: flex">
+          <div style="width: 45%">
+            <complete :message="this.completeData" />
+          </div>
+          <div style="width: 55%; margin-top: 50px">
+            <el-row :gutter="32" style="padding: 16px 16px 0">
+              <!-- <el-card> -->
+              <el-table
+                :data="workorderList"
+                row-key="workorderId"
+                default-expand-all
+                :tree-props="{
+                  children: 'children',
+                  hasChildren: 'hasChildren',
+                }"
+              >
+                <el-table-column
+                  label="工单号"
+                  width="150"
+                  align="center"
+                  prop="sourceCode"
+                />
+                <el-table-column
+                  label="工单名称"
+                  align="center"
+                  width="150"
+                  prop="clientName"
+                  :show-overflow-tooltip="true"
+                />
+                <el-table-column
+                  label="产品名称"
+                  width="150"
+                  align="center"
+                  prop="productCode"
+                />
+                <el-table-column
+                  label="产出数量"
+                  width="150px"
+                  align="center"
+                  prop="productName"
+                  :show-overflow-tooltip="true"
+                />
+                <el-table-column label="进度" align="center" width="275px">
+                  <template slot-scope="scope">
+                    <el-progress
+                      :text-inside="true"
+                      :stroke-width="20"
+                      :percentage="
+                        parseFloat(
+                          (
+                            (scope.row.quantityProduced / scope.row.quantity) *
+                            100
+                          ).toFixed(2)
+                        )
+                      "
+                    ></el-progress>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="实际开始时间"
+                  align="center"
+                  prop="requestDate"
+                  width="180"
+                >
+                  <template slot-scope="scope">
+                    <span>{{
+                      parseTime(scope.row.requestDate, "{y}-{m}-{d}")
+                    }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <!-- </el-card> -->
+            </el-row>
+          </div>
+        </div>
       </div>
 
       <!--标题修改-->
@@ -84,18 +244,17 @@
 </template>
 
 <script>
+import { listWorkorder } from "@/api/mes/pro/workorder";
+
 // 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";
+import defective from "./components/defective.vue";
+import complete from "./components/complete.vue";
+import ticket from "./components/ticket.vue";
 
 export default {
-  components: { online, offline, fault, onlineRate, roboticRate, AGVrate },
+  components: { defective, complete, ticket },
   data() {
     return {
       screenfull: false,
@@ -112,11 +271,10 @@ export default {
       month: "", //获取当月合同
       Contracts: "",
       barquantity: [],
-      offlineData: [],
-      faultData: [],
-      onlineRateData: [],
-      roboticRateData: [],
-      AGVrateData: [],
+      completeData: [],
+      ticketData: [],
+      defectiveData: [],
+      workorderList: [],
       signarr: [],
       detection: [],
       reports: "",
@@ -124,9 +282,7 @@ export default {
       accumulation: true,
       thisYear: false,
       isFullscreen: false,
-      radio1: 1,
-      radio2: 1,
-      radio3: 1,
+      radio4: 1,
     };
   },
 
@@ -190,9 +346,9 @@ export default {
     },
 
     getList() {
-      //   getInfo().then(res => {
-      //     this.title = res.result.screenName;
-      //   });
+      // listWorkorder(this.queryParams).then((response) => {
+      //   this.workorderList = response.data;
+      // });
     },
 
     // 任务
@@ -330,8 +486,7 @@ export default {
   flex-direction: column;
   width: 100%;
   height: 100vh;
-  background: url("../../../../assets/images/scjk.png") center center
-    no-repeat;
+  background: url("../../../../assets/images/scjk.png") center center no-repeat;
   background-size: 100% 100%;
 }
 .row-bg-1 {
@@ -359,4 +514,27 @@ export default {
   font-size: 20px;
   font-weight: 700;
 }
+
+::v-deep .el-table {
+  background-color: transparent; /* 背景透明 */
+}
+
+::v-deep .el-table th {
+  color: #979bb4; /* 字体颜色 */
+  font-size: 16px;
+  background-color: transparent; /* 背景透明 */
+  border: 0;
+  height: 30px;
+  line-height: 30px;
+}
+::v-deep .el-table tr,
+.el-table td {
+  color: #e5dada;
+  font-size: 12px;
+  background-color: transparent; /* 背景透明 */
+  border: 0;
+  height: 30px;
+  line-height: 30px;
+}
+/* 上面两个背景色透明才能让table的背景透明少一个都不行 */
 </style>