告警中心

packageA/alerts/detail.vue

@@ -0,0 +1,207 @@
+<template>
+    <view>
+        <cu-custom id="custom"
+            bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
+            :isBack="true">
+            <block slot="backText">返回</block>
+            <block slot="content">
+                告警详情
+            </block>
+        </cu-custom>
+
+        <My_listbox ref="List" :pullDown="false" @getlist="getlist" :empty="empty">
+            <view class="detail" v-if="detail.lasteventtime">
+                <view class="title">
+                    {{ detail.eventname || ' --' }}
+                </view>
+                <view class="row">设备：{{ detail.devicename }}({{ detail.serialnumber }})</view>
+                <view class="time-row">最近告警时间： <view class="tag" :style="{
+                    color: tagStyleList[detail.lasteventlevel + 1].color,
+                    backgroundColor: tagStyleList[detail.lasteventlevel + 1].backgroundColor,
+                }">{{ tagStyleList[detail.lasteventlevel + 1].name }}</view> <text class="time">{{
+    detail.lasteventtime }}</text>
+                </view>
+            </view>
+            <view class="head" :style="{ top: tovw(CustomBar) }">
+                <view class="left">
+                    告警日志
+                </view>
+                <time-horizon @onConfirm="dateRange" />
+            </view>
+            <view class="item" v-for="item in list" :key="item.eventtime">
+                <view class="time">{{ item.eventtime }}</view>
+                <view class="row">
+                    暂时没有描述，触发
+                    <text class="text" :style="{ color: tagStyleList[item.level + 1].color }">
+                        {{ tagStyleList[item.level + 1].name }}告警
+                    </text>
+                </view>
+            </view>
+            <view style="height: 30px;" />
+        </My_listbox>
+
+
+    </view>
+</template>
+
+<script>
+import { styleList } from "./modules/styleList";
+let fun = null;
+export default {
+    data() {
+        return {
+            empty: true,
+            w_event_logid: 0,
+            detail: {},
+            CustomBar: 0,
+            tagStyleList: styleList,
+            "content": {
+                "pageNumber": 1,
+                "pageSize": 20,
+                "where": {
+                    "begindate": "",
+                    "enddate": ""
+                }
+            },
+            list: []
+        }
+    },
+    onLoad(e) {
+        if (e.id == 0) {
+            uni.showToast({
+                title: '查询错误',
+                icon: "none",
+                mask: true,
+            })
+            setTimeout(() => {
+                uni.navigateBack();
+            }, 1000)
+        } else {
+            this.content.w_event_logid = e.id;
+            this.getDetail()
+            this.getlist();
+        }
+    },
+    mounted() {
+        this.$refs.List.setHeight();
+    },
+    methods: {
+        getDetail() {
+            this.$Http.basic({
+                "id": 20230821152602,
+                content: {
+                    "w_event_logid": this.content.w_event_logid
+                }
+            }).then(res => {
+                console.log("告警详情", res)
+                if (this.cutoff(res.msg)) return;
+                this.detail = res.data;
+            })
+        },
+        getlist(init = false) {
+            let content = this.content;
+            if (init) {
+                content.pageNumber = 1;
+                content.pageTotal = 1;
+            }
+            if (content.pageNumber > content.pageTotal) return;
+            this.$Http.basic({
+                "id": 20230816095902,
+                content
+            }).then(res => {
+                console.log("告警日志", res)
+                if (this.cutoff(res.msg)) return;
+                fun && fun();
+                content.pageNumber += 1;
+                content.pageTotal = res.pageTotal;
+                this.content = content;
+                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data)
+                this.empty = res.data.length == 0;
+            })
+        },
+        dateRange(e, callback) {
+            this.content.where.begindate = e[0];
+            this.content.where.enddate = e[1];
+            fun = callback;
+            this.getlist(true);
+        }
+    },
+}
+
+</script>
+
+<style lang="scss" scoped>
+.detail {
+    background: #fff;
+    width: 355px;
+    margin: 10px auto 0;
+    border-radius: 4px;
+    padding: 10px;
+    box-sizing: border-box;
+
+    .title {
+        font-size: 16px;
+    }
+
+    .row,
+    .time-row {
+        font-size: 14px;
+        line-height: 22px;
+        margin-top: 4px;
+    }
+
+    .time-row {
+        display: flex;
+
+        .tag {
+            padding: 0 6px;
+            border-radius: 4px;
+            margin-right: 6px;
+        }
+
+        .time {
+            color: #052E5D;
+            flex-wrap: bold;
+        }
+    }
+}
+
+.head {
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 355px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0 10px;
+    background: #052E5D;
+    position: sticky;
+    z-index: 9;
+
+    .left {
+        color: #fff;
+        font-weight: bold;
+    }
+}
+
+
+.item {
+    width: 355px;
+    padding: 10px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    margin: 0 auto 10px;
+    background: #fff;
+
+    .time {
+        color: #333;
+        flex-wrap: bold;
+        margin-bottom: 8px;
+    }
+
+    .row {
+        color: #999;
+    }
+}
+</style>

packageA/alerts/index.vue

@@ -0,0 +1,153 @@
+<template>
+    <view>
+        <cu-custom id="custom"
+            bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
+            :isBack="true">
+            <block slot="backText">返回</block>
+            <block slot="content">
+                告警中心
+            </block>
+        </cu-custom>
+        <u-tabs :list="list1" :activeStyle="{ fontWeight: 'bold' }" @change="tabChange">
+            <navigator url="#" slot="right" class="right" @tap="openSearch">
+                <view :style="{ color: showSearch ? '#007aff' : '#fff' }" class="iconfont icon-a-sousuolansousuo" />
+            </navigator>
+        </u-tabs>
+        <u-transition :show="showSearch" mode="fade-down">
+            <My_search ref="Search" :focus="focus" @onFilter="onFilter" :dateRange="true" @startSearch="startSearch" />
+        </u-transition>
+        <view style="height: 5px;" v-if="!focus" />
+        <My_listbox ref="List" @getlist="getlist" :empty='empty'>
+            <List :list="list" />
+        </My_listbox>
+    </view>
+</template>
+
+<script>
+import List from "./modules/list.vue"
+export default {
+    name: "alerts",
+    components: { List },
+    data() {
+        return {
+            showSearch: true,
+            empty: true,
+            list1: [{
+                name: '待处理',
+                badge: {
+                    value: 0,
+                }
+            }, {
+                name: '已处理',
+                badge: {
+                    value: 0,
+                }
+            }],
+            content: {
+                pageNumber: 1,
+                pageTotal: 1,
+                pageSize: 20,
+                isWeChat: true,
+                where: {
+                    condition: "",
+                    buildtype: "",
+                    level: "",
+                    status: "待处理",
+                    begindate: "",
+                    enddate: ""
+                }
+            },
+            focus: false,
+            list: []
+        }
+    },
+    mounted() {
+        this.getlist(true);
+        setTimeout(() => {
+            this.$refs.List.setHeight();
+        }, 350)
+    },
+    methods: {
+        getlist(init) {
+            let content = this.content;
+            if (init) {
+                content.pageNumber = 1;
+                content.pageTotal = 1;
+            }
+            if (content.pageNumber > content.pageTotal) return;
+            this.$Http.basic({
+                "id": 20230816095802,
+                content
+            }).then(res => {
+                console.log("告警列表", res)
+                if (this.cutoff(res.msg)) return;
+                this.$refs.List.RefreshToComplete();
+                this.$refs.List.setHeight();
+                this.$refs.Search.onFinish();
+                this.empty = !res.data.length;
+                content.pageNumber = res.pageNumber + 1;
+                content.pageTotal = res.pageTotal;
+                try {
+                    this.list1[0].badge.value = res.tips.undeal.count;
+                    this.list1[1].badge.value = res.tips.deal.count;
+                } catch (error) {
+
+                }
+                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data)
+                this.content = content;
+            })
+        },
+        openSearch() {
+            this.showSearch = !this.showSearch;
+            setTimeout(() => {
+                this.$refs.List.setHeight();
+                this.focus = this.showSearch;
+            }, 350)
+        },
+        tabChange(e) {
+            this.content.where.status = e.name;
+            this.getlist(true)
+        },
+        startSearch(condition) {
+            if (condition == this.content.where.condition) return;
+            this.content.where.condition = condition;
+            this.getlist(true)
+        },
+        onFilter(e) {
+            this.content.where = Object.assign(this.content.where, e);
+            console.log(this.content.where)
+            this.getlist(true);
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+/deep/.u-tabs {
+    height: 44px;
+    // background: #052E5D;
+
+    .u-tabs__wrapper__nav {
+        height: 44px;
+
+        .u-tabs__wrapper__nav__item {
+            height: 44px !important;
+
+            .u-tabs__wrapper__nav__item__text {
+                color: #fff !important;
+            }
+        }
+    }
+}
+
+.right {
+    height: 44px;
+    line-height: 44px;
+    width: 44px;
+    text-align: center;
+
+    .iconfont {
+        font-size: 16px;
+    }
+}
+</style>

packageA/alerts/modules/list.vue

@@ -0,0 +1,76 @@
+<template>
+    <view>
+        <navigator :url="'/packageA/alerts/detail?id=' + item.w_event_logid" class="item" hover-class="navigator-hover"
+            v-for="item in list " :key="item.w_event_logid">
+            <view class="tag" :style="{
+                color: tagStyleList[item.lasteventlevel + 1].color,
+                backgroundColor: tagStyleList[item.lasteventlevel + 1].backgroundColor,
+            }">{{ tagStyleList[item.lasteventlevel + 1].name }}</view>
+            <view class="title u-line-1">{{ item.eventname }}</view>
+            <view class="row u-line-1">设备:{{ item.prodname || ' --' }}</view>
+            <view class="row u-line-1">告警描述:{{ item.lasteventparamvalues || ' --' }}</view>
+            <view class="time">
+                最新告警时间：{{ item.lasteventtime }}
+            </view>
+        </navigator>
+    </view>
+</template>
+<script>
+import { styleList } from "./styleList";
+export default {
+    name: 'List',
+    props: {
+        list: Array
+    },
+    data() {
+        return {
+            tagStyleList: styleList
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+    position: relative;
+    width: 355px;
+    padding: 0 10px;
+    border-radius: 4px;
+    box-sizing: border-box;
+    margin: 0 auto;
+    margin-bottom: 10px;
+    background: #fff;
+    overflow: hidden;
+
+    .title {
+        color: #004684;
+        font-weight: bold;
+        line-height: 20px;
+        text-indent: 34px;
+        margin-top: 4px;
+    }
+
+    .tag {
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 2px 6px;
+        font-size: 14px;
+        border-radius: 0 0 4px 0;
+    }
+
+    .row {
+        font-size: 12px;
+        color: #666;
+        line-height: 24px;
+    }
+
+    .time {
+        margin-top: 2px;
+        padding: 8px 0;
+        color: #555;
+        font-size: 12px;
+        border-top: 1px solid #999;
+    }
+}
+</style>

packageA/alerts/modules/styleList.js

@@ -0,0 +1,28 @@
+module.exports = {
+    styleList: [{
+        name: "紧急",
+        color: "#EA162D",
+        brColor: "#FF8B97",
+        backgroundColor: "#FFE3E6",
+    }, {
+        name: "重要",
+        color: "#E55800",
+        brColor: "#FFA972",
+        backgroundColor: "#FFE4D3"
+    }, {
+        name: "一般",
+        color: "#27AD00",
+        brColor: "#87D96F",
+        backgroundColor: "#E8FFE2"
+    }, {
+        name: "提醒",
+        color: "#096dd9",
+        brColor: "#91d5ff",
+        backgroundColor: "#e6f7ff"
+    }, {
+        name: "其他",
+        color: "#777777",
+        brColor: "#CCCCCC",
+        backgroundColor: "F5F5F5"
+    }]
+}