简柏林 / thingskit-app · Commits

Commit 11d82dbadfaaf803a97c97bc34ae64c72a771b8d

Authored by fengtao
1 parent 6b7daf7f

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

Inline Side-by-side
Showing 3 changed files with 88 additions and 79 deletions
... ... @@ -94,10 +94,10 @@
94 94 </mescroll-body>
95 95 <!-- 自带分页组件 -->
96 96 <view style="height: 20rpx"></view>
97   - <!-- 告警筛选 -->
  97 + <!-- 告警筛选-->
98 98 <u-popup @close="close" closeable bgColor="transparent" :overlay="true" :show="show" mode="bottom">
99 99 <view class="popup-page">
100   - <view class="popup-text"><text class="text">筛选条件</text></view>
  100 + <view class="popup-text"><text class="text">告警筛选</text></view>
101 101 <view class="popup-alarm-page u-flex">
102 102 <view>
103 103 <view class="popup-alarm-text"><text class="text">告警状态</text></view>
... ... @@ -105,61 +105,66 @@
105 105 <view
106 106 class="alarm-text"
107 107 @click="getAlertStatus(item, index)"
108   - :style="[index == current1 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"
  108 + :style="[index == current1 ? { background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)' } : { background: '#F6F6F6' }]"
109 109 v-for="(item, index) in alertStatus"
110 110 :key="index"
111 111 >
112   - <text class="text">{{ item.name }}</text>
  112 + <text :class="[index == current1 ? 'select-text' : 'un-select-text']" class="text">{{ item.name }}</text>
113 113 </view>
114 114 </view>
115   - <view style="margin-top: 120rpx;">
  115 + <view style="margin-top: 169rpx;">
116 116 <view class="popup-alarm-text"><text class="text">设备类型</text></view>
117 117 <view class="u-flex popup-alarm-child">
118 118 <view
119 119 class="alarm-text"
120 120 @click="getTypeStatus(item, index)"
121   - :style="[index == current2 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"
  121 + :style="[
  122 + index == current2 ? { background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)' } : { background: '#F6F6F6' }
  123 + ]"
122 124 v-for="(item, index) in deviceType"
123 125 :key="index"
124 126 >
125   - <text class="text">{{ item.name }}</text>
  127 + <text :class="[index == current2 ? 'select-text' : 'un-select-text']" class="text">{{ item.name }}</text>
126 128 </view>
127 129 </view>
128 130
129   - <view style="margin-top: 120rpx;">
  131 + <view style="margin-top: 169rpx;">
130 132 <view class="popup-alarm-text"><text class="text">告警等级</text></view>
131 133 <view class="u-flex popup-alarm-child">
132 134 <view
133 135 class="alarm-text"
134 136 @click="getLevelStatus(item, index)"
135   - :style="[index == current3 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"
  137 + :style="[
  138 + index == current3 ? { background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)' } : { background: '#F6F6F6' }
  139 + ]"
136 140 v-for="(item, index) in alertLevel"
137 141 :key="index"
138 142 >
139   - <text class="text">{{ item.name }}</text>
  143 + <text :class="[index == current3 ? 'select-text' : 'un-select-text']" class="text">{{ item.name }}</text>
140 144 </view>
141 145 </view>
142   - <view style="margin-top: 120rpx;">
  146 + <view style="margin-top: 169rpx;">
143 147 <view class="popup-alarm-text"><text class="text">选择时间</text></view>
144 148 <view class="u-flex popup-alarm-child">
145 149 <view
146 150 class="alarm-text"
147 151 @click="getTimeStatus(item, index)"
148   - :style="[index == current4 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"
  152 + :style="[
  153 + index == current4
  154 + ? { background: 'rgba(55, 125, 255, 0.05)', border: '1rpx solid rgba(55, 125, 255, 0.3)' }
  155 + : { background: '#F6F6F6' }
  156 + ]"
