From 3bed560deadb51ad7ff2bd1680cf0a8b9f71720f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Tue, 21 Dec 2021 14:31:02 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A8=E9=87=8F=E7=AE=A1=E7=90=86=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0flv.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/utils/gradualColor.js                     |  90 +++--
 src/views/bigScreen/qualityManage/center.vue  |  19 +-
 src/views/bigScreen/qualityManage/center2.vue |  72 ++--
 .../components/center2/index.vue              |   1 +
 src/views/bigScreen/qualityManage/left1.vue   |  88 +++--
 src/views/bigScreen/qualityManage/left2.vue   | 373 ++++++------------
 src/views/bigScreen/qualityManage/left3.vue   |  42 +-
 src/views/bigScreen/qualityManage/right1.vue  | 364 ++++++++---------
 9 files changed, 514 insertions(+), 536 deletions(-)

diff --git a/package.json b/package.json
index 56e9eae..9bfddec 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "echarts-liquidfill": "^2.0.2",
     "element-ui": "2.15.6",
     "file-saver": "2.0.5",
+    "flv.js": "^1.6.2",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
     "js-beautify": "1.13.0",
diff --git a/src/utils/gradualColor.js b/src/utils/gradualColor.js
index c4bc2ce..b4db7df 100644
--- a/src/utils/gradualColor.js
+++ b/src/utils/gradualColor.js
@@ -1,38 +1,68 @@
 export const yelloColorList = [
-	'#FFFDE7',
-	'#FFF9C4',
-	'#FFF59D',
-	'#FFF176',
-	'#FFEE58',
-	'#FFEB3B',
-	'#FDD835',
-	'#FBC02D',
-	'#F9A825',
-	'#F57F17',
+	'#fff7e8',
+	'#fff2d8',
+	'#fce5b8',
+	'#f5d89e',
+	'#f0cc82',
+	'#f4cb72',
+	'#ecbe5a',
+	'#e6b346',
+	'#e3ac34',
+	'#dea72d',
+	'#d9a127',
+	'#c58f1b',
+	'#bd8711',
+	'#a97910',
+	'#90670d',
+	'#7d5705',
+	'#6a4b07',
+	'#583d02',
+	'#4b3402',
+	'#332300',
 ]
 export const greenColorList = [
-	'#F1F8E9',
-	'#DCEDC8',
-	'#C5E1A5',
-	'#AED581',
-	'#9CCC65',
-	'#8BC34A',
-	'#7CB342',
-	'#689F38',
-	'#558B2F',
-	'#33691E',
+	'#EBFFF7',
+	'#DAFEF0',
+	'#B3FFE1',
+	'#9DFAD5',
+	'#7AF6C4',
+	'#58EAB0',
+	'#26DC94',
+	'#1EC580',
+	'#0FB570',
+	'#03A562',
+	'#089F61',
+	'#06965B',
+	'#048C54',
+	'#087A4B',
+	'#03623B',
+	'#045936',
+	'#034F30',
+	'#004327',
+	'#00341F',
+	'#002918',
 ]
 export const blueColorList = [
-	'#E3F2FD',
-	'#BBDEFB',
-	'#90CAF9',
-	'#64B5F6',
-	'#42A5F5',
-	'#2196F3',
-	'#1E88E5',
-	'#1976D2',
-	'#1565C0',
-	'#0D47A1',
+	'#F4F7FF',
+	'#E9F0FF',
+	'#D3E1FF',
+	'#C6D6F8',
+	'#B9CFFD',
+	'#AEC4F3',
+	'#9BB6EE',
+	'#88A6E8',
+	'#6c92e4',
+	'#618be4',
+	'#507edf',
+	'#4576de',
+	'#2d61cb',
+	'#1b51c0',
+	'#1948aa',
+	'#073aa4',
+	'#093691',
+	'#092c74',
+	'#052464',
+	'#001541',
 ]
 export const greyColorList = [
 	// #FAFAFA
diff --git a/src/views/bigScreen/qualityManage/center.vue b/src/views/bigScreen/qualityManage/center.vue
index 9440343..57c9327 100644
--- a/src/views/bigScreen/qualityManage/center.vue
+++ b/src/views/bigScreen/qualityManage/center.vue
@@ -62,11 +62,24 @@ export default {
 		progressBar,
 	},
 	data() {
-		return {}
+		return {
+			dataInfo: {},
+		}
+	},
+	mounted() {
+		this.getData()
 	},
-	mounted() {},
 	beforeDestroy() {},
-	methods: {},
+	methods: {
+		getData() {
+			this.request({
+				url: '/hx/qualityAssurance/getQualityManage',
+				method: 'get',
+			}).then(({ data }) => {
+				this.dataInfo = data
+			})
+		},
+	},
 }
 </script>
 
