<template>
  <panel-container>
    <modular-layout type="roundCorner">
      <panel-title-1>社会民生</panel-title-1>
      <div class="Modular_main">
        <div>
          <vue-scroll>
            <!-- 1行 -->
            <div class="row">
              <div class="col-40">
                <TitleThree title="一卡通用户数" />
                <div class="module-corner Modular_left">
                  <EarthViews :data="EarthViews" height="1rem" />
                  <Corner />
                </div>
              </div>
              <div class="col-60">
                <TitleThree title="在线预约" />
                <div class="Modular_left Modular_right">
                  <div id="online_order_box">
                    <EchartBar1
                    :id="online_order.id"
                    :width="online_order.width"
                    :height="online_order.height"
                    :xAxisData="online_order.xAxisData"
                    :seriesData="online_order.seriesData"
                  />
                  </div>
                </div>
              </div>
            </div>
            <!-- 2行 -->
            <div class="row">
              <div class="col-40">
                <TitleThree title="教育" />
                <div class="module-corner Modular_left" style="height: 1.1rem;">
                  <div style="padding: .05rem 0;">
                    <LitterTitle :title="educationTitle1" />
                    <div style="margin: .04rem ;overflow:hidden;">
                      <div class="col-33">
                        <div id="education_box">
                          <Dashboard
                            :id="education1.id"
                            :width="education1.width"
                            :height="education1.height"
                            :title="education1.title"
                            :total="education1.total"
                            :already="education1.already"
                            :rate="education1.rate"
                          />
                        </div>
                      </div>
                      <div class="col-33">
                        <div>
                          <Dashboard
                            :id="education2.id"
                            :width="education2.width"
                            :height="education2.height"
                            :title="education2.title"
                            :total="education2.total"
                            :already="education2.already"
                            :rate="education2.rate"
                          />
                        </div>
                      </div>
                      <div class="col-33">
                        <div>
                          <Dashboard
                            :id="education3.id"
                            :width="education3.width"
                            :height="education3.height"
                            :title="education3.title"
                            :total="education3.total"
                            :already="education3.already"
                            :rate="education3.rate"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style="position:relative;top:-.15rem">
                    <LitterTitle :title="educationTitle2" />
                    <div style="margin: .02rem ;overflow:hidden;">
                      <div class="col-33">
                        <div id="education_box">
                          <Dashboard
                            :id="education4.id"
                            :width="education4.width"
                            :height="education4.height"
                            :total="education4.total"
                            :title="education4.title"
                            :already="education4.already"
                            :rate="education4.rate"
                          />
                        </div>
                      </div>
                      <div class="col-33">
                        <div>
                          <Dashboard
                            :id="education5.id"
                            :width="education5.width"
                            :height="education5.height"
                            :title="education5.title"
                            :total="education5.total"
                            :already="education5.already"
                            :rate="education5.rate"
                          />
                        </div>
                      </div>
                      <div class="col-33">
                        <div>
                          <Dashboard
                            :id="education6.id"
                            :width="education6.width"
                            :height="education6.height"
                            :title="education6.title"
                            :total="education6.total"
                            :already="education6.already"
                            :rate="education6.rate"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                  <Corner />
                </div>
              </div>
              <div class="col-60">
                <TitleThree title="社区基础设施" />
                <div id="community_service_box" class="Modular_right">
                  <EchartBar1Color
                    :id="community_service.id"
                    :width="community_service.width"
                    :height="community_service.height"
                    :xAxisData="community_service.xAxisData"
                    :seriesData="community_service.seriesData"
                  />
                </div>
              </div>
            </div>
            <!-- 3行 -->
            <div class="row">
              <div class="col-40">
                <TitleThree title="案件分析" />
                <div id="case_analysis_box" class="Modular_left">
                  <!-- <div id="case_analysis_id"></div> -->
                  <EchartBars
                    :id="case_analysis.id"
                    :width="case_analysis.width"
                    :height="case_analysis.height"
                    :source="case_analysis.source"
                  >
                  </EchartBars>
                </div>
              </div>
              <div class="col-60">
                <TitleThree title="案件分析" />
                <div class="module-corner Modular_left Modular_right">
                  <Legend :list="[['处理率', '#bd273c '], ['总数量', '#0197ff']]" />
                  <div class="column2">
                    <div v-for="(value,index) in ajfx" :key="index" style="padding-right:.05rem">
                      <ProgressBar :data="value" :labelWidth=".37" />
                    </div>
                  </div>
                  <Corner />
                </div>
              </div>
            </div>
          </vue-scroll>
        </div>
      </div>
    </modular-layout>
  </panel-container>
