设备稼动率

This commit is contained in:
dengyan 2022-03-03 16:51:09 +08:00
parent 68193ecfb3
commit d9559db959
21 changed files with 2717 additions and 5 deletions

View File

@ -97,7 +97,7 @@
"@vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "^9.5.1",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-eslint": "8.2.2",
"babel-jest": "23.6.0",
"chalk": "2.4.2",
"chokidar": "2.1.5",

View File

@ -280,6 +280,10 @@ export default {
equipment: {
zh: '设备管理',
en: 'Equipment Manager',
EquipmentUtilizationRate: {
zh: '设备稼动率',
en: 'EQ OEE'
},
EquipmentVisualization: {
zh: '设备可视化',
en: 'Equipment Visualization',

View File

@ -1,7 +1,7 @@
/*
* @Date: 2021-03-05 10:04:30
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-23 09:13:56
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:31:23
* @FilePath: \basic-admin\src\lang\i18n\en\module\equipmentManager.js
* @Description:
*/
@ -19,6 +19,68 @@ export default {
Water: 'Water',
Gas: 'Gas'
},
monitoringInfo: {
allCycles: 'Total cycle Times',
badTimes: 'Failure Times',
time: 'Time',
MCBF: 'MCBF',
previousStatus: 'State Before',
runTime: 'UpTime (hours)',
produceTime: 'Production time (hours)',
productiveCount: 'Actual Capacity',
timeRate: 'Time Start Rate',
performanceRate: 'Performance Start Rate',
oee: 'OEE',
E10StartTime: 'E10 StartTime',
E10endTime: 'E10 EndTime',
laterE10Status: 'Changed E10 State',
duration: 'Duration',
goodsNumbers: 'OK Quantity',
noOkNumbers: 'NOK Quantity',
onceOkCount: 'OK Quantity Of Fist Process ',
reworkOkCount: 'OK Quantity Of Rework ',
GetTimePeriod: 'Time Period',
ProductionTimePeriod: 'Production Time Period',
MaintenanceTimes: 'Maintenance Times',
RunningTime: 'Running Time',
E10status: 'E10 State',
number: 'Quantity Produced Of Current day',
yieId: 'Daily yield',
bom: 'Daily Consumption Of Materials,',
controlState: 'Control State',
equipmentName: 'EQ Name',
e10Code: 'E10 State',
materialName: 'MaterialName',
port: 'Loading Port',
productCount: 'Product Quantity',
spec: 'Spec',
materialNo: 'MaterialNo',
upTime: 'Loading Time',
upCount: 'Loading Amount',
useCount: 'Used Amount',
unit: 'Unit',
eventName: 'EventName',
paramName: 'ParamName',
paramValue: 'ParamValue',
standardFormat: 'StandardFormat',
paramFormat: 'ParamFormat',
receiveTime: 'ReceivedTime',
recipe: 'EQ Recipe',
controlStatus: 'Control State',
traceDataState: 'Trace Data OpenState',
controlStateUpdateTime: 'Control State UpdateTime',
e10UpdateTime: 'E10 Update Time',
StateFlg: 'StateFlag',
EnableSpooling: 'EnableSpooling',
maxspooltransmit: 'MaxSpoolTransmit',
spoolingstate: 'SpoolingState',
spoolingcountactual: 'SpoolingCountActual',
SpoolingCountTotal: 'SpoolingCountTotal',
F1F3Succ: 'F1F3 Request Success',
F2F13Succ: 'F2F13 Request Success',
baseChart: 'Processed Substrates Quantity',
monitorChart: 'EQ Running Time'
},
sparepart: {
'sparepart': 'Sparepart',
'code': 'Sparepart number',

View File

@ -1,7 +1,7 @@
/*
* @Date: 2021-03-05 10:04:37
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-23 09:13:20
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:31:16
* @FilePath: \basic-admin\src\lang\i18n\zh\module\equipmentManager.js
* @Description:
*/
@ -19,6 +19,68 @@ export default {
'Water': '水',
'Gas': '气'
},
monitoringInfo: {
allCycles: '总循环次数',
badTimes: '故障次数',
time: '时间',
MCBF: 'MCBF',
previousStatus: '转换前状态',
runTime: '开机时长(时)',
produceTime: '生产时长(时)',
productiveCount: '实际产能',
timeRate: '时间开动率',
performanceRate: '性能开动率',
oee: '综合效率OEE',
E10StartTime: 'E10开始时间',
E10endTime: 'E10结束时间',
laterE10Status: '变化后E10状态',
duration: '持续时间',
goodsNumbers: '良品数量',
noOkNumbers: '不良品数量',
onceOkCount: '一次加工良品数量',
reworkOkCount: '重工良品数量',
GetTimePeriod: '获取时间段',
ProductionTimePeriod: '生产时间段',
MaintenanceTimes: '维护次数',
RunningTime: '运行时长',
E10status: 'E10状态',
number: '当日生产的数量',
yieId: '当日良率',
bom: '当日消耗物料',
controlState: '控制状态',
equipmentName: '设备名称',
e10Code: 'E10状态名称',
port: '上料位置',
recipe: '设备配方',
materialName: '物料名称',
productCount: '加工数量',
spec: '物料规格',
materialNo: '物料批次号',
upTime: '上料时间',
upCount: '上料数量',
useCount: '使用数量',
unit: '单位',
eventName: '事件名称',
paramName: '参数名称',
receiveTime: '获取参数时间',
paramValue: '获取参数值',
standardFormat: '标准参数模式',
paramFormat: '获取参数格式',
controlStatus: '设备控制状态',
traceDataState: 'Trace Data 开启状态',
controlStateUpdateTime: '控制状态更新时间',
e10UpdateTime: 'E10更新时间',
StateFlg: 'StateFlg',
EnableSpooling: 'EnableSpooling',
maxspooltransmit: 'maxspooltransmit',
spoolingstate: 'spoolingstate',
spoolingcountactual: 'spoolingcountactual',
SpoolingCountTotal: 'SpoolingCountTotal',
F1F3Succ: 'F1F3请求成功',
F2F13Succ: 'F2F13请求成功',
baseChart: '设备加工基板数量',
monitorChart: '设备运行时长'
},
sparepart: {
'sparepart': '备品备件',
'code': '备件编号',

View File

@ -432,6 +432,45 @@ export const constantRoutes = [
meta: { title: routerTitle.form.reportSort?.[language] || routerTitle.form.reportSort.en, icon: 'form', affix: true, required: true, requireToken: true }
}]
},
{
path: '/equipment',
component: Layout,
redirect: '/equipment',
name: 'equipmentManage',
meta: { title: routerTitle.equipment?.[language] || routerTitle.equipment.en, icon: 'form', iconPart: 'equipmentManage', affix: true, required: true, requireToken: true, unuse: false },
children: [{
path: 'equipmentUtilizationRate',
component: () => import('@/views/basicData/index'),
name: 'EquipmentUtilizationRate',
meta: { title: routerTitle.equipment.EquipmentUtilizationRate?.[language] || routerTitle.equipment.EquipmentUtilizationRate.en, icon: 'form', affix: true, required: true, requireToken: true },
children: [
{
path: 'e10',
component: () => import('@/views/EquipmentManager/equipmentUtilizationRate/E10'),
name: 'E10',
meta: { title: 'E10' }
},
{
path: 'oee',
component: () => import('@/views/EquipmentManager/equipmentUtilizationRate/OEE'),
name: 'OEE',
meta: { title: 'OEE' }
},
{
path: 'mttr',
component: () => import('@/views/EquipmentManager/equipmentUtilizationRate/MTTR'),
name: 'MTTR',
meta: { title: 'MTTR' }
},
{
path: 'mcbf',
component: () => import('@/views/EquipmentManager/equipmentUtilizationRate/MCBF'),
name: 'MCBF',
meta: { title: 'MCBF' }
}
]
}]
},
{
path: '/basic',
component: Layout,

View File

@ -0,0 +1,152 @@
<!--
* @Author: DY
* @Date: 2021-12-16 15:41:11
* @LastEditors: DY
* @LastEditTime: 2022-03-03 15:26:05
* @Description: E10
-->
<template>
<div class="app-container">
<el-form
:model="formData"
:inline="true"
size="medium"
label-width="80px"
>
<el-form-item>
<el-button type="primary" @click="toE10()">E10</el-button>
</el-form-item>
<el-form-item>
<el-button @click="toOEE()">OEE</el-button>
</el-form-item>
<el-form-item>
<el-button @click="toMTTR()">MTTR</el-button>
</el-form-item>
<el-form-item>
<el-button @click="toMCBF()">MCBF</el-button>
</el-form-item>
<!-- <el-form-item :label="$t('module.equipmentManager.recipe.equipmentId')" prop="equipmentName">
<el-select v-model="formData.equipmentName" :placeholder="$t('module.equipmentManager.recipe.EQselect')" filterable clearable>
<el-option
v-for="(item, index) in eqList"
:key="index"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item> -->
<el-form-item :label="$t('module.equipmentManager.equipmentVisualization.timeSlot')" label-width="100px" prop="time">
<el-date-picker
v-model="formData.timeSlot"
type="datetimerange"
:start-placeholder="$t('module.orderManage.order.StartTime')"
:end-placeholder="$t('module.orderManage.order.StartTime')"
:range-separator="$t('module.orderManage.order.To')"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
</el-form-item>
<!-- <el-form-item>
<el-button type="primary" @click="getList()"> {{ 'btn.exportBtn' | i18nFilter }} </el-button>
</el-form-item> -->
</el-form>
<e10Chart v-if="e10Visible" ref="e10Chart" :time1="startTime" :time2="endTime" :name="formData.equipmentName" @equipmentName="seeDetail" />
<e10-detail-chart v-if="e10Detail" ref="e10DetailChart" :time1="startTime" :time2="endTime" :equipment-name="equipmentName" />
</div>
</template>
<script>
import e10Chart from './components/e10-chart'
import e10DetailChart from './components/e10Detail-chart'
// import { equipmentList } from '@/api/basicData/Equipment/equipmentInfo'
export default {
name: 'E10',
components: { e10Chart, e10DetailChart },
data() {
return {
list: [],
startTime: '',
endTime: '',
formData: {
timeSlot: [],
equipmentName: undefined,
current: 1,
size: 10
},
e10Visible: false,
e10Detail: false,
equipmentName: '',
eqList: []
}
},
created() {
// this.getEqList()
this.getList()
},
methods: {
async getEqList() {
const res = await equipmentList({
current: 1,
size: 999
})
if (res.code === 0) {
this.eqList = res.data
}
},
toE10() {
this.$router.push({
name: 'E10'
})
},
toOEE() {
this.$router.push({
name: 'OEE'
})
},
toMTTR() {
this.$router.push({
name: 'MTTR'
})
},
toMCBF() {
this.$router.push({
name: 'MCBF'
})
},
seeDetail(name) {
this.equipmentName = name
this.e10Visible = false
this.e10Detail = true
setTimeout(() => {
this.$refs.e10DetailChart.getList()
}, 60)
},
getList() {
if (this.formData.timeSlot.length !== 0) {
this.startTime = this.formData.timeSlot[0]
this.endTime = this.formData.timeSlot[1]
this.$nextTick(() => {
this.e10Visible = true
setTimeout(() => {
this.$refs.e10Chart.getList()
}, 60)
})
}
}
}
}
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>

View File

@ -0,0 +1,151 @@
<!--
* @Author: DY
* @Date: 2021-12-16 15:41:11
* @LastEditors: DY
* @LastEditTime: 2022-03-03 15:26:28
* @Description: MCBF
-->
<template>
<div class="app-container">
<el-form
:model="formData"
:inline="true"
size="medium"
label-width="80px"
>
<el-form-item>
<el-button @click="toE10()">E10</el-button>
</el-form-item>
<el-form-item>
<el-button @click="toOEE()">OEE</el-button>
</el-form-item>
<el-form-item>
<el-button @click="toMTTR()">MTTR</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="toMCBF()">MCBF</el-button>
</el-form-item>
<!-- <el-form-item :label="$t('module.equipmentManager.recipe.equipmentId')" prop="equipmentName">
<el-select v-model="formData.equipmentName" :placeholder="$t('module.equipmentManager.recipe.EQselect')" filterable clearable>
<el-option
v-for="(item, index) in eqList"
:key="index"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item> -->
<el-form-item :label="$t('module.equipmentManager.equipmentVisualization.timeSlot')" label-width="100px" prop="time">
<el-date-picker
v-model="formData.timeSlot"
type="datetimerange"
:start-placeholder="$t('module.orderManage.order.StartTime')"
:end-placeholder="$t('module.orderManage.order.StartTime')"
:range-separator="$t('module.orderManage.order.To')"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
</el-form-item>
<!-- <el-form-item>
<el-button type="primary" @click="getList()"> {{ 'btn.exportBtn' | i18nFilter }} </el-button>
</el-form-item> -->
</el-form>
<mcbfChart v-if="mcbfVisible" ref="mcbfChart" :time1="startTime" :time2="endTime" @equipmentName="seeDetail" />
<mcbf-detail-chart v-if="mcbfDetail" ref="mcbfDetailChart" :time1="startTime" :time2="endTime" :equipment-name="equipmentName" />
</div>
</template>
<script>
import mcbfChart from './components/mcbf-chart'
import mcbfDetailChart from './components/mcbfDetail-chart'
// import { equipmentList } from '@/api/basicData/Equipment/equipmentInfo'
export default {
name: 'MCBF',
components: { mcbfChart, mcbfDetailChart },
data() {
return {
list: [],
startTime: '',
endTime: '',
formData: {
timeSlot: [],
current: 1,
size: 10
},
mcbfVisible: false,
mcbfDetail: false,
equipmentName: '',
eqList: []
}
},
created() {
// this.getEqList()
this.getList()
},
methods: {
async getEqList() {
const res = await equipmentList({
current: 1,
size: 999
})
if (res.code === 0) {
this.eqList = res.data
}
},
toE10() {
this.$router.push({
name: 'E10'
})
},
toOEE() {
this.$router.push({
name: 'OEE'
})
},
toMTTR() {
this.$router.push({
name: 'MTTR'
})
},
toMCBF() {
this.$router.push({
name: 'MCBF'
})
},
seeDetail(name) {
this.equipmentName = name
this.mcbfVisible = false
this.mcbfDetail = true
setTimeout(() => {
this.$refs.mcbfDetailChart.getList()
}, 60)
},
getList() {
if (this.formData.timeSlot.length !== 0) {
this.startTime = this.formData.timeSlot[0]
this.endTime = this.formData.timeSlot[1]
this.$nextTick(() => {
this.mcbfVisible = true
setTimeout(() => {
this.$refs.mcbfChart.getList()
}, 60)
})
}
}
}
}
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>

View File

@ -0,0 +1,151 @@
<!--
* @Author: DY
* @Date: 2021-12-16 15:41:11
* @LastEditors: DY
* @LastEditTime: 2022-03-03 15:26:44
* @Description: MTTR
-->
<template>
<div class="app-container">
<el-form
:model="formData"
:inline="true"
size="medium"
label-width="80px"
>
<el-form-item>
<el-button @click="toE10()">E10</el-button>
</el-form-item>
<el-form-item>
<el-button @click="toOEE()">OEE</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="toMTTR()">MTTR</el-button>
</el-form-item>
<el-form-item>
<el-button @click="toMCBF()">MCBF</el-button>
</el-form-item>
<!-- <el-form-item :label="$t('module.equipmentManager.recipe.equipmentId')" prop="equipmentName">
<el-select v-model="formData.equipmentName" :placeholder="$t('module.equipmentManager.recipe.EQselect')" filterable clearable>
<el-option
v-for="(item, index) in eqList"
:key="index"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item> -->
<el-form-item :label="$t('module.equipmentManager.equipmentVisualization.timeSlot')" label-width="100px" prop="time">
<el-date-picker
v-model="formData.timeSlot"
type="datetimerange"
:start-placeholder="$t('module.orderManage.order.StartTime')"
:end-placeholder="$t('module.orderManage.order.StartTime')"
:range-separator="$t('module.orderManage.order.To')"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
</el-form-item>
<!-- <el-form-item>
<el-button type="primary" @click="getList()"> {{ 'btn.exportBtn' | i18nFilter }} </el-button>
</el-form-item> -->
</el-form>
<mttrChart v-if="mttrVisible" ref="mttrChart" :time1="startTime" :time2="endTime" @equipmentName="seeDetail" />
<mttr-detail-chart v-if="mttrDetail" ref="mttrDetailChart" :time1="startTime" :time2="endTime" :equipment-name="equipmentName" />
</div>
</template>
<script>
import mttrChart from './components/mttr-chart'
import mttrDetailChart from './components/mttrDetail-chart'
// import { equipmentList } from '@/api/basicData/Equipment/equipmentInfo'
export default {
name: 'MTTR',
components: { mttrChart, mttrDetailChart },
data() {
return {
list: [],
startTime: '',
endTime: '',
formData: {
timeSlot: [],
current: 1,
size: 10
},
mttrVisible: false,
mttrDetail: false,
equipmentName: '',
eqList: []
}
},
created() {
// this.getEqList()
this.getList()
},
methods: {
async getEqList() {
const res = await equipmentList({
current: 1,
size: 999
})
if (res.code === 0) {
this.eqList = res.data
}
},
toE10() {
this.$router.push({
name: 'E10'
})
},
toOEE() {
this.$router.push({
name: 'OEE'
})
},
toMTTR() {
this.$router.push({
name: 'MTTR'
})
},
toMCBF() {
this.$router.push({
name: 'MCBF'
})
},
seeDetail(name) {
this.equipmentName = name
this.mttrVisible = false
this.mttrDetail = true
setTimeout(() => {
this.$refs.mttrDetailChart.getList()
}, 60)
},
getList() {
if (this.formData.timeSlot.length !== 0) {
this.startTime = this.formData.timeSlot[0]
this.endTime = this.formData.timeSlot[1]
this.$nextTick(() => {
this.mttrVisible = true
setTimeout(() => {
this.$refs.mttrChart.getList()
}, 60)
})
}
}
}
}
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>

View File

@ -0,0 +1,151 @@
<!--
* @Author: DY
* @Date: 2021-12-16 15:41:11
* @LastEditors: DY
* @LastEditTime: 2022-03-03 15:26:56
* @Description: OEE
-->
<template>
<div class="app-container">
<el-form
:model="formData"
:inline="true"
size="medium"
label-width="80px"
>
<el-form-item>
<el-button @click="toE10()">E10</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="toOEE()">OEE</el-button>
</el-form-item>
<el-form-item>
<el-button @click="toMTTR()">MTTR</el-button>
</el-form-item>
<el-form-item>
<el-button @click="toMCBF()">MCBF</el-button>
</el-form-item>
<!-- <el-form-item :label="$t('module.equipmentManager.recipe.equipmentId')" prop="equipmentName">
<el-select v-model="formData.equipmentName" :placeholder="$t('module.equipmentManager.recipe.EQselect')" filterable clearable>
<el-option
v-for="(item, index) in eqList"
:key="index"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item> -->
<el-form-item :label="$t('module.equipmentManager.equipmentVisualization.timeSlot')" label-width="100px" prop="time">
<el-date-picker
v-model="formData.timeSlot"
type="datetimerange"
:start-placeholder="$t('module.orderManage.order.StartTime')"
:end-placeholder="$t('module.orderManage.order.StartTime')"
:range-separator="$t('module.orderManage.order.To')"
clearable
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
</el-form-item>
<!-- <el-form-item>
<el-button type="primary" @click="getList()"> {{ 'btn.exportBtn' | i18nFilter }} </el-button>
</el-form-item> -->
</el-form>
<oeeChart v-if="oeeVisible" ref="oeeChart" :time1="startTime" :time2="endTime" @equipmentName="seeDetail" />
<oee-detail-chart v-if="oeeDetail" ref="oeeDetailChart" :time1="startTime" :time2="endTime" :equipment-name="equipmentName" />
</div>
</template>
<script>
import oeeChart from './components/oee-chart'
import oeeDetailChart from './components/oeeDetail-chart'
// import { equipmentList } from '@/api/basicData/Equipment/equipmentInfo'
export default {
name: 'OEE',
components: { oeeChart, oeeDetailChart },
data() {
return {
list: [],
startTime: '',
endTime: '',
formData: {
timeSlot: [],
current: 1,
size: 10
},
oeeVisible: false,
oeeDetail: false,
equipmentName: '',
eqList: []
}
},
created() {
// this.getEqList()
this.getList()
},
methods: {
async getEqList() {
const res = await equipmentList({
current: 1,
size: 999
})
if (res.code === 0) {
this.eqList = res.data
}
},
toE10() {
this.$router.push({
name: 'E10'
})
},
toOEE() {
this.$router.push({
name: 'OEE'
})
},
toMTTR() {
this.$router.push({
name: 'MTTR'
})
},
toMCBF() {
this.$router.push({
name: 'MCBF'
})
},
seeDetail(name) {
this.equipmentName = name
this.oeeVisible = false
this.oeeDetail = true
setTimeout(() => {
this.$refs.oeeDetailChart.getList()
}, 60)
},
getList() {
if (this.formData.timeSlot.length !== 0) {
this.startTime = this.formData.timeSlot[0]
this.endTime = this.formData.timeSlot[1]
this.$nextTick(() => {
this.oeeVisible = true
setTimeout(() => {
this.$refs.oeeChart.getList()
}, 60)
})
}
}
}
}
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>

View File

@ -0,0 +1,134 @@
<!--
* @Author: zwq
* @Date: 2020-12-29 15:41:11
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:22:24
* @Description: E10详情表格
-->
<template>
<div>
<base-table
:page="listQuery.current"
:limit="listQuery.size"
:table-config="tableProps"
:table-data="list"
:is-loading="listLoading"
/>
<pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="init" />
</div>
</template>
<script>
import i18n from '@/lang'
import BaseTable from '@/components/BaseTable'
import Pagination from '@/components/Pagination'
import { timeFormatter } from '@/filters'
// import { getE10StackDetail } from '@/api/equipment/infoPandect'
/**
* 表格表头配置项 TypeScript接口注释
* tableConfig<ConfigItem> = []
*
* Interface ConfigItem = {
* prop: string,
* label: string,
* width: string,
* align: string,
* subcomponent: function,
* filter: function
* }
*
*
*/
const tableProps = [
{
prop: 'equipmentName',
label: i18n.t('module.equipmentManager.maintainplan.equipmentId'),
align: 'center'
}, {
prop: 'status',
label: i18n.t('module.equipmentManager.monitoringInfo.E10status'),
align: 'center'
}, {
prop: 'previousStatus',
label: i18n.t('module.equipmentManager.monitoringInfo.laterE10Status'),
align: 'center'
}, {
prop: 'endTime',
label: i18n.t('module.equipmentManager.monitoringInfo.E10endTime'),
filter: timeFormatter,
align: 'center'
}, {
prop: 'durationTime',
label: i18n.t('module.equipmentManager.monitoringInfo.duration'),
align: 'center'
}
]
export default {
name: '',
components: { BaseTable, Pagination },
props: {
time1: {
type: Date,
default: () => {
return ''
}
},
time2: {
type: Date,
default: () => {
return ''
}
},
equipmentName: {
type: String,
default: () => {
return ''
}
}
},
data() {
return {
total: 0,
tableProps,
list: [],
listLoading: false,
listQuery: {
current: 1,
size: 10
}
}
},
mounted() {
// this.init()
},
methods: {
init() {
this.listQuery.startTime = this.time1
this.listQuery.endTime = this.time2
this.listQuery.equipmentName = this.equipmentName
getE10StackDetail(this.listQuery).then(res => {
if (res.data !== []) {
this.list = res.data.detail.records
this.total = res.data.detail.total
this.list.forEach(item => {
item.equipmentName = this.equipmentName
})
}
})
}
}
}
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>

View File

@ -0,0 +1,94 @@
<!--
* @Author: zwq
* @Date: 2020-12-29 15:41:11
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:47:23
* @Description: MCBF详情表格
-->
<template>
<div>
<base-table
:table-config="tableProps"
:table-data="list"
:is-loading="listLoading"
/>
</div>
</template>
<script>
import i18n from '@/lang'
import BaseTable from '@/components/BaseTable'
/**
* 表格表头配置项 TypeScript接口注释
* tableConfig<ConfigItem> = []
*
* Interface ConfigItem = {
* prop: string,
* label: string,
* width: string,
* align: string,
* subcomponent: function,
* filter: function
* }
*
*
*/
const tableProps = [
{
prop: 'tmc',
label: i18n.t('module.equipmentManager.monitoringInfo.allCycles'),
align: 'center'
}, {
prop: 'emc',
label: i18n.t('module.equipmentManager.monitoringInfo.badTimes'),
align: 'center'
}, {
prop: 'time',
label: i18n.t('module.equipmentManager.monitoringInfo.time'),
align: 'center'
}, {
prop: 'mtbf',
label: i18n.t('module.equipmentManager.monitoringInfo.MCBF'),
align: 'center'
}
]
export default {
name: '',
components: { BaseTable },
props: {
tableData: {
type: Array,
default: () => { [] }
}
},
data() {
return {
total: 0,
tableProps,
list: [],
listLoading: false
}
},
mounted() {
// this.init()
},
methods: {
init() {
this.list = this.tableData
}
}
}
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>

View File

@ -0,0 +1,132 @@
<!--
* @Author: zwq
* @Date: 2020-12-29 15:41:11
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:46:06
* @Description: Mttr详情表格
-->
<template>
<div>
<base-table
:page="listQuery.current"
:limit="listQuery.size"
:table-config="tableProps"
:table-data="list"
:is-loading="listLoading"
/>
<pagination :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="init" />
</div>
</template>
<script>
import i18n from '@/lang'
import BaseTable from '@/components/BaseTable'
import Pagination from '@/components/Pagination'
import { timeFormatter } from '@/filters'
// import { getMttrDetail } from '@/api/equipment/infoPandect'
/**
* 表格表头配置项 TypeScript接口注释
* tableConfig<ConfigItem> = []
*
* Interface ConfigItem = {
* prop: string,
* label: string,
* width: string,
* align: string,
* subcomponent: function,
* filter: function
* }
*
*
*/
const tableProps = [
{
prop: 'previousStatus',
label: i18n.t('module.equipmentManager.monitoringInfo.previousStatus'),
align: 'center'
}, {
prop: 'status',
label: i18n.t('module.art.status'),
align: 'center'
}, {
prop: 'startTime',
label: i18n.t('module.equipmentManager.equipmentParams.startTime'),
filter: timeFormatter,
align: 'center'
}, {
prop: 'endTime',
label: i18n.t('module.equipmentManager.equipmentParams.endTime'),
filter: timeFormatter,
align: 'center'
}, {
prop: 'durationTime',
label: i18n.t('module.equipmentManager.monitoringInfo.duration'),
align: 'center'
}
]
export default {
name: '',
components: { BaseTable, Pagination },
props: {
time1: {
type: Date,
default: () => {
return ''
}
},
time2: {
type: Date,
default: () => {
return ''
}
},
equipmentName: {
type: String,
default: () => {
return ''
}
}
},
data() {
return {
total: 0,
tableProps,
list: [],
listLoading: false,
listQuery: {
current: 1,
size: 10
}
}
},
mounted() {
// this.init()
},
methods: {
init() {
this.listQuery.startTime = this.time1
this.listQuery.endTime = this.time2
this.listQuery.equipmentName = this.equipmentName
getMttrDetail(this.listQuery).then(res => {
if (res.data !== []) {
this.list = res.data.detail.records
this.total = res.data.detail.total
}
})
}
}
}
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>

View File

@ -0,0 +1,100 @@
<!--
* @Author: zwq
* @Date: 2020-12-29 15:41:11
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:38:52
* @Description: OEE详情表格
-->
<template>
<div>
<base-table
:table-config="tableProps"
:table-data="list"
:is-loading="listLoading"
/>
</div>
</template>
<script>
import i18n from '@/lang'
import BaseTable from '@/components/BaseTable'
const tableProps = [
{
prop: 'equipmentName',
label: i18n.t('module.equipmentManager.maintainplan.equipmentId'),
align: 'center'
}, {
prop: 'runTime',
label: i18n.t('module.equipmentManager.monitoringInfo.runTime'),
align: 'center'
}, {
prop: 'productiveTime',
label: i18n.t('module.equipmentManager.monitoringInfo.produceTime'),
align: 'center'
}, {
prop: 'productiveCount',
label: i18n.t('module.equipmentManager.monitoringInfo.productiveCount'),
align: 'center'
}, {
prop: 'timeRate',
label: i18n.t('module.equipmentManager.monitoringInfo.timeRate'),
align: 'center'
}, {
prop: 'performanceRate',
label: i18n.t('module.equipmentManager.monitoringInfo.performanceRate'),
align: 'center'
}, {
prop: 'oee',
label: i18n.t('module.equipmentManager.monitoringInfo.oee'),
align: 'center'
}
]
export default {
name: '',
components: { BaseTable },
props: {
tableData: {
type: Array,
default: () => { [] }
},
equipmentName: {
type: String,
default: () => { '' }
}
},
data() {
return {
total: 0,
tableProps,
list: [],
listLoading: false
}
},
mounted() {
// this.init()
},
methods: {
init() {
this.list = this.tableData
if (this.list !== []) {
this.list.forEach(item => {
item.equipmentName = this.equipmentName
})
}
}
}
}
</script>
<style scoped>
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>

View File

@ -0,0 +1,212 @@
<!--
* @Author: DY
* @Date: 2021-12-13 16:39:34
* @LastEditors: DY
* @LastEditTime: 2022-03-03 15:43:32
* @Description: E10折线柱状图
-->
<template>
<div>
<div id="monitorChart" :style="{width: '1000px', height: '800px'}" style="margin-left:10%" />
</div>
</template>
<script>
import echarts from 'echarts'
// import { getE10Stack } from '@/api/equipment/infoPandect'
export default {
props: {
time1: {
type: Date,
default: () => {
return ''
}
},
time2: {
type: Date,
default: () => {
return ''
}
},
name: {
type: String,
default: () => {
return ''
}
}
},
data() {
return {
chart: null,
list: [],
xDataList: [],
engineeringList: [],
nonscheduledDownList: [],
productiveList: [],
rampUpDownList: [],
scheduledDownList: [],
standByList: [],
unscheduledDownList: []
}
},
mounted() {},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
removeData() {
this.xDataList = ['ACOT1', 'ACOT2']
this.engineeringList = [20, 30]
this.nonscheduledDownList = [20, 20]
this.productiveList = [10, 2]
this.rampUpDownList = [30, 3]
this.scheduledDownList = [8, 15]
this.standByList = [2, 12]
this.unscheduledDownList = [10, 18]
},
getList() {
this.removeData()
this.init()
},
init() {
this.chart = echarts.init(document.getElementById('monitorChart'))
const that = this
that.chart.on('click', function(params) {
that.$emit('equipmentName', params.name)
})
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
saveAsImage: { show: true }
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
rotate: -30
},
max: 10,
data: this.xDataList
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}%'
}
},
series: [
{
name: 'engineering',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
barWidth: 40,
data: this.engineeringList
},
{
name: 'nonscheduledDown',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.nonscheduledDownList
},
{
name: 'productive',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.productiveList
},
{
name: 'rampUpDown',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.rampUpDownList
},
{
name: 'scheduledDown',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.scheduledDownList
},
{
name: 'standBy',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.standByList
},
{
name: 'unscheduledDown',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.unscheduledDownList
}
]
})
}
}
}
</script>

