addForm.vue 25 KB

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