简柏林 / thingskit-app · Commits

Commit 88cf8ad147a068cabf96084fbb5df23fc396deec

Authored by fengwotao
1 parent f27c8327

pref:命令记录新增响应类型 调整部分样式

Inline Side-by-side
Showing 1 changed file with 261 additions and 236 deletions
1 <template> 1 <template>
  2 + <!-- 单向没有响应失败状态 -->
  3 + <!-- 响应类型 -->
2 <view class="command-record"> 4 <view class="command-record">
3 <view class="filter-button" @click="openSearchDialog"> 5 <view class="filter-button" @click="openSearchDialog">
4 <text>筛选</text> 6 <text>筛选</text>
5 <image src="../../../static/shaixuan.png" /> 7 <image src="../../../static/shaixuan.png" />
6 </view> 8 </view>
7 9
8 - <mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback" height="700px"> 10 + <mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"
  11 + height="700px">
9 <view @click="openCommandDetail(item)" class="list-item" v-for="(item, index) in list" :key="index"> 12 <view @click="openCommandDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">
10 <view class="item"> 13 <view class="item">
11 <view class="item-first"> 14 <view class="item-first">
12 <text>{{ item.deviceName }}</text> 15 <text>{{ item.deviceName }}</text>
13 - <view class="item-right item-success" v-if="item.response">响应成功</view>  
14 - <view class="item-right item-fail" v-else>响应失败</view> 16 + <view v-if="!item.request.oneway">
  17 + <view class="item-right item-success" v-if="item.response">响应成功</view>
  18 + <view class="item-right item-fail" v-else>响应失败</view>
  19 + </view>
15 </view> 20 </view>
16 <view v-if="item.additionalInfo.cmdType"> 21 <view v-if="item.additionalInfo.cmdType">
17 命令类型: 22 命令类型:
@@ -19,8 +24,7 @@ @@ -19,8 +24,7 @@
19 </view> 24 </view>
20 <view v-if="item.statusName"> 25 <view v-if="item.statusName">
21 命令状态: 26 命令状态:
22 - <text  
23 - :style="{ 27 + <text :style="{
24 color: 28 color:
25 item.status == 'EXPIRED' 29 item.status == 'EXPIRED'
26 ? 'red' 30 ? 'red'
@@ -33,271 +37,292 @@ @@ -33,271 +37,292 @@
33 : item.status == 'SENT' 37 : item.status == 'SENT'
34 ? '#00C9A7' 38 ? '#00C9A7'
35 : '' 39 : ''
36 - }"  
37 - style="margin-left: 16rpx;"  
38 - > 40 + }" style="margin-left: 16rpx;">
39 {{ item.statusName }} 41 {{ item.statusName }}
40 </text> 42 </text>
41 </view> 43 </view>
42 - <view class="time">{{ format(item.createTime) }}</view> 44 + <view class="item-first">
  45 + <view v-if="item.additionalInfo.cmdType">
  46 + 响应类型:
  47 + <text style="margin-left: 16rpx;">{{ !item.request.oneway?'双向':'单向' }}</text>
  48 + </view>
  49 + <view class="time">{{ format(item.createTime) }}</view>
  50 + </view>
43 </view> 51 </view>
44 </view> 52 </view>
45 </mescroll-uni> 53 </mescroll-uni>
46 <!-- 告警筛选 --> 54 <!-- 告警筛选 -->
47 - <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20" @touchmove.stop.prevent="disabledScroll"> 55 + <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20"
  56 + @touchmove.stop.prevent="disabledScroll">
48 <view class="filter" @touchmove.stop.prevent="disabledScroll"> 57 <view class="filter" @touchmove.stop.prevent="disabledScroll">
49 <view class="filter-title"><text>筛选条件</text></view> 58 <view class="filter-title"><text>筛选条件</text></view>
50 - <FilterItem :filterList="issueStatus" title="下发状态" @clickTag="currentIndex => handleClickTag(currentIndex, issueStatus)"></FilterItem> 59 + <FilterItem :filterList="issueStatus" title="下发状态"
  60 + @clickTag="currentIndex => handleClickTag(currentIndex, issueStatus)"></FilterItem>
