|
@@ -12,12 +12,12 @@
|
|
<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' @change='initGraph'>
|
|
<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=="Zone" || ruleForm.Type=="Icon" || ruleForm.Type =="Line"'>
|
|
|
|
- <div v-if=' ruleForm.Type=="Icon" ' class='input-right'>
|
|
|
|
|
|
+ <div class='input-right' ref='graph' v-show='ruleForm.Type=="Zone" || ruleForm.Type=="Icon" || ruleForm.Type =="Line"'>
|
|
|
|
+ <!-- <div v-if=' ruleForm.Type=="Icon" ' class='input-right'>
|
|
<img :src='`/serve/Picture/query/${ruleForm.Url}`' alt />
|
|
<img :src='`/serve/Picture/query/${ruleForm.Url}`' alt />
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
@@ -29,7 +29,15 @@
|
|
v-else
|
|
v-else
|
|
class='model1'
|
|
class='model1'
|
|
:style='`border-width:${ruleForm.LineWidth}px;border-style:${ruleForm.LineDash}; border-color:${ruleForm.Color};`'
|
|
:style='`border-width:${ruleForm.LineWidth}px;border-style:${ruleForm.LineDash}; border-color:${ruleForm.Color};`'
|
|
|
|
+<<<<<<< HEAD
|
|
></div>
|
|
></div>
|
|
|
|
+=======
|
|
|
|
+ >
|
|
|
|
+ </div>-->
|
|
|
|
+ <!-- <div ref='graph' style='width:100%;height:100%'> -->
|
|
|
|
+ <canvas id='canvas' :width='canvasWidth' :height='canvasHeight'></canvas>
|
|
|
|
+ <!-- </div> -->
|
|
|
|
+>>>>>>> 93c38f4666a4f0fcb5e8263afa5d1de70a34789c
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Line"' class='form3'>
|
|
<div v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Line"' class='form3'>
|
|
@@ -40,8 +48,14 @@
|
|
<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=="Zone"' v-model='ruleForm.FillColor' show-alpha style='margin:0 172px 0 10px'></el-color-picker>
|
|
|
|
- <el-color-picker v-model='ruleForm.Color' show-alpha style='margin:0 90px 0 10px'></el-color-picker>
|
|
|
|
|
|
+ <el-color-picker
|
|
|
|
+ v-if='ruleForm.Type=="Zone"'
|
|
|
|
+ v-model='ruleForm.FillColor'
|
|
|
|
+ style='margin:0 172px 0 10px'
|
|
|
|
+ @change='changBgColor'
|
|
|
|
+ :color-format='"hex"'
|
|
|
|
+ ></el-color-picker>
|
|
|
|
+ <el-color-picker v-model='ruleForm.Color' style='margin:0 90px 0 10px' @change='changLineColor'></el-color-picker>
|
|
|
|
|
|
<el-select
|
|
<el-select
|
|
v-model='ruleForm.LineDash'
|
|
v-model='ruleForm.LineDash'
|
|
@@ -49,14 +63,19 @@
|
|
size='small'
|
|
size='small'
|
|
style='width:160px;margin-right:24px'
|
|
style='width:160px;margin-right:24px'
|
|
ref='select1'
|
|
ref='select1'
|
|
- @change='changeSelection1'
|
|
|
|
|
|
+ @change='changeLineType'
|
|
>
|
|
>
|
|
<el-option v-for='item in borderLineOption' :key='item.id' :label='item.src' :value='item.id'>
|
|
<el-option v-for='item in borderLineOption' :key='item.id' :label='item.src' :value='item.id'>
|
|
<img :src='item.src' alt />
|
|
<img :src='item.src' alt />
|
|
</el-option>
|
|
</el-option>
|
|
</el-select>
|
|
</el-select>
|
|
|
|
+<<<<<<< HEAD
|
|
<el-select v-model='ruleForm.LineWidth' placeholder='请选择' size='small' style='width:160px;' ref='select' @change='changeSelection'>
|
|
<el-select v-model='ruleForm.LineWidth' 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' slot>
|
|
<el-option v-for='item in linepxOption' :key='item.id' :label='item.src' :value='item.id' slot>
|
|
|
|
+=======
|
|
|
|
+ <el-select v-model='ruleForm.LineWidth' placeholder='请选择' size='small' style='width:160px;' ref='select' @change='changeLineWidth'>
|
|
|
|
+ <el-option v-for='item in linepxOption' :key='item.id' :label='item.src' :value='item.id'>
|
|
|
|
+>>>>>>> 93c38f4666a4f0fcb5e8263afa5d1de70a34789c
|
|
<img :src='item.src' alt />
|
|
<img :src='item.src' alt />
|
|
</el-option>
|
|
</el-option>
|
|
</el-select>
|
|
</el-select>
|
|
@@ -99,6 +118,9 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { createLegend, updateLegend, uploadImg } from '@/api/legendLibrary.js'
|
|
import { createLegend, updateLegend, uploadImg } from '@/api/legendLibrary.js'
|
|
|
|
+import { FloorView } from '@/lib/FloorView'
|
|
|
|
+import { FloorScene } from '@/lib/FloorScene'
|
|
|
|
+import { GraphView } from '@/lib/GraphView'
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
@@ -155,7 +177,11 @@ export default {
|
|
// this.ruleForm.Url 图标的key,/serve/Picture/query/${this.ruleForm.Url}
|
|
// this.ruleForm.Url 图标的key,/serve/Picture/query/${this.ruleForm.Url}
|
|
value: '',
|
|
value: '',
|
|
linepxObject: {},
|
|
linepxObject: {},
|
|
- borderLineOptionObject: {}
|
|
|
|
|
|
+ borderLineOptionObject: {},
|
|
|
|
+ canvasWidth: 200,
|
|
|
|
+ canvasHeight: 114,
|
|
|
|
+ view: null,
|
|
|
|
+ scene: null
|
|
}
|
|
}
|
|
},
|
|
},
|
|
props: ['ruleForm'],
|
|
props: ['ruleForm'],
|
|
@@ -170,28 +196,9 @@ export default {
|
|
if (res.Result == 'success') {
|
|
if (res.Result == 'success') {
|
|
this.$set(this.ruleForm, 'Url', res.EntityList[0])
|
|
this.$set(this.ruleForm, 'Url', res.EntityList[0])
|
|
this.$message.success('图标上传成功!')
|
|
this.$message.success('图标上传成功!')
|
|
- this.fileList = []
|
|
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- changeSelection(val) {
|
|
|
|
- console.log(val)
|
|
|
|
- this.ruleForm.LineWidth = val
|
|
|
|
- this.linepxObject = val && this.linepxOption.find(item => item.id == val)
|
|
|
|
- this.$refs.select.$el.children[0].children[0].setAttribute(
|
|
|
|
- 'style',
|
|
|
|
- 'background:url(' + this.linepxObject.src + ') center center no-repeat;color:transparent;'
|
|
|
|
- )
|
|
|
|
- },
|
|
|
|
- changeSelection1(val) {
|
|
|
|
- console.log(val)
|
|
|
|
- this.ruleForm.LineDash = val
|
|
|
|
- this.borderLineOptionObject = val && this.borderLineOption.find(item => item.id == val)
|
|
|
|
- this.$refs.select1.$el.children[0].children[0].setAttribute(
|
|
|
|
- 'style',
|
|
|
|
- 'background:url(' + this.borderLineOptionObject.src + ') center center no-repeat;color:transparent;'
|
|
|
|
- )
|
|
|
|
- },
|
|
|
|
create() {
|
|
create() {
|
|
//新增
|
|
//新增
|
|
let postParams = {
|
|
let postParams = {
|
|
@@ -201,6 +208,7 @@ export default {
|
|
if (res.Result == 'success') {
|
|
if (res.Result == 'success') {
|
|
this.$message.success('添加图例成功!')
|
|
this.$message.success('添加图例成功!')
|
|
this.$emit('addSuccess')
|
|
this.$emit('addSuccess')
|
|
|
|
+ this.fileList = []
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
@@ -213,11 +221,93 @@ export default {
|
|
if (res.Result == 'success') {
|
|
if (res.Result == 'success') {
|
|
this.$message.success('图例修改成功!')
|
|
this.$message.success('图例修改成功!')
|
|
this.$emit('updateSuccess')
|
|
this.$emit('updateSuccess')
|
|
|
|
+ this.fileList = []
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
handleChange(file, fileList) {
|
|
handleChange(file, fileList) {
|
|
this.fileList = fileList.slice(-1)
|
|
this.fileList = fileList.slice(-1)
|
|
|
|
+ },
|
|
|
|
+ clearGraphy(type) {
|
|
|
|
+ if (this.view) {
|
|
|
|
+ this.view.type = type
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.view = new GraphView('canvas')
|
|
|
|
+ this.view.type = type
|
|
|
|
+ },
|
|
|
|
+ initGraph() {
|
|
|
|
+ if (this.ruleForm.Type == 'Zone' || this.ruleForm.Type == 'Line') {
|
|
|
|
+ this.clearGraphy(this.ruleForm.Type == 'Zone' ? 1 : 0)
|
|
|
|
+ }
|
|
|
|
+ // this.scene = new FloorScene()
|
|
|
|
+ },
|
|
|
|
+ // 背景颜色改变
|
|
|
|
+ changBgColor(val) {
|
|
|
|
+ if (this.view) {
|
|
|
|
+ this.view.bgcolor = val
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 线条颜色改变
|
|
|
|
+ changLineColor(val) {
|
|
|
|
+ if (this.view) {
|
|
|
|
+ this.view.strokecolor = val
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //线条类型改变
|
|
|
|
+ changeLineType(val) {
|
|
|
|
+ console.log(val)
|
|
|
|
+ this.ruleForm.LineDash = val
|
|
|
|
+ this.borderLineOptionObject = val && this.borderLineOption.find(item => item.id == val)
|
|
|
|
+ this.$refs.select1.$el.children[0].children[0].setAttribute(
|
|
|
|
+ 'style',
|
|
|
|
+ 'background:url(' + this.borderLineOptionObject.src + ') center center no-repeat;color:transparent;'
|
|
|
|
+ )
|
|
|
|
+ if (this.view) {
|
|
|
|
+ this.view.lineType = val
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //线条宽度
|
|
|
|
+ changeLineWidth(val) {
|
|
|
|
+ this.ruleForm.LineWidth = val
|
|
|
|
+ this.linepxObject = val && this.linepxOption.find(item => item.id == val)
|
|
|
|
+ this.$refs.select.$el.children[0].children[0].setAttribute(
|
|
|
|
+ 'style',
|
|
|
|
+ 'background:url(' + this.linepxObject.src + ') center center no-repeat;color:transparent;'
|
|
|
|
+ )
|
|
|
|
+ if (this.view) {
|
|
|
|
+ this.view.lineWidth = Number(val)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ base64ToFile(dataurl, filename) {
|
|
|
|
+ let arr = dataurl.split(',')
|
|
|
|
+ let mime = arr[0].match(/:(.*?);/)[1]
|
|
|
|
+ if (!filename) {
|
|
|
|
+ filename = `${new Date().getTime()}.${mime.substr(mime.indexOf('/') + 1)}`
|
|
|
|
+ }
|
|
|
|
+ let bstr = atob(arr[1])
|
|
|
|
+ let n = bstr.length
|
|
|
|
+ let u8arr = new Uint8Array(n)
|
|
|
|
+ while (n--) {
|
|
|
|
+ u8arr[n] = bstr.charCodeAt(n)
|
|
|
|
+ }
|
|
|
|
+ return new File([u8arr], filename, { type: mime })
|
|
|
|
+ },
|
|
|
|
+ saveImg() {
|
|
|
|
+ if (this.view) {
|
|
|
|
+ let data = this.view.canvasView.toDataURL('image/png')
|
|
|
|
+ console.log(data)
|
|
|
|
+ var formData = new FormData()
|
|
|
|
+ formData.append('file', this.base64ToFile(data))
|
|
|
|
+ let postParams = formData
|
|
|
|
+ uploadImg({ postParams }).then(res => {
|
|
|
|
+ if (res.Result == 'success') {
|
|
|
|
+ this.$set(this.ruleForm, 'Url', res.EntityList[0])
|
|
|
|
+ this.$message.success('图标上传成功!')
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ // this.view.saveImage('1.png', 'png')
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -274,10 +364,6 @@ export default {
|
|
width: 56px;
|
|
width: 56px;
|
|
height: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
- img {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.form3 {
|
|
.form3 {
|