<template>
  <div class="ddzhxt">
    <div class="title">大数据统计分析系统</div>
    <calendar class="calendar"></calendar>
    <ajqk class="ajqk" :data="data" str="职能部门"></ajqk>
    <ajqk class="ajqk2" :data="data2" str="街镇案件"></ajqk>
    <gqyajzb class="gqyajzb"></gqyajzb>
    <ajlx class="ajlx"></ajlx>
    <ajjz class="ajjz"></ajjz>
    <ajclmyd class="ajclmyd"></ajclmyd>
    <gyfajqktj class="gyfajqktj"></gyfajqktj>
    <ditu class="ditu"></ditu>
    <rysshyqk class="rysshyqk"></rysshyqk>
    <titles class="title-ajqk" text="案件情况" @click="fn(ajqkUrl)"></titles>
    <titles class="title-ajlx" text="案件类型 TOP 10" @click="fn(ajlxUrl)"></titles>
    <titles class="title-gqyajzb" text="各区域案件占比" @click="fn(gqyajzbUrl)"></titles>
    <titles class="title-ajjz" text="7日案件进展" @click="fn(ajjzUrl)"></titles>
    <titles class="title-rysshyqk" text="案件处理情况" @click="fn(rysshyqkUrl)"></titles>
    <!-- <titles class="title-ajclmyd" text="案件处理满意度" @click="fn(ajclmydUrl)"></titles> -->
    <titles class="title-ajclmyd" text="案件处理流程" @click="fn2('static/imgs/ajlc.png')"></titles>
    <titles class="title-ditu" text="案件分布图"></titles>
    <titles class="title-gyfajqktj" text="各月份案件情况统计" @click="fn(gyfajqktjUrl)"></titles>
    <titles class="title-ajdt" text="案件动态" @click="fn(ajqkUrl)"></titles>
    <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>
    <ajdt class="ajdt"></ajdt>
    <!-- <div v-html="windowContent"></div> -->
  </div>
</template>

<script>

import calendar from '@/components/ddzhxt/calendar.vue'
import ajqk from '@/components/ddzhxt/ajqk.vue'
import gqyajzb from '@/components/ddzhxt/gqyajzb.vue'
import ajlx from '@/components/ddzhxt/ajlx.vue'
import ajjz from '@/components/ddzhxt/ajjz.vue'
import ajclmyd from '@/components/ddzhxt/ajclmyd.vue'
import gyfajqktj from '@/components/ddzhxt/gyfajqktj.vue'
import ditu from '@/components/ddzhxt/ditu.vue'
import rysshyqk from '@/components/ddzhxt/rysshyqk.vue'
import titles from '@/components/ddzhxt/titles.vue'
import ajdt from '@/components/ddzhxt/ajdt.vue'
// eslint-disable-next-line no-unused-vars
import { getBumen, getJiezhen, getErjiye } from '@/api/ddzhxt.js'