View File

@ -0,0 +1,253 @@
<!--
* @Author: DY
* @Date: 2021-12-13 16:39:34
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:26:34
* @Description: E10详情堆积图
-->
<template>
<div>
<div>
<el-button-group>
<el-button @click="byYear"></el-button>
<el-button @click="byQuarterly">季度</el-button>
<el-button @click="byMonth"></el-button>
<el-button @click="byWeek"></el-button>
<el-button @click="byDay"></el-button>
</el-button-group>
</div>
<div id="monitorChart" :style="{width: '700px', height: '550px'}" style="margin-left:10%" />
<e10-table v-if="tableVisible" :time1="startTime" :time2="endTime" :equipment-name="name" />
</div>
</template>
<script>
import echarts from 'echarts'
// import { getE10StackDetail } from '@/api/equipment/infoPandect'
import E10Table from './E10Table'
export default {
components: { E10Table },
props: {
time1: {
type: Date,
default: () => {
return ''
}
},
time2: {
type: Date,
default: () => {
return ''
}
},
equipmentName: {
type: String,
default: () => {
return ''
}
}
},
data() {
return {
chart: null,
tableVisible: false,
equipmentDetail: [],
list: [],
xDataList: [],
engineeringList: [],
nonscheduledDownList: [],
productiveList: [],
rampUpDownList: [],
scheduledDownList: [],
standByList: [],
unscheduledDownList: [],
startTime: '',
endTime: '',
name: ''
}
},
mounted() {
this.startTime = this.time1
this.endTime = this.time2
this.name = this.equipmentName
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
getDataList(params) {
console.log(params)
},
byYear() {
this.removeData()
this.setChart(this.list.)
},
byQuarterly() {
this.removeData()
this.setChart(this.list.季度)
},
byMonth() {
this.removeData()
this.setChart(this.list.)
},
byWeek() {
this.removeData()
this.setChart(this.list.)
},
byDay() {
this.removeData()
this.setChart(this.list.)
},
setChart(list) {
this.init()
},
removeData() {
// this.xDataList = [this.name]
this.engineeringList = [20]
this.nonscheduledDownList = [20]
this.productiveList = [10]
this.rampUpDownList = [30]
this.scheduledDownList = [8]
this.standByList = [2]
this.unscheduledDownList = [10]
},
getList() {
this.xDataList = [this.name]
this.tableVisible = true
},
init() {
this.chart = echarts.init(document.getElementById('monitorChart'))
this.chart.on('click', function(params) {
console.log('113d', params.name)
})
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
saveAsImage: { show: true }
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
max: 10,
axisLabel: {
interval: 0,
rotate: -30
},
data: this.xDataList
},
yAxis: {
type: 'value'
},
series: [
{
name: 'engineering',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.engineeringList
},
{
name: 'nonscheduledDown',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.nonscheduledDownList
},
{
name: 'productive',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.productiveList
},
{
name: 'rampUpDown',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.rampUpDownList
},
{
name: 'scheduledDown',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.scheduledDownList
},
{
name: 'standBy',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.standByList
},
{
name: 'unscheduledDown',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.unscheduledDownList
}
]
})
}
}
}
</script>

