addForm.vue 24 KB

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