</template>
<script>
import LitterTitle from '@/components/title/LitterTitle'
import Legend from '@/components/echart/Legend'
import Corner from '@/components/Corner'
import EarthViews from '@/components/EarthViews'
import ProgressBar from './components/ProgressBar'
import EchartBar1Color from '@/components/echart/EchartBar1Color'
import Dashboard from './components/Dashboard'
import EchartBar1 from '@/components/echart/EchartBar1'
import EchartBars from './components/EchartBars'
export default {
  components: {
    LitterTitle,
    Legend,
    Corner,
    EarthViews,
    ProgressBar,
    EchartBar1Color,
    Dashboard,
    EchartBar1,
    EchartBars
  },
  data () {
    return {
      EarthViews: [],
      // zxfw:[
      //   {title: '智慧交通', num1: 50, num2: 100},
      //   {title: '智慧城管', num1: 50, num2: 100},
      //   {title: '智慧政务', num1: 50, num2: 100},
      //   {title: '智慧教育', num1: 50, num2: 100},
      //   {title: '智慧社区', num1: 50, num2: 100}
      // ],
      online_order: {
        id: 'online_order_id',
        width: 0,
        height: 0,
        xAxisData: [],
        seriesData: []
      },
      // zxyy: [
      //   {title: '图书馆', num1: 50, num2: 100},
      //   {title: '报告厅', num1: 50, num2: 100},
      //   {title: '会议室', num1: 50, num2: 100},
      //   {title: '运动场', num1: 50, num2: 100},
      //   {title: '停车场', num1: 50, num2: 100}
      // ],
      ajfx: [
        {title: '治安事件', num1: 50, num2: 100, percentage: 50},
        {title: '学生打架事件', num1: 50, num2: 100, percentage: 50},
        {title: '刑事案件', num1: 50, num2: 100, percentage: 50},
        {title: '聚众群体事件', num1: 50, num2: 100, percentage: 50},
        {title: '黄赌毒事件', num1: 50, num2: 100, percentage: 50},
        {title: '民事纠纷事件', num1: 50, num2: 100, percentage: 50},
        {title: '消防事件', num1: 50, num2: 100, percentage: 50},
        {title: '突发应急事件', num1: 50, num2: 100, percentage: 50}
      ],
      // 社区服务
      community_service: {
        id: 'community_service_id',
        width: 0,
        height: 0,
        xAxisData: [],
        seriesData: []
      },
      // 教育
      educationTitle1: '',
      educationTitle2: '',
      education1: {
        id: 'education_id1',
        width: 0,
        height: 0,
        title: '教师数',
        total: '',
        already: '',
        rate: null
      },
      education2: {
        id: 'education_id2',
        width: 0,
        height: 0,
        title: '班级数',
        total: '',
        already: '',
        rate: null
      },
      education3: {
        id: 'education_id3',
        width: 0,
        height: 0,
        title: '学生数',
        total: '',
        already: '',
        rate: null
      },
      education4: {
        id: 'education_id4',
        width: 0,
        height: 0,
        title: '教师数',
        total: '',
        already: '',
        rate: null
      },
      education5: {
        id: 'education_id5',
        width: 0,
        height: 0,
        title: '班级数',
        total: '',
        already: '',
        rate: null
      },
      education6: {
        id: 'education_id6',
        width: 0,
        height: 0,
        title: '学生数',
        total: '',
        already: '',
        rate: null
      },
      // 案件分析option
      case_analysis: {
        id: 'case_analysis_id',
        width: 0,
        height: 0,
        source: []
      }
    }
  },
  created () {
  },
  mounted () {
    // 获取一卡通注册数
    // this.geRegisterNum();
    // 在线预约
    // this.getOnlineOrder()
    // 教育模块
    this.getEducateData()
    // 社区基础设施
    // this.getCommunityService()
    // 案件分析echart
    // this.getCaseAnalysis();
    // 获取案件处置率
    // this.getCaseRate();
  },
  methods: {
    // 获取一卡通注册数
    geRegisterNum () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1053'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let arr = []
        let total = 0
        res.data.forEach((item, index) => {
          arr.push({name: item.LX + '注册数', num: item.SL})
          total += Number(item.SL)
        })
        arr.splice(1, 0, {name: '总用户数', num: total})
        this.EarthViews = [...arr]
      })
    },
    // 在线预约
    getOnlineOrder () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1070'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let xAxisData = []
        let seriesData = []
        res.data.forEach(item => {
          xAxisData.push(item.RESOURCE_NAME)
          seriesData.push(item.SL)
        })
        this.online_order.xAxisData = xAxisData
        this.online_order.seriesData = seriesData
        this.callEchart('online_order_box', this.online_order, 2.25)
      })
    },
    // 获取社区基础设施
    getCommunityService () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1066'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        if (res.ret_code == 200) {
          let xAxisData = []
          let seriesData = []
          res.data.forEach(item => {
            xAxisData.push(item.LX)
            seriesData.push(item.SL)
          })
          this.community_service.xAxisData = xAxisData
          this.community_service.seriesData = seriesData
          // 社区服务echart
          this.callEchart('community_service_box', this.community_service, 2.3)
        }
      })
    },
    // 获取教育模块数据
    getEducateData () {
      this.callEchart('education_box', this.education1, 1)
      this.callEchart('education_box', this.education2, 1)
      this.callEchart('education_box', this.education3, 1)
      this.callEchart('education_box', this.education4, 1)
      this.callEchart('education_box', this.education5, 1)
      this.callEchart('education_box', this.education6, 1)
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1040'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let data = res.data
        this.educationTitle1 = data[0].SCHOOL_NAME
        this.educationTitle2 = data[1].SCHOOL_NAME
        let total1 = data[0].TEACHER_COUNT + data[0].CLASS_COUNT + data[0].STUDENT_COUNT
        this.education1.total = total1
        this.education1.already = data[0].TEACHER_COUNT
        this.education1.rate = (data[0].TEACHER_COUNT / total1).toFixed(2) * 100
        this.education2.total = total1
        this.education2.already = data[0].CLASS_COUNT
        this.education2.rate = (data[0].CLASS_COUNT / total1).toFixed(2) * 100
        this.education3.total = total1
        this.education3.already = data[0].STUDENT_COUNT
        this.education3.rate = (data[0].STUDENT_COUNT / total1).toFixed(2) * 100
        let total2 = data[1].TEACHER_COUNT + data[1].CLASS_COUNT + data[1].STUDENT_COUNT
        this.education4.total = total2
        this.education4.already = data[1].TEACHER_COUNT
        this.education4.rate = (data[1].TEACHER_COUNT / total2).toFixed(2) * 100
        this.education5.total = total2
        this.education5.already = data[1].CLASS_COUNT
        this.education5.rate = (data[1].CLASS_COUNT / total2).toFixed(2) * 100
        this.education6.total = total2
        this.education6.already = data[1].STUDENT_COUNT
        this.education6.rate = (data[1].STUDENT_COUNT / total2).toFixed(2) * 100
        // 教育echart
        this.callEchart('education_box', this.education1, 1)
        this.callEchart('education_box', this.education2, 1)
        this.callEchart('education_box', this.education3, 1)
        this.callEchart('education_box', this.education4, 1)
        this.callEchart('education_box', this.education5, 1)
        this.callEchart('education_box', this.education6, 1)
      })
    },
    // 获取案件分析
    getCaseAnalysis () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1092'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        if (res.ret_code == 200) {
          let source = [
            ['案件分析' ],
            ['刑事案件' ],
            ['民事纠纷事件' ],
            ['聚众群体事件' ],
            ['黄赌毒事件' ],
            ['消防事件' ],
            ['突发应急事件' ],
            ['治安事件' ]
          ]
          res.data.forEach(item => {
            source[0].push(item.SJ)
            source[1].push(item.XS)
            source[2].push(item.MS)
            source[3].push(item.QZ)
            source[4].push(item.HDD)
            source[5].push(item.XF)
            source[6].push(item.TF)
            source[7].push(item.ZA)
          })
          this.case_analysis.source = source
          this.callEchart('case_analysis_box', this.case_analysis, 1.9)
        }
      })
    },
    // 获取案件处置率
    getCaseRate () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1091'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        if (res.ret_code == 200) {
          let arr = []
          res.data.forEach(item => {
            arr.push({title: item.CASETYPE, num1: item.PERCENT + '%', num2: item.CASECOUNT, percentage: item.PERCENT})
          })
          this.ajfx = arr
        }
      })
    },
    callEchart (idBox, data, offset) {
      const _width = document.getElementById(idBox).clientWidth
      this.$set(data, 'width', _width)
      this.$set(data, 'height', _width / offset)
    }
  }
}
</script>

<style scoped>
.panel-container{
  width: 100%;
  height: 100%;
  overflow: auto;
}
.bioBasis {
  display: flex;
  margin: 0.07rem 0;
}
/* 盒子 */
.row{
  width: 100%;
  overflow: hidden;
  margin: 0.07rem 0;
}
.col-33{
  width: 27%;
  float: left;
  margin: 0 3%;
}
.col-40{
  width: 40%;
  float: left;
}
.col-60{
  width: 60%;
  float: left;
}
/*  */
.module-corner {
  background: url("../../assets/images/moduleBg01.png") no-repeat left top;
  background-size: 100% 100%;
  padding: .03rem 0;
  position: relative;
}
.column1{
  width: 100%;
  padding: .03rem 0;
}
.column1>div{
  padding-right: .1rem;
}
.column2{
  width: 100%;
  overflow: auto;
  padding: .03rem .2rem .03rem 0;
}
.column2>div{
  width: 50%;
  float: left;
}
.column2>div:nth-child(even){
  padding-right: .08rem;
}
</style>