From 5511640c43772a8240de3c7b14290423c3f6ae48 Mon Sep 17 00:00:00 2001
From: "LAPTOP-R6EHHS26\\86155" <2217640373@qq.com>
Date: Mon, 22 Apr 2024 15:35:38 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=9C=8B=E6=9D=BF=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/kanban/quality.js               |   2 +-
 src/api/mes/reportWork.js               |  24 ++-
 src/views/dashboard/DeviceChartLine.vue |   2 +-
 src/views/dashboard/LineChart copy.vue  | 136 -------------
 src/views/dashboard/LineChart.vue       |   3 +-
 src/views/dashboard/LineChartshadow.vue | 203 +++++++++++++++++++
 src/views/dashboard/PieChart3.vue       | 208 +++++++++++++++++++
 src/views/dashboard/QcChartLine.vue     |   7 +-
 src/views/dashboard/crossBarChart.vue   | 189 +++++++++++++++++
 src/views/index.vue                     | 258 +++++++++++++++++++++---
 src/views/register.vue                  |   2 +-
 11 files changed, 864 insertions(+), 170 deletions(-)
 delete mode 100644 src/views/dashboard/LineChart copy.vue
 create mode 100644 src/views/dashboard/LineChartshadow.vue
 create mode 100644 src/views/dashboard/PieChart3.vue
 create mode 100644 src/views/dashboard/crossBarChart.vue

diff --git a/src/api/kanban/quality.js b/src/api/kanban/quality.js
index 4e9d7c09..83545106 100644
--- a/src/api/kanban/quality.js
+++ b/src/api/kanban/quality.js
@@ -93,4 +93,4 @@ export function getMonthOfYearContrast(data) {
 		method: 'post',
 		data: data
 	});
-}
\ No newline at end of file
+}
diff --git a/src/api/mes/reportWork.js b/src/api/mes/reportWork.js
index 065bce68..cfa39b24 100644
--- a/src/api/mes/reportWork.js
+++ b/src/api/mes/reportWork.js
@@ -81,7 +81,29 @@ export function getLineChartData() {
 		method: 'get'
 	});
 }
