index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714
  1. <template>
  2. <div class="my-vr">
  3. <div class="vr-left">
  4. <p class="left-title">{{Info.infos.RoomLocalName || Info.infos.RoomName}}-{{Info.infos.RoomLocalID || Info.infos.RoomID}}<span> 业务空间类型:{{Info.business_type || '--'}}</span></p>
  5. <p class="left-remark">所在位置:{{bdObjName}}-{{flObjName}}</p>
  6. <div class="box-content">
  7. <div class="box-left">
  8. <table>
  9. <tr class="RQ">
  10. <td>空间二维码</td>
  11. <td class="qr-code">
  12. <img :src="Info.infos.RoomQRCode?`/image-service/image-service/common/file_get?systemId=dataPlatform&key=${Info.infos.RoomQRCode}`:'/static/img/noimg.png'">
  13. <p class="download" v-if="Info.infos.RoomQRCode" @click="downloadFile(Info.infos.RoomQRCode)">下载</p>
  14. </td>
  15. </tr>
  16. <tr>
  17. <td>BIM模型中编码:</td>
  18. <td>{{Info.infos.BIMID || '--'}}</td>
  19. </tr>
  20. <tr>
  21. <td>空间功能区类型:</td>
  22. <td>{{Info.infos.RoomFuncType || '--'}}</td>
  23. </tr>
  24. <tr>
  25. <td>空间本地编码:</td>
  26. <td>{{Info.infos.RoomLocalID || '--'}}</td>
  27. </tr>
  28. <tr>
  29. <td>BIM模型中坐标:</td>
  30. <td>{{Info.infos.BIMLocation || '--'}}</td>
  31. </tr>
  32. <tr>
  33. <td>进深:</td>
  34. <td>{{Info.infos.Depth || '--'}} m</td>
  35. </tr>
  36. <tr>
  37. <td>面宽:</td>
  38. <td>{{Info.infos.Width || '--'}} m</td>
  39. </tr>
  40. <tr>
  41. <td>高度:</td>
  42. <td>{{Info.infos.Height || '--'}} m</td>
  43. </tr>
  44. <tr>
  45. <td>建筑面积:</td>
  46. <td>{{Info.infos.BuildArea || '--'}} m²</td>
  47. </tr>
  48. <tr>
  49. <td>使用面积</td>
  50. <td>{{Info.infos.NetArea || '--'}} m²</td>
  51. </tr>
  52. <tr>
  53. <td>配电容量:</td>
  54. <td>{{Info.infos.ElecCap || '--'}} A</td>
  55. </tr>
  56. <tr>
  57. <td>租赁业态类型:</td>
  58. <td>{{Info.infos.TenantType || '--'}}</td>
  59. </tr>
  60. <tr>
  61. <td>所属租户:</td>
  62. <td>{{Info.infos.Tenant || '--'}}</td>
  63. </tr>
  64. </table>
  65. <p class="more" @click="getMoreInfo(Info)">查看更多<img src="/static/img/more.png"></p>
  66. </div>
  67. <div class="box-right" >
  68. <div class="pic-con">
  69. <div id="container" v-if="Info.infos.Pic">
  70. </div>
  71. <div class="no-right" v-else>
  72. <img src="/static/img/no_pic.png" alt="">
  73. <p>暂无图片</p>
  74. </div>
  75. </div>
  76. <div class="swip-container" v-if="Info.infos.Pic && Info.infos.Pic.length>0" >
  77. <pic-swipe :list='Info.infos.Pic' @onClick="draw">
  78. </pic-swipe>
  79. </div>
  80. <div class="swip-container" v-else>
  81. <div>
  82. <img src="/static/img/no_pic.png" alt="">
  83. <br/><br/>
  84. <p>暂无图片</p>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="box-bottom">
  90. <Collapse v-model="panelValue" accordion @on-change='getTableData'>
  91. <Panel name="1" >
  92. 空间内设备
  93. <p slot="content" v-if="tableData">
  94. <eq-table :tableData='tableData'></eq-table>
  95. </p>
  96. </Panel>
  97. <Panel name="2">
  98. 服务于空间设备
  99. <p slot="content" v-if="serveData">
  100. <serve-table :serveData='serveData'></serve-table>
  101. </p>
  102. </Panel>
  103. </Collapse>`
  104. </div>
  105. </div>
  106. <div class="vr-right">
  107. <eq-right :Info='Info' :envData='envData' :noAlarmNum='noAlarmNum' :ElecConsumPData='ElecConsumPData'
  108. :AccElecConsumData="AccElecConsumData" :orderCount='orderCount' :moniData='moniData'></eq-right>
  109. </div>
  110. <div class="mask-bg"></div>
  111. <div class="mask">
  112. <message-modal @close='close' :isQR='isQR'></message-modal>
  113. </div>
  114. </div>
  115. </template>
  116. <script>
  117. import PicSwipe from './PicSwipe'
  118. import eqTable from './EqTable'
  119. import eqRight from './EqRight'
  120. import messageModal from '../spread/MessageModal'
  121. import {formatCodetoClass} from '../../tools/formatData.js'
  122. import {currentTime} from '../../tools/currentDate.js'
  123. import serveTable from './serveTable'
  124. import axios from 'axios'
  125. export default {
  126. components: {
  127. PicSwipe,
  128. eqTable,
  129. eqRight,
  130. messageModal,
  131. serveTable
  132. },
  133. mixins: [],
  134. props: {
  135. },
  136. data () {
  137. return {
  138. panelValue: '',
  139. tableData: [],
  140. serveData: [],
  141. Info: {
  142. business_type: "--",
  143. infos: {
  144. RoomLocalName: '--',
  145. RoomLocalID: '--',
  146. RoomQRCode: '',
  147. BIMID: '--',
  148. RoomFuncType: '--',
  149. BIMLocation: '--',
  150. Depth: '--',
  151. Width: '--',
  152. Height: '--',
  153. BuildArea: '--',
  154. NetArea: '--',
  155. ElecCap: '--',
  156. TenantType: '--',
  157. Tenant: '--',
  158. Pic: []
  159. },
  160. location: {
  161. building: '--',
  162. floor: '--'
  163. }
  164. },
  165. bdObjName: "--",
  166. flObjName: "--",
  167. isQR: '',
  168. objectId: 'Sp1101080001001003001',
  169. ElecConsumPData: "", // 耗电功率
  170. AccElecConsumData: "", // 累计用电量
  171. orderCount: 0, // 工单
  172. moniData: 0, // 摄像头的数量
  173. envData: {
  174. Tdb: "--",
  175. RH: "--",
  176. CO: "--",
  177. PM: "--"
  178. },
  179. noAlarmNum: 0
  180. }
  181. },
  182. computed: {
  183. },
  184. mounted () {
  185. this.getEqNameAndId()
  186. // this.initData()
  187. // this.searchBuildingName()
  188. // this.noRecoverAlarm()
  189. // this.envInfo()
  190. // this.getCurrentData()
  191. // this.underwayOrder()
  192. // this.getMoniCount()
  193. },
  194. methods: {
  195. getEqNameAndId () {
  196. let hostUrl = location.search
  197. this.objectId = hostUrl.split("&")[0].toString().split("=")[1]
  198. let pid = hostUrl.split("&")[1].toString().split("=")[1]
  199. let secret = ''
  200. if(hostUrl.split("&")[2]){
  201. secret = hostUrl.split("&")[2].toString().split("=")[1]
  202. }
  203. console.log(pid, this.$store.state.projId)
  204. this.$store.commit('setProId', pid)
  205. this.$store.commit(`setSecret`, secret)
  206. this.initData(this.objectId)
  207. this.searchBuildingName(this.objectId)
  208. this.noRecoverAlarm(this.objectId)
  209. this.envInfo(this.objectId)
  210. this.getCurrentData(this.objectId)
  211. this.underwayOrder(this.objectId)
  212. this.getMoniCount(this.objectId)
  213. },
  214. // 右侧耗电功率和累计用电量的统计
  215. getCurrentData (objectId) {
  216. let params = {
  217. criterias: [
  218. {
  219. id: objectId,
  220. code: "ElecConsumP"
  221. },
  222. {
  223. id: objectId,
  224. code: "AccElecConsum"
  225. }
  226. ]
  227. }
  228. axios.post(`/data-platform-3/data-platform-3/parameter/batch_query_param?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  229. let data = res.data
  230. if (data.Result == 'success') {
  231. let content = data.Content
  232. content.forEach(el => {
  233. if (el.code == 'ElecConsumP') {
  234. this.ElecConsumPData = el.data
  235. }
  236. if (el.code == 'AccElecConsum') {
  237. this.AccElecConsumData = el.data
  238. }
  239. })
  240. }
  241. })
  242. },
  243. // 右侧进行中的工单
  244. underwayOrder (objectId) {
  245. let params = {
  246. order_state: "5",
  247. space_ids: [objectId],
  248. user_id: "systemId",
  249. project_id: this.$store.state.projId,
  250. start_time: "20180101000000",
  251. end_time: currentTime(new Date())
  252. }
  253. axios.post(`/workorder/workorder/restWorkOrderService/queryWorkOrderList`, params).then(res => {
  254. let data = res.data
  255. this.orderCount = data.Count
  256. })
  257. },
  258. // 摄像头数量
  259. getMoniCount (objectId) {
  260. let params = {
  261. id: objectId
  262. }
  263. axios.post(`/api/front-api/monitor/list?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  264. let data = res.data
  265. if (data.Result == 'success') {
  266. this.moniData = data.count
  267. }
  268. })
  269. },
  270. // 空间建筑的名称查询
  271. searchBuildingName (objectId) {
  272. let params = {
  273. keywords: [],
  274. category: ['SpObj'],
  275. limit: 1,
  276. ids: [objectId]
  277. }
  278. axios.post(`/data-platform-3/data-platform-3/object/search?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  279. let data = res.data
  280. if (data.Result == 'success') {
  281. if (data.Content.length > 0) {
  282. this.bdObjName = data.Content[0].bdObjName ? data.Content[0].bdObjName : "--"
  283. this.flObjName = data.Content[0].flObjName ? data.Content[0].flObjName : "--"
  284. } else {
  285. this.bdObjName = '--'
  286. this.this.flObjName = '--'
  287. }
  288. }
  289. })
  290. },
  291. // 未恢复的报警条数
  292. noRecoverAlarm (objectId) {
  293. let params = {
  294. criteria: {
  295. objectId: objectId,
  296. status: 'alalrm'
  297. }
  298. }
  299. axios.post(`/alarm-system/alarm-system/alarm/list?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  300. let data = res.data
  301. if (data.Result == 'success') {
  302. this.noAlarmNum = data.Count
  303. }
  304. })
  305. },
  306. // c02等信息
  307. envInfo (objectId) {
  308. let params = {
  309. criterias: [
  310. { id: objectId, code: 'Tdb' },
  311. { id: objectId, code: 'RH' },
  312. { id: objectId, code: 'CO2' },
  313. { id: objectId, code: 'PM2.5' }
  314. ]
  315. }
  316. axios.post(`/data-platform-3/data-platform-3/parameter/batch_query_param?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  317. let data = res.data
  318. if (data.Result == 'success') {
  319. let info = data.Content
  320. info.forEach(el => {
  321. if (el.code == 'Tdb') {
  322. this.envData.Tdb = el.data ? el.data.toFixed(2) : '--'
  323. }
  324. if (el.code == 'RH') {
  325. this.envData.RH = el.data ? el.data.toFixed(2) : '--'
  326. }
  327. if (el.code == 'CO2') {
  328. this.envData.CO = el.data ? el.data.toFixed(2) : '--'
  329. }
  330. if (el.code == 'PM2.5') {
  331. this.envData.PM = el.data ? el.data.toFixed(2) : '--'
  332. }
  333. })
  334. }
  335. })
  336. },
  337. // 获取数据信息
  338. initData (objectId) {
  339. let params = {
  340. criterias: [
  341. {id: objectId}
  342. ]
  343. }
  344. axios.post(`/data-platform-3/data-platform-3/object/batch_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  345. let data = res.data
  346. if (data.Result == 'success') {
  347. this.Info = data.Content[0]
  348. console.log(this.Info)
  349. if (this.Info.infos.Pic) {
  350. this.draw(this.Info.infos.Pic[0].key)
  351. }
  352. }
  353. })
  354. },
  355. // 设备建筑查询
  356. searchEqBuild (idArr) {
  357. let params = {
  358. keywords: [],
  359. category: ['EqObj'],
  360. limit: idArr.length,
  361. ids: idArr
  362. }
  363. axios.post(`/data-platform-3/data-platform-3/object/search?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  364. let data = res.data
  365. if (data.Result == 'success') {
  366. let bdObjName, flObjName
  367. if (data.Content.length > 0) {
  368. bdObjName = data.Content[0].bdObjName ? data.Content[0].bdObjName : "--"
  369. flObjName = data.Content[0].flObjName ? data.Content[0].flObjName : "--"
  370. } else {
  371. bdObjName = '--'
  372. flObjName = '--'
  373. }
  374. this.serveData.forEach(el => {
  375. el.eqName = el.infos.EquipLocalName || '--'
  376. el.eqId = el.infos.EquipLocalID || '--'
  377. // el.category = (el.category) // youwenti
  378. el.category = formatCodetoClass(this.$store.state.equipmentAll, el.category) // youwenti
  379. el.location = bdObjName + flObjName
  380. el.alarmLength = el.alarmLength ? el.alarmLength : 0
  381. })
  382. }
  383. })
  384. },
  385. // 空间内设备
  386. getTableData (key) {
  387. let params = {
  388. criteria: {
  389. graphType: 'EquipinSpace',
  390. relType: '1',
  391. toId: this.objectId, // 空间id
  392. side: 'fromId'
  393. }
  394. }
  395. if (key[0] == 1) {
  396. params.criteria.graphType = 'EquipinSpace'
  397. axios.post(`/data-platform-3/data-platform-3/object/rel_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  398. let data = res.data
  399. if (data.Result == 'success') {
  400. this.tableData = data.Content
  401. this.equipInSpace()
  402. }
  403. })
  404. } else {
  405. params.criteria.graphType = 'EquipforSpace'
  406. axios.post(`/data-platform-3/data-platform-3/object/rel_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  407. let data = res.data
  408. if (data.Result == 'success') {
  409. this.serveData = data.Content
  410. if (this.serveData.length > 0) {
  411. let idArr = []
  412. this.serveData.forEach(el => {
  413. idArr.push(el.id)
  414. })
  415. this.equipForSpace()
  416. this.searchEqBuild(idArr)
  417. }
  418. }
  419. })
  420. }
  421. },
  422. // 服务于空间设备未恢复的报警条数
  423. equipInSpace () {
  424. let params = {
  425. spaceId: this.objectId // 空间id
  426. }
  427. axios.post(`/alarm-system/alarm-system/alarm/equipInSpace/query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  428. let data = res.data
  429. if (data.Result == 'success') {
  430. let alarm = data.Content
  431. if (alarm.length > 0) {
  432. alarm.map(j => {
  433. this.tableData.map(i => {
  434. if (i.infos.EquipID == j.equipmentId) {
  435. i.alarmLength = j.alarmList ? j.alarmList.length : 0
  436. }
  437. })
  438. })
  439. }
  440. this.tableData.forEach(el => {
  441. el.eqName = el.infos.EquipLocalName || '--'
  442. el.eqId = el.infos.EquipLocalID || '--'
  443. // el.category = (el.category) // youwenti
  444. el.category = formatCodetoClass(this.$store.state.equipmentAll, el.category) // youwenti
  445. el.location = el.location ? el.location.building : '--' // youwenti
  446. el.alarmLength = el.alarmLength ? el.alarmLength : 0
  447. })
  448. }
  449. })
  450. },
  451. //
  452. equipForSpace () {
  453. let params = {
  454. spaceId: this.objectId // 空间id
  455. }
  456. axios.post(`/alarm-system/alarm-system/alarm/equipForSpace/query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  457. let data = res.data
  458. if (data.Result == 'success') {
  459. let alarm = data.Content
  460. if (alarm.length > 0) {
  461. this.serveData = this.serveData.map(i => {
  462. alarm.map(j => {
  463. if (i.infos.EquipID == j.equipmentId) {
  464. i.alarmLength = j.alarmList ? j.alarmList.length : 0
  465. }
  466. })
  467. })
  468. }
  469. }
  470. })
  471. },
  472. // 查看更多的点击事件
  473. getMoreInfo (Info) {
  474. this.$router.push({path: 'detail', query: {obj: JSON.stringify(Info)}})
  475. },
  476. // 查看全景图
  477. draw (key) {
  478. var div = document.getElementById('container')
  479. // let baseUrl = this.$store.state.baseUrl
  480. // eslint-disable-next-line
  481. var PSV = new PhotoSphereViewer({
  482. panorama: `/image-service/image-service/common/image_get?systemId=dataPlatform&key=${key}`,
  483. container: div,
  484. time_anim: false,
  485. navbar: true,
  486. size: {
  487. width: '100%',
  488. height: '440px'
  489. }
  490. })
  491. },
  492. // 下载弹框
  493. downloadFile (isQR) {
  494. this.isQR = isQR
  495. document.querySelector('body').style.overflow = 'hidden'
  496. document.querySelector('.mask-bg').style.display = 'block'
  497. document.querySelector('.mask').style.display = 'block'
  498. },
  499. close () {
  500. document.querySelector('body').style.overflow = 'auto'
  501. document.querySelector('.mask-bg').style.display = 'none'
  502. document.querySelector('.mask').style.display = 'none'
  503. }
  504. }
  505. }
  506. </script>
  507. <style scoped lang="less" >
  508. .my-vr {
  509. font-size: 16px;
  510. margin: 0;
  511. display: flex;
  512. .vr-left {
  513. width: 78%;
  514. min-width: 900px;
  515. background: #fff;
  516. box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
  517. border-radius: 2px;
  518. margin-right: 20px;
  519. padding:20px 20px 0 20px;
  520. .left-title {
  521. font-size: 18px;
  522. font-weight: bold;
  523. color: #212830;
  524. >span {
  525. font-size: 14px;
  526. display: inline-block;
  527. color: #6D747C;
  528. width: 248px;
  529. height: 28px;
  530. line-height: 28px;
  531. padding-left: 20px;
  532. margin-left: 34px;
  533. }
  534. }
  535. .left-remark {
  536. font-size: 14px;
  537. display: inline-block;
  538. color: #6D747C;
  539. background: #F4F6FE;
  540. height: 28px;
  541. line-height: 28px;
  542. padding-left: 20px;
  543. margin: 10px 0;
  544. }
  545. .box-content {
  546. width: 100%;
  547. display: flex;
  548. .box-left {
  549. width:30%;
  550. min-width: 250px;
  551. background: #F5F5F5;
  552. border-radius: 2px;
  553. margin-right: 20px;
  554. display: inline-block;
  555. position: relative;
  556. .more {
  557. position: absolute;
  558. font-size: 16px;
  559. color: #6682E6;
  560. bottom: 13px;
  561. right: 20px;
  562. cursor: pointer;
  563. }
  564. tr {
  565. td {
  566. padding-left:20px;
  567. padding-top: 8px;
  568. font-size: 14px;
  569. color: #6D747C;
  570. line-height: 24px;
  571. word-break: break-word;
  572. >img{
  573. width:90px;
  574. height: 90px;
  575. }
  576. .download {
  577. font-size: 14px;
  578. color: #6682E6;
  579. cursor: pointer;
  580. padding-left:10px;
  581. }
  582. }
  583. }
  584. .RQ {
  585. >td {
  586. vertical-align: top;
  587. }
  588. .qr-code {
  589. position: relative;
  590. >img:hover + .download {
  591. opacity: 1;
  592. }
  593. .download {
  594. position: absolute;
  595. bottom: 0;
  596. background: rgba(255, 255, 255, .9);
  597. width: 80px;
  598. height: 30px;
  599. line-height: 30px;
  600. z-index: 10;
  601. text-align: center;
  602. color: #6682E6;
  603. font-size: 14px;
  604. cursor: pointer;
  605. opacity: 0;
  606. }
  607. }
  608. }
  609. }
  610. .no-right{
  611. width: 100%;
  612. background: #F5F5F5;
  613. border-radius: 2px;
  614. height: 440px;
  615. display: flex;
  616. justify-content: center;
  617. align-items: center;
  618. flex-direction: column;
  619. }
  620. .box-right {
  621. display: inline-block;
  622. width: 70%;
  623. background: #fff;
  624. border-radius: 2px;
  625. .pic-con {
  626. background: #F5F5F5;
  627. color:#6D747C;
  628. #container {
  629. width: 100%;
  630. height: 500px;
  631. display: flex;
  632. justify-content: center;
  633. align-items: center;
  634. cursor: pointer;
  635. }
  636. }
  637. .swip-container{
  638. margin-top: 20px;
  639. >div{
  640. width:180px;
  641. height: 152px;
  642. background: #F5F5F5;
  643. border-radius: 2px;
  644. text-align: center;
  645. padding-top: 35px;
  646. color: #6D747C;
  647. }
  648. }
  649. }
  650. }
  651. .box-bottom{
  652. margin:40px 0;
  653. }
  654. }
  655. .vr-right{
  656. width:21%;
  657. border-radius: 2px;
  658. display: inline-block;
  659. }
  660. .mask-bg{
  661. position: fixed;
  662. top: 0;
  663. bottom: 0;
  664. left: 0;
  665. right: 0;
  666. z-index: 99;
  667. background:rgba(0, 0, 0, .6);
  668. display: none;
  669. }
  670. .mask {
  671. width: 860px;
  672. height: 458px;
  673. background: #fff;
  674. position: fixed;
  675. z-index: 999;
  676. top: 120px;
  677. left: 30%;
  678. display: none;
  679. }
  680. }
  681. </style>
  682. <style lang="less">
  683. .my-vr {
  684. .box-bottom{
  685. // .ivu-collapse-content{
  686. // padding:0;
  687. // }
  688. .ivu-icon-ios-arrow-forward {
  689. float: right;
  690. margin-top: 10px;
  691. transform: rotate(-90deg);
  692. }
  693. .ivu-collapse>.ivu-collapse-item>.ivu-collapse-header{
  694. background: #F4F5F8;
  695. border-radius: 2px;
  696. }
  697. }
  698. }
  699. </style>