502 lines
12 KiB
Vue
502 lines
12 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="设备列表" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
||
height='58'></u-navbar>
|
||
<view class="serchinp">
|
||
<u-search placeholder="搜索" v-model="keyword"></u-search>
|
||
<view class="xuanze">
|
||
<text style="margin-top: 4rpx;" @click="btnstatus(1)">{{zhuangt}}</text> <text
|
||
style="width: 2px;height: 40rpx;background-color: #C7C7C7;display: inline-block;"></text> <text
|
||
style="margin-top: 4rpx;" @click="btnstatus(2)">{{leix}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="device">
|
||
<view class="shuju">
|
||
<view class="ddje">
|
||
<view class="shu">
|
||
设备总数
|
||
</view>
|
||
<view class="sb">
|
||
50
|
||
</view>
|
||
</view>
|
||
<text style="width: 1px;height: 60rpx;background: #979797;margin-top: 24rpx;"></text>
|
||
<view class="ddje">
|
||
<view class="shu">
|
||
未上机数
|
||
</view>
|
||
<view class="sb">
|
||
0
|
||
</view>
|
||
</view>
|
||
<text style="width: 1px;height: 60rpx;background: #979797;margin-top: 24rpx;"></text>
|
||
<view class="ddje">
|
||
<view class="shu">
|
||
在线数
|
||
</view>
|
||
<view class="sb">
|
||
47
|
||
</view>
|
||
</view>
|
||
<text style="width: 1px;height: 60rpx;background: #979797;margin-top: 24rpx;"></text>
|
||
<view class="ddje">
|
||
<view class="shu">
|
||
离线数
|
||
</view>
|
||
<view class="sb">
|
||
3
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="scrll">
|
||
<view class="cdblist">
|
||
<view class="toptltle">
|
||
<view class="toptltle_lt">
|
||
<u-icon name="file-text" size="32"></u-icon> fadgfryt168742341682
|
||
</view>
|
||
<view class="toptltle_rt" @click="btnxq">
|
||
<text></text><text></text><text></text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cdbcen">
|
||
<view class="cdbcen-dpmc">
|
||
店铺名称：<text>瑞斯特酒店（龙安店）</text>
|
||
</view>
|
||
<view class="cdbcen-dpdz">
|
||
<view class="">
|
||
店铺地址：福鼎市兴港路附近中石化森美龙安 加油站
|
||
</view>
|
||
<view class="sj">
|
||
2023-10-04
|
||
</view>
|
||
</view>
|
||
<view class="cdbcen-szbz">
|
||
<view class="inp">
|
||
<text>设置备注：</text> <input type="text" placeholder="无" />
|
||
</view>
|
||
<view class="but">
|
||
修改备注
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" style="width: 100%;height: 1px;background-color: #ccc;margin-top: 10rpx;"> </view>
|
||
<view class="cdbbuttom">
|
||
<view class="one">
|
||
<text>网络</text><text>设备状态</text><text>类型</text><text>电池</text><text>可还</text>
|
||
</view>
|
||
<view class="two">
|
||
<text style="color: #1DBE7B;">在线</text><text style="color: #1DBE7B;">正常</text><text>8</text><text>0</text><text>0</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cdblist">
|
||
<view class="toptltle">
|
||
<view class="toptltle_lt">
|
||
<u-icon name="file-text" size="32"></u-icon> fadgfryt168742341682
|
||
</view>
|
||
<view class="toptltle_rt">
|
||
<text></text><text></text><text></text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cdbcen">
|
||
<view class="cdbcen-dpmc">
|
||
店铺名称：<text>瑞斯特酒店（龙安店）</text>
|
||
</view>
|
||
<view class="cdbcen-dpdz">
|
||
<view class="">
|
||
店铺地址：福鼎市兴港路附近中石化森美龙安 加油站
|
||
</view>
|
||
<view class="sj">
|
||
2023-10-04
|
||
</view>
|
||
</view>
|
||
<view class="cdbcen-szbz">
|
||
<view class="inp">
|
||
<text>设置备注：</text> <input type="text" placeholder="无" />
|
||
</view>
|
||
<view class="but">
|
||
修改备注
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" style="width: 100%;height: 1px;background-color: #ccc;margin-top: 10rpx;"> </view>
|
||
<view class="cdbbuttom">
|
||
<view class="one">
|
||
<text>网络</text><text>设备状态</text><text>类型</text><text>电池</text><text>可还</text>
|
||
</view>
|
||
<view class="two">
|
||
<text style="color: #1DBE7B;">在线</text><text style="color: #1DBE7B;">正常</text><text>8</text><text>0</text><text>0</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cdblist">
|
||
<view class="toptltle">
|
||
<view class="toptltle_lt">
|
||
<u-icon name="file-text" @click="copybtn(text)" size="32"></u-icon> {{text}}
|
||
</view>
|
||
<view class="toptltle_rt">
|
||
<text></text><text></text><text></text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cdbcen">
|
||
<view class="cdbcen-dpmc">
|
||
店铺名称：<text>瑞斯特酒店（龙安店）</text>
|
||
</view>
|
||
<view class="cdbcen-dpdz">
|
||
<view class="">
|
||
店铺地址：福鼎市兴港路附近中石化森美龙安 加油站
|
||
</view>
|
||
<view class="sj">
|
||
2023-10-04
|
||
</view>
|
||
</view>
|
||
<view class="cdbcen-szbz">
|
||
<view class="inp">
|
||
<text>设置备注：</text> <input type="text" placeholder="无" />
|
||
</view>
|
||
<view class="but">
|
||
修改备注
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" style="width: 100%;height: 1px;background-color: #ccc;margin-top: 10rpx;"> </view>
|
||
<view class="cdbbuttom">
|
||
<view class="one">
|
||
<text>网络</text><text>设备状态</text><text>类型</text><text>电池</text><text>可还</text>
|
||
</view>
|
||
<view class="two">
|
||
<text style="color: #1DBE7B;">在线</text><text style="color: #1DBE7B;">正常</text><text>8</text><text>0</text><text>0</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 类型 -->
|
||
<u-select v-model="zhuangtaishow" :list="zhaungtailist" @confirm="confirmzt"></u-select>
|
||
<!-- 状态 -->
|
||
<u-select v-model="leixingshow" :list="leixinglist" @confirm="confirmlx"></u-select>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
zhuangtaishow: false,
|
||
leixingshow: false,
|
||
text:'fadgfryt168742341682',
|
||
zhaungtailist: [{
|
||
value: '1',
|
||
label: '正常'
|
||
},
|
||
{
|
||
value: '2',
|
||
label: '离线'
|
||
}
|
||
],
|
||
zhuangt:'状态',
|
||
leix:'类型',
|
||
leixinglist: [{
|
||
value: '1',
|
||
label: '4'
|
||
},
|
||
{
|
||
value: '2',
|
||
label: '8'
|
||
},
|
||
{
|
||
value: '3',
|
||
label: '16'
|
||
},
|
||
{
|
||
value: '4',
|
||
label: '24'
|
||
}
|
||
],
|
||
bgc: {
|
||
background: '#25CE88'
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
copybtn(value){
|
||
uni.setClipboardData({
|
||
data:value,//要被复制的内容
|
||
success:()=>{//复制成功的回调函数
|
||
uni.showToast({//提示
|
||
title:'复制成功'
|
||
})
|
||
}
|
||
});
|
||
// uni.showModal({
|
||
// content:value,//模板中提示的内容
|
||
// confirmText:'复制内容',
|
||
// success:()=>{//点击复制内容的后调函数
|
||
// //uni.setClipboardData方法就是讲内容复制到粘贴板
|
||
|
||
// }
|
||
// });
|
||
},
|
||
|
||
btnstatus(num){
|
||
if(num == 1){
|
||
this.zhuangtaishow = true
|
||
this.leixingshow = false
|
||
}else{
|
||
this.zhuangtaishow = false
|
||
this.leixingshow = true
|
||
}
|
||
},
|
||
confirmzt(e){
|
||
console.log(e);
|
||
this.zhuangt = e[0].label
|
||
},
|
||
confirmlx(e){
|
||
console.log(e);
|
||
this.leix = e[0].label
|
||
},
|
||
|
||
btnxq(){
|
||
uni.navigateTo({
|
||
url:'/pages/agentpages/devicemanagement/chargepallist/listdetail/index'
|
||
})
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/ .u-title,
|
||
/deep/ .uicon-nav-back {
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
page {
|
||
background: #F4F5F7;
|
||
}
|
||
|
||
.page {
|
||
width: 750rpx;
|
||
padding-left: 34rpx;
|
||
padding-right: 34rpx;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
.scrll{
|
||
height: 1000rpx;
|
||
overflow-y: scroll;
|
||
margin-top: 24rpx;
|
||
padding-bottom: 400rpx;
|
||
}
|
||
.cdblist{
|
||
width: 680rpx;
|
||
height: 440rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
margin: auto;
|
||
margin-top: 24rpx;
|
||
.cdbbuttom{
|
||
padding: 26rpx 60rpx;
|
||
box-sizing: border-box;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
text{
|
||
width: 100rpx;
|
||
text-align: center;
|
||
}
|
||
.one{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.two{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
.cdbcen{
|
||
padding: 24rpx 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.cdbcen-dpmc{
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
text{
|
||
font-size: 24rpx;
|
||
color: #25CE88;
|
||
}
|
||
}
|
||
.cdbcen-dpdz{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 6rpx;
|
||
.sj{
|
||
font-size: 20rpx;
|
||
color: #3D3D3D;
|
||
margin-left: 34rpx;
|
||
width: 140rpx;
|
||
}
|
||
}
|
||
.cdbcen-szbz{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 6rpx;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
text{
|
||
padding-top: 6rpx;
|
||
}
|
||
.inp{
|
||
display: flex;
|
||
input{
|
||
width: 354rpx;
|
||
height: 30rpx;
|
||
background: #F0F0F0;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
padding-left: 16rpx;
|
||
font-size: 20rpx;
|
||
color: #808080;
|
||
}
|
||
}
|
||
.but{
|
||
width: 110rpx;
|
||
height: 44rpx;
|
||
background: #1DBE7B;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
text-align: center;
|
||
line-height: 44rpx;
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.toptltle{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
border-bottom: 1px solid #ccc;
|
||
.toptltle_lt{
|
||
padding-top: 24rpx;
|
||
padding-left: 32rpx;
|
||
box-sizing: border-box;
|
||
font-size: 24rpx;
|
||
color: #808080;
|
||
padding-bottom: 24rpx;
|
||
}
|
||
.toptltle_rt{
|
||
padding-top: 12rpx;
|
||
padding-right: 32rpx;
|
||
box-sizing: border-box;
|
||
text{
|
||
display: inline-block;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
border-radius: 50%;
|
||
background-color: #000;
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.device {
|
||
width: 100%;
|
||
margin-top: 210rpx;
|
||
.iconlist {
|
||
display: flex;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 24rpx;
|
||
width: 680rpx;
|
||
height: 180rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
padding-top: 38rpx;
|
||
|
||
image {
|
||
width: 96rpx;
|
||
height: 98rpx;
|
||
margin-right: 66rpx;
|
||
}
|
||
}
|
||
|
||
.shuju {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 24rpx;
|
||
width: 680rpx;
|
||
height: 180rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
padding-top: 38rpx;
|
||
|
||
.ddje {
|
||
text-align: center;
|
||
|
||
.shu {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.sb {
|
||
margin-top: 20rpx;
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.serchinp {
|
||
width: 750rpx;
|
||
height: 180rpx;
|
||
background: #FFFFFF;
|
||
position: fixed;
|
||
left: 0;
|
||
padding: 0 36rpx;
|
||
box-sizing: border-box;
|
||
padding-top: 32rpx;
|
||
|
||
/deep/ .u-content {
|
||
padding-left: 150rpx;
|
||
border-radius: 50rpx 0 0 50rpx !important;
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
/deep/ .u-action {
|
||
border: 1rpx solid #ccc;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
margin-left: 0;
|
||
width: 120rpx;
|
||
background-color: #f2f2f2;
|
||
border-radius: 0 50rpx 50rpx 0;
|
||
}
|
||
|
||
.xuanze {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 146rpx;
|
||
box-sizing: border-box;
|
||
padding-top: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
</style> |