-
+// 首页-各线体当日计划产量(横向柱状图)
+export function getLineProData(data) {
+	return request({
+		url: '/mes/reportWork/getLineProData',
+		method: 'post',
+		params: data
+	});
+}
+// 首页-当月各日实际产量(单折线图，
+export function getMonthProData() {
+	return request({
+		url: '/mes/reportWork/getMonthProData',
+		method: 'get',
+	});
+}
+// 首页-当日产品产量(饼图)
+export function getProductProData(data) {
+	return request({
+		url: '/mes/reportWork/getProductProData',
+		method: 'post',
+		params: data,
+	});
+}
 // 获取组线每月设备故障数
 export function getGroupLineEquInfo() {
   return request({
diff --git a/src/views/dashboard/DeviceChartLine.vue b/src/views/dashboard/DeviceChartLine.vue
index 7ee95078..934b8cfa 100644
--- a/src/views/dashboard/DeviceChartLine.vue
+++ b/src/views/dashboard/DeviceChartLine.vue
@@ -1,7 +1,7 @@
 
 <template>
   <div>
-    <div ref="chart" style="width:90%;height:300px"></div>
+    <div ref="chart" style="width:90%;height:260px"></div>
   </div>
 
 </template>
diff --git a/src/views/dashboard/LineChart copy.vue b/src/views/dashboard/LineChart copy.vue
deleted file mode 100644
index 8e002588..00000000
--- a/src/views/dashboard/LineChart copy.vue	
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <div :class="className" :style="{height:height,width:width}" />
-</template>
-
-<script>
-import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    chartData: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      chart: null,
-       lineChartData: lineChartData
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-      }
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-      this.setOptions(this.chartData)
-    },
-    setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
-        xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          boundaryGap: false,
-          axisTick: {
-            show: false
-          }
-        },
-        grid: {
-          left: 10,
-          right: 10,
-          bottom: 20,
-          top: 30,
-          containLabel: true
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
-          },
-          padding: [5, 10]
-        },
-        yAxis: {
-          axisTick: {
-            show: false
-          }
-        },
-        legend: {
-          data: ['expected', 'actual']
-        },
-        series: [{
-          name: 'expected', itemStyle: {
-            normal: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2
-              }
-            }
-          },
-          smooth: true,
-          type: 'line',
-          data: expectedData,
-          animationDuration: 2800,
-          animationEasing: 'cubicInOut'
-        },
-        {
-          name: 'actual',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
-                color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
-              }
-            }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
-      })
-    }
-  }
-}
-</script>
diff --git a/src/views/dashboard/LineChart.vue b/src/views/dashboard/LineChart.vue
index 59455010..d0352323 100644
--- a/src/views/dashboard/LineChart.vue
+++ b/src/views/dashboard/LineChart.vue
@@ -30,7 +30,8 @@
       },
       chartData: {
         type: Object,
-        required: true
+        required: true,
+        default: {},
       }
     },
     data() {
diff --git a/src/views/dashboard/LineChartshadow.vue b/src/views/dashboard/LineChartshadow.vue
new file mode 100644
index 00000000..2b1d27a2
--- /dev/null
+++ b/src/views/dashboard/LineChartshadow.vue
@@ -0,0 +1,203 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "300px",
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      type: Object,
+      // required: true,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(newValue, oldValue) {
+        this.chart.dispose();
+        this.chartData = newValue;
+        this.initChart(); //值发生改变则渲染一次echarts
+      },
+    },
+  },
+  mounted() {
+    // debugger
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions(this.chartData);
+    },
+
+    setOptions({ seriesNames, xAxisDatas, seriesDatas } = {}) {
+      var fontColor = "#30eee9";
+      var yDatas = [];
+      var xAxisDatas = [];
+      if (this.chartData) {
+        xAxisDatas = this.chartData.xAxisDatas;
+        yDatas = this.chartData.yDatas;
+      }
+      let max = Math.max(...yDatas);
+      this.chart.setOption({
+        grid: {
+          left: "5%",
+          right: "5%",
+          top: "10%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        tooltip: {
+          show: true,
+          trigger: "item",
+        },
+        legend: {
+          show: true,
+          x: "center",
+          y: "35",
+          icon: "stack",
+          itemWidth: 10,
+          itemHeight: 10,
+          textStyle: {
+            color: "#1bb4f6",
+          },
+          data: ["已采纳", "已发布", "浏览量"],
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              color: fontColor,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#397cbc",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#195384",
+              },
+            },
+            data: xAxisDatas,
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "数量",
+            min: 0,
+            max: max + 100,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "#2ad1d2",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#27b4c2",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#11366e",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "产量",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 8,
+            smooth: false,
+            itemStyle: {
+              normal: {
+                color: "#0092f6",
+                lineStyle: {
+                  color: "#0092f6",
+                  width: 1,
+                },
+                areaStyle: {
+                  //color: '#94C9EC'
+                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                    {
+                      offset: 0,
+                      color: "rgba(7,44,90,0.3)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0,146,246,0.9)",
+                    },
+                  ]),
+                },
+                label: {
+                  show: true,
+                  position: "top",
+                },
+              },
+            },
+            markPoint: {
+              itemStyle: {
+                normal: {
+                  color: "red",
+                },
+              },
+            },
+            data: yDatas,
+            // data:[]
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/dashboard/PieChart3.vue b/src/views/dashboard/PieChart3.vue
new file mode 100644
index 00000000..6eb9d3bb
--- /dev/null
+++ b/src/views/dashboard/PieChart3.vue
@@ -0,0 +1,208 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "230px",
+    },
+    chartData: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+
+  watch: {
+    chartData: {
+      deep: true,
+      handler(newValue, oldValue) {
+        this.chart.dispose();
+        this.chartData = newValue;
+        this.initChart(); //值发生改变则渲染一次echarts
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      var ydata = [];
+      var color = [
+        "#8d7fec",
+        "#5085f2",
+        "#e75fc3",
+        "#f87be2",
+        "#f2719a",
+        "#fca4bb",
+        "#f59a8f",
+        "#fdb301",
+        "#57e7ec",
+        "#cf9ef1",
+      ];
+      var xdata = [];
+      if (this.chartData) {
+        this.chartData.forEach((item) => {
+          let a = {};
+          a.name = item.productName;
+          a.value = item.quantitySplit;
+          xdata.push(item.productName);
+          ydata.push(a);
+        });
+      }
+      this.chart.setOption({
+        // backgroundColor: "rgba(255,255,255,1)",
+        color: color,
+        legend: {
+          orient: "vartical",
+          x: "left",
+          top: "0%",
+          left: "32%",
+          bottom: "0%",
+          data: xdata,
+          itemWidth: 8,
+          itemHeight: 8,
+          itemGap: 16,
+
+          /*formatter:function(name){
+	      var oa = option.series[0].data;
+	      var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
+	      for(var i = 0; i < option.series[0].data.length; i++){
+              if(name==oa[i].name){
+              	return ' '+name + '    |    ' + oa[i].value + '    |    ' + (oa[i].value/num * 100).toFixed(2) + '%';
+              }
+	      }
+	    }*/
+
+          formatter: function (name) {
+            return "" + name;
+          },
+        },
+        series: [
+          {
+            type: "pie",
+            clockwise: false, //饼图的扇区是否是顺时针排布
+            minAngle: 2, //最小的扇区角度（0 ~ 360）
+            radius: ["50%", "85%"],
+            center: ["20%", "50%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              //图形样式
+              normal: {
+                borderColor: "#ffffff",
+                borderWidth: 6,
+              },
+            },
+            label: {
+              normal: {
+                show: false,
+                position: "center",
+                formatter: "{text|{b}}\n{c} ({d}%)",
+                rich: {
+                  text: {
+                    color: "#666",
+                    fontSize: 14,
+                    align: "center",
+                    verticalAlign: "middle",
+                    padding: 8,
+                  },
+                  value: {
+                    color: "#8693F3",
+                    fontSize: 20,
+                    align: "center",
+                    verticalAlign: "middle",
+                  },
+                },
+              },
+              emphasis: {
+                show: true,
+                textStyle: {
+                  fontSize: 24,
+                },
+              },
+            },
+            data: ydata,
+          },
+        ],
+      });
+      let dataCount1 = ydata.length;
+      this.chart.on("mouseover", (e) => {
+        this.chart.dispatchAction({
+          type: "highlight",
+          seriesIndex: 0,
+          dataIndex: e.dataIndex,
+        });
+        // 根据当前option中data的length，遍历取消其他高亮
+        for (let i = 0; i < dataCount1; i++) {
+          if (i != e.dataIndex) {
+            this.chart.dispatchAction({
+              type: "downplay",
+              seriesIndex: 0,
+              dataIndex: i,
+            });
+          }
+        }
+      });
+      //鼠标移出后显示之前默认高亮的那块，其他取消高亮
+      this.chart.on("mouseout", (e) => {
+        this.chart.dispatchAction({
+          type: "highlight",
+          seriesIndex: 0,
+          dataIndex: 0,
+        });
+        if (e.dataIndex !== 0) {
+          this.chart.dispatchAction({
+            type: "downplay",
+            seriesIndex: 0,
+            dataIndex: e.dataIndex,
+          });
+        } else {
+          this.chart.dispatchAction({
+            type: "highlight",
+            seriesIndex: 0,
+            dataIndex: 0,
+          });
+        }
+      });
+      setTimeout(() => {
+        this.chart.dispatchAction({
+          type: "highlight",
+          seriesIndex: 0,
+          dataIndex: 1,
+        });
+      }, 500);
+    },
+  },
+};
+</script>
diff --git a/src/views/dashboard/QcChartLine.vue b/src/views/dashboard/QcChartLine.vue
index 20f10328..f95ee8cd 100644
--- a/src/views/dashboard/QcChartLine.vue
+++ b/src/views/dashboard/QcChartLine.vue
@@ -1,7 +1,7 @@
 
 <template>
   <div>
