|
@@ -1,52 +1,47 @@
|
|
<template>
|
|
<template>
|
|
<div class='add-form'>
|
|
<div class='add-form'>
|
|
<div class='form1'>
|
|
<div class='form1'>
|
|
- <span class='span1'>图例名称</span>
|
|
|
|
- <span class='span2'>单位</span>
|
|
|
|
- <span class='span3' v-if='value==1 || value==3'>展示预览</span>
|
|
|
|
|
|
+ <span class='span1'>图例编码</span>
|
|
|
|
+ <span class='span2'>图例名称</span>
|
|
|
|
+ <span class='span3' v-if='ruleForm.type==1 || ruleForm.type==3'>展示预览</span>
|
|
</div>
|
|
</div>
|
|
<div class='form2'>
|
|
<div class='form2'>
|
|
<div class='input-left'>
|
|
<div class='input-left'>
|
|
- <div class='input-left-top'>
|
|
|
|
- <el-input v-model='ruleForm.name' style='width:200px;height:32px;margin-right:48px;'></el-input>
|
|
|
|
- <el-input v-model='ruleForm.name' style='width:200px;height:32px;'></el-input>
|
|
|
|
- </div>
|
|
|
|
- <div class='input-left-bottom'>
|
|
|
|
- <div class='title'>图例类型</div>
|
|
|
|
- <el-select v-model='value' placeholder='请选择' style='width:442px;height:32px;'>
|
|
|
|
- <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <el-input v-model='ruleForm.code' style='width:200px;height:32px;margin-right:48px;'></el-input>
|
|
|
|
+ <el-input v-model='ruleForm.name' style='width:200px;height:32px;'></el-input>
|
|
|
|
+ <div class='title'>单位</div>
|
|
|
|
+ <div class='type'>图例类型</div>
|
|
|
|
+ <el-input v-model='ruleForm.unit' style='width:200px;height:32px;'></el-input>
|
|
|
|
+ <el-select v-model='ruleForm.type' placeholder='请选择' style='width:200px;height:32px;margin-left:46px'>
|
|
|
|
+ <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
|
+ </el-select>
|
|
</div>
|
|
</div>
|
|
- <div class='input-right' v-if='value==1 || value==3'></div>
|
|
|
|
|
|
+ <div class='input-right' v-if='ruleForm.type==1 || ruleForm.type==3'></div>
|
|
</div>
|
|
</div>
|
|
- <div v-if='value==1' class='form3'>
|
|
|
|
|
|
+ <div v-if='ruleForm.type==1' class='form3'>
|
|
<div class='form3-top'>
|
|
<div class='form3-top'>
|
|
- <span class='form3-span1'>填充色</span>
|
|
|
|
- <span class='form3-span2'>透明度</span>
|
|
|
|
|
|
+ <span class='form3-span1'>填充色以及透明度</span>
|
|
<span class='form3-span3'>边框颜色</span>
|
|
<span class='form3-span3'>边框颜色</span>
|
|
<span class='form3-span4'>边框线型</span>
|
|
<span class='form3-span4'>边框线型</span>
|
|
<span class='form3-span5'>边框粗细</span>
|
|
<span class='form3-span5'>边框粗细</span>
|
|
</div>
|
|
</div>
|
|
<div class='form3-bottom'>
|
|
<div class='form3-bottom'>
|
|
- <el-select v-model='value' placeholder='请选择' size='small' style='width:120px;margin-right:24px;margin-left:12px;'>
|
|
|
|
- <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- <el-select v-model='value' placeholder='请选择' size='small' style='width:96px;margin-right:24px'>
|
|
|
|
- <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- <el-select v-model='value' placeholder='请选择' size='small' style='width:120px;margin-right:24px'>
|
|
|
|
- <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
|
- </el-select>
|
|
|
|
- <el-select v-model='value' placeholder='请选择' size='small' style='width:120px;margin-right:24px'>
|
|
|
|
- <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
|
|
|
+ <el-color-picker v-model='ruleForm.color' show-alpha style='margin:0 172px 0 10px'></el-color-picker>
|
|
|
|
+ <el-color-picker v-model='ruleForm.borderColor' show-alpha style='margin:0 90px 0 10px'></el-color-picker>
|
|
|
|
+
|
|
|
|
+ <el-select v-model='ruleForm.borderLine' placeholder='请选择' size='small' style='width:120px;margin-right:24px'>
|
|
|
|
+ <el-option v-for='item in borderLineOption' :key='item.value' :value='item.value'>
|
|
|
|
+ <img :src='item.label' alt />
|
|
|
|
+ </el-option>
|
|
</el-select>
|
|
</el-select>
|
|
- <el-select v-model='value' placeholder='请选择' size='small' style='width:120px;'>
|
|
|
|
- <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
|
|
|
|
+ <el-select v-model='ruleForm.linepx' placeholder='请选择' size='small' style='width:120px;'>
|
|
|
|
+ <el-option v-for='item in linepxOption' :key='item.value' :label='item.label' :value='item.value'>
|
|
|
|
+ <img :src='item.label' alt />
|
|
|
|
+ </el-option>
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div v-if='value==3' class='form5'>
|
|
|
|
|
|
+ <div v-if='ruleForm.type==3' class='form5'>
|
|
<div class='form5-top'>上传新图标</div>
|
|
<div class='form5-top'>上传新图标</div>
|
|
<div>
|
|
<div>
|
|
<el-upload class='upload-demo' action='https://jsonplaceholder.typicode.com/posts/' :file-list='fileList'>
|
|
<el-upload class='upload-demo' action='https://jsonplaceholder.typicode.com/posts/' :file-list='fileList'>
|
|
@@ -54,7 +49,7 @@
|
|
</el-upload>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div v-if='value==1 || value==3' class='form4'>
|
|
|
|
|
|
+ <div v-if='ruleForm.type==1 || ruleForm.type==3' class='form4'>
|
|
<div class='form4-top'>
|
|
<div class='form4-top'>
|
|
<span class='form4-span1'>对应工程信息化中的位置/设备分类</span>
|
|
<span class='form4-span1'>对应工程信息化中的位置/设备分类</span>
|
|
<span class='form4-span2'>工程信息化的专业/系统</span>
|
|
<span class='form4-span2'>工程信息化的专业/系统</span>
|
|
@@ -79,7 +74,16 @@
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- ruleForm: {},
|
|
|
|
|
|
+ ruleForm: {
|
|
|
|
+ color: 'rgba(19, 206, 102, 0.8)',
|
|
|
|
+ borderColor: 'rgba(19, 206, 102, 0.8)',
|
|
|
|
+ borderLine: '_____________',
|
|
|
|
+ linepx: '________________',
|
|
|
|
+ code: '',
|
|
|
|
+ name: '',
|
|
|
|
+ type: '2',
|
|
|
|
+ unit: ''
|
|
|
|
+ },
|
|
options: [
|
|
options: [
|
|
{
|
|
{
|
|
value: '2',
|
|
value: '2',
|
|
@@ -94,7 +98,34 @@ export default {
|
|
label: '图标'
|
|
label: '图标'
|
|
}
|
|
}
|
|
],
|
|
],
|
|
- value: '1',
|
|
|
|
|
|
+ borderLineOption: [
|
|
|
|
+ {
|
|
|
|
+ value: '1',
|
|
|
|
+ label: require('@/assets/imgs/solidLine.jpg')
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: '2',
|
|
|
|
+ label: require('@/assets/imgs/dashedLine.jpg')
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: '3',
|
|
|
|
+ label: require('@/assets/imgs/dotLine.jpg')
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ linepxOption: [
|
|
|
|
+ {
|
|
|
|
+ value: '1',
|
|
|
|
+ label: require('@/assets/imgs/1pxline.jpg')
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: '2',
|
|
|
|
+ label: require('@/assets/imgs/2pxline.jpg')
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: '3',
|
|
|
|
+ label: require('@/assets/imgs/3pxline.jpg')
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
fileList: []
|
|
fileList: []
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -119,11 +150,18 @@ export default {
|
|
.form2 {
|
|
.form2 {
|
|
display: flex;
|
|
display: flex;
|
|
.input-left {
|
|
.input-left {
|
|
- .input-left-bottom {
|
|
|
|
|
|
+ width: 500px;
|
|
|
|
+ .title {
|
|
|
|
+ margin-right: 100px;
|
|
margin: 20px 0 8px 0;
|
|
margin: 20px 0 8px 0;
|
|
- .title {
|
|
|
|
- margin-bottom: 8px;
|
|
|
|
- }
|
|
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 250px;
|
|
|
|
+ }
|
|
|
|
+ .type {
|
|
|
|
+ margin-right: 100px;
|
|
|
|
+ margin: 20px 0 8px 0;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 250px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.input-right {
|
|
.input-right {
|
|
@@ -131,15 +169,15 @@ export default {
|
|
height: 114px;
|
|
height: 114px;
|
|
background: rgba(245, 246, 247, 1);
|
|
background: rgba(245, 246, 247, 1);
|
|
display: inline-block;
|
|
display: inline-block;
|
|
- margin-left: 48px;
|
|
|
|
|
|
+ margin-left: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.form3 {
|
|
.form3 {
|
|
- width: 696px;
|
|
|
|
|
|
+ width: 720px;
|
|
height: 86px;
|
|
height: 86px;
|
|
background: rgba(245, 246, 247, 1);
|
|
background: rgba(245, 246, 247, 1);
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
- margin-top: 16px;
|
|
|
|
|
|
+ margin-top: 20px;
|
|
.form3-top {
|
|
.form3-top {
|
|
padding: 12px 0 8px 12px;
|
|
padding: 12px 0 8px 12px;
|
|
.form3-span1 {
|
|
.form3-span1 {
|
|
@@ -155,6 +193,9 @@ export default {
|
|
margin-right: 88px;
|
|
margin-right: 88px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .form3-bottom {
|
|
|
|
+ display: flex;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.form4 {
|
|
.form4 {
|
|
.form4-top {
|
|
.form4-top {
|
|
@@ -168,15 +209,24 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.form5 {
|
|
.form5 {
|
|
- width: 696px;
|
|
|
|
|
|
+ width: 720px;
|
|
height: 86px;
|
|
height: 86px;
|
|
background: rgba(245, 246, 247, 1);
|
|
background: rgba(245, 246, 247, 1);
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
- margin-top: 16px;
|
|
|
|
|
|
+ margin-top: 20px;
|
|
padding-left: 12px;
|
|
padding-left: 12px;
|
|
.form5-top {
|
|
.form5-top {
|
|
padding: 12px 0 8px 0;
|
|
padding: 12px 0 8px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .span1::after,
|
|
|
|
+ .span2::after,
|
|
|
|
+ .type::after,
|
|
|
|
+ .form3-span1::after,
|
|
|
|
+ .form3-span3::after {
|
|
|
|
+ content: '*';
|
|
|
|
+ color: #f56c6c;
|
|
|
|
+ margin-left: 4px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|