fix：DEFECT-351 修改告警筛选弹出框里面样式和时间选择went

fengtao
1 parent 6b7daf7f
Showing 3 changed files with 88 additions and 79 deletions
pages/alarm/alarm.vue
pages/alarm/static/alarm.scss
pages/alarm/static/data.js
--- a/pages/alarm/alarm.vue
View file @11d82db
+++ b/pages/alarm/alarm.vue
View file @11d82db
@@ -94,10 +94,10 @@
 		</mescroll-body>
 		<!-- 自带分页组件 -->
 		<view style="height: 20rpx"></view>
-		<!-- 告警筛选 -->
+		<!-- 告警筛选-->
 		<u-popup @close="close" closeable bgColor="transparent" :overlay="true" :show="show" mode="bottom">
 			<view class="popup-page">
-				<view class="popup-text"><text class="text">筛选条件</text></view>
+				<view class="popup-text"><text class="text">告警筛选</text></view>
 				<view class="popup-alarm-page u-flex">
 					<view>
 						<view class="popup-alarm-text"><text class="text">告警状态</text></view>
@@ -105,61 +105,66 @@
 							<view
 								class="alarm-text"
 								@click="getAlertStatus(item, index)"
-								:style="[index == current1 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"
+								:style="[index == current1 ? { background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)' } : { background: '#F6F6F6' }]"
 								v-for="(item, index) in alertStatus"
 								:key="index"
 							>
-								<text class="text">{{ item.name }}</text>
+								<text :class="[index == current1 ? 'select-text' : 'un-select-text']" class="text">{{ item.name }}</text>
 							</view>
 						</view>
-						<view style="margin-top: 120rpx;">
+						<view style="margin-top: 169rpx;">
 							<view class="popup-alarm-text"><text class="text">设备类型</text></view>
 							<view class="u-flex popup-alarm-child">
 								<view
 									class="alarm-text"
 									@click="getTypeStatus(item, index)"
-									:style="[index == current2 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"
+									:style="[
+										index == current2 ? { background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)' } : { background: '#F6F6F6' }
+									]"
 									v-for="(item, index) in deviceType"
 									:key="index"
 								>
-									<text class="text">{{ item.name }}</text>
+									<text :class="[index == current2 ? 'select-text' : 'un-select-text']" class="text">{{ item.name }}</text>
 								</view>
 							</view>
-							<view style="margin-top: 120rpx;">
+							<view style="margin-top: 169rpx;">
 								<view class="popup-alarm-text"><text class="text">告警等级</text></view>
 								<view class="u-flex popup-alarm-child">
 									<view
 										class="alarm-text"
 										@click="getLevelStatus(item, index)"
-										:style="[index == current3 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"
+										:style="[
+											index == current3 ? { background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)' } : { background: '#F6F6F6' }
+										]"
 										v-for="(item, index) in alertLevel"
 										:key="index"
 									>
-										<text class="text">{{ item.name }}</text>
+										<text :class="[index == current3 ? 'select-text' : 'un-select-text']" class="text">{{ item.name }}</text>
 									</view>
 								</view>
-								<view style="margin-top: 120rpx;">
+								<view style="margin-top: 169rpx;">
 									<view class="popup-alarm-text"><text class="text">选择时间</text></view>
 									<view class="u-flex popup-alarm-child">
 										<view
 											class="alarm-text"
 											@click="getTimeStatus(item, index)"
-											:style="[index == current4 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"
+											:style="[
+												index == current4
+													? { background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)' }
+													: { background: '#F6F6F6' }
+											]"
 											v-for="(item, index) in timeArea"
 											:key="index"
 										>
-											<text class="text">{{ item.name }}</text>
+											<text :class="[index == current4 ? 'select-text' : 'un-select-text']" class="text">{{ item.name }}</text>
 										</view>
 									</view>
-									<view style="margin-top: 120rpx;">
+									<view style="margin-top: 169rpx;margin-left: 22rpx;">
 										<view class="u-flex popup-alarm-child">
-											<view>
-												<u--form :label-style="{ 'font-size': '29rpx', 'margin-left': '10rpx' }" labelPosition="left" :model="timeData">
-													<u-form-item style="font-size: 14px" label="选择日期" prop="selectTime" labelWidth="80" borderBottom @click="openTime">
-														<u--input v-model="timeData.selectTime" placeholder="请选择日期" border="none"></u--input>
-													</u-form-item>
-												</u--form>
+											<view class="home-text-muted">选择日期</view>
+											<view style="width: 623rpx;margin-left: 5rpx;margin-right: 70rpx;margin-top: 35rpx;">
+												<uni-datetime-picker v-model="range" type="daterange" />
 											</view>
 										</view>
 									</view>
