bigdata_WX/pages/qxzyj/cbwarn.vue

<template>
	<view class="content">
		<view class="cbwtop">
			<image :src="bannersrc" mode="" class="image">
			</image>
			<view class="tab-box">
				<view v-for="(item, index) in equipArr" :key="index" @click="tabClick(index)"
					:class="['tab-item', active == index ? 'active' : '']">
					<text>{{ item }}</text>
					<text class="bottom-line"></text>
				</view>
			</view>
			<view class="timeandtype" v-if="active==0 && wranlistdata.length > 0">
				<view class="timebox">
					<view class="firsttime" @click="timeshow=true">
						{{start_time==""?'请选择开始时间':start_time}}
					</view>
					<view class="jiange">
						-
					</view>
					<view class="endtime" @click="timeshow=true">
						{{end_time==""?'请选择结束时间':end_time}}
					</view>
					<view class="jiange" @click="closetime">
						<u-icon name="close-circle" color="#999999"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-show="active==0">
			<view class="warmlistbox" v-if="wranlistdata.length > 0">
				<view class="warmlistbox_item" v-for="item in wranlistdata" :key="item.id" @click="singleread(item)">
					<view class="warmlistbox_item_title" :style="{'border-color':item.status==1?'#14A478':'#fd4646'}">
						<!-- {{recordtypelist[item.warning_type].label}} -->
						{{device_type == 5 ? '气象' : '墒情'}}预警
					</view>
					<view class="warmlistbox_item_text">
						<view class="item_text_item">
							<view class="item_text_item_f">
								设备编号：
							</view>
							<view class="item_text_item_e">
								{{item.device_id}}
							</view>
						</view>
						<view class="item_text_item">
							<view class="item_text_item_f">
								设备位置：
							</view>
							<view class="item_text_item_e" style="display: flex;">
								<u-icon name="map-fill" color="#14A478" @click.stop="tomap(item)"></u-icon>
								<view class="" style="margin-left: 10rpx;color: #14A478;" @click.stop="tomap(item)">
									查看
								</view>
							</view>
						</view>
						<view class="item_text_item">
							<view class="item_text_item_f">
								设备预警：
							</view>
							<view class="item_text_item_e">
								{{item.warning_content}}
							</view>
						</view>
						<view class="item_text_sta">
							<view class="" style="color: #959699;">
								{{item.upl_time | timeFormat()}}
							</view>
							<view class="" :style="{'margin-left':'10rpx','color':item.status==1?'#959699':'#FD4646'}">
								{{item.status==1?'已读':'未读'}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="warmlistbox empty" v-else>
				暂无数据
			</view>
		</view>
		<view class="warmissuebox" v-show="active == 1">
			<view class="warmissue">
				<view class="warmissue_itemone">
					<view class="">
						短信剩余条数：
					</view>
					<view class="">
						{{total_sms_counts}}
					</view>
				</view>
				<view class="warmissue_item">
					<view class="warmissue_item_title">
						短信内容：
					</view>
					<view class="warmissue_item_text">
						<view class="">
							尊敬的用户您好，管理员 提醒您，结合近期设备上报的数据，
						</view>
						<view class="" style="margin: 20rpx 0 ;">
							<u-input v-model="wormvalue" type="textarea" :border="true" maxlength="30" />
						</view>
						<view class="">
							请注意防范。
						</view>
					</view>
				</view>
				<view class="">
					<view class="warmissue_itemone">
						<view class="">
							短信接受人：
						</view>
						<view class="" style="color: #14A478;" @click="tobook">
							预警通讯录编辑
						</view>
					</view>
					<view class="warmissue_itemtwo" @click="accServiceShow = true">
						<view class="itemtwo_left" v-show="!userphone.length">
							请选择短信接收人
						</view>
						<view class="itemtwo_left" v-show="userphone.length">
							<view class="" style="margin-right: 20rpx;" v-for="item in userphone" :key="item.value">
								{{item.name}}
							</view>
						</view>
						<u-icon name="arrow-down" class="icon" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="sendbox" @click="send">
				发送预警
			</view>
		</view>
		<view class="wornsetbox" v-show="active == 2">
			<view class="empty" v-if="configlist.length == 0">
				暂无数据
			</view>
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in configlist" :key="item.id"
				@click="delconfig(item.id)" :options="options" style="margin-bottom: 30rpx;">
				<view class="wornsetbox_item" @click="toset(item.id)">
					<view class="">
						{{item.title}}
					</view>
					<view class="" @click.stop>
						<u-switch v-model="item.statustf" size="40" style="margin-top: 13rpx;"
							@change="swichchange($event,item.id)"></u-switch>
					</view>
				</view>
			</u-swipe-action>
		</view>
		<view class="addwarnlist" v-show="active == 2" @click="addwarning_config">
			添 加
		</view>
		<view class="">
			<u-mask :show="accServiceShow" z-index="998"></u-mask>
			<u-calendar v-model="timeshow" :mode="mode" @change="timechange"></u-calendar>
			<multiple-select v-model="accServiceShow" :value="accServiceShow" :data="serviceList"
				:default-selected="defaultSelected" @confirm="accServiceConfirm"></multiple-select>
			<u-modal v-model="modalshow" title="短信预警详情" :content="content" @confirm="singlereadsure"></u-modal>
			<u-modal v-model="addshow" title="添加预警" :show-cancel-button="true" @confirm="addwarning_config">
				<view class="addinfobox">
					<view class="addinfobox_title">
						<span>*</span>
						<span>预警名称</span>
					</view>
					<u-input v-model="addvalue" maxlength="10" />
				</view>
			</u-modal>
		</view>
		<view class="top" v-if="active!=1">
			<view class="backtop" @click="top" v-if="isTop">
				<image :src="src" mode=""></image>
			</view>
			<view class="more" @click="allread" v-show="active==0">
				<view class="">
					一键
				</view>
				<view class="">
					已读
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import multipleSelect from "../../components/multiple-select.vue";
	export default {
		components: {
			multipleSelect,
		},
		data() {
			return {
				bannersrc:this.$imageURL+'/bigdata_app/image/cbyj/banner2.png',
				device_type:'',
				date: "",
				active: 0,
				equipArr: ["预警记录", "预警发布", "预警设置"],
				timeshow: false,
				mode: 'range',
				start_time: "",
				end_time: "",
				wranlistdata: [],
				listpage: 1,
				defaultSelected: [], //默认选中项
				serviceList: [{
						value: "1",
						name: "目标种类预警",
					},
					{
						value: "2",
						name: "指定害虫数量预警",
					},
					{
						value: "3",
						name: "害虫数量总和预警",
					},
					{
						value: "4",
						name: "综合预警",
					},
				], //传递给子组件的数据
				accServiceShow: false,
				wormvalue: "",
				userphone: [],
				total_sms_counts: "",
				isTop: false,
				src: '../../static/images/1.png',
				src1: '../../static/images/b0bcdb0e3fe8690520f743aa8303bf2.png',
				filtrateTF: false,
				modalshow: false,
				content: '',
				warmstatus: {

				},
				//预警设置
				configlist: [],
				addvalue: "",
				addshow: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				confpage:1
			}
		},
		methods: {
			tabClick(index) {
				this.active = index
				if (index == 0) {
					this.listpage = 1
					this.wranlistdata = []
					this.getwranlistdata()
				} else if (index == 1) {
					this.getmessagescounts()
				} else if (index == 2) {
					this.confpage = 1
					this.configlist = []
					this.getconfiglist()
				}
			},
			timechange(e) {
				console.log(e)
				this.start_time = e.startDate
				this.end_time = e.endDate
				this.listpage = 1
				this.wranlistdata = []
				this.getwranlistdata()
			},
			closetime() {
				this.start_time = ""
				this.end_time = ""
				this.listpage = 1
				this.wranlistdata = []
				this.getwranlistdata()
			},
			async getwranlistdata() {
				var end_time = ""
				var start_time = ""
				if(this.end_time!=""){
					end_time = Math.floor(+new Date(this.end_time)/1000)
				}else{
					end_time = ""
				}
				if(this.start_time!=""){
					start_time = Math.floor(+new Date(this.start_time)/1000)
				}else{
					start_time = ""
				}
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_sms_alert.user_qxz_warning_list',
					data: {
						end_time: end_time,
						page: this.listpage,
						page_size: "10",
						start_time: start_time,
						device_type: this.device_type
					}
				})
				console.log(res)
				this.wranlistdata = this.wranlistdata.concat(res.data)
			},
			tomap(data) {
				uni.navigateTo({
					url: "../cbqxyj/basemap?device_id=" + data.device_id,
				})
			},
			accServiceConfirm(e) {
				console.log(e)
				this.userphone = e
			},
			async getuseriphonelist() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_sms_alert.user_warning_liaisons_list',
					data: {
						page: 1,
						device_type: this.device_type,
						page_size: 9999999,
					}
				})
				console.log(res)
				this.serviceList = []
				for (var i = 0; i < res.data.length; i++) {
					var obj = {
						value: res.data[i].d_id,
						name: res.data[i].liaisons + "/" + res.data[i].phone,
					}
					this.serviceList.push(obj)
				}
			},
			async getmessagescounts() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_sms_alert.remaining_messages_counts',
					data: {
						device_type: this.device_type
					}
				})
				console.log(res)
				this.total_sms_counts = res.total_sms_counts
			},
			async send() {
				if (this.wormvalue == "") {
					uni.showToast({
						title: "请填写短信预警信息",
						icon: "none"
					})
				} else if (this.userphone.length == 0) {
					uni.showToast({
						title: "请选择短信接收人",
						icon: "none"
					})
				} else {
					var list = []
					for (var i = 0; i < this.userphone.length; i++) {
						list.push(this.userphone[i].value)
					}
					const res = await this.$myRequest({
						url: '/api/api_gateway?method=device.device_sms_alert.user_pest_warning_release',
						data: {
							send_user: list.join(","),
							content: this.wormvalue,
							device_type_id: this.device_type,
							device_type: this.device_type
						}
					})
					console.log(res)
					if (res) {
						uni.showToast({
							title: "发送成功",
							icon: "none"
						})
					} else {
						uni.showToast({
							title: "发送失败",
							icon: "none"
						})
					}
				}
			},
			tobook() {
				uni.navigateTo({
					url: "../cbqxyj/addressbook"
				})
			},
			async allread() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_sms_alert.user_qxz_warning_record_read',
					data: {
						req: "all",
						device_type: this.device_type
					}
				})
				if (res) {
					uni.showToast({
						title: "已完成一键已读",
						icon: "none"
					})
				}
			},
			singleread(data) {
				console.log(data)
				this.modalshow = true
				this.content = data.warning_content
				this.warmstatus = data
			},
			async singlereadsure() {
				if (this.warmstatus.status == 0) {
					const res = await this.$myRequest({
						url: '/api/api_gateway?method=device.device_sms_alert.user_qxz_warning_record_read',
						data: {
							id: this.warmstatus.id
						}
					})
					if (res) {
						uni.showToast({
							title: "此条预警已读",
							icon: "none"
						})
						this.listpage = 1
						this.wranlistdata = []
						this.getwranlistdata()
					}
				}
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500,
				});
			},
			async getconfiglist() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_sms_alert.user_warning_config_list',
					data: {
						device_type_id: this.device_type,
						page: this.confpage,
						device_type: this.device_type,
						page_size: "10",
					}
				})
				console.log(res.data)
				this.configlist = []
				for (var i = 0; i < res.data.length; i++) {
					res.data[i]["statustf"] = res.data[i].status == 1 ? true : false
				}
				this.configlist = this.configlist.concat(res.data)
				console.log(this.configlist)
			},
			async swichchange(e, id) {
				// console.log(e, id)
				// console.log(this.configlist)
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_sms_alert.modify_user_warning_config_status',
					data: {
						id: id,
						status: e ? 1 : 0,
					}
				})
				if (res) {
					uni.showToast({
						title: "状态修改成功",
						icon: "none"
					})
				}
				this.confpage = 1
				this.getconfiglist()
			},
			toset(id) {
				console.log(id)
				uni.navigateTo({
					url: "./warnset?id=" + id + '&typeId=' + this.device_type
				})
			},
			async addwarning_config() {
				uni.navigateTo({
					url: "./warnset?type=new" + '&typeId=' + this.device_type
				})
				// this.addshow = true
				// if (this.addvalue == "") {
				// 	uni.showToast({
				// 		title: "请填写预警名称",
				// 		icon: "none"
				// 	})
				// } else {
				// 	const res = await this.$myRequest({
				// 		url: '/api/api_gateway?method=device.device_sms_alert.create_user_warning_config',
				// 		data: {
				// 			title: this.addvalue,
				// 			device_type: this.device_type,
				// 			device_type_id: this.device_type
				// 		}
				// 	})
				// 	console.log(res)
				// 	if (res) {
				// 		this.addshow = false
				// 		this.configlist = []
				// 		this.confpage = 1
				// 		this.getconfiglist()
				// 	}
				// }
			},
			async delconfig(id){
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_sms_alert.del_user_warning_config_status',
					data: {
						id:id
					}
				})
				console.log(res)
				if (res) {
					this.configlist = []
					this.confpage = 1
					this.getconfiglist()
				}
			}
			
		},
		onLoad(option) {
			console.log(option)
			this.device_type = option.typeId;
			if(option.typeId == 15) {
				uni.setNavigationBarTitle({title:'墒情预警'})
				this.bannersrc = 'https://webstaticimg.oss-cn-hangzhou.aliyuncs.com/bigdata_app/image/cbyj/banner15.png'
			}
			this.getwranlistdata()
			// this.getmessagescounts()
			// this.getconfiglist()
		},
		onShow() {
			this.getuseriphonelist();
			this.getconfiglist();
		},
		onReachBottom() {
			if (this.active == 0) {
				this.listpage++
				this.getwranlistdata()
			} else if (this.ctive == 2) {
				this.confpage++
				this.getconfiglist()
			}
		},
		onPageScroll(e) {
			//nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) {
				//距离大于200时显示
				this.isTop = true;
			} else {
				//距离小于200时隐藏
				this.isTop = false;
			}
		},
	}
