add 设备效率分析的图表

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" />
-		<el-pagination
+		<transition mode="out-in" name="slide-to-left">
+			<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,
-		subcomponent: TableOperateComponent,
+		width: 120,
+		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.dataListLoading = true
+			this.showGraph = false
+			// 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,
-					page: this.pageSize,
+					// limit: this.pageIndex,
+					// page: this.pageSize,
 					type: 1
 				}
 			}).then(({ data: res }) => {
-				console.log('oee data:', res)
-				if (res.length) {
-					this.dataList = res 
-					this.totalPage = res.length
+				if (res.data && res.code !== 500) {
+					console.log('oee data:', res)
+					if (res.data.length) {
+						this.dataList = res.data
+						// this.dataList = Array(20).fill(1)
+					} else {
+						this.dataList.splice(0)
+					}
 				} else {
 					this.dataList.splice(0)
-					this.totalPage = 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':
-					return this.addOrUpdateHandle(id, true)
-				case 'edit':
-					return this.addOrUpdateHandle(id)
-				case 'delete':
-					return this.deleteHandle(id)
+				case 'view-trend':
+					return this.viewTrend(data)
+				// return this.addOrUpdateHandle(id, true)
+				// case 'edit':
+				// 	return this.addOrUpdateHandle(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>
+