简柏林 / thingskit-app · Commits

Commit 1cb7accfa6b1569fcfbbef49c50862e64fbd164f

Authored by sqy
1 parent 5d16e648

fix:优化设备的部分样式

Inline Side-by-side
Showing 6 changed files with 138 additions and 47 deletions
@@ -147,14 +147,15 @@ export default { @@ -147,14 +147,15 @@ export default {
147 keys: keys[0], 147 keys: keys[0],
148 interval: 1800000 148 interval: 1800000
149 }); 149 });
  150 + this.timeDiff = '30分钟';
  151 + if(!Object.keys(data).length) return;
150 152
151 this.historyData = data[keys[0]].map(item => { 153 this.historyData = data[keys[0]].map(item => {
152 return { 154 return {
153 value: item.value, 155 value: item.value,
154 ts: formatToDate(item.ts, 'YYYY-MM-DD HH:mm:ss') 156 ts: formatToDate(item.ts, 'YYYY-MM-DD HH:mm:ss')
155 }; 157 };
156 - });  
157 - this.timeDiff = '30分钟'; 158 + }).reverse();
158 }, 159 },
159 methods: { 160 methods: {
160 handleTabClick({ index }) { 161 handleTabClick({ index }) {
@@ -170,8 +171,16 @@ export default { @@ -170,8 +171,16 @@ export default {
170 value: item.value, 171 value: item.value,
171 ts: formatToDate(item.ts, 'YYYY-MM-DD HH:mm:ss') 172 ts: formatToDate(item.ts, 'YYYY-MM-DD HH:mm:ss')
172 }; 173 };
173 - }); 174 + }).reverse();
174 } 175 }
175 } 176 }
176 }; 177 };
177 </script> 178 </script>
  179 +
  180 +<style lang="scss" scoped>
  181 +
  182 + .device-detail-page{
  183 + height: 100vh;
  184 + background-color: #f8f9fa;
  185 + }
  186 +</style>
1 <template> 1 <template>
2 - <view class="alert-page"> 2 + <view class="command-record">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
  5 + <view class="search">
  6 + <view>
  7 + <view class="search-left"><u--input prefixIcon="search" placeholder="请输入名称搜索" shape="circle" @change="inputChanged"></u--input></view>
  8 + </view>
  9 + <view @click="openSearchDialog" class="search-right">
  10 + <text>筛选</text>
  11 + <image src="../../static/shaixuan.png" />
  12 + </view>
  13 + </view>
5 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"> 14 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
6 <view @click="openDeviceDetail(item)" class="list-item" v-for="(item, index) in list" :key="index"> 15 <view @click="openDeviceDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">
7 <view class="item"> 16 <view class="item">
@@ -10,10 +19,12 @@ @@ -10,10 +19,12 @@
10 <view class="item-right">响应成功</view> 19 <view class="item-right">响应成功</view>
11 </view> 20 </view>
12 <view> 21 <view>
13 - 命令类型:<text style="margin-left: 16rpx;">MQTT命令</text> 22 + 命令类型:
  23 + <text style="margin-left: 16rpx;">MQTT命令</text>
14 </view> 24 </view>
15 <view> 25 <view>
16 - 命令状态:<text style="margin-left: 16rpx;">下发成功</text> 26 + 命令状态:
  27 + <text style="margin-left: 16rpx;">下发成功</text>
