diff --git a/src/utils/gradualColor.js b/src/utils/gradualColor.js
new file mode 100644
index 0000000..c4bc2ce
--- /dev/null
+++ b/src/utils/gradualColor.js
@@ -0,0 +1,39 @@
+export const yelloColorList = [
+	'#FFFDE7',
+	'#FFF9C4',
+	'#FFF59D',
+	'#FFF176',
+	'#FFEE58',
+	'#FFEB3B',
+	'#FDD835',
+	'#FBC02D',
+	'#F9A825',
+	'#F57F17',
+]
+export const greenColorList = [
+	'#F1F8E9',
+	'#DCEDC8',
+	'#C5E1A5',
+	'#AED581',
+	'#9CCC65',
+	'#8BC34A',
+	'#7CB342',
+	'#689F38',
+	'#558B2F',
+	'#33691E',
+]
+export const blueColorList = [
+	'#E3F2FD',
+	'#BBDEFB',
+	'#90CAF9',
+	'#64B5F6',
+	'#42A5F5',
+	'#2196F3',
+	'#1E88E5',
+	'#1976D2',
+	'#1565C0',
+	'#0D47A1',
+]
+export const greyColorList = [
+	// #FAFAFA
+]
diff --git a/src/views/bigScreen/qualityManage/1.jpg b/src/views/bigScreen/qualityManage/1.jpg
new file mode 100644
index 0000000..3f7d81f
Binary files /dev/null and b/src/views/bigScreen/qualityManage/1.jpg differ
diff --git a/src/views/bigScreen/qualityManage/bottom1.vue b/src/views/bigScreen/qualityManage/bottom1.vue
new file mode 100644
index 0000000..519970f
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/bottom1.vue
@@ -0,0 +1,382 @@
+<template>
+  <div>
+    <container4 title="总体经营情况">
+      <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
+        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+      <div style="height:100%;width:100%;" ref="chart"></div>
+    </container4>
+  </div>
+
+</template>
+
+<script>
+import container4 from "../components/container4/index.vue";
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+  mixins: [resize],
+  name: 'bottom1',
+  components: {
+    container4,
+  },
+  data () {
+    return {
+      dateRange: [],
+      chart: null,
+
+      option: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: function (params, ticket, callback) {
+            console.log(params)
+            var res = params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
+            }
+            return res;
+          }
+        },
+        grid: {
+          top: '5%',
+          left: '3%',
+          right: '40%',
+          bottom: '3%',
+          containLabel: true
+        },
+        legend: {
+          right: 'center',
+          data: ['收入', '利润', '目标完成'],
+          textStyle: {
+            color: '#fff'
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
+          splitLine: {
+            show: false//不显示网格线
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgb(255, 255, 255)'
+            },
+          }
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false//不显示网格线
+          },
+          splitArea: {
+            show: false//不显示网格区域
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgb(255, 255, 255)'
+            },
+          }
+        },
+        series: [
+          {
+            name: '利润',
+            type: 'bar',
+            stack: 'total',
+            data: [120, 132, 101, 134, 90, 230, 210],
+            itemStyle: {
+              color: 'rgb(116,212,184)',
+            },
+            //             label: {
+            //     show : true,
+            //     position : 'top',
+            //     formatter : "{c}",
+            //     textStyle : {
+            //         color: '#fff'
+            //     }
+            // }
+          },
+          {
+            name: '收入',
+            type: 'bar',
+            stack: 'total',
+            data: [320, 332, 301, 334, 390, 330, 320],
+            barWidth: 30,
+            itemStyle: {
+              color: 'rgb(170,202,253)'
+            },
+          },
+          {
+            name: '目标完成',
+            type: 'bar',
+            stack: 'total',
+            data: [220, 182, 191, 234, 290, 330, 310],
+            itemStyle: {
+              color: 'rgb(245,217,126)'
+            },
+          },
+
+
+          // {
+          //   hoverAnimation: false,
+          //   type: 'pie',
+          //   radius: ['55%', '65%'],
+          //   center: ['75%', '50%'],
+          //   roseType: 'area',
+          //   itemStyle: {
+          //     borderRadius: 5,
+          //     color: 'rgb(245,217,126)',
+          //   },
+          //   data: [
+          //     { value: 30, name: '目标' },
+          //   ],
+          //   label: {
+          //     formatter: '{b}：{c}',
+          //   },
+          //   labelLine: {
+          //     showAbove: true,
+          //     length: -60,
+          //     length2: 145,
+          //   }
+          //   // label: {
+          //   //   fontSize: 14,
+          //   //   position: 'outer',
+          //   //   alignTo: 'edge',
+          //   //   margin: 10,
+          //   // },
+          //   // labelLine: {
+          //   //   showAbove: true,
+          //   // }
+          // },
+          //进度线
+          // {
+          //   type: "pie",
+          //   radius: ['55%', '65%'],
+          //   center: ['75%', '50%'],
+          //   itemStyle: {
+          //     borderRadius: 5,
+          //     color: 'rgb(245,217,126)',
+          //   },
+          //   hoverAnimation: false,
+          //   clockwise: false,
+          //   data: [
+          //     {
+          //       name: "",
+          //       value: 80, //进度
+          //       labelLine: {
+          //         show: false
+          //       },
+
+          //       emphasis: {
+          //         labelLine: {
+          //           show: false
+          //         },
+          //         itemStyle: {
+          //           // color: "#5886f0"
+          //         }
+          //       }
+          //     },
+          //     {
+          //       //画剩余的刻度圆环
+          //       name: "",
+          //       value: 100 - 80,
+          //       clockwise: false,
+          //       itemStyle: {
+          //         color: "rgba(255,255,255,0)"
+          //       },
+          //       label: {
+          //         show: false
+          //       },
+          //       labelLine: {
+          //         show: false
+          //       },
+          //       emphasis: {
+          //         labelLine: {
+          //           show: false
+          //         },
+          //         itemStyle: {
+          //           color: "rgba(255,255,255,0)"
+          //         }
+          //       }
+          //     }
+          //   ],
+          //   label: {
+          //     formatter: '{b}：{c}',
+          //   },
+          //   labelLine: {
+          //     showAbove: true,
+          //     length: -60,
+          //     length2: 145,
+          //   }
+          // },
+          {
+            name: '利润',
+            type: 'pie',
+            hoverAnimation: false,
+            radius: ['55%', '65%'],
+            center: ['75%', '50%'],
+            labelLine: {
+              length: 30
+            },
+            label: {
+              formatter: '{b}：{c}',
+              borderWidth: 1,
+              borderRadius: 4,
+              alignTo: 'edge',
+              margin: '10'
+            },
+            itemStyle: {
+              borderRadius: 5,
+              color: 'rgb(116,212,184)'
+            },
+            data: [
+              { value: 10, name: '利润' },
+              {
+                //画剩余的刻度圆环
+                name: "",
+                value: 100 - 80,
+                clockwise: false,
+                itemStyle: {
+                  color: "rgba(255,255,255,0)"
+                },
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false
+                  },
+                  itemStyle: {
+                    color: "rgba(255,255,255,0)"
+                  }
+                }
+              }
+            ],
+          },
+          {
+            name: '目标',
+            type: 'pie',
+            hoverAnimation: false,
+            radius: ['40%', '50%'],
+            center: ['75%', '50%'],
+            labelLine: {
+              length: 30
+            },
+            label: {
+              formatter: '{b}：{c}',
+              borderWidth: 1,
+              borderRadius: 4,
+              alignTo: 'edge',
+              margin: '10'
+            },
+            itemStyle: {
+              borderRadius: 5,
+              color: 'rgb(245,217,126)'
+            },
+            data: [
+              { value: 80, name: '目标' },
+              {
+                //画剩余的刻度圆环
+                name: "",
+                value: 100 - 80,
+                clockwise: false,
+                itemStyle: {
+                  color: "rgba(255,255,255,0)"
+                },
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false
+                  },
+                  itemStyle: {
+                    color: "rgba(255,255,255,0)"
+                  }
+                }
+              }
+            ],
+          },
+                    {
+            name: '收入',
+            type: 'pie',
+            hoverAnimation: false,
+            radius: ['70%', '80%'],
+            center: ['75%', '50%'],
+            labelLine: {
+              length: 30
+            },
+            label: {
+              formatter: '{b}：{c}',
+              borderWidth: 1,
+              borderRadius: 4,
+              alignTo: 'edge',
+              margin: '10'
+            },
+            itemStyle: {
+              borderRadius: 5,
+              color: 'rgb(170,202,253)'
+            },
+            data: [
+              { value: 60, name: '收入' },
+              {
+                //画剩余的刻度圆环
+                name: "",
+                value: 60,
+                clockwise: false,
+                itemStyle: {
+                  color: "rgba(255,255,255,0)"
+                },
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false
+                  },
+                  itemStyle: {
+                    color: "rgba(255,255,255,0)"
+                  }
+                }
+              }
+            ],
+          }
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy () {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart () {
+      this.chart = echarts.init(this.$refs.chart, 'macarons');
+      this.chart.setOption(this.option);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/bigScreen/qualityManage/bottom2.vue b/src/views/bigScreen/qualityManage/bottom2.vue
new file mode 100644
index 0000000..2343c0d
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/bottom2.vue
@@ -0,0 +1,348 @@
+<template>
+  <div>
+    <container4 title="总体生产情况">
+      <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
+        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+      <div style="height:100%;width:100%;" ref="chart"></div>
+    </container4>
+  </div>
+
+</template>
+
+<script>
+import container4 from "../components/container4/index.vue";
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+import 'echarts-liquidfill'
+export default {
+  mixins: [resize],
+  name: 'bottom1',
+  components: {
+    container4,
+  },
+  data () {
+    return {
+      dateRange: [],
+      option: {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+          },
+          formatter: function (params, ticket, callback) {
+            console.log(params)
+            var res = params[0].name;
+            for (var i = 0, l = params.length; i < l; i++) {
+              res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
+            }
+            setTimeout(function () {
+              // 仅为了模拟异步回调
+              callback(ticket, res);
+            }, 100)
+            return 'loading...';
+          }
+        },
+        legend: {
+          data: ['交付产品', '装药量'],
+          textStyle: {
+            color: '#fff'
+          },
+        },
+        grid: {
+          top: '10%',
+          left: '3%',
+          right: '35%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            axisLabel: {
+              formatter: function (value) {
+                return Math.abs(value);//显示的数值都取绝对值
+              }
+            },
+            type: 'value',
+            splitLine: {
+              show: false//不显示网格线
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgb(255, 255, 255)'
+              },
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: { show: false },
+            // data : ['0~5岁','5~10岁','10-30岁','30-50岁','50-70岁','70-100','100以上']
+            data: ['2021.12', '2021.11', '2021.10', '2021.09', '2021.08'].reverse(),
+            splitLine: {
+              show: false//不显示网格线
+            },
+            splitArea: {
+              show: false//不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgb(255, 255, 255)'
+              },
+            },
+          }
+        ],
+        title: {
+          text: `${80}%`,
+          left: "80%",
+          top: "40%",
+          textAlign: 'center',
+          textStyle: {
+            fontWeight: "normal",
+            fontSize: 26,
+            fontWeight: 'bold',
+            color: "rgb(255,255,255)",
+          },
+        },
+        series: [
+          {
+            name: '交付产品',
+            type: 'bar',
+            stack: '总量',
+            barWidth: 20,
+            label: {
+              normal: {
+                show: true,
+                position: 'inside',
+
+              }
+            },
+            data: [320, 302, 341, 374, 390],
+            itemStyle: {
+              color: 'rgb(115,208,183)'
+            },
+          },
+          {
+            name: '装药量',
+            type: 'bar',
+            stack: '总量',
+            label: {
+              normal: {
+                show: true,
+                position: 'inside',
+                formatter: function (v) { return Math.abs(v.data) }
+              }
+            },
+
+            data: [-120, -132, -101, -134, -190],
+            itemStyle: {
+              color: 'rgb(151,186,255)'
+            },
+          },
+          {
+            type: 'liquidFill',
+            radius: '40%',
+            z: 1,
+            center: ['50%', '50%'],
+            amplitude: 20,
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#324791',
+                },
+                {
+                  offset: 1,
+                  color: '#449090',
+                },
+              ],
+              globalCoord: false,
+            },
+            data: [
+              0.4,
+              {
+                value: 0.4,
+                direction: 'left',
+              },
+            ],
+            backgroundStyle: {
+              borderWidth: 1,
+              color: 'transparent',
+            },
+            label: {
+              normal: {
+                formatter: '',
+              },
+            },
+            outline: {
+              show: true,
+              itemStyle: {
+                borderWidth: 0,
+              },
+              borderDistance: 0,
+            },
+          },
+
+          {
+            type: "liquidFill", // 图表类型
+            radius: "70%",
+            center: ["80%", "50%"],
+            data: [
+              80 / 100,
+              80 / 100,
+            ], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: "rgba(255,255,255,0)"
+            },
+            label: {
+              normal: {
+                show: false, //不显示label  用副标题代替了
+                formatter: (0.5 * 100).toFixed(0) + "%",
+                textStyle: {
+                  fontSize: 38,
+                  color: "black"
+                }
+              }
+            },
+            color: [  //color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "rgba(82,157,240,0.1)"
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(104,222,219,0.5)"
+                  }
+                ],
+                globalCoord: false
+              },
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "rgba(82,157,240,0.1)"
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(104,222,219,0.5)"
+                  }
+                ],
+                globalCoord: false
+              },
+            ],
+            outline: {
+              show: false
+            }
+          },
+
+          //进度线
+          {
+            type: "pie",
+            center: ["80%", "50%"],
+            radius: ["75%", "80%"], //进度线粗细
+            hoverAnimation: false,
+            clockwise: false,
+            data: [
+              {
+                name: "",
+                value: 80, //进度
+                labelLine: {
+                  show: false
+                },
+                itemStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 1,
+                    y2: 2,
+                    colorStops: [
+                      // !! 在此添加渐变过程色 !!
+                      { offset: 0, color: "#68DEDB" },
+                      { offset: 1, color: "#529DF0" }
+                    ]
+                  }
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false
+                  },
+                  itemStyle: {
+                    // color: "#5886f0"
+                  }
+                }
+              },
+              {
+                //画剩余的刻度圆环
+                name: "",
+                value: 100 - 80,
+                clockwise: false,
+                itemStyle: {
+                  color: "rgba(255,255,255,0)"
+                },
+                label: {
+                  show: false
+                },
+                labelLine: {
+                  show: false
+                },
+                emphasis: {
+                  labelLine: {
+                    show: false
+                  },
+                  itemStyle: {
+                    color: "rgba(255,255,255,0)"
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      }
+
+
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy () {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart () {
+      this.chart = echarts.init(this.$refs.chart, 'macarons');
+      this.chart.setOption(this.option);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/bigScreen/qualityManage/center.png b/src/views/bigScreen/qualityManage/center.png
new file mode 100644
index 0000000..88b5e78
Binary files /dev/null and b/src/views/bigScreen/qualityManage/center.png differ
diff --git a/src/views/bigScreen/qualityManage/center.vue b/src/views/bigScreen/qualityManage/center.vue
new file mode 100644
index 0000000..9440343
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/center.vue
@@ -0,0 +1,180 @@
+<template>
+	<div>
+		<center1>
+			<div class="data">
+				<div class="data-item">
+					<div><span style="font-weight: bold">质量体系整改率</span></div>
+					<div class="box"><span>98</span>%</div>
+					<div style="width: 100%"><progressBar :percentage="98" /></div>
+				</div>
+				<div class="data-item">
+					<div><span style="font-weight: bold">产品合格率</span></div>
+					<div class="box"><span>98</span>%</div>
+					<div style="width: 100%"><progressBar :percentage="98" /></div>
+				</div>
+				<div class="data-item">
+					<div><span style="font-weight: bold">一般性质量问题数量</span></div>
+					<div class="box" style="font-size: 18px"><span style="color: #55c5a2; margin: 0 5px">↓</span>20%</div>
+					<div class="box"><i>38/40</i><span class="num2"></span></div>
+				</div>
+				<div class="data-item">
+					<div><span style="font-weight: bold">低层次问题数</span></div>
+					<div class="box"><i>0/0</i><span class="num2"></span></div>
+				</div>
+				<div class="data-item">
+					<div><span style="font-weight: bold">小型产品合格率</span></div>
+					<div class="box"><span>98</span>%</div>
+					<div style="width: 100%"><progressBar :percentage="98" /></div>
+				</div>
+				<div class="data-item">
+					<div><span style="font-weight: bold">产品错/漏检率</span></div>
+					<div class="box"><span>33%/0%</span></div>
+				</div>
+				<div class="data-item">
+					<div><span style="font-weight: bold">质量计划完成率</span></div>
+					<div class="box"><span>80</span>%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">55</span></div>
+					<div style="width: 100%"><progressBar :percentage="98" /></div>
+				</div>
+				<div class="data-item">
+					<div><span style="font-weight: bold">质量检查完成率</span></div>
+					<div class="box"><span>70</span>%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">60</span></div>
+					<div style="width: 100%"><progressBar :percentage="98" /></div>
+				</div>
+			</div>
+		</center1>
+	</div>
+</template>
+
+<script>
+import center1 from './components/center1/index.vue'
+import rocketTit from '../components/rocketTit/index.vue'
+import progressBar from './../components/progress/index.vue'
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+	mixins: [resize],
+	name: 'left1',
+	components: {
+		center1,
+		rocketTit,
+		progressBar,
+	},
+	data() {
+		return {}
+	},
+	mounted() {},
+	beforeDestroy() {},
+	methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+.tit {
+	padding: 16px 24px;
+}
+.img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: -1;
+}
+.data {
+	display: flex;
+	// justify-content: space-around;
+	flex-wrap: wrap;
+	background: rgba(2, 18, 63, 0.33);
+	color: #ffffff;
+	font-size: 18px;
+	.data-item {
+		width: 24%;
+		height: 147px;
+		padding: 10px;
+		margin: 7px 7px 0 0;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: space-between;
+		background-color: rgba(145, 213, 254, 0.09);
+		> div {
+			margin: 5px 0;
+			text-align: center;
+			font-size: 16px;
+			img {
+				// width: 10px;
+				// height: 10px;
+				vertical-align: middle;
+				margin-right: 5px;
+			}
+		}
+		.box {
+			font-size: 26px;
+			font-family: Roboto-BlackItalic, Roboto;
+			font-weight: 600;
+			color: #91d5fe;
+		}
+		.num {
+			font-size: 14px;
+		}
+		.num2 {
+			font-size: 16px;
+			margin-left: 5px;
+			color: #fff;
+		}
+	}
+}
+
+.center1 {
+	position: relative;
+	.con_right {
+		width: 138px;
+		position: absolute;
+		top: 41%;
+		right: 43%;
+		color: #fff;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		.con_title {
+			width: 100%;
+			height: 42px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			img {
+				width: 18px;
+				height: 18px;
+				margin-right: 3px;
+			}
+		}
+		.con_title_bg1 {
+			background: url('./img/left1/1.png') no-repeat;
+		}
+		.con_title_bg2 {
+			background: url('./img/left1/2.png') no-repeat;
+		}
+		.con_title_bg3 {
+			background: url('./img/left1/3.png') no-repeat;
+		}
+		.com_img {
+			margin-top: 5px;
+			width: 40px;
+			height: 40px;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+	.con_two {
+		top: 37%;
+		left: 13%;
+	}
+	.con_three {
+		top: 70%;
+		right: 16%;
+	}
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/center2.vue b/src/views/bigScreen/qualityManage/center2.vue
new file mode 100644
index 0000000..c553d5a
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/center2.vue
@@ -0,0 +1,239 @@
+<template>
+	<div>
+		<center2 title="关键参数SPC分析">
+			<el-select v-model="value" slot="datePicker" size="mini" placeholder="请选择"> </el-select>
+			<div style="height: 100%; width: 100%" ref="chart"></div>
+		</center2>
+	</div>
+</template>
+
+<script>
+import center2 from './components/center2/index.vue'
+import rocketTit from '../components/rocketTit/index.vue'
+import bigScreenTabs from '../components/bigScreenTabs/index.vue'
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+	mixins: [resize],
+	name: 'left1',
+	components: {
+		center2,
+		rocketTit,
+		bigScreenTabs,
+	},
+	data() {
+		return {
+			value: '',
+			chart: null,
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initChart()
+		})
+	},
+	beforeDestroy() {},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$refs.chart)
+			this.setOptions()
+		},
+		setOptions() {
+			this.chart.setOption({
+				legend: {
+					data: ['X管制图', 'R管制图'],
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				grid: {
+					left: '3%',
+					right: '6%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: [
+							'产品实物一',
+							'产品实物一',
+							'产品实物一',
+							'产品实物一',
+							'产品实物一',
+							'产品实物一',
+							'产品实物一',
+							'产品实物一',
+							'产品实物一',
+							'产品实物一',
+							'产品实物一',
+							'产品实物一',
+						],
+						axisPointer: {
+							type: 'shadow',
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				yAxis: [
+					{
+						type: 'value',
+						name: '',
+						min: 0,
+						// max: 250,
+						// interval: 50,
+						axisLabel: {
+							formatter: '{value}',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+					{
+						type: 'value',
+						min: 0,
+						max: 0.8,
+						interval: 0.2,
+						axisLabel: {
+							formatter: '{value}',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				grid: {
+					containLabel: true,
+					width: '99%',
+					left: 0,
+					top: 50,
+					bottom: 10,
+				},
+				// dataZoom: {},
+				series: [
+					{
+						name: 'R管制图',
+						type: 'line',
+						barWidth: 20,
+						data: [72.6, 75.9, 79.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 66.0, 62.3],
+						itemStyle: {
+							color: '#61DDAA',
+						},
+						symbol: 'none',
+					},
+					{
+						name: 'X管制图',
+						type: 'line',
+						smooth: false,
+						data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 30.0, 36.5, 42.0, 56.2],
+						itemStyle: {
+							color: '#7EA7FC',
+						},
+						symbol: 'none',
+					},
+				],
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.tit {
+	padding: 16px 24px;
+}
+.img {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: -1;
+}
+.warp-scroll {
+	height: 215px;
+	width: 100%;
+	margin: 0 auto;
+	overflow: hidden;
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0 auto;
+		li,
+		a {
+			display: block;
+			display: flex;
+			justify-content: space-between;
+			font-size: 15px;
+		}
+		li {
+			display: block;
+			height: 42px;
+			line-height: 42px;
+			background: #2a437d;
+			opacity: 0.6;
+			// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
+			margin-bottom: 1px;
+			img {
+				vertical-align: sub;
+				margin-right: 5px;
+			}
+		}
+	}
+}
+.box {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.warp {
+	height: 280px;
+	width: 440px;
+	margin: 0 auto;
+	overflow: hidden;
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0 auto;
+		li,
+		a {
+			display: block;
+			display: flex;
+			justify-content: space-between;
+			font-size: 15px;
+		}
+		li {
+			display: block;
+			height: 30px;
+			line-height: 30px;
+			background: rgba(2, 18, 63, 0.33);
+			padding-left: 20px;
+			margin: 5px 0;
+			img {
+				vertical-align: sub;
+				margin-right: 5px;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/components/center1/index.vue b/src/views/bigScreen/qualityManage/components/center1/index.vue
new file mode 100644
index 0000000..5e75b21
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/components/center1/index.vue
@@ -0,0 +1,47 @@
+<template>
+	<div class="centen1">
+		<slot />
+		<div class="centen1bg"></div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'Centen1',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.centen1 {
+	width: 762px;
+	height: 312px;
+	// background-image: url(./bg.png);
+	background-size: cover;
+	overflow: hidden;
+	z-index: 10;
+	.centen1bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		// background-image: url(./bg.png);
+		background-size: cover;
+		pointer-events: none;
+		user-select: none;
+	}
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/components/center2/bg.png b/src/views/bigScreen/qualityManage/components/center2/bg.png
new file mode 100644
index 0000000..9ee1853
Binary files /dev/null and b/src/views/bigScreen/qualityManage/components/center2/bg.png differ
diff --git a/src/views/bigScreen/qualityManage/components/center2/index.vue b/src/views/bigScreen/qualityManage/components/center2/index.vue
new file mode 100644
index 0000000..07086aa
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/components/center2/index.vue
@@ -0,0 +1,100 @@
+<template>
+	<div class="center2">
+		<div class="tit">
+			<rocketTit>{{ title }}</rocketTit>
+			<div class="datePicker">
+				<slot name="datePicker"></slot>
+			</div>
+		</div>
+		<div class="content">
+			<div class="snap">
+				<slot name="snap"></slot>
+			</div>
+
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+import rocketTit from '../../../components/rocketTit/index.vue'
+
+export default {
+	name: 'center2',
+	components: {
+		rocketTit,
+	},
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.center2 {
+	display: flex;
+	flex-direction: column;
+	width: 762px;
+	height: 312px;
+	background-image: url(./bg.png);
+	background-size: cover;
+	color: #ffffff;
+	font-size: 16px;
+	font-family: PingFangSC-Semibold, PingFang SC;
+	font-weight: 600;
+
+	.tit {
+		padding: 16px 16px 16px 24px;
+		position: relative;
+		.datePicker {
+			position: absolute;
+			right: 16px;
+			top: 12px;
+
+			::v-deep .el-select {
+				border-radius: 0;
+				box-shadow: none !important;
+				border: 1px solid rgba(255, 255, 255, 0.2);
+				vertical-align: middle;
+				color: #fff;
+				background-color: transparent;
+				.el-range-input,
+				.el-range-separator {
+					color: #fff;
+				}
+				.el-range-editor.is-active {
+					border-color: #fff !important;
+				}
+
+				input {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+
+	.content {
+		flex: 1;
+		padding: 2px 2px 2px 22px;
+		box-sizing: border-box;
+		overflow: hidden;
+		position: relative;
+		.snap {
+			position: absolute;
+			top: 20px;
+			left: 25px;
+			font-weight: 300;
+		}
+	}
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/components/container/index.vue b/src/views/bigScreen/qualityManage/components/container/index.vue
new file mode 100644
index 0000000..17963c2
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/components/container/index.vue
@@ -0,0 +1,121 @@
+<template>
+	<div class="container2">
+		<div class="tit">
+			<rocketTit>{{ title }}</rocketTit>
+			<hr style="border: 0; border-bottom: 1px solid #91d5fe" />
+			<div class="datePicker">
+				<slot name="datePicker"></slot>
+			</div>
+		</div>
+		<div class="content">
+			<div class="snap">
+				<slot name="snap"></slot>
+			</div>
+
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+import rocketTit from '../../../components/rocketTit/index.vue'
+
+export default {
+	name: 'Container2',
+	components: {
+		rocketTit,
+	},
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.container2 {
+	display: flex;
+	flex-direction: column;
+	width: 538px;
+	height: 586px;
+	background-size: cover;
+	color: #ffffff;
+	font-size: 16px;
+	font-family: PingFangSC-Semibold, PingFang SC;
+	font-weight: 600;
+
+	.tit {
+		border-bottom: 1px solid #91d5fe;
+		padding: 0 5px;
+		position: relative;
+		&::before {
+			content: ' ';
+			position: absolute;
+			left: 0;
+			bottom: -4px;
+			width: 6px;
+			height: 6px;
+			background-color: #91d5fe;
+			border-radius: 4px;
+		}
+		&::after {
+			content: ' ';
+			position: absolute;
+			right: 0;
+			bottom: -4px;
+			width: 6px;
+			height: 6px;
+			background-color: #91d5fe;
+			border-radius: 4px;
+		}
+		.datePicker {
+			position: absolute;
+			right: 16px;
+			top: 12px;
+
+			::v-deep .el-date-editor {
+				border-radius: 0;
+				box-shadow: none !important;
+				border: 1px solid rgba(255, 255, 255, 0.2);
+				vertical-align: middle;
+				color: #fff;
+				background-color: transparent;
+				.el-range-input,
+				.el-range-separator {
+					color: #fff;
+				}
+				.el-range-editor.is-active {
+					border-color: #fff !important;
+				}
+
+				input {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+
+	.content {
+		flex: 1;
+		padding: 2px;
+		box-sizing: border-box;
+		overflow: hidden;
+		position: relative;
+		.snap {
+			position: absolute;
+			top: 20px;
+			left: 25px;
+			font-weight: 300;
+		}
+	}
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/components/container2/bg.png b/src/views/bigScreen/qualityManage/components/container2/bg.png
new file mode 100644
index 0000000..4e7949b
Binary files /dev/null and b/src/views/bigScreen/qualityManage/components/container2/bg.png differ
diff --git a/src/views/bigScreen/qualityManage/components/container2/index.vue b/src/views/bigScreen/qualityManage/components/container2/index.vue
new file mode 100644
index 0000000..cd5f97c
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/components/container2/index.vue
@@ -0,0 +1,100 @@
+<template>
+	<div class="container2">
+		<div class="tit">
+			<rocketTit>{{ title }}</rocketTit>
+			<div class="datePicker">
+				<slot name="datePicker"></slot>
+			</div>
+		</div>
+		<div class="content">
+			<div class="snap">
+				<slot name="snap"></slot>
+			</div>
+
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+import rocketTit from '../../../components/rocketTit/index.vue'
+
+export default {
+	name: 'Container2',
+	components: {
+		rocketTit,
+	},
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.container2 {
+	display: flex;
+	flex-direction: column;
+	width: 541px;
+	height: 312px;
+	background-image: url(./bg.png);
+	background-size: cover;
+	color: #ffffff;
+	font-size: 16px;
+	font-family: PingFangSC-Semibold, PingFang SC;
+	font-weight: 600;
+
+	.tit {
+		padding: 16px 16px 16px 24px;
+		position: relative;
+		.datePicker {
+			position: absolute;
+			right: 16px;
+			top: 12px;
+
+			::v-deep .el-date-editor {
+				border-radius: 0;
+				box-shadow: none !important;
+				border: 1px solid rgba(255, 255, 255, 0.2);
+				vertical-align: middle;
+				color: #fff;
+				background-color: transparent;
+				.el-range-input,
+				.el-range-separator {
+					color: #fff;
+				}
+				.el-range-editor.is-active {
+					border-color: #fff !important;
+				}
+
+				input {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+
+	.content {
+		flex: 1;
+		padding: 2px 2px 2px 22px;
+		box-sizing: border-box;
+		overflow: hidden;
+		position: relative;
+		.snap {
+			position: absolute;
+			top: 20px;
+			left: 25px;
+			font-weight: 300;
+		}
+	}
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/components/container3/bg.png b/src/views/bigScreen/qualityManage/components/container3/bg.png
new file mode 100644
index 0000000..af01b9b
Binary files /dev/null and b/src/views/bigScreen/qualityManage/components/container3/bg.png differ
diff --git a/src/views/bigScreen/qualityManage/components/container3/index.vue b/src/views/bigScreen/qualityManage/components/container3/index.vue
new file mode 100644
index 0000000..6f1872f
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/components/container3/index.vue
@@ -0,0 +1,100 @@
+<template>
+	<div class="container3">
+		<div class="tit">
+			<rocketTit>{{ title }}</rocketTit>
+			<!-- <div class="datePicker">
+        <slot name="datePicker"></slot>
+      </div> -->
+		</div>
+		<div class="content">
+			<div class="snap">
+				<slot name="snap"></slot>
+			</div>
+
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+import rocketTit from '../../../components/rocketTit/index.vue'
+
+export default {
+	name: 'container3',
+	components: {
+		rocketTit,
+	},
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.container3 {
+	display: flex;
+	flex-direction: column;
+	width: 1317px;
+	height: 312px;
+	background-image: url(./bg.png);
+	background-size: cover;
+	color: #ffffff;
+	font-size: 16px;
+	font-family: PingFangSC-Semibold, PingFang SC;
+	font-weight: 600;
+
+	.tit {
+		padding: 16px 16px 16px 24px;
+		position: relative;
+		.datePicker {
+			position: absolute;
+			right: 16px;
+			top: 12px;
+
+			::v-deep .el-date-editor {
+				border-radius: 0;
+				box-shadow: none !important;
+				border: 1px solid rgba(255, 255, 255, 0.2);
+				vertical-align: middle;
+				color: #fff;
+				background-color: transparent;
+				.el-range-input,
+				.el-range-separator {
+					color: #fff;
+				}
+				.el-range-editor.is-active {
+					border-color: #fff !important;
+				}
+
+				input {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+
+	.content {
+		flex: 1;
+		padding: 2px 2px 2px 22px;
+		box-sizing: border-box;
+		overflow: hidden;
+		position: relative;
+		.snap {
+			position: absolute;
+			top: 20px;
+			left: 25px;
+			font-weight: 300;
+		}
+	}
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/components/container4/bg.png b/src/views/bigScreen/qualityManage/components/container4/bg.png
new file mode 100644
index 0000000..3380357
Binary files /dev/null and b/src/views/bigScreen/qualityManage/components/container4/bg.png differ
diff --git a/src/views/bigScreen/qualityManage/components/container4/index.vue b/src/views/bigScreen/qualityManage/components/container4/index.vue
new file mode 100644
index 0000000..afe99bd
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/components/container4/index.vue
@@ -0,0 +1,101 @@
+<template>
+	<div class="container4">
+		<div class="tit">
+			<rocketTit>{{ title }}</rocketTit>
+			<!-- <div class="datePicker">
+        <slot name="datePicker"></slot>
+      </div> -->
+		</div>
+		<div class="content">
+			<div class="snap">
+				<slot name="snap"></slot>
+			</div>
+
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+import rocketTit from '../../../components/rocketTit/index.vue'
+
+export default {
+	name: 'container4',
+	components: {
+		rocketTit,
+	},
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.container4 {
+	display: flex;
+	flex-direction: column;
+	width: 536px;
+	height: 360px;
+	background-image: url(./bg.png);
+	background-size: cover;
+	color: #ffffff;
+	font-size: 16px;
+	font-family: PingFangSC-Semibold, PingFang SC;
+	font-weight: 600;
+
+	.tit {
+		position: relative;
+		padding: 16px 16px 16px 24px;
+
+		.datePicker {
+			position: absolute;
+			right: 16px;
+			top: 12px;
+
+			::v-deep .el-date-editor {
+				border-radius: 0;
+				box-shadow: none !important;
+				border: 1px solid rgba(255, 255, 255, 0.2);
+				vertical-align: middle;
+				color: #fff;
+				background-color: transparent;
+				.el-range-input,
+				.el-range-separator {
+					color: #fff;
+				}
+				.el-range-editor.is-active {
+					border-color: #fff !important;
+				}
+
+				input {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+
+	.content {
+		flex: 1;
+		padding: 2px;
+		box-sizing: border-box;
+		overflow: hidden;
+		position: relative;
+		.snap {
+			position: absolute;
+			top: 20px;
+			left: 25px;
+			font-weight: 300;
+		}
+	}
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/components/container5/bg.png b/src/views/bigScreen/qualityManage/components/container5/bg.png
new file mode 100644
index 0000000..ac9801d
Binary files /dev/null and b/src/views/bigScreen/qualityManage/components/container5/bg.png differ
diff --git a/src/views/bigScreen/qualityManage/components/container5/index.vue b/src/views/bigScreen/qualityManage/components/container5/index.vue
new file mode 100644
index 0000000..fe59931
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/components/container5/index.vue
@@ -0,0 +1,101 @@
+<template>
+	<div class="container5">
+		<div class="tit">
+			<rocketTit>{{ title }}</rocketTit>
+			<!-- <div class="datePicker">
+        <slot name="datePicker"></slot>
+      </div> -->
+		</div>
+		<div class="content">
+			<div class="snap">
+				<slot name="snap"></slot>
+			</div>
+
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+import rocketTit from '../../../components/rocketTit/index.vue'
+
+export default {
+	name: 'container5',
+	components: {
+		rocketTit,
+	},
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.container5 {
+	display: flex;
+	flex-direction: column;
+	width: 381px;
+	height: 360px;
+	background-image: url(./bg.png);
+	background-size: cover;
+	color: #ffffff;
+	font-size: 16px;
+	font-family: PingFangSC-Semibold, PingFang SC;
+	font-weight: 600;
+
+	.tit {
+		position: relative;
+		padding: 16px 16px 16px 24px;
+
+		.datePicker {
+			position: absolute;
+			right: 16px;
+			top: 12px;
+
+			::v-deep .el-date-editor {
+				border-radius: 0;
+				box-shadow: none !important;
+				border: 1px solid rgba(255, 255, 255, 0.2);
+				vertical-align: middle;
+				color: #fff;
+				background-color: transparent;
+				.el-range-input,
+				.el-range-separator {
+					color: #fff;
+				}
+				.el-range-editor.is-active {
+					border-color: #fff !important;
+				}
+
+				input {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+
+	.content {
+		flex: 1;
+		padding: 2px;
+		box-sizing: border-box;
+		overflow: hidden;
+		position: relative;
+		.snap {
+			position: absolute;
+			top: 20px;
+			left: 25px;
+			font-weight: 300;
+		}
+	}
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/img/center2/1.png b/src/views/bigScreen/qualityManage/img/center2/1.png
new file mode 100644
index 0000000..9b5791f
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/center2/1.png differ
diff --git a/src/views/bigScreen/qualityManage/img/center2/2.png b/src/views/bigScreen/qualityManage/img/center2/2.png
new file mode 100644
index 0000000..2ea88f9
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/center2/2.png differ
diff --git a/src/views/bigScreen/qualityManage/img/center2/3.png b/src/views/bigScreen/qualityManage/img/center2/3.png
new file mode 100644
index 0000000..bfa8a57
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/center2/3.png differ
diff --git a/src/views/bigScreen/qualityManage/img/center2/4.png b/src/views/bigScreen/qualityManage/img/center2/4.png
new file mode 100644
index 0000000..f495c57
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/center2/4.png differ
diff --git a/src/views/bigScreen/qualityManage/img/center2/5.png b/src/views/bigScreen/qualityManage/img/center2/5.png
new file mode 100644
index 0000000..037ba11
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/center2/5.png differ
diff --git a/src/views/bigScreen/qualityManage/img/center2/6.png b/src/views/bigScreen/qualityManage/img/center2/6.png
new file mode 100644
index 0000000..aed09a4
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/center2/6.png differ
diff --git a/src/views/bigScreen/qualityManage/img/center2/7.png b/src/views/bigScreen/qualityManage/img/center2/7.png
new file mode 100644
index 0000000..deaeccb
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/center2/7.png differ
diff --git a/src/views/bigScreen/qualityManage/img/center2/8.png b/src/views/bigScreen/qualityManage/img/center2/8.png
new file mode 100644
index 0000000..0a53b5f
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/center2/8.png differ
diff --git a/src/views/bigScreen/qualityManage/img/left1/1.jpg b/src/views/bigScreen/qualityManage/img/left1/1.jpg
new file mode 100644
index 0000000..3f7d81f
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/left1/1.jpg differ
diff --git a/src/views/bigScreen/qualityManage/img/left1/1.png b/src/views/bigScreen/qualityManage/img/left1/1.png
new file mode 100644
index 0000000..40eab14
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/left1/1.png differ
diff --git a/src/views/bigScreen/qualityManage/img/left1/2.png b/src/views/bigScreen/qualityManage/img/left1/2.png
new file mode 100644
index 0000000..6d58b95
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/left1/2.png differ
diff --git a/src/views/bigScreen/qualityManage/img/left1/3.png b/src/views/bigScreen/qualityManage/img/left1/3.png
new file mode 100644
index 0000000..c346fa5
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/left1/3.png differ
diff --git a/src/views/bigScreen/qualityManage/img/left1/icon.png b/src/views/bigScreen/qualityManage/img/left1/icon.png
new file mode 100644
index 0000000..25e46af
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/left1/icon.png differ
diff --git a/src/views/bigScreen/qualityManage/img/left1/icon1.png b/src/views/bigScreen/qualityManage/img/left1/icon1.png
new file mode 100644
index 0000000..a1ff3c0
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/left1/icon1.png differ
diff --git a/src/views/bigScreen/qualityManage/img/left1/icon2.png b/src/views/bigScreen/qualityManage/img/left1/icon2.png
new file mode 100644
index 0000000..168633a
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/left1/icon2.png differ
diff --git a/src/views/bigScreen/qualityManage/img/left1/icon3.png b/src/views/bigScreen/qualityManage/img/left1/icon3.png
new file mode 100644
index 0000000..b31c407
Binary files /dev/null and b/src/views/bigScreen/qualityManage/img/left1/icon3.png differ
diff --git a/src/views/bigScreen/qualityManage/index.vue b/src/views/bigScreen/qualityManage/index.vue
index 7f4c8b2..12c303e 100644
--- a/src/views/bigScreen/qualityManage/index.vue
+++ b/src/views/bigScreen/qualityManage/index.vue
@@ -1,18 +1,126 @@
 <template>
-    <div class="qualityManage">
-      质量管理
-    </div>
+	<div class="drivingCabin">
+		<div class="left1">
+			<left1></left1>
+		</div>
+		<div class="left2">
+			<left2></left2>
+		</div>
+		<div class="left3">
+			<left3></left3>
+		</div>
+
+		<div class="center1">
+			<center1></center1>
+		</div>
+		<div class="center2">
+			<center2></center2>
+		</div>
+		<div class="right1">
+			<right1></right1>
+		</div>
+		<!-- <div class="right2">
+			<right2></right2>
+		</div> -->
+	</div>
 </template>
 
 <script>
+import scalseBox from '../components/scaleBox.vue'
+import bigScreenHead from '../components/bigScreenHead/index.vue'
+import rocketTit from '../components/rocketTit/index.vue'
+import container1 from '../components/container1/index.vue'
 
+import left1 from './left1.vue'
+import left2 from './left2.vue'
+import left3 from './left3.vue'
+import center1 from './center.vue'
+import center2 from './center2.vue'
+import right1 from './right1.vue'
+import right2 from './right2.vue'
+import bottom1 from './bottom1.vue'
+import bottom2 from './bottom2.vue'
 export default {
-  name: 'QualityManage',
-  components: {
-  }
+	name: 'QualityManage',
+	components: {
+		scalseBox,
+		bigScreenHead,
+		rocketTit,
+		container1,
+		left1,
+		left2,
+		left3,
+		center1,
+		right1,
+		right2,
+		bottom1,
+		bottom2,
+		center2,
+	},
 }
 </script>
 
 <style lang="scss" scoped>
+.drivingCabin {
+	position: relative;
+	width: 100%;
+	// background-image: url("../img/bg.png");
+	background-size: cover;
+	.bg1 {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 1920px;
+		height: 485px;
+		background-image: url('../img/bg-1.png');
+		background-size: cover;
+	}
+}
 
-</style>
\ No newline at end of file
+.left1 {
+	position: absolute;
+	top: 3px;
+	left: 24px;
+}
+.left2 {
+	position: absolute;
+	top: 325px;
+	left: 24px;
+}
+.left3 {
+	position: absolute;
+	top: 650px;
+	left: 24px;
+}
+.center1 {
+	position: absolute;
+	top: 3px;
+	left: 578px;
+}
+.center2 {
+	position: absolute;
+	top: 650px;
+	left: 578px;
+}
+
+.right1 {
+	position: absolute;
+	top: 3px;
+	right: 24px;
+}
+.right2 {
+	position: absolute;
+	top: 605px;
+	right: 24px;
+}
+.bottom1 {
+	position: absolute;
+	bottom: 16px;
+	left: 24px;
+}
+.bottom2 {
+	position: absolute;
+	bottom: 16px;
+	right: 24px;
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/left1.vue b/src/views/bigScreen/qualityManage/left1.vue
new file mode 100644
index 0000000..2a8d51f
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/left1.vue
@@ -0,0 +1,437 @@
+<template>
+	<div>
+		<container2 title="质量计划">
+			<div slot="datePicker">
+				<bigScreenTabs v-model="index" :titleArr="['全厂', '部门']"></bigScreenTabs>
+			</div>
+			<div style="height: 100%; width: 100%" ref="chart" v-if="index == 0"></div>
+			<div style="height: 100%; width: 100%" ref="chart2" v-else></div>
+		</container2>
+	</div>
+</template>
+
+<script>
+import rocketTit from '../components/rocketTit/index.vue'
+import container2 from './components/container2/index.vue'
+import bigScreenTabs from '../components/bigScreenTabs/index.vue'
+import progressBar from '@/views/bigScreen/components/progress/index.vue'
+import colorList from '@/utils/colorPalette'
+// import {Liquid} from '@antv/g2plot';
+// import resize from '../../dashboard/mixins/resize'
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+export default {
+	// mixins: [resize],
+	name: 'left1',
+	components: {
+		rocketTit,
+		container2,
+		bigScreenTabs,
+		progressBar,
+	},
+	data() {
+		return {
+			index: 0,
+			chart: null,
+			chart2: null,
+			data: [
+				{ value: 154, name: '类别一' },
+				{ value: 775, name: '类别二' },
+				{ value: 679, name: '类别三' },
+				{ value: 679, name: '类别四' },
+				{ value: 679, name: '类别五' },
+				{ value: 679, name: '类别六' },
+				{ value: 679, name: '类别七' },
+				{ value: 679, name: '类别八' },
+			],
+			colorList,
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initChart()
+		})
+	},
+	watch: {
+		index(newVal, oldVal) {
+			if (newVal == 0) {
+				this.chart2.dispose()
+				this.chart2 = null
+				this.$nextTick(() => {
+					this.initChart()
+				})
+			} else {
+				this.chart.dispose()
+				this.chart = null
+				this.$nextTick(() => {
+					this.initChart2()
+				})
+			}
+		},
+	},
+	beforeDestroy() {},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$refs.chart)
+			this.setOptions()
+		},
+		setOptions() {
+			this.chart.setOption({
+				legend: {
+					data: ['数量', '完成率'],
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				grid: {
+					left: '3%',
+					right: '6%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: [
+							'2021-01',
+							'2021-02',
+							'2021-03',
+							'2021-04',
+							'2021-05',
+							'2021-06',
+							'2021-07',
+							'2021-08',
+							'2021-09',
+							'2021-10',
+							'2021-11',
+							'2021-12',
+						],
+						axisPointer: {
+							type: 'shadow',
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				yAxis: [
+					{
+						type: 'value',
+						name: '个',
+						min: 0,
+						// max: 250,
+						// interval: 50,
+						axisLabel: {
+							formatter: '{value}',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+					{
+						type: 'value',
+						min: 0,
+						max: 100,
+						// interval: 5,
+						axisLabel: {
+							formatter: '{value} %',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				grid: {
+					containLabel: true,
+					width: '99%',
+					left: 0,
+					top: 50,
+					bottom: 50,
+				},
+				dataZoom: {},
+				series: [
+					{
+						name: '数量',
+						type: 'bar',
+						barWidth: 20,
+						data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+						itemStyle: {
+							color: {
+								type: 'linear', // 线性渐变
+								x: 0,
+								y: 0,
+								x2: 0,
+								y2: 1,
+								colorStops: [
+									{
+										offset: 0,
+										color: '#9AF0D5', // 0%处的颜色为红色
+									},
+									{
+										offset: 1,
+										color: '#61DDAA', // 100%处的颜色为蓝
+									},
+								],
+							},
+						},
+					},
+					{
+						name: '完成率',
+						type: 'line',
+						yAxisIndex: 1,
+						smooth: false,
+						data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
+						itemStyle: {
+							color: '#7EA7FC',
+						},
+						symbol: 'none',
+					},
+				],
+				// yAxis: {
+				//   type: 'value',
+				//   splitLine: {
+				//     show: false//不显示网格线
+				//   },
+				//   splitArea: {
+				//     show: false//不显示网格区域
+				//   },
+				//   axisLine: {
+				//     lineStyle: {
+				//       color: 'rgb(255, 255, 255)'
+				//     },
+				//   }
+				// },
+				// series: [
+				//   {
+				//     name: '利润',
+				//     type: 'bar',
+				//     data: [
+				//       2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+				//     ]
+				//   },
+				//   {
+				//     name: '数量',
+				//     type: 'bar',
+				//     data: [
+				//       2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+				//     ]
+				//   },
+				//   {
+				//     name: '完成率',
+				//     type: 'line',
+				//     yAxisIndex: 1,
+				//     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+				//   }
+
+				// ]
+			})
+		},
+		initChart2() {
+			this.chart2 = echarts.init(this.$refs.chart2)
+			this.setOptions2()
+		},
+		setOptions2() {
+			this.chart2.setOption({
+				tooltip: {
+					trigger: 'axis',
+					formatter: '{a1}<br/>{b1}：{c1}',
+				},
+				// legend: {
+				// 	// data: ['收入', '实际', '目标'],
+				// 	textStyle: {
+				// 		color: '#fff', //legend字体颜色
+				// 	},
+				// 	// selectedMode: false,
+				// },
+				grid: {
+					containLabel: true,
+					left: 20,
+					right: 10,
+					top: 30,
+					bottom: 50,
+				},
+				xAxis: {
+					data: ['部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门'],
+					axisLine: {
+						lineStyle: {
+							color: 'rgb(255, 255, 255)',
+						},
+					},
+				},
+				dataZoom: {
+					type: 'slider',
+					start: 0,
+					end: 50,
+				},
+				color: ['#ccc', 'red'],
+				yAxis: [
+					{
+						name: '个',
+						splitLine: {
+							show: true,
+							//  改变轴线颜色
+							lineStyle: {
+								// 使用深浅的间隔色
+								color: ['rgba(255, 255, 255,.5)'],
+							},
+						},
+						axisLabel: {
+							formatter: '{value}',
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+					{
+						type: 'value',
+						min: 0,
+						max: 100,
+						interval: 20,
+						axisLabel: {
+							formatter: '{value} %',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				series: [
+					{
+						name: '收入',
+						type: 'bar',
+						z: '-1',
+						barGap: '-75%',
+						barWidth: 30,
+						itemStyle: {
+							color: 'rgba(85, 197, 162, .3)',
+						},
+						data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
+					},
+					{
+						name: '实际',
+						type: 'bar',
+						barWidth: 15,
+						position: [0, 0],
+						itemStyle: {
+							color: 'rgba(90, 216, 166, 0.85)',
+						},
+						data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
+					},
+					{
+						name: '目标',
+						type: 'scatter',
+						symbol: 'rect',
+						symbolSize: [30, 4],
+						symbolOffset: [3, 0],
+						position: [0, 0],
+						itemStyle: {
+							color: '#F64F58',
+						},
+						data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
+					},
+				],
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	.box {
+		padding: 0 0 5px 15px;
+		display: flex;
+		align-items: center;
+		.num {
+			font-size: 24px;
+			font-weight: 600;
+			margin: 0 10px;
+		}
+	}
+}
+
+.content1 {
+	// height: 200px;
+	height: 100%;
+
+	.chart1 {
+		margin: 0 auto;
+		width: 100%;
+		height: 192px;
+		background: transparent;
+	}
+}
+
+.num {
+	font-size: 30px;
+	font-family: Roboto-BlackItalic, Roboto;
+	font-weight: normal;
+	color: #91d5fe;
+	vertical-align: sub;
+	//   margin-right: 3px;
+}
+
+.content2 {
+	padding: 20px;
+	flex: 1;
+	height: 100%;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	.chart2 {
+		height: 100%;
+	}
+
+	.tit {
+		font-size: 16px;
+		font-family: PingFangSC-Semibold, PingFang SC;
+		font-weight: 600;
+		color: #ffffff;
+		line-height: 22px;
+		position: relative;
+		padding-left: 15px;
+	}
+	.tit::after {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 3px;
+		left: 0px;
+		width: 4px;
+		height: 16px;
+		background: #00ffff;
+	}
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/left2.vue b/src/views/bigScreen/qualityManage/left2.vue
new file mode 100644
index 0000000..bd2be8b
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/left2.vue
@@ -0,0 +1,423 @@
+<template>
+	<div>
+		<container3 title="质量计划">
+			<div class="wrap">
+				<el-row class="content1" style="height: 100%">
+					<el-col :span="8" style="height: 100%">
+						<div style="height: 100%; width: 100%" ref="chart2"></div>
+					</el-col>
+					<el-col :span="16" style="height: 100%">
+						<div style="height: 100%; width: 100%" ref="chart"></div>
+					</el-col>
+				</el-row>
+			</div>
+		</container3>
+	</div>
+</template>
+
+<script>
+import scalseBox from '../components/scaleBox.vue'
+import bigScreenHead from '../components/bigScreenHead/index.vue'
+import rocketTit from '../components/rocketTit/index.vue'
+import container3 from './components/container3/index.vue'
+import bigScreenTabs from '../components/bigScreenTabs/index.vue'
+import colorList from '@/utils/colorPalette'
+import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor'
+import vueSeamlessScroll from 'vue-seamless-scroll'
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+	mixins: [resize],
+	name: 'left2',
+	components: {
+		scalseBox,
+		bigScreenHead,
+		bigScreenTabs,
+		rocketTit,
+		container3,
+		vueSeamlessScroll,
+	},
+	data() {
+		return {
+			testData: [
+				{ name: '运行策划控制', height: '部门3', weight: 51.6 },
+				{ name: '产品服务要求', height: '部门4', weight: 59 },
+				{ name: '产品、服务设计开发', height: '部门4', weight: 49.2 },
+				{ name: '外部提供的过程、产品和服务控制', height: '部门5', weight: 63 },
+				{ name: '生产服务提供', height: '部门6', weight: 53.6 },
+				{ name: '产品、服务设计开发', height: '部门7', weight: 59 },
+				{ name: '产品服务要求', height: '部门1', weight: 47.6 },
+				{ name: '生产服务提供', height: '部门2', weight: 69.8 },
+			],
+			index: 0,
+			colorList,
+
+			listData: [1, 2, 3, 4, 5, 6, 7, 8],
+			scrollList: [
+				{
+					id: 1,
+					name: 'xx车间未开启安全闸门',
+					txt: '能昌',
+					status: 2,
+				},
+				{
+					id: 2,
+					name: 'xx车间未开启安全闸门',
+					txt: '葛岚福',
+					status: 2,
+				},
+				{
+					id: 3,
+					name: 'xx车间未开启安全闸门',
+					txt: '酆芳琼',
+					status: 1,
+				},
+				{
+					id: 4,
+					name: 'xx车间未开启安全闸门',
+					txt: '酆芳琼',
+					status: 1,
+				},
+				{
+					id: 5,
+					name: 'xx车间未开启安全闸门',
+					txt: '酆芳琼',
+					status: 1,
+				},
+			],
+
+			dateRange: [],
+			chart: null,
+			chart2: null,
+			chart3: null,
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initChart()
+			this.initLine()
+		})
+	},
+	beforeDestroy() {
+		if (!this.chart) {
+			return
+		}
+		this.chart.dispose()
+		this.chart = null
+	},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$refs.chart)
+			const data = [
+				[
+					['部门1', 77, 17096869, '运行策划控制'],
+					['部门2', 77.4, 27662440, '运行策划控制'],
+					['部门3', 68, 1154605773, '运行策划控制'],
+					['部门4', 74.7, 10582082, '运行策划控制'],
+					['部门5', 75, 4986705, '运行策划控制'],
+					['部门6', 77.1, 56943299, '运行策划控制'],
+					['部门7', 75.4, 78958237, '运行策划控制'],
+					['部门8', 78.1, 254830, '运行策划控制'],
+				],
+				[
+					['部门1', 45, 23968973, '产品服务要求'],
+					['部门2', 88, 35939927, '产品服务要求'],
+					['部门3', 76.9, 1376048943, '产品服务要求'],
+					['部门4', 78.5, 11389562, '产品服务要求'],
+					['部门5', 80.8, 5503457, '产品服务要求'],
+					['部门6', 81.9, 64395345, '产品服务要求'],
+					['部门7', 81.1, 80688545, '产品服务要求'],
+					['部门8', 82.8, 329425, '产品服务要求'],
+				],
+				[
+					['部门1', 81.8, 23968973, '产品、服务设计开发'],
+					['部门2', 81.7, 35939927, '产品、服务设计开发'],
+					['部门3', 76.9, 1376048943, '产品、服务设计开发'],
+					['部门4', 56, 11389562, '产品、服务设计开发'],
+					['部门5', 75, 5503457, '产品、服务设计开发'],
+					['部门6', 67, 64395345, '产品、服务设计开发'],
+					['部门7', 79, 80688545, '产品、服务设计开发'],
+					['部门8', 88, 329425, '产品、服务设计开发'],
+				],
+				[
+					['部门1', 68, 23968973, '外部提供的过程、产品和服务控制'],
+					['部门2', 78, 35939927, '外部提供的过程、产品和服务控制'],
+					['部门3', 76.9, 1376048943, '外部提供的过程、产品和服务控制'],
+					['部门4', 78.5, 11389562, '外部提供的过程、产品和服务控制'],
+					['部门5', 45, 5503457, '外部提供的过程、产品和服务控制'],
+					['部门6', 81.9, 64395345, '外部提供的过程、产品和服务控制'],
+					['部门7', 84, 80688545, '外部提供的过程、产品和服务控制'],
+					['部门8', 69, 329425, '外部提供的过程、产品和服务控制'],
+				],
+				[
+					['部门1', 85, 23968973, '生产服务提供'],
+					['部门2', 81.7, 35939927, '生产服务提供'],
+					['部门3', 70, 1376048943, '生产服务提供'],
+					['部门4', 78, 11389562, '生产服务提供'],
+					['部门5', 67, 5503457, '生产服务提供'],
+					['部门6', 45, 64395345, '生产服务提供'],
+					['部门7', 65, 80688545, '生产服务提供'],
+					['部门8', 56, 329425, '生产服务提供'],
+				],
+			]
+			this.chart.setOption({
+				legend: {
+					textStyle: {
+						color: '#fff',
+					},
+					right: '10%',
+					top: '3%',
+					data: [
+						'运行策划控制',
+						'产品服务要求',
+						'产品、服务设计开发',
+						'外部提供的过程、产品和服务控制',
+						'生产服务提供',
+					],
+				},
+				grid: {
+					left: '8%',
+					top: '10%',
+				},
+				xAxis: {
+					type: 'category',
+					// splitLine: {
+					// 	lineStyle: {
+					// 		type: 'dashed',
+					// 	},
+					// },
+					splitLine: {
+						show: false, //不显示网格线
+					},
+					splitArea: {
+						show: false, //不显示网格区域
+					},
+					axisLine: {
+						lineStyle: {
+							color: 'rgb(255, 255, 255)',
+						},
+					},
+				},
+				// yAxis: {
+				// 	splitLine: {
+				// 		lineStyle: {
+				// 			type: 'dashed',
+				// 		},
+				// 	},
+				// 	scale: true,
+				// },
+				yAxis: {
+					type: 'value',
+					scale: true,
+					splitLine: {
+						show: false, //不显示网格线
+					},
+					splitArea: {
+						show: false, //不显示网格区域
+					},
+					axisLine: {
+						lineStyle: {
+							color: 'rgb(255, 255, 255)',
+						},
+					},
+				},
+				series: [
+					{
+						name: '运行策划控制',
+						data: data[0],
+						type: 'scatter',
+						symbolSize: 8,
+
+						itemStyle: {
+							color: '#FF667F',
+						},
+					},
+					{
+						name: '产品服务要求',
+						data: data[1],
+						type: 'scatter',
+						symbolSize: 8,
+						itemStyle: {
+							color: '#9CEB00',
+						},
+					},
+					{
+						name: '产品、服务设计开发',
+						data: data[2],
+						type: 'scatter',
+						symbolSize: 8,
+						itemStyle: {
+							color: '#9966FF',
+						},
+					},
+					{
+						name: '外部提供的过程、产品和服务控制',
+						data: data[3],
+						type: 'scatter',
+						symbolSize: 8,
+						itemStyle: {
+							color: '#4E00EB',
+						},
+					},
+				],
+			})
+		},
+		initLine() {
+			this.chart2 = echarts.init(this.$refs.chart2)
+			this.setOptions2()
+		},
+		setOptions2() {
+			this.chart2.setOption({
+				tooltip: {
+					trigger: 'item',
+				},
+				legend: {
+					top: '5%',
+					right: '5%',
+					orient: 'vertical',
+					// left: 'right',
+					textStyle: {
+						color: '#fff', //legend字体颜色
+					},
+				},
+				series: [
+					{
+						name: '内审',
+						type: 'pie',
+						radius: ['60%', '80%'],
+						center: ['30%', '50%'],
+						avoidLabelOverlap: false,
+						label: {
+							show: false,
+							position: 'center',
+						},
+						emphasis: {
+							label: {
+								show: false,
+								fontSize: '40',
+								fontWeight: 'bold',
+							},
+						},
+						labelLine: {
+							show: false,
+						},
+						data: [
+							{ value: 1048, name: '内审1' },
+							{ value: 735, name: '内审2' },
+							{ value: 580, name: '内审3' },
+							{ value: 484, name: '内审4' },
+							{ value: 301, name: '内审5' },
+						],
+						color: blueColorList,
+					},
+					{
+						name: '外审',
+						type: 'pie',
+						radius: ['35%', '55%'],
+						center: ['30%', '50%'],
+						avoidLabelOverlap: false,
+						label: {
+							show: false,
+							position: 'center',
+						},
+						emphasis: {
+							label: {
+								show: false,
+								fontSize: '40',
+								fontWeight: 'bold',
+							},
+						},
+						labelLine: {
+							show: false,
+						},
+						data: [
+							{ value: 1048, name: '外审1' },
+							{ value: 735, name: '外审2' },
+							{ value: 580, name: '外审3' },
+							{ value: 484, name: '外审4' },
+							{ value: 300, name: '外审5' },
+						],
+						color: greenColorList,
+					},
+					{
+						name: '第三方审核',
+						type: 'pie',
+						radius: ['10%', '30%'],
+						center: ['30%', '50%'],
+						avoidLabelOverlap: false,
+						label: {
+							show: false,
+							position: 'center',
+						},
+						emphasis: {
+							label: {
+								show: false,
+								fontSize: '40',
+								fontWeight: 'bold',
+							},
+						},
+						labelLine: {
+							show: false,
+						},
+						data: [
+							{ value: 1048, name: '第三方1' },
+							{ value: 735, name: '第三方2' },
+							{ value: 580, name: '第三方3' },
+							{ value: 484, name: '第三方4' },
+							{ value: 300, name: '第三方5' },
+						],
+						color: yelloColorList,
+					},
+				],
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.warp-scroll {
+	height: 215px;
+	width: 100%;
+	margin: 0 auto;
+	overflow: hidden;
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0 auto;
+		li,
+		a {
+			display: block;
+			display: flex;
+			justify-content: space-between;
+			font-size: 15px;
+		}
+		li {
+			display: block;
+			height: 42px;
+			line-height: 42px;
+			background: #2a437d;
+			opacity: 0.6;
+			// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
+			margin-bottom: 1px;
+			img {
+				vertical-align: sub;
+				margin-right: 5px;
+			}
+		}
+	}
+}
+.box {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.wrap {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/left3.vue b/src/views/bigScreen/qualityManage/left3.vue
new file mode 100644
index 0000000..493d163
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/left3.vue
@@ -0,0 +1,60 @@
+<template>
+	<div>
+		<container2 title="视频检验系统实况">
+			<div class="box">
+				<div class="_img">
+					<img src="./1.jpg" alt="" />
+				</div>
+				<div class="text">
+					<p style="opacity: 0.8">实况信息</p>
+					<p style="opacity: 0.5; color: #91d5fe; font-size: 14px">正在进行XXXX作业建议正在进行XXXX作业建议</p>
+				</div>
+			</div>
+		</container2>
+	</div>
+</template>
+
+<script>
+import scalseBox from '../components/scaleBox.vue'
+import bigScreenHead from '../components/bigScreenHead/index.vue'
+import rocketTit from '../components/rocketTit/index.vue'
+import container2 from './components/container2/index.vue'
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+	mixins: [resize],
+	name: 'left3',
+	components: {
+		scalseBox,
+		bigScreenHead,
+		rocketTit,
+		container2,
+	},
+	data() {
+		return {}
+	},
+	methods: {},
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+	display: flex;
+	padding: 0 10px 0 0;
+	._img {
+		width: 310px;
+		height: 229px;
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.text {
+		flex: 1;
+		padding: 0 15px;
+		background-color: rgba(145, 213, 254, 0.15);
+	}
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/right1.vue b/src/views/bigScreen/qualityManage/right1.vue
new file mode 100644
index 0000000..7b9c5e2
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/right1.vue
@@ -0,0 +1,874 @@
+<template>
+	<div>
+		<container2 title="质量问题">
+			<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['全年', '月度']"></bigScreenTabs>
+			<div style="height: 100%; width: 100%" ref="chart" v-if="index == 0"></div>
+			<div style="height: 100%; width: 100%" ref="chart1" v-else></div>
+		</container2>
+		<container2 title="质量检查分析" style="margin-top: 10px">
+			<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['总厂', '部门']"></bigScreenTabs>
+			<div style="height: 100%; width: 100%" ref="chart2" v-if="index2 == 0"></div>
+			<div style="height: 100%; width: 100%" ref="chart22" v-else></div>
+		</container2>
+		<container2 title="质量案例/检查明细" style="margin-top: 10px">
+			<bigScreenTabs slot="datePicker" v-model="index3" :titleArr="['案例', '明细']"></bigScreenTabs>
+			<el-row style="padding: 15px 30px" v-if="index3 == 0">
+				<el-col :span="24" style="margin-bottom: 1px">
+					<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
+						<el-col style="text-align: center" :span="4">序号</el-col>
+						<el-col style="text-align: center" :span="8">部门</el-col>
+						<el-col style="text-align: center" :span="12">作业内容</el-col>
+					</el-row>
+				</el-col>
+				<vue-seamless-scroll
+					:data="listData"
+					class="warp-scroll"
+					:class-option="{
+						singleHeight: 43,
+					}"
+				>
+					<ul class="item">
+						<li v-for="item in scrollList" :key="item.id">
+							<el-row style="font-size: 14px">
+								<el-col style="text-align: center" :span="4">{{ item.id }}</el-col>
+								<el-col style="text-align: center" :span="8">{{ item.name }}</el-col>
+								<el-col style="text-align: center" :span="12">{{ item.txt }}</el-col>
+							</el-row>
+						</li>
+					</ul>
+				</vue-seamless-scroll>
+			</el-row>
+			<el-row style="padding: 15px 30px" v-if="index3 == 1">
+				<!-- <el-col :span="24" style="margin-bottom: 1px">
+					<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
+						<el-col style="text-align: center" :span="4">序号</el-col>
+						<el-col style="text-align: center" :span="8">部门</el-col>
+						<el-col style="text-align: center" :span="12">作业内容(明细)</el-col>
+					</el-row>
+				</el-col>
+				<vue-seamless-scroll
+					:data="listData"
+					class="warp-scroll"
+					:class-option="{
+						singleHeight: 43,
+					}"
+				>
+					<ul class="item">
+						<li v-for="item in scrollList" :key="item.id">
+							<el-row style="font-size: 14px">
+								<el-col style="text-align: center" :span="4">{{ item.id }}</el-col>
+								<el-col style="text-align: center" :span="8">{{ item.name }}</el-col>
+								<el-col style="text-align: center" :span="12">{{ item.txt }}</el-col>
+							</el-row>
+						</li>
+					</ul>
+				</vue-seamless-scroll> -->
+			</el-row>
+		</container2>
+	</div>
+</template>
+
+<script>
+import rocketTit from '../components/rocketTit/index.vue'
+import container2 from './components/container2/index.vue'
+import bigScreenTabs from '../components/bigScreenTabs/index.vue'
+import progressBar from '@/views/bigScreen/components/progress/index.vue'
+import colorList from '@/utils/colorPalette'
+import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor'
+import vueSeamlessScroll from 'vue-seamless-scroll'
+// import {Liquid} from '@antv/g2plot';
+// import resize from '../../dashboard/mixins/resize'
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+export default {
+	// mixins: [resize],
+	name: 'left1',
+	components: {
+		rocketTit,
+		container2,
+		bigScreenTabs,
+		progressBar,
+		vueSeamlessScroll,
+	},
+	data() {
+		return {
+			index: 0,
+			index2: 0,
+			index3: 0,
+			colorList,
+			chart: null,
+			chart1: null,
+			chart2: null,
+			chart22: null,
+
+			listData: [1, 2, 3, 4, 5, 6, 7, 8],
+			scrollList: [
+				{
+					id: 1,
+					name: '部门一',
+					txt: '高压作业',
+				},
+				{
+					id: 2,
+					name: '部门二',
+					txt: '易燃作业',
+				},
+				{
+					id: 3,
+					name: '部门三',
+					txt: '易燃作业',
+				},
+				{
+					id: 4,
+					name: '部门四',
+					txt: '易燃作业',
+				},
+				{
+					id: 5,
+					name: '部门五',
+					txt: '易燃作业',
+				},
+			],
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initChart()
+			this.initLine()
+		})
+	},
+	watch: {
+		index(newVal, oldVal) {
+			if (newVal == 0) {
+				this.chart1.dispose()
+				this.chart1 = null
+				this.$nextTick(() => {
+					this.initChart()
+				})
+			} else {
+				this.chart.dispose()
+				this.chart = null
+				this.$nextTick(() => {
+					this.initChart1()
+				})
+			}
+		},
+		index2(newVal, oldVal) {
+			if (newVal == 0) {
+				this.chart22.dispose()
+				this.chart22 = null
+				this.$nextTick(() => {
+					this.initLine()
+				})
+			} else {
+				this.chart2.dispose()
+				this.chart2 = null
+				this.$nextTick(() => {
+					this.initChart22()
+				})
+			}
+		},
+	},
+	beforeDestroy() {},
+	methods: {
+		// 右上切换前
+		initChart() {
+			this.chart = echarts.init(this.$refs.chart)
+			this.setOptions()
+		},
+		setOptions() {
+			let data = [
+				{
+					name: '部门',
+					children: [
+						{
+							name: '部门1',
+							children: [
+								{
+									name: '部门11',
+									value: 1,
+								},
+								{
+									name: '部门22',
+									value: 2,
+								},
+							],
+						},
+					],
+				},
+				{
+					name: '型号',
+					children: [
+						{
+							name: '型号1',
+							children: [
+								{
+									name: '型号11',
+									value: 1,
+								},
+								{
+									name: '型号22',
+									value: 2,
+								},
+							],
+						},
+					],
+				},
+				{
+					name: '类型',
+					children: [
+						{
+							name: '类型1',
+							children: [
+								{
+									name: '类型11',
+									value: 1,
+								},
+								{
+									name: '类型22',
+									value: 2,
+								},
+							],
+						},
+					],
+				},
+			]
+			this.chart.setOption({
+				// series: {
+				// 	type: 'sunburst',
+				// 	center: ['45%', '50%'],
+				// 	radius: [15, '80%'],
+				// 	data: data,
+				// },
+
+				tooltip: {
+					trigger: 'item',
+				},
+				legend: {
+					top: '5%',
+					right: '5%',
+					orient: 'vertical',
+					y: 'center',
+					// left: 'right',
+					textStyle: {
+						color: '#fff', //legend字体颜色
+					},
+				},
+				series: [
+					{
+						name: '型号',
+						type: 'pie',
+						center: ['35%', '50%'],
+						radius: ['60%', '80%'],
+						avoidLabelOverlap: false,
+						label: {
+							show: false,
+							position: 'center',
+						},
+						emphasis: {
+							label: {
+								show: false,
+								fontSize: '40',
+								fontWeight: 'bold',
+							},
+						},
+						labelLine: {
+							show: false,
+						},
+						data: [
+							{ value: 1048, name: '型号1' },
+							{ value: 735, name: '型号2' },
+							{ value: 580, name: '型号3' },
+							{ value: 484, name: '型号4' },
+							{ value: 301, name: '型号5' },
+						],
+						color: blueColorList,
+					},
+					{
+						name: '类别',
+						type: 'pie',
+						radius: ['35%', '55%'],
+						center: ['35%', '50%'],
+						avoidLabelOverlap: false,
+						label: {
+							show: false,
+							position: 'center',
+						},
+						emphasis: {
+							label: {
+								show: false,
+								fontSize: '40',
+								fontWeight: 'bold',
+							},
+						},
+						labelLine: {
+							show: false,
+						},
+						data: [
+							{ value: 1048, name: '类别1' },
+							{ value: 735, name: '类别2' },
+							{ value: 580, name: '类别3' },
+							{ value: 484, name: '类别4' },
+							{ value: 300, name: '类别5' },
+						],
+						color: greenColorList,
+					},
+					{
+						name: '部门',
+						type: 'pie',
+						radius: ['10%', '30%'],
+						center: ['35%', '50%'],
+						avoidLabelOverlap: false,
+						label: {
+							show: false,
+							position: 'center',
+						},
+						emphasis: {
+							label: {
+								show: false,
+								fontSize: '40',
+								fontWeight: 'bold',
+							},
+						},
+						labelLine: {
+							show: false,
+						},
+						data: [
+							{ value: 1048, name: '部门1' },
+							{ value: 735, name: '部门2' },
+							{ value: 580, name: '部门3' },
+							{ value: 484, name: '部门4' },
+							{ value: 300, name: '部门5' },
+						],
+						color: yelloColorList,
+					},
+				],
+			})
+		},
+		// 右上切换后
+		initChart1() {
+			this.chart1 = echarts.init(this.$refs.chart1)
+			this.setOptions1()
+		},
+		setOptions1() {
+			this.chart1.setOption({
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow',
+					},
+				},
+				legend: {
+					data: ['类别一', '类别二', '类别三'],
+					textStyle: {
+						color: '#fff', //legend字体颜色
+					},
+				},
+				grid: {
+					left: 20,
+					right: 20,
+					top: 30,
+					bottom: 50,
+					containLabel: true,
+				},
+				dataZoom: {
+					type: 'slider',
+					// start: 0,
+					// end: 50,
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				yAxis: [
+					{
+						name: '个',
+						splitLine: {
+							show: true,
+							//  改变轴线颜色
+							lineStyle: {
+								// 使用深浅的间隔色
+								color: ['rgba(255, 255, 255,.5)'],
+							},
+						},
+						axisLabel: {
+							formatter: '{value}',
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+					{
+						type: 'value',
+					},
+				],
+				series: [
+					{
+						name: '类别三',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#F7DC87',
+						},
+						barWidth: 30,
+						data: [220, 182, 191, 234, 290, 330, 310],
+					},
+					{
+						name: '类别二',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#55C5A2',
+						},
+						barWidth: 30,
+						data: [150, 232, 201, 154, 190, 330, 410],
+					},
+					{
+						name: '类别一',
+						type: 'bar',
+						stack: 'Ad',
+						emphasis: {
+							focus: 'series',
+						},
+						itemStyle: {
+							color: '#5B8FF9',
+						},
+						barWidth: 30,
+						data: [150, 232, 201, 154, 190, 330, 410],
+					},
+				],
+			})
+		},
+
+		initLine() {
+			this.chart2 = echarts.init(this.$refs.chart2)
+			this.setOptions2()
+		},
+		setOptions2() {
+			this.chart2.setOption({
+				legend: {
+					data: ['数量', '完成率'],
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				grid: {
+					left: '3%',
+					right: '6%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: [
+							'2021-01',
+							'2021-02',
+							'2021-03',
+							'2021-04',
+							'2021-05',
+							'2021-06',
+							'2021-07',
+							'2021-08',
+							'2021-09',
+							'2021-10',
+							'2021-11',
+							'2021-12',
+						],
+						axisPointer: {
+							type: 'shadow',
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				yAxis: [
+					{
+						type: 'value',
+						name: '个',
+						min: 0,
+						// max: 250,
+						// interval: 50,
+						axisLabel: {
+							formatter: '{value}',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+					{
+						type: 'value',
+						min: 0,
+						max: 100,
+						// interval: 5,
+						axisLabel: {
+							formatter: '{value} %',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				grid: {
+					containLabel: true,
+					width: '99%',
+					left: 0,
+					top: 50,
+					bottom: 50,
+				},
+				dataZoom: {},
+				series: [
+					{
+						name: '数量',
+						type: 'bar',
+						barWidth: 20,
+						data: [75.6, 82.2, 26.4, 28.7, 70.7, 50.7, 60.7, 70.7, 80.7, 48.7, 18.8],
+						itemStyle: {
+							color: {
+								type: 'linear', // 线性渐变
+								x: 0,
+								y: 0,
+								x2: 0,
+								y2: 1,
+								colorStops: [
+									{
+										offset: 0,
+										color: '#F49220', // 0%处的颜色为红色
+									},
+									{
+										offset: 1,
+										color: '#F6D97E', // 100%处的颜色为蓝
+									},
+								],
+							},
+						},
+					},
+					{
+						name: '完成率',
+						type: 'line',
+						yAxisIndex: 1,
+						smooth: false,
+						data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
+						itemStyle: {
+							color: '#55C5A2',
+						},
+						symbol: 'none',
+					},
+				],
+				// yAxis: {
+				//   type: 'value',
+				//   splitLine: {
+				//     show: false//不显示网格线
+				//   },
+				//   splitArea: {
+				//     show: false//不显示网格区域
+				//   },
+				//   axisLine: {
+				//     lineStyle: {
+				//       color: 'rgb(255, 255, 255)'
+				//     },
+				//   }
+				// },
+				// series: [
+				//   {
+				//     name: '利润',
+				//     type: 'bar',
+				//     data: [
+				//       2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+				//     ]
+				//   },
+				//   {
+				//     name: '数量',
+				//     type: 'bar',
+				//     data: [
+				//       2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+				//     ]
+				//   },
+				//   {
+				//     name: '完成率',
+				//     type: 'line',
+				//     yAxisIndex: 1,
+				//     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+				//   }
+
+				// ]
+			})
+		},
+		initChart22() {
+			this.chart22 = echarts.init(this.$refs.chart22)
+			this.setOptions22()
+		},
+		setOptions22() {
+			this.chart22.setOption({
+				tooltip: {
+					trigger: 'axis',
+					formatter: '{a1}<br/>{b1}：{c1}',
+				},
+				// legend: {
+				// 	// data: ['收入', '实际', '目标'],
+				// 	textStyle: {
+				// 		color: '#fff', //legend字体颜色
+				// 	},
+				// 	// selectedMode: false,
+				// },
+				grid: {
+					containLabel: true,
+					left: 20,
+					right: 10,
+					top: 30,
+					bottom: 50,
+				},
+				xAxis: {
+					data: ['部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门'],
+					axisLine: {
+						lineStyle: {
+							color: 'rgb(255, 255, 255)',
+						},
+					},
+				},
+				dataZoom: {
+					type: 'slider',
+					start: 0,
+					end: 50,
+				},
+				color: ['#ccc', 'red'],
+				yAxis: [
+					{
+						name: '个',
+						splitLine: {
+							show: true,
+							//  改变轴线颜色
+							lineStyle: {
+								// 使用深浅的间隔色
+								color: ['rgba(255, 255, 255,.5)'],
+							},
+						},
+						axisLabel: {
+							formatter: '{value}',
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+					{
+						type: 'value',
+						min: 0,
+						max: 100,
+						interval: 20,
+						axisLabel: {
+							formatter: '{value} %',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				series: [
+					{
+						name: '收入',
+						type: 'bar',
+						z: '-1',
+						barGap: '-75%',
+						barWidth: 30,
+						itemStyle: {
+							color: 'rgba(85, 197, 162, .3)',
+						},
+						data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
+					},
+					{
+						name: '实际',
+						type: 'bar',
+						barWidth: 15,
+						position: [0, 0],
+						itemStyle: {
+							color: 'rgba(90, 216, 166, 0.85)',
+						},
+						data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
+						itemStyle: {
+							color: {
+								type: 'linear', // 线性渐变
+								x: 0,
+								y: 0,
+								x2: 0,
+								y2: 1,
+								colorStops: [
+									{
+										offset: 0,
+										color: '#F49220', // 0%处的颜色为红色
+									},
+									{
+										offset: 1,
+										color: '#F6D97E', // 100%处的颜色为蓝
+									},
+								],
+							},
+						},
+					},
+					{
+						name: '目标',
+						type: 'scatter',
+						symbol: 'rect',
+						symbolSize: [30, 4],
+						symbolOffset: [3, 0],
+						position: [0, 0],
+						itemStyle: {
+							color: '#F6D97E',
+						},
+						data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
+					},
+				],
+			})
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.warp-scroll {
+	height: 172px;
+	width: 100%;
+	margin: 0 auto;
+	overflow: hidden;
+	ul {
+		list-style: none;
+		padding: 0;
+		margin: 0 auto;
+		li,
+		a {
+			display: block;
+			display: flex;
+			justify-content: space-between;
+			font-size: 15px;
+		}
+		li {
+			display: block;
+			height: 42px;
+			line-height: 42px;
+			background: #2a437d;
+			opacity: 0.6;
+			// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
+			margin-bottom: 1px;
+			img {
+				vertical-align: sub;
+				margin-right: 5px;
+			}
+		}
+	}
+}
+.wrap {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	.box {
+		padding: 0 0 5px 15px;
+		display: flex;
+		align-items: center;
+		.num {
+			font-size: 24px;
+			font-weight: 600;
+			margin: 0 10px;
+		}
+	}
+}
+
+.content1 {
+	// height: 200px;
+	height: 100%;
+
+	.chart1 {
+		margin: 0 auto;
+		width: 100%;
+		height: 192px;
+		background: transparent;
+	}
+}
+
+.num {
+	font-size: 30px;
+	font-family: Roboto-BlackItalic, Roboto;
+	font-weight: normal;
+	color: #91d5fe;
+	vertical-align: sub;
+	//   margin-right: 3px;
+}
+
+.content2 {
+	padding: 20px;
+	flex: 1;
+	height: 100%;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	.chart2 {
+		height: 100%;
+	}
+
+	.tit {
+		font-size: 16px;
+		font-family: PingFangSC-Semibold, PingFang SC;
+		font-weight: 600;
+		color: #ffffff;
+		line-height: 22px;
+		position: relative;
+		padding-left: 15px;
+	}
+	.tit::after {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 3px;
+		left: 0px;
+		width: 4px;
+		height: 16px;
+		background: #00ffff;
+	}
+}
+</style>
diff --git a/src/views/bigScreen/qualityManage/right2-1.png b/src/views/bigScreen/qualityManage/right2-1.png
new file mode 100644
index 0000000..d716cee
Binary files /dev/null and b/src/views/bigScreen/qualityManage/right2-1.png differ
diff --git a/src/views/bigScreen/qualityManage/right2-2.png b/src/views/bigScreen/qualityManage/right2-2.png
new file mode 100644
index 0000000..fa9d3d1
Binary files /dev/null and b/src/views/bigScreen/qualityManage/right2-2.png differ
diff --git a/src/views/bigScreen/qualityManage/right2.vue b/src/views/bigScreen/qualityManage/right2.vue
new file mode 100644
index 0000000..996247f
--- /dev/null
+++ b/src/views/bigScreen/qualityManage/right2.vue
@@ -0,0 +1,282 @@
+<template>
+	<div>
+		<container5 title="危险作业厂所压减情况">
+			<el-row style="height: 80%; display: flex; align-items: center">
+				<el-col :span="12">
+					<div class="right1_bg right1_bg1">
+						<div><span class="num">4 / 6</span></div>
+						<div style="font-size: 14px">现有/原有</div>
+						<div class="txt">三人以上危险作业场所</div>
+					</div>
+				</el-col>
+				<el-col :span="12">
+					<div class="right1_bg right1_bg2">
+						<div><span class="num">2 / 7</span></div>
+						<div style="font-size: 14px">现有/原有</div>
+						<div class="txt">十人以上危险作业场所</div>
+					</div>
+				</el-col>
+			</el-row>
+		</container5>
+	</div>
+</template>
+
+<script>
+import scalseBox from '../components/scaleBox.vue'
+import bigScreenHead from '../components/bigScreenHead/index.vue'
+import rocketTit from '../components/rocketTit/index.vue'
+import container5 from './components/container5/index.vue'
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+	mixins: [resize],
+	name: 'right2',
+	components: {
+		scalseBox,
+		bigScreenHead,
+		rocketTit,
+		container5,
+	},
+	data() {
+		return {
+			dateRange: [],
+			chart: null,
+			option: {
+				legend: {
+					data: ['利润', '利润预测', '利润目标完成率'],
+					textStyle: {
+						color: '#fff',
+					},
+				},
+				grid: {
+					left: '3%',
+					right: '6%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				xAxis: [
+					{
+						type: 'category',
+						data: [
+							'2021-01',
+							'2021-02',
+							'2021-03',
+							'2021-04',
+							'2021-05',
+							'2021-06',
+							'2021-07',
+							'2021-08',
+							'2021-09',
+							'2021-10',
+							'2021-11',
+							'2021-12',
+						],
+						axisPointer: {
+							type: 'shadow',
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				yAxis: [
+					{
+						type: 'value',
+						name: '万元',
+						min: 0,
+						max: 250,
+						interval: 50,
+						axisLabel: {
+							formatter: '{value}',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+					{
+						type: 'value',
+						min: 0,
+						max: 25,
+						interval: 5,
+						axisLabel: {
+							formatter: '{value} %',
+						},
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
+						},
+					},
+				],
+				grid: {
+					containLabel: true,
+					width: '99%',
+					left: 0,
+					top: 50,
+					bottom: 50,
+				},
+				dataZoom: {},
+				series: [
+					{
+						name: '利润',
+						type: 'bar',
+						barWidth: 20,
+						data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+						itemStyle: {
+							color: 'rgb(118,196,166)',
+						},
+					},
+					{
+						name: '利润预测',
+						type: 'bar',
+						barWidth: 20,
+						data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+						itemStyle: {
+							color: {
+								type: 'linear', // 线性渐变
+								x: 0,
+								y: 0,
+								x2: 0,
+								y2: 1,
+								colorStops: [
+									{
+										offset: 0,
+										color: '#B5D3FE', // 0%处的颜色为红色
+									},
+									{
+										offset: 1,
+										color: '#7EA7FC', // 100%处的颜色为蓝
+									},
+								],
+							},
+						},
+					},
+					{
+						name: '利润目标完成率',
+						type: 'line',
+						yAxisIndex: 1,
+						smooth: false,
+						data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
+						itemStyle: {
+							normal: {
+								color: '#F6D97E',
+							},
+						},
+						symbol: 'none',
+					},
+				],
+				// yAxis: {
+				//   type: 'value',
+				//   splitLine: {
+				//     show: false//不显示网格线
+				//   },
+				//   splitArea: {
+				//     show: false//不显示网格区域
+				//   },
+				//   axisLine: {
+				//     lineStyle: {
+				//       color: 'rgb(255, 255, 255)'
+				//     },
+				//   }
+				// },
+				// series: [
+				//   {
+				//     name: '利润',
+				//     type: 'bar',
+				//     data: [
+				//       2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+				//     ]
+				//   },
+				//   {
+				//     name: '利润预测',
+				//     type: 'bar',
+				//     data: [
+				//       2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+				//     ]
+				//   },
+				//   {
+				//     name: '利润目标完成率',
+				//     type: 'line',
+				//     yAxisIndex: 1,
+				//     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+				//   }
+
+				// ]
+			},
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			// this.initChart()
+		})
+	},
+	beforeDestroy() {
+		if (!this.chart) {
+			return
+		}
+		this.chart.dispose()
+		this.chart = null
+	},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$refs.chart)
+			this.chart.setOption(this.option)
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.right1_bg {
+	position: relative;
+	width: 147px;
+	height: 113px;
+	background-size: cover;
+	text-align: center;
+	padding: 0 0 10px 0;
+	margin: 20px auto 0 auto;
+	font-size: 14px;
+	.num {
+		font-size: 35px;
+		font-family: Roboto-Black, Roboto;
+		font-weight: 900;
+		line-height: 35px;
+		margin-right: 3px;
+		vertical-align: middle;
+	}
+	.txt {
+		position: absolute;
+		bottom: -30px;
+	}
+}
+.right1_bg1 {
+	background-image: url(./right2-1.png);
+	.num {
+		color: #1098ff;
+	}
+}
+.right1_bg2 {
+	background-image: url(./right2-2.png);
+	.num {
+		color: #f6d97e;
+	}
+}
+</style>