lb #3

Merged
gtz217 merged 15 commits from lb into develop 2022-09-23 15:16:53 +08:00
12 changed files with 1449 additions and 3 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/img/logo@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/assets/img/logo@4x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

View File

@ -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...
}
}

View File

@ -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'

View File

@ -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['工厂'] = '工厂'

View File

@ -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
})

View File

@ -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, 1234
// :
workTime: data.workTime,
stopTime: data.stopTime,
downTime: data.downTime,
// : OEETEEP
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>

View File

@ -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>

View File

@ -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>

View File

@ -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
},
// echartsseries
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>