17 </view> 28 </view>
18 <view class="time">{{ item.createdTime }}</view> 29 <view class="time">{{ item.createdTime }}</view>
19 </view> 30 </view>
@@ -185,9 +196,9 @@ export default { @@ -185,9 +196,9 @@ export default {
185 downOption: { 196 downOption: {
186 auto: false //是否在初始化后,自动执行downCallback; 默认true 197 auto: false //是否在初始化后,自动执行downCallback; 默认true
187 }, 198 },
188 - page:{  
189 - num:0,  
190 - sizie:10 199 + page: {
  200 + num: 0,
  201 + sizie: 10
191 } 202 }
192 }; 203 };
193 }, 204 },
@@ -228,7 +239,7 @@ export default { @@ -228,7 +239,7 @@ export default {
228 uni.stopPullDownRefresh(); 239 uni.stopPullDownRefresh();
229 console.log('获取后端数据', res); 240 console.log('获取后端数据', res);
230 //方法一(推荐): 后台接口有返回列表的总页数 totalPage 241 //方法一(推荐): 后台接口有返回列表的总页数 totalPage
231 - this.mescroll.endByPage(res.items.length,res.total); //必传参数(当前页的数据个数, 总页数) 242 + this.mescroll.endByPage(res.items.length, res.total); //必传参数(当前页的数据个数, 总页数)
232 if (pageNo == 1) { 243 if (pageNo == 1) {
233 this.list = res.items; 244 this.list = res.items;
234 } else { 245 } else {
@@ -293,9 +304,8 @@ export default { @@ -293,9 +304,8 @@ export default {
293 createdTime, 304 createdTime,
294 status 305 status
295 }; 306 };
296 - console.log(123)  
297 uni.navigateTo({ 307 uni.navigateTo({
298 - url:'/deviceSubPage/deviceDetailPage/tabDetail/CommandDetail' 308 + url: '/deviceSubPage/deviceDetailPage/tabDetail/CommandDetail'
299 }); 309 });
300 } 310 }
301 } 311 }
@@ -303,14 +313,39 @@ export default { @@ -303,14 +313,39 @@ export default {
303 </script> 313 </script>
304 314
305 <style lang="scss" scoped> 315 <style lang="scss" scoped>
306 -.alert-page {  
307 - padding: 20rpx; 316 +.command-record {
  317 + padding: 0 20rpx;
  318 +
  319 + .search {
  320 + display: flex;
  321 + justify-content: space-between;
  322 + padding-bottom: 10rpx;
  323 + border-bottom: 1px solid #f5f5f5;
  324 + .search-left {
  325 + width: 580rpx;
  326 + background-color: #f8f9fa;
  327 + border-radius: 200rpx;
  328 + }
  329 + .search-right {
  330 + display: flex;
  331 + align-items: center;
  332 + text {
  333 + color: #333;
  334 + font-size: 14px;
  335 + }
  336 + image {
  337 + width: 40rpx;
  338 + height: 40rpx;
  339 + }
  340 + }
  341 + }
  342 +
308 .list-item { 343 .list-item {
309 width: 690rpx; 344 width: 690rpx;
310 - height: 262rpx;  
311 background-color: #fff; 345 background-color: #fff;
312 border-radius: 20rpx; 346 border-radius: 20rpx;
313 - margin: 20rpx auto; 347 + margin: 0 auto;
  348 + margin-bottom: 20rpx;
314 color: #333; 349 color: #333;
315 .item { 350 .item {
316 padding: 30rpx; 351 padding: 30rpx;
@@ -319,6 +354,7 @@ export default { @@ -319,6 +354,7 @@ export default {
319 margin-bottom: 10rpx; 354 margin-bottom: 10rpx;
320 } 355 }
321 .time { 356 .time {
  357 + margin-top: 20rpx;
322 color: #999; 358 color: #999;
323 } 359 }
324 .item-first { 360 .item-first {
@@ -20,9 +20,16 @@ @@ -20,9 +20,16 @@
20 </u-form-item> 20 </u-form-item>
21 <u-form-item @click="openType"><u-input shape="circle" v-model="timeData.getType" placeholder="请选择属性" disabled disabledColor="#377DFF0D" /></u-form-item> 21 <u-form-item @click="openType"><u-input shape="circle" v-model="timeData.getType" placeholder="请选择属性" disabled disabledColor="#377DFF0D" /></u-form-item>
22 </u-form> 22 </u-form>
23 - <view class="charts-box" v-show="historyData.length"><qiun-data-charts type="area" canvas2d canvasId="daskujdhasljkdcnzjkdfhuoqwlqwjhkdsamjczxnmdasd123321" :chartData="chartData" :opts="{ xAxis: { disabled: true }, legend: { show: false } }" /></view> 23 + <view class="charts-box" v-show="historyData.length">
  24 + <qiun-data-charts
  25 + type="area"
  26 + canvas2d
  27 + canvasId="daskujdhasljkdcnzjkdfhuoqwlqwjhkdsamjczxnmdasd123321"
  28 + :chartData="chartData"
  29 + :opts="{ xAxis: { disabled: true }, legend: { show: false } }"
  30 + />
  31 + </view>
24 <view v-if="!historyData.length" style="display: flex;justify-content: center; align-items: center;"> 32 <view v-if="!historyData.length" style="display: flex;justify-content: center; align-items: center;">
25 - {{historyData.length}}  
26 <view> 33 <view>
27 <image src="../../../static/empty.png" style="width: 160rpx;height: 160rpx;" /> 34 <image src="../../../static/empty.png" style="width: 160rpx;height: 160rpx;" />
28 <view style="text-align: center; color:#e8e8e8;padding-bottom: 30rpx;">暂无数据</view> 35 <view style="text-align: center; color:#e8e8e8;padding-bottom: 30rpx;">暂无数据</view>
1 <template> 1 <template>
2 - <view style="margin-top: 40rpx;margin-left: 40rpx;">  
3 - <view>  
4 - <text style="color: #333;">{{ title }}</text> 2 + <view class="filter-item">
  3 + <view class="filter-title">
  4 + <text>{{ title }}</text>
5 </view> 5 </view>
6 - <view class="u-flex" style="flex-wrap: wrap;">  
7 - <view v-for="(item, index) in filterList" :key="index" class="u-page__tag-item">  
8 - <u-tag  
9 - shape="circle"  
10 - size="large"  
11 - borderColor="#377DFF4D"  
12 - :bgColor="item.checked?'#f5f8ff':'#F6F6F6'"  
13 - :color="item.checked?'#377DFF':'#333'"  
14 - :text="item.name"  
15 - @click="radioClick(index)"  
16 -  
17 - /> 6 + <view class="filter-list">
  7 + <view v-for="(item, index) in filterList" :key="index" @click="radioClick(index)" :class="['tag-item', { checked: item.checked, 'mr-30': (index + 1) % 3 !== 0 }]">
  8 + {{ item.name }}
18 </view> 9 </view>
19 </view> 10 </view>
20 </view> 11 </view>
@@ -40,9 +31,38 @@ export default { @@ -40,9 +31,38 @@ export default {
40 }; 31 };
41 </script> 32 </script>
42 33
43 -<style>  
44 -.u-page__tag-item {  
45 - margin-right: 20px;  
46 - margin-top: 20px; 34 +<style lang="scss" scoped>
  35 +.filter-item {
  36 + margin-top: 40rpx;
  37 + .filter-title {
  38 + color: #333;
  39 + font-size: 14px;
  40 + font-weight: 700;
  41 + }
  42 + .filter-list {
  43 + display: flex;
  44 + flex-wrap: wrap;
  45 + .tag-item {
  46 + margin-top: 30rpx;
  47 + width: 210rpx;
  48 + height: 68rpx;
  49 + border-radius: 32rpx;
  50 + display: flex;
  51 + justify-content: center;
  52 + align-items: center;
  53 + color: #333;
  54 + font-size: 13px;
  55 + border: 1px solid #fff;
  56 + background-color: #f6f6f6;
  57 + }
  58 + .checked {
  59 + border: 1px solid #377dff4d;
  60 + background-color: #377dff0d;
  61 + color: #377dffff;
  62 + }
  63 + .mr-30 {
  64 + margin-right: 30rpx;
  65 + }
  66 + }
47 } 67 }
48 </style> 68 </style>
@@ -13,6 +13,7 @@ @@ -13,6 +13,7 @@
13 <image src="../../static/shaixuan.png" /> 13 <image src="../../static/shaixuan.png" />
14 </view> 14 </view>
15 </view> 15 </view>
  16 + <u-line />
16 <view class="org"> 17 <view class="org">
17 <u-cell @click="openOrg" isLink title="组织关系" :border="false"> 18 <u-cell @click="openOrg" isLink title="组织关系" :border="false">
18 <view slot="label" class="label" style="display: flex; align-items: center;margin-top: 20rpx;"> 19 <view slot="label" class="label" style="display: flex; align-items: center;margin-top: 20rpx;">
@@ -26,7 +27,7 @@ @@ -26,7 +27,7 @@
26 </view> 27 </view>
27 </view> 28 </view>
28 </u-sticky> 29 </u-sticky>
29 - <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"> 30 + <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
30 <view class="device-list"> 31 <view class="device-list">
31 <view @click="openDeviceDetail(item.id, item.alarmStatus, item.lastOnlineTime, item.tbDeviceId)" class="list-item" v-for="item in list" :key="item.id"> 32 <view @click="openDeviceDetail(item.id, item.alarmStatus, item.lastOnlineTime, item.tbDeviceId)" class="list-item" v-for="item in list" :key="item.id">
32 <view 33 <view
@@ -38,16 +39,16 @@ @@ -38,16 +39,16 @@
38 " 39 "
39 > 40 >
40 <view style="width: 450rpx; text-align: left"> 41 <view style="width: 450rpx; text-align: left">
41 - <text style="color: #333; font-size: 15px">{{ item.name }}</text> 42 + <text style="color: #333; font-size: 30rpx;font-weight: bold;">{{ item.name }}</text>
42 </view> 43 </view>
43 <view style="width: 450rpx; text-align: left; margin-top: 10rpx"> 44 <view style="width: 450rpx; text-align: left; margin-top: 10rpx">
44 - <view style="color: #666; font-size: 15px;display: flex;"> 45 + <view style="color: #666; font-size: 14px;display: flex;">
45 设备编号: 46 设备编号:
46 <view style="margin-left:16rpx">{{ item.sn }}</view> 47 <view style="margin-left:16rpx">{{ item.sn }}</view>
47 </view> 48 </view>
48 </view> 49 </view>
49 <view style="width: 450rpx; text-align: left; margin-top: 10rpx"> 50 <view style="width: 450rpx; text-align: left; margin-top: 10rpx">
50 - <view style="color: #666; font-size: 15px;display: flex;"> 51 + <view style="color: #666; font-size: 14px;display: flex;">
51 所属组织: 52 所属组织:
52 <view style="margin-left:16rpx">{{ item.organizationDTO.name }}</view> 53 <view style="margin-left:16rpx">{{ item.organizationDTO.name }}</view>
53 </view> 54 </view>
@@ -85,14 +86,14 @@ @@ -85,14 +86,14 @@
85 </mescroll-body> 86 </mescroll-body>
86 <!-- 设备筛选 --> 87 <!-- 设备筛选 -->
87 <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20"> 88 <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20">
88 - <view>  
89 - <view style="text-align: center; margin-top: 28rpx"><text>筛选条件</text></view> 89 + <view class="filter">
  90 + <view class="filter-title"><text>筛选条件</text></view>
90 <FilterItem :filterList="deviceStatus" title="设备状态" @clickTag="currentIndex => handleClickTag(currentIndex, deviceStatus)"></FilterItem> 91 <FilterItem :filterList="deviceStatus" title="设备状态" @clickTag="currentIndex => handleClickTag(currentIndex, deviceStatus)"></FilterItem>
91 <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem> 92 <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem>
92 <FilterItem :filterList="typeStatus" title="设备类型" @clickTag="currentIndex => handleClickTag(currentIndex, typeStatus)"></FilterItem> 93 <FilterItem :filterList="typeStatus" title="设备类型" @clickTag="currentIndex => handleClickTag(currentIndex, typeStatus)"></FilterItem>
93 - <view class="u-flex" style="margin-top: 40rpx; margin-left: 55rpx">  
94 - <view style="width: 300rpx"><u-button type="info" shape="circle" text="重置" @click="resetFilter"></u-button></view>  
95 - <view style="width: 300rpx; margin-left: 46rpx"><u-button type="primary" shape="circle" text="确认" @click="confirmFilter"></u-button></view> 94 + <view class="button-group">
  95 + <view><u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="重置" @click="resetFilter"></u-button></view>
  96 + <view><u-button color="#3388ff" shape="circle" text="确认" @click="confirmFilter"></u-button></view>
96 </view> 97 </view>
97 </view> 98 </view>
98 </u-popup> 99 </u-popup>
@@ -168,6 +169,7 @@ export default { @@ -168,6 +169,7 @@ export default {
168 name: '全部', 169 name: '全部',
169 type: '' 170 type: ''
170 }, 171 },
  172 +
171 { 173 {
172 checked: false, 174 checked: false,
173 name: '直连设备', 175 name: '直连设备',
@@ -317,7 +319,6 @@ export default { @@ -317,7 +319,6 @@ export default {
317 display: flex; 319 display: flex;
318 justify-content: space-between; 320 justify-content: space-between;
319 padding-bottom: 10rpx; 321 padding-bottom: 10rpx;
320 - border-bottom: 1px solid #f5f5f5;  
321 .search-left { 322 .search-left {
322 width: 580rpx; 323 width: 580rpx;
323 background-color: #f8f9fa; 324 background-color: #f8f9fa;
@@ -355,4 +356,22 @@ export default { @@ -355,4 +356,22 @@ export default {
355 } 356 }
356 } 357 }
357 } 358 }
  359 +
  360 +.filter {
  361 + padding: 0 30rpx;
  362 + .filter-title {
  363 + text-align: center;
  364 + margin-top: 14px;
  365 + font-size: 32rpx;
  366 + font-weight: 700;
  367 + }
  368 + .button-group {
  369 + display: flex;
  370 + margin-top: 40rpx;
  371 + justify-content: space-between;
  372 + view {
  373 + width: 330rpx;
  374 + }
  375 + }
  376 +}
358 </style> 377 </style>

879 Bytes | W: | H:

866 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin