308 lines
11 KiB
Vue
308 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<el-tree :data="data" node-key="id" :props="defaultProps" @node-contextmenu="rightClick"
|
|
@check="treeCheck">
|
|
</el-tree>
|
|
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{ ...rightMenu }">
|
|
<ul>
|
|
<li @click="">新增通道</li>
|
|
<li>取消</li>
|
|
</ul>
|
|
</div>
|
|
<div class="pas_params">
|
|
<el-dialog title="通道参数设置" :visible.sync="add_passage" width="765px" v-loading="Loading">
|
|
<el-form :model="FormData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="通道名称:" :label-width="formLabelWidth" prop="tdpz_tdmc">
|
|
<el-select v-model="FormData.tdpz_tdmc" placeholder="" style="width: 200px; height: 30px">
|
|
<el-option v-for="(item, index) in options1" :key="index" :label="item.label" :value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="通道:" :label-width="formLabelWidth" prop="tdpz_td">
|
|
<el-select v-model="FormData.tdpz_td" placeholder="" style="width: 200px; height: 30px">
|
|
<el-option v-for="(item, index) in options2" :key="index" :label="item.label" :value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="驱动名称:" :label-width="formLabelWidth" prop="tdpz_qdmc">
|
|
<el-row>
|
|
<el-col :span="18">
|
|
<el-input v-model="FormData.tdpz_qdmc" placeholder="" style="width: 200px; height: 30px"></el-input>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-button style="width: 50px; height: 30px" @click="getDriveName">...</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="IP地址:" :label-width="formLabelWidth" prop="tdpz_ip">
|
|
<el-row>
|
|
<el-col :span="5">
|
|
<el-input v-model="tdpz_ip1" style="width: 43px; height: 30px"></el-input>
|
|
</el-col>
|
|
<el-col :span="1" style="color: #fff">. </el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="tdpz_ip2" style="width: 43px; height: 30px"></el-input>
|
|
</el-col>
|
|
<el-col :span="1" style="color: #fff">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="tdpz_ip3" style="width: 43px; height: 30px"></el-input>
|
|
</el-col>
|
|
<el-col :span="1" style="color: #fff">.</el-col>
|
|
<el-col :span="5">
|
|
<el-input v-model="tdpz_ip4" style="width: 43px; height: 30px"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="端口号:" :label-width="formLabelWidth" prop="tdpz_port">
|
|
<el-input v-model="FormData.tdpz_port" placeholder="" style="width: 200px; height: 30px"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="超过时间(ms):" :label-width="formLabelWidth" prop="tdpz_cssj">
|
|
<el-input v-model="FormData.tdpz_cssj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="间隔时间(ms):" :label-width="formLabelWidth" prop="tdpz_jgsj">
|
|
<el-input v-model="FormData.tdpz_jgsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="轮询时间(ms):" :label-width="formLabelWidth" prop="tdpz_lxsj">
|
|
<el-input v-model="FormData.tdpz_lxsj" placeholder="" style="width: 200px; height: 30px"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="重复次数:" :label-width="formLabelWidth" prop="tdpz_cfcs">
|
|
<el-input v-model="FormData.tdpz_cfcs" placeholder="" style="width: 200px; height: 30px"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<div class="super_parmams">
|
|
<h3>高级参数</h3>
|
|
<div>
|
|
<i class="el-icon-caret-bottom" v-if="is_retract"></i>
|
|
<i class="el-icon-caret-top" v-else="is_retract"></i>
|
|
<el-button type="text" plain @click="getRetract" style="
|
|
width: 28px;
|
|
border: none;
|
|
color: rgba(16, 16, 16, 1);
|
|
font-size: 14px;
|
|
text-align: left;
|
|
">
|
|
收起</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="super_con" v-show="is_retract">
|
|
<el-form :label-position="labelPosition" :rules="rules" ref="ruleForm">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item>
|
|
<el-checkbox v-model="FormData.tdpz_watchtime">watch time(s)</el-checkbox>
|
|
<el-input v-model="input1" placeholder="" style="width: 200px; height: 30px"
|
|
:disabled="isdisabled"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item>
|
|
<el-checkbox v-model="FormData.tdpz_cjsylxdz">采集使用连续地址</el-checkbox>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="读写占空比:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="10">
|
|
<el-input v-model="tdpz_dxzkb1" style="width: 91px; height: 30px"></el-input>
|
|
</el-col>
|
|
<el-col :span="4">: </el-col>
|
|
<el-col :span="10">
|
|
<el-input v-model="tdpz_dxzkb2" style="width: 91px; height: 30px"></el-input>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="05/0F:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="auto">auto</el-radio></el-col>
|
|
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="05">05</el-radio></el-col>
|
|
<el-col :span="8"><el-radio v-model="FormData.tdpz_050F" label="0F">0F</el-radio></el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="06/10:" :label-width="formLabelWidth">
|
|
<el-row>
|
|
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="auto">auto</el-radio></el-col>
|
|
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="06">06</el-radio></el-col>
|
|
<el-col :span="8"><el-radio v-model="FormData.tdpz_0610" label="10">10</el-radio></el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="saveGate">保 存</el-button>
|
|
<el-button @click="add_passage = false">取 消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tmDisplay: false,
|
|
rightMenu:{},
|
|
node:"",
|
|
data: [
|
|
{
|
|
label: "Gateway",
|
|
id: 1,
|
|
editing: true,
|
|
children: [
|
|
{
|
|
label: "数据采集",
|
|
id: 11,
|
|
children: [
|
|
{
|
|
label: "I/O点",
|
|
id: 111,
|
|
},
|
|
{
|
|
label: "用户点",
|
|
id: 112,
|
|
},
|
|
{
|
|
label: "计算点",
|
|
id: 113,
|
|
},
|
|
{
|
|
label: "系统点",
|
|
id: 114,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "数据服务",
|
|
id: 12,
|
|
children: [
|
|
{
|
|
label: "Modbus",
|
|
id: 121,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "IOT",
|
|
id: 13,
|
|
children: [
|
|
{
|
|
label: "Mqtt Client",
|
|
id: 131,
|
|
},
|
|
{
|
|
label: "Alink",
|
|
id: 132,
|
|
},
|
|
{
|
|
label: "Tlink",
|
|
id: 133,
|
|
},
|
|
{
|
|
label: "loTDDC",
|
|
id: 134,
|
|
},
|
|
{
|
|
label: "Ulink",
|
|
id: 135,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
dialogVisible: false,
|
|
newNodeData: {
|
|
// 新节点的数据，可以根据需求定义
|
|
// ...
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
rightClick(e, data, node, comp) {
|
|
console.log('e:', e, 'data', data)
|
|
// this.node = node;
|
|
// console.log(this.node)
|
|
console.log(data.id);
|
|
console.log(comp);
|
|
this.rightMenu = { top: e.pageY + 'px', left: e.pageX + 'px' }
|
|
this.tmDisplay = true
|
|
const self = this
|
|
document.onclick = function (ev) {
|
|
if (ev.target !== document.getElementById('perTreeMenu')) {
|
|
self.tmDisplay = false
|
|
}
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.tree_menu {
|
|
position: fixed;
|
|
display: block;
|
|
z-index: 20000;
|
|
background-color: #fff;
|
|
padding: 5px 0;
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul li {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 15px;
|
|
font-size: 14px;
|
|
line-height: 30px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul li:hover {
|
|
background-color: #ebeef5
|
|
}
|
|
}
|
|
</style>
|