add 设备效率分析的图表

src/components/base-table/components/operationComponent.js

@@ -19,7 +19,8 @@ export default {
       colors: {
         delete: '#FF5454',
         preview: '#f09843',
-        design: '#99089f'
+        design: '#99089f',
+        // 'view-trend': 'red'
         // add more...
       },
       text: {
@@ -30,6 +31,7 @@ export default {
         viewAttr: i18n.t('viewattr'),
         preview: i18n.t('preview'),
         design: i18n.t('design'),
+        'view-trend': '查看趋势'
         // add more...
       }
     }

src/views/modules/monitoring/equipmentEfficiency.vue

@@ -46,8 +46,12 @@
 			</el-form-item>
 		</el-form>
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+		<transition mode="out-in" name="slide-to-left">
-		<el-pagination
+			<equipment-efficiency-graph v-if="showGraph" key="graph" ref="eegraph" @close-graph="showGraph = false" />
+			<base-table v-else :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+			<!-- v-loading="dataIsLoading " -->
+		</transition>
+		<!-- <el-pagination
 			@size-change="sizeChangeHandle"
 			@current-change="currentChangeHandle"
 			:current-page="pageIndex"
@@ -55,7 +59,7 @@
 			:page-size="pageSize"
 			:total="totalPage"
 			layout="total, sizes, prev, pager, next, jumper"
-		></el-pagination>
+		></el-pagination> -->
 	</div>
 </template>
 
@@ -64,7 +68,7 @@ import i18n from '@/i18n'
 import BaseTable from '@/components/base-table'
 import TableOperateComponent from '@/components/base-table/components/operationComponent'
 import TableTextComponent from '@/components/base-table/components/detailComponent'
-
+import EquipmentEfficiencyGraph from './equipmentEfficiencyGraph.vue'
 import { calcMaxHeight } from '@/utils'
 import { timeFilter } from '@/utils/filters'
 import moment from 'moment'
@@ -126,10 +130,13 @@ const tableConfigs = [
 		prop: 'operations',
 		name: i18n.t('handle'),
 		fixed: 'right',
-		width: 180,
+		width: 120,
-		subcomponent: TableOperateComponent,
+		subcomponent: TableTextComponent,
 		// options: ['edit', 'delete']
-		options: ['view-trend'] // 查看趋势
+		// options: ['view-trend'] // 查看趋势
+		buttonContent: '查看趋势',
+		actionName: 'view-trend',
+		emitFullData: true
 	}
 ]
 
