|
|
@@ -1,28 +1,303 @@
|
|
|
<template>
|
|
|
<view class="box">
|
|
|
+ <view class="search-box">
|
|
|
+ <view class="search-input">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="输入设备全称或简称"
|
|
|
+ v-model="devName"
|
|
|
+ placeholder-class="placeholder-style"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="search-btn" @click="searchBox"> 搜索 </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <template v-if="alarmRetentionLists.length > 0">
|
|
|
+ <view
|
|
|
+ class="meauList"
|
|
|
+ v-for="item in alarmRetentionLists"
|
|
|
+ :key="item.devId"
|
|
|
+ >
|
|
|
+ <view class="menu-item">
|
|
|
+ <view class="meanLeft">
|
|
|
+ <text>设备名称</text>
|
|
|
+ </view>
|
|
|
+ <view class="meanRight">
|
|
|
+ <text>{{ item.devName }}</text></view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="menu-item">
|
|
|
+ <view class="meanLeft">
|
|
|
+ <text>发生时间</text>
|
|
|
+ </view>
|
|
|
+ <view class="meanRight">
|
|
|
+ <text>{{ item.createTime }}</text></view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="menu-item">
|
|
|
+ <view class="meanLeft">
|
|
|
+ <text>告警类型</text>
|
|
|
+ </view>
|
|
|
+ <view class="meanRight">
|
|
|
+ <text
|
|
|
+ v-if="item.eventType == 0"
|
|
|
+ style="color: #e2a746"
|
|
|
+ >{{ getEventTypeName(item.eventType) }}</text
|
|
|
+ >
|
|
|
+ <text
|
|
|
+ v-if="item.eventType == 1"
|
|
|
+ style="color: #f4726e"
|
|
|
+ >{{ getEventTypeName(item.eventType) }}</text
|
|
|
+ >
|
|
|
+ <text
|
|
|
+ v-if="item.eventType == 2"
|
|
|
+ style="color: #919399"
|
|
|
+ >{{ getEventTypeName(item.eventType) }}</text
|
|
|
+ >
|
|
|
+ <text
|
|
|
+ v-if="item.eventType == 3"
|
|
|
+ style="color: #cf6f29"
|
|
|
+ >{{ getEventTypeName(item.eventType) }}</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view style="height: 20rpx"></view>
|
|
|
<alarModel />
|
|
|
</view>
|
|
|
</template>
|
|
|
+
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- warnList: "",
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ devName: "",
|
|
|
+ alarmRetentionLists: [],
|
|
|
+ onReachJudge: true,
|
|
|
+ warmTypeList: [],
|
|
|
};
|
|
|
},
|
|
|
- computed: {},
|
|
|
- methods: {},
|
|
|
- onLoad() {},
|
|
|
- onShow() {},
|
|
|
+ methods: {
|
|
|
+ searchBox() {
|
|
|
+ this.pageNo = 1;
|
|
|
+ this.alarmRetentionLists = [];
|
|
|
+ this.getWarnList();
|
|
|
+ },
|
|
|
+ getWarnList() {
|
|
|
+ if (!this.onReachJudge) return;
|
|
|
+ uni.showLoading({
|
|
|
+ title: "查询中...",
|
|
|
+ });
|
|
|
+ this.$http
|
|
|
+ .post(
|
|
|
+ "wap/stats/alarmRetentionQuery",
|
|
|
+ {
|
|
|
+ pageNo: this.pageNo,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/json;charset=UTF-8",
|
|
|
+ token: uni.getStorageSync("tokenValue") || "",
|
|
|
+ },
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.data) {
|
|
|
+ // this.warmNum = res.data.data.total;
|
|
|
+ if (res.data.data.rows.length > 0) {
|
|
|
+ this.alarmRetentionLists =
|
|
|
+ this.alarmRetentionLists.concat(
|
|
|
+ res.data.data.rows
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ this.alarmRetentionLists.length ==
|
|
|
+ res.data.data.total
|
|
|
+ ) {
|
|
|
+ console.log("没有更多数据了");
|
|
|
+ this.onReachJudge = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ uni.hideLoading();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getwarmType() {
|
|
|
+ this.$http
|
|
|
+ .get("pub/dic/query", { dicType: "alarm_event_type" })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.data) {
|
|
|
+ this.warmTypeList = res.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getEventTypeName(eventType) {
|
|
|
+ return (
|
|
|
+ this.warmTypeList.find((item) => item.itemCode == eventType)
|
|
|
+ ?.itemName || "未知"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ this.pageNo += 1;
|
|
|
+ this.getWarnList();
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.pageNo = 1;
|
|
|
+ this.alarmRetentionLists = [];
|
|
|
+ this.getWarnList();
|
|
|
+ setTimeout(function () {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.onReachJudge = true;
|
|
|
+ Promise.all([this.getWarnList()]).then(() => {
|
|
|
+ this.getwarmType();
|
|
|
+ });
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="less" scoped>
|
|
|
+// Main Styles
|
|
|
.box {
|
|
|
padding: 10rpx 18rpx;
|
|
|
- overflow: scroll;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
|
|
|
box-sizing: border-box;
|
|
|
+ .search-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
+
|
|
|
+ .dropdown-wrapper {
|
|
|
+ padding: 0 10rpx;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .picker-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-input {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .placeholder-style {
|
|
|
+ color: #999;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-btn {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: chocolate;
|
|
|
+ color: white;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .meauList {
|
|
|
+ width: 710rpx;
|
|
|
+ margin: 18rpx auto;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
|
+ overflow: hidden;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ .menu-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 32rpx;
|
|
|
+ padding: 32rpx 0;
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
+
|
|
|
+ &:last-of-type {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meanLeft {
|
|
|
+ flex: 1;
|
|
|
+ color: #666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meanRight {
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ color: #333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-bottom {
|
|
|
+ display: flex;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ border-top: 1rpx solid #f0f0f0;
|
|
|
+
|
|
|
+ .meanLeft,
|
|
|
+ .meanRight {
|
|
|
+ flex: 1;
|
|
|
+ height: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .meanLeft {
|
|
|
+ background: #7b5245;
|
|
|
+ color: white;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meanRight {
|
|
|
+ background: fade(#ff4d4f, 10%);
|
|
|
+ color: #ff4d4f;
|
|
|
+ border: 1rpx solid fade(#ff4d4f, 30%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
