real3d-portalsite/src/views/cockpitNew1/gkzb.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>153.17</span>平方干米

        </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>平方干米

        </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>平方干米

        </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>平方干米

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

          </div>
        </div>
        <div class="text">
          <p>陆域生态保护红线</p>
          <span>{{ store.state.cockpit_gkzb.ly_mj }}</span>平方干米

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

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

          </p>
          <span>66</span>平方干米

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

          </div>
        </div>
        <div class="text">
          <p>近岸海域海洋生态保护红线

          </p>
          <span>{{ store.state.cockpit_gkzb.hy_mj }}</span>平方干米

        </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>
  </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;
      // console.log(store.state.cockpit_date, "store.cockpit_date");


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


      // that.mj = data.data[0].mj
      // // 路域生态保护红线
      // that.ly_mj = data.data[0].ly_mj
      // // 近海岸面积
      // that.hy_mj = data.data[0].hy_mj


      let obj_yjjbntmj = {
        jscType: 'jsc_gdbh_ztgh_nt',
        id: '4602'
      };
      let obj_yjjbntmj_data = await cockpitInfo(obj_yjjbntmj);
      // 永久基本农田保护面积
      // that.yjjbntmj = obj_yjjbntmj_data.data[0].yjjbntmj;


      let obj_kfbjmj = {
        jscType: 'jsc_gkzb_ztgh_kfbj',
        id: '4602'
      };
      let obj_kfbjmj_data = await cockpitInfo(obj_kfbjmj);
      // // 城市开发边界
      // that.kfbjmj = obj_kfbjmj_data.data[0].kfbjmj;
      // // 覆盖城镇开发边界
      // that.bfb = obj_kfbjmj_data.data[0].bfb * 100;

      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,// 覆盖城镇开发边界

      });

    }
  },
  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: relative;
  left: 9px;
  top: 9px;
  width: 416px;
  height: 310px;
  background: inherit;
  // background-color: rgba(3, 25, 67, 0.698039215686274);
  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
}

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

}

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