149 157 v-for="(item, index) in timeArea"
150 158 :key="index"
151 159 >
152   - <text class="text">{{ item.name }}</text>
  160 + <text :class="[index == current4 ? 'select-text' : 'un-select-text']" class="text">{{ item.name }}</text>
153 161 </view>
154 162 </view>
155   - <view style="margin-top: 120rpx;">
  163 + <view style="margin-top: 169rpx;margin-left: 22rpx;">
156 164 <view class="u-flex popup-alarm-child">
157   - <view>
158   - <u--form :label-style="{ 'font-size': '29rpx', 'margin-left': '10rpx' }" labelPosition="left" :model="timeData">
159   - <u-form-item style="font-size: 14px" label="选择日期" prop="selectTime" labelWidth="80" borderBottom @click="openTime">
160   - <u--input v-model="timeData.selectTime" placeholder="请选择日期" border="none"></u--input>
161   - </u-form-item>
162   - </u--form>
  165 + <view class="home-text-muted">选择日期</view>
  166 + <view style="width: 623rpx;margin-left: 5rpx;margin-right: 70rpx;margin-top: 35rpx;">
  167 + <uni-datetime-picker v-model="range" type="daterange" />
163 168 </view>
164 169 </view>
165 170 </view>
... ... @@ -168,7 +173,7 @@
168 173 <view style="width: 300rpx"><u-button @click="resetData" type="info" shape="circle" text="重置"></u-button></view>
169 174 <view style="width: 300rpx; margin-left: 46rpx"><u-button @click="queryData" type="primary" shape="circle" text="确认"></u-button></view>
170 175 </view>
171   - <view style="height: 30rpx;"></view>
  176 + <view style="height: 90rpx;"></view>