@@ -168,7 +173,7 @@
 										<view style="width: 300rpx"><u-button @click="resetData" type="info" shape="circle" text="重置"></u-button></view>
 										<view style="width: 300rpx; margin-left: 46rpx"><u-button @click="queryData" type="primary" shape="circle" text="确认"></u-button></view>
 									</view>
-									<view style="height: 30rpx;"></view>
+									<view style="height: 90rpx;"></view>
 								</view>
 							</view>
 						</view>
@@ -176,17 +181,6 @@
 				</view>
 			</view>
 		</u-popup>
-		<!-- 告警筛选 -->
-		<u-calendar
-			:show="showCalendar"
-			mode="range"
-			@confirm="calendarConfirm"
-			@close="calendarClose"
-			startText="开始时间"
-			endText="结束时间"
-			confirmDisabledText="请选择日期"
-			:formatter="formatter"
-		></u-calendar>
 		<f-tabbar></f-tabbar>
 	</view>
 </template>
@@ -194,7 +188,6 @@
 <script>
 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
 import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
-import { pageNumber, pageSize } from '@/config/constant.js';
 import { alertStatus, deviceType, alertLevel, timeArea } from './static/data.js';
 export default {
@@ -204,12 +197,11 @@ export default {
 	},
 	data() {
 		return {
+			range: ['', ''],
 			alertStatusVal: '',
 			deviceTypeVal: '',
 			alertLevelVal: '',
 			selectTimeVal: '',
-			startTime: '',
-			endTime: '',
 			current1: 0,
 			current2: 0,
 			current3: 0,
@@ -225,11 +217,10 @@ export default {
 				auto: false // 不自动加载
 			},
 			timeData: {
-				selectTime: '',
-				getTimeGap: '',
-				getDateVal: ''
+				selectTime: [],
+				getTimeGapS: '',
+				getTimeGapE: ''
 			},
-			showCalendar: false,
 			show: false,
 			list: [],
 			alertStatus,
@@ -269,6 +260,11 @@ export default {
 			this.loadData(1, type, null, null, null, null, null);
 		}
 	},
+	watch: {
+		range(newval) {
+			this.timeData.selectTime = this.range;
+		}
+	},
 	methods: {
 		inputChanged(e) {
 			this.loadData(1, null, null, null, null, null, null, e);
@@ -288,19 +284,45 @@ export default {
 		getTimeStatus(e, i) {
 			this.current4 = i;
 			this.selectTimeVal = e.value;
+			let curTime = new Date();
+			const formatS = curTime
+				.getTime()
+				.toString()
+				.substring(0, 10);
+			let addMinute = new Date(curTime.setMinutes(curTime.getMinutes() + this.selectTimeVal));
+			const formatE = addMinute
+				.getTime()
+				.toString()
+				.substring(0, 10);
+			this.timeData.getTimeGapS = formatS;
+			this.timeData.getTimeGapE = formatE;
 		},
 		queryData() {
-			let date1 = new Date(this.timeData.getDateVal[0]);
-			let date2 = new Date(this.timeData.getDateVal[this.timeData.getDateVal.length - 1]);
+			let date1 = new Date(this.timeData.selectTime[0]);
+			let date2 = new Date(this.timeData.selectTime[1]);
 			let startTimeVa, endTimeVa;
-			if (this.timeData.getDateVal.length == 0) {
+			if (this.timeData.selectTime.length == 0) {
 				startTimeVa = '';
 				endTimeVa = '';
 			} else {
-				startTimeVa = date1.getTime();
-				endTimeVa = date2.getTime();
+				startTimeVa = date1
+					.getTime()
+					.toString()
+					.substring(0, 10);
+				endTimeVa = date2
+					.getTime()
+					.toString()
+					.substring(0, 10);
+			}
+			let startTimeArea, endTimeArea;
+			if (this.timeData.getTimeGapS == '') {
+				startTimeArea = '';
+				endTimeArea = '';
+			} else {
+				startTimeArea = this.timeData.getTimeGapS;
+				endTimeArea = this.timeData.getTimeGapE;
 			}
-			this.loadData(1, this.alertStatusVal, startTimeVa, endTimeVa, this.alertLevelVal, this.deviceTypeVal);
+			this.loadData(1, this.alertStatusVal, startTimeVa ? startTimeVa : startTimeArea, endTimeVa ? endTimeVa : endTimeArea, this.alertLevelVal, this.deviceTypeVal);
 			this.show = false;
 		},
 		resetData() {
@@ -312,8 +334,10 @@ export default {
 			this.alertLevelVal = '';
 			this.current4 = 0;
 			this.selectTimeVal = '';
-			this.timeData.getDateVal = '';
-			this.timeData.selectTime = '';
+			this.timeData.selectTime = [];
+			this.timeDatagetTimeGapS = '';
+			this.timeDatagetTimeGapE = '';
+			this.range = [];
 		},
 		bindImageUrl(e) {
 			switch (e) {
@@ -351,6 +375,7 @@ export default {
 			this.loadData(this.page.num);
 		},
 		loadData(pageNo, statusV, startTimeV, endTimeV, severityV, deviceTypeV, organizationV, alarmName) {
+			let that = this;
 			let httpData = {
 				page: pageNo,
 				pageSize: 10,
@@ -372,18 +397,18 @@ export default {
 				.get('/yt/alarm', { params: httpData, custom: { load: false } })
 				.then(res => {
 					uni.stopPullDownRefresh();
-					this.mescroll.endByPage(res.items.length, res.total);
-					this.alertTotal = res.total;
+					that.mescroll.endByPage(res.items.length, res.total); //必传参数(当前页的数据个数, 总页数)
+					that.alertTotal = res.total;
 					if (pageNo == 1) {
-						this.list = res.items;
+						that.list = res.items;
 					} else {
-						this.list = this.list.concat(res.items);
+						that.list = that.list.concat(res.items);
 					}
 				})
 				.catch(e => {
 					uni.$u.toast(e.data?.message);
 					//联网失败, 结束加载
-					this.mescroll.endErr();
+					that.mescroll.endErr();
 				});
 		},
 		openOrg() {
@@ -398,18 +423,6 @@ export default {
 			this.show = true;
 			this.resetData();
 		},
-		openTime() {
-			this.showCalendar = true;
-			uni.hideKeyboard();
-		},
-		calendarConfirm(e) {
-			this.showCalendar = false;
-			this.timeData.selectTime = `${e[0]} / ${e[e.length - 1]}`;
-			this.timeData.getDateVal = e;
-		},
-		calendarClose() {
-			this.showCalendar = false;
-		},
 		//跳转告警详情
 		openAlertDetail(e) {
 			let obj = {
@@ -449,4 +462,7 @@ export default {
 /deep/ .u-cell__right-icon-wrap {
 	margin-top: -55rpx !important;
 }
+/deep/ .uni-calendar--fixed {
+	bottom: 72rpx !important;
+}
 </style>
--- a/pages/alarm/static/alarm.scss
View file @11d82db
+++ b/pages/alarm/static/alarm.scss
View file @11d82db
@@ -196,35 +196,28 @@
 		margin-left: 98rpx;
 		flex-direction: column;
 		justify-content: space-between;
-
 		.popup-alarm-text {
 			width: 750rpx;
 			margin-left: 14rpx;
-
 			.text {
 				color: #333333;
 				font-size: 14px;
 			}
 		}
-
 		.popup-alarm-child {
 			margin-top: 15rpx;
-			width: 650rpx;
+			width: 750rpx;
 			height: 60rpx;
-			flex-direction: row;
 			flex-wrap: wrap;
-			justify-content: space-between;
-			align-content: space-between;
-
+			margin-left: -10rpx;
 			.alarm-text {
-				margin: 10rpx;
+				margin: 25rpx;
 				line-height: 50rpx;
 				text-align: center;
 				width: 180rpx;
 				height: 60rpx;
 				background-color: #f6f6f6;
 				border-radius: 32px;
-
 				.text {
 					color: #333333;
 					font-size: 13px;
--- a/pages/alarm/static/data.js
View file @11d82db
+++ b/pages/alarm/static/data.js
View file @11d82db
@@ -110,35 +110,35 @@ const alertLevel = [{
 const timeArea = [{
 		index: 1,
 		name: '全部',
-		value: '全部',
+		value: 0,
 		bgColor: '#F6F6F6',
 		textColor: '#F6F6F6'
 	},
 	{
 		index: 2,
 		name: '30分钟',
-		value: '30',
+		value: 30,
 		bgColor: '#F6F6F6',
 		textColor: '#F6F6F6'
 	},
 	{
 		index: 3,
 		name: '1小时',
-		value: '30',
+		value: 60,
 		bgColor: '#F6F6F6',
 		textColor: '#F6F6F6'
 	},
 	{
 		index: 4,
 		name: '2小时',
-		value: '120',
+		value: 120,
 		bgColor: '#F6F6F6',
 		textColor: '#F6F6F6'
 	},
 	{
 		index: 5,
 		name: '近一天',
-		value: '24',
+		value: 1440,
 		bgColor: '#F6F6F6',
 		textColor: '#F6F6F6'
 	}