<!--
|
* @Date: 2024-04-18 21:52:18
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-04-22 22:32:05
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/TimeAlarm.vue
|
-->
|
<template>
|
<el-row>
|
<el-col>
|
<el-switch v-model="isShowTable" class="mb-2" active-text="数据表" inactive-text="统计图" />
|
</el-col>
|
<el-col style="margin-top: 12px;">
|
<el-collapse v-model="active" accordion>
|
<el-collapse-item title="日 按日查看" name="1">
|
<el-button-group style="margin-bottom: 14px">
|
<el-button size="small" @click="queryDay(item)" :type="valueDay == item.value ? 'primary' : ''"
|
v-for="item in btnListDay" :key="item.value">{{
|
item.label
|
}}</el-button>
|
</el-button-group>
|
<scEcharts v-show="!isShowTable" style="width:100%" height="300px" :option="dayCharts">
|
</scEcharts>
|
<scTable v-show="isShowTable" ref="table0" row-key="id" border :params="params" :apiObj="apiObj0"
|
stripe>
|
<el-table-column prop="alarmCode" label="报警代码" />
|
<el-table-column prop="alarmMsg" label="报警信息" />
|
<el-table-column prop="count" label="报警次数" />
|
</scTable>
|
</el-collapse-item>
|
<el-collapse-item title="周 按周查看" name="2">
|
<el-button-group style="margin-bottom: 14px">
|
<el-button size="small" @click="queryWeek(item)"
|
:type="valueWeek == item.value ? 'primary' : ''" v-for="item in btnListWeek"
|
:key="item.value">{{ item.label
|
}}</el-button>
|
</el-button-group>
|
<scEcharts v-show="!isShowTable" style="width:100%" height="300px" :option="weekCharts">
|
</scEcharts>
|
<scTable v-show="isShowTable" ref="table1" row-key="id" border :params="params" :apiObj="apiObj1"
|
stripe>
|
<el-table-column prop="alarmCode" label="报警代码" />
|
<el-table-column prop="alarmMsg" label="报警信息" />
|
<el-table-column prop="count" label="报警次数" />
|
</scTable>
|
</el-collapse-item>
|
<el-collapse-item title="月 按月查看" name="3">
|
<el-button-group style="margin-bottom: 14px">
|
<el-button size="small" @click="queryMonth(item)"
|
:type="valueMonth == item.value ? 'primary' : ''" v-for="item in btnListMonth"
|
:key="item.value">{{ item.label
|
}}</el-button>
|
</el-button-group>
|
<scEcharts v-show="!isShowTable" height="300px" :option="monthCharts"></scEcharts>
|
<scTable v-show="isShowTable" ref="table2" row-key="id" border :params="params" :apiObj="apiObj2"
|
stripe>
|
<el-table-column prop="alarmCode" label="报警代码" />
|
<el-table-column prop="alarmMsg" label="报警信息" />
|
<el-table-column prop="count" label="报警次数" />
|
</scTable>
|
</el-collapse-item>
|
</el-collapse>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
import scEcharts from '@/components/scEcharts';
|
import moment from 'moment';
|
export default {
|
props: {
|
url: {
|
default: '',
|
type: String,
|
}
|
},
|
components: {
|
scEcharts
|
},
|
data() {
|
return {
|
sheetUrl: '/api/blade-mdc/alarm/data-sheet',
|
apiObj0: '',
|
apiObj1: '',
|
apiObj2: '',
|
isShowTable: false,
|
params: {
|
enums: "DAY",
|
month: 0,
|
queryTime: "", //2024-05-21
|
shiftIndex: 1,
|
week: 0,
|
workstationId: "",
|
year: 0,
|
},
|
active: ['1', '2', '3'],
|
valueDay: '',
|
valueWeek: '',
|
valueMonth: '',
|
btnListDay: [],
|
btnListWeek: [],
|
btnListMonth: [],
|
dayCharts: {},
|
weekCharts: {},
|
monthCharts: {},
|
}
|
},
|
watch: {
|
|
},
|
methods: {
|
init(params) {
|
this.params.workstationId = params.workstationId.toString()
|
this.getTime({
|
endDate: params.endDate,
|
startDate: params.startDate,
|
}).then(res => {
|
|
})
|
|
},
|
getTime(data) {
|
return Promise.all([
|
this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {
|
...data,
|
statisticalMethod: "DAY"
|
}).then(res => {
|
if (res.code === 200) {
|
this.btnListDay = res.data.map(item => ({
|
label: item.title,
|
value: item.id,
|
startDate: item.startDate,
|
endDate: item.endDate,
|
week: moment(item.id).week(),
|
month: moment(item.id).month() + 1,
|
year: moment(item.id).year()
|
})).reverse()
|
}
|
this.queryDay(this.btnListDay[0])
|
}),
|
this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {
|
...data,
|
statisticalMethod: "WEEK"
|
}).then(res => {
|
if (res.code === 200) {
|
this.btnListWeek = res.data.map(item => ({
|
label: item.title,
|
value: item.id,
|
startDate: item.startDate,
|
endDate: item.endDate,
|
week: moment(item.startDate).week(),
|
month: moment(item.startDate).month() + 1,
|
year: moment(item.startDate).year()
|
})).reverse()
|
|
}
|
}),
|
this.$HTTP.post('/api/blade-mdc/efficiency-analysis/interval', {
|
...data,
|
statisticalMethod: "MONTH"
|
}).then(res => {
|
if (res.code === 200) {
|
this.btnListMonth = res.data.map(item => ({
|
label: item.title,
|
value: item.id,
|
startDate: item.startDate,
|
endDate: item.endDate,
|
week: moment(item.id + '-1').week(),
|
month: moment(item.id + '-1').month() + 1,
|
year: moment(item.id + '-1').year()
|
})).reverse()
|
|
}
|
})
|
]).then(() => {
|
this.queryWeek(this.btnListWeek[0])
|
this.queryMonth(this.btnListMonth[0])
|
})
|
},
|
queryDay(row) {
|
this.valueDay = row.value
|
this.query({
|
enums: "DAY",
|
queryTime: row.value, //2024-05-21
|
week: row.week,
|
month: row.month,
|
year: row.year,
|
shiftIndex: 1,
|
workstationId: this.params.workstationId,
|
}, 0).then(res => {
|
this.dayCharts = res
|
})
|
},
|
queryWeek(row) {
|
this.valueWeek = row.value
|
this.query({
|
enums: "WEEK",
|
queryTime: this.valueDay,
|
week: row.week,
|
month: row.month,
|
year: row.year,
|
workstationId: this.params.workstationId,
|
}, 1).then(res => {
|
this.weekCharts = res
|
})
|
},
|
queryMonth(row) {
|
this.valueMonth = row.value
|
this.query({
|
enums: "MONTH",
|
queryTime: this.valueDay,
|
week: row.week,
|
month: row.month,
|
year: row.year,
|
workstationId: this.params.workstationId,
|
}, 2).then(res => {
|
this.monthCharts = res
|
})
|
},
|
query(data, flag) {
|
console.log('--------')
|
this.queryTableData(data, flag)
|
return this.$HTTP.post(this.url, data, {}).then(res => {
|
return this.setOptions(res.data.res)
|
})
|
},
|
setOptions(obj) {
|
let source = Object.keys(obj)
|
let data = Object.values(obj)
|
return {
|
legend: {
|
type: 'plain',
|
},
|
title: {
|
text: '',
|
subtext: '',
|
},
|
grid: {
|
top: '80px'
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
xAxis: {
|
type: 'category',
|
data: source
|
},
|
yAxis: {
|
type: 'value'
|
},
|
dataZoom: [
|
{ type: 'slider' }
|
],
|
series: [{
|
type: 'bar',
|
data
|
}]
|
}
|
},
|
queryTableData(dataConf, flag) {
|
console.log(dataConf, '>>>>>>>')
|
this[`apiObj${flag}`] = {
|
get: async (data) => {
|
let params = {
|
current: data.current,
|
size: data.size
|
}
|
return await this.$HTTP.post(this.sheetUrl, dataConf, { params }).then(res => {
|
return res
|
})
|
}
|
}
|
// this.$refs[`table${flag}`].reload()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
