<!--
|
* @Date: 2024-04-18 21:52:18
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-06-21 00:15:44
|
* @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="change(item)" :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" v-if="option2.title" />
|
</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';
|
import moment from 'moment'
|
export default {
|
props: {
|
url: {
|
default: '/api/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: {},
|
btnListNew: []
|
}
|
},
|
watch: {
|
statisticalMethod(val) {
|
// this.query({
|
// ...this.params,
|
// })
|
// this.queryChart({
|
// ...this.params,
|
// })
|
}
|
},
|
methods: {
|
change(item) {
|
this.statisticalMethod = item.value
|
this.init({
|
...this.params
|
})
|
},
|
init(params) {
|
this.params = params
|
this.getTime({
|
endDate: params.endDate,
|
startDate: params.startDate,
|
statisticalMethod: this.statisticalMethod
|
}).then(res => {
|
if (!res?.length) return
|
let startDate = Math.min(...res?.map(v => new Date(v.startDate).getTime()))
|
let endDate = Math.max(...res?.map(v => new Date(v.endDate).getTime()))
|
console.log('------')
|
let data = {
|
...params,
|
statisticalMethod: this.statisticalMethod
|
}
|
if (this.statisticalMethod !== 'Day') {
|
data = {
|
...data,
|
startDate: moment(startDate).format('YYYY-MM-DD'),
|
endDate: moment(endDate).format('YYYY-MM-DD'),
|
statisticalMethod: this.statisticalMethod
|
}
|
}
|
console.log(startDate, endDate)
|
this.query({
|
...data
|
})
|
this.queryChart({
|
...data,
|
// statisticalMethod: this.statisticalMethod
|
})
|
})
|
|
},
|
getTime(data) {
|
//return Promise.resolve()
|
return this.$HTTP.post('/api/mdc/efficiency-analysis/interval', {
|
...data
|
}).then(res => {
|
if (res.code === 200) {
|
this.btnListNew = res.data
|
if (data.statisticalMethod === 'MONTH') {
|
return res?.data?.map(v => {
|
return {
|
...v,
|
startDate: moment(v.id).startOf('month').format('YYYY-MM-DD'),
|
endDate: moment(v.id).endOf('month').format('YYYY-MM-DD')
|
}
|
})
|
} else if (data.statisticalMethod === 'DAY') {
|
return res?.data?.map(v => {
|
return {
|
...v,
|
startDate: v.id,
|
endDate: v.id
|
}
|
})
|
} else {
|
return res.data
|
}
|
}
|
})
|
},
|
queryChart(data) {
|
let params = {
|
size: -1
|
}
|
let dataSend = {
|
...data,
|
queryType: 0,
|
statisticalMethod: this.statisticalMethod
|
}
|
this.option2 = {}
|
return this.$HTTP.post(this.url, dataSend, { params }).then(res => {
|
this.chartsData = res.data.items.records
|
let option2 = {
|
// legend: {
|
// type: 'plain',
|
// },
|
title: {
|
text: '统计图表',
|
subtext: '',
|
},
|
grid: {
|
top: '80px'
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
xAxis: {
|
type: 'category',
|
axisLabel: {
|
interval: 'auto',
|
}
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
formatter: (value) => {
|
return value + '%'
|
}
|
},
|
},
|
dataZoom: [
|
{ type: 'slider' }
|
],
|
dataset: {
|
source: []
|
},
|
...this.options,
|
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(res) {
|
this.apiObj = {
|
get: async (data) => {
|
let params = {
|
current: data.current,
|
size: data.size
|
}
|
let dataSend = {
|
...res,
|
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>
|