View File

@ -0,0 +1,137 @@
<!--
* @Author: DY
* @Date: 2021-12-13 16:39:34
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:48:01
* @Description: Mcbf折线柱状图
-->
<template>
<div>
<div id="monitorChart" :style="{width: '1000px', height: '800px'}" style="margin-left:10%" />
</div>
</template>
<script>
import echarts from 'echarts'
// import { getAllMtbf } from '@/api/equipment/infoPandect'
export default {
props: {
time1: {
type: Date,
default: () => {
return ''
}
},
time2: {
type: Date,
default: () => {
return ''
}
}
},
data() {
return {
chart: null,
list: [],
xDataList: [],
yDataList: []
}
},
mounted() {},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
removeData() {
this.xDataList = ['ACOT1', 'ACOT2', 'ACOT-a', 'ACOT-b']
this.yDataList = [22, 40, 66, 44]
},
getList() {
this.removeData()
this.init()
},
init() {
this.chart = echarts.init(document.getElementById('monitorChart'))
const that = this
that.chart.on('click', function(params) {
that.$emit('equipmentName', params.name)
})
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
saveAsImage: { show: true }
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
rotate: -30
},
max: 10,
data: this.xDataList
},
yAxis: [{
type: 'value',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}次'
}
},
{
type: 'value',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}次'
}
}
],
series: [
{
name: '稼动率值',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
barWidth: 40,
data: this.yDataList
},
{
name: '稼动率值',
type: 'line',
yAxisIndex: 1,
data: this.yDataList
}
]
})
}
}
}
</script>

