legend.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718
  1. /**
  2. *@author:Guoxiaohuan zhulizhen
  3. *@date:2020.05.27
  4. *@info:图例
  5. */
  6. <template>
  7. <div>
  8. <div class='legend-container'>
  9. <div :class='showView===1?"legend2":"legend"' @click='showTl' v-if='(type==1 || floors.length>0)&& isMessage && legendTable.length>0 '>图例</div>
  10. <!-- 图里展示状态组件 -->
  11. <el-collapse-transition v-if='(type==1 || floors.length>0)&& isMessage && legendTable.length>0 '>
  12. <div class='legend-tab' v-if='showView===1'>
  13. <div class='legend-table2' v-if='systemName=="土建系统"'>
  14. <lengend-view @changeSwitch='handleSwich' :remarksText='remarksText' ref='viewLengend' :systemName='systemName'></lengend-view>
  15. </div>
  16. <div class='legend-table' v-else>
  17. <lengend-view @changeSwitch='handleSwich' :remarksText='remarksText' ref='viewLengend' :systemName='systemName'></lengend-view>
  18. </div>
  19. </div>
  20. </el-collapse-transition>
  21. <!-- 图例编辑状态组件 -->
  22. <el-collapse-transition>
  23. <div v-if='showView===2'>
  24. <lengend-edit
  25. @handleSwich2='handleSwich2'
  26. v-if='editTable.length>0'
  27. :loading='loading1'
  28. ref='editLen'
  29. :editTable='editTable'
  30. @saveNum='saveNum'
  31. @cance='cance'
  32. :remarksText='remarksText'
  33. ></lengend-edit>
  34. </div>
  35. </el-collapse-transition>
  36. </div>
  37. <!-- 单独展示新增分布图 -->
  38. <el-tooltip effect='dark' v-if='floors.length==0' content='新增分布图' placement='left'>
  39. <div class='edit_map1' @click='addFloor'>
  40. <!-- <p class='tltk' style='margin-left: -5px;'> -->
  41. <img src='@/assets/imgs/bjj.png' alt />
  42. <!-- </p> -->
  43. </div>
  44. </el-tooltip>
  45. <div class='edit_map' v-else>
  46. <!-- 备注编辑器 -->
  47. <el-tooltip effect='dark' content='编辑备注' placement='left'>
  48. <span v-if='systemName != "土建系统" && isMessage' class='bjtk' @click='legendClik'>备注</span>
  49. </el-tooltip>
  50. <!-- 编辑图例 -->
  51. <el-tooltip effect='dark' content='编辑图例' placement='left'>
  52. <p v-if='systemName != "土建系统" && isMessage' @click='editTl' class='tltk'>
  53. <img src='@/assets/imgs/bjtl.png' alt />
  54. </p>
  55. </el-tooltip>
  56. <!-- 新增分布图 -->
  57. <el-tooltip effect='dark' content='新增分布图' placement='left' v-if='floorSelect.length!=floors.length && !isMessage && type==0'>
  58. <p class='tltk' style='margin-left: -5px;' @click='addFloor'>
  59. <img src='@/assets/imgs/bjj.png' alt />
  60. </p>
  61. </el-tooltip>
  62. <!-- 编辑分布图 -->
  63. <!-- 有修改权限 -->
  64. <el-tooltip v-if='editPmt' class='bjpmt' effect='dark' :content='editTips' placement='left'>
  65. <span class='edit-icon corner-con' @click='goToEditer'>
  66. <img src='@/assets/imgs/bjs.png' alt />
  67. <!-- 角标 -->
  68. <!-- <span v-if='draftNum' class='corner' :style='{lineHeight : draftNum > 99 ?"10px":"18px"}'>{{draftNum > 99 ? '...' : draftNum}}</span> -->
  69. <span v-if='draftNum' class='corner'></span>
  70. </span>
  71. </el-tooltip>
  72. <!-- 无修改权限 -->
  73. <span v-else class='edit-icon2 corner-con'>
  74. <img src='@/assets/imgs/bjs.png' alt />
  75. <!-- 角标 -->
  76. <!-- <span v-if='draftNum' class='corner' :style='{lineHeight : draftNum > 99 ?"10px":"18px"}'>{{draftNum > 99 ? '...' : draftNum}}</span> -->
  77. <span v-if='draftNum' class='corner'></span>
  78. </span>
  79. </div>
  80. <div class='select-floor' v-if='isFloor'>
  81. <p class='p1'>{{`请选择需要创建"${categoryId=='FZQZL'?'分水器支路分布图':'消防泵房引出管路分布图'}"的楼层`}}</p>
  82. <p class='p2'>
  83. <Select width='240' tipPlace='top' v-model='floor' caption='楼层:' size='mini' :selectdata='floorSelectAble' :placeholder='"请选择"'></Select>
  84. </p>
  85. <p class='p3'>
  86. <span @click='cancel'>取消</span>
  87. <span @click='determine'>确定</span>
  88. </p>
  89. </div>
  90. <legend-remarks @queryMarks='queryMarks' ref='EditdMarks'></legend-remarks>
  91. </div>
  92. </template>
  93. <script>
  94. import lengendView from '@/components/viewLengend'
  95. import legendRemarks from '@/components/legendremarks'
  96. import lengendEdit from '@/components/editLengend'
  97. import { mapGetters } from 'vuex'
  98. import bus from '@/utils/bus.js'
  99. import { queryStatis, updateStatis, queryRead, queryDraftNum } from '@/api/public.js'
  100. export default {
  101. name: 'Legend',
  102. data() {
  103. return {
  104. remarksText: '', //查询出来的备注
  105. text1:
  106. '<p>主要设备房包括:冷源机房,热源机房,开闭站,配变电所(室),发电机房,消防水泵房,消防高位水箱间,生活水泵房,慧云机房,垃圾房</p>',
  107. text2: '<p>图例后×的数字,代表此位置的数量</p>',
  108. text2: '',
  109. loading: true,
  110. loading1: true,
  111. viewTable: [],
  112. editTable: [],
  113. tbData1: [],
  114. tbData2: [],
  115. tbData3: [],
  116. multipleSelection: [],
  117. editText: '',
  118. editSwitch: false,
  119. isFloor: false,
  120. editPmt: true, //是否有跳转道图例库的权限
  121. floorSelectAble: [],
  122. floor: '', //传的楼层
  123. floorName: '',
  124. planNum: '', //主要设备房
  125. typeNum: '',
  126. draftNum: null, //草稿箱数量, 编辑器修改icon右上角显示
  127. interval: 10 * 60 * 1000, //定时器时长,默认 10分钟
  128. timer: null //保存定时器
  129. }
  130. },
  131. computed: {
  132. ...mapGetters(['plazaId', 'fmapID', 'floorSelect', 'isMessage', 'ssoToken', 'showView', 'legendTable'])
  133. },
  134. props: {
  135. floors: {
  136. default: () => {
  137. ;[]
  138. },
  139. type: Array
  140. },
  141. type: {
  142. default: '1',
  143. type: String
  144. },
  145. systemName: {
  146. default: '',
  147. type: String
  148. },
  149. categoryId: {
  150. default: '',
  151. type: String
  152. },
  153. editTips: {
  154. type: String,
  155. default: ''
  156. }
  157. },
  158. components: { lengendView, legendRemarks, lengendEdit },
  159. watch: {
  160. // 监听 vuex 中currentFloor的变化,切换楼层后,调用接口查询,显示右下角小红点
  161. '$store.state.currentFloor': {
  162. handler(newV, oldV) {
  163. if (newV.gname !== oldV.gname) {
  164. clearInterval(this.timer)
  165. this.getDraftNum()
  166. this.timer = setInterval(() => {
  167. this.getDraftNum()
  168. }, this.interval)
  169. }
  170. },
  171. deep: true
  172. }
  173. },
  174. methods: {
  175. /**
  176. * @name getDraftNum
  177. * @description 查询草稿箱数量
  178. */
  179. async getDraftNum() {
  180. let res = null,
  181. // floorId = this.$cookie.get('floorMapId'),
  182. floorId = this.$store.state.currentFloor.gname || this.$cookie.get('floorMapId')
  183. // 增加校验 floorId,防止上传 undefined
  184. if (!floorId) {
  185. return true
  186. }
  187. let data = {
  188. Distinct: true,
  189. Filters: `projectId='${this.plazaId}';isPub=false;floorId='${floorId}'`,
  190. PageNumber: 1,
  191. PageSize: 500,
  192. Projection: ['floorId']
  193. }
  194. try {
  195. // 调用接口
  196. res = await queryDraftNum(data)
  197. } catch (error) {
  198. console.error(error)
  199. }
  200. if (!res) {
  201. this.draftNum = null
  202. return false
  203. }
  204. // 草稿箱总条数使用 res.Total, 不使用 Content数组的长度
  205. this.draftNum = res.Total || null
  206. },
  207. formatFloor() {
  208. this.floorSelectAble = []
  209. this.floorSelectAble = this.floorSelect.filter(item => {
  210. const hit = this.floors.find(i => i.gname == item.id)
  211. return !hit
  212. })
  213. },
  214. testClick(data) {},
  215. // 编辑备注
  216. legendClik() {
  217. this.$refs.EditdMarks.showModal()
  218. },
  219. // 查询备注
  220. queryMarks() {
  221. let postParams = {
  222. categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
  223. projectId: this.$store.state.plazaId,
  224. BuildingID: '1',
  225. Pub: true,
  226. FloorID: this.$cookie.get('floorNow')
  227. }
  228. let data = {}
  229. queryRead({ data, postParams }).then(res => {
  230. let remarksText = ''
  231. if (res.data.Data && res.data.Data[0].Note) {
  232. let Res = res.data ? res.data.Data[0].Note : ''
  233. if (Res) {
  234. // 返回有备注
  235. remarksText = Res
  236. } else {
  237. if (this.planNum > 0 && this.typeNum > 1) {
  238. remarksText = `${this.text1}${this.text2}${Res}`
  239. } else if (this.planNum > 0) {
  240. remarksText = `${this.text1}${Res}`
  241. } else if (this.typeNum > 1) {
  242. remarksText = `${this.text2}${Res}`
  243. } else {
  244. remarksText = ''
  245. }
  246. }
  247. this.$store.commit('SETREMARKSTEXT', remarksText)
  248. }
  249. })
  250. },
  251. // 点击展示图例框
  252. showTl() {
  253. if (this.showView != 1) {
  254. this.$store.commit('SETSHOWVIEW', 1)
  255. } else {
  256. this.$store.commit('SETSHOWVIEW', 0)
  257. }
  258. this.queryView(false)
  259. },
  260. cance() {
  261. // this.show2 = false
  262. },
  263. // 编辑图例
  264. editTl() {
  265. if (this.showView != 2) {
  266. this.$store.commit('SETSHOWVIEW', 2)
  267. } else {
  268. this.$store.commit('SETSHOWVIEW', 0)
  269. }
  270. this.queryEditNum(true)
  271. },
  272. /**
  273. * @name goToEditer
  274. * @description t跳转editer编辑器
  275. */
  276. goToEditer() {
  277. if (this.floor) {
  278. this.floorSelect.forEach(el => {
  279. if (el.id == this.floor) {
  280. this.floorName = el.name
  281. }
  282. })
  283. }
  284. let FloorID = this.floor ? this.floor : this.$cookie.get('floorMapId') || 'f1'
  285. let categoryId = this.categoryId ? this.categoryId : this.$cookie.get('categoryId')
  286. const { conf } = window.__systemConf,
  287. { editerUrl } = conf
  288. let floorName = this.floorName ? this.floorName : this.$cookie.get('floorNow')
  289. let seq = this.$cookie.get('currentFloorId')
  290. let data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}&FloorName=${floorName}&fmapID=${this.fmapID}&seq=${seq}&token=${this.ssoToken}`
  291. let url = editerUrl + 'editer?' + encodeURIComponent(data)
  292. window.open(url, true)
  293. },
  294. // 编辑状态取消
  295. isShow2() {
  296. // if (this.showView != 2) {
  297. // this.$store.commit('SETSHOWVIEW', 1)
  298. // } else {
  299. // this.$store.commit('SETSHOWVIEW', 0)
  300. // }
  301. // this.show2 = !this.show2
  302. },
  303. handleSwich(val) {
  304. this.queryView(!val)
  305. },
  306. // 默认隐藏为0的项目
  307. handleSwich2(val) {
  308. this.editSwitch = val
  309. this.queryEditNum(!this.editSwitch)
  310. },
  311. queryViewMethods() {},
  312. // 查询图例
  313. queryView(flag) {
  314. let postParams = {}
  315. let data = {
  316. categoryId: this.$cookie.get('categoryId'),
  317. graphId: this.$cookie.get('graphId'),
  318. projectId: this.$store.state.plazaId,
  319. flag: flag,
  320. buildingId: '1',
  321. floorId: this.$store.state.currentFloor.gname
  322. }
  323. queryStatis({ data, postParams }).then(res => {
  324. this.loading = false
  325. let viewTable = []
  326. viewTable = res.data.Data ? res.data.Data : []
  327. this.$store.commit('SETLEGENDTABLE', viewTable)
  328. if (viewTable.length > 0) {
  329. viewTable.forEach(el => {
  330. if (el.Name == '主要设备房') {
  331. this.planNum = el.Num
  332. }
  333. if (el.type == 'Image') {
  334. this.typeNum = el.Num
  335. }
  336. })
  337. }
  338. this.$nextTick(() => {
  339. if (this.$refs.viewLengend) {
  340. this.$refs.viewLengend.setSelected()
  341. }
  342. })
  343. })
  344. },
  345. // 查询编辑状态图例
  346. queryEditNum(flag) {
  347. let postParams = {}
  348. let data = {
  349. categoryId: this.$cookie.get('categoryId'),
  350. graphId: this.$cookie.get('graphId'),
  351. projectId: this.$store.state.plazaId,
  352. flag: flag,
  353. buildingId: '1',
  354. floorId: this.$store.state.currentFloor.gname
  355. }
  356. queryStatis({ data, postParams }).then(res => {
  357. //console.log('编辑图例数', res)
  358. this.loading1 = false
  359. this.editTable = res.data.Data ? res.data.Data : []
  360. })
  361. },
  362. // 编辑数量
  363. queryEdit(val) {
  364. let arr = []
  365. if (val.length > 0) {
  366. val.forEach(el => {
  367. let obj = {
  368. BuildingId: '1',
  369. FloorId: this.$store.state.currentFloor.gname,
  370. ProjectId: this.plazaId,
  371. CategoryId: el.GraphCategoryId,
  372. GraphId: this.$cookie.get('graphId'),
  373. GraphElementId: el.GraphElementId,
  374. Num: el.Num
  375. }
  376. arr.push(obj)
  377. })
  378. }
  379. let params = {
  380. postParams: {
  381. Content: arr
  382. }
  383. }
  384. updateStatis(params).then(res => {
  385. if (res.Result == 'success') {
  386. //console.log('更新图例', res)
  387. this.$message({
  388. message: '操作成功',
  389. type: 'success'
  390. })
  391. this.$store.commit('SETSHOWVIEW', 1)
  392. // this.queryEditNum(this.editSwitch)
  393. } else {
  394. this.$message({
  395. message: '操作失败',
  396. type: 'error'
  397. })
  398. }
  399. })
  400. },
  401. saveNum(val) {
  402. if (val.length > 0) {
  403. val.forEach(element => {
  404. element.Modify = element.IsModify
  405. })
  406. this.queryEdit(val)
  407. // this.isShow2()
  408. } else {
  409. // this.show2 = false
  410. // this.isShow2()
  411. // this.queryEditNum(true)
  412. }
  413. },
  414. addFloor() {
  415. this.isFloor = true
  416. this.formatFloor()
  417. },
  418. // 新增楼层取消
  419. cancel() {
  420. this.isFloor = false
  421. },
  422. // 新增楼层确定
  423. determine() {
  424. this.isFloor = false
  425. this.goToEditer()
  426. },
  427. queryRemarksMethods() {},
  428. init() {
  429. // 图例
  430. bus.$on('queryViewMethods', () => {
  431. this.queryView(false)
  432. })
  433. // 备注
  434. bus.$on('queryRemarksMethods', res => {
  435. let remarksText = ''
  436. if (res) {
  437. // 返回有备注
  438. remarksText = res
  439. } else {
  440. if (this.planNum > 0 && this.typeNum > 1) {
  441. remarksText = `${this.text1}${this.text2}${res}`
  442. } else if (this.planNum > 0) {
  443. remarksText = `${this.text1}${res}`
  444. } else if (this.typeNum > 1) {
  445. remarksText = `${this.text2}${res}`
  446. } else {
  447. remarksText = ''
  448. }
  449. }
  450. this.$store.commit('SETREMARKSTEXT', remarksText)
  451. })
  452. }
  453. },
  454. mounted() {
  455. this.init()
  456. // 定时查询草稿箱数量
  457. this.getDraftNum() //首次查询
  458. this.timer = setInterval(() => {
  459. this.getDraftNum()
  460. }, this.interval)
  461. // 页面销毁前,清除定时器
  462. this.$once('hook:beforeDestroy', () => {
  463. clearInterval(this.timer)
  464. })
  465. }
  466. }
  467. </script>
  468. <style lang="less" scoped>
  469. @red: rgb(255, 0, 0); //红色
  470. .legend-container {
  471. position: relative;
  472. top: -15px;
  473. .legend {
  474. text-align: center;
  475. line-height: 44px;
  476. width: 44px;
  477. height: 44px;
  478. font-size: 14px;
  479. font-family: MicrosoftYaHei;
  480. color: rgba(2, 91, 170, 1);
  481. background: rgba(255, 255, 255, 1);
  482. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  483. border-radius: 2px;
  484. cursor: pointer;
  485. line-height: 44px;
  486. }
  487. .legend2 {
  488. text-align: center;
  489. line-height: 44px;
  490. cursor: pointer;
  491. width: 44px;
  492. height: 44px;
  493. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  494. border-radius: 2px;
  495. font-size: 14px;
  496. font-family: MicrosoftYaHei;
  497. color: rgba(255, 255, 255, 1);
  498. }
  499. .legend-tab {
  500. position: absolute;
  501. top: 0;
  502. right: 47px;
  503. .legend-table {
  504. padding: 16px;
  505. height: 546px;
  506. width: 385px;
  507. // width: 420px;
  508. overflow: auto;
  509. overflow: hidden;
  510. overflow-y: auto;
  511. position: relative;
  512. background: rgba(255, 255, 255, 1);
  513. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  514. border-radius: 2px;
  515. border: 1px solid rgba(228, 229, 231, 1);
  516. &::-webkit-scrollbar {
  517. display: none;
  518. }
  519. }
  520. .legend-table2 {
  521. padding: 16px;
  522. height: 356px;
  523. width: 385px;
  524. // width: 420px;
  525. overflow: auto;
  526. overflow: hidden;
  527. overflow-y: auto;
  528. position: relative;
  529. background: rgba(255, 255, 255, 1);
  530. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  531. border-radius: 2px;
  532. border: 1px solid rgba(228, 229, 231, 1);
  533. &::-webkit-scrollbar {
  534. display: none;
  535. }
  536. }
  537. }
  538. }
  539. .edit_map {
  540. position: fixed;
  541. bottom: 28px;
  542. z-index: 1;
  543. right: 28px;
  544. .edit-icon,
  545. .edit-icon2 {
  546. width: 48px;
  547. height: 48px;
  548. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  549. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
  550. border-radius: 50%;
  551. text-align: center;
  552. line-height: 48px;
  553. display: inline-block;
  554. img {
  555. line-height: 48px;
  556. width: 20px;
  557. height: 20px;
  558. margin-top: -4px;
  559. }
  560. }
  561. .edit-icon {
  562. cursor: pointer;
  563. }
  564. /** 右下角修改,角标样式 */
  565. .corner-con {
  566. position: relative;
  567. .corner {
  568. position: absolute;
  569. // right: -8px;
  570. // top: 0;
  571. // display: inline-block;
  572. // width: 18px;
  573. // height: 18px;
  574. right: 3px;
  575. top: 3px;
  576. display: inline-block;
  577. width: 8px;
  578. height: 8px;
  579. background: @red;
  580. border-radius: 90px;
  581. font-size: 12px;
  582. text-align: center;
  583. line-height: 18px;
  584. color: #fff;
  585. }
  586. }
  587. .bjtk {
  588. width: 40px;
  589. height: 40px;
  590. display: inline-block;
  591. text-align: center;
  592. background: rgba(255, 255, 255, 1);
  593. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  594. border-radius: 90px;
  595. line-height: 40px;
  596. font-size: 12px;
  597. margin: 0 auto;
  598. cursor: pointer;
  599. border: 1px solid #ccc;
  600. margin-left: 4px;
  601. margin-bottom: 8px;
  602. margin-top: 10px;
  603. display: none;
  604. }
  605. .tltk {
  606. margin-bottom: 10px;
  607. display: none;
  608. cursor: pointer;
  609. border: 1px solid #eee;
  610. }
  611. }
  612. .edit_map:hover .tltk {
  613. display: block;
  614. }
  615. .edit_map:hover .bjtk {
  616. display: block;
  617. }
  618. .edit_map1 {
  619. position: fixed;
  620. bottom: 28px;
  621. right: 30px;
  622. z-index: 1;
  623. width: 48px;
  624. height: 48px;
  625. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  626. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
  627. border-radius: 90px;
  628. text-align: center;
  629. img {
  630. display: block;
  631. margin-top: 12px;
  632. margin-left: 12px;
  633. }
  634. .select-floor {
  635. width: 288px;
  636. height: 220px;
  637. background: rgba(255, 255, 255, 1);
  638. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  639. border-radius: 2px;
  640. border: 1px solid rgba(228, 229, 231, 1);
  641. position: relative;
  642. right: 0;
  643. }
  644. }
  645. .select-floor {
  646. width: 288px;
  647. background: rgba(255, 255, 255, 1);
  648. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  649. border-radius: 2px;
  650. border: 1px solid rgba(228, 229, 231, 1);
  651. position: fixed;
  652. bottom: 26px;
  653. right: 84px;
  654. padding: 24px 24px 20px 24px;
  655. .p1 {
  656. font-size: 14px;
  657. font-family: MicrosoftYaHei;
  658. color: rgba(31, 36, 41, 1);
  659. line-height: 19px;
  660. }
  661. .p2 {
  662. margin-top: 8px;
  663. margin-bottom: 68px;
  664. }
  665. .p3 {
  666. display: flex;
  667. justify-content: flex-end;
  668. font-size: 14px;
  669. font-family: MicrosoftYaHei;
  670. line-height: 22px;
  671. text-align: center;
  672. span:nth-of-type(1) {
  673. width: 58px;
  674. height: 24px;
  675. background: rgba(255, 255, 255, 1);
  676. border: 1px solid rgba(195, 199, 203, 1);
  677. margin-right: 12px;
  678. border-radius: 2px;
  679. cursor: pointer;
  680. }
  681. span:nth-of-type(2) {
  682. width: 58px;
  683. height: 24px;
  684. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  685. border-radius: 2px;
  686. color: rgba(255, 255, 255, 1);
  687. border-radius: 2px;
  688. cursor: pointer;
  689. }
  690. }
  691. }
  692. </style>
  693. <style lang="less">
  694. .legend-container {
  695. .el-table thead {
  696. background: rgba(2, 91, 170, 0.1);
  697. }
  698. .el-table td,
  699. .el-table th {
  700. padding: 3px 0;
  701. }
  702. .el-checkbox__input.is-checked .el-checkbox__inner,
  703. .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  704. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  705. border-radius: 2px;
  706. }
  707. }
  708. </style>