You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
243 lines
7.5 KiB
243 lines
7.5 KiB
<template>
|
|
<div class="app-container">
|
|
<el-row :gutter="20">
|
|
<el-col :span="5">
|
|
<div class="grid-content">
|
|
<div class="operate-left">
|
|
<el-tooltip class="item" effect="dark" content="新增" placement="top-start">
|
|
<i class="el-icon-plus" @click="add" :class="addIcon?'addIcon':''"></i>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
|
|
<i class="el-icon-delete" :class="deleteIcon?'deleteIcon':''"></i>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="导出" placement="top-start">
|
|
<i class="el-icon-download" ></i>
|
|
</el-tooltip>
|
|
<el-tooltip class="item" effect="dark" content="导入" placement="top-start">
|
|
<i class="el-icon-upload2"></i>
|
|
</el-tooltip>
|
|
|
|
</div>
|
|
<el-input placeholder="搜索设备名称" v-model="queryParams" style="margin-bottom: 10px;"></el-input>
|
|
<el-tree
|
|
:data="treeData"
|
|
:props="defaultProps"
|
|
@node-click="handleNodeClick"
|
|
|
|
>
|
|
<span slot-scope="{ node, data }" class="slot-node"">
|
|
<template>
|
|
<i
|
|
class="el-icon-box"
|
|
v-if="data.areaName"
|
|
style="margin-right: 5px;"
|
|
></i>
|
|
<i
|
|
class="el-icon-takeaway-box"
|
|
v-if="data.powerMainEquFlag=='Yes'"
|
|
style="margin-right: 5px;color:#409eff"
|
|
></i>
|
|
<i
|
|
class="el-icon-set-up"
|
|
v-if="data.powerMainEquFlag=='No'"
|
|
style="margin-right: 5px;color:#a9c52b"
|
|
></i>
|
|
<span>{{ node.label }}</span>
|
|
</template>
|
|
</span>
|
|
</el-tree>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="19">
|
|
<el-empty description="右侧功能暂未开发" v-if="!show"></el-empty>
|
|
<div class="grid-content-right" v-if="show">
|
|
<div class="titleName">{{ titleName }}</div>
|
|
<el-form ref="form" :model="form" label-width="80px">
|
|
<el-form-item label="设备名称">
|
|
<el-input v-model="form.deviceName"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="设备类型">
|
|
<el-select v-model="form.deviceTypeId" placeholder="请选择" :disabled="form.deviceName?true:false">
|
|
<el-option :label="item.deviceTypeName" :value="item.deviceTypeId" v-for="item in deviceTypeData" :key="item.deviceTypeId"></el-option>
|
|
<!-- deviceTypeData -->
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="设备编号">
|
|
<el-input v-model="form.deviceCode"></el-input>
|
|
<span class="serial-number">设备编号用于生产复核，需与SCADA系统中的设备编号一致</span>
|
|
</el-form-item>
|
|
<el-form-item label="显示排序">
|
|
<el-input-number v-model="form.num" controls-position="right" :min="1"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="实物ID">
|
|
<el-input v-model="form.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="监控索引号">
|
|
<el-input v-model="form.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="设备型号">
|
|
<el-input v-model="form.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="设备厂家">
|
|
<el-input v-model="form.name"></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="x坐标">
|
|
<el-input-number v-model="form.numX" controls-position="right" :min="-20" :max="20"></el-input-number>
|
|
<span class="number-title">(建议最小值-20，最大值20)</span>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="y坐标">
|
|
<el-input-number v-model="form.num" controls-position="right" :min="66"></el-input-number>
|
|
<span class="number-title">(建议66)</span>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="z坐标">
|
|
<el-input-number v-model="form.num" controls-position="right" :min="-6" :max="20"></el-input-number>
|
|
<span class="number-title">(建议最小值-6，最大值20)</span>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">保存</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script >
|
|
import { treeAreaDeviceSelect,devicetypeList,deviceQuery } from "@/api/equipment/entry";
|
|
export default {
|
|
name: "entry",
|
|
data() {
|
|
return {
|
|
queryParams: "",
|
|
treeData: [
|
|
{
|
|
label: "一级 1",
|
|
type: 1,
|
|
children: [
|
|
{
|
|
label: "二级 1-1",
|
|
children: [
|
|
{
|
|
label: "三级 1-1-1",
|
|
children: [
|
|
{
|
|
label: "四级 1-1-1-1",
|
|
type: 4,
|
|
},
|
|
{
|
|
label: "四级 1-1-1-2",
|
|
type: 4,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
defaultProps: {
|
|
children: "children",
|
|
// label: "areaName",
|
|
label: function (data) {
|
|
return data.areaName || data.deviceName;
|
|
},
|
|
},
|
|
titleName: "",
|
|
form: {},
|
|
show: false,
|
|
deleteIcon: true,
|
|
addIcon:true,
|
|
deviceTypeData:[],
|
|
};
|
|
},
|
|
mounted() {
|
|
treeAreaDeviceSelect().then((res) => {
|
|
|
|
if (res.code == 200) {
|
|
this.treeData = res.data;
|
|
}
|
|
});
|
|
devicetypeList().then(res=>{
|
|
console.log(res);
|
|
if(res.code==200){
|
|
this.deviceTypeData=res.data;
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
handleNodeClick(data) {
|
|
this.titleName = data.areaName || data.deviceName;
|
|
if (data.areaName) {
|
|
this.show = false;
|
|
this.deleteIcon=true;
|
|
this.addIcon=false;
|
|
} else if (data.deviceName) {
|
|
this.show = true;
|
|
this.titleName = "编辑" + data.deviceName;
|
|
this.deleteIcon=false;
|
|
this.addIcon=true;
|
|
deviceQuery(data.deviceId).then(res=>{
|
|
console.log(res)
|
|
if(res.code==200){
|
|
this.form=res.data
|
|
}
|
|
})
|
|
}
|
|
},
|
|
add() {
|
|
this.show = true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.operate-left {
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
i {
|
|
font-size: 20px;
|
|
margin-left: 5px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
::v-deep .el-tree-node:focus > .el-tree-node__content {
|
|
color: #4a9de7 !important;
|
|
// color: #fff !important;
|
|
}
|
|
::v-deep .el-tree-node__content {
|
|
height: 34px !important;
|
|
}
|
|
/*节点失焦时的背景颜色*/
|
|
// .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
|
|
// background-color: #4a9de7 !important;
|
|
// color: #fff !important;
|
|
// }
|
|
.grid-content-right {
|
|
padding: 0 20%;
|
|
}
|
|
.titleName {
|
|
font-size: 26px;
|
|
padding: 10px;
|
|
}
|
|
.number-title {
|
|
margin-left: 10px;
|
|
}
|
|
.serial-number {
|
|
color: #999;
|
|
font-size: 12px;
|
|
margin-bottom: 30px;
|
|
margin-top: 20px;
|
|
}
|
|
.deleteIcon,.addIcon {
|
|
color: #dddddd;
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|