<!--
|
* @Date: 2024-04-18 21:52:18
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-06-17 22:37:51
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/Time.vue
|
-->
|
<template>
|
<el-row>
|
<el-col>
|
<el-button-group>
|
<el-button size="small" @click="statisticalMethod = item.value"
|
:type="statisticalMethod == item.value ? 'primary' : ''" v-for="item in btnList"
|
:key="item.value">{{
|
item.label }}</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="item" v-for="item in cols" :key="item">
|
<template #default="scope">
|
<span>{{ colnameFn(scope.row.data[item]) }}</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,
|
},
|
options: {
|
default() {
|
return {}
|
},
|
},
|
colnameFn: {
|
type: Function,
|
default: val => {
|
if (isNaN(val)) return '-'
|
return `${(val ? val * 100 : 0).toFixed(2)}%`
|
}
|
},
|
resFn: {
|
type: Function,
|
default: val => {
|
if (isNaN(val)) return 0
|
return (val - 0) * 100
|
}
|
}
|
},
|
components: {
|
scEcharts
|
},
|
data() {
|
return {
|
apiObj: '',
|
params: {},
|
statisticalMethod: 'DAY',
|
btnList: [
|
{
|
label: '按日查看',
|
value: 'DAY',
|
},
|
{
|
label: '按周查看',
|
value: 'WEEK',
|
},
|
{
|
label: '按月查看',
|
value: 'MONTH',
|
},
|
],
|
cols: [],
|
chartsData: [],
|
option2: {},
|
}
|
},
|
watch: {
|
statisticalMethod(val) {
|
this.query({
|
...this.params,
|
})
|
this.queryChart({
|
...this.params,
|
})
|
}
|
},
|
methods: {
|
init(params) {
|
this.params = params
|
this.getTime({
|
endDate: params.endDate,
|
startDate: params.startDate,
|
statisticalMethod: this.statisticalMethod
|
}).then(res => {
|
this.query({
|
...params,
|
statisticalMethod: this.statisticalMethod
|
})
|
this.queryChart({
|
...params,
|
statisticalMethod: this.statisticalMethod
|
})
|
})
|
|
},
|
getTime(data) {
|
return Promise.resolve()
|
// return this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {
|
// ...data
|
// }).then(res => {
|
// if (res.code === 200) {
|
// this.btnList = res.data
|
// }
|
// })
|
},
|
queryChart(data) {
|
let params = {
|
size: -1
|
}
|
let dataSend = {
|
...data,
|
queryType: 0,
|
statisticalMethod: this.statisticalMethod
|
}
|
// console.log(this.option2.series, '>>>>>>>>>>???')
|
try {
|
this.option2.dataset.source = []
|
this.option2.series = []
|
} catch (error) {
|
|
}
|
return this.$HTTP.post(this.url, dataSend, { params }).then(res => {
|
this.chartsData = res.data.items.records
|
let option2 = {
|
...this.options
|
}
|
option2.series = []
|
let source1 = ['product']
|
let row = res.data.items.records[0]
|
Object.values(row.nameData).forEach(v => {
|
option2.series.push({
|
type: 'bar',
|
})
|
source1.push(v)
|
})
|
|
option2.dataset.source = [source1]
|
res.data.items.records.forEach(v => {
|
let current = [v.id]
|
Object.keys(v.nameData).forEach(key => {
|
current.push(this.resFn(v.data[key]))
|
// current.push((v.data[key] - 0) * 100)
|
})
|
option2.dataset.source.push(current)
|
});
|
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 => {
|
let row = res.data.items?.records[0]?.data || {}
|
this.cols = Object.keys(row)
|
console.log(this.cols)
|
return {
|
...res,
|
data: res.data.items
|
}
|
})
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
