告警功能添加

whyczyk

2022-02-19 558f701a0e9bcab4d6633c34bfdf3dccfd5dab66

告警功能添加

 package-lock.json

@@ -1105,9 +1105,9 @@
      "dev": true
    },
    "@popperjs/core": {
      "version": "2.9.2",
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
      "version": "2.11.2",
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
    },
    "@soda/friendly-errors-webpack-plugin": {
      "version": "1.7.1",
@@ -1404,9 +1404,9 @@
      }
    },
    "@vant/icons": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.6.0.tgz",
      "integrity": "sha512-4Hvq4tl4grCOJLZ0e8ZaivBV8xOcmTPmTT8BDkTrEIKqnDowRFDdsXxcHECzWmbmMx+CYGdngvd2Cq8YR9DfKA=="
      "version": "1.7.3",
      "resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.7.3.tgz",
      "integrity": "sha512-tW4EqzxN4kXw1rnlnQJQHofEifPbt/gECOWiibomht8QLyvoGuE4iUmDFS288dJ07ZjuTy0bhdABj0SENo2fmQ=="
    },
    "@vant/popperjs": {
      "version": "1.1.0",
@@ -10326,13 +10326,13 @@
      }
    },
    "vant": {
      "version": "2.12.24",
      "resolved": "https://registry.npmjs.org/vant/-/vant-2.12.24.tgz",
      "integrity": "sha512-iPhY0Dw/O2tZ7E2UygZx92hqFy4UXjmalmfDQ7jEAfpQO1XYXWB3w6tUbxpXNQ6LgxHnXDwA9LXkjEvxEphQxQ==",
      "version": "2.12.44",
      "resolved": "https://registry.npmjs.org/vant/-/vant-2.12.44.tgz",
      "integrity": "sha512-0ZRq0v+26Ny6Ezt3M1GEN5KLEh6vVp6rBmQENi6jd0HejgpwfCRUWTFCH9sQqB3LhfxJ7ywHmrLAn5oj1eHozA==",
      "requires": {
        "@babel/runtime": "7.x",
        "@vant/icons": "^1.5.3",
        "@vant/popperjs": "^1.0.0",
        "@vant/icons": "^1.7.1",
        "@vant/popperjs": "^1.1.0",
        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
        "vue-lazyload": "1.2.3"
      }

 package.json

@@ -11,7 +11,7 @@
    "core-js": "^3.6.5",
    "echarts": "^4.8.0",
    "js-md5": "^0.7.3",
    "vant": "^2.8.1",
    "vant": "^2.12.44",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"

 src/assets/js/tools/getDevAlarm.js

New file
@@ -0,0 +1,90 @@
function getDevAlarm() {
    return {
        types: [
            {
                value: "119020",
                label: "通信故障"
            },
            {
                value: "618501",
                label: "继电器K1告警"
            },
            {
                value: "618502",
                label: "通讯告警"
            },
            {
                value: "618503",
                label: "设备过温告警"
            },
            {
                value: "618504",
                label: "二极管D1告警"
            },
            {
                value: "618505",
                label: "干接点告警"
            },
            {
                value: "618506",
                label: "异常核容或养护终止告警"
            },
            {
                value: "119023",
                label: "续航不足告警"
            },
            {
                value: "119024",
                label: "基站停电告警"
            },
            {
                value: "119025",
                label: "基站发电告警"
            },
            {
                value: "119026",
                label: "基站掉站告警"
            },
            {
                value: "119027",
                label: "基站开门告警"
            },
            {
                value: "119028",
                label: "设备高温告警"
            },
            {
                value: "119032",
                label: "设备SD卡故障"
            },
            {
                value: "119033",
                label: "采集线告警"
            },
            {
                value: "119034",
                label: "停电电流均衡告警"
            },
        ],
        levels: [
            {
                value: 1,
                label: '一级告警'
            },
            {
                value: 2,
                label: '二级告警'
            },
            {
                value: 3,
                label: '三级告警'
            },
            {
                value: 4,
                label: '四级告警'
            },
        ],
    };
}

export default getDevAlarm;

 src/assets/js/tools/getLabelByValue.js

New file
@@ -0,0 +1,13 @@
function getLabelByValue(value, list) {
    let result = 0;
    for(let i=0; i<list.length; i++) {
        let item = list[i];
        if(item.value == value) {
            result = item.label;
            break;
        }
    }
    return result;
}

export default getLabelByValue;

 src/main.js

@@ -43,6 +43,7 @@
  SwipeCell,
  Cascader,
  TreeSelect,
  DatetimePicker,
} from 'vant';

import App from './App.vue'
@@ -55,7 +56,7 @@

Vue.config.productionTip = false

Vue.use(Toast).use(Notify).use(Picker).use(Form).use(Image).use(Dialog).use(Tabbar).use(TabbarItem).use(CellGroup).use(Cell).use(Icon).use(Button).use(NavBar).use(Grid).use(GridItem).use(Row).use(Col).use(Collapse).use(CollapseItem).use(Steps).use(Step).use(Divider).use(Switch).use(Tag).use(Search).use(Field).use(Uploader).use(Popup).use(CheckboxGroup).use(Checkbox).use(PullRefresh).use(ActionSheet).use(List).use(Tab).use(Tabs).use(Empty).use(ImagePreview).use(IndexBar).use(IndexAnchor).use(SwipeCell).use(Cascader).use(TreeSelect);
Vue.use(Toast).use(Notify).use(Picker).use(Form).use(Image).use(Dialog).use(Tabbar).use(TabbarItem).use(CellGroup).use(Cell).use(Icon).use(Button).use(NavBar).use(Grid).use(GridItem).use(Row).use(Col).use(Collapse).use(CollapseItem).use(Steps).use(Step).use(Divider).use(Switch).use(Tag).use(Search).use(Field).use(Uploader).use(Popup).use(CheckboxGroup).use(Checkbox).use(PullRefresh).use(ActionSheet).use(List).use(Tab).use(Tabs).use(Empty).use(ImagePreview).use(IndexBar).use(IndexAnchor).use(SwipeCell).use(Cascader).use(TreeSelect).use(DatetimePicker);

Vue.prototype.$G = G;
Vue.prototype.$notify = Notify;

 src/pages/alarmMager/batteryrHistoryquery.vue

New file
@@ -0,0 +1,630 @@
<template>
    <div class="indexWarp">
        <van-nav-bar title="电池告警历史查询" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder right-text="筛选" @click-right="showPopup=true">
        </van-nav-bar>
        <van-pull-refresh v-model="tab.refreshing" @refresh="onRefresh(tab)">
            <van-list v-model="tab.loading" :finished="tab.finished" finished-text="没有更多了" @load="loadData(tab)">
                <div class="pd-24">
                    <div class="card m-b-24" v-for="(item,i) in tab.listData" :key="i">
                        <div class="commonTitle cardTitle">
                            {{item.battery1}}
                        </div>
                        <div class="commonTitle">
                            <div class="label">电池组名称：</div>
                            <div class="text">
                                {{item.tes1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">告警名称：</div>
                            <div class="text">
                                {{item.tester1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">单体编号：</div>
                            <div class="text">
                                {{item.current1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">告警值：</div>
                            <div class="text">
                                {{item.capacity1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">告警等级：</div>
                            <div class="text">
                                {{item.monomer1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">告警开始时间：</div>
                            <div class="text">
                                {{item.start1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">告警确认时间：</div>
                            <div class="text">
                                {{item.alarm1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">告警结束时间：</div>
                            <div class="text">
                                {{item.end1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <van-button size="mini" color="#f3535f" @click="deleteUser(item)">删除</van-button>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>

        <van-popup v-model="showPopup" position="right" :style="{ width: '90%' ,height:'100%'}">
            <div class="card">
                <van-field v-model="selectValue1" is-link readonly name="picker" label="维护区：" placeholder="请选择维护区" @click="showPicker1 = true" />
                <van-field v-model="selectValue2" is-link readonly name="picker" label="机房站点：" placeholder="请选择机房站点" @click="showPicker2 = true" />
                <van-field v-model="selectLable3" is-link readonly name="picker" label="蓄电池组：" placeholder="请选择蓄电池组" @click="showPicker3 = true" />
                <van-field v-model="startDrsj" is-link readonly name="picker" label="开始日期：" placeholder="请选择开始日期" @click="showTimePopup1 = true" />
                <van-field v-model="endDrsj" is-link readonly name="picker" label="结束日期：" placeholder="请选择结束日期" @click="showTimePopup2 = true" />
                <van-field label="告警条件过滤" class="lineInput">
                    <template #input>
                        <van-checkbox v-model="checkbox.usr_id.bol" shape="square" class="lineCheckBox">在线电压</van-checkbox>
                        <van-checkbox v-model="checkbox.fault_type_id.bol" shape="square" class="lineCheckBox">组端电压</van-checkbox>
                        <van-checkbox v-model="checkbox.uname.bol" shape="square" class="lineCheckBox">漏液电压</van-checkbox>
                        <van-checkbox v-model="checkbox.fault_level.bol" shape="square" class="lineCheckBox">充电电流</van-checkbox>
                        <van-checkbox v-model="checkbox.record_uid.bol" shape="square" class="lineCheckBox">放电电流</van-checkbox>
                        <van-checkbox v-model="checkbox.maint_type_id.bol" shape="square" class="lineCheckBox">单体电压</van-checkbox>
                        <van-checkbox v-model="checkbox.maint_close.bol" shape="square" class="lineCheckBox">单体内阻</van-checkbox>
                        <van-checkbox v-model="checkbox.maint_done.bol" shape="square" class="lineCheckBox">单体温度</van-checkbox>
                        <van-checkbox v-model="checkbox.fault_type.bol" shape="square" class="lineCheckBox">预估容量</van-checkbox>
                    </template>
                </van-field>
                <van-field label="告警阀值过滤" class="lineInput">
                    <template #input>
                        <van-checkbox v-model="checkbox.alm_id.bol" shape="square" class="lineCheckBox">上限告警</van-checkbox>
                        <van-checkbox v-model="checkbox.alm_signal_id.bol" shape="square" class="lineCheckBox">下限告警</van-checkbox>
                    </template>
                </van-field>
                <van-field label="告警等级过滤" class="lineInput">
                    <template #input>
                        <van-checkbox v-model="checkbox.Level_one_warn.bol" shape="square" class="lineCheckBox">一级告警</van-checkbox>
                        <van-checkbox v-model="checkbox.Level_two_warn.bol" shape="square" class="lineCheckBox">二级告警</van-checkbox>
                        <van-checkbox v-model="checkbox.master_audit.bol" shape="square" class="lineCheckBox">三级告警</van-checkbox>
                        <van-checkbox v-model="checkbox.appoint_uid.bol" shape="square" class="lineCheckBox">四级告警</van-checkbox>
                    </template>
                </van-field>
                <div class="subBtn" @click="selectScreen">保存</div>
            </div>
        </van-popup>

        <van-popup v-model="showPicker1" round position="bottom">
            <van-picker show-toolbar :columns="vindicate" value-key="label" @confirm="changeSelect1" @cancel="showPicker1 = false" title="维护区" />
        </van-popup>
        <van-popup v-model="showPicker2" round position="bottom">
            <van-picker show-toolbar :columns="newRoms" value-key="label" @confirm="storageBatterys" @cancel="showPicker2 = false" title="机房站点" />
        </van-popup>
        <van-popup v-model="showPicker3" round position="bottom">
            <van-picker show-toolbar :columns="options" value-key="BattGroupName" @confirm="selectBatter" @cancel="showPicker3 = false" title="蓄电池组" />
        </van-popup>
        <van-popup v-model="showTimePopup1" round position="bottom">
            <van-datetime-picker v-model="startdatetime" type="date" :min-date="minDate" :max-date="maxDate" title="告警开始日期" @cancel="show = false" @confirm="confirmPicker1" />
        </van-popup>
        <van-popup v-model="showTimePopup2" round position="bottom">
            <van-datetime-picker v-model="enddatetime" type="date" :min-date="minDate" :max-date="maxDate" title="告警开始日期" @cancel="show = false" @confirm="confirmPicker2" />
        </van-popup>
        <div class="refBtn" @click="onRefresh">
            <van-icon name="replay" />
        </div>
    </div>
</template>

<script>
import {
    dataType /* 维护区 */,
    roomsStation /* 机房站点 */,
    batterySeach /* 蓄电池组 */,
    historySeroom /*告警信息 */,
    hisDelet /*删除 */
} from "@/pages/alarmMager/js/api"
export default {
    components: {},
    data() {
        let thistime = new Date();
        let yy = thistime.getFullYear();
        let MM = thistime.getMonth() + 1;
        let DD = thistime.getDate();
        let day1 = yy + "-" + MM + "-" + DD;
        return {
            showPopup: false,
            showPicker1: false,
            showPicker2: false,
            showPicker3: false,
            /* 维护区 */
            vindicate: [],
            /* 机房站点 */
            newRoms: [],
            /* 蓄电池租 */
            selectValue1: "",
            selectValue2: "",
            selectValue3: 0,
            selectLable3: "",
            options: [],
            checkbox: {
                usr_id: {
                    bol: true,
                    value1: "119001",
                    value2: 0,
                },
                /* 在线电压 */
                fault_type_id: {
                    bol: true,
                    value1: "119002",
                    value2: 0,
                } /* 组端电压 */,
                uname: {
                    bol: true,
                    value1: "119012",
                    value2: 0,
                },
                /* 漏液电压 */
                fault_level: {
                    bol: true,
                    value1: "119003",
                    value2: 0,
                } /* 充电电流 */,
                record_uid: {
                    bol: true,
                    value1: "119004",
                    value2: 0,
                } /* 放电电流 */,
                fault_type: {
                    bol: true,
                    value1: "119013",
                    value2: 0,
                }/* 单体预估容量告警 */,
                Level_one_warn: {
                    bol: true,
                    value1: "1",
                    value2: 0,
                } /*一级警告 */,
                Level_two_warn: {
                    bol: true,
                    value1: "2",
                    value2: 0,
                } /* 二级警告 */,
                alm_id: {
                    bol: true,
                    value1: "100",
                    value2: 0,
                } /* 上限告警 */,
                maint_type_id: {
                    bol: true,
                    value1: "119005",
                    value2: 0,
                } /* 单体电压 */,
                maint_close: {
                    bol: true,
                    value1: "119007",
                    value2: 0,
                } /* 单体内阻 */,
                maint_done: {
                    bol: true,
                    value1: "119006",
                    value2: 0,
                } /* 单体温度 */,
                master_audit: {
                    bol: true,
                    value1: "3",
                    value2: 0,
                } /*  三级告警 */,
                appoint_uid: {
                    bol: true,
                    value1: "4",
                    value2: 0,
                } /* 四级告警 */,
                alm_signal_id: {
                    bol: true,
                    value1: "100",
                    value2: 0,
                } /* 下限告警 */,
            },
            tab: {
                title: '未确认告警',
                listData: [],
                loading: false,
                finished: false,
                refreshing: false,
                page: {
                    pageSize: 6,
                    pageCurr: 0
                }
            },
            /* 日期 */
            startDrsj: "2000-1-1",
            startdatetime: new Date(2000, 0, 1),
            endDrsj: day1,
            enddatetime: new Date(yy, MM - 1, DD),
            minDate: new Date(2000, 0, 1),
            maxDate: new Date(yy + 5, 0, 1),
            showTimePopup1: false,
            showTimePopup2: false,
        }
    },
    mounted() {
        this.vindicateData(); /* 维护区 */
        this.computerSite(); /*机房站点 */
        this.storageBatterys(); /* 蓄电池组 */
    },
    methods: {
        /* 维护区 */
        async vindicateData() {
            const resType = await dataType();
            let typeList = JSON.parse(resType.data.result).data.map((item) => {
                return {
                    label: item,
                    value: item,
                };
            });
            let vindicate = typeList.map((item) => {
                return item;
            });
            this.vindicate = vindicate;
        },
        /* 机房站点 */
        async computerSite() {
            const roomsSeation = await roomsStation({
                UNote: this.selectValue1,
            });
            if (roomsSeation.data.result) {
                let newRoms = JSON.parse(roomsSeation.data.result).data.map((item) => {
                    return {
                        label: item,
                        value: item,
                    };
                });
                this.newRoms = newRoms;
            }
        },
        /* 蓄电池组 */
        async storageBatterys(value) {
            if (value) {
                this.selectValue2 = value.value
            }
            // 初始化值
            this.selectValue3 = 0;
            this.selectLable3 = "";
            this.showPicker2 = false
            // 构造查询条件
            const batteryss = await batterySeach({
                UNote: this.selectValue1,
                UName: this.selectValue2,
            });
            if (batteryss.data.result) {
                let options = JSON.parse(batteryss.data.result).data.map((item) => {
                    item.BattGroupName = `${item.BattGroupName}-${item.MonCount}节`;
                    return item;
                });
                this.options = options;
            }
        },
        changeSelect1(value) {
            if (value) {
                this.selectValue1 = value.value
            }
            this.selectValue2 = "";
            this.selectValue3 = 0;
            this.selectLable3 = "";
            this.computerSite(); /*机房站点 */
            this.storageBatterys(); /* 蓄电池组 */
            this.showPicker1 = false
        },
        //选择电池组
        selectBatter(value) {
            if (value) {
                this.selectValue3 = value.BattGroupId
                this.selectLable3 = value.BattGroupName
            }
            this.showPicker3 = false

            // 查询告警信息
            this.loadData();
        },
        selectScreen() {
            this.showPopup = false
            this.onRefresh(this.tab)
        },
        //请求数据总触发
        loadData(tab) {
            if (tab) {
                this.paramsAlram(tab)
            } else {
                this.paramsAlram(this.tab)
            }
        },
        //区管理员请求数据
        paramsAlram(tab) {
            // 将 loading 设置为 true，表示处于加载状态
            tab.loading = true;
            tab.page.pageCurr++
            let params = {};
            Object.keys(this.checkbox).forEach((item, index) => {
                if (this.checkbox[item].bol) {
                    params[item] = this.checkbox[item].value1;
                } else {
                    params[item] = this.checkbox[item].value2;
                }
            });
            // 一级和二级告警
            params.num = this.checkbox.Level_one_warn.bol ? 1 : 0;
            params.BattGroupId = this.checkbox.Level_two_warn.bol ? 2 : 0;
            // 上限和下限告警
            params.alm_id = this.checkbox.alm_id.bol ? 1 : 100;
            params.alm_signal_id = this.checkbox.alm_signal_id.bol ? 0 : 100;
            let postData = {
                page: {
                    pageSize: tab.page.pageSize,
                    pageCurr: tab.page.pageCurr,
                    pageAll: 0
                },
                binf: {
                    StationName1: this.selectValue1,
                    StationName: this.selectValue2,
                    BattGroupId: this.selectValue3 ? this.selectValue3 : 0,
                },
                mainf: {
                    usr_id: params.usr_id,
                    fault_type_id: params.fault_type_id,
                    uname: params.uname,
                    fault_level: params.fault_level,
                    record_uid: params.record_uid,
                    maint_type_id: params.maint_type_id,
                    maint_done: params.maint_done,
                    maint_close: params.maint_close,
                    appoint_uid: params.appoint_uid,
                    master_audit: params.master_audit,
                    num: params.num,
                    BattGroupId: params.BattGroupId,
                    master_id: "0",
                    fault_type: params.fault_type,
                },
                adata_H: {
                    MonNum: "0",
                    alm_id: params.alm_id,
                    alm_start_time: this.startDrsj + " 00:00:00",
                    alm_start_time1: this.endDrsj + " 23:59:59",
                    alm_signal_id: params.alm_signal_id,
                    Record_Id: "0"
                }
            }
            historySeroom(postData).then((res) => {
                const resData = JSON.parse(res.data.result);
                tab.loading = false;
                if (resData.data) {
                    let arr = resData.data.map((item, index) => {
                        item.index = index + 1;
                        return {
                            room1: item.index,
                            battery1: item.binf.StationName,
                            tes1: item.binf.BattGroupName,
                            tester1: item.binf.StationName8,
                            current1: item.adata_H.MonNum,
                            capacity1: item.adata_H.alm_value,
                            monomer1: item.binf.StationName9,
                            start1: item.adata_H.alm_start_time,
                            end1: item.adata_H.alm_end_time,
                            alarm1: item.adata_H.alm_confirmed_time,
                            num: item.adata_H.num
                        };
                    });
                    tab.listData.push(...arr)
                }
                if (tab.page.pageCurr >= resData.data[resData.data.length - 1].page.pageAll) {
                    tab.finished = true;
                } else {
                    tab.finished = false;
                }
            }).catch((err) => {
                tab.loading = false;
                tab.finished = true;
                console.log(err)
            });
        },
        deleteUser(value) {
            this.$dialog.confirm({
                title: '提示',
                message:
                    '确定删除这条告警记录吗, 是否继续?',
            }).then(() => {
                hisDelet([{
                    stationname: value.battery1,
                    num: value.num,
                    note: value.tester1
                }]).then((wk) => {
                    if (JSON.parse(wk.data.result).code !== 1) {
                        return this.$toast("删除失败");
                    }
                    this.onRefresh();
                    this.$toast("删除成功");
                }).catch((err) => {

                });
            }).catch(() => {
                // on cancel
            });
        },
        onRefresh(tab) {
            if (tab?.title) {
                // 清空列表数据
                tab.finished = false;
                tab.refreshing = false;
                tab.page = {
                    pageSize: 12,
                    pageCurr: 0
                }
                tab.listData = [];
                // 重新加载数据
                this.loadData(tab);
            } else {
                // 清空列表数据
                this.tab.finished = false;
                this.tab.refreshing = false;
                this.tab.page = {
                    pageSize: 12,
                    pageCurr: 0
                }
                this.tab.listData = [];
                // 重新加载数据
                this.loadData(this.tab);
            }
        },
        confirmPicker1(val) {
            let year = val.getFullYear()
            let month = val.getMonth() + 1
            let day = val.getDate()
            this.startDrsj = `${year}-${month}-${day}`
            this.showTimePopup1 = false
        },
        confirmPicker2(val) {
            let year = val.getFullYear()
            let month = val.getMonth() + 1
            let day = val.getDate()
            this.endDrsj = `${year}-${month}-${day}`
            this.showTimePopup2 = false
        }
    }
}
</script>

<style scoped>
.indexWarp {
    width: 100%;
    min-height: 100%;
    background: #f5f5f5;
}

.van-tabs {
    height: calc(100% - 92px);
    padding-top: 92px;
}

.van-tabs /deep/ .van-tabs__content {
    min-height: 100%;
    background: #f5f5f5;
}

.van-tabs /deep/ .van-tabs__wrap {
    position: fixed;
    left: 0;
    width: 100%;
    top: 92px;
    z-index: 9;
    border-bottom: 1px solid #ededed;
}

.pd-24 {
    padding: 24px;
}

.listWarp {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
}

.van-tabs /deep/ .van-cell__title {
    width: 90%;
}

.alarmTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #323233;
    font-size: 24px;
}

.alarmTitle .tag {
    font-size: 20px;
    margin-right: 8px;
    background-color: #4b88f9;
}

.time {
    color: #969799;
    font-size: 20px;
}

.card {
    background-color: #ffffff;
    border-radius: 16px;
    margin: 0 auto;
    width: 100%;
    padding: 24px;
    box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
}
.lineInput .lineCheckBox{
  margin-bottom: 8px;
}
.lineInput .lineCheckBox:nth-of-type(2n){
  margin-left: 18px;
}

.lineInput /deep/ .van-field__control--custom{
  flex-wrap: wrap;
}

.subBtn {
    flex: 1;
    height: 98px;
    background: #4b88f9;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 36px;
    margin-top: 48px;
}
.m-b-24{
  margin-bottom: 24px;
}
.commonTitle {
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 22px;
    display: flex;
}

.cardTitle {
    font-weight: bold;
}

.refBtn{
  box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
  width: 88px;
  height: 88px;
  position: fixed;
  right: 48px;
  bottom: 48px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4B88F9;
  font-size: 44px;
  font-weight: bold;
}
</style>

 src/pages/alarmMager/batteryrTimequery.vue

New file
@@ -0,0 +1,691 @@
<template>
    <div class="indexWarp">
        <van-nav-bar title="电池告警实时查询" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder right-text="筛选" @click-right="showPopup=true">
        </van-nav-bar>
        <van-tabs v-model="active" color="#4B88F9" animated swipeable background="#ffffff">
            <van-tab :title="tab.title" v-for="(tab,i) in tabs" :key="i">
                <van-pull-refresh v-model="tab.refreshing" @refresh="onRefresh(tab)">
                    <van-list v-model="tab.loading" :finished="tab.finished" finished-text="没有更多了" @load="loadData(tab)">
                        <div class="pd-24">
                            <div class="card m-b-24" v-for="(item,i) in tab.listData" :key="i">
                                <div class="commonTitle cardTitle">
                                    {{item.battery1}}
                                </div>
                                <div class="commonTitle">
                                    <div class="label">电池组名称：</div>
                                    <div class="text">
                                        {{item.tes1}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">告警名称：</div>
                                    <div class="text">
                                        {{item.tester1}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">单体编号：</div>
                                    <div class="text">
                                        {{item.current1}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">告警值：</div>
                                    <div class="text">
                                        {{item.capacity1}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">告警等级：</div>
                                    <div class="text">
                                        {{item.monomer1}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">告警开始时间：</div>
                                    <div class="text">
                                        {{item.start1}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">确认告警时间：</div>
                                    <div class="text">
                                        {{item.isalarm1? item.alm_confirmed_time : "------"}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">是否确认告警：</div>
                                    <div class="text">
                                        {{item.isalarm2}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <van-button size="mini" color="#07c160" @click="okAlarm(item)">确认告警</van-button>
                                    <van-button size="mini" color="#4B88F9" @click="deleteUser(item)">取消告警</van-button>
                                    <van-button size="mini" color="#f3535f" @click="delteTim(item)">删除</van-button>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </van-tab>
        </van-tabs>

        <van-popup v-model="showPopup" position="right" :style="{ width: '90%' ,height:'100%'}">
            <div class="card">
                <van-field v-model="selectValue1" is-link readonly name="picker" label="维护区：" placeholder="请选择维护区" @click="showPicker1 = true" />
                <van-field v-model="selectValue2" is-link readonly name="picker" label="机房站点：" placeholder="请选择机房站点" @click="showPicker2 = true" />
                <van-field v-model="selectLable3" is-link readonly name="picker" label="蓄电池组：" placeholder="请选择蓄电池组" @click="showPicker3 = true" />
                <van-field label="告警条件过滤" class="lineInput">
                    <template #input>
                        <van-checkbox v-model="checkbox.usr_id.bol" shape="square" class="lineCheckBox">在线电压</van-checkbox>
                        <van-checkbox v-model="checkbox.fault_type_id.bol" shape="square" class="lineCheckBox">组端电压</van-checkbox>
                        <van-checkbox v-model="checkbox.uname.bol" shape="square" class="lineCheckBox">漏液电压</van-checkbox>
                        <van-checkbox v-model="checkbox.fault_level.bol" shape="square" class="lineCheckBox">充电电流</van-checkbox>
                        <van-checkbox v-model="checkbox.record_uid.bol" shape="square" class="lineCheckBox">放电电流</van-checkbox>
                        <van-checkbox v-model="checkbox.maint_type_id.bol" shape="square" class="lineCheckBox">单体电压</van-checkbox>
                        <van-checkbox v-model="checkbox.maint_close.bol" shape="square" class="lineCheckBox">单体内阻</van-checkbox>
                        <van-checkbox v-model="checkbox.maint_done.bol" shape="square" class="lineCheckBox">单体温度</van-checkbox>
                        <van-checkbox v-model="checkbox.fault_type.bol" shape="square" class="lineCheckBox">预估容量</van-checkbox>
                    </template>
                </van-field>
                <van-field label="告警阀值过滤" class="lineInput">
                    <template #input>
                        <van-checkbox v-model="checkbox.alm_id.bol" shape="square" class="lineCheckBox">上限告警</van-checkbox>
                        <van-checkbox v-model="checkbox.alm_signal_id.bol" shape="square" class="lineCheckBox">下限告警</van-checkbox>
                    </template>
                </van-field>
                <van-field label="告警等级过滤" class="lineInput">
                    <template #input>
                        <van-checkbox v-model="checkbox.Level_one_warn.bol" shape="square" class="lineCheckBox">一级告警</van-checkbox>
                        <van-checkbox v-model="checkbox.Level_two_warn.bol" shape="square" class="lineCheckBox">二级告警</van-checkbox>
                        <van-checkbox v-model="checkbox.master_audit.bol" shape="square" class="lineCheckBox">三级告警</van-checkbox>
                        <van-checkbox v-model="checkbox.appoint_uid.bol" shape="square" class="lineCheckBox">四级告警</van-checkbox>
                    </template>
                </van-field>
                <div class="subBtn" @click="selectScreen">保存</div>
            </div>
        </van-popup>

        <van-popup v-model="showPicker1" round position="bottom">
            <van-picker show-toolbar :columns="vindicate" value-key="label" @confirm="changeSelect1" @cancel="showPicker1 = false" title="维护区" />
        </van-popup>
        <van-popup v-model="showPicker2" round position="bottom">
            <van-picker show-toolbar :columns="newRoms" value-key="label" @confirm="storageBatterys" @cancel="showPicker2 = false" title="机房站点" />
        </van-popup>
        <van-popup v-model="showPicker3" round position="bottom">
            <van-picker show-toolbar :columns="options" value-key="BattGroupName" @confirm="selectBatter" @cancel="showPicker3 = false" title="蓄电池组" />
        </van-popup>
        <div class="refBtn" @click="onRefresh">
            <van-icon name="replay" />
        </div>
    </div>
</template>

<script>
import {
    dataType /* 维护区 */,
    roomsStation /* 机房站点 */,
    batterySeach /* 蓄电池组 */,
    newsAlarm /*告警信息 */,
    deletionRecord /* 删除 */,
    reporTemergency /* 确认告警 */,
    CancelTheAlarm /* 取消告警 */,
} from "@/pages/alarmMager/js/api"
export default {
    components: {},
    data() {
        return {
            showPopup: false,
            showPicker1: false,
            showPicker2: false,
            showPicker3: false,
            /* 维护区 */
            vindicate: [],
            /* 机房站点 */
            newRoms: [],
            /* 蓄电池租 */
            selectValue1: "",
            selectValue2: "",
            selectValue3: 0,
            selectLable3: '',
            options: [],
            checkbox: {
                usr_id: {
                    bol: true,
                    value1: "119001",
                    value2: 0,
                },
                /* 在线电压 */
                fault_type_id: {
                    bol: true,
                    value1: "119002",
                    value2: 0,
                } /* 组端电压 */,
                uname: {
                    bol: true,
                    value1: "119012",
                    value2: 0,
                },
                /* 漏液电压 */
                fault_level: {
                    bol: true,
                    value1: "119003",
                    value2: 0,
                } /* 充电电流 */,
                record_uid: {
                    bol: true,
                    value1: "119004",
                    value2: 0,
                } /* 放电电流 */,
                fault_type: {
                    bol: true,
                    value1: "119013",
                    value2: 0,
                }/* 单体预估容量告警 */,
                Level_one_warn: {
                    bol: true,
                    value1: "1",
                    value2: 0,
                } /*一级警告 */,
                Level_two_warn: {
                    bol: true,
                    value1: "2",
                    value2: 0,
                } /* 二级警告 */,
                alm_id: {
                    bol: true,
                    value1: "100",
                    value2: 0,
                } /* 上限告警 */,
                maint_type_id: {
                    bol: true,
                    value1: "119005",
                    value2: 0,
                } /* 单体电压 */,
                maint_close: {
                    bol: true,
                    value1: "119007",
                    value2: 0,
                } /* 单体内阻 */,
                maint_done: {
                    bol: true,
                    value1: "119006",
                    value2: 0,
                } /* 单体温度 */,
                master_audit: {
                    bol: true,
                    value1: "3",
                    value2: 0,
                } /*  三级告警 */,
                appoint_uid: {
                    bol: true,
                    value1: "4",
                    value2: 0,
                } /* 四级告警 */,
                alm_signal_id: {
                    bol: true,
                    value1: "100",
                    value2: 0,
                } /* 下限告警 */,
            },
            active: 0,
            tabs: [{
                title: '未确认告警',
                listData: [],
                loading: false,
                finished: false,
                refreshing: false,
                page: {
                    pageSize: 6,
                    pageCurr: 0
                }
            }, {
                title: '已确认告警',
                listData: [],
                loading: false,
                finished: false,
                refreshing: false,
                page: {
                    pageSize: 6,
                    pageCurr: 0
                }
            }],
        }
    },
    mounted() {
        this.vindicateData(); /* 维护区 */
        this.computerSite(); /*机房站点 */
        this.storageBatterys(); /* 蓄电池组 */
    },
    methods: {
        /* 维护区 */
        async vindicateData() {
            const resType = await dataType();
            let typeList = JSON.parse(resType.data.result).data.map((item) => {
                return {
                    label: item,
                    value: item,
                };
            });
            let vindicate = typeList.map((item) => {
                return item;
            });
            this.vindicate = vindicate;
        },
        /* 机房站点 */
        async computerSite() {
            const roomsSeation = await roomsStation({
                UNote: this.selectValue1,
            });
            if (roomsSeation.data.result) {
                let newRoms = JSON.parse(roomsSeation.data.result).data.map((item) => {
                    return {
                        label: item,
                        value: item,
                    };
                });
                this.newRoms = newRoms;
            }
        },
        /* 蓄电池组 */
        async storageBatterys(value) {
            if (value) {
                this.selectValue2 = value.value
            }
            // 初始化值
            this.selectValue3 = 0;
            this.selectLable3 = "";
            this.showPicker2 = false
            // 构造查询条件
            const batteryss = await batterySeach({
                UNote: this.selectValue1,
                UName: this.selectValue2,
            });
            if (batteryss.data.result) {
                let options = JSON.parse(batteryss.data.result).data.map((item) => {
                    item.BattGroupName = `${item.BattGroupName}-${item.MonCount}节`;
                    return item;
                });
                this.options = options;
            }
        },
        changeSelect1(value) {
            if (value) {
                this.selectValue1 = value.value
            }
            this.selectValue2 = "";
            this.selectValue3 = 0;
            this.selectLable3 = "";
            this.computerSite(); /*机房站点 */
            this.storageBatterys(); /* 蓄电池组 */
            this.showPicker1 = false
        },
        //选择电池组
        selectBatter(value) {
            if (value) {
                this.selectValue3 = value.BattGroupId
                this.selectLable3 = value.BattGroupName
            }
            this.showPicker3 = false

            // 查询告警信息
            this.loadData();
        },
        selectScreen() {
            this.showPopup = false
            this.onRefresh(this.tabs[this.active])
        },
        //请求数据总触发
        loadData(tab) {
            if (tab) {
                this.paramsAlram(tab)
            } else {
                this.paramsAlram(this.tabs[this.active])
            }
        },
        //区管理员请求数据
        paramsAlram(tab) {
            // 将 loading 设置为 true，表示处于加载状态
            tab.loading = true;
            tab.page.pageCurr++
            let params = {};
            Object.keys(this.checkbox).forEach((item, index) => {
                if (this.checkbox[item].bol) {
                    params[item] = this.checkbox[item].value1;
                } else {
                    params[item] = this.checkbox[item].value2;
                }
            });
            // 一级和二级告警
            params.num = this.checkbox.Level_one_warn.bol ? 1 : 0;
            params.BattGroupId = this.checkbox.Level_two_warn.bol ? 2 : 0;
            // 上限和下限告警
            params.alm_id = this.checkbox.alm_id.bol ? 1 : 100;
            params.alm_signal_id = this.checkbox.alm_signal_id.bol ? 0 : 100;
            let postData = {
                bmd: {
                    page: {
                        pageSize: tab.page.pageSize,
                        pageCurr: tab.page.pageCurr,
                    },
                    binf: {
                        StationName1: this.selectValue1,
                        stationName: this.selectValue2,
                        BattGroupId: this.selectValue3 ? this.selectValue3 : 0,
                    },
                    mainf: {
                        usr_id: params.usr_id,
                        fault_type_id: params.fault_type_id,
                        uname: params.uname,
                        fault_level: params.fault_level,
                        record_uid: params.record_uid,
                        maint_type_id: params.maint_type_id,
                        maint_close: params.maint_close,
                        master_id: "0",
                        maint_done: params.maint_done,
                        num: params.num,
                        BattGroupId: params.BattGroupId,
                        master_audit: params.master_audit,
                        appoint_uid: params.appoint_uid,
                        fault_type: params.fault_type,
                    },
                    adata: {
                        MonNum: "0",
                        Record_Id: "0",
                        alm_id: params.alm_id,
                        alm_signal_id: params.alm_signal_id,
                        alm_is_confirmed: this.active,
                    },
                },
            }
            newsAlarm(postData).then((res) => {
                const resData = JSON.parse(res.data.result);
                tab.loading = false;
                if (resData.data) {
                    let arr = resData.data.filter((item, index) => {
                        if (item.adata) {
                            item.room1 = index + 1;
                            item.battery1 =
                                item.binf && item.binf.StationName ? item.binf.StationName : "";
                            item.tes1 =
                                item.binf && item.binf.BattGroupName ? item.binf.BattGroupName : "";
                            item.tester1 =
                                item.binf && item.binf.StationName8 ? item.binf.StationName8 : "";
                            item.current1 =
                                item.adata && item.adata.MonNum ? item.adata.MonNum : 0;
                            item.capacity1 =
                                item.adata && item.adata.alm_value ? item.adata.alm_value : 0;
                            item.monomer1 =
                                item.binf && item.binf.StationName9 ? item.binf.StationName9 : "";
                            item.start1 =
                                item.adata && item.adata.alm_start_time
                                    ? item.adata.alm_start_time
                                    : "";
                            item.end1 =
                                item.adata && item.adata.alm_end_time
                                    ? item.adata.alm_end_time
                                    : "";
                            item.alm_confirmed_time = item.adata.alm_confirmed_time;
                            if (this.active == 0) {
                                item.isalarm1 = false;
                                item.isalarm2 = "否";
                            } else {
                                item.isalarm1 = true;
                                item.isalarm2 = "是";
                            }
                            return item;
                        }
                    });
                    tab.listData.push(...arr)
                }
                if (tab.page.pageCurr >= resData.data[resData.data.length - 1].page.pageAll) {
                    tab.finished = true;
                } else {
                    tab.finished = false;
                }
            }).catch((err) => {
                tab.loading = false;
                tab.finished = true;
                console.log(err)
            });
        },
        /*确认告警 */
        okAlarm(vlas) {
            this.$dialog.confirm({
                title: '提示',
                message:
                    '确定这条告警记录, 是否继续',
            }).then(() => {
                reporTemergency([
                    {
                        stationname: vlas.binf.StationName,
                        num: vlas.adata.num,
                        alm_confirmed_time: new Date().format("yyyy-MM-dd hh:mm:ss"),
                        alm_is_confirmed: 1,
                        note: vlas.tester1,
                    },
                ]).then((wk) => {
                    if (JSON.parse(wk.data.result).code !== 1) {
                        return this.$toast("确认失败");
                    }
                    this.onRefresh();
                    this.$toast("确认成功");
                }).catch((err) => {

                });
            }).catch(() => {
                // on cancel
            });
        },
        /* 取消告警 */
        deleteUser(vla) {
            this.$dialog.confirm({
                title: '提示',
                message:
                    '确定取消这条告警记录吗, 是否继续?',
            }).then(() => {
                CancelTheAlarm([
                    {
                        stationname: vla.battery1,
                        num: vla.adata.num,
                        alm_end_time: vla.adata.alm_end_time,
                        Record_Id: "0",
                        alm_cleared_type: "2",
                        note: vla.tester1,
                    },
                ]).then((wk) => {
                    if (JSON.parse(wk.data.result).code !== 1) {
                        return this.$toast("取消失败");
                    }
                    this.onRefresh();
                    this.$toast("取消成功");
                }).catch((err) => {

                });
            }).catch(() => {
                // on cancel
            });
        },
        /* 删除 */
        delteTim(val) {
            this.$dialog.confirm({
                title: '提示',
                message:
                    '此操作将永久删除该文件, 是否继续?',
            }).then(() => {
                deletionRecord([
                    {
                        stationname: val.binf.stationname,
                        num: val.adata.num,
                        note: val.tester1,
                    },
                ]).then((del) => {
                    if (JSON.parse(del.data.result).code !== 1) {
                        return this.$toast("删除失败");
                    }
                    this.onRefresh();
                    this.$toast("删除成功");
                }).catch((err) => {

                });
            }).catch(() => {
                // on cancel
            });
        },
        onRefresh(tab) {
            if (tab?.title) {
                // 清空列表数据
                tab.finished = false;
                tab.refreshing = false;
                tab.page = {
                    pageSize: 12,
                    pageCurr: 0
                }
                tab.listData = [];
                // 重新加载数据
                this.loadData(tab);
            } else {
                // 清空列表数据
                this.tabs[this.active].finished = false;
                this.tabs[this.active].refreshing = false;
                this.tabs[this.active].page = {
                    pageSize: 12,
                    pageCurr: 0
                }
                this.tabs[this.active].listData = [];
                // 重新加载数据
                this.loadData(this.tabs[this.active]);
            }
        },
    }
}
</script>

<style scoped>
.indexWarp {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
}

.van-tabs {
    height: calc(100% - 92px);
    padding-top: 92px;
}

.van-tabs /deep/ .van-tabs__content {
    min-height: 100%;
    background: #f5f5f5;
}

.van-tabs /deep/ .van-tabs__wrap {
    position: fixed;
    left: 0;
    width: 100%;
    top: 92px;
    z-index: 9;
    border-bottom: 1px solid #ededed;
}

.pd-24 {
    padding: 24px;
}

.listWarp {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
}

.van-tabs /deep/ .van-cell__title {
    width: 90%;
}

.alarmTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #323233;
    font-size: 24px;
}

.alarmTitle .tag {
    font-size: 20px;
    margin-right: 8px;
    background-color: #4b88f9;
}

.time {
    color: #969799;
    font-size: 20px;
}

.card {
    background-color: #ffffff;
    border-radius: 16px;
    margin: 0 auto;
    width: 100%;
    padding: 24px;
    box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
}
.lineInput .lineCheckBox{
  margin-bottom: 8px;
}
.lineInput .lineCheckBox:nth-of-type(2n){
  margin-left: 18px;
}

.lineInput /deep/ .van-field__control--custom{
  flex-wrap: wrap;
}

.subBtn {
    flex: 1;
    height: 98px;
    background: #4b88f9;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 36px;
    margin-top: 48px;
}
.m-b-24{
  margin-bottom: 24px;
}
.commonTitle {
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 22px;
    display: flex;
}

.cardTitle {
    font-weight: bold;
}

.refBtn{
  box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
  width: 88px;
  height: 88px;
  position: fixed;
  right: 48px;
  bottom: 48px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4B88F9;
  font-size: 44px;
  font-weight: bold;
}
</style>

 src/pages/alarmMager/deviceHistoryquery.vue

New file
@@ -0,0 +1,465 @@
<template>
    <div class="indexWarp">
        <van-nav-bar title="设备告警历史查询" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder right-text="筛选" @click-right="showPopup=true">
        </van-nav-bar>
        <van-pull-refresh v-model="tab.refreshing" @refresh="onRefresh(tab)">
            <van-list v-model="tab.loading" :finished="tab.finished" finished-text="没有更多了" @load="loadData(tab)">
                <div class="pd-24">
                    <div class="card m-b-24" v-for="(item,i) in tab.listData" :key="i">
                        <div class="commonTitle cardTitle">
                            {{item.sessdion1}}
                        </div>
                        <div class="commonTitle">
                            <div class="label">设备ID：</div>
                            <div class="text">
                                {{item.battery1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">设备名：</div>
                            <div class="text">
                                {{item.tes1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">设备IP：</div>
                            <div class="text">
                                {{item.tester1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">告警事件：</div>
                            <div class="text">
                                {{item.alm_name}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">告警等级：</div>
                            <div class="text">
                                {{item.alm_level_name}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">告警开始时间：</div>
                            <div class="text">
                                {{item.start1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">确认告警时间：</div>
                            <div class="text">
                                {{item.monomer1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">告警结束时间：</div>
                            <div class="text">
                                {{item.end1}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <div class="label">是否确认告警：</div>
                            <div class="text">
                                {{item.alm_is_confirmed==0?'否':'是'}}
                            </div>
                        </div>
                        <div class="commonTitle">
                            <van-button size="mini" color="#f3535f" @click="deleteUser(item)">删除</van-button>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>

        <van-popup v-model="showPopup" position="right" :style="{ width: '90%' ,height:'100%'}">
            <div class="card">
                <van-field v-model="selectValue1" is-link readonly name="picker" label="维护区：" placeholder="请选择维护区" @click="showPicker1 = true" />
                <van-field v-model="selectValue2" is-link readonly name="picker" label="机房站点：" placeholder="请选择机房站点" @click="showPicker2 = true" />
                <van-field v-model="startDrsj" is-link readonly name="picker" label="开始日期：" placeholder="请选择开始日期" @click="showTimePopup1 = true" />
                <van-field v-model="endDrsj" is-link readonly name="picker" label="结束日期：" placeholder="请选择结束日期" @click="showTimePopup2 = true" />
                <div class="subBtn" @click="selectScreen">保存</div>
            </div>
        </van-popup>

        <van-popup v-model="showPicker1" round position="bottom">
            <van-picker show-toolbar :columns="vindicate" value-key="label" @confirm="changeSelect1" @cancel="showPicker1 = false" title="维护区" />
        </van-popup>
        <van-popup v-model="showPicker2" round position="bottom">
            <van-picker show-toolbar :columns="newRoms" value-key="label" @confirm="changeSelect2" @cancel="showPicker2 = false" title="机房站点" />
        </van-popup>
        <van-popup v-model="showTimePopup1" round position="bottom">
            <van-datetime-picker v-model="startdatetime" type="date" :min-date="minDate" :max-date="maxDate" title="告警开始日期" @cancel="show = false" @confirm="confirmPicker1" />
        </van-popup>
        <van-popup v-model="showTimePopup2" round position="bottom">
            <van-datetime-picker v-model="enddatetime" type="date" :min-date="minDate" :max-date="maxDate" title="告警开始日期" @cancel="show = false" @confirm="confirmPicker2" />
        </van-popup>
        <div class="refBtn" @click="onRefresh">
            <van-icon name="replay" />
        </div>
    </div>
</template>

<script>
import {
    dataType /* 维护区 */,
    roomsStation /* 机房站点 */,
    deviceRecord /*告警信息 */,
    deviceArarmdel
} from "@/pages/alarmMager/js/api"
import getLabelByValue from "@/assets/js/tools/getLabelByValue";
import getDevAlarm from "@/assets/js/tools/getDevAlarm";
export default {
    components: {},
    data() {
        let thistime = new Date();
        let yy = thistime.getFullYear();
        let MM = thistime.getMonth() + 1;
        let DD = thistime.getDate();
        let day1 = yy + "-" + MM + "-" + DD;
        let alarmTypes = getDevAlarm().types;
        let levels = getDevAlarm().levels;
        return {
            showPopup: false,
            showPicker1: false,
            showPicker2: false,
            showPicker3: false,
            /* 维护区 */
            vindicate: [],
            /* 机房站点 */
            newRoms: [],
            /* 蓄电池租 */
            selectValue1: "",
            selectValue2: "",
            options: alarmTypes,
            levels: levels,
            tab: {
                title: '未确认告警',
                listData: [],
                loading: false,
                finished: false,
                refreshing: false,
                page: {
                    pageSize: 6,
                    pageCurr: 0
                }
            },
            /* 日期 */
            startDrsj: "2000-1-1",
            startdatetime: new Date(2000, 0, 1),
            endDrsj: day1,
            enddatetime: new Date(yy, MM - 1, DD),
            minDate: new Date(2000, 0, 1),
            maxDate: new Date(yy + 5, 0, 1),
            showTimePopup1: false,
            showTimePopup2: false,
        }
    },
    mounted() {
        this.vindicateData(); /* 维护区 */
        this.computerSite(); /*机房站点 */
    },
    methods: {
        /* 维护区 */
        async vindicateData() {
            const resType = await dataType();
            let typeList = JSON.parse(resType.data.result).data.map((item) => {
                return {
                    label: item,
                    value: item,
                };
            });
            let vindicate = typeList.map((item) => {
                return item;
            });
            this.vindicate = vindicate;
        },
        /* 机房站点 */
        async computerSite() {
            const roomsSeation = await roomsStation({
                UNote: this.selectValue1,
            });
            if (roomsSeation.data.result) {
                let newRoms = JSON.parse(roomsSeation.data.result).data.map((item) => {
                    return {
                        label: item,
                        value: item,
                    };
                });
                this.newRoms = newRoms;
            }
        },
        changeSelect1(value) {
            if (value) {
                this.selectValue1 = value.value
            }
            this.selectValue2 = "";
            this.computerSite(); /*机房站点 */
            this.showPicker1 = false
        },
        changeSelect2(value) {
            if (value) {
                this.selectValue2 = value.value
            }
            this.showPicker2 = false
        },
        selectScreen() {
            this.showPopup = false
            this.onRefresh(this.tab)
        },
        //请求数据总触发
        loadData(tab) {
            if (tab) {
                this.paramsAlram(tab)
            } else {
                this.paramsAlram(this.tab)
            }
        },
        //区管理员请求数据
        paramsAlram(tab) {
            // 将 loading 设置为 true，表示处于加载状态
            tab.loading = true;
            tab.page.pageCurr++
            let postData = {
                page: {
                    pageSize: tab.page.pageSize,
                    pageCurr: tab.page.pageCurr,
                },
                binf: {
                    StationName: this.selectValue2,
                    StationName1: this.selectValue1,
                    BattProductDate: this.startDrsj + ' 00:00:00',
                    BattProductDate1: this.endDrsj + ' 23:59:59'
                },
            }
            deviceRecord(postData).then((res) => {
                const resData = JSON.parse(res.data.result);
                tab.loading = false;
                if (resData.data) {
                    let arr = resData.data.map((item, index) => {
                        item.index = index + 1;
                        return {
                            room1: item.index,
                            battery1: item.dev_id,
                            tes1: item.dev_name,
                            tester1: item.dev_ip,
                            sessdion1: item.stationName,
                            monomer1: item.alm_confirmed_time,
                            start1: item.alm_start_time,
                            end1: item.alm_end_time,
                            num: item.num,
                            alm_is_confirmed: item.alm_is_confirmed,
                            alm_level: item.alm_level,
                            alm_level_name: getLabelByValue(item.alm_level, this.levels, "---"),
                            alm_type: item.alm_type,
                            alm_name: getLabelByValue(item.alm_type, this.options, "---"),
                            alm_value: item.alm_value
                        };
                    });
                    tab.listData.push(...arr)
                }
                if (tab.page.pageCurr >= resData.data[resData.data.length - 1].usr_id) {
                    tab.finished = true;
                } else {
                    tab.finished = false;
                }
            }).catch((err) => {
                tab.loading = false;
                tab.finished = true;
                console.log(err)
            });
        },
        deleteUser(value) {
            this.$dialog.confirm({
                title: '提示',
                message:
                    '确定删除这条告警记录吗, 是否继续?',
            }).then(() => {
                deviceArarmdel([
                    {
                        num: value.num,
                        stationName: value.sessdion1,
                        note: " "
                    }
                ]).then((del) => {
                    if (JSON.parse(del.data.result).code !== 1) {
                        return this.$toast("删除失败");
                    }
                    this.onRefresh();
                    this.$toast("删除成功");
                }).catch((err) => {

                });
            }).catch(() => {
                // on cancel
            });
        },
        onRefresh(tab) {
            if (tab?.title) {
                // 清空列表数据
                tab.finished = false;
                tab.refreshing = false;
                tab.page = {
                    pageSize: 12,
                    pageCurr: 0
                }
                tab.listData = [];
                // 重新加载数据
                this.loadData(tab);
            } else {
                // 清空列表数据
                this.tab.finished = false;
                this.tab.refreshing = false;
                this.tab.page = {
                    pageSize: 12,
                    pageCurr: 0
                }
                this.tab.listData = [];
                // 重新加载数据
                this.loadData(this.tab);
            }
        },
        confirmPicker1(val) {
            let year = val.getFullYear()
            let month = val.getMonth() + 1
            let day = val.getDate()
            this.startDrsj = `${year}-${month}-${day}`
            this.showTimePopup1 = false
        },
        confirmPicker2(val) {
            let year = val.getFullYear()
            let month = val.getMonth() + 1
            let day = val.getDate()
            this.endDrsj = `${year}-${month}-${day}`
            this.showTimePopup2 = false
        }
    }
}
</script>

<style scoped>
.indexWarp {
    width: 100%;
    min-height: 100%;
    background: #f5f5f5;
}

.van-tabs {
    height: calc(100% - 92px);
    padding-top: 92px;
}

.van-tabs /deep/ .van-tabs__content {
    min-height: 100%;
    background: #f5f5f5;
}

.van-tabs /deep/ .van-tabs__wrap {
    position: fixed;
    left: 0;
    width: 100%;
    top: 92px;
    z-index: 9;
    border-bottom: 1px solid #ededed;
}

.pd-24 {
    padding: 24px;
}

.listWarp {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
}

.van-tabs /deep/ .van-cell__title {
    width: 90%;
}

.alarmTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #323233;
    font-size: 24px;
}

.alarmTitle .tag {
    font-size: 20px;
    margin-right: 8px;
    background-color: #4b88f9;
}

.time {
    color: #969799;
    font-size: 20px;
}

.card {
    background-color: #ffffff;
    border-radius: 16px;
    margin: 0 auto;
    width: 100%;
    padding: 24px;
    box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
}
.lineInput .lineCheckBox{
  margin-bottom: 8px;
}
.lineInput .lineCheckBox:nth-of-type(2n){
  margin-left: 18px;
}

.lineInput /deep/ .van-field__control--custom{
  flex-wrap: wrap;
}

.subBtn {
    flex: 1;
    height: 98px;
    background: #4b88f9;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 36px;
    margin-top: 48px;
}
.m-b-24{
  margin-bottom: 24px;
}
.commonTitle {
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 22px;
    display: flex;
}

.cardTitle {
    font-weight: bold;
}

.refBtn{
  box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
  width: 88px;
  height: 88px;
  position: fixed;
  right: 48px;
  bottom: 48px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4B88F9;
  font-size: 44px;
  font-weight: bold;
}
</style>

 src/pages/alarmMager/deviceTimequery.vue

New file
@@ -0,0 +1,521 @@
<template>
    <div class="indexWarp">
        <van-nav-bar title="设备告警实时查询" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder right-text="筛选" @click-right="showPopup=true">
        </van-nav-bar>
        <van-tabs v-model="active" color="#4B88F9" animated swipeable background="#ffffff">
            <van-tab :title="tab.title" v-for="(tab,i) in tabs" :key="i">
                <van-pull-refresh v-model="tab.refreshing" @refresh="onRefresh(tab)">
                    <van-list v-model="tab.loading" :finished="tab.finished" finished-text="没有更多了" @load="loadData(tab)">
                        <div class="pd-24">
                            <div class="card m-b-24" v-for="(item,i) in tab.listData" :key="i">
                                <div class="commonTitle cardTitle">
                                    {{item.tester1}}
                                </div>
                                <div class="commonTitle">
                                    <div class="label">设备ID：</div>
                                    <div class="text">
                                        {{item.batterys1}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">设备名：</div>
                                    <div class="text">
                                        {{item.tesa1}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">设备IP：</div>
                                    <div class="text">
                                        {{item.dev1}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">告警事件：</div>
                                    <div class="text">
                                        {{item.alm_name}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">告警等级：</div>
                                    <div class="text">
                                        {{item.alm_level_name}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">告警开始时间：</div>
                                    <div class="text">
                                        {{item.starts1}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">确认告警时间：</div>
                                    <div class="text">
                                        {{item.isalarm1? item.monomers1 : "------"}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <div class="label">是否确认告警：</div>
                                    <div class="text">
                                        {{item.isalarm2}}
                                    </div>
                                </div>
                                <div class="commonTitle">
                                    <van-button size="mini" color="#07c160" @click="okAlarm(item)">确认告警</van-button>
                                    <van-button size="mini" color="#4B88F9" @click="deleteUser(item)">取消告警</van-button>
                                    <van-button size="mini" color="#f3535f" @click="delteTim(item)">删除</van-button>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </van-tab>
        </van-tabs>

        <van-popup v-model="showPopup" position="right" :style="{ width: '90%' ,height:'100%'}">
            <div class="card">
                <van-field v-model="selectValue1" is-link readonly name="picker" label="维护区：" placeholder="请选择维护区" @click="showPicker1 = true" />
                <van-field v-model="selectValue2" is-link readonly name="picker" label="机房站点：" placeholder="请选择机房站点" @click="showPicker2 = true" />
                <van-field v-model="selectLable3" is-link readonly name="picker" label="告警类型：" placeholder="请选择告警类型" @click="showPicker3 = true" />
                <div class="subBtn" @click="selectScreen">保存</div>
            </div>
        </van-popup>

        <van-popup v-model="showPicker1" round position="bottom">
            <van-picker show-toolbar :columns="vindicate" value-key="label" @confirm="changeSelect1" @cancel="showPicker1 = false" title="维护区" />
        </van-popup>
        <van-popup v-model="showPicker2" round position="bottom">
            <van-picker show-toolbar :columns="newRoms" value-key="label" @confirm="changeSelect2" @cancel="showPicker2 = false" title="机房站点" />
        </van-popup>
        <van-popup v-model="showPicker3" round position="bottom">
            <van-picker show-toolbar :columns="options" value-key="label" @confirm="selectBatter" @cancel="showPicker3 = false" title="告警类型" />
        </van-popup>
        <div class="refBtn" @click="onRefresh">
            <van-icon name="replay" />
        </div>
    </div>
</template>

<script>
import {
    dataType /* 维护区 */,
    roomsStation /* 机房站点 */,
    deviceAlarm /*告警信息 */,
    deviceOk,
    deviceDelete,
    CancelWarning,
} from "@/pages/alarmMager/js/api"
import getLabelByValue from "@/assets/js/tools/getLabelByValue";
import getDevAlarm from "@/assets/js/tools/getDevAlarm";
export default {
    components: {},
    data() {
        let alarmTypes = getDevAlarm().types;
        let levels = getDevAlarm().levels;
        return {
            showPopup: false,
            showPicker1: false,
            showPicker2: false,
            showPicker3: false,
            /* 维护区 */
            vindicate: [],
            /* 机房站点 */
            newRoms: [],
            /* 蓄电池租 */
            selectValue1: "",
            selectValue2: "",
            selectValue3: '0',
            selectLable3: '',
            options: alarmTypes,
            levels: levels,
            active: 0,
            tabs: [{
                title: '未确认告警',
                listData: [],
                loading: false,
                finished: false,
                refreshing: false,
                page: {
                    pageSize: 6,
                    pageCurr: 0
                }
            }, {
                title: '已确认告警',
                listData: [],
                loading: false,
                finished: false,
                refreshing: false,
                page: {
                    pageSize: 6,
                    pageCurr: 0
                }
            }],
        }
    },
    mounted() {
        this.vindicateData(); /* 维护区 */
        this.computerSite(); /*机房站点 */
    },
    methods: {
        /* 维护区 */
        async vindicateData() {
            const resType = await dataType();
            let typeList = JSON.parse(resType.data.result).data.map((item) => {
                return {
                    label: item,
                    value: item,
                };
            });
            let vindicate = typeList.map((item) => {
                return item;
            });
            this.vindicate = vindicate;
        },
        /* 机房站点 */
        async computerSite() {
            const roomsSeation = await roomsStation({
                UNote: this.selectValue1,
            });
            if (roomsSeation.data.result) {
                let newRoms = JSON.parse(roomsSeation.data.result).data.map((item) => {
                    return {
                        label: item,
                        value: item,
                    };
                });
                this.newRoms = newRoms;
            }
        },
        changeSelect1(value) {
            if (value) {
                this.selectValue1 = value.value
            }
            this.selectValue2 = "";
            this.computerSite(); /*机房站点 */
            this.showPicker1 = false
        },
        changeSelect2(value) {
            if (value) {
                this.selectValue2 = value.value
            }
            this.showPicker2 = false
        },
        //选择电池组
        selectBatter(value) {
            if (value) {
                this.selectValue3 = value.value
                this.selectLable3 = value.label
            }
            this.showPicker3 = false
            // 查询告警信息
            this.loadData();
        },
        selectScreen() {
            this.showPopup = false
            this.onRefresh(this.tabs[this.active])
        },
        //请求数据总触发
        loadData(tab) {
            if (tab) {
                this.paramsAlram(tab)
            } else {
                this.paramsAlram(this.tabs[this.active])
            }
        },
        //区管理员请求数据
        paramsAlram(tab) {
            // 将 loading 设置为 true，表示处于加载状态
            tab.loading = true;
            tab.page.pageCurr++
            let postData = {
                page: {
                    pageSize: tab.page.pageSize,
                    pageCurr: tab.page.pageCurr,
                },
                stationName1: this.selectValue1,
                stationName: this.selectValue2,
                alm_type: this.selectValue3,
                alm_is_confirmed: this.active,
            }
            deviceAlarm(postData).then((res) => {
                const resData = JSON.parse(res.data.result);
                tab.loading = false;
                if (resData.data) {
                    let arr = resData.data.map((item, index) => {
                        let isalarm1;
                        if (item.alm_is_confirmed === 1) {
                            isalarm1 = true;
                        } else {
                            isalarm1 = false;
                        }
                        return {
                            rooms1: item.index,
                            batterys1: item.dev_id,
                            tesa1: item.dev_name,
                            dev1: item.dev_ip,
                            tester1: item.stationName,
                            starts1: item.alm_start_time,
                            ends1: item.alm_end_time,
                            monomers1: item.alm_confirmed_time,
                            num: item.num,
                            alm_is_confirmed: item.alm_is_confirmed,
                            alm_level: item.alm_level,
                            alm_level_name: getLabelByValue(item.alm_level, this.levels, "---"),
                            alm_type: item.alm_type,
                            alm_name: getLabelByValue(item.alm_type, this.options, "---"),
                            alm_value: item.alm_value,
                            isalarm1: isalarm1,
                            isalarm2: isalarm1 ? "是" : "否",
                        };
                    });
                    tab.listData.push(...arr)
                }
                if (tab.page.pageCurr >= resData.data[resData.data.length - 1].usr_id) {
                    tab.finished = true;
                } else {
                    tab.finished = false;
                }
            }).catch((err) => {
                tab.loading = false;
                tab.finished = true;
                console.log(err)
            });
        },
        /*确认告警 */
        okAlarm(vlas) {
            this.$dialog.confirm({
                title: '提示',
                message:
                    '确定这条告警记录, 是否继续',
            }).then(() => {
                deviceOk([
                    {
                        stationname: vlas.tester1,
                        num: vlas.num,
                        alm_confirmed_time: new Date().format("yyyy-MM-dd hh:mm:ss"),
                        alm_is_confirmed: 1,
                        note: "",
                    },
                ]).then((wk) => {
                    if (JSON.parse(wk.data.result).code !== 1) {
                        return this.$toast("确认失败");
                    }
                    this.onRefresh();
                    this.$toast("确认成功");
                }).catch((err) => {

                });
            }).catch(() => {
                // on cancel
            });
        },
        /* 取消告警 */
        deleteUser(vla) {
            this.$dialog.confirm({
                title: '提示',
                message:
                    '确定取消这条告警记录吗, 是否继续?',
            }).then(() => {
                CancelWarning([
                    {
                        num: vla.num,
                        stationName: vla.tester1,
                        note: "0",
                        alm_cleared_type: "2",
                        alm_end_time: vla.ends1,
                        record_id: "0",
                    },
                ]).then((wk) => {
                    if (JSON.parse(wk.data.result).code !== 1) {
                        return this.$toast("取消失败");
                    }
                    this.onRefresh();
                    this.$toast("取消成功");
                }).catch((err) => {

                });
            }).catch(() => {
                // on cancel
            });
        },
        /* 删除 */
        delteTim(val) {
            this.$dialog.confirm({
                title: '提示',
                message:
                    '此操作将永久删除该文件, 是否继续?',
            }).then(() => {
                deviceDelete([
                    {
                        num: val.num,
                        stationName: val.tester1,
                        note: " ",
                    },
                ]).then((del) => {
                    if (JSON.parse(del.data.result).code !== 1) {
                        return this.$toast("删除失败");
                    }
                    this.onRefresh();
                    this.$toast("删除成功");
                }).catch((err) => {

                });
            }).catch(() => {
                // on cancel
            });
        },
        onRefresh(tab) {
            if (tab?.title) {
                // 清空列表数据
                tab.finished = false;
                tab.refreshing = false;
                tab.page = {
                    pageSize: 12,
                    pageCurr: 0
                }
                tab.listData = [];
                // 重新加载数据
                this.loadData(tab);
            } else {
                // 清空列表数据
                this.tabs[this.active].finished = false;
                this.tabs[this.active].refreshing = false;
                this.tabs[this.active].page = {
                    pageSize: 12,
                    pageCurr: 0
                }
                this.tabs[this.active].listData = [];
                // 重新加载数据
                this.loadData(this.tabs[this.active]);
            }
        },
    }
}
</script>

<style scoped>
.indexWarp {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
}

.van-tabs {
    height: calc(100% - 92px);
    padding-top: 92px;
}

.van-tabs /deep/ .van-tabs__content {
    min-height: 100%;
    background: #f5f5f5;
}

.van-tabs /deep/ .van-tabs__wrap {
    position: fixed;
    left: 0;
    width: 100%;
    top: 92px;
    z-index: 9;
    border-bottom: 1px solid #ededed;
}

.pd-24 {
    padding: 24px;
}

.listWarp {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
}

.van-tabs /deep/ .van-cell__title {
    width: 90%;
}

.alarmTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #323233;
    font-size: 24px;
}

.alarmTitle .tag {
    font-size: 20px;
    margin-right: 8px;
    background-color: #4b88f9;
}

.time {
    color: #969799;
    font-size: 20px;
}

.card {
    background-color: #ffffff;
    border-radius: 16px;
    margin: 0 auto;
    width: 100%;
    padding: 24px;
    box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
}
.lineInput .lineCheckBox{
  margin-bottom: 8px;
}
.lineInput .lineCheckBox:nth-of-type(2n){
  margin-left: 18px;
}

.lineInput /deep/ .van-field__control--custom{
  flex-wrap: wrap;
}

.subBtn {
    flex: 1;
    height: 98px;
    background: #4b88f9;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 36px;
    margin-top: 48px;
}
.m-b-24{
  margin-bottom: 24px;
}
.commonTitle {
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 22px;
    display: flex;
}

.cardTitle {
    font-weight: bold;
}

.refBtn{
  box-shadow: 0px 4px 20px 0px rgba(75, 136, 249, 0.2);
  width: 88px;
  height: 88px;
  position: fixed;
  right: 48px;
  bottom: 48px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4B88F9;
  font-size: 44px;
  font-weight: bold;
}
</style>

 src/pages/alarmMager/js/api.js

New file
@@ -0,0 +1,181 @@
import axios from "@/assets/js/axios";
import qs from 'qs'


/*  页面加载时查询维护区中的枢纽类型 
无参
*/
export const dataType = () => {
    return axios({
        method: "post",
        url: "User_battgroup_baojigroup_battgroupAction!serchStationName1InGroup",
        data: null
    })
}

/* 根据维护区查询机房站点
json={"UNote":""}
*/
export const roomsStation = (data) => {
    return axios({
        method: "post",
        url: "User_battgroup_baojigroup_battgroupAction!serchStationNameInGroup",
        data: "json=" + JSON.stringify(data)
    })
}

/* 根据维护区和机房查询蓄电池组
json={"UNote":"","UName":""} */
export const batterySeach = (data) => {
    return axios({
        method: "post",
        url: "User_battgroup_baojigroup_battgroupAction!serchBattgroupidInGroup",
        data: "json=" + JSON.stringify(data)
    })
}

//查询当前的告警信息	
/* 
bmd.page.pageCurr=1&bmd.page.pageSize=10&bmd.binf.StationName1=&bmd.binf.
stationName=&bmd.binf.BattGroupId=0&bmd.mainf.usr_id=0&bmd.mainf.fault_type_id=119002&bmd.mainf.
fault_level=119003&bmd.mainf.record_uid=119004&bmd.adata.MonNum=0&bmd.adata.Record_Id=0&bmd.mainf.
maint_type_id=119005&bmd.mainf.maint_close=119007&bmd.mainf.master_id=0&bmd.mainf.maint_done=119006&bmd.adata.
alm_id=1&bmd.adata.alm_signal_id=0&bmd.mainf.num=1&bmd.mainf.BattGroupId=2&bmd.mainf.master_audit=3&bmd.mainf.appoint_uid=4
*/
export const newsAlarm = (data) => {
    return axios({
        method: "post",
        url: "Battalarm_dataAction!serchByCondition",
        data: qs.stringify(data, { allowDots: true })
    })
}

/* 删除记录
bads=[{"stationname":"四川省-德阳市-德阳希望城10KV开闭所-LD9-电池组1","num":"368373","note":"单体电压低"}] */
export const deletionRecord = (data) => {
    return axios({
        method: "post",
        url: "Battalarm_dataAction!delete",
        data: "bads=" + JSON.stringify(data)
    })
}

/* 点击确认告警
bads=[{"stationname":"四川省-德阳市-德阳希望城10KV开闭所-LD9-电池组1","num":"368428",
"alm_confirmed_time":"2020-09-10 17:24:44",
"alm_is_confirmed":1,"note":"单体电压低"}] */
export const reporTemergency = (data) => {
    return axios({
        method: "post",
        url: "Battalarm_dataAction!update",
        data: "bads=" + JSON.stringify(data)
    })
}

/* 点击取消告警
bads=[{"stationname":"四川省-德阳市-德阳希望城10KV开闭所-LD9-电池组1","num":"368428",
"alm_end_time":"2020-09-10 17:26:24","Record_Id":0,"alm_cleared_type":2,"note":"单体电压低"}] */
export const CancelTheAlarm = (data) => {
    return axios({
        method: "post",
        url: "Battalarm_dataAction!cancelalarm",
        data: "bads=" + JSON.stringify(data)
    })
}

/* 查询历史告警记录
json={"page":{"pageCurr":1,"pageSize":10,"pageAll":0},"binf":{"StationName1":"","StationName":"",
"BattGroupId":"0"},"mainf":{"appoint_uid":"4","master_audit":"3","num":"1","BattGroupId":"2","usr_id":"119001",
"fault_type_id":"119002","fault_level":"119003","record_uid":"119004","maint_type_id":"119005","maint_done":"119006",
"maint_close":"119007","master_id":"0"},"adata_H":{"MonNum":"0","alm_id":1,"alm_start_time":"2000-1-1 00:00:00",
"alm_start_time1":"2020-09-11 23:59:59","alm_signal_id":0,"Record_Id":"0"}}
*/
export const historySeroom = (data) => {
    return axios({
        method: "post",
        url: "Battalarm_data_historyAction!serchByInfo",
        data: "json=" + JSON.stringify(data)
    })
}

/* 删除 
json=[{"stationname":"上海市-市辖区-FBS-埔东新区-五莲沪新开关站-电池组1",
"num":561804,"note":"单体电压低"}]
*/
export const hisDelet = (data) => {
    return axios({
        method: "post",
        url: "Battalarm_data_historyAction!delete",
        data: "json=" + JSON.stringify(data)
    })
}

/* 查询设备实时告警
json={"stationName1":"","stationName":"","alm_type":"0","page":{"pageSize":14,"pageCurr":1}}
*/
export const deviceAlarm = (data) => {
    return axios({
        method: "post",
        url: "Batt_devalarm_dataAction!serchByInfo",
        data: "json=" + JSON.stringify(data)
    })
}

/* 
确认告警
json=[{"num":"118001","stationName":"江苏省-连云港市-赣榆区-10kV紫菜工业园开闭所-LD9","alm_is_confirmed":1,
"alm_confirmed_time":"2020-09-11 09:51:57","note":"通信故障"}]
*/
export const deviceOk = (data) => {
    return axios({
        method: "post",
        url: "Batt_devalarm_dataAction!updatePro",
        data: "json=" + JSON.stringify(data)
    })
}

/* 删除告警
json=[{"num":"166763","stationName":"湖北省-黄石市-黄石港区-测试机房-61850设备","note":"通信故障"}]
*/
export const deviceDelete = (data) => {
    return axios({
        method: "post",
        url: "Batt_devalarm_dataAction!deletePro",
        data: "json=" + JSON.stringify(data)
    })
}

/* 
json=[{"num":"586192","stationName":"广西省-南宁市-西乡塘区-西乡塘区清川桥北基站-设备",
"note":"通信故障","alm_cleared_type":2,"alm_end_time":"2020-09-30 11:43:14","record_id":0}]
*/
export const CancelWarning = (data) => {
    return axios({
        method: "post",
        url: "Batt_devalarm_dataAction!cancelPro",
        data: "json=" + JSON.stringify(data)
    })
}

/* 查询设备历史告警记录
json={"binf":{"StationName":"","StationName1":"","BattProductDate":"2000-01-01 00:00:00",
"BattProductDate1":"2020-09-11 23:59:59"},"page":{"pageSize":10,"pageCurr":1}}
*/
export const deviceRecord = (data) => {
    return axios({
        method: "post",
        url: "Batt_devalarm_data_historyAction!serchByCondition  ",
        data: "json=" + JSON.stringify(data)
    })
}

/* 删除告警
json=[{"num":"202255","stationName":"湖北省-武汉市-BTS-东西湖区-假负载测试机房","note":"采集线告警"}]
*/
export const deviceArarmdel = (data) => {
    return axios({
        method: "post",
        url: "Batt_devalarm_data_historyAction!deletePro",
        data: "json=" + JSON.stringify(data)
    })
}

 src/pages/alarmWork/alarm-details.vue

File was renamed from src/pages/alarm/alarm-details.vue
@@ -185,7 +185,7 @@
    searchStatusById,
    dispatchTask,
    updateUserWork,
} from "@/pages/alarm/js/api"
} from "@/pages/alarmWork/js/api"
import { mapState } from "vuex"
import vUpload from "@/components/v-upload.vue"
export default {

 src/pages/alarmWork/alarm-handle.vue

File was renamed from src/pages/alarm/alarm-handle.vue
@@ -26,7 +26,7 @@

<script>
import vUpload from "@/components/v-upload.vue"
import { updateUserWork, serchByCondition } from "@/pages/alarm/js/api"
import { updateUserWork, serchByCondition } from "@/pages/alarmWork/js/api"
export default {
    components: {
        vUpload,

 src/pages/alarmWork/alarm-list.vue

File was renamed from src/pages/alarm/alarm-list.vue
@@ -1,6 +1,6 @@
<template>
    <div class="indexWarp">
        <van-nav-bar title="告警列表" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder></van-nav-bar>
        <van-nav-bar title="告警工单" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder></van-nav-bar>
        <van-tabs v-model="active" color="#4B88F9" animated swipeable background="#ffffff">
            <van-tab :title="tab.title" v-for="(tab,i) in tabs" :key="i">
                <van-pull-refresh v-model="tab.refreshing" @refresh="onRefresh(tab)">
@@ -31,7 +31,7 @@
import {
    searchAllByUserIdAndStatus,
    getTaskListWithFlag
} from "@/pages/alarm/js/api"
} from "@/pages/alarmWork/js/api"
import {
    mapState,
} from 'vuex';

 src/pages/alarmWork/js/api.js

 src/pages/alarmWork/user-list.vue

File was renamed from src/pages/alarm/user-list.vue
@@ -21,7 +21,7 @@
<script>
import {
    getUserInfoByStationId,
} from "@/pages/alarm/js/api"
} from "@/pages/alarmWork/js/api"
export default {
    data() {
        return {

 src/pages/menu.vue

@@ -4,7 +4,11 @@
        <van-grid clickable :column-num="3">
            <van-grid-item icon="browsing-history" text="实时监控" to="/realMonitoring" />
            <van-grid-item icon="column" text="历史监控" to="/historyMonitoring" />
            <van-grid-item icon="todo-list" text="告警列表" to="/alarmList" />
            <van-grid-item icon="todo-list" text="电池告警实时查询" to="/batteryrTimequery" />
            <van-grid-item icon="todo-list" text="电池告警历史查询" to="/batteryrHistoryquery" />
            <van-grid-item icon="todo-list" text="设备告警实时查询" to="/deviceTimequery" />
            <van-grid-item icon="todo-list" text="设备告警历史查询" to="/deviceHistoryquery" />
            <van-grid-item icon="todo-list" text="告警工单" to="/alarmList" />
        </van-grid>
    </div>
</template>

 src/router/routes.js

@@ -12,19 +12,19 @@
}, {
    path: '/alarmList',
    meta: {},
    component: (resolve) => require(['@/pages/alarm/alarm-list.vue'], resolve)
    component: (resolve) => require(['@/pages/alarmWork/alarm-list.vue'], resolve)
}, {
    path: '/alarmDetails',
    meta: {},
    component: (resolve) => require(['@/pages/alarm/alarm-details.vue'], resolve)
    component: (resolve) => require(['@/pages/alarmWork/alarm-details.vue'], resolve)
}, {
    path: '/alarmHandle',
    meta: {},
    component: (resolve) => require(['@/pages/alarm/alarm-handle.vue'], resolve)
    component: (resolve) => require(['@/pages/alarmWork/alarm-handle.vue'], resolve)
}, {
    path: '/userList',
    meta: {},
    component: (resolve) => require(['@/pages/alarm/user-list.vue'], resolve)
    component: (resolve) => require(['@/pages/alarmWork/user-list.vue'], resolve)
}, {
    path: '/realMonitoring',
    meta: {},
@@ -33,4 +33,20 @@
    path: '/historyMonitoring',
    meta: {},
    component: (resolve) => require(['@/pages/monitoring/history-monitoring.vue'], resolve)
}, {
    path: '/batteryrTimequery',
    meta: {},
    component: (resolve) => require(['@/pages/alarmMager/batteryrTimequery.vue'], resolve)
}, {
    path: '/batteryrHistoryquery',
    meta: {},
    component: (resolve) => require(['@/pages/alarmMager/batteryrHistoryquery.vue'], resolve)
}, {
    path: '/deviceTimequery',
    meta: {},
    component: (resolve) => require(['@/pages/alarmMager/deviceTimequery.vue'], resolve)
}, {
    path: '/deviceHistoryquery',
    meta: {},
    component: (resolve) => require(['@/pages/alarmMager/deviceHistoryquery.vue'], resolve)
},];