Map.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750
  1. <template>
  2. <div class="map-comp-wrapper">
  3. <BigScreenMap
  4. :GZData="[]"
  5. :fixed="1"
  6. ref="map"
  7. :overlayShow = "true"
  8. :visible-layer-ids="visibleLayerIds"
  9. ></BigScreenMap>
  10. <div class="btn" @click="showConfig">
  11. <img src="@/assets/images/config.png" alt="">
  12. <span>要素配置模拟</span>
  13. </div>
  14. <div class="btn" @click="showZxRes" style="top: 50px;">
  15. <img src="@/assets/images/config.png" alt="">
  16. <span>提质增效</span>
  17. </div>
  18. <div class="btn" @click="clear" style="top: 90px;">
  19. <img src="@/assets/images/config.png" alt="">
  20. <span>清空</span>
  21. </div>
  22. <div class="pop-content" v-show="configShow">
  23. <div class="pop-title-wrapper">
  24. <div class="title-label-wrapper">要素配置模拟</div>
  25. <div class="pop-close-wrapper" @click="configShow=false">关闭 <img src="@/assets/images/GyzzView/close.png" class="close-icon"/> </div>
  26. </div>
  27. <div class="pop-top">
  28. <div class="top-name">
  29. 要素总面积
  30. </div>
  31. <div class="top-des">
  32. <span class="des-title">潜力资源</span>
  33. <span class="des-val">{{baseData.wlyd}}
  34. <span class="des-unit">亩</span>
  35. </span>
  36. </div>
  37. </div>
  38. <div class="pop-table">
  39. <table>
  40. <tr class="table-head">
  41. <td>序号</td>
  42. <td>行业</td>
  43. <td>配置面积</td>
  44. </tr>
  45. <tr v-for="(item,index) in hyData" :key="index">
  46. <td>{{index+1}}</td>
  47. <td>{{item.title}}</td>
  48. <td>
  49. <el-input v-model="areas['area'+(index+1)]"></el-input>亩
  50. </td>
  51. </tr>
  52. </table>
  53. </div>
  54. <div class="pop-bottom">
  55. <div class="pop-btn" @click="calculate">确定</div>
  56. <div class="pop-btn" style="background: #2C6FC4;color: #C9DEFF;">清除</div>
  57. </div>
  58. </div>
  59. <div class="res-content" v-if="resShow">
  60. <div class="res-title">模拟结果
  61. <img src="@/assets/images/GyzzView/c.png" class="c-icon" @click="resShow=false"/>
  62. </div>
  63. <div class="res-content-wrapper">
  64. <LineTextComp2
  65. v-for="(item,index) in resultList"
  66. :key="index"
  67. :title="item.title"
  68. :color="item.color"
  69. :val="item.val"
  70. :unit="item.unit"
  71. updown="up"
  72. :updownVal="item.upVal"
  73. :updownUnit="item.upUnit"></LineTextComp2>
  74. </div>
  75. </div>
  76. <!--单个配置模拟-->
  77. <div class="pop-content" v-if="singleConfigShow">
  78. <div class="pop-title-wrapper">
  79. <div class="title-label-wrapper">要素配置模拟</div>
  80. <div class="pop-close-wrapper" @click="singleConfigShow=false">关闭 <img src="@/assets/images/GyzzView/close.png" class="close-icon"/> </div>
  81. </div>
  82. <div class="pop-top">
  83. <div class="top-name">
  84. 要素面积
  85. </div>
  86. <div class="top-des" style="width: 150px;text-align: center;">
  87. <span class="des-val" v-show="mockLand['mj']">
  88. {{Number(mockLand['mj']*15).toFixed(2)}}
  89. <span class="des-unit">亩</span>
  90. </span>
  91. <span class="des-val" v-show="mockLand['txmj']">
  92. {{Number(mockLand['txmj']*0.0015).toFixed(2)}}
  93. <span class="des-unit">亩</span>
  94. </span>
  95. <span class="des-val" v-show="mockLand['总用地面积']">
  96. {{Number(mockLand['总用地面积']*0.0015).toFixed(2)}}
  97. <span class="des-unit">亩</span>
  98. </span>
  99. </div>
  100. </div>
  101. <div class="pop-table">
  102. <el-radio-group v-model="selectHy">
  103. <table>
  104. <tr class="table-head">
  105. <td></td>
  106. <td>序号</td>
  107. <td>行业</td>
  108. </tr>
  109. <tr v-for="(item,index) in hyData" :key="index">
  110. <td><el-radio :label="item.title"></el-radio></td>
  111. <td>{{index+1}}</td>
  112. <td>{{item.title}}</td>
  113. </tr>
  114. </table>
  115. </el-radio-group>
  116. </div>
  117. <div class="pop-bottom">
  118. <div class="pop-btn" @click="singleCalculate">确定</div>
  119. <!-- <div class="pop-btn" style="background: #2C6FC4;color: #C9DEFF;">清除</div>-->
  120. </div>
  121. </div>
  122. </div>
  123. </template>
  124. <script>
  125. import BigScreenMap from "@/views/components/BigScreenMap";
  126. import LineTextComp2 from "@/views/components/LineTextComp2";
  127. export default {
  128. name: "Map",
  129. components:{BigScreenMap,LineTextComp2},
  130. props: {
  131. obj: {
  132. type: Object,
  133. default: () => {}
  134. }
  135. },
  136. data() {
  137. return {
  138. visibleLayerIds: [''],
  139. configShow:false,
  140. baseData:{},
  141. landInfo:{},
  142. hyData:[],
  143. areas:{
  144. area1:0,
  145. area2:0,
  146. },
  147. resShow:false,
  148. resultList:[
  149. {
  150. title:'工业用地',
  151. val:0,
  152. unit:'亩',
  153. upVal:0,
  154. upUnit:'亩'
  155. }
  156. ],
  157. singleConfigShow:false,
  158. selectHy: '',
  159. xzqVal: '330108'
  160. }
  161. },
  162. created() {
  163. this.$vm.$on('getBjMockDetail',(props)=>{
  164. this.mockLand = props
  165. this.singleConfigShow=true
  166. })
  167. },
  168. mounted() {
  169. this.changeXzq();
  170. this.$vm.$on("getBaseData",(payload)=>{
  171. this.baseData=payload
  172. })
  173. this.$vm.$on("getLandInfo",(payload)=>{
  174. this.landInfo=payload
  175. })
  176. this.$vm.$on("getmjxyData",(payload)=>{
  177. this.mjxyData=payload
  178. })
  179. this.$vm.$on("getHyData",(payload)=>{
  180. if (payload.length!=0){
  181. this.hyData = payload.slice(0,2)
  182. console.log(this.hyData,'hy');
  183. }
  184. })
  185. this.$vm.$on('getTzzxDetail',(props)=>{
  186. this.tzzxLand = props
  187. this.showTzzxSingleRes()
  188. })
  189. //监听图层改变事件
  190. this.$vm.$on("setVisibleLayerIdEvent", (visibleLayerId) => {
  191. this.visibleLayerIds = ['']
  192. this.visibleLayerIds[0] = visibleLayerId
  193. })
  194. this.$vm.$on("showMoreLayer", ids => {
  195. this.visibleLayerIds = ids
  196. })
  197. //热力图
  198. this.$vm.$on("setHotLayer", (field) => {
  199. this.$refs.map.initHotLayer(field)
  200. })
  201. this.$vm.$on("removeHotLayer", () => {
  202. this.$refs.map.removeHotLayer()
  203. })
  204. this.$vm.$emit("setLayerIdEvent", 'bj-xz');
  205. this.$vm.$emit("location-mask-feature", { dzjgh: this.obj.name });
  206. // this.$vm.$emit("location-mask-feature", { dzjgh: '杭州国家高新技术产业开发区管委会(滨江区)' });
  207. this.$vm.$on("changeLayer", payload => {
  208. const {id,param} = payload
  209. let params = {
  210. layers: "show:0,1",
  211. layerDefs: {
  212. "0": param,
  213. "1": param
  214. }
  215. }
  216. let layer = this.$refs.map.getLayerById(id)
  217. layer.setVisible(true)
  218. const source = layer.getSource()
  219. source.updateParams(params)
  220. });
  221. this.$vm.$on("changeLayer2", payload => {
  222. const {id,params} = payload
  223. let layer = this.$refs.map.getLayerById(id)
  224. layer.setVisible(true)
  225. const source = layer.getSource()
  226. source.updateParams(params)
  227. });
  228. //TODO 为了将切片服务展示清楚
  229. // setTimeout(()=>{
  230. // this.$refs.map.map.getView().setZoom(this.$refs.map.map.getView().getZoom()-0.8)
  231. // },500)
  232. },
  233. methods:{
  234. clear(){
  235. this.resShow=false
  236. this.$vm.$emit('zxShow',false)
  237. this.$vm.$emit('getHyCalRes',{})
  238. this.$vm.$emit('getBaseCalRes', {})
  239. },
  240. changeXzq () {
  241. this.$nextTick(() => {
  242. this.$vm.$emit("location-mask-self-where", { layerId: 'xzqh-x-search', where: `xzqdm = '${this.xzqVal}'` });
  243. })
  244. },
  245. showZxRes(){
  246. const loading = this.$loading({
  247. lock: true,
  248. text: '计算中...',
  249. spinner: 'el-icon-loading',
  250. background: 'rgba(0, 0, 0, 0.7)'
  251. });
  252. setTimeout(()=>{
  253. loading.close();
  254. this.$vm.$emit('zxShow',true)
  255. this.resShow=true
  256. this.resultList=[]
  257. this.$set(this.resultList,0,{
  258. title:'盘活低效用地',
  259. val:this.mjxyData.mjdx,
  260. unit:'亩',
  261. upVal:this.mjxyData.mjdx,
  262. upUnit:'亩',
  263. color:'#68F4C1'
  264. })
  265. this.$set(this.resultList,1,{
  266. title:'税收',
  267. val:this.landInfo.ss_after,
  268. unit:'亿元',
  269. upVal:this.landInfo.add_ss,
  270. upUnit:'亿元',
  271. color:'#FFC47E'
  272. })
  273. this.$set(this.resultList,2,{
  274. title:'亩均税收',
  275. val:this.landInfo.mjss_after,
  276. unit:'万元/亩',
  277. upVal:this.landInfo.add_mjss,
  278. upUnit:'万元/亩',
  279. color:'#4ADEFF'
  280. })
  281. },1000)
  282. },
  283. calculate(){
  284. const loading = this.$loading({
  285. lock: true,
  286. text: '计算中...',
  287. spinner: 'el-icon-loading',
  288. background: 'rgba(0, 0, 0, 0.7)'
  289. });
  290. setTimeout(() => {
  291. loading.close();
  292. let money1 = 0,money2=0,addMoney1=0,addMoney2=0;
  293. if (this.areas.area1!='0'){
  294. money1 = (this.hyData[0].money/this.hyData[0].area)*(this.hyData[0].area+Number(this.areas.area1))
  295. addMoney1=money1 - this.hyData[0].money
  296. }
  297. if (this.areas.area2!='0'){
  298. money2 = (this.hyData[1].money/this.hyData[1].area)*(this.hyData[1].area+Number(this.areas.area2))
  299. addMoney2 =money2 - this.hyData[1].money
  300. }
  301. let hyMoneyList={
  302. money1,money2,addMoney1,addMoney2,
  303. area1:Number(this.areas.area1),
  304. area2:Number(this.areas.area2)
  305. }
  306. this.$vm.$emit('getHyCalRes',hyMoneyList)
  307. let addSs = addMoney1+addMoney2
  308. let addMjss = (Number(this.landInfo.ss)+addSs)*10000/this.landInfo.gyyd - this.landInfo.mjss
  309. let baseMoneyList={addSs,addMjss}
  310. this.$vm.$emit('getBaseCalRes',baseMoneyList)
  311. //结果展示
  312. this.resShow=true
  313. this.resultList=[]
  314. this.$set(this.resultList,0,{
  315. title:'工业用地',
  316. val:(this.landInfo.gyyd+Number(this.areas.area1)+Number(this.areas.area2)).toFixed(0),
  317. unit:'亩',
  318. upVal:(Number(this.areas.area1)+Number(this.areas.area2)).toFixed(0),
  319. upUnit:'亩',
  320. color:'#68F4C1'
  321. })
  322. this.$set(this.resultList,1,{
  323. title:'税收',
  324. val:(Number(this.landInfo.ss)+addSs).toFixed(2),
  325. unit:'亿元',
  326. upVal:addSs.toFixed(2),
  327. upUnit:'亿元',
  328. color:'#FFC47E'
  329. })
  330. this.$set(this.resultList,2,{
  331. title:'亩均税收',
  332. val:(Number(this.landInfo.mjss)+addMjss).toFixed(2),
  333. unit:'万元/亩',
  334. upVal:addMjss.toFixed(2),
  335. upUnit:'万元/亩',
  336. color:'#4ADEFF'
  337. })
  338. this.$set(this.resultList,3,{
  339. title:this.hyData[0].title,
  340. val:(Number(this.hyData[0].money)+addMoney1).toFixed(2),
  341. unit:this.hyData[0].moneyUnit,
  342. upVal:addMoney1.toFixed(2),
  343. upUnit:this.hyData[0].moneyUnit,
  344. color:this.hyData[0].color
  345. })
  346. this.$set(this.resultList,4,{
  347. title:this.hyData[1].title,
  348. val:(Number(this.hyData[1].money)+addMoney2).toFixed(2),
  349. unit:this.hyData[1].moneyUnit,
  350. upVal:addMoney2.toFixed(2),
  351. upUnit:this.hyData[1].moneyUnit,
  352. color:this.hyData[1].color
  353. })
  354. }, 1000);
  355. this.configShow=false
  356. },
  357. showTzzxSingleRes(){
  358. const loading = this.$loading({
  359. lock: true,
  360. text: '计算中...',
  361. spinner: 'el-icon-loading',
  362. background: 'rgba(0, 0, 0, 0.7)'
  363. });
  364. console.log(this.tzzxLand,11111);
  365. const urlApi = `/api/ybz/getBjSingleGyydInfo`;
  366. const formData = new FormData()
  367. formData.append('dkbh', this.tzzxLand['dksyh'])
  368. this.$ajax.post(urlApi, formData, this, false).then(res=>{
  369. let gyyd = res.data
  370. setTimeout(()=>{
  371. loading.close();
  372. this.resShow=true
  373. this.resultList=[]
  374. this.$set(this.resultList,0,{
  375. title:'盘活低效用地',
  376. val:(this.tzzxLand['sjydmj']*0.0015).toFixed(2),
  377. unit:'亩',
  378. upVal:(this.tzzxLand['sjydmj']*0.0015).toFixed(2),
  379. upUnit:'亩',
  380. color:'#68F4C1'
  381. })
  382. this.$set(this.resultList,1,{
  383. title:'税收',
  384. val:gyyd.sjsf_after.toFixed(2),
  385. unit:'万元',
  386. upVal:(gyyd.sjsf_after-this.tzzxLand['ss2022']).toFixed(2),
  387. upUnit:'万元',
  388. color:'#FFC47E'
  389. })
  390. this.$set(this.resultList,2,{
  391. title:'亩均税收',
  392. val:gyyd.mjss_after.toFixed(2),
  393. unit:'万元/亩',
  394. upVal:(gyyd.mjss_after-this.tzzxLand['mjss2022']).toFixed(2),
  395. upUnit:'万元/亩',
  396. color:'#4ADEFF'
  397. })
  398. },1000)
  399. })
  400. },
  401. singleCalculate(){
  402. const loading = this.$loading({
  403. lock: true,
  404. text: '计算中...',
  405. spinner: 'el-icon-loading',
  406. background: 'rgba(0, 0, 0, 0.7)'
  407. });
  408. setTimeout(() => {
  409. loading.close();
  410. let currentHyData;
  411. this.hyData.forEach(i=>{
  412. if (i.title==this.selectHy){
  413. currentHyData=i
  414. }
  415. })
  416. console.log(currentHyData,'currentHyData');
  417. console.log(this.mockLand,'this.mockLand');
  418. let mj;
  419. if (this.mockLand['SJYDMJ']) mj = Number(this.mockLand['SJYDMJ']*0.0015).toFixed(2)
  420. if (this.mockLand['mj']) mj = Number(this.mockLand['mj']*15).toFixed(2)
  421. if (this.mockLand['sjydmj']) mj = Number(this.mockLand['sjydmj']*0.0015).toFixed(2)
  422. if (this.mockLand['TBMJ']) mj = Number(this.mockLand['TBMJ']*0.0015).toFixed(2)
  423. if (this.mockLand['总用地面积']) mj = Number(this.mockLand['总用地面积']*0.0015).toFixed(2)
  424. //结果展示
  425. this.resShow=true
  426. this.resultList=[]
  427. this.$set(this.resultList,0,{
  428. title:'税收',
  429. val:(Number(currentHyData.money/currentHyData.area)*mj).toFixed(2),
  430. unit:'亿元',
  431. upVal:(Number(currentHyData.money/currentHyData.area)*mj).toFixed(2),
  432. upUnit:'亿元',
  433. color:'#FFC47E'
  434. })
  435. this.$set(this.resultList,1,{
  436. title:'亩均税收',
  437. val:(Number(currentHyData.money/currentHyData.area)*10000).toFixed(2),
  438. unit:'万元/亩',
  439. upVal:(Number(currentHyData.money/currentHyData.area)*10000).toFixed(2),
  440. upUnit:'万元/亩',
  441. color:'#4ADEFF'
  442. })
  443. }, 1000);
  444. this.singleConfigShow=false
  445. },
  446. showConfig(){
  447. this.configShow=true
  448. }
  449. }
  450. }
  451. </script>
  452. <style scoped lang="scss">
  453. .map-comp-wrapper {
  454. width: 100%;
  455. height: 100%;
  456. position: relative;
  457. ::v-deep .vl-tool-bar {
  458. display: none;
  459. }
  460. .btn{
  461. position: absolute;
  462. right: 10px;
  463. top: 10px;
  464. display: inline-block;
  465. width: 140px;
  466. height: 34px;
  467. line-height: 34px;
  468. cursor: pointer;
  469. border: 1px solid #468EC0;
  470. background: linear-gradient(0deg, #102A54 0%, #3D5A93 100%);
  471. border-radius: 4px;
  472. img{
  473. vertical-align: middle;
  474. margin-left: 10px;
  475. }
  476. span{
  477. font-size: 16px;
  478. font-family: AlibabaPuHuiTiR;
  479. font-weight: 700;
  480. margin-left: 5px;
  481. color: #FFFFFF;
  482. }
  483. }
  484. .pop-content{
  485. position: absolute;
  486. left: 50%;
  487. transform: translateX(-50%);
  488. top: 15%;
  489. width: 674px;
  490. height: 360px;
  491. background: #133887;
  492. .pop-title-wrapper {
  493. height: 40px;
  494. background: rgba(36,95,181, 0.5);
  495. display: flex;
  496. justify-content: space-between;
  497. align-items: center;
  498. padding-right: 10px;
  499. .title-label-wrapper {
  500. color: #FFF;
  501. height: 100%;
  502. font-size: 18px;
  503. padding-right: 40px;
  504. font-weight: bold;
  505. background: url(~@/assets/images/openmodal/bg-1.png);
  506. background-repeat: no-repeat;
  507. background-size: 100% 100%;
  508. line-height: 40px;
  509. padding-left: 20px;
  510. }
  511. .pop-close-wrapper {
  512. color: #38D0FF;
  513. cursor: pointer;
  514. font-size: 18px;
  515. font-weight: bold;
  516. .close-icon {
  517. width: 20px;
  518. vertical-align: middle;
  519. }
  520. }
  521. }
  522. .pop-top{
  523. height: 80px;
  524. line-height: 80px;
  525. display: flex;
  526. align-items: center;
  527. padding: 0 10px;
  528. .top-name{
  529. width: 128px;
  530. height: 40px;
  531. line-height: 40px;
  532. background: #255EB1;
  533. border-radius: 6px;
  534. font-size: 18px;
  535. font-family: AlibabaPuHuiTiR;
  536. text-align: center;
  537. font-weight: bold;
  538. color: #FFFFFF;
  539. }
  540. .top-des{
  541. width: 236px;
  542. height: 40px;
  543. line-height: 40px;
  544. background: rgba(27,54,104,0.3);
  545. border: 1px solid #3269CC;
  546. border-radius: 6px;
  547. margin-left: 10px;
  548. padding: 0 10px;
  549. .des-title{
  550. font-size: 19px;
  551. font-family: AlibabaPuHuiTiR;
  552. font-weight: bold;
  553. color: #4ADEFF;
  554. margin-right: 10px;
  555. }
  556. .des-val{
  557. font-size: 22px;
  558. font-family: Alibaba PuHuiTi;
  559. font-weight: bold;
  560. color: #FFFFFF;
  561. .des-unit{
  562. font-size: 18px;
  563. font-weight: normal;
  564. }
  565. }
  566. }
  567. }
  568. .pop-table{
  569. height: calc(100% - 45px - 40px - 80px);
  570. padding: 0 10px;
  571. table{
  572. border-collapse: collapse;
  573. width: 100%;
  574. .table-head{
  575. background: linear-gradient(-90deg, #388AE1 0%, rgba(56,137,225,0.3) 100%);
  576. td{
  577. font-weight: bold;
  578. }
  579. }
  580. td{
  581. padding: 5px 0;
  582. text-align: center;
  583. border: 1px solid #4F91D7;
  584. font-size: 18px;
  585. font-family: AlibabaPuHuiTiR;
  586. font-weight: 400;
  587. color: #FFFFFF;
  588. ::v-deep .el-input{
  589. display: inline-block;
  590. width: 150px;
  591. height: 28px;
  592. .el-input__inner{
  593. width: 150px;
  594. height: 28px;
  595. color: #fff;
  596. background: #133887;
  597. border: 1px solid #4F91D7;
  598. }
  599. }
  600. }
  601. }
  602. ::v-deep .el-radio-group{
  603. width: 100%;
  604. .el-radio__label{
  605. display: none;
  606. }
  607. }
  608. }
  609. .pop-bottom{
  610. height: 45px;
  611. .pop-btn{
  612. width: 65px;
  613. height: 32px;
  614. line-height: 32px;
  615. text-align: center;
  616. background: #56C1FF;
  617. border-radius: 4px;
  618. font-size: 18px;
  619. font-family: AlibabaPuHuiTiR;
  620. font-weight: 400;
  621. color: #133887;
  622. cursor: pointer;
  623. float: right;
  624. margin-right: 10px;
  625. }
  626. }
  627. }
  628. .res-content{
  629. position: absolute;
  630. top: 10px;
  631. left: 10px;
  632. width: 520px;
  633. height: 360px;
  634. background: #0F327B;
  635. overflow: hidden;
  636. z-index: 999;
  637. .res-title{
  638. color: #FFF;
  639. height: 40px;
  640. font-size: 18px;
  641. font-weight: bold;
  642. background: url(~@/assets/images/openmodal/bg-2.png);
  643. background-repeat: round;
  644. line-height: 40px;
  645. padding-left: 20px;
  646. .c-icon {
  647. float: right;
  648. margin: 10px 10px 0 0;
  649. cursor: pointer;
  650. }
  651. }
  652. .res-content-wrapper {
  653. height: calc(100% - 40px);
  654. padding: 0 10px;
  655. overflow-y: auto;
  656. }
  657. }
  658. }
  659. </style>