real3d-portalsite/src/views/cockpit/jsyd.vue

<template>
  <div class="jsyd">
    <div class="title">
      <div class="icon"></div>
      <span>建设用地规划指标</span>
    </div>
    <div class="content">
      <div class="item">
        <div class="icon">
          <div class="icon_zxkg">

          </div>
        </div>
        <div class="text">
          <p>耕地保护目标</p>
          <span>{{ store.state.cockpit_gkzb.tbmj_ys }}</span>k㎡

        </div>
      </div>
      <div class="item">
        <div class="icon">
          <div class="icon_yrkkg">

          </div>
        </div>
        <div class="text">
          <p>永久基本农田保护</p>
          <span>{{ store.state.cockpit_gkzb.yjjbntmj }}</span>k㎡

        </div>
      </div>
      <div class="item">
        <div class="icon">
          <div class="icon_jsydzzb">

          </div>
        </div>
        <div class="text">
          <p>生态保护红线</p>
          <span>
            {{ store.state.cockpit_gkzb.mj }}
          </span>k㎡

        </div>
      </div>
      <div class="item">
        <div class="icon">
          <div class="icon_jsydzzb">

          </div>
        </div>
        <div class="text">
          <p>城市开发边界</p>
          <span>{{ store.state.cockpit_gkzb.kfbjmj }}</span>k㎡

        </div>
      </div>

      <!-- <div class="item">
        <div class="icon">
          <div class="icon_yrk">

          </div>
        </div>
        <div class="text">
          <p>己入库控规范围

          </p>
          <span>{{ store.state.cockpit_gkzb.ghdkmj }}</span>k㎡

        </div>
      </div>

      <div class="item">
        <div class="icon">
          <div class="icon_fgczkfbj">

          </div>
        </div>
        <div class="text">
          <p>覆盖城镇开发边界

          </p>
          <span>{{ store.state.cockpit_gkzb.bfb }}</span>%

        </div>
      </div> -->
      <div class="box_bottom"></div>
      <div class="box_text">
        <div class="text box_bottom_text">
          <p>城镇开发边界内控规范围

          </p>
          <span>{{ store.state.cockpit_gkzb.ghdkmj }}</span>k㎡

        </div>
        <div class="text">
          <p>城镇开发边界内覆盖度

          </p>
          <span>{{ store.state.cockpit_gkzb.bfb }}</span>%

        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { cockpitInfo } from '@/api/cockpit'

export default {
  components: {},
  data() {
    return {
      yjjbntmj: 0,
      kfbjmj: 0,
      bfb: 0,
      mj: 0,
      ly_mj: 0,
      hy_mj: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async initData() {
      const that = this;
      let obj = {
        // beginTime: store.state.cockpit_date[0],
        // endTime: store.state.cockpit_date[1],
        jscType: 'jsc_gkzb_ztgu_stbh',
        id: '4602'
      };
      let data = await cockpitInfo(obj);


      let obj_yjjbntmj = {
        jscType: 'jsc_gdbh_ztgh_nt',
        id: '4602'
      };
      let obj_yjjbntmj_data = await cockpitInfo(obj_yjjbntmj);

      let obj_kfbjmj = {
        jscType: 'jsc_gkzb_ztgh_kfbj',
        id: '4602'
      };
      let obj_kfbjmj_data = await cockpitInfo(obj_kfbjmj);

      let obj_gdbhmb = {
        jscType: 'jsc_gkzb_ztgu_gdbhmb',
        id: '4602'
      };
      let obj_gdbhmb_data = await cockpitInfo(obj_gdbhmb);
      store.setCockpitGkzb({
        mj: data.data[0].mj,// 生态保护红线面积
        ly_mj: data.data[0].ly_mj,// 路域生态保护红线
        hy_mj: data.data[0].hy_mj,//近海岸面积
        yjjbntmj: obj_yjjbntmj_data.data[0].yjjbntmj,// 永久基本农田保护面积
        kfbjmj: obj_kfbjmj_data.data[0].kfbjmj,// 城市开发边界
        bfb: obj_kfbjmj_data.data[0].bfb * 100,// 覆盖城镇开发边界
        tbmj_ys: obj_gdbhmb_data.data[0].tbmj_ys,//耕地保护目标
        ghdkmj: obj_kfbjmj_data.data[0].ghdkmj//已入库管控范围
      });
    }
  },
  beforeCreate() { }, //生命周期 - 创建之前
  created() { }, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() { }, //生命周期 - 挂载之前
  mounted() {
    this.initData();

  }, //生命周期 - 挂在完成
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroy() { },//生命周期 - 销毁完成
  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
  deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>
<style  lang="scss"  scoped>
.jsyd {
  border-width: 0px;
  position: fixed;
  left: 1rem;
  top: 4rem;
  z-index: 1;
  width: 416px;
  height: 310px;
  background: inherit;
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  z-index: 100;
}

.title {
  border-width: 0px;
  width: 100%;
  height: 40px;
  // font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  // font-weight: 700;
  // font-style: normal;
  // color: #fff;
  // padding: 2%;
  background: no-repeat;
  background-image: url("/static/images/overview/标题框.png");

  .icon {
    background: no-repeat;

    background-image: url("/static/images/overview/icon_标题框装饰.png");
    display: inline-block;
    width: 30px;
    height: 30px;
    background-position: 14px 7px;
  }

  span {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    bottom: 0.5rem;
  }
}

.content {
  position: absolute;
  left: 1%;
  width: 500px;
  top: 18%;
}

.item {
  width: 45%;
  height: 30%;
  display: inline-block;
  // border: #00FFFF 1px solid;

}

.icon {
  width: 50px;
  padding: 1.5%;
  border-radius: 8px;
  display: inline-block;
  height: 50px
}

.box_bottom {
  position: fixed;
  width: 19rem;
  height: 6rem;
  left: 4%;
  top: 15rem;
  background: no-repeat;
  background-size: 100%;

  background-image: url("/static/images/overview/gkzb_back.png");


}

.icon_zxkg {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icon_zxkg.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.box_bottom_text {
  width: 115px;
}

.box_text {
  width: 21rem;
  margin-left: 6rem;

  p {
    font-size: 12px;
    position: relative;
    right: 3rem;
  }

  .text {
    width: 160px;

  }
}

.icon_yrkkg {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icon_yrkkg.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_jsydzzb {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icon_jsydzzb.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_xzjsyd {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icon_xzjsyd.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_ysyzb {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icon_jsydzzb.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_syzb {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icon_jsydzzb.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_syzb {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/gkzb_syzb.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_fgczkfbj {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/gkzb_fgczkfbj.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.icon_yrk {
  background: no-repeat 50%;
  background-image: url("/static/images/overview/icongdbh2.png");
  /* border: #00FFFF 1px solid; */
  width: 45px;
  height: 45px;
  display: inline-block;

}

.text {
  display: inline-block;
  // border: #00FFFF 1px solid;
  width: 170px;

  p {
    font-kerning: normal;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: #FFFFFF;
  }

  span {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    color: #68F4FB;
  }
}

.value {
  display: inline-block;

  // border: #00FFFF 1px solid;
  width: 50px;

}
</style>