FE-V2-XCX/component/topWarn.vue

<!-- 顶部警告 -->
<template>
	<view class="top-warn" v-if="pageType">
		<view>{{text}}</view>
		<view @click="buttonClick" v-if="whetherRoute">操作</view>
	</view>
</template>

<script>
    import { getListStatusTwo,evacuate,closeRiskPlan } from '@/api/index.js'

	export default {
		data() {
			return {
				pageType:false,
				text:"",
				subjectId:"",
				buildingId:"",
				subjectName:"",
				closePlan:false,
				closeId:"",
        whetherRoute:true,//  true 有疏散路线，false 没有疏散路线
			}
		},
		created() {

		},
		mounted(){
			this.getWarn();
			getApp().watch(this.getWarn,'warnData');
			getApp().watch(this.lineDataFunction,'lineData');
			this.timeFuncontion();
		},
		methods: {
			//应急变更
			lineDataFunction(val){
				console.log("val",val);
			},
			buttonClick(){
				let self = this;
				let list = [];
				if(self.closePlan){
					list = ['执行疏散', '结束预案'];
				}else{
					list = ['执行疏散'];
				}
				uni.showActionSheet({
					itemList: list,
					success: function (res) {
						if(res.tapIndex == 0){
							self.evacuationClick();
						}else if(res.tapIndex == 1){
							self.offEvacuationClick();
						}
						console.log('res.tapIndex',res.tapIndex);
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			//执行疏散
			evacuationClick(){
				let self = this;
				uni.showModal({
				    content: '确认执行疏散?',
				    cancelColor:"#999",
				    confirmColor:"#0183FA",
				    success: function (res) {
				        if (res.confirm) {
							self.goPage();
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			offEvacuationClick(){
				let self = this;
				uni.showModal({
					content: '确认结束预案?',
					cancelColor:"#999",
					confirmColor:"#0183FA",
					success: function (res) {
						if (res.confirm) {
							self.closeRiskPlan();
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async closeRiskPlan(){
				const {data} = await closeRiskPlan({id:this.closeId});
				if(data.code == 200){
					uni.showToast({
						title: '操作成功',
						icon:"none",
						mask:true,
						duration: 2000
					});
					this.pageType = false;
				}
			},
			//页面跳转
			goPage(){
				let obj = {
					buildingId:this.buildingId,
					subId:this.subjectId,
					text:this.subjectName,
					type:"1",
				}
				uni.navigateTo({
					url:'/pages/emergencyEvacuationBig?item='+encodeURIComponent(JSON.stringify(obj))
				});
			},
			//获取报警信息
			async getWarn(){
				let self = this;
				const {data} = await getListStatusTwo();
				if(data.code == 200){
					let num = 0;
					for(let i=0;i<data.data.length;i++){
					  if(data.data[i].floorId != 7){
						num++;
						self.text = data.data[i].buildName + data.data[i].floorName + data.data[i].roomName + data.data[i].subjectName + '发生应急预案.';
						self.subjectId = data.data[i].subjectId;
						self.buildingId = data.data[i].buildId;
              self.whetherRoute = data.data[i].whetherRoute;
						self.subjectName = data.data[i].subjectName;
						self.pageType = true;
						self.closePlan =data.data[i].closePlan;
						self.closeId = data.data[i].id;
					  }
					}
					if(num == 0){
					  self.pageType = false;
					}
				}
			},
			timeFuncontion(){
				let self = this;
				var t1 = setInterval(refreshCount, 300);
				function refreshCount() {
					let txt = self.text
					let start = txt.substring(0, 1);//取该字符串的第一个字符
					let end = txt.substring(1);//取该字符串的从1之后的所有字符
					let newText = end + start;//拼接新的字符串
					self.$set(self,'text',newText)
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.top-warn{
		height:80rpx;
		line-height:80rpx;
		background rgba(2550,0,0,0.2)
		margin:20rpx 0;
		display flex;
		overflow hidden
		view:nth-child(1){
			padding-left:20rpx;
			color:#FF0000;
			flex:1;
			view{
				padding-left:20rpx;
				white-space:nowrap;
			}
		}
		view:nth-child(2){
			width:140rpx;
			color:#0183FA;
			text-align center;
		}
	}
</style>