View File

@ -0,0 +1,185 @@
<!--
* @Author: DY
* @Date: 2021-12-13 16:39:34
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:48:53
* @Description: MCBF详情堆积图
-->
<template>
<div>
<div>
<el-button-group>
<el-button @click="byYear"></el-button>
<el-button @click="byQuarterly">季度</el-button>
<el-button @click="byMonth"></el-button>
<el-button @click="byWeek"></el-button>
<el-button @click="byDay"></el-button>
</el-button-group>
</div>
<div id="monitorChart" :style="{width: '700px', height: '550px'}" style="margin-left:10%" />
<mcbf-table v-if="tableVisible" ref="tableRef" :table-data="tableData" />
</div>
</template>
<script>
import echarts from 'echarts'
// import { getMcbfDetail } from '@/api/equipment/infoPandect'
import McbfTable from './McbfTable'
export default {
components: { McbfTable },
props: {
time1: {
type: Date,
default: () => {
return ''
}
},
time2: {
type: Date,
default: () => {
return ''
}
},
equipmentName: {
type: String,
default: () => {
return ''
}
}
},
data() {
return {
chart: null,
tableVisible: false,
tableData: [],
equipmentDetail: [],
list: [],
xDataList: [],
yDataList: [],
startTime: '',
endTime: '',
name: ''
}
},
mounted() {
this.startTime = this.time1
this.endTime = this.time2
this.name = this.equipmentName
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
getDataList(params) {
console.log(params)
},
byYear() {
this.removeData()
this.setChart(this.list.)
this.tableData = this.list.
setTimeout(() => {
this.$refs.tableRef.init()
}, 60)
},
byQuarterly() {
this.removeData()
this.setChart(this.list.季度)
this.tableData = this.list.季度
setTimeout(() => {
this.$refs.tableRef.init()
}, 60)
},
byMonth() {
this.removeData()
this.setChart(this.list.)
this.tableData = this.list.
setTimeout(() => {
this.$refs.tableRef.init()
}, 60)
},
byWeek() {
this.removeData()
this.setChart(this.list.)
this.tableData = this.list.
setTimeout(() => {
this.$refs.tableRef.init()
}, 60)
},
byDay() {
this.removeData()
this.setChart(this.list.)
this.tableData = this.list.
setTimeout(() => {
this.$refs.tableRef.init()
}, 60)
},
setChart(list) {
this.init()
},
removeData() {
this.xDataList = [this.name]
this.yDataList = [11, 33, 20, 53, 24]
},
getList() {
this.tableVisible = true
},
init() {
this.chart = echarts.init(document.getElementById('monitorChart'))
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
saveAsImage: { show: true }
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
max: 10,
axisLabel: {
interval: 0,
rotate: -30
},
data: this.xDataList
},
yAxis: {
type: 'value'
},
series: [
{
name: '稼动率值',
type: 'line',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.yDataList
}
]
})
}
}
}
</script>