51 <view class="button-group"> 61 <view class="button-group">
52 - <view><u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="重置" @click="resetFilter"></u-button></view>  
53 - <view><u-button color="#3388ff" shape="circle" text="确认" @click="confirmFilter"></u-button></view> 62 + <view>
  63 + <u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="重置"
  64 + @click="resetFilter"></u-button>
  65 + </view>
  66 + <view>
  67 + <u-button color="#3388ff" shape="circle" text="确认" @click="confirmFilter"></u-button>
  68 + </view>
54 </view> 69 </view>
55 </view> 70 </view>
56 </u-popup> 71 </u-popup>
57 - <u-calendar  
58 - :show="showCalendar"  
59 - mode="range"  
60 - @confirm="calendarConfirm"  
61 - @close="calendarClose"  
62 - startText="开始时间"  
63 - endText="结束时间"  
64 - confirmDisabledText="请选择日期"  
65 - :formatter="formatter"  
66 - ></u-calendar> 72 + <u-calendar :show="showCalendar" mode="range" @confirm="calendarConfirm" @close="calendarClose" startText="开始时间"
  73 + endText="结束时间" confirmDisabledText="请选择日期" :formatter="formatter"></u-calendar>
67 </view> 74 </view>
68 </template> 75 </template>
69 <script> 76 <script>
70 -import FilterItem from '@/pages/device/FilterItem.vue';  
71 -import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';  
72 -import { formatToDate } from '@/plugins/utils.js';  
73 -import { debounce } from '@/plugins/throttle.js';  
74 -export default {  
75 - mixins: [MescrollMixin],  
76 - components: {  
77 - FilterItem  
78 - },  
79 - props: {  
80 - tbDeviceId: {  
81 - type: String,  
82 - default: ''  
83 - }  
84 - },  
85 - data() {  
86 - return {  
87 - show: false,  
88 - list: [],  
89 - total: '',  
90 - timeData: {  
91 - selectTime: '',  
92 - getTimeGap: ''  
93 - },  
94 - showCalendar: false,  
95 - issueStatus: [  
96 - {  
97 - checked: true,  
98 - name: '全部',  
99 - type: '' 77 + import FilterItem from '@/pages/device/FilterItem.vue';
  78 + import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
  79 + import {
  80 + formatToDate
  81 + } from '@/plugins/utils.js';
  82 + import {
  83 + debounce
  84 + } from '@/plugins/throttle.js';
  85 + export default {
  86 + mixins: [MescrollMixin],
  87 + components: {
  88 + FilterItem
  89 + },
  90 + props: {
  91 + tbDeviceId: {
  92 + type: String,
  93 + default: ''
  94 + }
  95 + },
  96 + data() {
  97 + return {
  98 + show: false,
  99 + list: [],
  100 + total: '',
  101 + timeData: {
  102 + selectTime: '',
  103 + getTimeGap: ''
100 }, 104 },
101 - {  
102 - checked: false,  
103 - name: '成功',  
104 - type: 'SUCCESSFUL' 105 + showCalendar: false,
  106 + issueStatus: [{
  107 + checked: true,
  108 + name: '全部',
  109 + type: ''
  110 + },
  111 + {
  112 + checked: false,
  113 + name: '成功',
  114 + type: 'SUCCESSFUL'
  115 + },
  116 + {
  117 + checked: false,
  118 + name: '失败',
  119 + type: 'FAILED'
  120 + }
  121 + ],
  122 + downOption: {
  123 + auto: false //是否在初始化后,自动执行downCallback; 默认true
105 }, 124 },
106 - {  
107 - checked: false,  
108 - name: '失败',  
109 - type: 'FAILED' 125 + page: {
  126 + num: 0,
  127 + size: 10
110 } 128 }
111 - ],  
112 - downOption: {  
113 - auto: false //是否在初始化后,自动执行downCallback; 默认true  
114 - },  
115 - page: {  
116 - num: 0,  
117 - size: 10  
118 - }  
119 - };  
120 - },  
121 - methods: {  
122 - /*下拉刷新的回调 */  
123 - downCallback() {  
124 - //联网加载数据  
125 - this.list = [];  
126 - this.page.num = 1;  
127 - this.loadData(this.page.num, {  
128 - tbDeviceId: this.tbDeviceId  
129 - });  
130 - },  
131 - format(date) {  
132 - return formatToDate(date, 'YYYY-MM-DD HH:mm:ss');  
133 - },  
134 - disabledScroll() {  
135 - return;  
136 - },  
137 - /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */  
138 - upCallback() {  
139 - //联网加载数据  
140 - this.page.num += 1;  
141 - this.loadData(this.page.num, {  
142 - tbDeviceId: this.tbDeviceId  
143 - });  
144 - },  
145 - //获取告警数据  
146 - loadData(pageNo, params = {}) {  
147 - let httpData = {  
148 - ...params,  
149 - page: pageNo,  
150 - pageSize: 10  
151 }; 129 };
152 - uni.$u.http  
153 - .get('/yt/rpc', {  
154 - params: httpData,  
155 - custom: {  
156 - load: false  
157 - }  
158 - })  
159 - .then(res => {  
160 - this.total = res.total;  
161 - uni.stopPullDownRefresh();  
162 - //方法一(推荐): 后台接口有返回列表的总页数 totalPage  
163 - this.mescroll.endByPage(res.items.length, res.total); //必传参数(当前页的数据个数, 总页数)  
164 - if (pageNo == 1) {  
165 - this.list = res.items;  
166 - } else {  
167 - this.list = this.list.concat(res.items);  
168 - }  
169 - })  
170 - .catch(() => {  
171 - //联网失败, 结束加载  
172 - this.mescroll.endErr();  
173 - });  
174 - },  
175 - handleClickTag(currentIndex, list) {  
176 - list.map((item, index) => {  
177 - item.checked = index === currentIndex;  
178 - });  
179 - },  
180 - resetFilter() {  
181 - const { issueStatus } = this;  
182 - issueStatus.forEach(item => item.map((item, index) => (item.checked = index === 0)));  
183 }, 130 },
184 - close() {  
185 - this.show = false;  
186 - },  
187 - openSearchDialog() {  
188 - this.show = true;  
189 - },  
190 - hideKeyboard() {  
191 - uni.hideKeyboard();  
192 - },  
193 - calendarConfirm(e) {  
194 - this.showCalendar = false;  
195 - this.timeData.selectTime = `${e[0]} / ${e[e.length - 1]}`;  
196 - },  
197 - confirmFilter() {  
198 - const issueStatus = this.issueStatus.find(item => item.checked);  
199 - this.loadData(1, {  
200 - status: issueStatus.type ? issueStatus.type : undefined,  
201 - tbDeviceId: this.tbDeviceId  
202 - });  
203 - this.show = false;  
204 - },  
205 - calendarClose() {  
206 - this.showCalendar = false;  
207 - },  
208 - openCommandDetail(item) {  
209 - uni.navigateTo({  
210 - url: '/deviceSubPage/deviceDetailPage/tabDetail/CommandDetail?data=' + JSON.stringify(item)  
211 - }); 131 + methods: {
  132 + /*下拉刷新的回调 */
  133 + downCallback() {
  134 + //联网加载数据
  135 + this.list = [];
  136 + this.page.num = 1;
  137 + this.loadData(this.page.num, {
  138 + tbDeviceId: this.tbDeviceId
  139 + });
  140 + },
  141 + format(date) {
  142 + return formatToDate(date, 'YYYY-MM-DD HH:mm:ss');
  143 + },
  144 + disabledScroll() {
  145 + return;
  146 + },
  147 + /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
  148 + upCallback() {
  149 + //联网加载数据
  150 + this.page.num += 1;
  151 + this.loadData(this.page.num, {
  152 + tbDeviceId: this.tbDeviceId
  153 + });
  154 + },
  155 + //获取告警数据
  156 + loadData(pageNo, params = {}) {
  157 + let httpData = {
  158 + ...params,
  159 + page: pageNo,
  160 + pageSize: 10
  161 + };
  162 + uni.$u.http
  163 + .get('/yt/rpc', {
  164 + params: httpData,
  165 + custom: {
  166 + load: false
  167 + }
  168 + })
  169 + .then(res => {
  170 + this.total = res.total;
  171 + uni.stopPullDownRefresh();
  172 + //方法一(推荐): 后台接口有返回列表的总页数 totalPage
  173 + this.mescroll.endByPage(res.items.length, res.total); //必传参数(当前页的数据个数, 总页数)
  174 + if (pageNo == 1) {
  175 + this.list = res.items;
  176 + } else {
  177 + this.list = this.list.concat(res.items);
  178 + }
  179 + })
  180 + .catch(() => {
  181 + //联网失败, 结束加载
  182 + this.mescroll.endErr();
  183 + });
  184 + },
  185 + handleClickTag(currentIndex, list) {
  186 + list.map((item, index) => {
  187 + item.checked = index === currentIndex;
  188 + });
  189 + },
  190 + resetFilter() {
  191 + const {
  192 + issueStatus
  193 + } = this;
  194 + issueStatus.forEach(item => item.map((item, index) => (item.checked = index === 0)));
  195 + },
  196 + close() {
  197 + this.show = false;
  198 + },
  199 + openSearchDialog() {
  200 + this.show = true;
  201 + },
  202 + hideKeyboard() {
  203 + uni.hideKeyboard();
  204 + },
  205 + calendarConfirm(e) {
  206 + this.showCalendar = false;
  207 + this.timeData.selectTime = `${e[0]} / ${e[e.length - 1]}`;
  208 + },
  209 + confirmFilter() {
  210 + const issueStatus = this.issueStatus.find(item => item.checked);
  211 + this.loadData(1, {
  212 + status: issueStatus.type ? issueStatus.type : undefined,
  213 + tbDeviceId: this.tbDeviceId
  214 + });
  215 + this.show = false;
  216 + },
  217 + calendarClose() {
  218 + this.showCalendar = false;
  219 + },
  220 + openCommandDetail(item) {
  221 + uni.navigateTo({
  222 + url: '/deviceSubPage/deviceDetailPage/tabDetail/CommandDetail?data=' + JSON.stringify(item)
  223 + });
  224 + }
212 } 225 }
213 - }  
214 -}; 226 + };
215 </script> 227 </script>
216 228
217 <style lang="scss" scoped> 229 <style lang="scss" scoped>
218 -.command-record {  
219 - padding: 0 30rpx;  
220 - background: #f8f9fa;  
221 - .filter-button {  
222 - font-size: 12px;  
223 - width: 160rpx;  
224 - height: 64rpx;  
225 - border-radius: 32rpx;  
226 - display: flex;  
227 - justify-content: center;  
228 - align-items: center;  
229 - background: #f0f1f2;  
230 - color: #666;  
231 - image {  
232 - width: 28rpx;  
233 - height: 28rpx;  
234 - margin-left: 4rpx;  
235 - }  
236 - }  
237 -} 230 + .command-record {
  231 + padding: 0 30rpx;
  232 + background: #f8f9fa;
238 233
239 -.list-item {  
240 - width: 690rpx;  
241 - background-color: #fff;  
242 - border-radius: 20rpx;  
243 - margin: 20rpx auto;  
244 - color: #333;  
245 - .item {  
246 - .delivered-color {  
247 - color: blue;  
248 - }  
249 - padding: 30rpx;  
250 - view {  
251 - font-size: 14px;  
252 - margin-bottom: 10rpx;  
253 - }  
254 - .time {  
255 - margin-top: 20rpx;  
256 - color: #999;  
257 - }  
258 - .item-first { 234 + .filter-button {
  235 + font-size: 12px;
  236 + width: 160rpx;
  237 + height: 64rpx;
  238 + border-radius: 32rpx;
259 display: flex; 239 display: flex;
260 - justify-content: space-between; 240 + justify-content: center;
261 align-items: center; 241 align-items: center;
262 - font-size: 15px;  
263 - font-weight: 500;  
264 - align-items: center;  
265 - .item-right {  
266 - display: flex;  
267 - justify-content: center;  
268 - align-items: center;  
269 - width: 104rpx;  
270 - height: 36rpx;  
271 - font-size: 10px;  
272 - border-radius: 20rpx; 242 + background: #f0f1f2;
  243 + color: #666;
  244 +
  245 + image {
  246 + width: 28rpx;
  247 + height: 28rpx;
  248 + margin-left: 4rpx;
  249 + }
  250 + }
  251 + }
  252 +
  253 + .list-item {
  254 + width: 690rpx;
  255 + background-color: #fff;
  256 + border-radius: 20rpx;
  257 + margin: 20rpx auto;
  258 + color: #333;
  259 +
  260 + .item {
  261 + .delivered-color {
  262 + color: blue;
  263 + }
  264 +
  265 + padding: 30rpx;
  266 +
  267 + view {
  268 + font-size: 14px;
  269 + margin-bottom: 10rpx;
273 } 270 }
274 - .item-fail {  
275 - color: #848383;  
276 - background-color: #84838325; 271 +
  272 + .time {
  273 + margin-top: 20rpx;
  274 + color: #999;
277 } 275 }
278 - .item.success {  
279 - color: #00c9a7;  
280 - background-color: #00c9a725; 276 +
  277 + .item-first {
  278 + display: flex;
  279 + justify-content: space-between;
  280 + align-items: center;
  281 + font-size: 15px;
  282 + font-weight: 500;
  283 + align-items: center;
  284 +
  285 + .item-right {
  286 + display: flex;
  287 + justify-content: center;
  288 + align-items: center;
  289 + width: 104rpx;
  290 + height: 36rpx;
  291 + font-size: 10px;
  292 + border-radius: 20rpx;
  293 + }
  294 +
  295 + .item-fail {
  296 + color: #848383;
  297 + background-color: #84838325;
  298 + }
  299 +
  300 + .item.success {
  301 + color: #00c9a7;
  302 + background-color: #00c9a725;
  303 + }
281 } 304 }
282 } 305 }
283 } 306 }
284 -}  
285 307
286 -.filter {  
287 - padding: 0 30rpx;  
288 - .filter-title {  
289 - text-align: center;  
290 - margin-top: 14px;  
291 - font-size: 16px;  
292 - font-weight: 700;  
293 - }  
294 - .button-group {  
295 - display: flex;  
296 - margin-top: 40rpx;  
297 - justify-content: space-between;  
298 - view {  
299 - width: 330rpx; 308 + .filter {
  309 + padding: 0 30rpx;
  310 +
  311 + .filter-title {
  312 + text-align: center;
  313 + margin-top: 14px;
  314 + font-size: 16px;
  315 + font-weight: 700;
  316 + }
  317 +
  318 + .button-group {
  319 + display: flex;
  320 + margin-top: 40rpx;
  321 + justify-content: space-between;
  322 +
  323 + view {
  324 + width: 330rpx;
  325 + }
300 } 326 }
301 } 327 }
302 -}  
303 </style> 328 </style>