172 177 </view>
173 178 </view>
174 179 </view>
... ... @@ -176,17 +181,6 @@
176 181 </view>
177 182 </view>
178 183 </u-popup>
179   - <!-- 告警筛选 -->
180   - <u-calendar
181   - :show="showCalendar"
182   - mode="range"
183   - @confirm="calendarConfirm"
184   - @close="calendarClose"
185   - startText="开始时间"
186   - endText="结束时间"
187   - confirmDisabledText="请选择日期"
188   - :formatter="formatter"
189   - ></u-calendar>
190 184 <f-tabbar></f-tabbar>
191 185 </view>
192 186 </template>
... ... @@ -194,7 +188,6 @@
194 188 <script>
195 189 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
196 190 import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
197   -import { pageNumber, pageSize } from '@/config/constant.js';
198 191 import { alertStatus, deviceType, alertLevel, timeArea } from './static/data.js';
199 192
200 193 export default {
... ... @@ -204,12 +197,11 @@ export default {
204 197 },
205 198 data() {
206 199 return {
  200 + range: ['', ''],
207 201 alertStatusVal: '',
208 202 deviceTypeVal: '',
209 203 alertLevelVal: '',
210 204 selectTimeVal: '',
211   - startTime: '',
212   - endTime: '',
213 205 current1: 0,
214 206 current2: 0,
215 207 current3: 0,
... ... @@ -225,11 +217,10 @@ export default {
225 217 auto: false // 不自动加载
226 218 },
227 219 timeData: {
228   - selectTime: '',
229   - getTimeGap: '',
230   - getDateVal: ''
  220 + selectTime: [],
  221 + getTimeGapS: '',
  222 + getTimeGapE: ''
231 223 },
232   - showCalendar: false,
233 224 show: false,
234 225 list: [],
235 226 alertStatus,
... ... @@ -269,6 +260,11 @@ export default {
269 260 this.loadData(1, type, null, null, null, null, null);
270 261 }
271 262 },
  263 + watch: {
  264 + range(newval) {
  265 + this.timeData.selectTime = this.range;
  266 + }
  267 + },
272 268 methods: {
273 269 inputChanged(e) {
274 270 this.loadData(1, null, null, null, null, null, null, e);
... ... @@ -288,19 +284,45 @@ export default {
288 284 getTimeStatus(e, i) {
289 285 this.current4 = i;
290 286 this.selectTimeVal = e.value;
  287 + let curTime = new Date();
  288 + const formatS = curTime
  289 + .getTime()
  290 + .toString()
  291 + .substring(0, 10);
  292 + let addMinute = new Date(curTime.setMinutes(curTime.getMinutes() + this.selectTimeVal));
  293 + const formatE = addMinute
  294 + .getTime()
  295 + .toString()
  296 + .substring(0, 10);
  297 + this.timeData.getTimeGapS = formatS;
  298 + this.timeData.getTimeGapE = formatE;
291 299 },
292 300 queryData() {
293   - let date1 = new Date(this.timeData.getDateVal[0]);
294   - let date2 = new Date(this.timeData.getDateVal[this.timeData.getDateVal.length - 1]);
  301 + let date1 = new Date(this.timeData.selectTime[0]);
  302 + let date2 = new Date(this.timeData.selectTime[1]);
295 303 let startTimeVa, endTimeVa;
296   - if (this.timeData.getDateVal.length == 0) {
  304 + if (this.timeData.selectTime.length == 0) {
297 305 startTimeVa = '';
298 306 endTimeVa = '';
299 307 } else {
300   - startTimeVa = date1.getTime();
301   - endTimeVa = date2.getTime();
  308 + startTimeVa = date1
  309 + .getTime()
  310 + .toString()
  311 + .substring(0, 10);
  312 + endTimeVa = date2
  313 + .getTime()
  314 + .toString()
  315 + .substring(0, 10);
  316 + }
  317 + let startTimeArea, endTimeArea;
  318 + if (this.timeData.getTimeGapS == '') {
  319 + startTimeArea = '';
  320 + endTimeArea = '';
  321 + } else {
  322 + startTimeArea = this.timeData.getTimeGapS;
  323 + endTimeArea = this.timeData.getTimeGapE;
302 324 }
303   - this.loadData(1, this.alertStatusVal, startTimeVa, endTimeVa, this.alertLevelVal, this.deviceTypeVal);
  325 + this.loadData(1, this.alertStatusVal, startTimeVa ? startTimeVa : startTimeArea, endTimeVa ? endTimeVa : endTimeArea, this.alertLevelVal, this.deviceTypeVal);
304 326 this.show = false;
305 327 },
306 328 resetData() {
... ... @@ -312,8 +334,10 @@ export default {
312 334 this.alertLevelVal = '';
313 335 this.current4 = 0;
314 336 this.selectTimeVal = '';
315   - this.timeData.getDateVal = '';
316   - this.timeData.selectTime = '';
  337 + this.timeData.selectTime = [];
  338 + this.timeDatagetTimeGapS = '';
  339 + this.timeDatagetTimeGapE = '';
  340 + this.range = [];
317 341 },
318 342 bindImageUrl(e) {
319 343 switch (e) {
... ... @@ -351,6 +375,7 @@ export default {
351 375 this.loadData(this.page.num);
352 376 },
353 377 loadData(pageNo, statusV, startTimeV, endTimeV, severityV, deviceTypeV, organizationV, alarmName) {
  378 + let that = this;
354 379 let httpData = {
355 380 page: pageNo,
356 381 pageSize: 10,
... ... @@ -372,18 +397,18 @@ export default {
372 397 .get('/yt/alarm', { params: httpData, custom: { load: false } })
373 398 .then(res => {
374 399 uni.stopPullDownRefresh();
375   - this.mescroll.endByPage(res.items.length, res.total);
376   - this.alertTotal = res.total;
  400 + that.mescroll.endByPage(res.items.length, res.total); //必传参数(当前页的数据个数, 总页数)
  401 + that.alertTotal = res.total;
377 402 if (pageNo == 1) {
378   - this.list = res.items;
  403 + that.list = res.items;
379 404 } else {
380   - this.list = this.list.concat(res.items);
  405 + that.list = that.list.concat(res.items);
381 406 }
382 407 })
383 408 .catch(e => {
384 409 uni.$u.toast(e.data?.message);
385 410 //联网失败, 结束加载
386   - this.mescroll.endErr();
  411 + that.mescroll.endErr();
387 412 });
388 413 },
389 414 openOrg() {
... ... @@ -398,18 +423,6 @@ export default {
398 423 this.show = true;
399 424 this.resetData();
400 425 },
401   - openTime() {
402   - this.showCalendar = true;
403   - uni.hideKeyboard();
404   - },
405   - calendarConfirm(e) {
406   - this.showCalendar = false;
407   - this.timeData.selectTime = `${e[0]} / ${e[e.length - 1]}`;
408   - this.timeData.getDateVal = e;
409   - },
410   - calendarClose() {
411   - this.showCalendar = false;
412   - },
413 426 //跳转告警详情
414 427 openAlertDetail(e) {
415 428 let obj = {
... ... @@ -449,4 +462,7 @@ export default {
449 462 /deep/ .u-cell__right-icon-wrap {
450 463 margin-top: -55rpx !important;
451 464 }
  465 +/deep/ .uni-calendar--fixed {
  466 + bottom: 72rpx !important;
  467 +}
452 468 </style>
... ...
... ... @@ -196,35 +196,28 @@
196 196 margin-left: 98rpx;
197 197 flex-direction: column;
198 198 justify-content: space-between;
199   -
200 199 .popup-alarm-text {
201 200 width: 750rpx;
202 201 margin-left: 14rpx;
203   -
204 202 .text {
205 203 color: #333333;
206 204 font-size: 14px;
207 205 }
208 206 }
209   -
210 207 .popup-alarm-child {
211 208 margin-top: 15rpx;
212   - width: 650rpx;
  209 + width: 750rpx;
213 210 height: 60rpx;
214   - flex-direction: row;
215 211 flex-wrap: wrap;
216   - justify-content: space-between;
217   - align-content: space-between;
218   -
  212 + margin-left: -10rpx;
219 213 .alarm-text {
220   - margin: 10rpx;
  214 + margin: 25rpx;
221 215 line-height: 50rpx;
222 216 text-align: center;
223 217 width: 180rpx;
224 218 height: 60rpx;
225 219 background-color: #f6f6f6;
226 220 border-radius: 32px;
227   -
228 221 .text {
229 222 color: #333333;
230 223 font-size: 13px;
... ...
... ... @@ -110,35 +110,35 @@ const alertLevel = [{
110 110 const timeArea = [{
111 111 index: 1,
112 112 name: '全部',
113   - value: '全部',
  113 + value: 0,
114 114 bgColor: '#F6F6F6',
115 115 textColor: '#F6F6F6'
116 116 },
117 117 {
118 118 index: 2,
119 119 name: '30分钟',
120   - value: '30',
  120 + value: 30,
121 121 bgColor: '#F6F6F6',
122 122 textColor: '#F6F6F6'
123 123 },
124 124 {
125 125 index: 3,
126 126 name: '1小时',
127   - value: '30',
  127 + value: 60,
128 128 bgColor: '#F6F6F6',
129 129 textColor: '#F6F6F6'
130 130 },
131 131 {
132 132 index: 4,
133 133 name: '2小时',
134   - value: '120',
  134 + value: 120,
135 135 bgColor: '#F6F6F6',
136 136 textColor: '#F6F6F6'
137 137 },
138 138 {
139 139 index: 5,
140 140 name: '近一天',
141   - value: '24',
  141 + value: 1440,
142 142 bgColor: '#F6F6F6',
143 143 textColor: '#F6F6F6'
144 144 }
... ...