<!--
|
* @Date: 2024-04-18 21:52:18
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-05-20 21:05:43
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/Shift.vue
|
-->
|
<template>
|
<el-row>
|
<el-col>
|
<el-button-group>
|
<el-button size="small" @click="btnListActive = item.id"
|
:type="btnListActive == item.id ? 'primary' : ''" v-for="item in btnList" :key="item.id">{{
|
item.title }}</el-button>
|
</el-button-group>
|
</el-col>
|
<el-col style="margin-top: 12px;">
|
<el-card shadow="never">
|
<scEcharts height="300px" :option="option2"></scEcharts>
|
</el-card>
|
</el-col>
|
<el-col>
|
统计数据
|
</el-col>
|
<el-col>
|
<scTable ref="table" row-key="id" border :params="params" :apiObj="apiObj" stripe>
|
<el-table-column prop="workstationCode" label="工位编码" />
|
<el-table-column prop="workstationName" label="工位名称" />
|
<el-table-column prop="" label="班次1">
|
<template #default="scope">
|
<span>{{ scope.row.nameData['1'] }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="" :label="colname">
|
<template #default="scope">
|
<span>{{ scope.row.data['1'] }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="" label="班次2">
|
<template #default="scope">
|
<span>{{ scope.row.nameData['2'] }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="" :label="colname">
|
<template #default="scope">
|
<span>{{ scope.row.data['2'] }}</span>
|
</template>
|
</el-table-column>
|
</scTable>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
import scEcharts from '@/components/scEcharts';
|
export default {
|
props: {
|
url: {
|
default: '/api/blade-mdc/efficiency-analysis',
|
type: String,
|
},
|
colname: {
|
default: '',
|
type: String,
|
},
|
options: {
|
default() {
|
return {}
|
},
|
}
|
},
|
components: {
|
scEcharts
|
},
|
data() {
|
return {
|
apiObj: '',
|
params: {},
|
statisticalMethod: 'SHIFT',
|
btnList: [],
|
btnListActive: '',
|
chartsData: [],
|
option2: null,
|
}
|
},
|
watch: {
|
btnListActive(val) {
|
this.query({
|
...this.params,
|
startDate: val,
|
endDate: val
|
})
|
this.queryChart({
|
...this.params,
|
startDate: val,
|
endDate: val
|
})
|
}
|
},
|
methods: {
|
init(params) {
|
this.params = params
|
this.getTime({
|
endDate: params.endDate,
|
startDate: params.startDate,
|
statisticalMethod: this.statisticalMethod
|
}).then(res => {
|
this.query({
|
...params,
|
startDate: this.btnListActive,
|
endDate: this.btnListActive
|
})
|
this.queryChart({
|
...params,
|
startDate: this.btnListActive,
|
endDate: this.btnListActive
|
})
|
})
|
|
},
|
getTime(data) {
|
return this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {
|
...data
|
}).then(res => {
|
if (res.code === 200) {
|
this.btnList = res.data
|
this.btnListActive = res?.data?.[0]?.id
|
}
|
})
|
},
|
queryChart(data) {
|
let params = {
|
size: -1
|
}
|
let dataSend = {
|
...data,
|
queryType: 0,
|
statisticalMethod: this.statisticalMethod
|
}
|
return this.$HTTP.post(this.url, dataSend, { params }).then(res => {
|
this.chartsData = res.data.items.records
|
let option2 = {
|
...this.options
|
}
|
option2.dataset.source = [['product', '班次1', '班次2']]
|
res.data.items.records.forEach(v => {
|
option2.dataset.source.push([v.workstationName, v.data[1] === '-' ? 0 : v.data[1] * 100, v.data[2] === '-' ? 0 : v.data[2] * 100])
|
});
|
this.option2 = option2
|
console.log(option2)
|
})
|
},
|
query(params) {
|
this.params = params
|
this.apiObj = {
|
get: async (data) => {
|
let params = {
|
current: data.current,
|
size: data.size
|
}
|
let dataSend = {
|
...data,
|
queryType: 1,
|
statisticalMethod: this.statisticalMethod
|
}
|
delete dataSend.current
|
delete dataSend.size
|
delete dataSend.order
|
delete dataSend.prop
|
return await this.$HTTP.post(this.url, dataSend, { params }).then(res => {
|
return {
|
...res,
|
data: res.data.items
|
}
|
})
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
