页面切图
This commit is contained in:
仲么了
109
pages/gateway/detail.vue
Normal file
109
pages/gateway/detail.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<Cn-page :loading='loading' noPadding>
|
||||
<view slot='body'>
|
||||
<view class='detail device'>
|
||||
<view class="header">
|
||||
<image src="/static/test2.pic.png" mode="widthFix" style="width: 100%;" />
|
||||
</view>
|
||||
<view class="title">基本信息</view>
|
||||
<view class="des">
|
||||
<text>名称：监测网关</text>
|
||||
<text class="ml20">项目：监测</text>
|
||||
</view>
|
||||
<view class="des">
|
||||
<text>设备型号：PQS-882</text>
|
||||
<text class="ml20">版本号：v1.0.0</text>
|
||||
</view>
|
||||
<view class="title mb20 m340">设备列表
|
||||
<view class="footer-btn" @click="newDevice">注册设备</view>
|
||||
</view>
|
||||
<uni-card :title="item.name" :sub-title="item.project" :extra="item.type"
|
||||
v-for="(item, index) in deviceList" :key="index" style="margin-top:4rpx" @click="goDevice(item)"
|
||||
thumbnail="/static/device.png" padding="0">
|
||||
</uni-card>
|
||||
<uni-load-more status="nomore"></uni-load-more>
|
||||
<view style="height:20rpx"></view>
|
||||
</view>
|
||||
</view>
|
||||
</Cn-page>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
deviceList: [
|
||||
{
|
||||
name: '设备1',
|
||||
des: '设备描述1',
|
||||
type: 'APF',
|
||||
project: '监测',
|
||||
},
|
||||
{
|
||||
name: '设备2',
|
||||
des: '设备描述2',
|
||||
type: 'DVR',
|
||||
project: '监测'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
newDevice () {
|
||||
uni.navigateTo({
|
||||
url: '/pages/gateway/newDevice'
|
||||
})
|
||||
},
|
||||
goDevice (item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/device/${item.type}/detail`
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad (options) {
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.detail {
|
||||
|
||||
// background: $uni-theme-white;
|
||||
.header {
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx 0;
|
||||
font-size: 36rpx;
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
.footer-btn {
|
||||
padding: 0 20rpx;
|
||||
height: 50rpx;
|
||||
background-color: #007aff;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 50rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.des {
|
||||
padding: 20rpx 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
}</style>
|
||||
@@ -1,12 +1,21 @@
|
||||
<template>
|
||||
<Cn-page :loading='loading'>
|
||||
<view slot='body'>
|
||||
<view class='index'>
|
||||
<uni-card title="网关信息" sub-title="副标题" v-for="item in 3" :key="item" @click="jump"
|
||||
thumbnail="/static/gateway.png">
|
||||
<view class="footer">
|
||||
<text>设备基础信息 </text>
|
||||
<view class="footer-btn" @click="newDevice">注册设备</view>
|
||||
<view class='index' :class="{ 'device': userInfo.role == '5' }">
|
||||
<uni-card title="监测网关" sub-title="监测" @click="look" thumbnail="/static/gateway.png"
|
||||
:padding="userInfo.role == '5' ? 0 : '10px'">
|
||||
<view class="footer" v-if="userInfo.role != 5">
|
||||
<text style="flex:1"> </text>
|
||||
<view class="footer-btn" @click.stop="newDevice">注册设备</view>
|
||||
<view class="footer-btn ml20">查看</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
<uni-card title="用能网关" sub-title="用能" @click="look" thumbnail="/static/gateway.png"
|
||||
:padding="userInfo.role == '5' ? 0 : '10px'">
|
||||
<view class="footer" v-if="userInfo.role != 5">
|
||||
<text style="flex:1"> </text>
|
||||
<view class="footer-btn" @click.stop="newDevice">注册设备</view>
|
||||
<view class="footer-btn ml20">查看</view>
|
||||
</view>
|
||||
</uni-card>
|
||||
<uni-load-more status="nomore"></uni-load-more>
|
||||
@@ -18,9 +27,13 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
loading: false,
|
||||
userInfo: {}
|
||||
}
|
||||
},
|
||||
onLoad (options) {
|
||||
this.userInfo = uni.getStorageSync('userInfo')
|
||||
},
|
||||
methods: {
|
||||
newDevice () {
|
||||
// uni.scanCode({
|
||||
@@ -34,11 +47,17 @@ export default {
|
||||
url: '/pages/gateway/newDevice'
|
||||
})
|
||||
},
|
||||
look () {
|
||||
uni.navigateTo({
|
||||
url: '/pages/gateway/detail'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.index {
|
||||
padding-top: 20rpx;
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
<uni-forms-item label="拓扑图">
|
||||
<view style="display:flex;">
|
||||
<view style="flex:1">
|
||||
<image class="gplot" src="/static/test2.pic.jpg" mode="aspectFill" />
|
||||
<image class="gplot" src="/static/test2.pic.png" mode="aspectFill" />
|
||||
</view>
|
||||
<uni-icons type="image" color="#007aff" size="26" class="ml20"
|
||||
@click="chooseGplot"></uni-icons>
|
||||
@@ -46,7 +46,7 @@
|
||||
<scroll-view style="height: 100%;" scroll-y="true">
|
||||
<view class="content">
|
||||
<image class="gplot gplot-box" mode="aspectFill" :class="{ 'gplot-active': key == activeGplot }"
|
||||
src="/static/test2.pic.jpg" @click="activeGplot = key" v-for="(item, key) in 3" :key="key" />
|
||||
src="/static/test2.pic.png" @click="activeGplot = key" v-for="(item, key) in 3" :key="key" />
|
||||
<view class="btn-wrap">
|
||||
<view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
|
||||
<view class="btn-wrap-item ml20" @click="closeDrawer"> 确定 </view>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<uni-forms-item label="拓扑图">
|
||||
<view style="display:flex;">
|
||||
<view style="flex:1">
|
||||
<image class="gplot" src="/static/test2.pic.jpg" mode="aspectFill" />
|
||||
<image class="gplot" src="/static/test2.pic.png" mode="aspectFill" />
|
||||
</view>
|
||||
<uni-icons type="image" color="#007aff" size="26" class="ml20"
|
||||
@click="chooseGplot(item)"></uni-icons>
|
||||
@@ -38,7 +38,7 @@
|
||||
<scroll-view style="height: 100%;" scroll-y="true">
|
||||
<view class="content">
|
||||
<image class="gplot gplot-box" mode="aspectFill" :class="{ 'gplot-active': key == activeGplot }"
|
||||
src="/static/test2.pic.jpg" @click="activeGplot = key" v-for="(item, key) in 3"
|
||||
src="/static/test2.pic.png" @click="activeGplot = key" v-for="(item, key) in 3"
|
||||
:key="key" />
|
||||
<view class="btn-wrap">
|
||||
<view class="btn-wrap-item" @click="closeDrawer"> 取消 </view>
|
||||
@@ -51,7 +51,7 @@
|
||||
<scroll-view style="height: 100%;" scroll-y="true">
|
||||
<view style="background:#fff">
|
||||
<view class="map-pin-box">
|
||||
<image class="gplot" mode="widthFix" src="/static/test2.pic.jpg" />
|
||||
<image class="gplot" mode="widthFix" src="/static/test2.pic.png" />
|
||||
<movable-area class="map-pin-box-area">
|
||||
<movable-view :x="point.x" :y="point.y" direction="all" @change="dragPoint">
|
||||
<view class="point center">
|
||||
|
||||
Reference in New Issue
Block a user