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/i18n/en.js

@@ -17,6 +17,7 @@ t.routes['质量管理'] = 'Quality Management'
 t.routes['权限管理'] = 'Permission Management'
 t.routes['系统设置'] = 'System Settings'
 t.routes['日志管理'] = 'Log Management'
+t.routes['数据分析'] = 'Data Analysis'
 
 // 二级
 t.routes['厂务'] = 'Factory Affair'
@@ -42,6 +43,9 @@ t.routes['定时任务'] = 'Timed Tasks'
 t.routes['文件上传'] = 'File Upload'
 t.routes['登录日志'] = 'Login Records'
 t.routes['操作日志'] = 'Oprations Records'
+t.routes['设备效率分析'] = 'Equipment Efficiency Analysis'
+t.routes['设备异常分析'] = 'Equipment Exceptions Analysis'
+t.routes['设备状态时序图'] = 'Equipment Status Timesequence'
 
 // 三级
 t.routes['工厂'] = 'Factory'

src/i18n/zh-CN.js

@@ -18,6 +18,7 @@ t.routes['质量管理'] = '质量管理'
 t.routes['权限管理'] = '权限管理'
 t.routes['系统设置'] = '系统设置'
 t.routes['日志管理'] = '日志管理'
+t.routes['数据分析'] = '数据分析'
 
 // 二级
 t.routes['厂务'] = '厂务'
@@ -43,6 +44,9 @@ t.routes['定时任务'] = '定时任务'
 t.routes['文件上传'] = '文件上传'
 t.routes['登录日志'] = '登录日志'
 t.routes['操作日志'] = '操作日志'
+t.routes['设备效率分析'] = '设备效率分析'
+t.routes['设备异常分析'] = '设备异常分析'
+t.routes['设备状态时序图'] = '设备状态时序图'
 
 // 三级
 t.routes['工厂'] = '工厂'

src/utils/request.js

@@ -8,8 +8,8 @@ import merge from 'lodash/merge'
 
 const http = axios.create({
   // baseURL: window.SITE_CONFIG['apiURL'],
-  // baseURL: '/api',
-  baseURL: process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor',
+  baseURL: '/api',
+  // baseURL: process.env.NODE_ENV === 'production' ? '/api' : '/yd-monitor',
   timeout: 1000 * 180,
   withCredentials: true
 })

src/views/modules/monitoring/equipmentEfficiency.vue

@@ -0,0 +1,362 @@
+<template>
+	<!-- 设备效率分析 -->
+	<div class="mod-config">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+			<!-- 工厂 -->
+			<el-form-item>
+				<!-- <el-select v-model="dataForm.factoryId" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-select> -->
+				<el-select v-model="dataForm.ftId" :placeholder="'工厂'" clearable>
+					<el-option v-for="factory in factoryList" :key="factory.id" :value="factory.id" :label="factory.name" />
+				</el-select>
+			</el-form-item>
+			<!-- 产线 -->
+			<el-form-item>
+				<el-select v-model="dataForm.productlines" :placeholder="'产线'" multiple clearable>
+					<el-option v-for="productLine in productLineList" :key="productLine.id" :value="productLine.id" :label="productLine.name" />
+				</el-select>
+			</el-form-item>
+			<!-- 时间类型 -->
+			<!-- 按时间段 -->
+			<el-form-item>
+				<el-select v-model="timeType" :placeholder="'时间类型'" clearable>
+					<el-option value="range" label="按时间段" />
+					<el-option value="date" label="按日期" />
+				</el-select>
+			</el-form-item>
+			<!-- 日期选择 -->
+			<el-form-item v-if="timeType === 'date'">
+				<el-date-picker key="range-picker" v-model="rawTime" type="date" :placeholder="'请选择日期'" format="yyyy-MM-dd" />
+			</el-form-item>
+			<!-- 时间段选择 -->
+			<el-form-item v-else>
+				<el-date-picker
+					key="time-picker"
+					v-model="rawTime"
+					type="daterange"
+					:range-separator="'至'"
+					:start-placeholder="'开始时间'"
+					:end-placeholder="'结束时间'"
+					format="yyyy-MM-dd"
+				/>
+			</el-form-item>
+			<!-- 按钮 -->
+			<el-form-item>
+				<el-button @click="getDataList()">{{ $t('search') }}</el-button>
+				<!-- <el-button v-if="$hasPermission('monitoring:equipmentEffiency:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
+			</el-form-item>
+		</el-form>
+
+		<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"
+			:page-sizes="[10, 20, 50, 100]"
+			:page-size="pageSize"
+			:total="totalPage"
+			layout="total, sizes, prev, pager, next, jumper"
+		></el-pagination> -->
+	</div>
+</template>
+
+<script>
+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'
+
+const tableConfigs = [
+	{
+		type: 'index',
+		name: i18n.t('index')
+	},
+	{
+		// name: i18n.t('createTime'),
+		prop: 'factoryName',
+		name: '工厂'
+	},
+	{ prop: 'pdName', name: '产线' },
+	{ prop: 'wsName', name: '工段' },
+	{ prop: 'eqName', name: '设备' },
+	{
+		name: '有效时间(h)',
+		children: [
+			{ prop: 'workTime', name: '工作时长(h)', width: 120, filter: val => `${val} 小时` },
+			{ prop: 'workRate', name: '工作时长比率', width: 120, filter: val => (val * 100).toFixed(2) + '%' }
+		]
+	},
+	{
+		name: '关机时间(h)',
+		children: [
+			{ prop: 'stopTime', name: '停机时长(h)', width: 120, filter: val => `${val} 小时` },
+			{ prop: 'stopRate', name: '停机比率', width: 120, filter: val => (val * 100).toFixed(2) + '%' }
+		]
+	},
+	{
+		name: '中断损失',
+		children: [
+			{ prop: 'downTime', name: '故障时长(h)', width: 120, filter: val => `${val} 小时` },
+			{ prop: 'downRate', name: '故障比率', width: 120, filter: val => (val * 100).toFixed(2) + '%' },
+			{ prop: 'timeEfficiency', name: '时间开动率', width: 120, filter: val => (val * 100).toFixed(2) + '%' }
+		]
+	},
+	{
+		name: '速度损失',
+		children: [
+			{ prop: 'realYield', name: '实际加工速度', width: 120, filter: val => `${val} 小时` },
+			{ prop: 'designYield', name: '理论加工速度', width: 120, filter: val => `${val} 小时` },
+			{ prop: 'peEfficiency', name: '速度开动率', width: 120, filter: val => (val * 100).toFixed(2) + '%' }
+		]
+	},
+	{
+		name: 'OEE',
+		prop: 'oee',
+		filter: val => (val * 100).toFixed(2) + '%'
+	},
+	{
+		name: 'TEEP',
+		prop: 'teep',
+		filter: val => (val * 100).toFixed(2) + '%'
+	},
+	{
+		prop: 'operations',
+		name: i18n.t('handle'),
+		fixed: 'right',
+		width: 120,
+		subcomponent: TableTextComponent,
+		// options: ['edit', 'delete']
+		// options: ['view-trend'] // 查看趋势
+		buttonContent: '查看趋势',
+		actionName: 'view-trend',
+		emitFullData: true
+	}
+]
+
+export default {
+	data() {
+		return {
+			/** hfxny part */
+			factoryList: [],
+			productLineList: [],
+			showGraph: false,
+			/** */
+			calcMaxHeight,
+			tableConfigs,
+			timeType: 'date',
+			rawTime: null, // [] or datetime
+			dataForm: {
+				type: 1,
+				ftId: null,
+				productlines: [],
+				startTime: null,
+				entTime: null
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false
+		}
+	},
+	components: {
+		BaseTable,
+		EquipmentEfficiencyGraph
+	},
+
+	created() {
+		this.getFactoryList()
+		this.getProductLineList()
+	},
+	watch: {
+		timeType() {
+			// 防止切换日期类型时报错
+			this.rawTime = null
+		}
+	},
+	methods: {
+		// 获取工厂列表
+		getFactoryList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/factory/page'),
+				method: 'get'
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.factoryList = data.data.list
+					/** set default */
+					if (this.factoryList.length) {
+						this.dataForm.ftId = this.factoryList[0].id
+					}
+				} else {
+					this.factoryList = []
+					this.dataForm.ftId = null
+				}
+			})
+		},
+		// 获取产线列表
+		getProductLineList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/productionLine/page'),
+				method: 'get'
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.productLineList = data.data.list
+					/** set default */
+					if (this.productLineList.length) {
+						this.dataForm.productlines = [this.productLineList[0].id]
+					}
+				} else {
+					this.productLineList = []
+				}
+			})
+		},
+
+		// 时间类型预处理
+		getTimeRange() {
+			let startTime
+			let endTime
+			if (this.rawTime instanceof Array) {
+				startTime = this.rawTime[0] ? moment(this.rawTime[0]).format('YYYY-MM-DDTHH:mm:ss') : '' // 强制axios使用北京时间
+				endTime = this.rawTime[1] ? moment(this.rawTime[1]).format('YYYY-MM-DDTHH:mm:ss') : ''
+			} else {
+				if (this.rawTime) {
+					startTime = moment(this.rawTime).format('YYYY-MM-DDTHH:mm:ss')
+					endTime = moment(startTime)
+						.add(1, 'd')
+						.format('YYYY-MM-DDTHH:mm:ss')
+				} else {
+					startTime = ''
+					endTime = ''
+				}
+			}
+			return { startTime, endTime }
+		},
+
+		// 获取数据列表
+		getDataList() {
+			const { startTime, endTime } = this.getTimeRange()
+			this.showGraph = false
+			// this.dataListLoading = true
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/eqAnalysis/oee'),
+				method: 'post',
+				data: {
+					startTime,
+					endTime,
+					ftId: this.dataForm.ftId,
+					productlines: this.dataForm.productlines,
+					// limit: this.pageIndex,
+					// page: this.pageSize,
+					type: 1
+				}
+			}).then(({ data: res }) => {
+				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.$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
+
+			console.clear()
+			console.log('inject data: ', injectData)
+			
+			setTimeout(() => {
+				// console.log('befoer graph: ', this.$refs.eegraph)
+				this.$refs.eegraph.init(injectData) // 注入初始数据，这些数据在组件内部用作条件，有可能会被更改
+			}, 600) // 动画是500ms
+		},
+
+		// 每页数
+		sizeChangeHandle(val) {
+			this.pageSize = val
+			this.pageIndex = 1
+			this.getDataList()
+		},
+		// 当前页
+		currentChangeHandle(val) {
+			this.pageIndex = val
+			this.getDataList()
+		},
+		// 多选
+		selectionChangeHandle(val) {
+			this.dataListSelections = val
+		},
+
+		handleOperations({ type, data }) {
+			switch (type) {
+				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>

src/views/modules/monitoring/equipmentEfficiencyGraph.vue

@@ -0,0 +1,321 @@
+<!--
+/*
+* @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">
+			<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.length === 0) {
+			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,
+				按小时: 5
+			}
+
+			return {
+				type: searchTypeMap[this.searchType],
+				eqId: this.injectData.equipmentId,
+				startTime: this.injectData.startTime, // '2022-06-14T00:00:00'
+				endTime: this.injectData.endTime
+			}
+		},
+
+		// getOEE
+		getOEE(params) {
+			return this.$http({
+				url: this.$http.adornUrl('/monitoring/eqAnalysis/oee'),
+				method: 'post',
+				data: params
+			}).then(({ data: res }) => {
+				if (!res.data || res.code === 500) {
+					this.dataList.splice(0)
+					this.$message.error(res.msg)
+					return { data: null }
+				}
+				return res.data
+			})
+		},
+
+		getList() {
+			const params = this.makeQuerys()
+			// 发起请求
+			return this.getOEE(params).then(datalist => {
+				console.log('getOEE res:', datalist)
+				this.timeList.splice(0)
+				this.rateList.splice(0)
+				this.xAxis.splice(0)
+				if (datalist.length) {
+					// 分流
+					datalist.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: ', JSON.stringify(this.config))
+			this.$nextTick(() => {
+				// this.chart.setOption(this.config)
+				this.chart.setOption(this.config, {
+          notMerge: true
+        })
+			})
+		}
+	}
+}
+</script>
+
+<style scoped>
+.graph-area {
+	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: #409eff;
+}
+
+.head-radio-group >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+	background-color: #409eff;
+	border-color: #409eff;
+}
+</style>

src/views/modules/monitoring/equipmentException.vue

@@ -0,0 +1,203 @@
+<template>
+	<!-- 设备效率分析 -->
+	<div class="mod-config">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+			<!-- 月份 -->
+			<el-form-item>
+				<el-date-picker key="month-picker" v-model="rawTime" type="month" :placeholder="'请选择月份'" format="yyyy-MM" />
+			</el-form-item>
+			<!-- 产线 -->
+			<el-form-item>
+				<el-select v-model="dataForm.productlines" :placeholder="'产线'" multiple clearable>
+					<el-option v-for="productLine in productLineList" :key="productLine.id" :value="productLine.id" :label="productLine.name" />
+				</el-select>
+			</el-form-item>
+
+			<!-- 按钮 -->
+			<el-form-item>
+				<el-button @click="getDataList()">{{ $t('search') }}</el-button>
+				<!-- <el-button v-if="$hasPermission('monitoring:equipmentEffiency:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
+			</el-form-item>
+		</el-form>
+
+		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="calcMaxHeight(8)" @operate-event="handleOperations" @refreshDataList="getDataList" />
+
+		<!-- <el-pagination
+			@size-change="sizeChangeHandle"
+			@current-change="currentChangeHandle"
+			:current-page="pageIndex"
+			:page-sizes="[10, 20, 50, 100]"
+			:page-size="pageSize"
+			:total="totalPage"
+			layout="total, sizes, prev, pager, next, jumper"
+		/> -->
+	</div>
+</template>
+
+<script>
+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 { timeFilter } from '@/utils/filters'
+import { calcMaxHeight } from '@/utils'
+import moment from 'moment'
+
+const tableConfigs = [
+	{
+		type: 'index',
+		name: i18n.t('index')
+	},
+	// { prop: 'time', name: '时间', filter: timeFilter },
+	{ prop: 'pdName', name: '产线名称' },
+	{ prop: 'wsName', name: '工序' },
+	{ prop: 'eqName', name: '设备' },
+	{ prop: 'mtbf', name: '平均故障间隔时间[MTBF] (h)', width: 220 },
+	{ prop: 'mttr', name: '平均维修时间[MTTR] (h)', width: 190 },
+	{ prop: 'workTime', name: '工作时长 (h)' },
+	{ prop: 'downTime', name: '故障时长 (h)' },
+	{ prop: 'downCount', name: '故障次数' },
+	// {
+	// 	prop: 'operations',
+	// 	name: i18n.t('handle'),
+	// 	fixed: 'right',
+	// 	width: 120,
+	// 	subcomponent: TableTextComponent,
+	// 	buttonContent: '查看详情', // 会转到“设备报警”
+	// 	emitFullData: true
+	// }
+]
+
+export default {
+	data() {
+		return {
+			/** hfxny part */
+			factoryList: [],
+			productLineList: [],
+			/** */
+			calcMaxHeight,
+			tableConfigs,
+			timeType: 'range',
+			rawTime: new Date(),
+			dataForm: {
+				type: 1,
+				productlines: [],
+				startTime: null,
+				entTime: null
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false
+		}
+	},
+	components: {
+		BaseTable
+	},
+
+	created() {
+		// this.getFactoryList()
+		this.getProductLineList()
+	},
+	watch: {},
+	methods: {
+		// 获取工厂列表
+		// getFactoryList() {
+		// 	this.$http({
+		// 		url: this.$http.adornUrl('/monitoring/factory/page'),
+		// 		method: 'get'
+		// 	}).then(({ data }) => {
+		// 		if (data && data.code === 0) {
+		// 			this.factoryList = data.data.list
+		// 			/** set default */
+		// 			if (this.factoryList.length) {
+		// 				this.dataForm.ftId = this.factoryList[0].id
+		// 			}
+		// 		} else {
+		// 			this.factoryList = []
+		// 			this.dataForm.ftId = null
+		// 		}
+		// 	})
+		// },
+		// 获取产线列表
+		getProductLineList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/productionLine/page'),
+				method: 'get'
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.productLineList = data.data.list
+					/** set default */
+					if (this.productLineList.length) {
+						this.dataForm.productlines = [this.productLineList[0].id]
+					}
+				} else {
+					this.productLineList = []
+				}
+			})
+		},
+
+		// 获取数据列表
+		getDataList() {
+			// this.dataList = Array(10).fill(1)
+			// return
+			let startTime = this.rawTime
+				? moment(this.rawTime)
+						.set({ date: 1, hour: 0, minute: 0, second: 0, millisecond: 0 })
+						.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+			let endTime = startTime
+				? moment(startTime)
+						.add(1, 'M')
+						.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+
+			this.dataListLoading = true
+
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/eqAnalysis/mtbrAndMtbr'),
+				method: 'post',
+				data: {
+					startTime,
+					endTime,
+					productlines: this.dataForm.productlines,
+					type: 1
+				}
+			}).then(({ data: res }) => {
+				if (res.code === 500) {
+					this.dataList.splice(0)
+					this.$message.error(res.msg)
+				} else {
+					this.dataList = res.data
+				}
+			})
+		},
+		// 每页数
+		sizeChangeHandle(val) {
+			this.pageSize = val
+			this.pageIndex = 1
+			this.getDataList()
+		},
+		// 当前页
+		currentChangeHandle(val) {
+			this.pageIndex = val
+			this.getDataList()
+		},
+		// 多选
+		selectionChangeHandle(val) {
+			this.dataListSelections = val
+		},
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'view-detail':
+					return this.addOrUpdateHandle(id, true)
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		}
+	}
+}
+</script>

src/views/modules/monitoring/equipmentTimesequence.vue

@@ -0,0 +1,550 @@
+<template>
+	<!-- 设备效率分析 -->
+	<div class="mod-config">
+		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+			<!-- 产线 -->
+			<el-form-item>
+				<el-select v-model="dataForm.productlines" :placeholder="'产线'" @change="handleProductLineChange" clearable>
+					<el-option v-for="productLine in productLineList" :key="productLine.id" :value="productLine.id" :label="productLine.name" />
+				</el-select>
+			</el-form-item>
+			<!-- 工序 -->
+			<el-form-item>
+				<!-- <el-select v-model="dataForm.factoryId" :placeholder="$t('eq.name') + ' / ' + $t('eq.code')" clearable></el-select> -->
+				<el-select v-model="dataForm.wsId" :placeholder="'工序'" clearable>
+					<el-option v-for="ws in wsList" :key="ws.id" :value="ws.id" :label="ws.name" />
+				</el-select>
+			</el-form-item>
+			<!-- 日期选择 -->
+			<el-form-item>
+				<el-date-picker key="date-picker" v-model="rawTime" type="date" :placeholder="'请选择日期'" format="yyyy-MM-dd" />
+			</el-form-item>
+			<!-- 按钮 -->
+			<el-form-item>
+				<el-button @click="getDataList()">{{ $t('search') }}</el-button>
+				<!-- <el-button v-if="$hasPermission('monitoring:equipmentEffiency:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> -->
+			</el-form-item>
+			<el-form-item>
+				<el-button type="success" @click="addEq()">{{ '添加设备' }}</el-button>
+			</el-form-item>
+		</el-form>
+
+		<div class="time-chart" style="margin-top: 10px;">
+			<div
+				v-show="equipmentCount > 0"
+				id="time-chart__inner"
+				ref="time-chart__inner"
+				class="time-chart__inner"
+				style="min-height: 50vh;"
+				:style="{ height: autoHeight + 'px', width: '100%' }"
+			/>
+			<div v-show="equipmentCount === 0">请先查询数据</div>
+			<!-- <div v-show="equipmentCount === 0">{{ $t('module.basicData.visual.hints.searchFirst') }}</div> -->
+		</div>
+
+		<el-dialog :visible.sync="dialogVisible" :title="'添加设备'" width="30%">
+			<el-select v-model="eqId" style="width: 100%" placeholder="请选择设备" clearable>
+				<el-option v-for="eq in dialogEqList" :key="eq.id" :label="eq.name" :value="eq.id" />
+			</el-select>
+			<div slot="footer">
+				<el-button @click="dialogVisible = false">{{ '取消' }}</el-button>
+				<el-button type="primary" @click="dialogConfirm">{{ '确定' }}</el-button>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+// import i18n from '@/i18n'
+import BaseTable from '@/components/base-table'
+import { calcMaxHeight } from '@/utils'
+import moment from 'moment'
+// import TableOperateComponent from '@/components/base-table/components/operationComponent'
+// import TableTextComponent from '@/components/base-table/components/detailComponent'
+// import { timeFilter } from '@/utils/filters'
+
+function renderItem(params, api) {
+	var categoryIndex = api.value(0)
+	var start = api.coord([api.value(1), categoryIndex])
+	var end = api.coord([api.value(2), categoryIndex])
+	var height = 32
+
+	return {
+		type: 'rect',
+		shape: echarts.graphic.clipRectByRect(
+			{
+				x: start[0],
+				y: start[1] - height / 2,
+				width: end[0] - start[0],
+				height: height
+			},
+			{
+				x: params.coordSys.x,
+				y: params.coordSys.y,
+				width: params.coordSys.width,
+				height: params.coordSys.height
+			}
+		),
+		style: api.style()
+	}
+}
+
+class ChartOption {
+	constructor() {
+		this.color = ['#4caf50', '#ffb300', '#e53935']
+		this.legend = {
+			data: [
+				// i18n.t('module.basicData.visual.echartLegends.working'),
+				'正常',
+				'停机',
+				'故障'
+			],
+			bottom: '0%',
+			selectedMode: false,
+			textStyle: {
+				color: '#000'
+			}
+		}
+		this.tooltip = {
+			formatter: function(params) {
+				return moment(params.value[1]).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment(params.value[2]).format('YYYY-MM-DD HH:mm:ss') + ' : ' + params.name
+			}
+		}
+		this.title = {
+			// text: i18n.t('module.basicData.visual.echartTitles.eqStatus'),
+			text: '设备状态时序图',
+			left: 'center'
+		}
+		this.xAxis = {
+			type: 'time',
+			// min: +new Date().setHours(0, 0, 0, 0),
+			splitNumber: 24,
+			interval: 3600 * 1000,
+			axisTick: {
+				show: true,
+				alignWithLabel: true
+			},
+			splitLine: {
+				show: true
+			},
+			axisLine: {
+				show: true
+			},
+			axisLabel: {
+				formatter: function(val) {
+					const time = new Date(val)
+					const hour = time.getHours()
+					const minute = time.getMinutes()
+					const hours = hour >= 10 ? hour + '' : '0' + hour
+					const minutes = minute >= 10 ? minute + '' : '0' + minute
+					return hours + ':' + minutes
+				}
+			}
+		}
+		this.yAxis = {
+			// data: Object.keys(eqData).map(item => eqData[item].name)
+			data: []
+		}
+		this.series = [
+			{ name: /** i18n.t('module.basicData.visual.echartLegends.working') */ '正常', type: 'bar', data: [] },
+			{ name: '停机', type: 'bar', data: [] },
+			{ name: '故障', type: 'bar', data: [] },
+			{
+				type: 'custom',
+				renderItem: renderItem,
+				itemStyle: {
+					opacity: 0.8
+				},
+				encode: {
+					x: [1, 2],
+					y: 0
+				},
+				data: []
+			}
+		]
+	}
+
+	setTitle(title) {
+		this.title.text = title
+	}
+
+	// date: 服务器返回来的日期时间数据
+	setXAxis(date) {
+		// this.xAxis.min = +new Date(date).setHours(0)
+		this.xAxis.min = +new Date(date).setHours(0, 0, 0, 0)
+		this.xAxis.max = this.xAxis.min + 3600 * 1000 * 24
+	}
+
+	setYAxis(data) {
+		this.yAxis.data = data
+	}
+
+	setData(data) {
+		this.series[3].data = data
+	}
+}
+
+export default {
+	data() {
+		return {
+			/** hfxny part */
+			wsList: [],
+			productLineList: [],
+			chart: null,
+			chartOption: new ChartOption(),
+			equipments: {},
+			state: ['正常', '停机', '故障'],
+			colors: ['#4caf50', '#ffb300', '#e53935'],
+			// queryBuffer: {},
+			// tableConfigs,
+			calcMaxHeight,
+			timeType: 'range',
+			currentLine: null,
+			rawTime: new Date(),
+			dataForm: {
+				wsId: null,
+				productlines: null,
+				startTime: null,
+				entTime: null
+			},
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			dataListLoading: false,
+			/** dialog */
+			dialogVisible: false,
+			eqId: null,
+			dialogEqList: []
+		}
+	},
+	components: {
+		BaseTable
+	},
+	computed: {
+		autoHeight: function() {
+			return Object.keys(this.equipments).length * 100 || 500
+		},
+		equipmentCount: function() {
+			return Object.keys(this.equipments).length
+		}
+	},
+	created() {
+		this.getProductLineList().then(() => {
+			this.getWorksetionList()
+		})
+		this.getEqList()
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.initChart()
+		})
+	},
+	updated() {
+		if (this.chart) this.chart.resize()
+	},
+	watch: {
+		timeType() {
+			// 防止切换日期类型时报错
+			this.rawTime = null
+		}
+	},
+	methods: {
+		initChart() {
+			if (!this.chart) {
+				this.chart = echarts.init(this.$refs['time-chart__inner'])
+			}
+		},
+		// 获取产线列表
+		getProductLineList() {
+			return this.$http({
+				url: this.$http.adornUrl('/monitoring/productionLine/page'),
+				method: 'get'
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.productLineList = data.data.list
+					/** set default */
+					if (this.productLineList.length) {
+						this.dataForm.productlines = this.productLineList[0].id
+					}
+				} else {
+					this.productLineList = []
+				}
+			})
+		},
+
+		// 获取工序列表
+		getWorksetionList() {
+			// 分页列表才有根据产线过滤功能
+			this.$http({
+				// url: this.$http.adornUrl('/monitoring/workshopSection/list'),
+				url: this.$http.adornUrl('/monitoring/workshopSection/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					limit: 99999,
+					page: 1,
+					lineId: this.dataForm.productlines ?? ''
+				})
+			}).then(({ data: res }) => {
+				if (res && res.code === 0) {
+					this.wsList = res.data.list
+					/** set default */
+					if (this.wsList.length) {
+						this.dataForm.wsId = this.wsList[0].id
+					} else {
+						this.dataForm.wsId = null
+					}
+				} else {
+					this.wsList.splice(0)
+				}
+			})
+		},
+
+		// 把服务器数据按照设备分组
+		transformDataToEquipments(dataList) {
+			console.log('transformDataToEquipments() datalist: ', dataList)
+			const equipments = {}
+			dataList.map(item => {
+				if (equipments[item.eqId]) {
+					// 如果设备已存在
+					// equipments[item.eqId].name = item.eqName
+					equipments[item.eqId].status.push({
+						startTime: +new Date(item.startTime),
+						endTime: +new Date(item.endTime),
+						status: this.state[item.status] // 0 正常、1 停机、2 故障
+					})
+				} else {
+					equipments[item.eqId] = {
+						name: item.eqName,
+						status: [
+							{
+								startTime: +new Date(item.startTime),
+								endTime: +new Date(item.endTime),
+								status: this.state[item.status] // 0 正常、1 停机、2 故障
+							}
+						]
+					}
+				}
+			})
+			console.log('created equipments --- ', equipments)
+			return equipments
+		},
+
+		// 把分组好的设备数据转换为echarts需要的series数据
+		transformEquipmentsToSeries(equipments) {
+			const seriesData = []
+			Object.entries(equipments).map(([key, item], index) => {
+				item.status.forEach(status => {
+					seriesData.push({
+						name: status.status,
+						value: [index, status.startTime, status.endTime],
+						itemStyle: {
+							normal: {
+								color: status.status === '正常' ? '#4caf50' : status.status === '停机' ? '#ffb300' : status.status === '故障' ? '#e53935' : null
+							}
+						}
+					})
+				})
+			})
+			return seriesData
+		},
+
+		// 获取数据列表
+		getDataList() {
+			let startTime = this.rawTime
+				? moment(this.rawTime)
+						.set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
+						.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+			let endTime = startTime
+				? moment(startTime)
+						.add(1, 'd')
+						.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+
+			// this.dataListLoading = true
+			const condition = {
+				startTime,
+				endTime,
+				productlines: [this.dataForm.productlines],
+				wsId: this.dataForm.wsId
+			}
+
+			/** fetch data */
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'),
+				method: 'post',
+				data: condition
+			}).then(({ data: res }) => {
+				if (res.code === 500) {
+					this.dataList.splice(0)
+					this.equipments = {} // 关闭 echarts 的显示
+					this.$message.error(res.msg)
+				} else {
+					/** handle actual data */
+					this.dataList = res.data
+
+					/** test data */
+					// this.dataList = [
+					// 	{
+					// 		eqId: 'eq-001',
+					// 		eqName: 'A1预热机',
+					// 		startTime: '2022-05-04T00:30:34',
+					// 		endTime: '2022-05-04T08:30:34',
+					// 		status: 0
+					// 	},
+					// 	{
+					// 		eqId: 'eq-001',
+					// 		eqName: 'A1预热机',
+					// 		startTime: '2022-05-04T08:30:34',
+					// 		endTime: '2022-05-04T09:30:34',
+					// 		status: 1
+					// 	},
+					// 	{
+					// 		eqId: 'eq-001',
+					// 		eqName: 'A1预热机',
+					// 		startTime: '2022-05-04T09:30:34',
+					// 		endTime: '2022-05-04T11:30:34',
+					// 		status: 2
+					// 	},
+					// 	{
+					// 		eqId: 'eq-001',
+					// 		eqName: 'A1预热机',
+					// 		startTime: '2022-05-04T11:30:34',
+					// 		endTime: '2022-05-04T13:30:34',
+					// 		status: 1
+					// 	}
+					// ]
+
+					this.equipments = this.transformDataToEquipments(this.dataList)
+					this.chartOption.setYAxis(Object.keys(this.equipments).map(eId => this.equipments[eId].name))
+					console.log('(((set x axis))): ', this.dataList[0].startTime)
+					this.chartOption.setXAxis(this.dataList[0].startTime)
+					this.chartOption.setData(this.transformEquipmentsToSeries(this.equipments))
+
+					this.$nextTick(() => {
+						this.renderChart()
+					})
+				}
+			})
+		},
+
+		handleProductLineChange(val) {
+			this.getWorksetionList()
+		},
+
+		// 渲染 echarts
+		renderChart() {
+			console.log('>>> chart configs: ', this.chartOption)
+			this.chart.setOption(this.chartOption)
+		},
+
+		// 获取对话框里的设备列表
+		getEqList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipment/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					page: 1,
+					limit: 99999
+				})
+			}).then(({ data }) => {
+				if (data && data.code === 0) {
+					this.dialogEqList = data.data.list
+				} else {
+					this.dialogEqList.splice(0)
+				}
+			})
+		},
+
+		// 添加设备
+		addEq() {
+			if (this.equipmentCount) {
+				this.dialogVisible = true
+			} else {
+				this.$message.warning('请先查询数据')
+			}
+		},
+
+		// 确认添加设备
+		dialogConfirm() {
+			let startTime = this.rawTime
+				? moment(this.rawTime)
+						.set({ hour: 0, minute: 0, second: 0, millisecond: 0 })
+						.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+			let endTime = startTime
+				? moment(startTime)
+						.add(1, 'd')
+						.format('YYYY-MM-DDTHH:mm:ss')
+				: ''
+
+			const condition = {
+				startTime,
+				endTime,
+				productlines: [this.dataForm.productlines],
+				wsId: this.dataForm.wsId,
+				eqId: this.eqId
+			}
+
+			/** fetch data */
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/eqAnalysis/timeAndStatus'),
+				method: 'post',
+				data: condition
+			}).then(({ data: res }) => {
+				if (res.code === 500) {
+					this.$message.error(res.msg)
+				} else {
+					/** handle new equipment */
+					const newEqStatusList = res.data
+					console.log('添加设备', res)
+					const newEq = this.transformDataToEquipments(newEqStatusList)
+					this.$set(this.equipments, Object.keys(newEq)[0], newEq[Object.keys(newEq)[0]])
+					this.chartOption.setYAxis(Object.keys(this.equipments).map(item => this.equipments[item].name))
+					this.chartOption.setData(this.transformEquipmentsToSeries(this.equipments))
+
+					this.$message.success('新设备数据获取成功')
+					this.$nextTick(() => {
+						this.dialogVisible = false
+						this.renderChart()
+					})
+				}
+			})
+		},
+
+		// 每页数
+		sizeChangeHandle(val) {
+			this.pageSize = val
+			this.pageIndex = 1
+			this.getDataList()
+		},
+		// 当前页
+		currentChangeHandle(val) {
+			this.pageIndex = val
+			this.getDataList()
+		},
+		// 多选
+		selectionChangeHandle(val) {
+			this.dataListSelections = val
+		},
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'view-detail':
+					return this.addOrUpdateHandle(id, true)
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		}
+	}
+}
+</script>
+
+<style scoped>
+/* .time-chart__inner {
+	transition: all 300ms ease-out;
+} */
+</style>