View File

@ -0,0 +1,133 @@
<!--
* @Author: DY
* @Date: 2021-12-13 16:39:34
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:41:38
* @Description: MTTR折线柱状图
-->
<template>
<div>
<div id="monitorChart" :style="{width: '1000px', height: '800px'}" style="margin-left:10%" />
</div>
</template>
<script>
import echarts from 'echarts'
// import { getMttr } from '@/api/equipment/infoPandect'
export default {
props: {
time1: {
type: Date,
default: () => {
return ''
}
},
time2: {
type: Date,
default: () => {
return ''
}
}
},
data() {
return {
chart: null,
list: [],
xDataList: [],
yDataList: []
}
},
mounted() {},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
removeData() {
this.xDataList = ['ACOT1', 'ACOT2', 'ACOT-a', 'ACOT-b']
this.yDataList = [22, 40, 66, 44]
},
getList() {
this.removeData()
this.init()
},
init() {
this.chart = echarts.init(document.getElementById('monitorChart'))
const that = this
that.chart.on('click', function(params) {
that.$emit('equipmentName', params.name)
})
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
saveAsImage: { show: true }
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
rotate: -30
},
max: 10,
data: this.xDataList
},
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value}小时'
}
},
{
type: 'value',
axisLabel: {
formatter: '{value}小时'
}
}
],
series: [
{
name: '稼动率值',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
barWidth: 40,
data: this.yDataList
},
{
name: '稼动率值',
type: 'line',
yAxisIndex: 1,
data: this.yDataList
}
]
})
}
}
}
</script>

