197 lines
6.7 KiB
Vue
197 lines
6.7 KiB
Vue
<template>
|
|
<div>
|
|
<el-button @click="dialogVisible = true">网关配置</el-button>
|
|
<el-dialog title="网关配置" :visible.sync="dialogVisible">
|
|
<div class="title">
|
|
<div class="left">
|
|
<el-button @click="flag = true">新建网关</el-button>
|
|
<el-button>删除</el-button>
|
|
</div>
|
|
<div class="right">
|
|
<el-input type="search"></el-input>
|
|
<el-button>筛选</el-button>
|
|
</div>
|
|
</div>
|
|
<el-table
|
|
ref="multipleTable"
|
|
:data="tableData"
|
|
border
|
|
style="margin-top: 10px"
|
|
tooltip-effect="dark"
|
|
@selection-change="handleSelectionChange"
|
|
:cell-style="cellStyle"
|
|
>
|
|
<el-table-column label="序号">
|
|
<template slot-scope="scope">
|
|
{{ scope.$index + 1 }}
|
|
</template></el-table-column
|
|
>
|
|
<el-table-column type="selection" width="55"> </el-table-column>
|
|
<el-table-column label="网关ID" prop="id"> </el-table-column>
|
|
<el-table-column prop="number" label="网关编号"> </el-table-column>
|
|
<el-table-column prop="name" label="网关名称"> </el-table-column>
|
|
<el-table-column prop="type" label="网关类型"> </el-table-column>
|
|
<el-table-column prop="people" label="维护人"> </el-table-column>
|
|
<el-table-column prop="time" label="维护时间"> </el-table-column>
|
|
<el-table-column prop="status" label="网关状态"> </el-table-column>
|
|
<el-table-column prop="newTime" label="最新心跳时间"> </el-table-column>
|
|
<el-table-column label="修改">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="small">删除</el-button>
|
|
</template></el-table-column
|
|
>
|
|
<el-table-column label="详细">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="small">查看</el-button>
|
|
</template></el-table-column
|
|
>
|
|
<el-table-column label="参数配置">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="small">参数配置</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-dialog>
|
|
|
|
<el-dialog title="新建网关" :visible.sync="flag" width="30%">
|
|
<el-form
|
|
:model="ruleForm"
|
|
:rules="rules"
|
|
ref="ruleForm"
|
|
label-width="150px"
|
|
class="demo-ruleForm"
|
|
:label-position="labelPosition"
|
|
>
|
|
<el-form-item label="网关类型:" prop="type">
|
|
<el-col :span="12">
|
|
<el-select v-model="ruleForm.type">
|
|
<el-option label="box" value="box"></el-option>
|
|
<el-option label="server port" value="server port"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item label="网关编号:" prop="number">
|
|
<el-col :span="12">
|
|
<el-select v-model="ruleForm.number">
|
|
<el-option label="2000808010" value="2000808010"></el-option>
|
|
<el-option label="2000808011" value="2000808011"></el-option>
|
|
<el-option label="2000808012" value="2000808012"></el-option>
|
|
<el-option label="2000808013" value="2000808013"></el-option>
|
|
<el-option label="2000808014" value="2000808014"></el-option>
|
|
<el-option label="2000808015" value="2000808015"></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item label="网关ID:" prop="id">
|
|
<el-col :span="12">
|
|
<el-select v-model="ruleForm.id">
|
|
<el-option label="lan-box1" value="lan-box1"></el-option>
|
|
<el-option label="lan-box2" value="lan-box2"></el-option>
|
|
<el-option label="wlan-box1" value="wlan-box1"></el-option>
|
|
<el-option label="wlan-box2" value="wlan-box2"></el-option>
|
|
<el-option
|
|
label="lan- server port"
|
|
value="lan- server port"
|
|
></el-option>
|
|
<el-option
|
|
label="wlan- server port"
|
|
value="wlan- server port"
|
|
></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item label="网关名称:" prop="name">
|
|
<el-col :span="12">
|
|
<el-select v-model="ruleForm.name">
|
|
<el-option label="有线区网关1" value="有线区网关1"></el-option>
|
|
<el-option label="有线区网关2" value="有线区网关2"></el-option>
|
|
<el-option label="无线区网关1" value="无线区网关1"></el-option>
|
|
<el-option label="无线区网关2" value="无线区网关2"></el-option>
|
|
<el-option
|
|
label="有线区串口服务器"
|
|
value="有线区串口服务器"
|
|
></el-option>
|
|
<el-option
|
|
label="无线区串口服务器"
|
|
value="无线区串口服务器"
|
|
></el-option>
|
|
</el-select>
|
|
</el-col>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="flag = false">保存</el-button>
|
|
<el-button @click="flag = false">取 消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
dialogVisible: false,
|
|
flag: false,
|
|
tableData: [
|
|
{
|
|
id: "lan-box1",
|
|
number: "2000808010",
|
|
name: "有线区网关1",
|
|
type: "BOX",
|
|
people: "hb222",
|
|
time: "2023/10/9 12:23:22",
|
|
status: "离线",
|
|
newTime: "2023/10/11 12:34:43",
|
|
},
|
|
],
|
|
ruleForm: {
|
|
type: "",
|
|
id: "",
|
|
number: "",
|
|
name: "",
|
|
},
|
|
rules: {
|
|
type: [
|
|
{ required: true, trigger: "change", message: "请选择一个选项" },
|
|
],
|
|
id: [{ required: true, trigger: "change", message: "请选择一个选项" }],
|
|
number: [
|
|
{ required: true, trigger: "change", message: "请选择一个选项" },
|
|
],
|
|
name: [
|
|
{ required: true, trigger: "change", message: "请选择一个选项" },
|
|
],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
handleSelectionChange() {},
|
|
cellStyle({ row, column }) {
|
|
if (column.property === "status") {
|
|
if (row.status === "离线") {
|
|
return { background: "#6C6C6C", color: "#fff" };
|
|
} else {
|
|
return { background: "#fff" };
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
div {
|
|
display: flex;
|
|
}
|
|
}
|
|
.el-table {
|
|
margin-top: 10px;
|
|
}
|
|
/deep/.el-form-item label {
|
|
color: red;
|
|
}
|
|
</style>
|