123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315 |
- <template>
- <div class='add-form'>
- <div class='form1'>
- <span class='span1'>图例编码</span>
- <span class='span2'>图例名称</span>
- <span class='span3' v-if='ruleForm.Type==1 || ruleForm.Type==3'>展示预览</span>
- </div>
- <div class='form2'>
- <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>
- <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 class='input-right' v-if='ruleForm.Type==1 || ruleForm.Type==3'>
- <div
- class='model'
- :style='`background:${ruleForm.color};border-width:${ruleForm.borderLine}px;border-style:${ruleForm.borderColor}; border-color:${ruleForm.borderColor};`'
- ></div>
- </div>
- </div>
- <div v-if='ruleForm.Type==1 || ruleForm.Type==4' class='form3'>
- <div class='form3-top'>
- <span class='form3-span1' v-if='ruleForm.Type==1'>填充色以及透明度</span>
- <span class='form3-span3'>边框颜色</span>
- <span class='form3-span4'>边框线型</span>
- <span class='form3-span5'>边框粗细</span>
- </div>
- <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-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:160px;margin-right:24px'
- ref='select1'
- @change='changeSelection1'
- >
- <el-option v-for='item in borderLineOption' :key='item.id' :label='item.src' :value='item.id'>
- <img :src='item.src' alt />
- </el-option>
- </el-select>
- <el-select v-model='ruleForm.linepx' placeholder='请选择' size='small' style='width:160px;' ref='select' @change='changeSelection'>
- <el-option v-for='item in linepxOption' :key='item.id' :label='item.src' :value='item.id'>
- <img :src='item.src' alt />
- </el-option>
- </el-select>
- </div>
- </div>
- <div v-if='ruleForm.Type==3' class='form5'>
- <div class='form5-top'>上传新图标</div>
- <div>
- <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-upload>
- </div>
- </div>
- <div v-if='ruleForm.Type!=2' class='form4'>
- <div class='form4-top'>
- <span class='form4-span1'>对应工程信息化中的位置/设备分类</span>
- <span class='form4-span2'>工程信息化的专业</span>
- <span class='form4-span3'>铺位可视化typeid</span>
- </div>
- <div class='form3-bottom'>
- <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;margin-right:48px;'>
- <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:200px;margin-right:48px'>
- <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:200px;'>
- <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
- </el-select>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { createLegend, updateLegend, uploadImg } from '@/api/legendLibrary.js'
- export default {
- data() {
- return {
- // ruleForm: {
- // color: 'rgba(19, 206, 102, 0.8)',
- // borderColor: 'rgba(19, 206, 102, 0.8)',
- // borderLine: '',
- // linepx: '',
- // Code: '',
- // Name: '',
- // Type: '2',
- // unit: ''
- // },
- options: [
- {
- value: '2',
- label: '非图例'
- },
- {
- value: '1',
- label: '区域'
- },
- {
- value: '3',
- label: '图标'
- },
- {
- value: 4,
- label: '线条'
- }
- ],
- borderLineOption: [
- {
- id: 'solid',
- src: require('@/assets/imgs/1pxline.jpg')
- },
- {
- id: 'dashed',
- src: require('@/assets/imgs/dashedLine.jpg')
- },
- {
- id: 'dotted',
- src: require('@/assets/imgs/dotLine.jpg')
- }
- ],
- linepxOption: [
- {
- id: '1',
- src: require('@/assets/imgs/1pxline.jpg')
- },
- {
- id: '2',
- src: require('@/assets/imgs/2pxline.jpg')
- },
- {
- id: '3',
- src: require('@/assets/imgs/3pxline.jpg')
- }
- ],
- fileList: [],
- imgSrc: '', //图标的key,/serve/Picture/query/${imgSrc}
- value: ''
- }
- },
- props: ['ruleForm'],
- 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() {
- console.log(this.ruleForm.linepx)
- let path = this.$refs.select.selectedLabel
- this.$refs.select.$el.children[0].children[0].setAttribute(
- 'style',
- 'background:url(' + path + ') center center no-repeat;color:transparent;'
- )
- },
- changeSelection1() {
- console.log(this.ruleForm.borderLine)
- let path = this.$refs.select1.selectedLabel
- this.$refs.select1.$el.children[0].children[0].setAttribute(
- 'style',
- '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>
- <style lang='less' scoped>
- .add-form {
- color: #646c73;
- margin: 16px 0 0 72px;
- font-size: 14px;
- .form1 {
- margin-bottom: 8px;
- .span1 {
- margin-right: 192px;
- }
- .span2 {
- margin-right: 220px;
- }
- }
- .form2 {
- display: flex;
- .input-left {
- width: 500px;
- .title {
- margin-right: 100px;
- margin: 20px 0 8px 0;
- display: inline-block;
- width: 250px;
- }
- .type {
- margin-right: 100px;
- margin: 20px 0 8px 0;
- display: inline-block;
- width: 250px;
- }
- }
- .input-right {
- width: 200px;
- height: 114px;
- background: rgba(245, 246, 247, 1);
- display: inline-block;
- margin-left: 18px;
- display: flex;
- align-items: center;
- justify-content: center;
- .model {
- width: 56px;
- height: 6px;
- }
- }
- }
- .form3 {
- width: 720px;
- height: 86px;
- background: rgba(245, 246, 247, 1);
- border-radius: 4px;
- margin-top: 20px;
- .form3-top {
- padding: 12px 0 8px 12px;
- .form3-span1 {
- margin-right: 102px;
- }
- .form3-span2 {
- margin-right: 78px;
- }
- .form3-span3 {
- margin-right: 64px;
- }
- .form3-span4 {
- margin-right: 130px;
- }
- }
- .form3-bottom {
- display: flex;
- }
- }
- .form4 {
- .form4-top {
- padding: 20px 0 8px 0;
- .form4-span1 {
- margin-right: 32px;
- }
- .form4-span2 {
- margin-right: 102px;
- }
- }
- }
- .form5 {
- width: 720px;
- height: 86px;
- background: rgba(245, 246, 247, 1);
- border-radius: 4px;
- margin-top: 20px;
- padding-left: 12px;
- .form5-top {
- padding: 12px 0 8px 0;
- }
- }
- .span2::after,
- .type::after,
- .form3-span1::after,
- .form3-span3::after {
- content: '*';
- color: #f56c6c;
- margin-left: 4px;
- }
- .upload-demo {
- display: flex;
- }
- }
- </style>
|