|
@@ -3,35 +3,35 @@
|
|
<div class='form1'>
|
|
<div class='form1'>
|
|
<span class='span1'>图例编码</span>
|
|
<span class='span1'>图例编码</span>
|
|
<span class='span2'>图例名称</span>
|
|
<span class='span2'>图例名称</span>
|
|
- <span class='span3' v-if='ruleForm.type==1 || ruleForm.type==3'>展示预览</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'>
|
|
- <el-input v-model='ruleForm.code' disabled style='width:200px;height:32px;margin-right:48px;'></el-input>
|
|
|
|
- <el-input v-model='ruleForm.name' style='width:200px;height:32px;'></el-input>
|
|
|
|
|
|
+ <el-input v-model='ruleForm.Code' disabled 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='title'>单位</div>
|
|
<div class='type'>图例类型</div>
|
|
<div class='type'>图例类型</div>
|
|
<el-input v-model='ruleForm.unit' style='width:200px;height:32px;'></el-input>
|
|
<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-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-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
- <div class='input-right' v-if='ruleForm.type==1 || ruleForm.type==3'>
|
|
|
|
|
|
+ <div class='input-right' v-if='ruleForm.Type==1 || ruleForm.Type==3'>
|
|
<div
|
|
<div
|
|
class='model'
|
|
class='model'
|
|
:style='`background:${ruleForm.color};border-width:${ruleForm.borderLine}px;border-style:${ruleForm.borderColor}; border-color:${ruleForm.borderColor};`'
|
|
:style='`background:${ruleForm.color};border-width:${ruleForm.borderLine}px;border-style:${ruleForm.borderColor}; border-color:${ruleForm.borderColor};`'
|
|
></div>
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div v-if='ruleForm.type==1 || ruleForm.type==4' class='form3'>
|
|
|
|
|
|
+ <div v-if='ruleForm.Type==1 || ruleForm.Type==4' class='form3'>
|
|
<div class='form3-top'>
|
|
<div class='form3-top'>
|
|
- <span class='form3-span1' v-if='ruleForm.type==1'>填充色以及透明度</span>
|
|
|
|
|
|
+ <span class='form3-span1' v-if='ruleForm.Type==1'>填充色以及透明度</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-color-picker v-if='ruleForm.type==1' v-model='ruleForm.color' show-alpha style='margin:0 172px 0 10px'></el-color-picker>
|
|
|
|
|
|
+ <el-color-picker v-if='ruleForm.Type==1' 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-color-picker v-model='ruleForm.borderColor' show-alpha style='margin:0 90px 0 10px'></el-color-picker>
|
|
|
|
|
|
<el-select
|
|
<el-select
|
|
@@ -53,18 +53,18 @@
|
|
</el-select>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div v-if='ruleForm.type==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/' :http-request='getFile' :file-list='fileList'>
|
|
<el-button size='small' style='color:#1F2329;'>点击上传</el-button>
|
|
<el-button size='small' style='color:#1F2329;'>点击上传</el-button>
|
|
</el-upload>
|
|
</el-upload>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div v-if='ruleForm.type!=2' class='form4'>
|
|
|
|
|
|
+ <div v-if='ruleForm.Type!=2' 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>
|
|
<span class='form4-span3'>铺位可视化typeid</span>
|
|
<span class='form4-span3'>铺位可视化typeid</span>
|
|
</div>
|
|
</div>
|
|
<div class='form3-bottom'>
|
|
<div class='form3-bottom'>
|
|
@@ -83,19 +83,20 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import { createLegend, updateLegend, uploadImg } from '@/api/legendLibrary.js'
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- ruleForm: {
|
|
|
|
- color: 'rgba(19, 206, 102, 0.8)',
|
|
|
|
- borderColor: 'rgba(19, 206, 102, 0.8)',
|
|
|
|
- borderLine: '',
|
|
|
|
- linepx: '',
|
|
|
|
- code: '',
|
|
|
|
- name: '',
|
|
|
|
- type: '2',
|
|
|
|
- unit: ''
|
|
|
|
- },
|
|
|
|
|
|
+ // 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',
|
|
@@ -143,10 +144,24 @@ export default {
|
|
}
|
|
}
|
|
],
|
|
],
|
|
fileList: [],
|
|
fileList: [],
|
|
|
|
+ imgSrc: '', //图标的key,/serve/Picture/query/${imgSrc}
|
|
value: ''
|
|
value: ''
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ props: ['ruleForm'],
|
|
methods: {
|
|
methods: {
|
|
|
|
+ getFile(file) {
|
|
|
|
+ console.log(file)
|
|
|
|
+ var formData = new FormData()
|
|
|
|
+ formData.append('file', file.file)
|
|
|
|
+ let postParams = formData
|
|
|
|
+ uploadImg({ postParams }).then(res => {
|
|
|
|
+ if (res.Result == 'success') {
|
|
|
|
+ this.imgSrc = res.EntityList[0]
|
|
|
|
+ this.$message.success('图标上传成功!')
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
changeSelection() {
|
|
changeSelection() {
|
|
console.log(this.ruleForm.linepx)
|
|
console.log(this.ruleForm.linepx)
|
|
let path = this.$refs.select.selectedLabel
|
|
let path = this.$refs.select.selectedLabel
|
|
@@ -162,8 +177,32 @@ export default {
|
|
'style',
|
|
'style',
|
|
'background:url(' + path + ') center center no-repeat;color:transparent;'
|
|
'background:url(' + path + ') center center no-repeat;color:transparent;'
|
|
)
|
|
)
|
|
|
|
+ },
|
|
|
|
+ create() {
|
|
|
|
+ //新增
|
|
|
|
+ let postParams = {
|
|
|
|
+ Name: this.ruleForm.Name,
|
|
|
|
+ Theme: '111',
|
|
|
|
+ Type: '111',
|
|
|
|
+ Id: '77'
|
|
|
|
+ }
|
|
|
|
+ createLegend({ postParams }).then(res => {
|
|
|
|
+ if (res.Result == 'success') {
|
|
|
|
+ this.$message.success('添加图例成功!')
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ update() {
|
|
|
|
+ //修改
|
|
|
|
+ let postParams = this.ruleForm
|
|
|
|
+ updateLegend({ postParams }).then(res => {
|
|
|
|
+ if (res.Result == 'success') {
|
|
|
|
+ this.$message.success('图例修改成功!')
|
|
|
|
+ }
|
|
|
|
+ })
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ mounted() {}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
@@ -260,7 +299,7 @@ export default {
|
|
padding: 12px 0 8px 0;
|
|
padding: 12px 0 8px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .span1::after,
|
|
|
|
|
|
+
|
|
.span2::after,
|
|
.span2::after,
|
|
.type::after,
|
|
.type::after,
|
|
.form3-span1::after,
|
|
.form3-span1::after,
|
|
@@ -269,5 +308,8 @@ export default {
|
|
color: #f56c6c;
|
|
color: #f56c6c;
|
|
margin-left: 4px;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
|
|
+ .upload-demo {
|
|
|
|
+ display: flex;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|