addForm.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691
  1. <template>
  2. <div class='add-form'>
  3. <div class='form2'>
  4. <div class='input-left'>
  5. <el-row :gutter='20'>
  6. <el-col :span='12'>
  7. <div>图例编码</div>
  8. <el-input v-model='ruleForm.Id' style='width:200px;height:32px;' disabled></el-input>
  9. </el-col>
  10. <el-col :span='12'>
  11. <div class='start'>图例名称</div>
  12. <el-input v-model='ruleForm.Name' style='width:200px;height:32px;'></el-input>
  13. </el-col>
  14. <el-col :span='12' style='margin-top:20px'>
  15. <div class>单位</div>
  16. <el-input v-model='ruleForm.Unit' style='width:200px;height:32px;'></el-input>
  17. </el-col>
  18. <el-col :span='12' style='margin-top:20px'>
  19. <div class='start'>图例类型</div>
  20. <el-select v-model='ruleForm.Type' placeholder='请选择' style='width:200px;height:32px' @change='initGraph'>
  21. <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
  22. </el-select>
  23. </el-col>
  24. </el-row>
  25. </div>
  26. <div class='input-right' ref='graph' v-show='ruleForm.Type=="Zone" || ruleForm.Type=="Image" || ruleForm.Type =="Line"'>
  27. <div v-show=' ruleForm.Type=="Image" && ruleForm.Url' class='input-right'>
  28. <img :key='key' :src='`/serve/topology-wanda/Picture/query/${ruleForm.Url}`' alt />
  29. <!-- {{ruleForm.Url}} -->
  30. </div>
  31. <canvas id='canvas' :width='canvasWidth' :height='canvasHeight' v-show='!(ruleForm.Type=="Image" && ruleForm.Url)'></canvas>
  32. </div>
  33. </div>
  34. <div v-if='ruleForm.Type=="Zone" || ruleForm.Type=="Line"' class='form3'>
  35. <div class='form3-top'>
  36. <span class='form3-span1 start' v-if='ruleForm.Type=="Zone"'>填充色以及透明度</span>
  37. <span class='form3-span3 start'>边框颜色</span>
  38. <span class='form3-span4'>边框线型</span>
  39. <span class='form3-span5'>边框粗细</span>
  40. </div>
  41. <div class='form3-bottom'>
  42. <el-color-picker
  43. v-if='ruleForm.Type=="Zone"'
  44. v-model='ruleForm.FillColor'
  45. style='margin:0 172px 0 10px'
  46. show-alpha
  47. @change='changBgColor'
  48. :color-format='"hex"'
  49. ></el-color-picker>
  50. <el-color-picker v-model='ruleForm.Color' style='margin:0 90px 0 10px' @change='changLineColor'></el-color-picker>
  51. <el-select
  52. v-model='ruleForm.LineDash'
  53. placeholder='请选择'
  54. size='small'
  55. style='width:160px;margin-right:24px'
  56. ref='select1'
  57. @change='changeLineType'
  58. >
  59. <el-option v-for='item in borderLineOption' :key='item.id' :label='item.src' :value='item.id'>
  60. <img :src='item.src' alt />
  61. </el-option>
  62. </el-select>
  63. <div style='position:relative'>
  64. <a-input-number id='inputNumber' v-model='ruleForm.LineWidth' :min='1' :max='10' ref='select' @change='changeLineWidth' />
  65. <span class='line-width'>px</span>
  66. </div>
  67. </div>
  68. </div>
  69. <div v-if='ruleForm.Type=="Image"' class='form5'>
  70. <div class='form5-top'>上传新图标</div>
  71. <div>
  72. <el-upload
  73. class='upload-demo'
  74. action='https://jsonplaceholder.typicode.com/posts/'
  75. :http-request='getFile'
  76. :file-list='fileList'
  77. :on-change='handleChange'
  78. :on-remove='handleRemove'
  79. >
  80. <el-button size='small' style='color:#1F2329;'>点击上传</el-button>
  81. </el-upload>
  82. </div>
  83. </div>
  84. <div v-if='ruleForm.Type!="None"' class='form4'>
  85. <div class='form4-top'>
  86. <span class='form4-span1'>专业/设备、位置类型:</span>
  87. <span class='form4-span3'>铺位可视化typeid</span>
  88. </div>
  89. <div class='form3-bottom'>
  90. <span class='device-list'>
  91. <TreeSelect
  92. tipPlace='top'
  93. width='200'
  94. style=' margin-right:48px;'
  95. :returnParentNode='true'
  96. :isShowAllChoice='true'
  97. :choseArea='true'
  98. :data='deviceList'
  99. @change='treeConfirmDevice'
  100. :hideClear='true'
  101. :lastStage='true'
  102. :selectedIds='InfosList'
  103. :notNull='true'
  104. />
  105. </span>
  106. <TreeSelect
  107. tipPlace='top'
  108. width='200'
  109. :notNull='true'
  110. :returnParentNode='false'
  111. :isShowAllChoice='true'
  112. :choseArea='true'
  113. :data='typeVisualization'
  114. @change='treeConfirm'
  115. @focusChange='focusChange'
  116. :hideClear='true'
  117. :selectedIds='InfoTypeIdList'
  118. :lastStage='true'
  119. />
  120. </div>
  121. </div>
  122. </div>
  123. </template>
  124. <script>
  125. import { queryDeviceAndPOsition, createLegend, updateLegend, uploadImg, getVisualization } from '@/api/legendLibrary.js'
  126. import { FloorView } from '@/lib/FloorView'
  127. import { FloorScene } from '@/lib/FloorScene'
  128. import { GraphView } from '@/lib/GraphView'
  129. export default {
  130. data() {
  131. return {
  132. options: [
  133. {
  134. value: 'None',
  135. label: '非图例'
  136. },
  137. {
  138. value: 'Zone',
  139. label: '区域'
  140. },
  141. {
  142. value: 'Image',
  143. label: '图标'
  144. },
  145. {
  146. value: 'Line',
  147. label: '线条'
  148. }
  149. ],
  150. selectedIds: [],
  151. borderLineOption: [
  152. {
  153. id: 'solid',
  154. src: require('@/assets/imgs/1pxline.jpg')
  155. },
  156. {
  157. id: 'dashed',
  158. src: require('@/assets/imgs/dashedLine.jpg')
  159. },
  160. {
  161. id: 'dotted',
  162. src: require('@/assets/imgs/dotLine.jpg')
  163. }
  164. ],
  165. linepxOption: [
  166. {
  167. id: 1,
  168. src: require('@/assets/imgs/1pxline.jpg')
  169. },
  170. {
  171. id: 2,
  172. src: require('@/assets/imgs/2pxline.jpg')
  173. },
  174. {
  175. id: 3,
  176. src: require('@/assets/imgs/3pxline.jpg')
  177. }
  178. ],
  179. fileList: [],
  180. file: '',
  181. // this.ruleForm.Url 图标的key,/serve/topology-wanda/Picture/query/${this.ruleForm.Url}
  182. value: '',
  183. linepxObject: {
  184. src: ''
  185. },
  186. borderLineOptionObject: {
  187. src: ''
  188. },
  189. canvasWidth: 200,
  190. canvasHeight: 114,
  191. view: null,
  192. scene: null,
  193. typeVisualization: [],
  194. // majorList: [], //专业
  195. deviceList: [],
  196. key: 1,
  197. InfoLocals: undefined, //工程信息化
  198. // InfoSystems: undefined, //工程信息化专业/系统
  199. InfoTypeIds: undefined //铺位可视化typeid
  200. }
  201. },
  202. props: ['ruleForm', 'title', 'InfosList', 'InfoTypeIdList'],
  203. methods: {
  204. //业下设备分类和位置分类树形结构
  205. initQueryDeviceAndPOsition() {
  206. let postParams = {}
  207. queryDeviceAndPOsition({ postParams }).then(res => {
  208. this.deviceList = res.data
  209. })
  210. },
  211. handleRemove(file, fileList) {
  212. // console.log(file, fileList, 'file')
  213. this.ruleForm.Url = ''
  214. },
  215. getFile(file) {
  216. // let imgSrc = document.querySelector('.input-right>img')
  217. // console.log(imgSrc)
  218. this.file = file.file
  219. var formData = new FormData()
  220. formData.append('file', file.file)
  221. if (this.ruleForm.Url) {
  222. formData.append('uid', this.ruleForm.Url)
  223. }
  224. let postParams = formData
  225. uploadImg({ postParams }).then(res => {
  226. if (res.Result == 'success') {
  227. this.key++
  228. this.$set(this.ruleForm, 'Url', res.EntityList[0])
  229. this.$message.success('图标上传成功!')
  230. }
  231. })
  232. },
  233. create() {
  234. //新增
  235. if (this.ruleForm.FillColor.indexOf('#') > -1) {
  236. this.ruleForm.FillColor = this.ruleForm.FillColor
  237. } else {
  238. this.ruleForm.FillColor = this.hexify(this.ruleForm.FillColor)
  239. }
  240. let postParams = {
  241. Content: [this.ruleForm]
  242. }
  243. createLegend({ postParams }).then(res => {
  244. if (res.Result == 'success') {
  245. this.$message.success('添加图例成功!')
  246. this.$emit('addSuccess')
  247. this.fileList = []
  248. } else {
  249. this.$message.error(res.Message)
  250. }
  251. })
  252. },
  253. update() {
  254. //修改
  255. if (this.ruleForm.FillColor.indexOf('#') > -1) {
  256. this.ruleForm.FillColor = this.ruleForm.FillColor
  257. } else {
  258. this.ruleForm.FillColor = this.hexify(this.ruleForm.FillColor)
  259. }
  260. let postParams = {
  261. Content: [this.ruleForm]
  262. }
  263. updateLegend({ postParams }).then(res => {
  264. if (res.Result == 'success') {
  265. this.$message.success('图例修改成功!')
  266. this.$emit('updateSuccess')
  267. this.fileList = []
  268. } else {
  269. this.$message.error(res.Message)
  270. }
  271. })
  272. },
  273. handleChange(file, fileList) {
  274. this.fileList = fileList.slice(-1)
  275. },
  276. clearGraphy(type) {
  277. if (!(this.view instanceof GraphView)) {
  278. this.view = new GraphView('canvas')
  279. }
  280. this.view.type = type
  281. if (this.ruleForm.FillColor.indexOf('#') > -1) {
  282. this.view.bgcolor = this.ruleForm.FillColor
  283. } else {
  284. this.view.bgcolor = this.hexify(this.ruleForm.FillColor)
  285. }
  286. this.view.strokecolor = this.ruleForm.Color
  287. this.view.lineType = this.ruleForm.LineDash
  288. this.view.lineWidth = this.ruleForm.LineWidth
  289. },
  290. initGraph() {
  291. if (this.ruleForm.Type == 'Zone' || this.ruleForm.Type == 'Line' || this.ruleForm.Type == 'Image') {
  292. //1是区域 0是线条
  293. this.clearGraphy(this.ruleForm.Type == 'Zone' ? 1 : this.ruleForm.Type == 'Line' ? 0 : 2)
  294. }
  295. },
  296. //rgba转成16进制
  297. hexify(color) {
  298. if (color) {
  299. var opacity = ''
  300. var rgb = color.split(',')
  301. var r = parseInt(rgb[0].split('(')[1])
  302. var g = parseInt(rgb[1])
  303. var b = parseInt(rgb[2].split(')')[0])
  304. switch (parseFloat(rgb[3] || 1) + '') {
  305. case '0':
  306. opacity = '00'
  307. break
  308. case '0.05':
  309. opacity = '0C'
  310. break
  311. case '0.1':
  312. opacity = '19'
  313. break
  314. case '0.15':
  315. opacity = '26'
  316. break
  317. case '0.2':
  318. opacity = '33'
  319. break
  320. case '0.25':
  321. opacity = '3F'
  322. break
  323. case '0.3':
  324. opacity = '4C'
  325. break
  326. case '0.35':
  327. opacity = '59'
  328. break
  329. case '0.4':
  330. opacity = '66'
  331. break
  332. case '0.45':
  333. opacity = '72'
  334. break
  335. case '0.5':
  336. opacity = '7F'
  337. break
  338. case '0.55':
  339. opacity = '8C'
  340. break
  341. case '0.6':
  342. opacity = '99'
  343. break
  344. case '0.65':
  345. opacity = 'A5'
  346. break
  347. case '0.7':
  348. opacity = 'B2'
  349. break
  350. case '0.75':
  351. opacity = 'BF'
  352. break
  353. case '0.8':
  354. opacity = 'CC'
  355. break
  356. case '0.85':
  357. opacity = 'D8'
  358. break
  359. case '0.9':
  360. opacity = 'E5'
  361. break
  362. case '0.95':
  363. opacity = 'F2'
  364. break
  365. case '1':
  366. opacity = 'FF'
  367. break
  368. }
  369. var hex = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + opacity
  370. return hex
  371. } else {
  372. return
  373. }
  374. },
  375. // 背景颜色改变
  376. changBgColor(val) {
  377. if (this.view) {
  378. this.view.bgcolor = this.hexify(val)
  379. }
  380. },
  381. // 线条颜色改变
  382. changLineColor(val) {
  383. if (this.view) {
  384. this.view.strokecolor = val
  385. }
  386. },
  387. //线条类型改变
  388. changeLineType(val) {
  389. this.$set(this.ruleForm, 'LineDash', val)
  390. this.borderLineOptionObject = val && this.borderLineOption.find(item => item.id == val)
  391. if (this.$refs.select1 && this.$refs.select1.$el) {
  392. this.$refs.select1.$el.children[0].children[0].setAttribute(
  393. 'style',
  394. 'background:url(' + this.borderLineOptionObject.src + ') center center no-repeat;color:transparent;'
  395. )
  396. }
  397. if (this.view) {
  398. this.view.lineType = val
  399. }
  400. },
  401. //线条宽度
  402. changeLineWidth(val) {
  403. this.$set(this.ruleForm, 'LineWidth', val)
  404. if (this.view) {
  405. this.view.lineWidth = Number(val)
  406. }
  407. },
  408. base64ToFile(dataurl, filename) {
  409. //console.log(dataurl, 'url')
  410. let arr = dataurl.split(',')
  411. let mime = arr[0].match(/:(.*?);/)[1]
  412. if (!filename) {
  413. filename = `${new Date().getTime()}.${mime.substr(mime.indexOf('/') + 1)}`
  414. }
  415. let bstr = atob(arr[1])
  416. let n = bstr.length
  417. let u8arr = new Uint8Array(n)
  418. while (n--) {
  419. u8arr[n] = bstr.charCodeAt(n)
  420. }
  421. return new File([u8arr], filename, { type: mime })
  422. },
  423. saveImg() {
  424. let vm = this
  425. if (this.view) {
  426. let data = this.view.canvasView.toDataURL('image/png')
  427. var formData = new FormData()
  428. formData.append('file', this.base64ToFile(data))
  429. let postParams = formData
  430. uploadImg({ postParams }).then(res => {
  431. if (res.Result == 'success') {
  432. this.$set(vm.ruleForm, 'Url', res.EntityList[0])
  433. this.$message.success('图标上传成功!')
  434. if (this.title == '添加图例库') {
  435. this.create()
  436. this.$emit('addSuccess')
  437. this.view.canvas.clearRect(0, 0, this.width, this.height)
  438. } else if (this.title == '修改图例库') {
  439. this.update()
  440. this.$emit('updateSuccess')
  441. this.view.canvas.clearRect(0, 0, this.width, this.height)
  442. } else {
  443. }
  444. }
  445. })
  446. }
  447. },
  448. // 铺位可视化
  449. treeConfirm(data) {
  450. //console.log(data, 'data')
  451. this.$set(this.ruleForm, 'InfoTypeId', data)
  452. },
  453. //位置/设备
  454. treeConfirmDevice(id, info) {
  455. console.log(id)
  456. // this.$set(this.ruleForm, 'InfoLocal', data)
  457. let InfoSystem = []
  458. let InfoLocal = []
  459. if (info && info.length > 0) {
  460. for (let i = 0; i < info.length; i++) {
  461. let type = info[i]
  462. if (type.name.includes('/')) {
  463. InfoLocal.push(type)
  464. //位置/设备
  465. this.$set(this.ruleForm, 'InfoLocal', InfoLocal)
  466. } else {
  467. InfoSystem.push(type)
  468. //专业
  469. this.$set(this.ruleForm, 'InfoSystem', InfoSystem)
  470. }
  471. }
  472. } else {
  473. this.$set(this.ruleForm, 'InfoLocal', [])
  474. this.$set(this.ruleForm, 'InfoSystem', [])
  475. }
  476. },
  477. focusChange(status) {
  478. // //console.log('focusChange', status)
  479. },
  480. visualization() {
  481. getVisualization({}).then(res => {
  482. this.typeVisualization =
  483. res.Data &&
  484. res.Data.map(i => {
  485. return {
  486. id: i.Id,
  487. name: i.Name,
  488. children: i.Children
  489. ? i.Children.map(j => {
  490. return {
  491. id: j.Id,
  492. name: j.Id + '-' + j.Name
  493. }
  494. })
  495. : []
  496. }
  497. })
  498. })
  499. },
  500. getTree(data) {
  501. return {
  502. id: data.Id,
  503. name: data.Name,
  504. children: data.Children ? data.Children.map(i => this.getTree(i)) : []
  505. }
  506. },
  507. focusChange(status) {
  508. //console.log('focusChange', status)
  509. }
  510. },
  511. mounted() {
  512. this.initQueryDeviceAndPOsition()
  513. this.visualization()
  514. if (this.title == '修改图例库') {
  515. this.changeLineWidth(this.ruleForm.LineWidth)
  516. this.changeLineType(this.ruleForm.LineDash)
  517. this.initGraph()
  518. }
  519. },
  520. updated() {
  521. if (this.title == '修改图例库') {
  522. this.changeLineWidth(this.ruleForm.LineWidth)
  523. this.changeLineType(this.ruleForm.LineDash)
  524. this.initGraph()
  525. }
  526. }
  527. }
  528. </script>
  529. <style lang='less' scoped>
  530. .add-form {
  531. color: #646c73;
  532. margin: 16px 0 0 72px;
  533. font-size: 14px;
  534. .start::after {
  535. content: '*';
  536. color: #f56c6c;
  537. margin-left: 4px;
  538. }
  539. .ant-input-number {
  540. border-radius: 4px 0 0 4px;
  541. }
  542. .form2 {
  543. display: flex;
  544. .input-left {
  545. width: 500px;
  546. .title {
  547. margin-right: 100px;
  548. margin: 20px 0 8px 0;
  549. display: inline-block;
  550. width: 250px;
  551. }
  552. .type {
  553. margin-right: 100px;
  554. margin: 20px 0 8px 0;
  555. display: inline-block;
  556. width: 250px;
  557. }
  558. }
  559. .input-right {
  560. width: 200px;
  561. height: 114px;
  562. background: rgba(245, 246, 247, 1);
  563. display: inline-block;
  564. display: flex;
  565. align-items: center;
  566. justify-content: center;
  567. img {
  568. width: 28px;
  569. height: 28px;
  570. }
  571. .model1 {
  572. width: 56px;
  573. height: 6px;
  574. }
  575. .model {
  576. width: 56px;
  577. height: 40px;
  578. }
  579. }
  580. }
  581. .form3 {
  582. width: 720px;
  583. height: 86px;
  584. background: rgba(245, 246, 247, 1);
  585. border-radius: 4px;
  586. margin-top: 20px;
  587. .form3-top {
  588. padding: 12px 0 8px 12px;
  589. .form3-span1 {
  590. margin-right: 102px;
  591. }
  592. .form3-span2 {
  593. margin-right: 78px;
  594. }
  595. .form3-span3 {
  596. margin-right: 64px;
  597. }
  598. .form3-span4 {
  599. margin-right: 130px;
  600. }
  601. }
  602. .form3-bottom {
  603. display: flex;
  604. }
  605. }
  606. .form4 {
  607. .form4-top {
  608. padding: 20px 0 8px 0;
  609. .form4-span1 {
  610. margin-right: 32px;
  611. }
  612. .form4-span2 {
  613. margin-right: 102px;
  614. }
  615. .form4-span3 {
  616. margin-left: 75px;
  617. }
  618. }
  619. }
  620. .form5 {
  621. width: 720px;
  622. height: 86px;
  623. background: rgba(245, 246, 247, 1);
  624. border-radius: 4px;
  625. margin-top: 20px;
  626. padding-left: 12px;
  627. .form5-top {
  628. padding: 12px 0 8px 0;
  629. }
  630. }
  631. .upload-demo {
  632. display: flex;
  633. }
  634. .line-width {
  635. display: inline-block;
  636. width: 35px;
  637. height: 32px;
  638. background: rgba(239, 240, 241, 1);
  639. border-radius: 0 4px 4px 0;
  640. border-right: 1px solid rgba(195, 198, 203, 1);
  641. border-top: 1px solid rgba(195, 198, 203, 1);
  642. border-bottom: 1px solid rgba(195, 198, 203, 1);
  643. position: absolute;
  644. text-align: center;
  645. }
  646. }
  647. </style>
  648. <style >
  649. .p-select-area {
  650. width: 480px !important;
  651. }
  652. .p-select-area .p-transfer-left {
  653. width: 236px !important;
  654. }
  655. .p-tree-node-check .p-tree-node-title .p-tree-node-name {
  656. word-break: break-all !important;
  657. white-space: normal !important;
  658. word-break: break-all !important;
  659. word-wrap: break-word !important;
  660. height: auto !important;
  661. line-height: 25px;
  662. }
  663. .p-select-area .p-transfer-right {
  664. width: 245px !important;
  665. }
  666. .p-select-area .p-transfer-right .p-transfer-selected .p-transfer-selected-item > span {
  667. word-break: break-all !important;
  668. white-space: normal !important;
  669. word-break: break-all !important;
  670. word-wrap: break-word !important;
  671. height: auto !important;
  672. line-height: 25px;
  673. display: block;
  674. width: 225px;
  675. padding-right: 3px;
  676. }
  677. </style>