addForm.vue 20 KB

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