desc: 修改代码
This commit is contained in:
parent
601d0e2d91
commit
e04e0f1c67
54
src/scripts/attribute.js
Normal file
54
src/scripts/attribute.js
Normal file
@ -0,0 +1,54 @@
|
||||
export function getAttrList(code, key, that) {
|
||||
attribute[code][key].items.forEach(ele => {
|
||||
if (ele.type == 'select') {
|
||||
ele.options = that[ele.optionCode];
|
||||
if (ele.change && that[ele.deviceChange]) {
|
||||
ele.deviceChange = that[ele.deviceChange];
|
||||
}
|
||||
}
|
||||
});
|
||||
return Object.assign({}, attribute[code][key]);
|
||||
}
|
||||
|
||||
export function getAttrRules(code, key) {
|
||||
const data = JSON.parse(JSON.stringify(attribute[code][key]));
|
||||
return data.rules;
|
||||
}
|
||||
|
||||
export const attribute = {
|
||||
link: {
|
||||
attr: {
|
||||
labelWidth: '130px',
|
||||
items: [
|
||||
{ prop: 'code', label: 'Link编码:', type: 'select', required: true, options: [], optionCode: 'linkList', change: true, deviceChange: 'deviceChange' },
|
||||
{ prop: 'name', label: 'Link名称:', type: 'input', required: true },
|
||||
{ prop: 'lengthShow', label: 'Link显示长度:', type: 'number', required: false },
|
||||
{ prop: 'lengthFact', label: 'Link实际长度:', type: 'number', required: true },
|
||||
{ prop: 'color', label: 'Link颜色:', type: 'color', required: false },
|
||||
{ prop: 'leftFdCode', label: '左侧正向Link:', type: 'select', required: false, options: [], optionCode: 'linkList' },
|
||||
{ prop: 'leftSdCode', label: '左侧侧向Link:', type: 'select', required: false, options: [], optionCode: 'linkList' },
|
||||
{ prop: 'rightFdCode', label: '右侧正向Link:', type: 'select', required: false, options: [], optionCode: 'linkList' },
|
||||
{ prop: 'rightSdCode', label: '右侧侧向Link:', type: 'select', required: false, options: [], optionCode: 'linkList' },
|
||||
{ prop: 'lp', label: 'Link 起点坐标:', type: 'coordinate', children: [
|
||||
{ prop: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: true, required: false },
|
||||
{ prop: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: true, required: false }
|
||||
] },
|
||||
{ prop: 'rp', label: 'Link 终点坐标:', type: 'coordinate', children: [
|
||||
{ prop: 'x', label: 'x:', type: 'number', labelWidth: '20px', disabled: true, required: false },
|
||||
{ prop: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: true, required: false }
|
||||
] }
|
||||
],
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请选择设备', trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: '请输入Link名称', trigger: 'blur' }
|
||||
],
|
||||
lengthFact: [
|
||||
{ required: true, message: '请输入Link实际长度', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
@ -181,18 +181,18 @@ export default {
|
||||
},
|
||||
// 设置显示图层
|
||||
setShowLevel(level) {
|
||||
console.log(level);
|
||||
console.log('设置显示图层');
|
||||
// this.$jlmap && this.$jlmap.setShowLevel(level);
|
||||
console.log(level);
|
||||
console.log('设置显示图层');
|
||||
// this.$jlmap && this.$jlmap.setShowLevel(level);
|
||||
},
|
||||
// 设置逻辑视图Level
|
||||
setShowLogicalLevel(levels) {
|
||||
console.log('设置逻辑视图Level');
|
||||
// this.$jlmap && this.$jlmap.setShowLogicalLevel(levels);
|
||||
console.log('设置逻辑视图Level');
|
||||
// this.$jlmap && this.$jlmap.setShowLogicalLevel(levels);
|
||||
},
|
||||
// 设置物理视图Level
|
||||
setShowPhysicalLevel(levels) {
|
||||
console.log('设置物理视图Level');
|
||||
console.log('设置物理视图Level');
|
||||
// this$jlmap && this.$jlmap.setShowPhysicalLevel(levels);
|
||||
},
|
||||
// 设置显示中心
|
||||
|
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<el-form ref="form" :label-width="labelWidth" size="mini" :rules="rules" :model="formModel">
|
||||
<el-form ref="form" :label-width="form.labelWidth" size="mini" :rules="rules" :model="formModel">
|
||||
<template v-for="item in form.items">
|
||||
<template v-if="checkFieldType(item, 'select')">
|
||||
<el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<template>
|
||||
<template v-if="item.change">
|
||||
<el-select
|
||||
v-model="formModel[item.prop]"
|
||||
filterable
|
||||
@ -14,25 +14,59 @@
|
||||
<el-option
|
||||
v-for="option in item.options"
|
||||
:key="option.code"
|
||||
:label="option.lable"
|
||||
:label="option.name + ' (' + option.code+ ')'"
|
||||
:value="option.code"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-select
|
||||
v-model="formModel[item.prop]"
|
||||
filterable
|
||||
:placeholder="item.placeholder"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in item.options"
|
||||
:key="option.code"
|
||||
:label="option.name + ' (' + option.code+ ')'"
|
||||
:value="option.code"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'input')">
|
||||
<el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-input v-model="formModel[item.prop]" :disabled="item.disabled" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'number')">
|
||||
<el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-input-number v-model="formModel[item.prop]" :min="50" :label="item.label" :disabled="item.disabled" />px
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'color')">
|
||||
<el-form-item :key="item.prop" :label="item.label" :prop="item.prop" :required="item.required">
|
||||
<el-color-picker v-model="formModel[item.prop]" :predefine="skins" :disabled="item.disabled" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-if="checkFieldType(item, 'coordinate')">
|
||||
<div :key="item.prop" class="coordinate">
|
||||
<span class="title">{{ item.label }}</span>
|
||||
<div v-for="opt in item.children" :key="opt.code" class="listWidth">
|
||||
<el-form-item
|
||||
:label="opt.label"
|
||||
:prop="opt.prop"
|
||||
:label-width="opt.labelWidth"
|
||||
>
|
||||
<el-input-number v-model="formModel[item.prop][opt.prop]" :label="opt.label" :disabled="opt.disabled" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<el-form-item label="Link名称:" prop="name">
|
||||
<el-input v-model="editModel.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Link显示长度:" prop="lengthShow">
|
||||
<el-input-number v-model="editModel.lengthShow" :min="50" label="显示长度" :disabled="true" />px
|
||||
</el-form-item>
|
||||
<el-form-item label="Link颜色:" prop="color">
|
||||
<el-color-picker v-model="editModel.color" :predefine="skins" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-form></template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -42,20 +76,18 @@ export default {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
form: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return '130px';
|
||||
}
|
||||
rules: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
skins: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
@ -65,14 +97,54 @@ export default {
|
||||
} else {
|
||||
return field.type === type;
|
||||
}
|
||||
},
|
||||
validateForm(callback) {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
callback();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm() {
|
||||
this.$refs.form.resetFields();
|
||||
},
|
||||
clearValidate() {
|
||||
this.$refs.form.clearValidate();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.config_list{
|
||||
width: 100%;
|
||||
|
||||
.coordinate {
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
line-height: 28px;
|
||||
width: 120px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.listWidth{
|
||||
display: table;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
&:last-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -3,109 +3,7 @@
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane class="view-control" label="属性" name="first">
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: cardHeight +'px' }">
|
||||
<el-form ref="form" :model="editModel" label-width="130px" size="mini" :rules="rules">
|
||||
<el-form-item label="Link编码:" prop="code">
|
||||
<el-select v-model="editModel.code" filterable @change="deviceChange">
|
||||
<el-option
|
||||
v-for="item in linkList"
|
||||
:key="item.code"
|
||||
:label="item.code + ' (' + item.name+ ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Link名称:" prop="name">
|
||||
<el-input v-model="editModel.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Link显示长度:" prop="lengthShow">
|
||||
<el-input-number v-model="editModel.lengthShow" :min="50" label="显示长度" :disabled="true" />px
|
||||
</el-form-item>
|
||||
<el-form-item label="Link实际长度:" prop="lengthFact">
|
||||
<el-input-number v-model="editModel.lengthFact" :min="0" label="真实长度" />米
|
||||
</el-form-item>
|
||||
<el-form-item label="Link颜色:" prop="color">
|
||||
<el-color-picker v-model="editModel.color" :predefine="skins" />
|
||||
</el-form-item>
|
||||
<el-form-item label="左侧正向Link:" prop="leftFdCode">
|
||||
<el-select v-model="editModel.leftFdCode" filterable clearable>
|
||||
<el-option
|
||||
v-for="item in linkList"
|
||||
:key="item.code"
|
||||
:label="item.name + ' (' + item.code+ ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="左侧侧向Link:" prop="leftSdCode">
|
||||
<el-select v-model="editModel.leftSdCode" filterable clearable>
|
||||
<el-option
|
||||
v-for="item in linkList"
|
||||
:key="item.code"
|
||||
:label="item.name + ' (' + item.code+ ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="右侧正向Link:" prop="rightFdCode">
|
||||
<el-select v-model="editModel.rightFdCode" filterable clearable>
|
||||
<el-option
|
||||
v-for="item in linkList"
|
||||
:key="item.code"
|
||||
:label="item.name + ' (' + item.code+ ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="右侧侧向Link:" prop="rightSdCode">
|
||||
<el-select v-model="editModel.rightSdCode" filterable clearable>
|
||||
<el-option
|
||||
v-for="item in linkList"
|
||||
:key="item.code"
|
||||
:label="item.name + ' (' + item.code+ ')'"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="coordinate">
|
||||
<span class="title">Link 起点坐标:</span>
|
||||
<el-form-item
|
||||
label="x:"
|
||||
prop="lp.x"
|
||||
style="display: table; float: left; margin-right: 20px;"
|
||||
label-width="20px"
|
||||
>
|
||||
<el-input-number v-model="editModel.lp.x" label="x坐标" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="y:"
|
||||
prop="lp.y"
|
||||
style="display: table; float: left;"
|
||||
label-width="20px"
|
||||
>
|
||||
<el-input-number v-model="editModel.lp.y" label="y坐标" :disabled="true" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="coordinate">
|
||||
<span class="title">Link 终点坐标:</span>
|
||||
<el-form-item
|
||||
label="x:"
|
||||
prop="rp.x"
|
||||
style="display: table; float: left; margin-right: 20px;"
|
||||
label-width="20px"
|
||||
>
|
||||
<el-input-number v-model="editModel.rp.x" label="x坐标" :disabled="true" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="y:"
|
||||
prop="rp.y"
|
||||
style="display: table; float: left;"
|
||||
label-width="20px"
|
||||
>
|
||||
<el-input-number v-model="editModel.rp.y" label="y坐标" :disabled="true" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<!-- <config-list :data="list" /> -->
|
||||
<config-list ref="dataform" :form="form" :form-model="editModel" :rules="rules" />
|
||||
</el-scrollbar>
|
||||
<el-button-group class="map-draft-group">
|
||||
<el-button type="primary" @click="edit">修改</el-button>
|
||||
@ -230,12 +128,13 @@
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getUID } from '@/jmap/utils/Uid';
|
||||
import { getUName } from '@/jmap/utils/Uname';
|
||||
// import ConfigList from './config/list';
|
||||
import ConfigList from './config/list';
|
||||
import { getAttrList, getAttrRules, attribute } from '@/scripts/attribute';
|
||||
|
||||
export default {
|
||||
name: 'LinkDraft',
|
||||
components: {
|
||||
// ConfigList
|
||||
ConfigList
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
@ -251,7 +150,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
form: getAttrList('link', 'attr', this),
|
||||
linkLists: [],
|
||||
activeName: 'first',
|
||||
LinkType: '0',
|
||||
LinkTypeList: [],
|
||||
@ -289,17 +189,6 @@ export default {
|
||||
color: '#4e8de6'
|
||||
},
|
||||
skins: [],
|
||||
rules: {
|
||||
code: [
|
||||
{ required: true, message: '请选择设备', trigger: 'change' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: '请输入Link名称', trigger: 'blur' }
|
||||
],
|
||||
lengthFact: [
|
||||
{ required: true, message: '请输入Link实际长度', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
makeRules1: {
|
||||
x: [
|
||||
{ required: true, message: '请输入Link x坐标', trigger: 'blur' }
|
||||
@ -338,16 +227,20 @@ export default {
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
},
|
||||
$route() {
|
||||
this.$refs.form.resetFields();
|
||||
this.activeName = 'first';
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('map', [
|
||||
'linkList'
|
||||
]),
|
||||
rules() {
|
||||
const baseRules = getAttrRules('link', 'attr');
|
||||
// 清空表单验证提示信息
|
||||
this.$nextTick(function () {
|
||||
this.$refs.dataform.clearValidate();
|
||||
});
|
||||
|
||||
return baseRules;
|
||||
},
|
||||
|
||||
// 是否初始link
|
||||
isNew() {
|
||||
this.addModel.type = '01';
|
||||
@ -362,10 +255,20 @@ export default {
|
||||
isSd() {
|
||||
this.addModel.type = '02';
|
||||
return this.LinkType === '2';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected: function (val, oldVal) {
|
||||
this.deviceSelect(val);
|
||||
},
|
||||
...mapGetters('map', [
|
||||
'linkList'
|
||||
])
|
||||
$route() {
|
||||
this.$refs.dataform.clearValidate();
|
||||
this.activeName = 'first';
|
||||
},
|
||||
'$store.state.map.mapDataLoadedCount': function() {
|
||||
console.log(1111);
|
||||
this.form = getAttrList('link', 'attr', this);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.LinkTypeList = this.$ConstSelect.LinkTypeList;
|
||||
@ -377,7 +280,7 @@ export default {
|
||||
this.deviceSelect(this.$store.getters['map/getDeviceByCode'](code));
|
||||
},
|
||||
deviceSelect(selected) {
|
||||
this.$refs.form.resetFields();
|
||||
this.$refs.dataform.clearValidate();
|
||||
this.$refs.make.resetFields();
|
||||
if (selected && selected._type.toUpperCase() === 'Link'.toUpperCase()) {
|
||||
this.editModel.name = selected.name;
|
||||
|
Loading…
Reference in New Issue
Block a user