1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

 src/views/mdc/components/TimeAlarm.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-18 21:52:18
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-21 19:17:55
 * @LastEditTime: 2024-04-22 22:32:05
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/components/TimeAlarm.vue
-->
<template>
@@ -12,32 +12,51 @@
        <el-col style="margin-top: 12px;">
            <el-collapse v-model="active" accordion>
                <el-collapse-item title="日 按日查看" name="1">
                    <el-button-group>
                    <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-if="active == 1" style="width:100%" height="300px" :option="dayCharts"></scEcharts>
                    <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>
                    <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-if="active == 2" style="width:100%" height="300px" :option="weekCharts"></scEcharts>
                    <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>
                    <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-if="active == 3" height="300px" :option="monthCharts"></scEcharts>

                    <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>
@@ -60,7 +79,10 @@
    data() {
        return {
            sheetUrl: '/api/blade-mdc/alarm/data-sheet',
            apiObj: '',
            apiObj0: '',
            apiObj1: '',
            apiObj2: '',
            isShowTable: false,
            params: {
                enums: "DAY",
                month: 0,
@@ -70,7 +92,7 @@
                workstationId: "",
                year: 0,
            },
            active: '1',
            active: ['1', '2', '3'],
            valueDay: '',
            valueWeek: '',
            valueMonth: '',
@@ -164,13 +186,12 @@
                year: row.year,
                shiftIndex: 1,
                workstationId: this.params.workstationId,
            }).then(res => {
            }, 0).then(res => {
                this.dayCharts = res
            })
        },
        queryWeek(row) {
            this.valueWeek = row.value
            console.log(row)
            this.query({
                enums: "WEEK",
                queryTime: this.valueDay,
@@ -178,7 +199,7 @@
                month: row.month,
                year: row.year,
                workstationId: this.params.workstationId,
            }).then(res => {
            }, 1).then(res => {
                this.weekCharts = res
            })
        },
@@ -191,13 +212,13 @@
                month: row.month,
                year: row.year,
                workstationId: this.params.workstationId,
            }).then(res => {
            }, 2).then(res => {
                this.monthCharts = res
            })
        },
        query(data) {
            console.log(data)
            this.queryTableData(data)
        query(data, flag) {
            console.log('--------')
            this.queryTableData(data, flag)
            return this.$HTTP.post(this.url, data, {}).then(res => {
                return this.setOptions(res.data.res)
            })
@@ -235,17 +256,20 @@
                }]
            }
        },
        queryTableData() {
            // 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
            //         }
            //     })
            // })
        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()
        }
    }
}