123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499 |
- <template>
- <div class='add-form'>
- <div class='form1'>
- <span class='span1'>图例编码</span>
- <span class='span2'>图例名称</span>
- <span class='span3' v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Image"'>展示预览</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' @change='initGraph'>
- <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' ref='graph' v-show='ruleForm.Type=="Zone" || ruleForm.Type=="Image" || ruleForm.Type =="Line"'>
- <div v-if=' ruleForm.Type=="Image" && ruleForm.Url' class='input-right'>
- <img :src='`/serve/topology-wanda/Picture/query/${ruleForm.Url}`' alt />
- </div>
- <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' v-else></canvas>
- </div>
- </div>
- <div v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Line"' class='form3'>
- <div class='form3-top'>
- <span class='form3-span1' v-if='ruleForm.Type=="Zone"'>填充色以及透明度</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=="Zone"'
- v-model='ruleForm.FillColor'
- style='margin:0 172px 0 10px'
- show-alpha
- @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
- v-model='ruleForm.LineDash'
- placeholder='请选择'
- size='small'
- style='width:160px;margin-right:24px'
- ref='select1'
- @change='changeLineType'
- >
- <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.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'>
- <img :src='item.src' alt />
- </el-option>
- </el-select>-->
- <div style='position:relative'>
- <a-input-number id='inputNumber' v-model='ruleForm.LineWidth' :min='1' :max='10' ref='select' @change='changeLineWidth' />
- <span class='line-width'>px</span>
- </div>
- </div>
- </div>
- <div v-if='ruleForm.Type=="Image"' 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'
- :on-change='handleChange'
- >
- <el-button size='small' style='color:#1F2329;'>点击上传</el-button>
- </el-upload>
- </div>
- </div>
- <div v-if='ruleForm.Type!="None"' 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 options1' :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 options2' :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 options3' :key='item.value' :label='item.label' :value='item.value'></el-option>
- </el-select>-->
- <TreeSelect
- title='已选项'
- unit='个'
- placeholder='请选择'
- tipPlace='top'
- height='300'
- :notNull='true'
- :returnParentNode='false'
- :isShowAllChoice='true'
- :selectedIds='select11'
- :choseArea='true'
- :data='dataTreeMultiple5'
- @change='treeConfirm'
- @focusChange='focusChange'
- />
- </div>
- </div>
- </div>
- </template>
- <script>
- 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 {
- data() {
- return {
- options: [
- {
- value: 'None',
- label: '非图例'
- },
- {
- value: 'Zone',
- label: '区域'
- },
- {
- value: 'Image',
- label: '图标'
- },
- {
- value: 'Line',
- label: '线条'
- }
- ],
- options1: [],
- options2: [],
- options3: [],
- 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: [],
- // this.ruleForm.Url 图标的key,/serve/topology-wanda/Picture/query/${this.ruleForm.Url}
- value: '',
- linepxObject: {
- src: ''
- },
- borderLineOptionObject: {
- src: ''
- },
- canvasWidth: 200,
- canvasHeight: 114,
- view: null,
- scene: null,
- dataTreeMultiple5: [],
- select11: []
- }
- },
- props: ['ruleForm', 'title'],
- methods: {
- getFile(file) {
- var formData = new FormData()
- formData.append('file', file.file)
- formData.append('uid', this.ruleForm.Url)
- let postParams = formData
- uploadImg({ postParams }).then(res => {
- if (res.Result == 'success') {
- this.$set(this.ruleForm, 'Url', res.EntityList[0])
- this.$message.success('图标上传成功!')
- }
- })
- },
- create() {
- //新增
- let postParams = {
- Content: [this.ruleForm]
- }
- createLegend({ postParams }).then(res => {
- if (res.Result == 'success') {
- this.$message.success('添加图例成功!')
- this.$emit('addSuccess')
- this.fileList = []
- } else {
- this.$message.error(res.Message)
- }
- })
- },
- update() {
- //修改
- let postParams = {
- Content: [this.ruleForm]
- }
- updateLegend({ postParams }).then(res => {
- if (res.Result == 'success') {
- this.$message.success('图例修改成功!')
- this.$emit('updateSuccess')
- this.fileList = []
- } else {
- this.$message.error(res.Message)
- }
- })
- },
- handleChange(file, fileList) {
- this.fileList = fileList.slice(-1)
- },
- clearGraphy(type) {
- if (!(this.view instanceof GraphView)) {
- this.view = new GraphView('canvas')
- }
- this.view.type = type
- if (this.ruleForm.FillColor.indexOf('#') > -1) {
- this.view.bgcolor = this.ruleForm.FillColor
- } else {
- this.view.bgcolor = this.hexify(this.ruleForm.FillColor)
- }
- this.view.strokecolor = this.ruleForm.Color
- this.view.lineType = this.ruleForm.LineDash
- this.view.lineWidth = this.ruleForm.LineWidth
- },
- initGraph() {
- if (this.ruleForm.Type == 'Zone' || this.ruleForm.Type == 'Line') {
- this.clearGraphy(this.ruleForm.Type == 'Zone' ? 1 : 0)
- }
- },
- //rgba转成16进制
- hexify(color) {
- var values = color
- .replace(/rgba?\(/, '')
- .replace(/\)/, '')
- .replace(/[\s+]/g, '')
- .split(',')
- var a = parseFloat(values[3] || 1),
- r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
- g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
- b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255)
- return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2)
- },
- // 背景颜色改变
- changBgColor(val) {
- if (this.view) {
- this.view.bgcolor = this.hexify(val)
- }
- },
- // 线条颜色改变
- changLineColor(val) {
- if (this.view) {
- this.view.strokecolor = val
- }
- },
- //线条类型改变
- changeLineType(val) {
- this.$set(this.ruleForm, 'LineDash', val)
- this.borderLineOptionObject = val && this.borderLineOption.find(item => item.id == val)
- if (this.$refs.select1 && this.$refs.select1.$el) {
- 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.$set(this.ruleForm, 'LineWidth', val)
- // this.linepxObject = val && this.linepxOption.find(item => item.id == val)
- // if (this.$refs.select && this.$refs.select.$el) {
- // 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')
- 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('图标上传成功!')
- 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 {
- }
- }
- })
- }
- },
- // 多选返回的id组
- treeConfirm(data) {
- console.log(data)
- },
- focusChange(status) {
- console.log('focusChange', status)
- }
- },
- mounted() {
- if (this.title == '修改图例库') {
- this.changeLineWidth(this.ruleForm.LineWidth)
- this.changeLineType(this.ruleForm.LineDash)
- this.initGraph()
- }
- },
- updated() {
- if (this.title == '修改图例库') {
- this.changeLineWidth(this.ruleForm.LineWidth)
- this.changeLineType(this.ruleForm.LineDash)
- this.initGraph()
- }
- }
- }
- </script>
- <style lang='less' scoped>
- .add-form {
- color: #646c73;
- margin: 16px 0 0 72px;
- font-size: 14px;
- .ant-input-number {
- border-radius: 4px 0 0 4px;
- }
- .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;
- display: flex;
- align-items: center;
- justify-content: center;
- .model1 {
- width: 56px;
- height: 6px;
- }
- .model {
- width: 56px;
- height: 40px;
- }
- }
- }
- .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;
- }
- .line-width {
- display: inline-block;
- width: 35px;
- height: 32px;
- background: rgba(239, 240, 241, 1);
- border-radius: 0 4px 4px 0;
- border-right: 1px solid rgba(195, 198, 203, 1);
- border-top: 1px solid rgba(195, 198, 203, 1);
- border-bottom: 1px solid rgba(195, 198, 203, 1);
- position: absolute;
- text-align: center;
- }
- }
- </style>
|