-    <div ref="chart" style="width:90%;height:300px"></div>
+    <div ref="chart" style="width:90%;height:260px"></div>
   </div>
 
 </template>
@@ -26,7 +26,7 @@
       },
       height: {
         type: String,
-        default: '260px'
+        default: '230px'
       },
       autoResize: {
         type: Boolean,
@@ -34,7 +34,8 @@
       },
       chartData: {
         type: Object,
-        required: true
+        required: true,
+        default: {},
       }
     },
     data() {
diff --git a/src/views/dashboard/crossBarChart.vue b/src/views/dashboard/crossBarChart.vue
new file mode 100644
index 00000000..e4b0af38
--- /dev/null
+++ b/src/views/dashboard/crossBarChart.vue
@@ -0,0 +1,189 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
+
+const animationDuration = 6000;
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "250px",
+    },
+    chartData: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+
+  watch: {
+    chartData: {
+      deep: true,
+      handler(newValue, oldValue) {
+        this.chart.dispose();
+        this.chartData = newValue;
+        this.initChart(); //值发生改变则渲染一次echarts
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");   
+      let yLabel = [];
+      let yData = [];
+      let yRtData = [];
+      if(this.chartData.length>0){
+        this.chartData.forEach((item) => {
+          yLabel.push(item.machineName)
+          yData.push(item.quantitySplit)
+          yRtData.push(item.quantitySplit)
+        });
+      }
+      this.chart.setOption({
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "10%",
+          top: "5%",
+          containLabel: true,
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          backgroundColor: "RGBA(0, 49, 85, 1)",
+          borderColor: "rgba(0, 151, 251, 1)",
+          borderWidth: 1,
+          borderRadius: 0,
+          axisPointer: {
+            type: "none",
+            // show:false
+          },
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 16,
+            align: "left",
+          },
+          formatter: function (a) {
+            return a[0].seriesName + "：" + a[0].value;
+          },
+        },
+        // backgroundColor: "#031d33",
+        xAxis: {
+          show: true,
+          type: "value",
+          // data:xData
+          splitNumber: 7,
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            //	margin:15,
+            textStyle: {
+              // color: "rgba(128, 207, 240, 1)",
+              fontStyle: "normal",
+              fontSize: 16,
+              // fontWeight: 'bolder'
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            axisLabel: {
+              show: true,
+              margin: 15,
+              textStyle: {
+                fontSize: "16",
+                fontWeight: "bolder",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            data: yLabel,
+          },
+          {
+            type: "category",
+            inverse: true,
+            axisTick: "none",
+            axisLine: "none",
+            show: true,
+            axisLabel: {
+              textStyle: {
+                color: "rgba(128, 207, 240, 1)",
+                fontSize: "16",
+              },
+              formatter: function (value) {
+                return  value;
+              },
+            },
+            data: yRtData,
+          },
+        ],
+        series: [
+          {
+            name: "数量",
+            type: "bar",
+            zlevel: 1,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 1,
+                    color: "#0097FB",
+                  },
+                  {
+                    offset: 0,
+                    color: "#30ECA6",
+                  },
+                ]),
+                // shadowBlur: 0,
+                // shadowColor: 'rgba(87,220,222,0.7)',
+              },
+            },
+            barWidth: 18,
+            data: yData,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/index.vue b/src/views/index.vue
index 0fcfcd1b..34fb5f04 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,17 +1,72 @@
 <template>
   <div class="app-container home">
-    <el-row :gutter="20">
+    <div class="top">
+      <div class="echartsbox1">
+        <div class="titlename">各线体当日计划产量</div>
+        <crossBarChart :chart-data="crossBarChart" ref="crossBarChart" />
+        <div class="el-date-picker">
+          <el-date-picker
+            v-model="value1"
+            type="date"
+            format="yyyy-MM-dd"
+            placeholder="选择日期"
+            @change="changecrossBarChart"
+          >
+          </el-date-picker>
+        </div>
+      </div>
+      <div class="echartsbox1 echartsbox2">
+        <div class="titlename">当日产品产量</div>
+        <PieChart3 :chart-data="PieChart3Data" ref="PieChart3" />
+        <div class="el-date-picker">
+          <el-date-picker
+            v-model="value2"
+            format="yyyy-MM-dd"
+            type="date"
+            placeholder="选择日期"
+            @change="changePieChart3Data"
+          >
+          </el-date-picker>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <div class="echartsbox3">
+        <div class="titlename">
+          {{ titlename }}
+        </div>
+        <div style="">
+          <LineChartshadow :chart-data="lineChartData" ref="lineChart" />
+        </div>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="echartsbox4">
+        <div class="titlename">各线体设备月故障数</div>
+        <DeviceChartLine
+          :chart-data="deviceChartLineData"
+          ref="DeviceChartLine"
+        />
+      </div>
+      <div class="echartsbox4 echartsbox5">
+        <div class="titlename">各车间生产不良率</div>
+        <QcChartLine :chart-data="qcChartLineData" ref="QcChartLine" />
+      </div>
+    </div>
+    <!-- <el-row :gutter="20">
       <el-col :sm="24" :lg="24">
-         <span style="font-size: 20px;margin: 40%;color: cadetblue;">{{title}}</span>
+        <span style="font-size: 20px; margin: 40%; color: cadetblue">{{
+          titlename
+        }}</span>
       </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col :span="24">
-        <div style="border: 1px solid #cfdee4;">
-        <line-chart :chart-data="lineChartData" ref="lineChart"/>
+        <div style="border: 1px solid #cfdee4">
+          <line-chart :chart-data="lineChartData" ref="lineChart" />
         </div>
       </el-col>
-    </el-row>
+    </el-row> -->
     <!--
      <el-row :gutter="20">
       <el-col :span="12">
@@ -21,30 +76,48 @@
         <pie-chart ref="pieChart2"/>
       </el-col>
     </el-row>-->
-    <el-row :gutter="20">
+    <!-- <el-row :gutter="20">
       <el-col :span="12">
-        <span style="font-size: 18px;padding: 1% 39%;color: cadetblue;">各线体设备月故障数</span>
+        <span style="font-size: 18px; padding: 1% 39%; color: cadetblue"
+          >各线体设备月故障数</span
+        >
       </el-col>
       <el-col :span="12">
-        <span style="font-size: 18px;padding: 1% 39%;color: cadetblue;">各车间生产不良率</span>
+        <span style="font-size: 18px; padding: 1% 39%; color: cadetblue"
+          >各车间生产不良率</span
+        >
       </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col :span="12">
-        <DeviceChartLine :chart-data="deviceChartLineData" ref="DeviceChartLine"/>
+        <DeviceChartLine
+          :chart-data="deviceChartLineData"
+          ref="DeviceChartLine"
+        />
       </el-col>
       <el-col :span="12">
-        <QcChartLine :chart-data="qcChartLineData" ref="QcChartLine"/>
+        <QcChartLine :chart-data="qcChartLineData" ref="QcChartLine" />
       </el-col>
-    </el-row>
+    </el-row> -->
   </div>
 </template>
 
 <script>
-import LineChart from './dashboard/LineChart';
-import PieChart from './dashboard/PieChart';
-import PieChart2 from './dashboard/PieChart2';
-import {getGroupLineEquInfo, getLineChartData,getLineQcData} from '@/api/mes/reportWork'
+import LineChart from "./dashboard/LineChart";
+import LineChartshadow from "./dashboard/LineChartshadow";
+import crossBarChart from "./dashboard/crossBarChart";
+import PieChart from "./dashboard/PieChart";
+import PieChart2 from "./dashboard/PieChart2";
+import PieChart3 from "./dashboard/PieChart3";
+import moment from "moment";
+import {
+  getGroupLineEquInfo,
+  getLineChartData,
+  getLineQcData,
+  getLineProData,
+  getMonthProData,
+  getProductProData,
+} from "@/api/mes/reportWork";
 import DeviceChartLine from "./dashboard/DeviceChartLine";
 import QcChartLine from "./dashboard/QcChartLine";
 export default {
@@ -52,30 +125,72 @@ export default {
   components: {
     DeviceChartLine,
     QcChartLine,
-    LineChart//,PieChart,PieChart2
+    LineChart, //,PieChart,PieChart2
+    crossBarChart,
+    PieChart3,
+    LineChartshadow,
   },
   data() {
     return {
       // 版本号
       version: "1.0.0",
       lineChartData: null,
-      deviceChartLineData:null,
-      qcChartLineData:null,
-      title:"本月工厂产量"
+      deviceChartLineData: null,
+      qcChartLineData: null,
+      titlename: "本月工厂产量",
+      crossBarChart: null,
+      PieChart3Data: null,
+      value1: null,
+      value2: null,
     };
   },
   created() {
-		this.getLineChartData();
-    
-	},
+    this.getLineChartData();
+  },
+
+  mounted() {
+    // this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
+    this.value1 = moment().format("yyyy-MM-DD");
+    this.value2 = moment().format("yyyy-MM-DD");
+    this.getLineProData();
+    this.getProductProData();
+    this.getMonthProData();
+  },
   methods: {
     goTarget(href) {
       window.open(href, "_blank");
     },
-    getLineChartData(){
-        getLineChartData().then(data => {
-          this.lineChartData = data;
-        });
+    getLineChartData() {
+      getLineChartData().then((data) => {
+        this.lineChartData = data;
+      });
+    },
+    getLineProData() {
+      getLineProData({
+        productDate: this.value1,
+      }).then((data) => {
+        this.crossBarChart = data;
+      });
+    },
+    getMonthProData() {
+      getMonthProData().then((data) => {
+        this.lineChartData = data;
+      });
+    },
+    getProductProData() {
+      getProductProData({
+        productDate: this.value2,
+      }).then((data) => {
+        this.PieChart3Data = data;
+      });
+    },
+    changecrossBarChart() {
+      this.value1 = moment(this.value1).format("yyyy-MM-DD");
+      this.getLineProData();
+    },
+    changePieChart3Data() {
+      this.value2 = moment(this.value2).format("yyyy-MM-DD");
+      this.getProductProData();
     },
     /**
     getGroupLineEquInfo(){
@@ -150,5 +265,96 @@ export default {
     }
   }
 }
+.app-container {
+  background: #d8e9fd;
+  height: calc(100vh - 84px);
+  overflow: hidden;
+  .top {
+    width: 100%;
+    display: flex;
+    .echartsbox1 {
+      position: relative;
+      width: 49.5%;
+      height: 270px;
+      background: #ffffff;
+      border-radius: 15px;
+      margin-right: 10px;
+      .titlename {
+        padding: 10px;
+        font-size: 20px;
+        color: #ffffff;
+        background-color: #547bfe;
+        box-sizing: border-box;
+        border-radius: 15px 15px 0px 0px;
+      }
+    }
+    .echartsbox2 {
+      position: relative;
+      width: 49.5%;
+      background: #ffffff;
+      border-radius: 15px;
+      margin-right: 0px;
+      padding-bottom: 10px;
+      .titlename {
+        background-color: #42c6f3;
+      }
+    }
+  }
+  .content {
+    margin-top: 10px;
+    .echartsbox3 {
+      position: relative;
+      width: 100%;
+      height: 370px;
+      background: #ffffff;
+      border-radius: 15px;
+      margin-right: 10px;
+      .titlename {
+        padding: 10px;
+        font-size: 20px;
+        color: #ffffff;
+        background-color: #58dc91;
+        box-sizing: border-box;
+        border-radius: 15px 15px 0px 0px;
+      }
+    }
+  }
+  .bottom {
+    margin-top: 10px;
+    display: flex;
+    .echartsbox4 {
+      position: relative;
+      width: 50%;
+      height: 324px;
+      background: #ffffff;
+      border-radius: 15px;
+      margin-right: 10px;
+      .titlename {
+        padding: 10px;
+        font-size: 20px;
+        color: #ffffff;
+        background-color: #d4d52b;
+        box-sizing: border-box;
+        border-radius: 15px 15px 0px 0px;
+      }
+    }
+    .echartsbox5 {
+      position: relative;
+      margin-right: 0px;
+      .titlename {
+        background-color: #ff7168;
+      }
+    }
+  }
+}
+.el-date-picker {
+  position: absolute;
+  right: -90px;
+  top: 8px;
+  height: 60px;
+}
+::v-deep .el-input--medium .el-input__inner {
+  height: 32px;
+}
 </style>
 
diff --git a/src/views/register.vue b/src/views/register.vue
index b61e3d59..910910ec 100644
--- a/src/views/register.vue
+++ b/src/views/register.vue
@@ -145,7 +145,7 @@ export default {
 };
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
 .register {
   display: flex;
   justify-content: center;