Merge pull request 'fzq' (#32) from fzq into develop

Reviewed-on: #32

src/i18n/en.js

@@ -408,6 +408,7 @@ t.pl = {}
 t.pl.title = 'Product Line'
 t.pl.id = 'Product Line ID'
 t.pl.name = 'Product Line Name'
+t.pl.sum = 'Sum'
 t.pl.code = 'Product Line Code'
 t.pl.status = 'Product Line Status'
 t.pl.belong = 'Product Line'

src/i18n/zh-CN.js

@@ -409,6 +409,7 @@ t.pl = {}
 t.pl.title = '产线'
 t.pl.id = '产线ID'
 t.pl.name = '产线名称'
+t.pl.sum = '合计'
 t.pl.code = '产线编码'
 t.pl.status = '产线状态'
 t.pl.belong = '所属产线'

src/views/modules/monitoring/equProductTimesequence.vue

@@ -358,7 +358,8 @@ export default {
 			dialogEqList: [],
 			count: 0,
 			// 产线默认产线1
-			lineIds: ['1'],
+			// lineIds: ['1'],
+			lineIds: [],
 			sectionIds: [],
 			lineList: [],
 			// tableConfigStatic,
@@ -428,10 +429,10 @@ export default {
 				if (data && data.code === 0) {
 					this.lineList = data.data
 					// console.log('产线数组', this.lineList)
-					/** set default */
-					if (this.lineList.length) {
-						this.lineIds = [this.lineList[this.lineList.length - 1].id]
-					}
+					/** set default 默认*/
+					// if (this.lineList.length) {
+					// 	this.lineIds = [this.lineList[this.lineList.length - 1].id]
+					// }
 				} else {
 					this.lineList = []
 				}
@@ -446,6 +447,7 @@ export default {
 		// 获取工序列表
 		getWorksetionList() {
 			// 分页列表才有根据产线过滤功能
+			// this.wsList = []
 			for (let i = 0; i < this.lineIds.length; i++) {
 				this.$http({
 					// url: this.$http.adornUrl('/monitoring/workshopSection/list'),
@@ -582,6 +584,8 @@ export default {
 					// 	this.renderChart()
 					// })
 				}
+			}).catch((err) => {
+				// console.error(err)
 			})
 		},
 		setOptions(opts) {
@@ -592,29 +596,29 @@ export default {
 			if (this.chart) this.chart.setOption(this.defaultOpts, true)
 		},
 		// 失效函数
-		parseTableProps(nameData) {
-			const subProps = []
-			const labelNameMap = new Map()
+		// parseTableProps(nameData) {
+		// 	const subProps = []
+		// 	const labelNameMap = new Map()
 
-			// if (nameData.length) {
-			// 	/** 处理 nameData */
-			// 	nameData.forEach((item) => {
-			// 		if (!labelNameMap.get(item.name)) {
-			// 			labelNameMap.set(item.name, 1)
-			// 			subProps.push({ name: item.name, prop: item.name })
-			// 		}
-			// 	})
-			// }
+		// 	// if (nameData.length) {
+		// 	// 	/** 处理 nameData */
+		// 	// 	nameData.forEach((item) => {
+		// 	// 		if (!labelNameMap.get(item.name)) {
+		// 	// 			labelNameMap.set(item.name, 1)
+		// 	// 			subProps.push({ name: item.name, prop: item.name })
+		// 	// 		}
+		// 	// 	})
+		// 	// }
 
-			this.tableConfigDynamic = [
-				{ type: 'index', width: 100, name: i18n.t('index') },
-				{ name: i18n.t('pl.name'), prop: '0' },
-				...Array.from(new Set(res.data.data[0].records.map((item) => moment(item.recordTime).format('MM-DD')))).map((name) => ({ prop: String(++this.count), name }))
-			]
-			/** echarts related */
-			// this.echartCategories = subProps.map((item) => item.name)
-			this.echartCategories = this.dataListDynamic.map((item) => item.name)
-		},
+		// 	this.tableConfigDynamic = [
+		// 		{ type: 'index', width: 100, name: i18n.t('index') },
+		// 		{ name: i18n.t('pl.name'), prop: '0' },
+		// 		...Array.from(new Set(res.data.data[0].records.map((item) => moment(item.recordTime).format('MM-DD')))).map((name) => ({ prop: String(++this.count), name }))
+		// 	]
+		// 	/** echarts related */
+		// 	// this.echartCategories = subProps.map((item) => item.name)
+		// 	this.echartCategories = this.dataListDynamic.map((item) => item.name)
+		// },
 
 		// parseDynamicData(data) {
 		// 	this.echartCheckTypes.splice(0)
@@ -740,9 +744,11 @@ export default {
 					//遍历属性
 					this.keys = [...Object.keys(res.data),...this.keys]
 					// console.log('this.finalVal', this.finalVal)
-					// console.log('keys', this.keys)
+					console.log('keys', this.keys)
 					this.values = Object.values(res.data)
 					// console.log('values', this.values)
+					// 初始化values2
+					this.values2 = []
 					for (let c = 0; c < this.values.length; c++) {
 						this.values2.push(
 							this.values[c].map((item) => {
@@ -750,8 +756,9 @@ export default {
 							})
 						)
 					}
+					console.log('values2', this.values2)
 					this.finalVal = [...this.values2,...this.finalVal]
-					// console.log('this.finalVal', this.finalVal)
+					console.log('this.finalVal', this.finalVal)
 					this.$message.success(this.$t('pl.success'))
 					this.$nextTick(() => {
 						this.dialogVisible = false

src/views/modules/monitoring/equipmentCurrentState.vue

@@ -165,7 +165,11 @@ export default {
 		getEqList() {
 			this.$http({
 				url: this.$http.adornUrl('/monitoring/equipment/page'),
-				method: 'get'
+				method: 'get',
+				params: this.$http.adornParams({
+					limit: 99999,
+					page: 1
+				})
 			}).then(({ data }) => {
 				if (data && data.code === 0) {
 					this.eqList = data.data.list

src/views/modules/monitoring/equipmentEfficiency.vue

@@ -207,7 +207,7 @@ export default {
 					this.factoryList = res.data
 					/** set default */
 					if (this.factoryList.length) {
-						this.dataForm.ftId = this.factoryList[0].id
+						// this.dataForm.ftId = this.factoryList[0].id
 					}
 				} else {
 					this.factoryList = []
@@ -236,7 +236,7 @@ export default {
 				if (res && res.code === 0 && res.data.length) {
 					this.productLineList = res.data
 					/** set default */
-					this.dataForm.productlines = [this.productLineList[0].id]
+					// this.dataForm.productlines = [this.productLineList[0].id]
 				} else {
 					this.productLineList = []
 					this.dataForm.productlines = []

src/views/modules/monitoring/equipmentException.vue

@@ -135,10 +135,10 @@ export default {
 			}).then(({ data: res }) => {
 				if (res && res.code === 0) {
 					this.productLineList = res.data
-					/** set default */
-					if (this.productLineList.length) {
-						this.dataForm.productlines = [this.productLineList[0].id]
-					}
+					/** set default 默认*/
+					// if (this.productLineList.length) {
+					// 	this.dataForm.productlines = [this.productLineList[0].id]
+					// }
 				} else {
 					this.productLineList = []
 					this.dataForm.productlines = []

src/views/modules/monitoring/equipmentPlcConnect.vue

@@ -165,6 +165,8 @@ export default {
 					// page: this.pageIndex,
 					// limit: this.pageSize,
 					// key: this.dataForm.key
+					limit: 99999,
+					page: 1
 				})
 			}).then(({ data }) => {
 				const eqConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'equipmentId')
@@ -180,6 +182,8 @@ export default {
 					// page: this.pageIndex,
 					// limit: this.pageSize,
 					// key: this.dataForm.key
+					limit: 99999,
+					page: 1
 				})
 			}).then(({ data }) => {
 				const plcConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'plcId')

src/views/modules/monitoring/equipmentTimesequence.vue

@@ -270,10 +270,10 @@ export default {
 			}).then(({ data: res }) => {
 				if (res && res.code === 0) {
 					this.productLineList = res.data
-					/** set default */
-					if (this.productLineList.length) {
-						this.dataForm.productlines = this.productLineList[0].id
-					}
+					/** set default 默认*/
+					// if (this.productLineList.length) {
+					// 	this.dataForm.productlines = this.productLineList[0].id
+					// }
 				} else {
 					this.productLineList = []
 				}

src/views/modules/monitoring/productAnalysis.vue

@@ -57,15 +57,10 @@
 					<!-- style="margin-top: 12px" -->
 					<el-row>
 						<!-- v-if="!showGraph" -->
-						<base-table
-							:data="dataList"
-							:table-head-configs="tableConfigDynamic"
-							:max-height="500"
-							@operate-event="handleOperations"
-							@refreshDataList="getDataList" />
+						<base-table :data="dataList" :table-head-configs="tableConfigDynamic" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
 					</el-row>
-						<!-- :series-data="echartsData"  -->
-						<!-- v-else -->
+					<!-- :series-data="echartsData"  -->
+					<!-- v-else -->
 					<el-row style="margin-top: 8px">
 						<fake-chart
 							:categories="echartCategories"
@@ -172,7 +167,9 @@ const FakeChart = {
 						show: true
 					},
 					/** end */
-					data: [this.$t('eq.line1'), this.$t('eq.line2'), this.$t('eq.line3'), this.$t('eq.line4')]
+					data: []
+					// selected:{'产线1':(this.echartsData1 === [] ? false : true) , 'Line 1':(this.echartsData1 === [] ? false : true) ,
+					// '产线2':(this.echartsData2 === [] ? false : true) , 'Line 2':(this.echartsData2 === [] ? false : true) }
 				},
 				xAxis: {
 					type: 'category',
@@ -273,8 +270,8 @@ const FakeChart = {
 		typeList: {
 			handler: function (val, oldVal) {
 				if (val && val !== oldVal) {
-					this.defaultOpts.legend.data.push(...val)
-					// this.defaultOpts.legend.data = val
+					// this.defaultOpts.legend.data.push(...val)
+					this.defaultOpts.legend.data = val
 				}
 			},
 			immediate: true
@@ -428,10 +425,10 @@ export default {
 				if (data && data.code === 0) {
 					this.lineList = data.data
 					// console.log('产线数组', this.lineList)
-					/** set default */
-					if (this.lineList.length) {
-						this.lineIds = [this.lineList[this.lineList.length - 1].id]
-					}
+					/** set default 默认 */
+					// if (this.lineList.length) {
+					// 	this.lineIds = [this.lineList[this.lineList.length - 1].id]
+					// }
 				} else {
 					this.lineList = []
 				}
@@ -489,7 +486,8 @@ export default {
 					this.tableConfigDynamic = [
 						{ type: 'index', width: 100, name: i18n.t('index') },
 						{ name: i18n.t('pl.name'), prop: '0' },
-						...Array.from(new Set(res.data.data[0].records.map((item) => moment(item.recordTime).format('MM-DD')))).map((name) => ({ prop: String(++this.count), name }))
+						{ name: i18n.t('pl.sum'), prop: '1' },
+						...Array.from(new Set(res.data.data[0].records.map((item) => moment(item.recordTime).format('MM-DD')))).map((name) => ({ prop: String(++this.count + 1), name }))
 						/**
 					这一行无敌的，记一下：
 					1. '...'是扩展运算符，是ES6的语法，用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。例如
@@ -504,7 +502,8 @@ export default {
 					7.要在getDataList() 中
 						this.dataList = []
 						this.count = 0
-						初始化一下，否则连续按按钮会空
+						初始化一下，否则连续按按钮会空一个
+				    8.因为后期加了个"合计"字段，所以++this.count + 1，右移一位
 					*/
 					]
 					// console.log('this.tableConfigDynamic', this.tableConfigDynamic)
@@ -512,12 +511,14 @@ export default {
 					// this.dataListDynamic = this.parseDynamicData(res.data.data) || []
 					for (let i = 0; i < res.data.data.length; i++) {
 						this.dataListDynamic[i] = res.data.data[i].records.map((item) => item.outputNum) || []
+						this.dataListDynamic[i].unshift(res.data.data[i].sum)
 						this.dataListDynamic[i].unshift(res.data.data[i].records[i].lineName)
 						var json = {}
 						for (var j = 0; j < this.dataListDynamic[i].length; j++) {
 							json[j] = this.dataListDynamic[i][j]
 						}
 						this.dataList.push(json)
+						// console.log('this.dataList', this.dataList)
 						// this.dataListDynamic[i] =JSON.stringify(this.dataListDynamic[i])
 					}
 					/** echarts related */
@@ -626,6 +627,11 @@ export default {
 			// this.echartsData4 = this.dataListDynamic[3]
 			// 不抛出老是报shift错误
 			try {
+				// 因为又加了“合计”字段，所以再多删除一次
+				this.echartsData1.shift()
+				this.echartsData2.shift()
+				this.echartsData3.shift()
+				this.echartsData4.shift()
 				this.echartsData1.shift()
 				this.echartsData2.shift()
 				this.echartsData3.shift()
@@ -637,6 +643,24 @@ export default {
 			// 	{ name: '11', type: 'bar', data: [/**产线1*/ 2, /**产线2*/ 3] },
 			// 	{ name: '222', type: 'bar', data: [1, 2, 3] }
 			// ]
+			// 没有数据的产线legend隐藏
+			if (this.echartsData1.length !== 0) {
+				this.echartCheckTypes.push(this.$t('eq.line1'))
+			}
+			if (this.echartsData2.length !== 0) {
+				this.echartCheckTypes.push(this.$t('eq.line2'))
+			}
+			if (this.echartsData3.length !== 0) {
+				this.echartCheckTypes.push(this.$t('eq.line3'))
+			}
+			if (this.echartsData4.length !== 0) {
+				this.echartCheckTypes.push(this.$t('eq.line4'))
+			}
+			// console.log('this.echartCheckTypes', this.echartCheckTypes)
+			// console.log(this.echartsData1.length)
+			// console.log(this.echartsData2.length)
+			// console.log(this.echartsData3)
+			// console.log(this.echartsData4)
 		},
 
 		fetchList(startTime, endTime, lineIds) {
@@ -692,4 +716,14 @@ export default {
 	color: #fff;
 	background: #0b58ff;
 }
+.el-month-table td.today .cell {
+    font-weight: normal;
+    color: #000 !important;
+ }
+  .el-month-table td.current:not(.disabled) .cell{
+    color: #ffffff;
+    font-weight: bold !important;
+    background-color: var(--el-datepicker-active-color);
+    border-radius: 100px;
+  }
 </style>

src/views/modules/monitoring/productQuality.vue

@@ -55,6 +55,21 @@
 						</el-radio-group>
 					</el-row>
 					<el-row style="margin-top: 12px">
+						<div style="text-align: right">
+							<!-- 设置设备名称小齿轮table列的图标 -->
+							<el-popover width="200" trigger="click" v-if="showGraph">
+								<div class="box">
+									<!-- :label="item.name ? item.name : item.label" 三元判别就可以让厂务的实时数据可以显示 -->
+									<el-checkbox
+										v-for="(item, index) in echartCategories"
+										:key="'cb' + index"
+										v-model="selectedBox[index]"
+										:label="item"
+										@change="checkboxChange(echartCategories)" />
+								</div>
+								<i slot="reference" class="el-icon-s-tools" style="color: #0b58ff">{{ $t('pl.choose') }}</i>
+							</el-popover>
+						</div>
 						<base-table
 							v-if="!showGraph"
 							:data="dataListDynamic"
@@ -63,7 +78,7 @@
 							@operate-event="handleOperations"
 							@refreshDataList="getDataList" />
 						<!-- :series-data="echartsData"  -->
-						<fake-chart v-else :categories="echartCategories" :type-list="echartCheckTypes" :series-data1="echartsData1" :series-data2="echartsData2" :pass-rate="pass" />
+						<fake-chart v-else :categories="echartRealtime" :type-list="echartCheckTypes" :series-data1="echartsData1" :series-data2="echartsData2" :pass-rate="pass" />
 					</el-row>
 				</el-col>
 			</el-row>
@@ -124,6 +139,7 @@ const FakeChart = {
 	},
 	data() {
 		return {
+			// selectedBox: new Array(100).fill(true),
 			calcMaxHeight,
 			chart: null,
 			// 新加
@@ -135,7 +151,7 @@ const FakeChart = {
 					left: '5%',
 					right: '12%',
 					top: '20%',
-					bottom: '10%'
+					bottom: '22%'
 				},
 				title: {
 					text: i18n.t('eq.productQuality')
@@ -147,12 +163,76 @@ const FakeChart = {
 						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
 					}
 				},
+				toolbox: {
+					feature: {
+						dataView: {
+							show: true,
+							readOnly: true,
+							optionToContent: function (opt) {
+								var axisData = opt.xAxis[0].data
+								var series = opt.series
+								//验证是否是中文
+								var pattern = new RegExp('[\u4E00-\u9FA5]+')
+								if (pattern.test(series[0].name)) {
+									var table =
+										'<table class="layui-table" style="width:100%;text-align:center"><tbody><tr>' +
+										'<td>设备名称</td>' +
+										'<td>' +
+										series[0].name +
+										'</td>' +
+										'<td>' +
+										series[1].name +
+										'</td>' +
+										'<td>' +
+										series[2].name +
+										'</td>' +
+										'</tr>'
+								} else {
+									var table =
+										'<table class="layui-table" style="width:100%;text-align:center"><tbody><tr>' +
+										'<td>Equipment Name</td>' +
+										'<td>' +
+										series[0].name +
+										'</td>' +
+										'<td>' +
+										series[1].name +
+										'</td>' +
+										'<td>' +
+										series[2].name +
+										'</td>' +
+										'</tr>'
+								}
+								for (var i = 0, l = axisData.length; i < l; i++) {
+									table +=
+										'<tr>' +
+										'<td>' +
+										axisData[i] +
+										'</td>' +
+										'<td>' +
+										series[0].data[i] +
+										'</td>' +
+										'<td>' +
+										series[1].data[i] +
+										'</td>' +
+										'<td>' +
+										series[2].data[i] +
+										'</td>' +
+										'</tr>'
+								}
+								table += '</tbody></table>'
+								return table
+							}
+						},
+						restore: { show: true },
+						saveAsImage: { show: true }
+					}
+				},
 				legend: {
-					orient: 'vertical',
-					type: 'scroll',
-					top: 10,
-					right: 0,
-					width: '12%',
+					// orient: 'vertical',
+					// type: 'scroll',
+					// top: 10,
+					// right: 0,
+					// width: '12%',
 					/** 修复文本太长时显示问题 */
 					// formatter: function (name) {
 					// 	return echarts.format.truncateText(name, 120, '14px Microsoft Yahei', '...')
@@ -165,6 +245,9 @@ const FakeChart = {
 				},
 				xAxis: {
 					type: 'category',
+					axisTick: {
+						alignWithLabel: true
+					},
 					data: [],
 					// axisLine: {
 					// 	show: true,
@@ -187,14 +270,72 @@ const FakeChart = {
 
 					// data: ['下片1', '上片1', '磨边机1', '设备13', '钢化炉2', '磨边机2', '设备15', '清洗机1', '钢化炉3']
 				},
-				yAxis: {
-					type: 'value'
-				},
+				yAxis: [
+					{
+						type: 'value',
+						name: i18n.t('eq.okNum'),
+						position: 'left',
+						alignTicks: true,
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: '#5470C6'
+							}
+						},
+						axisLabel: {
+							// formatter: '{value} pcs'
+						}
+					},
+					{
+						type: 'value',
+						name: i18n.t('eq.nokNum'),
+						position: 'right',
+						alignTicks: true,
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: '#91CC75'
+							}
+						},
+						axisLabel: {
+							// formatter: '{value} pcs'
+						}
+					},
+					{
+						type: 'value',
+						name: i18n.t('eq.passRatePercent'),
+						position: 'right',
+						offset: 80,
+						alignTicks: true,
+						axisLine: {
+							show: true,
+							lineStyle: {
+								color: '#FAC857'
+							}
+						},
+						axisLabel: {
+							formatter: '{value} %'
+						}
+					}
+				],
+				dataZoom: [
+					{
+						type: 'slider',
+						start: 0,
+						end: 100,
+						// 最大的放大是图形的2%
+						// maxSpan: 2
+					},
+					{
+						start: 0,
+						end: 10
+					}
+				],
 				series: [
 					// dynamic
 					{
 						name: i18n.t('eq.okNum'),
-						type: 'line',
+						type: 'bar',
 						data: [],
 						label: {
 							normal: {
@@ -207,7 +348,8 @@ const FakeChart = {
 					},
 					{
 						name: i18n.t('eq.nokNum'),
-						type: 'line',
+						type: 'bar',
+						yAxisIndex: 1,
 						data: [],
 						label: {
 							normal: {
@@ -221,6 +363,7 @@ const FakeChart = {
 					{
 						name: i18n.t('eq.passRatePercent'),
 						type: 'line',
+						yAxisIndex: 2,
 						data: [],
 						label: {
 							normal: {
@@ -243,7 +386,8 @@ const FakeChart = {
 		categories: {
 			handler: function (val, oldVal) {
 				if (val && val !== oldVal) {
-					this.defaultOpts.xAxis.data.push(...val)
+					// this.defaultOpts.xAxis.data.push(...val)
+					this.defaultOpts.xAxis.data = val
 				}
 			},
 			immediate: true
@@ -260,7 +404,8 @@ const FakeChart = {
 			// this.defaultOpts.series[0].data.push 注意
 			handler: function (val, oldVal) {
 				if (val && val !== oldVal) {
-					this.defaultOpts.series[0].data.push(...val)
+					// this.defaultOpts.series[0].data.push(...val)
+					this.defaultOpts.series[0].data = val
 				}
 			},
 			immediate: true
@@ -268,7 +413,7 @@ const FakeChart = {
 		seriesData2: {
 			handler: function (val, oldVal) {
 				if (val && val !== oldVal) {
-					this.defaultOpts.series[1].data.push(...val)
+					this.defaultOpts.series[1].data = val
 				}
 			},
 			immediate: true
@@ -276,7 +421,7 @@ const FakeChart = {
 		passRate: {
 			handler: function (val, oldVal) {
 				if (val && val !== oldVal) {
-					this.defaultOpts.series[2].data.push(...val)
+					this.defaultOpts.series[2].data = val
 				}
 			},
 			immediate: true
@@ -329,6 +474,7 @@ export default {
 	components: { BaseTable, SmallTitle, FakeChart },
 	data() {
 		return {
+			selectedBox: new Array(100).fill(true),
 			lineIds: [],
 			lineList: [],
 			// tableConfigStatic,
@@ -354,6 +500,7 @@ export default {
 			// 	]
 			// },
 			echartCategories: null,
+			echartRealtime: [],
 			echartCheckTypes: [],
 			interval: null
 		}
@@ -369,6 +516,9 @@ export default {
 			this.getDataList()
 		}, 1000 * 5 * 60)
 	},
+	beforeMount() {
+		this.selectedBox = new Array(100).fill(true)
+	},
 	deactivated() {
 		if (this.interval) {
 			clearInterval(this.interval)
@@ -395,10 +545,16 @@ export default {
 			this.showGraph = value === dict[0] ? false : true
 		},
 		getDataList() {
+			// this.echartsData1 = []
+			// this.echartsData2 = []
+			// this.pass = []
 			this.showGraph = false
 			this.dataType = i18n.t('table2')
 			this.echartCategories = null
 			this.echartCheckTypes.splice(0)
+			this.echartRealtime = []
+			// 更新下checkbox全选
+			this.selectedBox = new Array(100).fill(true)
 			/** 设置默认日期 */
 			// const startTime = this.datetime[0] || moment().set({ hour: 0, minute: 0, second: 0 }).format('yyyy-MM-DDTHH:mm:ss')
 			// const endTime = this.datetime[1] || moment().set({ hour: 23, minute: 59, second: 59 }).format('yyyy-MM-DDTHH:mm:ss')
@@ -442,9 +598,10 @@ export default {
 					this.echartCategories = this.dataListDynamic.map((item) => {
 						return item.equipmentName
 					})
+					this.echartRealtime = this.echartCategories
 					// this.parseTableProps(res.data.nameData)
 
-					// console.log('this.dataListDynamic', this.dataListDynamic)
+					console.log('this.dataListDynamic', this.dataListDynamic)
 
 					this.buildGraphData()
 				})
@@ -453,34 +610,34 @@ export default {
 				})
 		},
 
-		parseTableProps(nameData) {
-			const subProps = []
-			const labelNameMap = new Map()
+		// parseTableProps(nameData) {
+		// 	const subProps = []
+		// 	const labelNameMap = new Map()
 
-			// if (nameData.length) {
-			// 	/** 处理 nameData */
-			// 	nameData.forEach((item) => {
-			// 		if (!labelNameMap.get(item.name)) {
-			// 			labelNameMap.set(item.name, 1)
-			// 			subProps.push({ name: item.name, prop: item.name })
-			// 		}
-			// 	})
-			// }
+		// 	// if (nameData.length) {
+		// 	// 	/** 处理 nameData */
+		// 	// 	nameData.forEach((item) => {
+		// 	// 		if (!labelNameMap.get(item.name)) {
+		// 	// 			labelNameMap.set(item.name, 1)
+		// 	// 			subProps.push({ name: item.name, prop: item.name })
+		// 	// 		}
+		// 	// 	})
+		// 	// }
 
-			this.tableConfigDynamic = [
-				{ type: 'index', width: 100, name: i18n.t('index') },
-				{ name: i18n.t('eq.sectionName'), prop: 'sectionName' },
-				// ...subProps,
-				{ name: i18n.t('eq.equipmentName'), prop: 'equipmentName' },
-				{ name: i18n.t('eq.okNum'), prop: 'okNum' },
-				{ name: i18n.t('eq.nokNum'), prop: 'nokNum' },
-				{ name: i18n.t('eq.passRate'), prop: 'passRate', filter: (val) => (val || val === 0 ? `${val}%` : '-') }
-			]
+		// 	this.tableConfigDynamic = [
+		// 		{ type: 'index', width: 100, name: i18n.t('index') },
+		// 		{ name: i18n.t('eq.sectionName'), prop: 'sectionName' },
+		// 		// ...subProps,
+		// 		{ name: i18n.t('eq.equipmentName'), prop: 'equipmentName' },
+		// 		{ name: i18n.t('eq.okNum'), prop: 'okNum' },
+		// 		{ name: i18n.t('eq.nokNum'), prop: 'nokNum' },
+		// 		{ name: i18n.t('eq.passRate'), prop: 'passRate', filter: (val) => (val || val === 0 ? `${val}%` : '-') }
+		// 	]
 
-			/** echarts related */
-			// this.echartCategories = subProps.map((item) => item.name)
-			this.echartCategories = this.dataListDynamic.map((item) => item.name)
-		},
+		// 	/** echarts related */
+		// 	// this.echartCategories = subProps.map((item) => item.name)
+		// 	this.echartCategories = this.dataListDynamic.map((item) => item.name)
+		// },
 
 		// parseDynamicData(data) {
 		// 	this.echartCheckTypes.splice(0)
@@ -516,9 +673,32 @@ export default {
 			// 		}
 			// 	})
 			// })
-			this.echartsData1 = this.dataListDynamic.map((item) => item.okNum)
-			this.echartsData2 = this.dataListDynamic.map((item) => item.nokNum)
-			this.pass = this.dataListDynamic.map((item) => item.passRate)
+
+			// 新建一个echartRealtime来保存修改checkbox后实时的横坐标数据
+			// this.echartRealtime = this.echartCategories
+			this.echartsData1 = []
+			this.echartsData2 = []
+			this.pass = []
+			// 尝试写个改变checkbox时触发改变this.echartCategories
+			// console.log('this.echartRealtime1', this.echartRealtime)
+			// 初始化
+			this.echartRealtime = []
+			// 根据selectedBox的真假，动态生成横坐标和数值，运用了数组与元素合并
+			for (let i = 0; i < this.echartCategories.length; i++) {
+				if (this.selectedBox[i] == true) {
+					// console.log('this.echartCategories.slice(i)',this.echartCategories.slice(i))
+					// console.log(
+					// 	'this.dataListDynamic.map((item) => item.okNum)',
+					// 	this.dataListDynamic.map((item) => item.okNum)
+					// )
+					this.echartRealtime = [...this.echartRealtime, ...this.echartCategories.slice(i, i + 1)]
+					this.echartsData1 = [...this.echartsData1, this.dataListDynamic.map((item) => item.okNum)[i]]
+					this.echartsData2 = [...this.echartsData2, this.dataListDynamic.map((item) => item.nokNum)[i]]
+					this.pass = [...this.pass, this.dataListDynamic.map((item) => item.passRate)[i]]
+				}
+			}
+			// console.log('this.echartRealtime2', this.echartRealtime)
+			// console.log('this.echartsData1', this.echartsData1)
 			// this.echartsData = result
 			// console.log('result', result)
 			// [
@@ -539,6 +719,13 @@ export default {
 			}).catch((err) => {
 				console.error(err)
 			})
+		},
+		checkboxChange(val) {
+			// console.log('val', val)
+			// console.log('this.selectedBox', this.selectedBox)
+			this.buildGraphData()
+			// console.log('this.echartCategories', this.echartCategories)
+			// console.log('val',val)
 		}
 	}
 }