<!--
|
* @Date: 2024-04-18 21:52:18
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-05-14 20:42:32
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/ShiftAlarm.vue
|
-->
|
<template>
|
<el-main>
|
<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>
|
<el-switch v-model="isShowTable" class="mb-2" active-text="数据表" inactive-text="统计图" />
|
</el-col>
|
|
|
</el-row>
|
<el-row v-show="!isShowTable">
|
<el-col style="margin-top: 12px;" v-for="item in chartsData" :key="item.shiftIndex">
|
<el-card shadow="never">
|
<template #header>
|
<div class="card-header">
|
<span>{{ item.title }}</span>
|
</div>
|
</template>
|
<scEcharts height="300px" :option="item.option"></scEcharts>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
|
<el-row v-show="isShowTable" v-for="(item, index) in tableData" :key="index">
|
<el-col style="margin-top: 12px;">
|
<div>{{ item.title }}</div>
|
<el-table ref="table" row-key="id" border :data="item.data" stripe>
|
<el-table-column prop="alarmCode" label="报警代码" />
|
<el-table-column prop="alarmMsg" label="报警信息" />
|
<el-table-column prop="count" label="报警次数" />
|
</el-table>
|
</el-col>
|
</el-row>
|
</el-main>
|
|
</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-shift-sheet',
|
isShowTable: false,
|
params: {
|
enums: "SHIFT",
|
month: 0,
|
queryTime: "2024-04-18",
|
shiftIndex: 1,
|
week: 0,
|
workstationId: "",
|
year: 0,
|
},
|
btnList: [],
|
btnListActive: '',
|
tableData: [],
|
chartsData: [
|
],
|
}
|
},
|
watch: {
|
btnListActive(val) {
|
this.queryChart({
|
...this.params,
|
})
|
}
|
},
|
methods: {
|
init(params) {
|
this.btnListActive = ''
|
console.log('++++++')
|
this.params = {
|
...this.params,
|
workstationId: params.workstationId.toString()
|
}
|
this.getTime({
|
endDate: params.endDate,
|
startDate: params.startDate,
|
}).then(res => {
|
})
|
|
},
|
getTime(data) {
|
return new Promise(resolve => {
|
let arr = []
|
let date = moment(data.startDate)
|
arr.push({
|
title: date.format('YYYY-MM-DD'),
|
id: date.format('YYYY-MM-DD')
|
})
|
while (date.format('YYYY-MM-DD') < data.endDate) {
|
date = date.add(1, 'd')
|
arr.push({
|
title: date.format('YYYY-MM-DD'),
|
id: date.format('YYYY-MM-DD')
|
})
|
}
|
this.btnList = arr;
|
this.btnListActive = arr[0].id
|
resolve(arr)
|
})
|
},
|
queryChart(data) {
|
let dataSend = {
|
...this.params,
|
queryTime: this.btnListActive,
|
}
|
this.queryTableData(dataSend)
|
return this.$HTTP.post(this.url, dataSend, {}).then(res => {
|
this.chartsData = res.data.map(item => {
|
return {
|
title: `班次${item.shiftIndex} ${item.shiftIndexName}`,
|
shiftName: item.shiftName,
|
shiftIndexName: item.shiftIndexName,
|
option: this.setOptions(item.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(data) {
|
return this.$HTTP.post(this.sheetUrl, data, {}).then(res => {
|
this.tableData = res.data.map(item => {
|
return {
|
title: `班次${item.shiftIndex}`,
|
shiftName: item.shiftName,
|
shiftIndex: item.shiftIndex,
|
data: item.alarmDataSheetVOList
|
}
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
