init charts

package-lock.json

@@ -7120,6 +7120,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -17269,6 +17285,21 @@
           "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA="
         }
       }
+    },
+    "zrender": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -15,6 +15,7 @@
     "babel-plugin-component": "^1.1.1",
     "ckeditor4-vue": "^2.1.1",
     "core-js": "^3.6.5",
+    "echarts": "^5.3.3",
     "element-theme": "^2.0.1",
     "element-ui": "^2.15.7",
     "js-cookie": "^2.2.1",

src/views/modules/monitoring/qualityInspectionCurrent.vue

@@ -43,8 +43,15 @@
 						</el-radio-group>
 					</el-row>
 					<el-row style="margin-top: 12px;">
-						<base-table v-if="!showGraph"></base-table>
+						<base-table
-						<fake-chart v-else></fake-chart>
+							v-if="!showGraph"
+							:data="dataListDynamic"
+							:table-head-configs="tableConfigDynamic"
+							:max-height="500"
+							@operate-event="handleOperations"
+							@refreshDataList="getDataList"
+						/>
+						<fake-chart v-else :categories="echartCategories" :type-list="echartCheckTypes" />
 					</el-row>
 				</el-col>
 			</el-row>
@@ -56,23 +63,111 @@
 import moment from 'moment'
 import BaseTable from '@/components/base-table'
 import SmallTitle from '@/components/small-title'
+import * as echarts from 'echarts'
 
 const tableConfigStatic = [
 	{ type: 'index', name: '序号' },
-	{ name: '上片总数', prop: '' },
+	{ name: '上片总数', prop: 'sumUp' },
-	{ name: '下片总数', prop: '' },
+	{ name: '下片总数', prop: 'sumDown' },
-	{ name: '检测总数', prop: '' },
+	{ name: '检测总数', prop: 'sumCheck' },
+	{ name: '比例', prop: 'scrapRatio', filter: val => (val || val === 0 ? `${val}%` : '-') }
+]
+const tableConfigDynamic = [
+	{ type: 'index', name: '序号' },
+	{ name: '检测类型', prop: 'inspectionContent' },
+	/** dynamic */
+	{ name: '检测类型总数', prop: '' },
 	{ name: '比例', prop: '' }
 ]
-const tableConfigDynamic = []
+
+const FakeChart = {
+	name: 'FakeChart',
+	props: {
+		categories: {
+			type: Array,
+			default: () => []
+		},
+		typeList: {
+			type: Array,
+			default: () => []
+		}
+	},
+	data() {
+		return {
+			chart: null,
+			defaultOpts: {
+				title: {
+					text: '统计数据'
+				},
+				tooltip: {},
+				xAxis: {
+					data: [
+						/** dynamic */
+					]
+				},
+				yAxis: {},
+				series: [
+					// dynamic
+					// {
+					// 	name: '销售',
+					// 	type: 'bar',
+					// 	data: [23, 42, 12, 4, 3]
+					// }
+				]
+			}
+		}
+	},
+	watch: {
+		categories: {
+			handler: function(val, oldVal) {
+				if (val && val !== oldVal) {
+					this.defaultOpts.xAxis.data.push(...val)
+				}
+			},
+			immediate: true
+		},
+		defaultOpts: {
+			handler: function(val) {
+				console.log('defaullt opts change: ', val)
+				this.setOptions()
+			},
+			immediate: true,
+			deep: true
+		}
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initChart()
+			this.setOptions()
+		})
+	},
+	methods: {
+		initChart() {
+			if (!this.chart) {
+				this.chart = echarts.init(document.getElementById('bar-chart'))
+			}
+		},
+		setOptions(opts) {
+			/** prop options */
+			if (opts) {
+			}
+
+			if (this.chart) this.chart.setOption(this.defaultOpts)
+		}
+	},
+	render: function(h) {
+		return h('div', { attrs: { id: 'bar-chart' }, style: { background: '#eee', width: '100%', height: '300px', padding: '8px' } }, '')
+	}
+}
 
 const dict = ['表格', '图形']
 export default {
 	name: 'QualityInspectionCurrent',
-	components: { BaseTable, SmallTitle, FakeChart: { render: h => h('span', null, 'fake-chart') } },
+	components: { BaseTable, SmallTitle, FakeChart },
 	data() {
 		return {
 			tableConfigStatic,
+			tableConfigDynamic,
 			dataListStatic: [],
 			dataListDynamic: [],
 			dict,
@@ -91,7 +186,9 @@ export default {
 						}
 					}
 				]
-			}
+			},
+			echartCategories: null,
+			echartCheckTypes: []
 		}
 	},
 	mounted() {
@@ -103,6 +200,8 @@ export default {
 			this.showGraph = value === dict[0] ? false : true
 		},
 		getDataList() {
+			this.echartCategories = null
+			this.echartCheckTypes.splice(0)
 			/** 设置默认日期 */
 			const startTime =
 				this.datetime[0] ||
@@ -118,12 +217,61 @@ export default {
 			/** [1] 获取上下片数据 */
 			this.fetchList('sx', startTime, endTime).then(({ data: res }) => {
 				console.log('sx: ', res)
+				this.dataListStatic = res.data || []
 			})
 			/** [2] 获取产线检测类型 */
 			this.fetchList('pl', startTime, endTime).then(({ data: res }) => {
 				console.log('pl: ', res)
+				/** TODO: 解析 nameData */
+				this.parseTableProps(res.data.nameData)
+
+				this.dataListDynamic = this.parseDynamicData(res.data.data) || []
+
+				console.log('dyname', this.dataListDynamic)
 			})
 		},
+
+		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 })
+					}
+				})
+			}
+
+			this.tableConfigDynamic = [
+				{ type: 'index', name: '序号' },
+				{ name: '检测类型', prop: 'inspectionContent' },
+				...subProps,
+				{ name: '检测类型总数', prop: 'sumInput' },
+				{ name: '比例', prop: 'scrapRatio', filter: val => (val || val === 0 ? `${val}%` : '-') }
+			]
+
+			/** echarts related */
+			this.echartCategories = subProps.map(item => item.name)
+		},
+
+		parseDynamicData(data) {
+			this.echartCheckTypes.splice(0)
+			return data.map(item => {
+				/** echarts related */
+				this.echartCheckTypes.push(item.inspectionContent)
+				if (item.data.length) {
+					/** 解析子数组 */
+					item.data.forEach(subitem => {
+						item[subitem.dynamicName] = subitem.dynamicValue
+					})
+				}
+				return item
+			})
+		},
+
 		fetchList(type, startTime, endTime) {
 			switch (type) {
 				case 'sx':