设备稼动率
This commit is contained in:
dengyan
@@ -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>
|
||||
Reference in New Issue
Block a user