<template>
  <div class="jcxxxt">
    <div class="title">大数据统计分析系统</div>
    <button class="button-dd" @click="$router.push('/')">调度指挥系统</button>
    <button class="button-zh" @click="$router.push('/zhdjxt')">智慧党建系统</button>
    <!-- <button class="button-xx" @click="$router.push('/jcxxxt')">基础信息系统</button> -->
    <button class="button-xx" @click="$router.openUrl('http://219.147.99.164:8082/population/pages/bigdata/population/index.html')">基础信息系统</button>
     <titless class="title-ryxxcjqk" titless="人员信息采集情况" @click="fn(ryxxcjqkUrl)"></titless>
     <titless class="title-nnnlfb" titless="男女年龄分布" @click="fn(ryxxcjqkUrl)"></titless>
    <titless class="title-gmzrkzbqk" titless="各民族人口占比情况" @click="fn(ryxxcjqkUrl)"></titless>
    <titless class="title-rkfbt" titless="人口分布图"></titless>
    <titless class="title-zzmmqk" titless="政治面貌情况" @click="fn(ryxxcjqkUrl)"></titless>
    <titless class="title-yqgkryflqk" titless="疫情管控人员分类情况" @click="fn(yqgkryflqkUrl)"></titless>
    <titless class="title-lyfwxx" titless="楼宇房屋信息" @click="fn(lyfwxxUrl)"></titless>
    <titless class="title-xlqk" titless="学历情况" @click="fn(ryxxcjqkUrl)"></titless> 
    <tianqi class="tianqi"></tianqi>
    <rkfbt class="rkfbt"></rkfbt>
    <ryxxcjqk class="ryxxcjqk"></ryxxcjqk>
    <nnnlfb class="nnnlfb"></nnnlfb>
    <gmzrkzbqk class="gmzrkzbqk"></gmzrkzbqk>
    <zzmmqk class="zzmmqk"></zzmmqk>
    <yqgkryflqk class="yqgkryflqk"></yqgkryflqk>
    <lyfwxx class="lyfwxx"></lyfwxx>
    <xlqk class="xlqk"></xlqk>
  </div>
</template>

<script>
 import titless from '@/components/jcxxxt/titless.vue'
 import tianqi from '@/components/jcxxxt/tianqi.vue'
 import rkfbt from '@/components/jcxxxt/rkfbt.vue'
 import ryxxcjqk from '@/components/jcxxxt/ryxxcjqk.vue'
 import nnnlfb from '@/components/jcxxxt/nnnlfb.vue'
 import gmzrkzbqk from '@/components/jcxxxt/gmzrkzbqk.vue'
 import zzmmqk from '@/components/jcxxxt/zzmmqk.vue'
 import yqgkryflqk from '@/components/jcxxxt/yqgkryflqk.vue'
 import lyfwxx from '@/components/jcxxxt/lyfwxx.vue'
 import xlqk from '@/components/jcxxxt/xlqk.vue'
export default {
  created(){
    document.title = '人口数据'
   
  },
components:{
   titless,
   tianqi,
   rkfbt,
   ryxxcjqk,
   nnnlfb,
   gmzrkzbqk,
   zzmmqk,
   yqgkryflqk,
   lyfwxx,
   xlqk
},
data(){
  return{
    yqgkryflqkUrl:'http://219.147.99.164:8082/population/route/bigdata/list-coronavirus.html',
    ryxxcjqkUrl:'http://219.147.99.164:8082/population/route/bigdata/list-basepopulationinfo.html',
    lyfwxxUrl:'http://219.147.99.164:8082/population/route/bigdata/list-building-detail.html',
  }
},
methods:{
  fn(url) {
      //  const res =  await getErjiye()
        // console.log(res.data);
      // console.log(123);
      // this.windowContent = res.data;
      layer.open({
        type: 2,
        // content: '<div style="color:#00ffff; font-size:50px;">大数据统计分析系统</div>',//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
        // content: 'static/html/list-case-info-ajlx.html',
        content: url, //`<iframe src="data:text/html;charset=utf-8,${}"></iframe>`, //'http://127.0.0.1/servicecity/route/bigdata/list-case-info-ajlx.html',
        area: ['80%', '80%'],
        title:'' ,
        // skin: 'demo-class'
      });
      // window.open('http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlx.html')
      // this.$alert(res, {
      //      dangerouslyUseHTMLString: true
      //    });
    },
}

}
</script>