export default {
  components: {
    calendar,
    ajqk,
    gqyajzb,
    ajlx,
    ajjz,
    ajclmyd,
    gyfajqktj,
    ditu,
    rysshyqk,
    titles,
    ajdt
  },
  data () {
    return {
      data: '',
      data2: '',
      ajqkUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlx.html',
      gqyajzbUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-gqyajzb.html',
      rysshyqkUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-hour-user-rysshyqk.html',
      ajlxUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-ajlxtop10.html',
      ajjzUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-case-info-7dayajjz.html',
      ajclmydUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-grade-ratio-ajmyd.html',
      gyfajqktjUrl: 'http://219.147.99.164:8082/servicecity/route/bigdata/list-report-case-gyfajqk.html'
      // windowContent: ''
    }
  },
  created () {
    this.getBumen()
    this.getJiezhen()
    document.title = '案件信息'
    // 79.7917 * (document.body.clientWidth / 100)
    // window.addEventListener("resize", () => {
    //   //  console.log(document.body.clientWidth);
    //    79.7917 * (document.body.clientWidth / 100)
    //   //  console.log(document.body.clientHeight);
    //   });
  },
  methods: {
    async getBumen () {
      try {
        const { data: { data } } = await getBumen()
        //  console.log(data);
        this.data = data
      } catch (error) {
        console.log('数据获取失败')
      }
    },
    async getJiezhen () {
      try {
        const { data: { data } } = await getJiezhen()
        // console.log(data);
        this.data2 = data
      } catch (error) {
        console.log('数据获取失败')
      }
    },
    fn (url) {
      //  const res =  await getErjiye()
      // console.log(res.data);
      // console.log(123);
      // this.windowContent = res.data;
      // eslint-disable-next-line no-undef
      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: ['85%', '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
      //    });
    },
    fn2 (imgSrc) {
      // eslint-disable-next-line no-undef
      layer.open({
        type: 1,
        content: `<div style="padding:15px"><img src="${imgSrc}" style="width:100%"/></div>`,
        area: ['85%', '80%'],
        title: ''
        // skin: 'demo-class'
      })
    }

  }
}
</script>

<style lang="scss" scoped>

.ddzhxt {
  width: 100vw;
  height: 100vh;
  background: url('../../assets/bg.png') no-repeat center;
  background-size: 100% 100%;
  position: fixed;
  overflow: hidden;
  // width: 79.7917vw;
  // height: 776px;

  .title {
    /* border: 1px solid #00ffff; */
    font-size: 1.875vw;
    color: #fff;
    position: absolute;
    left: 41.9271vw;
    top: 1.6181vh;
    font-weight: 800;
  }

  .ajdt {
    position: absolute;
    top: 12.4056vh;
    right: 2.0833vw;
  }

  .title-ajqk {
    position: absolute;
    left: 3.5417vw;
    top: 18.4466vh;
  }

  .title-ajlx {
    position: absolute;
    top: 10.7875vh;
    left: 21.9792vw;
  }

  .title-gqyajzb {
    position: absolute;
    top: 46.8177vh;
    left: 3.5938vw;
  }

  .title-ajjz {
    position: absolute;
    top: 47.1413vh;
    left: 22.0313vw;
  }

  .title-rysshyqk {
    position: absolute;
    top: 72.9234vh;
    left: 3.3854vw;
  }

  .title-ajclmyd {
    position: absolute;
    top: 72.9234vh;
    left: 21.875vw;
  }

  .title-ditu {
    position: absolute;
    top: 10.2481vh;
    left: 52.0833vw;
  }

  .title-gyfajqktj {
    position: absolute;
    top: 73.1392vh;
    left: 52.0833vw;
  }

  .title-ajdt {
    position: absolute;
    top: 9.9245vh;
    right: 3.3333vw;
  }

  .ditu {
    position: absolute;
    right: 20.5729vw;
    top: 12.4056vh;
  }

  .calendar {
    position: absolute;
    left: 3.4375vw;
    top: 9.6vh;
  }

  .ajqk {
    position: absolute;
    left: 3.0729vw;
    top: 21.7325vh;
  }

  .ajqk2 {
    position: absolute;
    left: 3.0729vw;
    top: 33.5987vh;
  }

  .gqyajzb {
    position: absolute;
    left: 2.6042vw;
    top: 50vh;
  }

  .ajlx {
    position: absolute;
    left: 20.9375vw;
    top: 14.3969vh;
  }

  .ajjz {
    position: absolute;
    left: 20.9375vw;
    top: 49.8586vh;
  }

  .ajclmyd {
    position: absolute;
    left: 21.3vw;
    top: 75.6408vh;
  }

  .gyfajqktj {
    position: absolute;
    top: 75.973vh;
    left: 39.1146vw;
  }

  .rysshyqk {
    position: absolute;
    left: 2.5vw;
    bottom: 3.2362vh;
  }

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

  .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-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;
  }
}
</style>
<style>
  .layui-layer-page .layui-layer-content{
      background-color: rgb(3, 15, 90);
    }

  </style>
