addForm.vue 19 KB

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