<style lang="scss" scoped>
.jcxxxt{
  width: 100vw;
  height: 100vh;
  background: url('../../assets/党建底图.png') no-repeat center;
  background-size: 100% 100%; 
  position: fixed;  
  overflow: hidden; 
  .xlqk{
    position: absolute;
    bottom: 2.5806vh;
    right: .9896vw;
  }
  .lyfwxx{
    position: absolute;
    top: 14.0860vh;
    right: .7813vw;
  }
  .yqgkryflqk{
    position: absolute;
    bottom: 2.5806vh;
    right: 25.5208vw;
  }
  .zzmmqk{
    position: absolute;
    left: 25.8854vw;
    bottom: 2.6881vh;
  }
  .gmzrkzbqk{
    position: absolute;
    left: .8333vw;
    bottom: 2.7956vh;
  }
  .nnnlfb{
    position: absolute;
    left: .8333vw;
    top: 43.2258vh;
  }
  .ryxxcjqk{
    position: absolute;
    left: 1.9271vw;
    top: 14.9462vh;
  }
   .rkfbt{
     position: absolute;
     right: 26.4583vw;
     top: 14.0860vh;
   }
  .tianqi{
    position: absolute;
    left: .625vw;
    top: 5.5913vh;
  }
  .title-ryxxcjqk{
    position: absolute;
    left: 8.4896vw;
    top: 10.5376vh;
    cursor: pointer;
   }
    .title-nnnlfb{
     position: absolute;
     left: 9.6354vw;
     top: 39.7849vh;
    cursor: pointer;

   }
   .title-gmzrkzbqk{
     position: absolute;
     left: 8.0208vw;
     top: 68.7096vh;
    cursor: pointer;

   }
    .title-rkfbt{
     position: absolute;
     left: 47.2396vw;
     top: 10.5376vh;
   } 
   .title-zzmmqk{
     position: absolute;
     left: 34.4792vw;
     top: 68.7096vh;
    cursor: pointer;

   } 
   .title-yqgkryflqk{
     position: absolute;
     left: 57.5521vw;
     top: 68.7096vh;
    cursor: pointer;

   } 
   .title-lyfwxx{
     position: absolute;
     right: 9.2708vw;
     top: 10.4301vh;
   }
    .title-xlqk{
     position: absolute;
     right: 10.3125vw;
     top: 68.7096vh;
    cursor: pointer;

   } 

  .title {
  /* border: 1px solid #00ffff; */
  font-size: 1.875vw;
  color: #fff;
  position: absolute;
  left: 41.9271vw;
  top: 1.6181vh;
  font-weight: 800;
}
.button-xx {
  cursor: pointer;
  position: absolute;
  top: 4.8544vh;
  right: 2.3438vw;
  width: 9.0104vw;
  height: 3.8835vh;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid #fff;
  border-radius: .4167vw;
}
.button-zh {
  cursor: pointer;
  position: absolute;
  top: 4.8544vh;
  right: 12.2917vw;
  width: 9.0104vw;
  height: 3.8835vh;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid #fff;
  border-radius: .4167vw;
}
.button-dd {
  cursor: pointer;
  width: 9.0104vw;
  height: 3.8835vh;
  position: absolute;
  top: 4.8544vh;
  right: 22.2396vw;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid #fff;
  border-radius: .4167vw;
}
}
</style>