addForm.vue 25 KB

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