Reviewed-on: http://git.picaiba.com/mt-fe-group/yudao-dev/pulls/31pull/40/head
@@ -17,11 +17,12 @@ import * as echarts from 'echarts'; | |||
export default { | |||
name: 'LineChartInEquipmentProcessAmount', | |||
components: {}, | |||
props: ['equipmentList'], | |||
props: ['equipmentList', 'render'], | |||
data() { | |||
return { | |||
chart: null, | |||
option: { | |||
color: ['#288AFF'], | |||
grid: { | |||
top: 64, | |||
left: 56, | |||
@@ -89,16 +90,19 @@ export default { | |||
}, | |||
}; | |||
}, | |||
mounted() { | |||
// console.log('this.eq list', this.equipmentList); | |||
if (!this.chart) this.chart = echarts.init(this.$refs.chart); | |||
this.$nextTick(() => { | |||
this.chart.setOption(this.updateConfig(this.option)); | |||
}); | |||
watch: { | |||
render: { | |||
handler: function (newVal, oldVal) { | |||
if (!this.chart) this.chart = echarts.init(this.$refs.chart); | |||
this.$nextTick(() => { | |||
if (this.chart) this.chart.setOption(this.updateConfig(this.option)); | |||
}); | |||
}, | |||
deep: true, | |||
}, | |||
}, | |||
beforeDestroy() { | |||
this.chart.dispose(); | |||
if (this.chart) this.chart.dispose(); | |||
}, | |||
methods: { | |||
updateConfig(config) { | |||
@@ -126,5 +130,6 @@ export default { | |||
.chart { | |||
height: 100%; | |||
width: 100%; | |||
// background: lightcoral; | |||
} | |||
</style> |
@@ -89,9 +89,12 @@ | |||
<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph"> | |||
<div class="graph" style="height: 56vh"> | |||
<!-- graph --> | |||
<Graph v-if="list.length" :equipment-list="list" /> | |||
<Graph | |||
v-if="list.length" | |||
:equipment-list="list" | |||
:render="renderKey" /> | |||
<div | |||
v-else | |||
v-if="list.length == 0" | |||
style=" | |||
color: #c7c7c7; | |||
text-align: center; | |||
@@ -120,6 +123,7 @@ export default { | |||
props: {}, | |||
data() { | |||
return { | |||
renderKey: Math.random(), | |||
factoryListOpen: false, | |||
currentFactory: null, | |||
factoryList: [ | |||
@@ -327,13 +331,12 @@ export default { | |||
}, | |||
handleTabClick(tab, event) { | |||
console.log('handle tab click: ', tab, event); | |||
if (tab.name == 'graph') this.renderKey = Math.random(); | |||
}, | |||
factoryChangeHandler(event) { | |||
this.factoryListOpen = false; | |||
const fcId = event.target.dataset.value; | |||
console.log('fc id', fcId); | |||
this.handleSidebarItemClick({ id: fcId, type: '工厂' }); | |||
this.currentFactory = this.sidebarContent.find((item) => item.id == fcId); | |||
}, | |||
@@ -398,7 +401,7 @@ export default { | |||
padding: 0; | |||
color: #111; | |||
/* background: #f2f4f7; */ | |||
background: #E3EFFF !important; | |||
background: #e3efff !important; | |||
} | |||
.vvv-enter, | |||
@@ -527,14 +530,17 @@ li { | |||
padding: 8px 12px !important; | |||
} | |||
.custom-tree-class >>> .el-tree-node__content:hover { | |||
background: #E3EFFF; | |||
background: #e3efff; | |||
} | |||
.custom-tree-class >>> .el-tree-node__children .el-tree-node__content { | |||
padding: 8px 18px !important; | |||
} | |||
.custom-tree-class >>> .el-tree-node__children .el-tree-node__children .el-tree-node__content { | |||
.custom-tree-class | |||
>>> .el-tree-node__children | |||
.el-tree-node__children | |||
.el-tree-node__content { | |||
padding: 8px 24px !important; | |||
} | |||
</style> | |||
@@ -54,6 +54,7 @@ | |||
label="按钮盒识别码" | |||
prop="buttonId" | |||
:rules="[ | |||
{ required: true, message: '不能为空', trigger: 'blur' }, | |||
{ | |||
type: 'number', | |||
message: '请输入整数', | |||
@@ -98,12 +99,16 @@ | |||
label="按钮值" | |||
prop="keyValue" | |||
:rules="[ | |||
{ required: true, message: '不能为空', trigger: 'blur' }, | |||
{ | |||
type: 'number', | |||
message: '请输入100以内的整数', | |||
trigger: 'blur', | |||
transform: (val) => | |||
Number(val) <= 100 && Number.isInteger(+val) && Number(val), | |||
Number.isInteger(+val) && | |||
Number(val) >= 0 && | |||
Number(val) <= 100 && | |||
Number(val), | |||
}, | |||
]"> | |||
<el-input | |||
@@ -165,10 +170,10 @@ export default { | |||
watch: { | |||
'dataForm.productionId': { | |||
handler(id) { | |||
this.getWorksectionList(id); | |||
if (id != null) this.getWorksectionList(id); | |||
}, | |||
immediate: true | |||
} | |||
immediate: true, | |||
}, | |||
}, | |||
methods: { | |||
/** 模拟透传 ref */ | |||
@@ -236,7 +236,8 @@ export default { | |||
// width: 160, | |||
prop: 'checkTime', | |||
label: '检测时间', | |||
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | |||
filter: (val) => | |||
val != null ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '-', | |||
}, | |||
{ | |||
width: 90, | |||
@@ -332,33 +332,51 @@ export default { | |||
}, | |||
mounted() { | |||
if (this.$route.params.startTime && this.$route.params.endTime) { | |||
this.searchBarFormConfig[0].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime] | |||
this.searchBarFormConfig[0].defaultSelect = [ | |||
this.$route.params.startTime, | |||
this.$route.params.endTime, | |||
]; | |||
this.queryParams.param = {}; | |||
this.$set(this.queryParams.param, 'startTime', this.$route.params.startTime); | |||
this.$set( | |||
this.queryParams.param, | |||
'startTime', | |||
this.$route.params.startTime | |||
); | |||
this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime); | |||
} else { | |||
this.searchBarFormConfig[0].defaultSelect = [] | |||
} | |||
} else { | |||
this.searchBarFormConfig[0].defaultSelect = []; | |||
} | |||
this.getList(); | |||
}, | |||
watch: { | |||
$route: 'initData' | |||
}, | |||
$route: 'initData', | |||
}, | |||
methods: { | |||
initData(to) { | |||
// console.log(to) | |||
if (to.name === 'QualityStatistics') { | |||
if (this.$route.params.startTime && this.$route.params.endTime) { | |||
this.searchBarFormConfig[0].defaultSelect = [this.$route.params.startTime, this.$route.params.endTime] | |||
if (to.name === 'QualityStatistics') { | |||
if (this.$route.params.startTime && this.$route.params.endTime) { | |||
this.searchBarFormConfig[0].defaultSelect = [ | |||
this.$route.params.startTime, | |||
this.$route.params.endTime, | |||
]; | |||
this.queryParams.param = {}; | |||
this.$set(this.queryParams.param, 'startTime', this.$route.params.startTime); | |||
this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime); | |||
this.$set( | |||
this.queryParams.param, | |||
'startTime', | |||
this.$route.params.startTime | |||
); | |||
this.$set( | |||
this.queryParams.param, | |||
'endTime', | |||
this.$route.params.endTime | |||
); | |||
} else { | |||
this.searchBarFormConfig[0].defaultSelect = [] | |||
this.searchBarFormConfig[0].defaultSelect = []; | |||
} | |||
this.getList(); | |||
} | |||
}, | |||
}, | |||
getList() { | |||
this.getSummaryList(); | |||
this.getDetailedList(); | |||
@@ -367,20 +385,17 @@ export default { | |||
async getSummaryList() { | |||
const response = await this.$axios({ | |||
url: '/monitoring/statistical-data/getUpPart', | |||
method: 'get', | |||
params: this.queryParams.param | |||
method: 'post', | |||
data: this.queryParams.param | |||
? { | |||
param: { | |||
// startTime: new Date(2022, 6, 1, 0, 0, 0).getTime(), // '2023-07-01 00:00:00', | |||
// endTime: new Date(2023, 7, 10, 0, 0, 0).getTime(), // '2023-08-10 00:00:00', | |||
startTime: this.queryParams.param.startTime, | |||
endTime: this.queryParams.param.endTime, | |||
}, | |||
// startTime: new Date(2022, 6, 1, 0, 0, 0).getTime(), // '2023-07-01 00:00:00', | |||
// endTime: new Date(2023, 7, 10, 0, 0, 0).getTime(), // '2023-08-10 00:00:00', | |||
startTime: this.queryParams.param.startTime, | |||
endTime: this.queryParams.param.endTime, | |||
} | |||
: null, | |||
: {}, | |||
}); | |||
this.summaryList = response.data; | |||
console.log('summaryList', this.summaryList); | |||
}, | |||
/** 获取 检测内容和产线关联 列表 */ | |||
async getDetailedList() { | |||
@@ -388,22 +403,21 @@ export default { | |||
data: { data, otherList, otherMap, nameData }, | |||
} = await this.$axios({ | |||
url: '/monitoring/statistical-data/getDownPart', | |||
params: this.queryParams.param | |||
method: 'post', | |||
data: this.queryParams.param | |||
? { | |||
param: { | |||
// startTime: new Date(2023, 6, 1).getTime(), // '2023-07-01 00:00:00', | |||
// endTime: new Date(2023, 7, 22).getTime(), // '2023-08-10 00:00:00', | |||
startTime: this.queryParams.param.startTime, | |||
endTime: this.queryParams.param.endTime, | |||
}, | |||
// startTime: new Date(2023, 6, 1).getTime(), // '2023-07-01 00:00:00', | |||
// endTime: new Date(2023, 7, 22).getTime(), // '2023-08-10 00:00:00', | |||
startTime: this.queryParams.param.startTime, | |||
endTime: this.queryParams.param.endTime, | |||
} | |||
: null, | |||
: {}, | |||
}); | |||
// this.list = response.data; | |||
console.log('data', data); | |||
console.log('otherList', otherList); | |||
console.log('otherMap', otherMap); | |||
console.log('nameData', nameData); | |||
// console.log('data', data); | |||
// console.log('otherList', otherList); | |||
// console.log('otherMap', otherMap); | |||
// console.log('nameData', nameData); | |||
this.dynamicProps = this.filterNameData(nameData); | |||
this.list = this.filterData(data); | |||