BJYSYBZ/BJYSYBZ_C/src/views/components/BJTownOpenModalComp/comps/Map.vue

<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>