</script>

<style lang="less">
	page {
		background-color: #F6F6FB;
	}

	.cbwtop {
		position: fixed;
		top: 0px;
		width: 100%;
		z-index: 555;
		background-color: #fff;

		.image {
			width: 100%;
			height: 160rpx;
		}

		.tab-box {
			font-size: 30rpx;
			line-height: 80rpx;
			background-color: #ffffff;
			width: 100%;
			overflow: hidden;
			overflow-x: scroll;
			white-space: nowrap;

			.tab-item {
				cursor: pointer;
				position: relative;
				width: 25%;
				text-align: center;
				display: inline-block;
			}

			.tab-item.active {
				.bottom-line {
					bottom: 0;
					position: absolute;
					display: inline-block;
					width: 90rpx;
					height: 6rpx;
					left: 0;
					right: 0;
					margin: auto;
					background: #57C878;
				}
			}
		}

		.timeandtype {
			background-color: #F6F6FB;
			padding: 20rpx;
			box-sizing: border-box;

			.timebox {
				display: flex;
				background-color: #fff;
				padding: 10px;
				border-top-right-radius: 5px;
				border-top-left-radius: 5px;

				.jiange {
					width: 5%;
					text-align: center;
				}

				.firsttime,
				.endtime {
					width: 45%;
					text-align: center;
				}
			}

			.warntypebox {
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				padding: 10px;
				border-top: 1px solid #F6F6FB;
				border-bottom-right-radius: 5px;
				border-bottom-left-radius: 5px;
			}
		}
	}

	.warmlistbox {
		width: 95%;
		margin: 0 auto;
		padding-top: 370rpx;

		.warmlistbox_item {
			padding: 20rpx 0;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.warmlistbox_item_title {
				border-left: 8rpx solid #14A478;
				padding-left: 30rpx;
			}

			.warmlistbox_item_text {
				width: 90%;
				margin: 0 auto;
				margin-top: 20rpx;
				border-top: 1px solid #F2F2F2;
				padding: 20rpx 0;

				.item_text_item {
					margin-bottom: 7px;
					display: flex;

					.item_text_item_f {
						width: 140rpx;
					}

					.item_text_item_e {
						width: calc(100% - 140rpx);
						display: -webkit-box; //谷歌
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 4; //显示几行
						overflow: hidden;
					}
				}

				.item_text_sta {
					display: flex;
					justify-content: flex-end;
				}
			}
		}
	}
	.empty{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.warmissuebox {
		width: 95%;
		margin: 0 auto;
		padding-top: 270rpx;

		.warmissue {
			width: 95%;
			margin: 0 auto;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 5px;

			.warmissue_itemone {
				margin-bottom: 60rpx;
				display: flex;
				justify-content: space-between;
			}

			.warmissue_item {
				margin-bottom: 60rpx;
				display: flex;

				.warmissue_item_title {
					width: 160rpx;
				}

				.warmissue_item_text {
					width: calc(100% - 160rpx);
				}
			}

			.warmissue_itemtwo {
				display: flex;

				.itemtwo_left {
					width: calc(100% - 40rpx);
					display: flex;
					flex-wrap: wrap;
				}

				.icon {
					width: 40rpx;
				}
			}
		}

		.sendbox {
			margin: 40rpx auto;
			width: 80%;
			background-color: #14A478;
			padding: 20rpx 0;
			border-radius: 59px;
			text-align: center;
			color: #fff;
		}
	}

	.wornsetbox {
		width: 95%;
		margin: 0 auto;
		padding-top: 270rpx;

		.wornsetbox_item {
			padding: 30rpx 20rpx;
			background-color: #fff;
			width: 100%;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			line-height: 64rpx;
			height: 124rpx;
			// margin-bottom: 30rpx;
		}

	}

	.addwarnlist {
		position: absolute;
		bottom: 20rpx;
		left: 10%;
		margin: 40rpx auto;
		width: 80%;
		background-color: #14A478;
		padding: 20rpx 0;
		border-radius: 59px;
		text-align: center;
		color: #fff;
	}

	.addinfobox {
		display: flex;
		margin: 30rpx 0;

		.addinfobox_title {
			line-height: 70rpx;
			width: 30%;
			text-align: center;

			span:first-child {
				color: red;
			}
		}

		/deep/.u-input__right-icon {
			line-height: 35px;
		}
	}

	/deep/.u-calendar__action {
		display: flex;
		justify-content: space-around;

		.u-calendar__action__text {
			line-height: 25px;
		}
	}

	.top {
		position: fixed;
		right: 10px;
		bottom: 40px;
		z-index: 100;

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.backtop {
			display: flex;
			justify-content: flex-end;
			margin-bottom: 10rpx;
		}

		.more {
			width: 100rpx;
			height: 100rpx;
			background-color: rgba(161, 161, 161, 0.45);
			border-radius: 50%;
			text-align: center;
			padding-top: 10rpx;
			line-height: 40rpx;
			box-sizing: border-box;
			margin: 14rpx 0 0 0;
			color: #fff;
		}
	}
</style>