@@ -139,10 +146,11 @@ export default {
 			/** hfxny part */
 			factoryList: [],
 			productLineList: [],
+			showGraph: false,
 			/** */
 			calcMaxHeight,
 			tableConfigs,
-			timeType: 'range',
+			timeType: 'date',
 			rawTime: null, // [] or datetime
 			dataForm: {
 				type: 1,
@@ -159,7 +167,7 @@ export default {
 		}
 	},
 	components: {
-		BaseTable
+		BaseTable, EquipmentEfficiencyGraph
 	},
 
 	created() {
@@ -233,8 +241,8 @@ export default {
 		// 获取数据列表
 		getDataList() {
 			const { startTime, endTime } = this.getTimeRange()
-
+			this.showGraph = false
-			this.dataListLoading = true
+			// this.dataListLoading = true
 			this.$http({
 				url: this.$http.adornUrl('/monitoring/eqAnalysis/oee'),
 				method: 'post',
@@ -243,21 +251,59 @@ export default {
 					endTime,
 					ftId: this.dataForm.ftId,
 					productlines: this.dataForm.productlines,
-					limit: this.pageIndex,
+					// limit: this.pageIndex,
-					page: this.pageSize,
+					// page: this.pageSize,
 					type: 1
 				}
 			}).then(({ data: res }) => {
+				if (res.data && res.code !== 500) {
 					console.log('oee data:', res)
-				if (res.length) {
+					if (res.data.length) {
-					this.dataList = res 
+						this.dataList = res.data
-					this.totalPage = res.length
+						// this.dataList = Array(20).fill(1)
 					} else {
 						this.dataList.splice(0)
-					this.totalPage = 0
+					}
+				} else {
+					this.dataList.splice(0)
+					this.$message.error(res.msg)
 				}
 			})
 		},
+
+		// 查看趋势
+		viewTrend(data) {
+			const { startTime, endTime } = this.getTimeRange()
+			const injectData = {
+				// 时间段
+				startTime,
+				endTime,
+				// 设备id
+				equipmentId: data.eqId,
+				equipmentName: data.eqName,
+				// 时间类型, type 按年，按月，按日等
+				type: 1, // 默认 type 1, 1无间隔；2按月分隔；3按周分隔；4按天分隔
+				// 时长数据: 工作时长， 停机时长，故障时长
+				workTime: data.workTime,
+				stopTime: data.stopTime,
+				downTime: data.downTime,
+				// 比例数据: 工作时长比率，停机时长比率，故障时长比率，速度开动率，OEE，TEEP
+				workRate: data.workRate,
+				stopRate: data.stopRate,
+				downRate: data.downRate,
+				peEfficiency: data.peEfficiency,
+				timeEfficiency: data.timeEfficiency
+			}
+			// console.log('trends data: ', data)
+
+			this.showGraph = true
+
+			setTimeout(() => {
+				// console.log('befoer graph: ', this.$refs.eegraph)
+				this.$refs.eegraph.init(injectData) // 注入初始数据，这些数据在组件内部用作条件，有可能会被更改
+			}, 600) // 动画是500ms
+		},
+
 		// 每页数
 		sizeChangeHandle(val) {
 			this.pageSize = val
@@ -273,16 +319,41 @@ export default {
 		selectionChangeHandle(val) {
 			this.dataListSelections = val
 		},
-		handleOperations({ type, data: id }) {
+
+		handleOperations({ type, data }) {
 			switch (type) {
-				case 'view-detail':
+				case 'view-trend':
-					return this.addOrUpdateHandle(id, true)
+					return this.viewTrend(data)
-				case 'edit':
+				// return this.addOrUpdateHandle(id, true)
-					return this.addOrUpdateHandle(id)
+				// case 'edit':
-				case 'delete':
+				// 	return this.addOrUpdateHandle(id)
-					return this.deleteHandle(id)
+				// case 'delete':
+				// 	return this.deleteHandle(id)
 			}
 		}
 	}
 }
 </script>
+
+<style scoped>
+	.slide-to-left-enter-active,
+	.slide-to-left-leave-active {
+		transition: all 0.5s;
+	}
+	
+	.slide-to-left-enter {
+		transform: translateX(10px);
+		opacity: 0;
+	}
+	
+	.slide-to-left-leave-to {
+		transform: translateX(-10px);
+		opacity: 0;
+	}
+	
+	.slide-to-left-leave,
+	.slide-to-left-enter-to {
+		transform: translateX(0);
+	}
+	</style>
+	

src/views/modules/monitoring/equipmentEfficiencyGraph.vue

@@ -0,0 +1,308 @@
+<!--
+/*
+* @Author: lb
+* @Date: 2022-07-24 13:30:00
+* @LastEditTime: 2022-07-28 09:30:00
+* @LastEditors: lb
+* @Description: 设备效率分析-echarts图
+*/
+-->
+<template>
+	<div class="graph-area">
+		<span class="close-btn" @click="close">
+			<svg xmlns="http://www.w3.org/2000/svg" style="height: 100%; width: 100%;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+			</svg>
+		</span>
+
+		<div class="close-row" style="padding-left: 8px;">
+			<el-radio-group v-model="dataType" class="head-radio-group" size="small" @change="setLegend">
+				<el-radio-button label="百分比" />
+				<el-radio-button label="时间" />
+			</el-radio-group>
+
+			<el-radio-group v-if="1" v-model="searchType" class="head-radio-group" style="margin-left: 8px;" size="small" @change="handleRadioGroupChanged">
+				<el-radio-button v-for="(opt, index) in searchRadioOptions" :key="index" :label="opt" />
+			</el-radio-group>
+		</div>
+
+		<div id="trend-graph" class="real-graph" style="width: 100%; height: 500px;" />
+	</div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import moment from 'moment'
+import { pick } from 'lodash/object'
+
+class EchartConfigs {
+	constructor() {
+		this.color = ['#e91e63', '#4caf50', '#3f51b5', '#ffc107', '#607d8b']
+		this.title = {
+			text: '时间区间走势',
+			top: 0,
+			left: 'center',
+			textStyle: {
+				fontWeight: 'bold',
+				fontSize: 18,
+				lineHeight: 18
+			}
+		}
+		this.tooltip = {
+			trigger: 'axis',
+			// 将axisPointer设置得更显眼一点
+			axisPointer: {
+				type: 'shadow'
+			}
+		}
+		// legend
+		this.legend = {
+			icon: 'circle',
+			top: 24,
+			left: 'center',
+			padding: 8,
+			itemGap: 8,
+			data: [] // 动态设置
+		}
+		this.xAxis = {
+			type: 'category',
+			data: [] // 动态设置
+			// https://tushuo.baidu.com/wave/index#/manufacture/dta9pydmexfdhc0sg/999
+		}
+		this.yAxis = {
+			type: 'value'
+		}
+		this.series = [] // 动态设置
+	}
+
+	setTitle(val) {
+		this.title.text = val
+	}
+
+	setLegend(val) {
+		this.legend.data.splice(0)
+		if (Array.isArray(val)) {
+			this.legend.data = val
+		} else {
+			console.error('setLegend() 只接受数组参数')
+		}
+	}
+
+	setXAxis(val) {
+		// console.log('in setXAxis(): ', val)
+		this.xAxis.data.splice(0)
+		if (Array.isArray(val)) {
+			this.xAxis.data = val
+		} else {
+			console.error('setXAxis() 只接受数组参数')
+		}
+	}
+
+	setSeries(val) {
+		this.series.splice(0)
+		if (Array.isArray(val)) {
+			this.series = val
+		} else {
+			console.error('setSeries() 只接受数组参数')
+		}
+	}
+}
+
+export default {
+	name: 'EquipmentEfficiencyGraph',
+	props: {},
+	data() {
+		return {
+			searchType: '无间隔',
+			searchRadioOptions: ['无间隔', '按月', '按周', '按天'],
+			dataType: '时间',
+			dataRadioOptions: ['时间', '百分比'],
+			config: new EchartConfigs(),
+			chart: null,
+			rateList: [], // 对请求来的数据分流
+			timeList: [],
+			xAxis: [], // 动态设置
+			injectData: null
+		}
+	},
+	methods: {
+		async initChart() {
+			this.config.setTitle(this.injectData.equipmentName + ' 时间区间走势')
+			await this.getList()
+			this.setLegend()
+		},
+
+		init(data) {
+			this.injectData = data
+			if (!this.chart) {
+				this.chart = echarts.init(document.getElementById('trend-graph'))
+				// this.chart.setOption(this.config)
+				this.initChart()
+			}
+		},
+		close() {
+			this.$emit('close-graph')
+		},
+
+		makeQuerys() {
+			const searchTypeMap = {
+				无间隔: 1,
+				按月: 2,
+				按周: 3,
+				按天: 4
+			}
+
+			return {
+				// current: 1,
+				// size: 999,
+				// ftId:  this.injectData.factoryId , // 工厂id
+				// wsId:  this.injectData.workSequenceId , // 工段id
+				// productlines: ['1409788336610934786'], // 产线ids， 这几项都暂时不需要
+				type: searchTypeMap[this.searchType],
+				eqId: this.injectData.equipmentId,
+				startTime: this.injectData.startTime, // '2022-06-14T00:00:00'
+				endTime: this.injectData.endTime
+			}
+		},
+
+		// getOEE
+		getOEE(params) {},
+
+		getList() {
+			const params = this.makeQuerys()
+			// 发起请求
+			return this.getOEE(params).then(res => {
+				this.timeList.splice(0)
+				this.rateList.splice(0)
+				this.xAxis.splice(0)
+				if (res.data) {
+					// 分流
+					res.data.map(item => {
+						const time = moment(item.time)
+						if (this.searchType === '按月') {
+							this.xAxis.push(`${time.year()}年${time.month() + 1}月`)
+						} else if (this.searchType === '按周') {
+							this.xAxis.push(`${time.format('YYYY-MM-DD')}`)
+						} else if (this.searchType === '按天') {
+							this.xAxis.push(`${time.format('YY-M-D')}`)
+						} else {
+							this.xAxis.push(`${time.format('YYYY-MM-DD')}`)
+						}
+						this.timeList.push(pick(item, ['workTime', 'stopTime', 'downTime']))
+						this.rateList.push(pick(item, ['workRate', 'stopRate', 'downRate', 'peEfficiency', 'timeEfficiency', 'oee', 'teep']))
+					})
+
+					// 设置横轴
+					this.config.setXAxis(JSON.parse(JSON.stringify(this.xAxis)))
+				}
+			})
+		},
+
+		async handleRadioGroupChanged() {
+			// 获取数据且设置横轴
+			await this.getList()
+			// 设置legend和数据
+			this.setLegend()
+		},
+
+		setLegend() {
+			// 设置legend
+			const legendMap = {
+				百分比: ['工作时长比率', '停机时长比率', '故障时长比率', '速度开动率', '时间开动率', 'OEE', 'TEEP'],
+				时间: ['工作时长', '停机时长', '故障时长']
+			}
+			this.config.setLegend(legendMap[this.dataType])
+			this.setData()
+			// 重新绘制
+			this.renderGraph()
+		},
+
+		setData() {
+			if (this.dataType === '时间') {
+				const workTimeList = []
+				const stopTimeList = []
+				const downTimeList = []
+				this.timeList.map(item => {
+					workTimeList.push(item.workTime)
+					stopTimeList.push(item.stopTime)
+					downTimeList.push(item.downTime)
+				})
+				this.config.setSeries([
+					{ name: '工作时长', type: 'bar', data: workTimeList },
+					{ name: '停机时长', type: 'bar', data: stopTimeList },
+					{ name: '故障时长', type: 'bar', data: downTimeList }
+				])
+			} else {
+				// 百分比
+				const workRateList = []
+				const stopRateList = []
+				const downRateList = []
+				const peEfficiencyList = []
+				const timeEfficiencyList = []
+				const oeeList = []
+				const teepList = []
+				this.rateList.map(item => {
+					workRateList.push(item.workRate)
+					stopRateList.push(item.stopRate)
+					downRateList.push(item.downRate)
+					peEfficiencyList.push(item.peEfficiency)
+					timeEfficiencyList.push(item.timeEfficiency)
+					oeeList.push(item.oee)
+					teepList.push(item.teep)
+				})
+				this.config.setSeries([
+					{ name: '工作时长比率', type: 'bar', data: workRateList },
+					{ name: '停机时长比率', type: 'bar', data: stopRateList },
+					{ name: '故障时长比率', type: 'bar', data: downRateList },
+					{ name: '速度开动率', type: 'bar', data: peEfficiencyList },
+					{ name: '时间开动率', type: 'bar', data: timeEfficiencyList },
+					{ name: 'OEE', type: 'bar', data: oeeList },
+					{ name: 'TEEP', type: 'bar', data: teepList }
+				])
+			}
+		},
+
+		// 重新绘制图形
+		renderGraph() {
+			// console.log('latest config: ', this.config)
+			this.chart.setOption(this.config)
+		}
+	}
+}
+</script>
+
+<style scoped>
+.graph-area {
+	margin-top: 18px;
+	/* background: #f0f0f0; */
+	width: 100%;
+	min-height: 200px;
+	position: relative;
+}
+
+.close-row {
+	position: relative;
+	padding: 8px 0;
+}
+
+.close-btn {
+	position: absolute;
+	z-index: 1;
+	top: 10px;
+	right: 10px;
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+	transition: color 0.3s linear;
+}
+
+.close-btn:hover {
+	color: #0b58ff;
+}
+
+.head-radio-group >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+	background-color: #0b58ff;
+	border-color: #0b58ff;
+}
+</style>