View File

@ -0,0 +1,165 @@
<!--
* @Author: DY
* @Date: 2021-12-13 16:39:34
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:43:34
* @Description: MTTR详情堆积图
-->
<template>
<div>
<div>
<el-button-group>
<el-button @click="byYear"></el-button>
<el-button @click="byQuarterly">季度</el-button>
<el-button @click="byMonth"></el-button>
<el-button @click="byWeek"></el-button>
<el-button @click="byDay"></el-button>
</el-button-group>
</div>
<div id="monitorChart" :style="{width: '700px', height: '550px'}" style="margin-left:10%" />
<mttr-table v-if="tableVisible" :time1="startTime" :time2="endTime" :equipment-name="name" />
</div>
</template>
<script>
import echarts from 'echarts'
// import { getMttrDetail } from '@/api/equipment/infoPandect'
import MttrTable from './MttrTable'
export default {
components: { MttrTable },
props: {
time1: {
type: Date,
default: () => {
return ''
}
},
time2: {
type: Date,
default: () => {
return ''
}
},
equipmentName: {
type: String,
default: () => {
return ''
}
}
},
data() {
return {
chart: null,
tableVisible: false,
equipmentDetail: [],
list: [],
xDataList: [],
yDataList: [],
startTime: '',
endTime: '',
name: ''
}
},
mounted() {
this.startTime = this.time1
this.endTime = this.time2
this.name = this.equipmentName
this.removeData()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
getDataList(params) {
console.log(params)
},
byYear() {
this.removeData()
this.setChart(this.list.)
},
byQuarterly() {
this.removeData()
this.setChart(this.list.季度)
},
byMonth() {
this.removeData()
this.setChart(this.list.)
},
byWeek() {
this.removeData()
this.setChart(this.list.)
},
byDay() {
this.removeData()
this.setChart(this.list.)
},
setChart(list) {
this.init()
},
removeData() {
this.xDataList = [this.name]
this.yDataList = [30, 40, 30, 33, 44]
},
getList() {
this.tableVisible = true
},
init() {
this.chart = echarts.init(document.getElementById('monitorChart'))
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
saveAsImage: { show: true }
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
max: 10,
axisLabel: {
interval: 0,
rotate: -30
},
data: this.xDataList
},
yAxis: {
type: 'value'
},
series: [
{
name: '稼动率值',
type: 'line',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.yDataList
}
]
})
}
}
}
</script>

View File

@ -0,0 +1,137 @@
<!--
* @Author: DY
* @Date: 2021-12-13 16:39:34
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:34:30
* @Description: OEE折线柱状图
-->
<template>
<div>
<div id="monitorChart" :style="{width: '1000px', height: '800px'}" style="margin-left:10%" />
</div>
</template>
<script>
import echarts from 'echarts'
// import { getOEE } from '@/api/equipment/infoPandect'
export default {
props: {
time1: {
type: Date,
default: () => {
return ''
}
},
time2: {
type: Date,
default: () => {
return ''
}
}
},
data() {
return {
chart: null,
list: [],
xDataList: [],
oeeList: []
}
},
mounted() {},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
removeData() {
this.xDataList = ['ACOT1', 'ACOT2', 'ACOT-a', 'ACOT-b']
this.oeeList = [20, 30, 80, 44]
},
getList() {
this.removeData()
this.init()
},
init() {
this.chart = echarts.init(document.getElementById('monitorChart'))
const that = this
that.chart.on('click', function(params) {
that.$emit('equipmentName', params.name)
})
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
saveAsImage: { show: true }
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
rotate: -30
},
max: 10,
data: this.xDataList
},
yAxis: [{
type: 'value',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}%'
}
},
{
type: 'value',
min: 0,
max: 100,
axisLabel: {
formatter: '{value}%'
}
}
],
series: [
{
name: 'oee',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
barWidth: 40,
data: this.oeeList
},
{
name: 'oee',
type: 'line',
yAxisIndex: 1,
data: this.oeeList
}
]
})
}
}
}
</script>

View File

@ -0,0 +1,258 @@
<!--
* @Author: DY
* @Date: 2021-12-13 16:39:34
* @LastEditors: DY
* @LastEditTime: 2022-03-03 16:37:49
* @Description:OEE详情堆积图
-->
<template>
<div>
<div>
<el-button-group>
<el-button @click="byYear"></el-button>
<el-button @click="byQuarterly">季度</el-button>
<el-button @click="byMonth"></el-button>
<el-button @click="byWeek"></el-button>
<el-button @click="byDay"></el-button>
</el-button-group>
</div>
<div id="monitorChart" :style="{width: '700px', height: '550px'}" style="margin-left:10%" />
<oee-table v-if="tableVisible" ref="tableRef" :table-data="tableData" :equipment-name="name" />
</div>
</template>
<script>
import echarts from 'echarts'
// import { getOEEDetail } from '@/api/equipment/infoPandect'
import OeeTable from './OeeTable'
export default {
components: { OeeTable },
props: {
time1: {
type: Date,
default: () => {
return ''
}
},
time2: {
type: Date,
default: () => {
return ''
}
},
equipmentName: {
type: String,
default: () => {
return ''
}
}
},
data() {
return {
chart: null,
tableVisible: false,
equipmentDetail: [],
tableData: [],
list: [],
xDataList: [],
oeeList: [],
startTime: '',
endTime: '',
name: ''
}
},
mounted() {
this.startTime = this.time1
this.endTime = this.time2
this.name = this.equipmentName
this.removeData()
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
getDataList(params) {
console.log(params)
},
async byYear() {
this.removeData()
this.setChart(this.list.)
this.tableData = this.list.
setTimeout(() => {
this.$refs.tableRef.init()
}, 60)
},
byQuarterly() {
this.removeData()
this.setChart(this.list.季度)
this.tableData = this.list.季度
setTimeout(() => {
this.$refs.tableRef.init()
}, 60)
},
byMonth() {
this.removeData()
this.setChart(this.list.)
this.tableData = this.list.
setTimeout(() => {
this.$refs.tableRef.init()
}, 60)
},
byWeek() {
this.removeData()
this.setChart(this.list.)
this.tableData = this.list.
setTimeout(() => {
this.$refs.tableRef.init()
}, 60)
},
byDay() {
this.removeData()
this.setChart(this.list.)
this.tableData = this.list.
setTimeout(() => {
this.$refs.tableRef.init()
}, 60)
},
setChart(list) {
this.init()
},
removeData() {
this.xDataList = [this.name]
this.oeeList = [30, 40, 30, 33, 44]
},
getList() {
this.tableVisible = true
},
init() {
this.chart = echarts.init(document.getElementById('monitorChart'))
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
saveAsImage: { show: true }
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
max: 10,
axisLabel: {
interval: 0,
rotate: -30
},
data: this.xDataList
},
yAxis: {
type: 'value'
},
series: [
{
name: 'oee',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.oeeList
},
{
name: 'performanceRate',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.performanceRateList
},
{
name: 'productiveCount',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.productiveCountList
},
{
name: 'productiveTime',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.productiveTimeList
},
{
name: 'runTime',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.runTimeList
},
{
name: 'time',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.timeList
},
{
name: 'timeRate',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: this.timeRateList
}
]
})
}
}
}
</script>