mes_mobile/pages/equipmentManage/editDevice.vue

99 lines
3.0 KiB
Vue

<template>
<page-meta>
<navigation-bar title="添加设备" color="white"></navigation-bar>
</page-meta>
<view class="pagepaddings">
<view class="page_name font14">
添加/编辑设备
</view>
<view class="page_content contentboxsty font13">
<view class="content_row">
<view class="name">选择设备</view>
<picker placeholder="请选择设备" @change="bindPickerChange" :value="index" :range="array" >
<input type="text" :value="array[index]" placeholder="请选择设备" disabled />
</picker>
<!-- <view class="">
<picker @change="bindPickerChange" placeholder="请选择设备" :value="index" :range="array">
<view class="uni-input" style="width: 70%;">{{array[index]}}</view>
</picker>
</view -->
</view>
<view class="content_row">
<view class="name">设备自定义名称</view>
<view class="">
<input placeholder="请输入设备名称"/>
</view>
</view>
<view class="content_row">
<view class="name">设备功率</view>
<view class="">
<input placeholder="请输入设备功率"/>
</view>
</view>
<view class="content_row">
<view class="name">设备IP</view>
<view class="">
<input placeholder="请输入设备IP"/>
</view>
</view>
<view class="content_row">
<view class="name">端口</view>
<view class="">
<input placeholder="请输入设备端口"/>
</view>
</view>
<view class="content_row">
<view class="name">状态</view>
<view class="flex_layout">
<!-- <image src="/static/enable.png" mode=""></image><text class="text">启用</text>
<image src="/static/disable.png" mode=""></image><text class="text">禁用</text> -->
<view class="t-icon t-icon-qiyong1 contenticon"></view><text class="text">启用</text>
<view class="t-icon t-icon-jinyong2 contenticon"></view><text class="text">禁用</text>
<!-- <label class="radio"><radio value="r1" checked="true" />启用</label>
<label class="radio"><radio value="r2" />禁用</label> -->
</view>
</view>
<view class="textarea_row">
<view class="name">设置备注</view>
<textarea />
</view>
</view>
<view class="bottom_but flex_layout">
<view class="font13">保存</view>
<view class="font13">取消</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
array: ['中国', '美国', '巴西', '日本'],
}
},
methods: {
}
}
</script>
<style lang="scss">
.page_name{margin-bottom: 10px;}
.page_content{padding: 0 12px 10px;}
.content_row{display: flex;border-bottom: 1px solid #2D3A6F;height: 44px;align-items: center;
.name{width: 30%;}
.flex_layout{
.contenticon{width: 20px;height: 20px;}
.text{padding: 0 20px 0 5px;}
}
}
.textarea_row{
.name{padding: 12px 0;}
textarea{border-radius: 4px;background: rgba(255, 255, 255, 0.50);width: 100%;}
}
</style>