616 lines
13 KiB
Vue
616 lines
13 KiB
Vue
<template>
|
||
<!-- 蜂箱预警 -->
|
||
<view class=" page">
|
||
<view class="max-box">
|
||
<!-- <view class="suosou-fx">
|
||
<view class="section_3 ">
|
||
<view class="text_3">
|
||
<view class="input-fu">
|
||
<image class="image_6 inpt-text-icon"
|
||
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654c3cbd5a7e3f03102425f9/654c44a487ca550011b12cc1/16994973961877418353.png" />
|
||
<input v-model="qrcode" class="inpt-text" type="text" value="" placeholder="蜂箱（自定义）编号搜索" maxlength="22"
|
||
@input="mfInput" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- <view class="tabs">
|
||
<u-tabs :list="list1" @click="click"></u-tabs>
|
||
</view -->
|
||
|
||
|
||
<view class="flex-col self-start group_4">
|
||
<view class="flex-col">
|
||
<view class="flex-col space-y-6 padding-mi padding-min-box" v-for="(item, index) in fromList"
|
||
:key="index" @scrolltolower="onReachBottom">
|
||
<!-- 报错代码 -->
|
||
|
||
<view class="items-end">
|
||
<view class="flex-col group_5">
|
||
<!-- 日期 -->
|
||
<view v-if='!isSameDay(item,index)' class="taxt-center">
|
||
<view style="padding: 15rpx 20rpx 30rpx 20rpx;"
|
||
class="flex-col justify-start self-end text-wrapper">
|
||
<view class="font_2 text_5">{{getTimeByFormat(item.create_time,"MM-dd")}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 时间 -->
|
||
<view class="time-text">
|
||
<view class=" group_6 space-x-10">
|
||
<view class="font_3 text_6">{{getTimeByFormat(item.create_time,"HH:mm")}}</view>
|
||
<image class="image_7 image_8" :src="imgFn(item.type_text)" />
|
||
<view class="font_4">{{item.type_text}}</view>
|
||
</view>
|
||
<view @click="clickweichuli(item)"
|
||
class="flex-col justify-start text-wrapper_2 icon-text-r"
|
||
:id="item.status_text == '已处理' ? 'text-wrapper_2-bgc2' : 'text-wrapper_2-bgc1' ">
|
||
<view class="font_5">{{item.status_text}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class=" justify-evenly group_7 flex-box-love">
|
||
<view v-if="fromList.length>0&&index!=(fromList.length-1)" class="xiantiao">
|
||
<view class="ver-line"></view>
|
||
</view>
|
||
<view style="margin-top: 24rpx;" class="flex-col self-start group_8 space-y-6 ">
|
||
<view class="items-end space-x-6 didian-text-box">
|
||
<image class="shrink-0 image_9"
|
||
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654c3cbd5a7e3f03102425f9/654c44a487ca550011b12cc1/16994973961906195248.png" />
|
||
<view class="font_6">{{item.apiary_name}}</view>
|
||
<view class="group_9">
|
||
<view class="font_6">{{item.beehive_name}}</view>
|
||
<view class="font_7">{{item.beehive_qrcode}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="font_8 text_7">{{item.remark}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import request from '@/utils/request'
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
tabIndex: 0,
|
||
items: [],
|
||
page: 1,
|
||
fromList: [],
|
||
// tab
|
||
list1: [{
|
||
name: '全部'
|
||
}],
|
||
qrcode: '',
|
||
id:'',
|
||
qrcodes:'',
|
||
pagenum: 1,
|
||
pagesize: 15, // 一页多少数据
|
||
isLoading: false, // 是否正在加载数据
|
||
noMoreData: false, // 是否没有更多数据
|
||
total: 0
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
this.id = option.id
|
||
this.qrcodes = option.qrcode
|
||
console.log(option);
|
||
this.getfengchangList()
|
||
},
|
||
onShow() {
|
||
// this.listData()
|
||
},
|
||
|
||
methods: {
|
||
// 判断是否同一天
|
||
isSameDay(item, index) {
|
||
let time1 = item.create_time
|
||
let time2 = this.fromList[index - 1]?.create_time
|
||
const date1 = new Date(time1);
|
||
const date2 = new Date(time2);
|
||
return (
|
||
date1.getFullYear() === date2.getFullYear() &&
|
||
date1.getMonth() === date2.getMonth() &&
|
||
date1.getDate() === date2.getDate()
|
||
);
|
||
},
|
||
getTimeByFormat(timestamp, format) {
|
||
// console.log(date,format);
|
||
const now = new Date(timestamp);
|
||
const month = now.getMonth() + 1; // 注意：getMonth() 返回的是 0 到 11，所以需要加 1
|
||
const day = now.getDate();
|
||
|
||
// 补零函数，确保单个数字前面加零
|
||
const padZero = (num) => (num < 10 ? `0${num}` : num);
|
||
|
||
// 根据传入的格式进行处理
|
||
switch (format) {
|
||
case "HH:mm:ss":
|
||
return `${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
|
||
case "HH:mm":
|
||
return `${padZero(now.getHours())}:${padZero(now.getMinutes())}`;
|
||
case "mm:ss":
|
||
return `${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
|
||
case "MM-dd":
|
||
// console.log(`${padZero(month)}月${padZero(day)}日`)
|
||
return `${padZero(month)}月${padZero(day)}日`;
|
||
// 可以添加其他格式的处理
|
||
default:
|
||
return "Invalid Format";
|
||
}
|
||
},
|
||
click(item) {
|
||
// console.log('item', item);
|
||
this.activeFengchang = item
|
||
this.listData()
|
||
},
|
||
listData() {
|
||
let data = {
|
||
apiary_id: this.activeFengchang.id,
|
||
qrcode: this.qrcodes,
|
||
}
|
||
request.post('/api/beehive/warning', data).then(res => {
|
||
this.total = res.data.total
|
||
if (res.data.data.length > 0) {
|
||
// 有数据，追加到列表
|
||
this.fromList = []
|
||
this.fromList = this.fromList.concat(...res.data.data)
|
||
this.pagenum++
|
||
} else {
|
||
// 没有更多数据
|
||
this.noMoreData = true;
|
||
}
|
||
this.isLoading = false;
|
||
console.log(this.fromList,'555555555')
|
||
})
|
||
// console.log(res.data.data)
|
||
},
|
||
onReachBottom() {
|
||
let sum = this.total
|
||
console.log(sum,this.fromList.length);
|
||
if (this.fromList.length < sum) {
|
||
this.listData();
|
||
} else {
|
||
uni.showToast({
|
||
title: '没有更多预警记录了',
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
}
|
||
},
|
||
getfengchangList() {
|
||
// request.post('/api/beehive/warning', {
|
||
// apiary_id: this.id,
|
||
// qrcode: this.qrcodes
|
||
// }).then(res => {
|
||
// this.fromList = [...res.data.data]
|
||
// // this.click(this.list1[0])
|
||
// })
|
||
|
||
request.get('/api/apiary/index', {}).then(res => {
|
||
this.list1.push(...res.data.data)
|
||
this.click(this.list1[0])
|
||
})
|
||
},
|
||
changeStatus(item) {
|
||
request.put('/api/beehive/warningUpdate/' + item.id, {}).then(res => {
|
||
this.listData()
|
||
})
|
||
},
|
||
|
||
clickweichuli(item) {
|
||
if (item.status == 1) {
|
||
return
|
||
}
|
||
let that = this
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: '是否已经处理完此预警信息!',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
// console.log('用户点击确定');
|
||
that.changeStatus(item)
|
||
} else if (res.cancel) {
|
||
// console.log('用户点击取消');
|
||
}
|
||
}
|
||
})
|
||
},
|
||
mfInput(key) {
|
||
this.listData()
|
||
},
|
||
imgFn(val) {
|
||
if (val == '出勤异常') {
|
||
return '/static/蜂箱预警-出勤异常.png'
|
||
} else if (val == '震动异常') {
|
||
return '/static/蜂箱预警-震动异常.png'
|
||
} else if (val == '温度异常') {
|
||
return '/static/蜂箱预警-温度异常.png'
|
||
} else if (val == '湿度异常') {
|
||
return '/static/蜂箱预警-湿度异常.png'
|
||
} else if (val == '重量异常') {
|
||
return '/static/蜂箱预警-重量异常.png'
|
||
} else if (val == '电量不足') {
|
||
return '/static/蜂箱预警-电量异常.png'
|
||
}
|
||
},
|
||
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.didian-text-box {
|
||
display: flex;
|
||
}
|
||
|
||
.flex-box-love {
|
||
display: flex;
|
||
}
|
||
|
||
.xiantiao {
|
||
display: flex;
|
||
}
|
||
|
||
.icon-text-r {
|
||
text-align: center;
|
||
padding-bottom: 10rpx;
|
||
}
|
||
|
||
.padding-min-box {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.max-box {
|
||
margin: 0 24rpx;
|
||
padding-bottom: 100rpx;
|
||
}
|
||
|
||
.time-text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.taxt-center {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.input-fu {
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.inpt-text {
|
||
text-align: center;
|
||
}
|
||
|
||
.inpt-text-icon {
|
||
position: absolute;
|
||
top: 5rpx;
|
||
left: 10rpx;
|
||
}
|
||
|
||
.suosou-fx {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.page {
|
||
background-color: #ffffff;
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
height: 100%;
|
||
}
|
||
|
||
.section {
|
||
padding: 36rpx 28rpx 18rpx 42rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.space-y-16>view:not(:first-child),
|
||
.space-y-16>text:not(:first-child),
|
||
.space-y-16>image:not(:first-child) {
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.group {
|
||
padding-left: 28rpx;
|
||
}
|
||
|
||
.text {
|
||
color: #7d7d7d;
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansCN;
|
||
font-weight: 700;
|
||
line-height: 22rpx;
|
||
}
|
||
|
||
.space-x-6>view:not(:first-child),
|
||
.space-x-6>text:not(:first-child),
|
||
.space-x-6>image:not(:first-child) {
|
||
margin-left: 12rpx;
|
||
}
|
||
|
||
.image {
|
||
width: 34rpx;
|
||
height: 22rpx;
|
||
}
|
||
|
||
.image_2 {
|
||
width: 30rpx;
|
||
height: 22rpx;
|
||
}
|
||
|
||
.image_3 {
|
||
width: 48rpx;
|
||
height: 23rpx;
|
||
}
|
||
|
||
.group_2 {
|
||
padding: 12rpx 0;
|
||
}
|
||
|
||
.image_5 {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.pos_2 {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.text_2 {
|
||
color: #000000;
|
||
font-size: 36rpx;
|
||
font-family: AlibabaPuHuiTi;
|
||
line-height: 33rpx;
|
||
}
|
||
|
||
.image_4 {
|
||
filter: drop-shadow(0px 4rpx 4rpx #00000040);
|
||
border-radius: 120rpx;
|
||
width: 158rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.pos {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.section_2 {
|
||
margin-top: -8rpx;
|
||
padding-top: 20rpx;
|
||
background-color: #ffffff;
|
||
height: 1456rpx;
|
||
border: solid 4rpx #e8e8e8;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.section_3 {
|
||
padding: 8rpx 24rpx;
|
||
background-color: #e2e2e2;
|
||
width: 558rpx;
|
||
border: solid 2rpx #ffffff;
|
||
border-radius: 120rpx;
|
||
}
|
||
|
||
.image_6 {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.text_3 {
|
||
/* margin-right: 26rpx; */
|
||
color: #888888;
|
||
font-size: 28rpx;
|
||
font-family: Nunito;
|
||
font-weight: 600;
|
||
line-height: 27rpx;
|
||
}
|
||
|
||
.group_3 {
|
||
margin-top: 28rpx;
|
||
padding: 0 40rpx;
|
||
width: 750rpx;
|
||
}
|
||
|
||
.font_1 {
|
||
font-size: 32rpx;
|
||
font-family: 微软雅黑;
|
||
line-height: 30rpx;
|
||
color: #888888;
|
||
}
|
||
|
||
.text_4 {
|
||
color: #000000;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* .group_4 {
|
||
margin: 24rpx 0 -24rpx;
|
||
padding: 0 52rpx;
|
||
width: 750rpx;
|
||
} */
|
||
|
||
.group_5 {
|
||
width: 100%;
|
||
}
|
||
|
||
.text-wrapper {
|
||
text-align: center;
|
||
padding: 0rpx 0 24rpx;
|
||
border-radius: 4rpx;
|
||
background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654c3cbd5a7e3f03102425f9/654c44a487ca550011b12cc1/16994973961902704708.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 148rpx;
|
||
}
|
||
|
||
.font_2 {
|
||
font-size: 24rpx;
|
||
font-family: 微软雅黑;
|
||
line-height: 22rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.text_5 {
|
||
line-height: 21rpx;
|
||
}
|
||
|
||
.group_6 {
|
||
/* padding-top: 10rpx; */
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.space-x-10>view:not(:first-child),
|
||
.space-x-10>text:not(:first-child),
|
||
.space-x-10>image:not(:first-child) {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.font_3 {
|
||
font-size: 28rpx;
|
||
font-family: 微软雅黑;
|
||
line-height: 22rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.text_6 {
|
||
font-size: 30rpx;
|
||
width: 100rpx;
|
||
}
|
||
|
||
.image_7 {
|
||
margin-left: 28rpx;
|
||
border-radius: 50%;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.image_8 {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.font_4 {
|
||
font-size: 28rpx;
|
||
font-family: 微软雅黑;
|
||
line-height: 26rpx;
|
||
font-weight: 700;
|
||
color: #ff5733;
|
||
}
|
||
|
||
#text-wrapper_2-bgc1 {
|
||
background-color: #ff5733;
|
||
}
|
||
|
||
#text-wrapper_2-gbc2 {
|
||
background-color: #8888;
|
||
}
|
||
|
||
.text-wrapper_2 {
|
||
margin-right: 12rpx;
|
||
padding: 10rpx 15rpx;
|
||
background-color: #8888;
|
||
border-radius: 10rpx;
|
||
width: 90rpx;
|
||
}
|
||
|
||
.font_5 {
|
||
font-size: 20rpx;
|
||
font-family: 微软雅黑;
|
||
line-height: 18rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.group_7 {
|
||
padding-left: 116rpx;
|
||
padding-right: 20rpx;
|
||
}
|
||
|
||
.section_4 {
|
||
background-image: repeating-linear-gradient(90deg, #888888, #888888 3.51%, transparent 3.51%, transparent 7.019%);
|
||
background-position: -2rpx 0px;
|
||
width: 2rpx;
|
||
height: 114rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.group_8 {
|
||
padding: 0 32rpx;
|
||
}
|
||
|
||
.space-y-6>view:not(:first-child),
|
||
.space-y-6>text:not(:first-child),
|
||
.space-y-6>image:not(:first-child) {
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.image_9 {
|
||
width: 24rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.font_6 {
|
||
font-size: 24rpx;
|
||
font-family: 微软雅黑;
|
||
line-height: 22rpx;
|
||
color: #888888;
|
||
}
|
||
|
||
.group_9 {
|
||
line-height: 22rpx;
|
||
height: 22rpx;
|
||
display: flex;
|
||
}
|
||
|
||
.font_7 {
|
||
font-size: 24rpx;
|
||
font-family: 微软雅黑;
|
||
line-height: 18rpx;
|
||
color: #89c28c;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.font_8 {
|
||
font-size: 24rpx;
|
||
font-family: 微软雅黑;
|
||
line-height: 22rpx;
|
||
font-weight: 700;
|
||
color: #000000;
|
||
}
|
||
|
||
.text_7 {
|
||
line-height: 28rpx;
|
||
}
|
||
|
||
.ver-line {
|
||
margin-left: 22rpx;
|
||
height: 200rpx;
|
||
width: 3rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #e7dfe1;
|
||
}
|
||
</style> |