diff --git a/src/views/bigScreen/qualityManage/center2.vue b/src/views/bigScreen/qualityManage/center2.vue
index c553d5a..747e465 100644
--- a/src/views/bigScreen/qualityManage/center2.vue
+++ b/src/views/bigScreen/qualityManage/center2.vue
@@ -1,7 +1,9 @@
 <template>
 	<div>
 		<center2 title="关键参数SPC分析">
-			<el-select v-model="value" slot="datePicker" size="mini" placeholder="请选择"> </el-select>
+			<el-select v-model="value" slot="datePicker" size="mini" placeholder="请选择" @change="handleValue">
+				<el-option v-for="item in selectData" :key="item" :label="item" :value="item"> </el-option>
+			</el-select>
 			<div style="height: 100%; width: 100%" ref="chart"></div>
 		</center2>
 	</div>
@@ -25,24 +27,55 @@ export default {
 	data() {
 		return {
 			value: '',
+			selectData: [],
 			chart: null,
 		}
 	},
 	mounted() {
 		this.$nextTick(() => {
-			this.initChart()
+			this.getSelectData()
 		})
 	},
 	beforeDestroy() {},
 	methods: {
-		initChart() {
-			this.chart = echarts.init(this.$refs.chart)
-			this.setOptions()
+		handleValue(e) {
+			this.initChart()
 		},
-		setOptions() {
+		getSelectData() {
+			this.request({
+				url: '/hx/qualityAssurance/getHxAllSpcCategory',
+				method: 'get',
+			}).then(({ data }) => {
+				if (!data.length) return console.log('暂无分类')
+				this.selectData = data
+				this.value = data[0]
+				this.initChart()
+			})
+		},
+		initChart() {
+			this.request({
+				url: '/hx/qualityAssurance/getHxSpcPic',
+				method: 'get',
+				params: {
+					category: this.value,
+				},
+			}).then(({ data }) => {
+				this.chart = echarts.init(this.$refs.chart)
+				this.setOptions(data)
+			})
+		},
+		setOptions(resData) {
+			let product = []
+			let lowerLimit = []
+			let upperLimit = []
+			for (let i = 0; i < resData.length; i++) {
+				const item = resData[i]
+				product.push(item.product)
+				upperLimit.push(item.upperLimit)
+				lowerLimit.push(item.lowerLimit)
+			}
 			this.chart.setOption({
 				legend: {
-					data: ['X管制图', 'R管制图'],
 					textStyle: {
 						color: '#fff',
 					},
@@ -56,20 +89,7 @@ export default {
 				xAxis: [
 					{
 						type: 'category',
-						data: [
-							'产品实物一',
-							'产品实物一',
-							'产品实物一',
-							'产品实物一',
-							'产品实物一',
-							'产品实物一',
-							'产品实物一',
-							'产品实物一',
-							'产品实物一',
-							'产品实物一',
-							'产品实物一',
-							'产品实物一',
-						],
+						data: product,
 						axisPointer: {
 							type: 'shadow',
 						},
@@ -130,13 +150,17 @@ export default {
 					top: 50,
 					bottom: 10,
 				},
-				// dataZoom: {},
+				// dataZoom: {
+				// 	type: 'slider',
+				// 	start: 0,
+				// 	end: this.dataZoomEnd(titData.length, 7),
+				// },
 				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],
+						data: upperLimit,
 						itemStyle: {
 							color: '#61DDAA',
 						},
@@ -146,7 +170,7 @@ export default {
 						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],
+						data: lowerLimit,
 						itemStyle: {
 							color: '#7EA7FC',
 						},
diff --git a/src/views/bigScreen/qualityManage/components/center2/index.vue b/src/views/bigScreen/qualityManage/components/center2/index.vue
index 07086aa..c727c84 100644
--- a/src/views/bigScreen/qualityManage/components/center2/index.vue
+++ b/src/views/bigScreen/qualityManage/components/center2/index.vue
@@ -78,6 +78,7 @@ export default {
 
 				input {
 					background-color: transparent;
+					color: #fff;
 				}
 			}
 		}
diff --git a/src/views/bigScreen/qualityManage/left1.vue b/src/views/bigScreen/qualityManage/left1.vue
index 2a8d51f..c1c6f71 100644
--- a/src/views/bigScreen/qualityManage/left1.vue
+++ b/src/views/bigScreen/qualityManage/left1.vue
@@ -72,10 +72,27 @@ export default {
 	beforeDestroy() {},
 	methods: {
 		initChart() {
-			this.chart = echarts.init(this.$refs.chart)
-			this.setOptions()
+			this.request({
+				url: '/hx/qualityAssurance/getQualityPlan',
+				method: 'get',
+				params: {
+					type: '1',
+				},
+			}).then(({ data }) => {
+				this.chart = echarts.init(this.$refs.chart)
+				this.setOptions(data)
+			})
 		},
-		setOptions() {
+		setOptions(resData) {
+			let month = []
+			let rate = []
+			let completed = []
+			for (let i = 0; i < resData.length; i++) {
+				const item = resData[i]
+				month.push(item.month)
+				rate.push(item.rate)
+				completed.push(item.completed)
+			}
 			this.chart.setOption({
 				legend: {
 					data: ['数量', '完成率'],
@@ -92,20 +109,7 @@ export default {
 				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',
-						],
+						data: month,
 						axisPointer: {
 							type: 'shadow',
 						},
@@ -172,7 +176,7 @@ export default {
 						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],
+						data: completed,
 						itemStyle: {
 							color: {
 								type: 'linear', // 线性渐变
@@ -198,7 +202,7 @@ export default {
 						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],
+						data: rate,
 						itemStyle: {
 							color: '#7EA7FC',
 						},
@@ -245,14 +249,30 @@ export default {
 			})
 		},
 		initChart2() {
-			this.chart2 = echarts.init(this.$refs.chart2)
-			this.setOptions2()
+			this.request({
+				url: '/hx/qualityAssurance/getQualityPlan',
+				method: 'get',
+				params: {
+					type: '2',
+				},
+			}).then(({ data }) => {
+				this.chart2 = echarts.init(this.$refs.chart2)
+				this.setOptions2(data)
+			})
 		},
-		setOptions2() {
+		setOptions2(resData) {
+			let deptName = []
+			let rate = []
+			let completed = []
+			for (let i = 0; i < resData.length; i++) {
+				const item = resData[i]
+				deptName.push(item.deptName)
+				rate.push(item.rate)
+				completed.push(item.completed)
+			}
 			this.chart2.setOption({
 				tooltip: {
 					trigger: 'axis',
-					formatter: '{a1}<br/>{b1}：{c1}',
 				},
 				// legend: {
 				// 	// data: ['收入', '实际', '目标'],
@@ -269,7 +289,7 @@ export default {
 					bottom: 50,
 				},
 				xAxis: {
-					data: ['部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门'],
+					data: deptName,
 					axisLine: {
 						lineStyle: {
 							color: 'rgb(255, 255, 255)',
@@ -324,17 +344,6 @@ export default {
 					},
 				],
 				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',
@@ -343,19 +352,20 @@ export default {
 						itemStyle: {
 							color: 'rgba(90, 216, 166, 0.85)',
 						},
-						data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
+						data: completed,
 					},
 					{
 						name: '目标',
 						type: 'scatter',
 						symbol: 'rect',
+						yAxisIndex: 1,
 						symbolSize: [30, 4],
-						symbolOffset: [3, 0],
-						position: [0, 0],
+						// symbolOffset: [3, 0],
+						// position: [0, 0],
 						itemStyle: {
 							color: '#F64F58',
 						},
-						data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
+						data: [50, 40],
 					},
 				],
 			})
diff --git a/src/views/bigScreen/qualityManage/left2.vue b/src/views/bigScreen/qualityManage/left2.vue
index bd2be8b..832f1b3 100644
--- a/src/views/bigScreen/qualityManage/left2.vue
+++ b/src/views/bigScreen/qualityManage/left2.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<container3 title="质量计划">
+		<container3 title="质量体系">
 			<div class="wrap">
 				<el-row class="content1" style="height: 100%">
 					<el-col :span="8" style="height: 100%">
@@ -41,57 +41,12 @@ export default {
 	},
 	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,
+			series: [],
 		}
 	},
 	mounted() {
@@ -109,166 +64,139 @@ export default {
 	},
 	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,
+			this.request({
+				url: '/hx/qualityAssurance/getQualitySystem/2',
+				method: 'get',
+			}).then(({ data: resData }) => {
+				let newData = []
+				let source = []
+				let product = ['product']
+				for (let i = 0; i < resData.allSystem.length; i++) {
+					const element = resData.allSystem[i]
+					product.push(element)
+					this.series.push({ type: 'scatter' })
+				}
+				// console.log(product)
 
-						itemStyle: {
-							color: '#FF667F',
+				for (let i = 0; i < resData.allList.length; i++) {
+					const item = resData.allList[i]
+
+					for (let k = 0; k < resData.allSystem.length; k++) {
+						const item3 = resData.allSystem[k]
+						if (!item['list'][k]) {
+							item['list'][k] = {
+								total: 0,
+								systemName: item3,
+							}
+						}
+					}
+					for (let j = 0; j < item['list'].length; j++) {
+						const item2 = item['list'][j]
+						// console.log(j)
+						// console.log(item2)
+
+						// console.log(source[j])
+						if (source[j]) {
+							source[j].push(item2.total)
+						} else {
+							source[j] = []
+							source[j].push(item2.total)
+						}
+					}
+				}
+				for (let i = 0; i < resData.allDept.length; i++) {
+					const item = resData.allDept[i]
+					source[i].unshift(item)
+				}
+				source.unshift(product)
+				console.log(source)
+				// console.log(newData)
+				this.chart = echarts.init(this.$refs.chart)
+				this.chart.setOption({
+					legend: {
+						textStyle: {
+							color: '#fff',
+						},
+						right: '10%',
+						top: '3%',
+						data: resData.allSystem,
+					},
+					tooltip: {},
+					color: this.colorList,
+					grid: {
+						left: '8%',
+						top: '10%',
+					},
+					dataset: {
+						source,
+					},
+					xAxis: {
+						type: 'category',
+						// splitLine: {
+						// 	lineStyle: {
+						// 		type: 'dashed',
+						// 	},
+						// },
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
 						},
 					},
-					{
-						name: '产品服务要求',
-						data: data[1],
-						type: 'scatter',
-						symbolSize: 8,
-						itemStyle: {
-							color: '#9CEB00',
+					yAxis: {
+						type: 'value',
+						scale: true,
+						splitLine: {
+							show: false, //不显示网格线
+						},
+						splitArea: {
+							show: false, //不显示网格区域
+						},
+						axisLine: {
+							lineStyle: {
+								color: 'rgb(255, 255, 255)',
+							},
 						},
 					},
-					{
-						name: '产品、服务设计开发',
-						data: data[2],
-						type: 'scatter',
-						symbolSize: 8,
-						itemStyle: {
-							color: '#9966FF',
-						},
-					},
-					{
-						name: '外部提供的过程、产品和服务控制',
-						data: data[3],
-						type: 'scatter',
-						symbolSize: 8,
-						itemStyle: {
-							color: '#4E00EB',
-						},
-					},
-				],
+					series: this.series,
+				})
 			})
 		},
 		initLine() {
-			this.chart2 = echarts.init(this.$refs.chart2)
-			this.setOptions2()
+			this.request({
+				url: '/hx/qualityAssurance/getQualitySystem/1',
+				method: 'get',
+			}).then(({ data }) => {
+				this.chart2 = echarts.init(this.$refs.chart2)
+				this.setOptions2(data)
+			})
 		},
-		setOptions2() {
+		setOptions2(resData) {
+			resData.elementsList.map(item => {
+				item['value'] = item.total
+			})
+			let newList = []
+			for (const k in resData.reviewList[0]) {
+				let str = ''
+				if (k == 'externalTotal') {
+					str = '外审'
+				} else if (k == 'internalTotal') {
+					str = '内审'
+				} else {
+					str = '第三方审核'
+				}
+				newList.push({
+					value: resData.reviewList[0][k],
+					name: str,
+				})
+			}
+			console.log(newList)
 			this.chart2.setOption({
 				tooltip: {
 					trigger: 'item',
@@ -284,7 +212,7 @@ export default {
 				},
 				series: [
 					{
-						name: '内审',
+						name: '',
 						type: 'pie',
 						radius: ['60%', '80%'],
 						center: ['30%', '50%'],
@@ -303,17 +231,11 @@ export default {
 						labelLine: {
 							show: false,
 						},
-						data: [
-							{ value: 1048, name: '内审1' },
-							{ value: 735, name: '内审2' },
-							{ value: 580, name: '内审3' },
-							{ value: 484, name: '内审4' },
-							{ value: 301, name: '内审5' },
-						],
+						data: resData.elementsList,
 						color: blueColorList,
 					},
 					{
-						name: '外审',
+						name: '',
 						type: 'pie',
 						radius: ['35%', '55%'],
 						center: ['30%', '50%'],
@@ -332,44 +254,9 @@ export default {
 						labelLine: {
 							show: false,
 						},
-						data: [
-							{ value: 1048, name: '外审1' },
-							{ value: 735, name: '外审2' },
-							{ value: 580, name: '外审3' },
-							{ value: 484, name: '外审4' },
-							{ value: 300, name: '外审5' },
-						],
+						data: newList,
 						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,
-					},
 				],
 			})
 		},
diff --git a/src/views/bigScreen/qualityManage/left3.vue b/src/views/bigScreen/qualityManage/left3.vue
index 493d163..6a067b1 100644
--- a/src/views/bigScreen/qualityManage/left3.vue
+++ b/src/views/bigScreen/qualityManage/left3.vue
@@ -3,7 +3,8 @@
 		<container2 title="视频检验系统实况">
 			<div class="box">
 				<div class="_img">
-					<img src="./1.jpg" alt="" />
+					<!-- <img src="./1.jpg" alt="" /> -->
+					<video id="videoElement" controls autoplay>Your browser is too old which doesn't support HTML5 video.</video>
 				</div>
 				<div class="text">
 					<p style="opacity: 0.8">实况信息</p>
@@ -15,6 +16,8 @@
 </template>
 
 <script>
+import flvjs from 'flv.js'
+
 import scalseBox from '../components/scaleBox.vue'
 import bigScreenHead from '../components/bigScreenHead/index.vue'
 import rocketTit from '../components/rocketTit/index.vue'
@@ -33,9 +36,42 @@ export default {
 		container2,
 	},
 	data() {
-		return {}
+		return {
+			flvPlayer: null,
+		}
 	},
 	methods: {},
+	mounted() {
+		this.$nextTick(() => {
+			if (flvjs.isSupported()) {
+				var videoElement = document.getElementById('videoElement')
+				this.flvPlayer = flvjs.createPlayer(
+					{
+						type: 'flv',
+						isLive: true,
+						fluid: true,
+						stashInitialSize: 128, // 减少首桢显示等待时长
+						url: 'http://192.168.0.151:81/stream/live/livestream.flv',
+					},
+					{
+						enableStashBuffer: false,
+						fixAudioTimestampGap: false,
+						isLive: true,
+					}
+				)
+				this.flvPlayer.attachMediaElement(videoElement)
+				this.flvPlayer.load()
+				this.flvPlayer.play()
+			}
+		})
+	},
+	beforeDestroy() {
+		this.flvPlayer.player.pause()
+		this.flvPlayer.player.unload()
+		this.flvPlayer.player.detachMediaElement()
+		this.flvPlayer.player.destroy()
+		this.flvPlayer.player = null
+	},
 }
 </script>
 
@@ -46,7 +82,7 @@ export default {
 	._img {
 		width: 310px;
 		height: 229px;
-		img {
+		video {
 			width: 100%;
 			height: 100%;
 		}
diff --git a/src/views/bigScreen/qualityManage/right1.vue b/src/views/bigScreen/qualityManage/right1.vue
index 7b9c5e2..d26fabf 100644
--- a/src/views/bigScreen/qualityManage/right1.vue
+++ b/src/views/bigScreen/qualityManage/right1.vue
@@ -23,6 +23,7 @@
 				<vue-seamless-scroll
 					:data="listData"
 					class="warp-scroll"
+					ref="seamlessScroll"
 					:class-option="{
 						singleHeight: 43,
 					}"
@@ -31,8 +32,8 @@
 						<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-col style="text-align: center" :span="8">{{ item.className }}</el-col>
+								<el-col style="text-align: center" :span="12">{{ item.faultRevelation }}</el-col>
 							</el-row>
 						</li>
 					</ul>
@@ -102,39 +103,14 @@ export default {
 			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: '易燃作业',
-				},
-			],
+			scrollList: [],
 		}
 	},
 	mounted() {
 		this.$nextTick(() => {
 			this.initChart()
 			this.initLine()
+			this.getData()
 		})
 	},
 	watch: {
@@ -171,76 +147,36 @@ export default {
 	},
 	beforeDestroy() {},
 	methods: {
+		// 获取滚动列表数据
+		getData() {
+			this.request({
+				url: '/hx/qualityAssurance/getHxQualityCasePic',
+				method: 'get',
+			}).then(({ data }) => {
+				this.scrollList = data
+				this.$refs.seamlessScroll.reset()
+			})
+		},
 		// 右上切换前
 		initChart() {
-			this.chart = echarts.init(this.$refs.chart)
-			this.setOptions()
+			this.request({
+				url: '/hx/qualityAssurance/getQualityProblem',
+				method: 'get',
+				params: {
+					type: '1',
+				},
+			}).then(({ data }) => {
+				this.chart = echarts.init(this.$refs.chart)
+				this.setOptions(data.list)
+			})
 		},
-		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,
-								},
-							],
-						},
-					],
-				},
-			]
+		setOptions(resData) {
+			resData.map((item, index) => {
+				item.value.map(i => {
+					i.value = i.TOTAL
+				})
+			})
 			this.chart.setOption({
-				// series: {
-				// 	type: 'sunburst',
-				// 	center: ['45%', '50%'],
-				// 	radius: [15, '80%'],
-				// 	data: data,
-				// },
-
 				tooltip: {
 					trigger: 'item',
 				},
@@ -256,7 +192,7 @@ export default {
 				},
 				series: [
 					{
-						name: '型号',
+						name: resData[0].dimension,
 						type: 'pie',
 						center: ['35%', '50%'],
 						radius: ['60%', '80%'],
@@ -275,17 +211,18 @@ export default {
 						labelLine: {
 							show: false,
 						},
-						data: [
-							{ value: 1048, name: '型号1' },
-							{ value: 735, name: '型号2' },
-							{ value: 580, name: '型号3' },
-							{ value: 484, name: '型号4' },
-							{ value: 301, name: '型号5' },
-						],
+						data: resData[0].value,
+						// [
+						// 	{ value: 1048, name: '型号1' },
+						// 	{ value: 735, name: '型号2' },
+						// 	{ value: 580, name: '型号3' },
+						// 	{ value: 484, name: '型号4' },
+						// 	{ value: 301, name: '型号5' },
+						// ],
 						color: blueColorList,
 					},
 					{
-						name: '类别',
+						name: resData[1].dimension,
 						type: 'pie',
 						radius: ['35%', '55%'],
 						center: ['35%', '50%'],
@@ -304,17 +241,18 @@ export default {
 						labelLine: {
 							show: false,
 						},
-						data: [
-							{ value: 1048, name: '类别1' },
-							{ value: 735, name: '类别2' },
-							{ value: 580, name: '类别3' },
-							{ value: 484, name: '类别4' },
-							{ value: 300, name: '类别5' },
-						],
+						data: resData[1].value,
+						// [
+						// 	{ value: 1048, name: '类别1' },
+						// 	{ value: 735, name: '类别2' },
+						// 	{ value: 580, name: '类别3' },
+						// 	{ value: 484, name: '类别4' },
+						// 	{ value: 300, name: '类别5' },
+						// ],
 						color: greenColorList,
 					},
 					{
-						name: '部门',
+						name: resData[2].dimension,
 						type: 'pie',
 						radius: ['10%', '30%'],
 						center: ['35%', '50%'],
@@ -333,13 +271,14 @@ export default {
 						labelLine: {
 							show: false,
 						},
-						data: [
-							{ value: 1048, name: '部门1' },
-							{ value: 735, name: '部门2' },
-							{ value: 580, name: '部门3' },
-							{ value: 484, name: '部门4' },
-							{ value: 300, name: '部门5' },
-						],
+						data: resData[2].value,
+						// [
+						// 	{ value: 1048, name: '部门1' },
+						// 	{ value: 735, name: '部门2' },
+						// 	{ value: 580, name: '部门3' },
+						// 	{ value: 484, name: '部门4' },
+						// 	{ value: 300, name: '部门5' },
+						// ],
 						color: yelloColorList,
 					},
 				],
@@ -347,10 +286,44 @@ export default {
 		},
 		// 右上切换后
 		initChart1() {
-			this.chart1 = echarts.init(this.$refs.chart1)
-			this.setOptions1()
+			this.request({
+				url: '/hx/qualityAssurance/getQualityProblem',
+				method: 'get',
+				params: {
+					type: '2',
+				},
+			}).then(({ data }) => {
+				this.chart1 = echarts.init(this.$refs.chart1)
+				this.setOptions1(data)
+			})
 		},
-		setOptions1() {
+		setOptions1(resData) {
+			let titData = resData.allName
+			delete resData.allName
+			let titList = []
+			let valList = []
+			for (let index = 0; index < titData.length; index++) {
+				valList.push([])
+			}
+			let newData = {}
+			for (let i = 0; i < resData.list.length; i++) {
+				const item = resData.list[i]
+				for (const key in item) {
+					newData[key] = item[key]
+				}
+			}
+			for (const key in newData) {
+				if (Object.hasOwnProperty.call(newData, key)) {
+					const item = newData[key]
+					titList.push(key)
+					for (let i = 0; i < item.length; i++) {
+						const ele = item[i]
+						let index = titData.findIndex(e => e == ele.name)
+						valList[index][titList.length - 1] = ele.COMPLETED
+					}
+				}
+			}
+
 			this.chart1.setOption({
 				tooltip: {
 					trigger: 'axis',
@@ -359,7 +332,7 @@ export default {
 					},
 				},
 				legend: {
-					data: ['类别一', '类别二', '类别三'],
+					data: titData,
 					textStyle: {
 						color: '#fff', //legend字体颜色
 					},
@@ -373,16 +346,17 @@ export default {
 				},
 				dataZoom: {
 					type: 'slider',
-					// start: 0,
-					// end: 50,
+					start: 0,
+					end: this.dataZoomEnd(titList.length, 5),
 					textStyle: {
 						color: '#fff',
 					},
 				},
+				color: colorList,
 				xAxis: [
 					{
 						type: 'category',
-						data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
+						data: titList,
 						axisLine: {
 							lineStyle: {
 								color: 'rgb(255, 255, 255)',
@@ -415,55 +389,49 @@ export default {
 					},
 				],
 				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],
-					},
+					...valList.map((e, index) => {
+						return {
+							name: titData[index],
+							type: 'bar',
+							stack: 'Ad',
+							emphasis: {
+								focus: 'series',
+							},
+							barWidth: 30,
+							data: e,
+						}
+					}),
 				],
 			})
 		},
 
 		initLine() {
-			this.chart2 = echarts.init(this.$refs.chart2)
-			this.setOptions2()
+			this.request({
+				url: '/hx/qualityAssurance/getHxQualityInspect',
+				method: 'get',
+				params: {
+					type: '1',
+				},
+			}).then(({ data }) => {
+				this.chart2 = echarts.init(this.$refs.chart2)
+				this.setOptions2(data.factory)
+			})
 		},
-		setOptions2() {
+		setOptions2(resData) {
+			let month = []
+			let cate = [] // 率
+			let completed = [] // 完成
+			for (let i = 0; i < resData.length; i++) {
+				const item = resData[i]
+				month.push(item.month)
+				cate.push(item.CATE)
+				completed.push(item.COMPLETED)
+			}
 			this.chart2.setOption({
+				tooltip: {
+					trigger: 'axis',
+					// formatter: '{a1}<br/>{b1}：{c1}',
+				},
 				legend: {
 					data: ['数量', '完成率'],
 					textStyle: {
@@ -479,20 +447,7 @@ export default {
 				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',
-						],
+						data: month,
 						axisPointer: {
 							type: 'shadow',
 						},
@@ -559,7 +514,7 @@ export default {
 						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],
+						data: completed,
 						itemStyle: {
 							color: {
 								type: 'linear', // 线性渐变
@@ -585,7 +540,7 @@ export default {
 						type: 'line',
 						yAxisIndex: 1,
 						smooth: false,
-						data: [80, 70, 80, 70, 80, 70, 80, 70, 80, 70, 80, 70],
+						data: cate,
 						itemStyle: {
 							color: '#55C5A2',
 						},
@@ -632,14 +587,34 @@ export default {
 			})
 		},
 		initChart22() {
-			this.chart22 = echarts.init(this.$refs.chart22)
-			this.setOptions22()
+			this.request({
+				url: '/hx/qualityAssurance/getHxQualityInspect',
+				method: 'get',
+				params: {
+					type: '2',
+				},
+			}).then(({ data }) => {
+				this.chart22 = echarts.init(this.$refs.chart22)
+				this.setOptions22(data.dept)
+			})
 		},
-		setOptions22() {
+		setOptions22(resData) {
+			console.log(resData)
+			let deptName = []
+			let cate = [] // 率
+			let completed = [] // 完成
+			let total = [] // 总
+			for (let i = 0; i < resData.length; i++) {
+				const item = resData[i]
+				deptName.push(item.dept_name)
+				cate.push(item.CATE)
+				completed.push(item.COMPLETED)
+				total.push(item.TOTAL)
+			}
 			this.chart22.setOption({
 				tooltip: {
 					trigger: 'axis',
-					formatter: '{a1}<br/>{b1}：{c1}',
+					// formatter: '{a1}<br/>{b1}：{c1}',
 				},
 				// legend: {
 				// 	// data: ['收入', '实际', '目标'],
@@ -656,7 +631,7 @@ export default {
 					bottom: 50,
 				},
 				xAxis: {
-					data: ['部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门', '部门'],
+					data: deptName,
 					axisLine: {
 						lineStyle: {
 							color: 'rgb(255, 255, 255)',
@@ -720,7 +695,7 @@ export default {
 						itemStyle: {
 							color: 'rgba(85, 197, 162, .3)',
 						},
-						data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
+						data: total,
 					},
 					{
 						name: '实际',
@@ -730,7 +705,7 @@ export default {
 						itemStyle: {
 							color: 'rgba(90, 216, 166, 0.85)',
 						},
-						data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
+						data: completed,
 						itemStyle: {
 							color: {
 								type: 'linear', // 线性渐变
@@ -761,7 +736,8 @@ export default {
 						itemStyle: {
 							color: '#F6D97E',
 						},
-						data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
+						yAxisIndex: 1,
+						data: cate,
 					},
 				],
 			})
@@ -791,8 +767,8 @@ export default {
 			display: block;
 			height: 42px;
 			line-height: 42px;
-			background: #2a437d;
-			opacity: 0.6;
+			background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
+			// opacity: 0.6;
 			// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
 			margin-bottom: 1px;
 			img {