addForm.vue 18 KB

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