|
@@ -42,11 +42,7 @@
|
|
<div v-show='ruleForm.Type=="Zone" || ruleForm.Type=="Image" || ruleForm.Type =="Line"'>
|
|
<div v-show='ruleForm.Type=="Zone" || ruleForm.Type=="Image" || ruleForm.Type =="Line"'>
|
|
<div style='color:#646C73'>展示预览</div>
|
|
<div style='color:#646C73'>展示预览</div>
|
|
<div class='input-right' ref='graph'>
|
|
<div class='input-right' ref='graph'>
|
|
- <div v-show=' ruleForm.Type=="Image" && ruleForm.Url' class='input-right'>
|
|
|
|
- <img :key='key' :src='`/serve/topology-wanda/Picture/query/${ruleForm.Url}`' alt />
|
|
|
|
- <!-- {{ruleForm.Url}} -->
|
|
|
|
- </div>
|
|
|
|
- <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' v-show='!(ruleForm.Type=="Image" && ruleForm.Url)'></canvas>
|
|
|
|
|
|
+ <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' v-show='!ruleForm.Url'></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -105,7 +101,7 @@
|
|
<div v-if='ruleForm.Type!="None"' class='form4'>
|
|
<div v-if='ruleForm.Type!="None"' class='form4'>
|
|
<div class='form4-top'>
|
|
<div class='form4-top'>
|
|
<span class='form4-span1'>专业/设备、位置类型</span>
|
|
<span class='form4-span1'>专业/设备、位置类型</span>
|
|
- <span class='form4-span3'>铺位可视化typeid</span>
|
|
|
|
|
|
+ <span class='form4-span3' v-if='ruleForm.Type!="Line"'>铺位可视化typeid</span>
|
|
</div>
|
|
</div>
|
|
<div class='form3-bottom'>
|
|
<div class='form3-bottom'>
|
|
<span class='device-list'>
|
|
<span class='device-list'>
|
|
@@ -125,6 +121,7 @@
|
|
/>
|
|
/>
|
|
</span>
|
|
</span>
|
|
<TreeSelect
|
|
<TreeSelect
|
|
|
|
+ v-if='ruleForm.Type!="Line"'
|
|
tipPlace='top'
|
|
tipPlace='top'
|
|
width='200'
|
|
width='200'
|
|
:notNull='true'
|
|
:notNull='true'
|
|
@@ -217,9 +214,9 @@ export default {
|
|
view: null,
|
|
view: null,
|
|
scene: null,
|
|
scene: null,
|
|
typeVisualization: [],
|
|
typeVisualization: [],
|
|
-
|
|
|
|
// majorList: [], //专业
|
|
// majorList: [], //专业
|
|
deviceList: [],
|
|
deviceList: [],
|
|
|
|
+ formData: [], //上传乳品的formdata
|
|
key: 1,
|
|
key: 1,
|
|
InfoLocals: undefined, //工程信息化
|
|
InfoLocals: undefined, //工程信息化
|
|
// InfoSystems: undefined, //工程信息化专业/系统
|
|
// InfoSystems: undefined, //工程信息化专业/系统
|
|
@@ -240,23 +237,15 @@ export default {
|
|
// console.log(file, fileList, 'file')
|
|
// console.log(file, fileList, 'file')
|
|
this.ruleForm.Url = ''
|
|
this.ruleForm.Url = ''
|
|
},
|
|
},
|
|
|
|
+ //获取上传图片的信息 canvas得到图的url
|
|
getFile(file) {
|
|
getFile(file) {
|
|
- // let imgSrc = document.querySelector('.input-right>img')
|
|
|
|
- // console.log(imgSrc)
|
|
|
|
this.file = file.file
|
|
this.file = file.file
|
|
- var formData = new FormData()
|
|
|
|
- formData.append('file', file.file)
|
|
|
|
- if (this.ruleForm.Url) {
|
|
|
|
- formData.append('uid', this.ruleForm.Url)
|
|
|
|
|
|
+ var reader = new FileReader()
|
|
|
|
+ reader.readAsDataURL(this.file)
|
|
|
|
+ reader.onload = e => {
|
|
|
|
+ console.log(this.view)
|
|
|
|
+ this.view.url = e.target.result
|
|
}
|
|
}
|
|
- let postParams = formData
|
|
|
|
- uploadImg({ postParams }).then(res => {
|
|
|
|
- if (res.Result == 'success') {
|
|
|
|
- this.key++
|
|
|
|
- this.$set(this.ruleForm, 'Url', res.EntityList[0])
|
|
|
|
- this.$message.success('图标上传成功!')
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
},
|
|
},
|
|
create() {
|
|
create() {
|
|
//新增
|
|
//新增
|
|
@@ -315,6 +304,10 @@ export default {
|
|
this.view.strokecolor = this.ruleForm.Color
|
|
this.view.strokecolor = this.ruleForm.Color
|
|
this.view.lineType = this.ruleForm.LineDash
|
|
this.view.lineType = this.ruleForm.LineDash
|
|
this.view.lineWidth = this.ruleForm.LineWidth
|
|
this.view.lineWidth = this.ruleForm.LineWidth
|
|
|
|
+ if (this.ruleForm.Url) {
|
|
|
|
+ let url = `/serve/topology-wanda/Picture/query/${this.ruleForm.Url}`
|
|
|
|
+ this.view.url = url
|
|
|
|
+ }
|
|
},
|
|
},
|
|
initGraph() {
|
|
initGraph() {
|
|
if (this.ruleForm.Type == 'Zone' || this.ruleForm.Type == 'Line' || this.ruleForm.Type == 'Image') {
|
|
if (this.ruleForm.Type == 'Zone' || this.ruleForm.Type == 'Line' || this.ruleForm.Type == 'Image') {
|
|
@@ -449,27 +442,32 @@ export default {
|
|
}
|
|
}
|
|
return new File([u8arr], filename, { type: mime })
|
|
return new File([u8arr], filename, { type: mime })
|
|
},
|
|
},
|
|
|
|
+ // 把canvas图保存到图片服务器
|
|
saveImg() {
|
|
saveImg() {
|
|
let vm = this
|
|
let vm = this
|
|
if (this.view) {
|
|
if (this.view) {
|
|
let data = this.view.canvasView.toDataURL('image/png')
|
|
let data = this.view.canvasView.toDataURL('image/png')
|
|
var formData = new FormData()
|
|
var formData = new FormData()
|
|
- formData.append('file', this.base64ToFile(data))
|
|
|
|
|
|
+ if (this.ruleForm.Type == 'Zone' || this.ruleForm.Type == 'Line') {
|
|
|
|
+ formData.append('file', this.base64ToFile(data))
|
|
|
|
+ } else {
|
|
|
|
+ formData.append('file', this.file)
|
|
|
|
+ }
|
|
let postParams = formData
|
|
let postParams = formData
|
|
uploadImg({ postParams }).then(res => {
|
|
uploadImg({ postParams }).then(res => {
|
|
if (res.Result == 'success') {
|
|
if (res.Result == 'success') {
|
|
this.$set(vm.ruleForm, 'Url', res.EntityList[0])
|
|
this.$set(vm.ruleForm, 'Url', res.EntityList[0])
|
|
this.$message.success('图标上传成功!')
|
|
this.$message.success('图标上传成功!')
|
|
- if (this.title == '添加图例库') {
|
|
|
|
- this.create()
|
|
|
|
- this.$emit('addSuccess')
|
|
|
|
- this.view.canvas.clearRect(0, 0, this.width, this.height)
|
|
|
|
- } else if (this.title == '修改图例库') {
|
|
|
|
- this.update()
|
|
|
|
- this.$emit('updateSuccess')
|
|
|
|
- this.view.canvas.clearRect(0, 0, this.width, this.height)
|
|
|
|
- } else {
|
|
|
|
- }
|
|
|
|
|
|
+ // if (this.title == '添加图例库') {
|
|
|
|
+ // this.create()
|
|
|
|
+ // this.$emit('addSuccess')
|
|
|
|
+ // this.view.canvas.clearRect(0, 0, this.width, this.height)
|
|
|
|
+ // } else if (this.title == '修改图例库') {
|
|
|
|
+ // this.update()
|
|
|
|
+ // this.$emit('updateSuccess')
|
|
|
|
+ // this.view.canvas.clearRect(0, 0, this.width, this.height)
|
|
|
|
+ // } else {
|
|
|
|
+ // }
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
@@ -546,14 +544,16 @@ export default {
|
|
this.changeLineType(this.ruleForm.LineDash)
|
|
this.changeLineType(this.ruleForm.LineDash)
|
|
this.initGraph()
|
|
this.initGraph()
|
|
}
|
|
}
|
|
- },
|
|
|
|
- updated() {
|
|
|
|
- if (this.title == '修改图例库') {
|
|
|
|
- this.changeLineWidth(this.ruleForm.LineWidth)
|
|
|
|
- this.changeLineType(this.ruleForm.LineDash)
|
|
|
|
- this.initGraph()
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
|
|
+ // updated() {
|
|
|
|
+ // this.initQueryDeviceAndPOsition()
|
|
|
|
+ // this.visualization()
|
|
|
|
+ // if (this.title == '修改图例库') {
|
|
|
|
+ // this.changeLineWidth(this.ruleForm.LineWidth)
|
|
|
|
+ // this.changeLineType(this.ruleForm.LineDash)
|
|
|
|
+ // this.initGraph()
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|