123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750 |
- <template>
- <div class="map-comp-wrapper">
- <BigScreenMap
- :GZData="[]"
- :fixed="1"
- ref="map"
- :overlayShow = "true"
- :visible-layer-ids="visibleLayerIds"
- ></BigScreenMap>
- <div class="btn" @click="showConfig">
- <img src="@/assets/images/config.png" alt="">
- <span>要素配置模拟</span>
- </div>
- <div class="btn" @click="showZxRes" style="top: 50px;">
- <img src="@/assets/images/config.png" alt="">
- <span>提质增效</span>
- </div>
- <div class="btn" @click="clear" style="top: 90px;">
- <img src="@/assets/images/config.png" alt="">
- <span>清空</span>
- </div>
- <div class="pop-content" v-show="configShow">
- <div class="pop-title-wrapper">
- <div class="title-label-wrapper">要素配置模拟</div>
- <div class="pop-close-wrapper" @click="configShow=false">关闭 <img src="@/assets/images/GyzzView/close.png" class="close-icon"/> </div>
- </div>
- <div class="pop-top">
- <div class="top-name">
- 要素总面积
- </div>
- <div class="top-des">
- <span class="des-title">潜力资源</span>
- <span class="des-val">{{baseData.wlyd}}
- <span class="des-unit">亩</span>
- </span>
- </div>
- </div>
- <div class="pop-table">
- <table>
- <tr class="table-head">
- <td>序号</td>
- <td>行业</td>
- <td>配置面积</td>
- </tr>
- <tr v-for="(item,index) in hyData" :key="index">
- <td>{{index+1}}</td>
- <td>{{item.title}}</td>
- <td>
- <el-input v-model="areas['area'+(index+1)]"></el-input>亩
- </td>
- </tr>
- </table>
- </div>
- <div class="pop-bottom">
- <div class="pop-btn" @click="calculate">确定</div>
- <div class="pop-btn" style="background: #2C6FC4;color: #C9DEFF;">清除</div>
- </div>
- </div>
- <div class="res-content" v-if="resShow">
- <div class="res-title">模拟结果
- <img src="@/assets/images/GyzzView/c.png" class="c-icon" @click="resShow=false"/>
- </div>
- <div class="res-content-wrapper">
- <LineTextComp2
- v-for="(item,index) in resultList"
- :key="index"
- :title="item.title"
- :color="item.color"
- :val="item.val"
- :unit="item.unit"
- updown="up"
- :updownVal="item.upVal"
- :updownUnit="item.upUnit"></LineTextComp2>
- </div>
- </div>
- <!--单个配置模拟-->
- <div class="pop-content" v-if="singleConfigShow">
- <div class="pop-title-wrapper">
- <div class="title-label-wrapper">要素配置模拟</div>
- <div class="pop-close-wrapper" @click="singleConfigShow=false">关闭 <img src="@/assets/images/GyzzView/close.png" class="close-icon"/> </div>
- </div>
- <div class="pop-top">
- <div class="top-name">
- 要素面积
- </div>
- <div class="top-des" style="width: 150px;text-align: center;">
- <span class="des-val" v-show="mockLand['mj']">
- {{Number(mockLand['mj']*15).toFixed(2)}}
- <span class="des-unit">亩</span>
- </span>
- <span class="des-val" v-show="mockLand['txmj']">
- {{Number(mockLand['txmj']*0.0015).toFixed(2)}}
- <span class="des-unit">亩</span>
- </span>
- <span class="des-val" v-show="mockLand['总用地面积']">
- {{Number(mockLand['总用地面积']*0.0015).toFixed(2)}}
- <span class="des-unit">亩</span>
- </span>
- </div>
- </div>
- <div class="pop-table">
- <el-radio-group v-model="selectHy">
- <table>
- <tr class="table-head">
- <td></td>
- <td>序号</td>
- <td>行业</td>
- </tr>
- <tr v-for="(item,index) in hyData" :key="index">
- <td><el-radio :label="item.title"></el-radio></td>
- <td>{{index+1}}</td>
- <td>{{item.title}}</td>
- </tr>
- </table>
- </el-radio-group>
- </div>
- <div class="pop-bottom">
- <div class="pop-btn" @click="singleCalculate">确定</div>
- <!-- <div class="pop-btn" style="background: #2C6FC4;color: #C9DEFF;">清除</div>-->
- </div>
- </div>
- </div>
- </template>
- <script>
- import BigScreenMap from "@/views/components/BigScreenMap";
- import LineTextComp2 from "@/views/components/LineTextComp2";
- export default {
- name: "Map",
- components:{BigScreenMap,LineTextComp2},
- props: {
- obj: {
- type: Object,
- default: () => {}
- }
- },
- data() {
- return {
- visibleLayerIds: [''],
- configShow:false,
- baseData:{},
- landInfo:{},
- hyData:[],
- areas:{
- area1:0,
- area2:0,
- },
- resShow:false,
- resultList:[
- {
- title:'工业用地',
- val:0,
- unit:'亩',
- upVal:0,
- upUnit:'亩'
- }
- ],
- singleConfigShow:false,
- selectHy: '',
- xzqVal: '330108'
- }
- },
- created() {
- this.$vm.$on('getBjMockDetail',(props)=>{
- this.mockLand = props
- this.singleConfigShow=true
- })
- },
- mounted() {
- this.changeXzq();
- this.$vm.$on("getBaseData",(payload)=>{
- this.baseData=payload
- })
- this.$vm.$on("getLandInfo",(payload)=>{
- this.landInfo=payload
- })
- this.$vm.$on("getmjxyData",(payload)=>{
- this.mjxyData=payload
- })
- this.$vm.$on("getHyData",(payload)=>{
- if (payload.length!=0){
- this.hyData = payload.slice(0,2)
- console.log(this.hyData,'hy');
- }
- })
- this.$vm.$on('getTzzxDetail',(props)=>{
- this.tzzxLand = props
- this.showTzzxSingleRes()
- })
- //监听图层改变事件
- this.$vm.$on("setVisibleLayerIdEvent", (visibleLayerId) => {
- this.visibleLayerIds = ['']
- this.visibleLayerIds[0] = visibleLayerId
- })
- this.$vm.$on("showMoreLayer", ids => {
- this.visibleLayerIds = ids
- })
- //热力图
- this.$vm.$on("setHotLayer", (field) => {
- this.$refs.map.initHotLayer(field)
- })
- this.$vm.$on("removeHotLayer", () => {
- this.$refs.map.removeHotLayer()
- })
- this.$vm.$emit("setLayerIdEvent", 'bj-xz');
- this.$vm.$emit("location-mask-feature", { dzjgh: this.obj.name });
- // this.$vm.$emit("location-mask-feature", { dzjgh: '杭州国家高新技术产业开发区管委会(滨江区)' });
- this.$vm.$on("changeLayer", payload => {
- const {id,param} = payload
- let params = {
- layers: "show:0,1",
- layerDefs: {
- "0": param,
- "1": param
- }
- }
- let layer = this.$refs.map.getLayerById(id)
- layer.setVisible(true)
- const source = layer.getSource()
- source.updateParams(params)
- });
- this.$vm.$on("changeLayer2", payload => {
- const {id,params} = payload
- let layer = this.$refs.map.getLayerById(id)
- layer.setVisible(true)
- const source = layer.getSource()
- source.updateParams(params)
- });
- //TODO 为了将切片服务展示清楚
- // setTimeout(()=>{
- // this.$refs.map.map.getView().setZoom(this.$refs.map.map.getView().getZoom()-0.8)
- // },500)
- },
- methods:{
- clear(){
- this.resShow=false
- this.$vm.$emit('zxShow',false)
- this.$vm.$emit('getHyCalRes',{})
- this.$vm.$emit('getBaseCalRes', {})
- },
- changeXzq () {
- this.$nextTick(() => {
- this.$vm.$emit("location-mask-self-where", { layerId: 'xzqh-x-search', where: `xzqdm = '${this.xzqVal}'` });
- })
- },
- showZxRes(){
- const loading = this.$loading({
- lock: true,
- text: '计算中...',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- });
- setTimeout(()=>{
- loading.close();
- this.$vm.$emit('zxShow',true)
- this.resShow=true
- this.resultList=[]
- this.$set(this.resultList,0,{
- title:'盘活低效用地',
- val:this.mjxyData.mjdx,
- unit:'亩',
- upVal:this.mjxyData.mjdx,
- upUnit:'亩',
- color:'#68F4C1'
- })
- this.$set(this.resultList,1,{
- title:'税收',
- val:this.landInfo.ss_after,
- unit:'亿元',
- upVal:this.landInfo.add_ss,
- upUnit:'亿元',
- color:'#FFC47E'
- })
- this.$set(this.resultList,2,{
- title:'亩均税收',
- val:this.landInfo.mjss_after,
- unit:'万元/亩',
- upVal:this.landInfo.add_mjss,
- upUnit:'万元/亩',
- color:'#4ADEFF'
- })
- },1000)
- },
- calculate(){
- const loading = this.$loading({
- lock: true,
- text: '计算中...',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- });
- setTimeout(() => {
- loading.close();
- let money1 = 0,money2=0,addMoney1=0,addMoney2=0;
- if (this.areas.area1!='0'){
- money1 = (this.hyData[0].money/this.hyData[0].area)*(this.hyData[0].area+Number(this.areas.area1))
- addMoney1=money1 - this.hyData[0].money
- }
- if (this.areas.area2!='0'){
- money2 = (this.hyData[1].money/this.hyData[1].area)*(this.hyData[1].area+Number(this.areas.area2))
- addMoney2 =money2 - this.hyData[1].money
- }
- let hyMoneyList={
- money1,money2,addMoney1,addMoney2,
- area1:Number(this.areas.area1),
- area2:Number(this.areas.area2)
- }
- this.$vm.$emit('getHyCalRes',hyMoneyList)
- let addSs = addMoney1+addMoney2
- let addMjss = (Number(this.landInfo.ss)+addSs)*10000/this.landInfo.gyyd - this.landInfo.mjss
- let baseMoneyList={addSs,addMjss}
- this.$vm.$emit('getBaseCalRes',baseMoneyList)
- //结果展示
- this.resShow=true
- this.resultList=[]
- this.$set(this.resultList,0,{
- title:'工业用地',
- val:(this.landInfo.gyyd+Number(this.areas.area1)+Number(this.areas.area2)).toFixed(0),
- unit:'亩',
- upVal:(Number(this.areas.area1)+Number(this.areas.area2)).toFixed(0),
- upUnit:'亩',
- color:'#68F4C1'
- })
- this.$set(this.resultList,1,{
- title:'税收',
- val:(Number(this.landInfo.ss)+addSs).toFixed(2),
- unit:'亿元',
- upVal:addSs.toFixed(2),
- upUnit:'亿元',
- color:'#FFC47E'
- })
- this.$set(this.resultList,2,{
- title:'亩均税收',
- val:(Number(this.landInfo.mjss)+addMjss).toFixed(2),
- unit:'万元/亩',
- upVal:addMjss.toFixed(2),
- upUnit:'万元/亩',
- color:'#4ADEFF'
- })
- this.$set(this.resultList,3,{
- title:this.hyData[0].title,
- val:(Number(this.hyData[0].money)+addMoney1).toFixed(2),
- unit:this.hyData[0].moneyUnit,
- upVal:addMoney1.toFixed(2),
- upUnit:this.hyData[0].moneyUnit,
- color:this.hyData[0].color
- })
- this.$set(this.resultList,4,{
- title:this.hyData[1].title,
- val:(Number(this.hyData[1].money)+addMoney2).toFixed(2),
- unit:this.hyData[1].moneyUnit,
- upVal:addMoney2.toFixed(2),
- upUnit:this.hyData[1].moneyUnit,
- color:this.hyData[1].color
- })
- }, 1000);
- this.configShow=false
- },
- showTzzxSingleRes(){
- const loading = this.$loading({
- lock: true,
- text: '计算中...',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- });
- console.log(this.tzzxLand,11111);
- const urlApi = `/api/ybz/getBjSingleGyydInfo`;
- const formData = new FormData()
- formData.append('dkbh', this.tzzxLand['dksyh'])
- this.$ajax.post(urlApi, formData, this, false).then(res=>{
- let gyyd = res.data
- setTimeout(()=>{
- loading.close();
- this.resShow=true
- this.resultList=[]
- this.$set(this.resultList,0,{
- title:'盘活低效用地',
- val:(this.tzzxLand['sjydmj']*0.0015).toFixed(2),
- unit:'亩',
- upVal:(this.tzzxLand['sjydmj']*0.0015).toFixed(2),
- upUnit:'亩',
- color:'#68F4C1'
- })
- this.$set(this.resultList,1,{
- title:'税收',
- val:gyyd.sjsf_after.toFixed(2),
- unit:'万元',
- upVal:(gyyd.sjsf_after-this.tzzxLand['ss2022']).toFixed(2),
- upUnit:'万元',
- color:'#FFC47E'
- })
- this.$set(this.resultList,2,{
- title:'亩均税收',
- val:gyyd.mjss_after.toFixed(2),
- unit:'万元/亩',
- upVal:(gyyd.mjss_after-this.tzzxLand['mjss2022']).toFixed(2),
- upUnit:'万元/亩',
- color:'#4ADEFF'
- })
- },1000)
- })
- },
- singleCalculate(){
- const loading = this.$loading({
- lock: true,
- text: '计算中...',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- });
- setTimeout(() => {
- loading.close();
- let currentHyData;
- this.hyData.forEach(i=>{
- if (i.title==this.selectHy){
- currentHyData=i
- }
- })
- console.log(currentHyData,'currentHyData');
- console.log(this.mockLand,'this.mockLand');
- let mj;
- if (this.mockLand['SJYDMJ']) mj = Number(this.mockLand['SJYDMJ']*0.0015).toFixed(2)
- if (this.mockLand['mj']) mj = Number(this.mockLand['mj']*15).toFixed(2)
- if (this.mockLand['sjydmj']) mj = Number(this.mockLand['sjydmj']*0.0015).toFixed(2)
- if (this.mockLand['TBMJ']) mj = Number(this.mockLand['TBMJ']*0.0015).toFixed(2)
- if (this.mockLand['总用地面积']) mj = Number(this.mockLand['总用地面积']*0.0015).toFixed(2)
- //结果展示
- this.resShow=true
- this.resultList=[]
- this.$set(this.resultList,0,{
- title:'税收',
- val:(Number(currentHyData.money/currentHyData.area)*mj).toFixed(2),
- unit:'亿元',
- upVal:(Number(currentHyData.money/currentHyData.area)*mj).toFixed(2),
- upUnit:'亿元',
- color:'#FFC47E'
- })
- this.$set(this.resultList,1,{
- title:'亩均税收',
- val:(Number(currentHyData.money/currentHyData.area)*10000).toFixed(2),
- unit:'万元/亩',
- upVal:(Number(currentHyData.money/currentHyData.area)*10000).toFixed(2),
- upUnit:'万元/亩',
- color:'#4ADEFF'
- })
- }, 1000);
- this.singleConfigShow=false
- },
- showConfig(){
- this.configShow=true
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .map-comp-wrapper {
- width: 100%;
- height: 100%;
- position: relative;
- ::v-deep .vl-tool-bar {
- display: none;
- }
- .btn{
- position: absolute;
- right: 10px;
- top: 10px;
- display: inline-block;
- width: 140px;
- height: 34px;
- line-height: 34px;
- cursor: pointer;
- border: 1px solid #468EC0;
- background: linear-gradient(0deg, #102A54 0%, #3D5A93 100%);
- border-radius: 4px;
- img{
- vertical-align: middle;
- margin-left: 10px;
- }
- span{
- font-size: 16px;
- font-family: AlibabaPuHuiTiR;
- font-weight: 700;
- margin-left: 5px;
- color: #FFFFFF;
- }
- }
- .pop-content{
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- top: 15%;
- width: 674px;
- height: 360px;
- background: #133887;
- .pop-title-wrapper {
- height: 40px;
- background: rgba(36,95,181, 0.5);
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-right: 10px;
- .title-label-wrapper {
- color: #FFF;
- height: 100%;
- font-size: 18px;
- padding-right: 40px;
- font-weight: bold;
- background: url(~@/assets/images/openmodal/bg-1.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- line-height: 40px;
- padding-left: 20px;
- }
- .pop-close-wrapper {
- color: #38D0FF;
- cursor: pointer;
- font-size: 18px;
- font-weight: bold;
- .close-icon {
- width: 20px;
- vertical-align: middle;
- }
- }
- }
- .pop-top{
- height: 80px;
- line-height: 80px;
- display: flex;
- align-items: center;
- padding: 0 10px;
- .top-name{
- width: 128px;
- height: 40px;
- line-height: 40px;
- background: #255EB1;
- border-radius: 6px;
- font-size: 18px;
- font-family: AlibabaPuHuiTiR;
- text-align: center;
- font-weight: bold;
- color: #FFFFFF;
- }
- .top-des{
- width: 236px;
- height: 40px;
- line-height: 40px;
- background: rgba(27,54,104,0.3);
- border: 1px solid #3269CC;
- border-radius: 6px;
- margin-left: 10px;
- padding: 0 10px;
- .des-title{
- font-size: 19px;
- font-family: AlibabaPuHuiTiR;
- font-weight: bold;
- color: #4ADEFF;
- margin-right: 10px;
- }
- .des-val{
- font-size: 22px;
- font-family: Alibaba PuHuiTi;
- font-weight: bold;
- color: #FFFFFF;
- .des-unit{
- font-size: 18px;
- font-weight: normal;
- }
- }
- }
- }
- .pop-table{
- height: calc(100% - 45px - 40px - 80px);
- padding: 0 10px;
- table{
- border-collapse: collapse;
- width: 100%;
- .table-head{
- background: linear-gradient(-90deg, #388AE1 0%, rgba(56,137,225,0.3) 100%);
- td{
- font-weight: bold;
- }
- }
- td{
- padding: 5px 0;
- text-align: center;
- border: 1px solid #4F91D7;
- font-size: 18px;
- font-family: AlibabaPuHuiTiR;
- font-weight: 400;
- color: #FFFFFF;
- ::v-deep .el-input{
- display: inline-block;
- width: 150px;
- height: 28px;
- .el-input__inner{
- width: 150px;
- height: 28px;
- color: #fff;
- background: #133887;
- border: 1px solid #4F91D7;
- }
- }
- }
- }
- ::v-deep .el-radio-group{
- width: 100%;
- .el-radio__label{
- display: none;
- }
- }
- }
- .pop-bottom{
- height: 45px;
- .pop-btn{
- width: 65px;
- height: 32px;
- line-height: 32px;
- text-align: center;
- background: #56C1FF;
- border-radius: 4px;
- font-size: 18px;
- font-family: AlibabaPuHuiTiR;
- font-weight: 400;
- color: #133887;
- cursor: pointer;
- float: right;
- margin-right: 10px;
- }
- }
- }
- .res-content{
- position: absolute;
- top: 10px;
- left: 10px;
- width: 520px;
- height: 360px;
- background: #0F327B;
- overflow: hidden;
- z-index: 999;
- .res-title{
- color: #FFF;
- height: 40px;
- font-size: 18px;
- font-weight: bold;
- background: url(~@/assets/images/openmodal/bg-2.png);
- background-repeat: round;
- line-height: 40px;
- padding-left: 20px;
- .c-icon {
- float: right;
- margin: 10px 10px 0 0;
- cursor: pointer;
- }
- }
- .res-content-wrapper {
- height: calc(100% - 40px);
- padding: 0 10px;
- overflow-y: auto;
- }
- }
- }
- </style>
|