简柏林 / thingskit-app · Commits

Commit 1f2e5d749c89b52aebf19a499ac5c3974293bb60

Authored by xp.Huang
2 parents d392d692 1cb7accf

Merge branch 'sqy_dev' into 'main' 

fix:优化设备的部分样式

See merge request huang/thingskit-app!32
Inline Side-by-side
Showing 6 changed files with 138 additions and 47 deletions
... ... @@ -147,14 +147,15 @@ export default {
147 147 keys: keys[0],
148 148 interval: 1800000
149 149 });
  150 + this.timeDiff = '30分钟';
  151 + if(!Object.keys(data).length) return;
150 152
151 153 this.historyData = data[keys[0]].map(item => {
152 154 return {
153 155 value: item.value,
154 156 ts: formatToDate(item.ts, 'YYYY-MM-DD HH:mm:ss')
155 157 };
156   - });
157   - this.timeDiff = '30分钟';
  158 + }).reverse();
158 159 },
159 160 methods: {
160 161 handleTabClick({ index }) {
... ... @@ -170,8 +171,16 @@ export default {
170 171 value: item.value,
171 172 ts: formatToDate(item.ts, 'YYYY-MM-DD HH:mm:ss')
172 173 };
173   - });
  174 + }).reverse();
174 175 }
175 176 }
176 177 };
177 178 </script>
  179 +
  180 +<style lang="scss" scoped>
  181 +
  182 + .device-detail-page{
  183 + height: 100vh;
  184 + background-color: #f8f9fa;
  185 + }
  186 +</style>
\ No newline at end of file
... ...
1 1 <template>
2   - <view class="alert-page">
  2 + <view class="command-record">
3 3 <!-- 公共组件-每个页面必须引入 -->
4 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 14 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
6 15 <view @click="openDeviceDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">
7 16 <view class="item">
... ... @@ -10,10 +19,12 @@
10 19 <view class="item-right">响应成功</view>
11 20 </view>
12 21 <view>
13   - 命令类型:<text style="margin-left: 16rpx;">MQTT命令</text>
  22 + 命令类型:
  23 + <text style="margin-left: 16rpx;">MQTT命令</text>
14 24 </view>
15 25 <view>
16   - 命令状态:<text style="margin-left: 16rpx;">下发成功</text>
  26 + 命令状态:
  27 + <text style="margin-left: 16rpx;">下发成功</text>
17 28 </view>
18 29 <view class="time">{{ item.createdTime }}</view>
19 30 </view>
... ... @@ -185,9 +196,9 @@ export default {
185 196 downOption: {
186 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 239 uni.stopPullDownRefresh();
229 240 console.log('获取后端数据', res);
230 241 //方法一(推荐): 后台接口有返回列表的总页数 totalPage
231   - this.mescroll.endByPage(res.items.length,res.total); //必传参数(当前页的数据个数, 总页数)
  242 + this.mescroll.endByPage(res.items.length, res.total); //必传参数(当前页的数据个数, 总页数)
232 243 if (pageNo == 1) {
233 244 this.list = res.items;
234 245 } else {
... ... @@ -293,9 +304,8 @@ export default {
293 304 createdTime,
294 305 status
295 306 };
296   - console.log(123)
297 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 313 </script>
304 314
305 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 343 .list-item {
309 344 width: 690rpx;
310   - height: 262rpx;
311 345 background-color: #fff;
312 346 border-radius: 20rpx;
313   - margin: 20rpx auto;
  347 + margin: 0 auto;
  348 + margin-bottom: 20rpx;
314 349 color: #333;
315 350 .item {
316 351 padding: 30rpx;
... ... @@ -319,6 +354,7 @@ export default {
319 354 margin-bottom: 10rpx;
320 355 }
321 356 .time {
  357 + margin-top: 20rpx;
322 358 color: #999;
323 359 }
324 360 .item-first {
... ...
... ... @@ -20,9 +20,16 @@
20 20 </u-form-item>
21 21 <u-form-item @click="openType"><u-input shape="circle" v-model="timeData.getType" placeholder="请选择属性" disabled disabledColor="#377DFF0D" /></u-form-item>
22 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 32 <view v-if="!historyData.length" style="display: flex;justify-content: center; align-items: center;">
25   - {{historyData.length}}
26 33 <view>
27 34 <image src="../../../static/empty.png" style="width: 160rpx;height: 160rpx;" />
28 35 <view style="text-align: center; color:#e8e8e8;padding-bottom: 30rpx;">暂无数据</view>
... ...
1 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 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 9 </view>
19 10 </view>
20 11 </view>
... ... @@ -40,9 +31,38 @@ export default {
40 31 };
41 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 68 </style>
... ...
... ... @@ -13,6 +13,7 @@
13 13 <image src="../../static/shaixuan.png" />
14 14 </view>
15 15 </view>
  16 + <u-line />
16 17 <view class="org">
17 18 <u-cell @click="openOrg" isLink title="组织关系" :border="false">
18 19 <view slot="label" class="label" style="display: flex; align-items: center;margin-top: 20rpx;">
... ... @@ -26,7 +27,7 @@
26 27 </view>
27 28 </view>
28 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 31 <view class="device-list">
31 32 <view @click="openDeviceDetail(item.id, item.alarmStatus, item.lastOnlineTime, item.tbDeviceId)" class="list-item" v-for="item in list" :key="item.id">
32 33 <view
... ... @@ -38,16 +39,16 @@
38 39 "
39 40 >
40 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 43 </view>
43 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 47 <view style="margin-left:16rpx">{{ item.sn }}</view>
47 48 </view>
48 49 </view>
49 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 53 <view style="margin-left:16rpx">{{ item.organizationDTO.name }}</view>
53 54 </view>
... ... @@ -85,14 +86,14 @@
85 86 </mescroll-body>
86 87 <!-- 设备筛选 -->
87 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 91 <FilterItem :filterList="deviceStatus" title="设备状态" @clickTag="currentIndex => handleClickTag(currentIndex, deviceStatus)"></FilterItem>
91 92 <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem>
92 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 97 </view>
97 98 </view>
98 99 </u-popup>
... ... @@ -168,6 +169,7 @@ export default {
168 169 name: '全部',
169 170 type: ''
170 171 },
  172 +
171 173 {
172 174 checked: false,
173 175 name: '直连设备',
... ... @@ -317,7 +319,6 @@ export default {
317 319 display: flex;
318 320 justify-content: space-between;
319 321 padding-bottom: 10rpx;
320   - border-bottom: 1px solid #f5f5f5;
321 322 .search-left {
322 323 width: 580rpx;
323 324 background-color: #f8f9fa;
... ... @@ -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 377 </style>
... ...

879 Bytes | W: | H:

866 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin