eslint版本 #28
@ -97,7 +97,7 @@
|
|||||||
"@vue/test-utils": "1.0.0-beta.29",
|
"@vue/test-utils": "1.0.0-beta.29",
|
||||||
"autoprefixer": "^9.5.1",
|
"autoprefixer": "^9.5.1",
|
||||||
"babel-core": "7.0.0-bridge.0",
|
"babel-core": "7.0.0-bridge.0",
|
||||||
"babel-eslint": "10.0.1",
|
"babel-eslint": "8.2.2",
|
||||||
"babel-jest": "23.6.0",
|
"babel-jest": "23.6.0",
|
||||||
"chalk": "2.4.2",
|
"chalk": "2.4.2",
|
||||||
"chokidar": "2.1.5",
|
"chokidar": "2.1.5",
|
||||||
|
|||||||
@ -280,6 +280,10 @@ export default {
|
|||||||
equipment: {
|
equipment: {
|
||||||
zh: '设备管理',
|
zh: '设备管理',
|
||||||
en: 'Equipment Manager',
|
en: 'Equipment Manager',
|
||||||
|
EquipmentUtilizationRate: {
|
||||||
|
zh: '设备稼动率',
|
||||||
|
en: 'EQ OEE'
|
||||||
|
},
|
||||||
EquipmentVisualization: {
|
EquipmentVisualization: {
|
||||||
zh: '设备可视化',
|
zh: '设备可视化',
|
||||||
en: 'Equipment Visualization',
|
en: 'Equipment Visualization',
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Date: 2021-03-05 10:04:30
|
* @Date: 2021-03-05 10:04:30
|
||||||
* @LastEditors: Please set LastEditors
|
* @LastEditors: DY
|
||||||
* @LastEditTime: 2021-07-23 09:13:56
|
* @LastEditTime: 2022-03-03 16:31:23
|
||||||
* @FilePath: \basic-admin\src\lang\i18n\en\module\equipmentManager.js
|
* @FilePath: \basic-admin\src\lang\i18n\en\module\equipmentManager.js
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@ -19,6 +19,68 @@ export default {
|
|||||||
Water: 'Water',
|
Water: 'Water',
|
||||||
Gas: 'Gas'
|
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': 'Sparepart',
|
'sparepart': 'Sparepart',
|
||||||
'code': 'Sparepart number',
|
'code': 'Sparepart number',
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* @Date: 2021-03-05 10:04:37
|
* @Date: 2021-03-05 10:04:37
|
||||||
* @LastEditors: Please set LastEditors
|
* @LastEditors: DY
|
||||||
* @LastEditTime: 2021-07-23 09:13:20
|
* @LastEditTime: 2022-03-03 16:31:16
|
||||||
* @FilePath: \basic-admin\src\lang\i18n\zh\module\equipmentManager.js
|
* @FilePath: \basic-admin\src\lang\i18n\zh\module\equipmentManager.js
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
@ -19,6 +19,68 @@ export default {
|
|||||||
'Water': '水',
|
'Water': '水',
|
||||||
'Gas': '气'
|
'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: {
|
||||||
'sparepart': '备品备件',
|
'sparepart': '备品备件',
|
||||||
'code': '备件编号',
|
'code': '备件编号',
|
||||||
|
|||||||
@ -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 }
|
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',
|
path: '/basic',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|||||||
152
src/views/EquipmentManager/equipmentUtilizationRate/E10.vue
Normal file
152
src/views/EquipmentManager/equipmentUtilizationRate/E10.vue
Normal 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>
|
||||||
151
src/views/EquipmentManager/equipmentUtilizationRate/MCBF.vue
Normal file
151
src/views/EquipmentManager/equipmentUtilizationRate/MCBF.vue
Normal 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>
|
||||||
151
src/views/EquipmentManager/equipmentUtilizationRate/MTTR.vue
Normal file
151
src/views/EquipmentManager/equipmentUtilizationRate/MTTR.vue
Normal 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>
|
||||||
151
src/views/EquipmentManager/equipmentUtilizationRate/OEE.vue
Normal file
151
src/views/EquipmentManager/equipmentUtilizationRate/OEE.vue
Normal 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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user