230 lines
6.3 KiB
Vue
230 lines
6.3 KiB
Vue
<template>
|
|
<page-meta>
|
|
<navigation-bar :title="this.form.id && this.form.id > 0?'编辑设备':'添加设备'"></navigation-bar>
|
|
</page-meta>
|
|
<view class="page_padding bot_padding">
|
|
<view class="page_content contentboxsty font13">
|
|
<view class="content_row">
|
|
<view class="name font_bold">选择设备</view>
|
|
<pickerSelect class="comView" @change="equipmentChange" :list="setMap.equipment" :id="form.eq_no" placeholder="请选择设备" />
|
|
</view>
|
|
<view class="content_row">
|
|
<view class="name font_bold">设备自定义名称</view>
|
|
<view class="comView">
|
|
<input v-model="form.name" placeholder="请输入设备名称"/>
|
|
</view>
|
|
</view>
|
|
<view class="content_row">
|
|
<view class="name font_bold">设备编号</view>
|
|
<view class="comView">
|
|
<input v-model="form.code" placeholder="请输入设备编号"/>
|
|
</view>
|
|
</view>
|
|
<view class="content_row">
|
|
<view class="name font_bold">设备功率</view>
|
|
<view class="comView">
|
|
<input v-model="form.power" placeholder="请输入设备功率"/>
|
|
</view>
|
|
</view>
|
|
<view class="content_row">
|
|
<view class="name font_bold">设备IP</view>
|
|
<view class="comView">
|
|
<input v-model="form.config[0].ip" placeholder="请输入设备IP"/>
|
|
</view>
|
|
</view>
|
|
<view class="content_row">
|
|
<view class="name font_bold">端口</view>
|
|
<view class="comView">
|
|
<input v-model="form.config[0].port" placeholder="请输入设备端口"/>
|
|
</view>
|
|
</view>
|
|
<view class="content_row">
|
|
<view class="name font_bold">型号</view>
|
|
<view class="flex_layout comView">
|
|
<view class="switch" @click="form.config[0].plc_model = 'H3U'">
|
|
<view v-if="form.config[0].plc_model=='H3U'" class="t-icon t-icon-qiyong1 contenticon"></view>
|
|
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
|
<text class="text">H3U</text>
|
|
</view>
|
|
<view class="switch" @click="form.config[0].plc_model = 'H5U'">
|
|
<view v-if="form.config[0].plc_model=='H5U'" class="t-icon t-icon-qiyong1 contenticon"></view>
|
|
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
|
<text class="text">H5U</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content_row">
|
|
<view class="name font_bold">逻辑控制器(PLC)</view>
|
|
<pickerSelect class="comView" :list="setMap.plc" :id="form.plc_lj" placeholder="请选择设备" />
|
|
</view>
|
|
<view class="content_row">
|
|
<view class="name font_bold">状态</view>
|
|
<view class="flex_layout comView">
|
|
<view class="switch" @click="form.active_status=true">
|
|
<view v-if="form.active_status" class="t-icon t-icon-qiyong1 contenticon"></view>
|
|
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
|
<text class="text">启用</text>
|
|
</view>
|
|
<view class="switch" @click="form.active_status=false">
|
|
<view v-if="!form.active_status" class="t-icon t-icon-qiyong1 contenticon"></view>
|
|
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
|
<text class="text">禁用</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="textarea_row">
|
|
<view class="name font_bold">设置备注</view>
|
|
<view class="textarea">
|
|
<textarea placeholder="请输入备注..." v-model="form.remark" cursor-spacing="180px" :auto-blur="true" placeholder-class="placeholderStyle" />
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom_but flex_layout">
|
|
<view class="font13 but_color" @click="save">保存</view>
|
|
<view class="font13" @click="cancel">取消</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
setMap:{
|
|
equipment:[],
|
|
plc:[
|
|
{name:'汇川',value:1}
|
|
]
|
|
},
|
|
|
|
form:{
|
|
id:'',
|
|
eq_no:'',
|
|
name:'',
|
|
code:'',
|
|
power:'',
|
|
remark:'',
|
|
active_status:true,
|
|
plc_lj:1,
|
|
config:[
|
|
{
|
|
eq_type:'',
|
|
ip:'',
|
|
port:'',
|
|
plc_model:'H3U'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
onLoad(option) {
|
|
this.form.id = option.id;
|
|
if(option.id!='undefined'){
|
|
this.getOrderInfo(option.id);
|
|
}
|
|
},
|
|
onReady() {
|
|
this.getEquipment();
|
|
},
|
|
methods: {
|
|
getOrderInfo(id){
|
|
this.$api.postFuncLoading('/device.info',{id:id}).then(res=>{
|
|
this.form = {
|
|
id:res.data.id,
|
|
eq_no:res.data.eq_no,
|
|
name:res.data.name,
|
|
code:res.data.code,
|
|
power:res.data.power,
|
|
remark:res.data.remark,
|
|
active_status:res.data.active_status,
|
|
plc_lj:1,
|
|
config:[
|
|
{
|
|
eq_type:res.data.equipment_configs[0].eq_type,
|
|
ip:res.data.equipment_configs[0].ip,
|
|
port:res.data.equipment_configs[0].port,
|
|
plc_model:res.data.equipment_configs[0].plc_model
|
|
}
|
|
]
|
|
}
|
|
}).catch(err=>{
|
|
|
|
})
|
|
},
|
|
getEquipment(){
|
|
this.$api.request('/equipment.select',{}).then(res=>{
|
|
res.data.forEach(item=>{
|
|
item.name = item.eq_name;
|
|
item.value = item.eq_no;
|
|
})
|
|
this.setMap['equipment'] = res.data;
|
|
})
|
|
},
|
|
equipmentChange(e){
|
|
this.form.eq_no = e.value;
|
|
this.form.name = e.name;
|
|
},
|
|
save(){
|
|
if(!(this.form.id && this.form.id>0)){
|
|
delete this.form.id
|
|
}
|
|
this.$api.postFuncLoading('/equipment.add',this.form).then(res=>{
|
|
this.parentClick();
|
|
this.reset();
|
|
this.$wf.toast({type:'success',text:'保存成功'});
|
|
})
|
|
},
|
|
cancel(){
|
|
this.reset();
|
|
},
|
|
reset(){
|
|
this.form = {
|
|
id:'',
|
|
eq_no:'',
|
|
name:'',
|
|
code:'',
|
|
power:'',
|
|
remark:'',
|
|
active_status:true,
|
|
plc_lj:1,
|
|
config:[
|
|
{
|
|
eq_type:'',
|
|
ip:'',
|
|
port:'',
|
|
plc_model:'H3U'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
parentClick(){
|
|
const pages = getCurrentPages();
|
|
if (pages.length >= 2) {
|
|
const prevPage = pages[pages.length - 2];
|
|
prevPage.$vm.getList();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page_name{margin-bottom: 10px;}
|
|
.page_content{padding: 0 12px 13px;}
|
|
.content_row{display: flex;border-bottom: 1px solid #2D3A6F;height: 44px;align-items: center;
|
|
.name{flex-basis: 110px;}
|
|
.switch{display: flex;align-items: center;
|
|
.contenticon{font-size: 15px;}
|
|
.text{padding: 0 20px 0 5px;}
|
|
}
|
|
}
|
|
.textarea_row{
|
|
.name{padding: 12px 0;}
|
|
.textarea{border-radius: 4px;background: $uni-bg-color-placeholder;padding:10px 12px;}
|
|
}
|
|
</style>
|