<template>
  <panel-container>
    <modular-layout>
      <panel-title-1>智慧教育</panel-title-1>
    <div class="Modular_main">
      <div>
        <vue-scroll>
          <div class="row">
            <div class="col-40">
              <TitleThree title="学校信息" />
              <div id="school_info_id_box" class="Modular_left">
                <div id="school_info_id"></div>
              </div>
            </div>
            <div class="col-25">
              <TitleThree title="学校数量" />
              <div id="school_num_box" class="">
                <EchartBar1Color
                  :id="school_num.id"
                  :width="school_num.width"
                  :height="school_num.height"
                  :xAxisData="school_num.xAxisData"
                  :seriesData="school_num.seriesData"
                />
              </div>
            </div>
            <div class="col-35">
              <TitleThree title="系统访问" />
              <div class="Modular_left Modular_right">
                <DataListCols :data="systemAccess" :title="['学校','老师访问','学生访问']" >
                  <Corner2 slot="corner" />
                </DataListCols>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-65">
              <TitleThree title="教学资源" />
              <div class="Modular_left">
                <TeachingResour style="overflow: hidden;min-height: .97rem;margin:0" />
              </div>
            </div>
            <div class="col-35">
              <TitleThree title="监测设备" />
              <div class="Modular_left">
                <div class="module-corner">
                  <div style="width: 100%; padding: .02rem .05rem .02rem 0; overflow:hidden;">
                    <div class="col-55" id="education_cont_box">
                      <ProgressBarMany
                        :id="education_cont.id"
                        :width="education_cont.width"
                        :height="education_cont.height"
                        :unit="education_cont.unit"
                        :yAxisData="education_cont.yAxisData"
                        :seriesData="education_cont.seriesData"
                      />
                    </div>
                    <div class="col-45 education_bg">
                      <div class="education_til">
                        <p>日期</p>
                        <p>上报次数</p>
                        <p>整改次数</p>
                      </div>
                        <div class="education_data" v-for="(item,index) in education_data" :key="index">
                          <p>{{item.date}}</p>
                          <p>{{item.total}}</p>
                          <p>{{item.occupancy}}</p>
                        </div>
                      </div>
                    </div>
                  <Corner2 />
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-50">
              <TitleThree title="监测设备" />
              <div class="Modular_left">
                <div id="monitor_equipment_box">
                  <EchartBar1
                    :id="monitor_equipment.id"
                    :width="monitor_equipment.width"
                    :height="monitor_equipment.height"
                    :xAxisData="monitor_equipment.xAxisData"
                    :seriesData="monitor_equipment.seriesData"
                  />
                </div>
              </div>
            </div>
            <div class="col-50">
              <TitleThree title="设备报警次数" />
              <div class="Modular_left">
                <DataListCols :data="equipmentAlert" :title="['单位','视频报警','门禁报警','投影报警']" />
              </div>
            </div>
          </div>
        </vue-scroll>
      </div>
    </div>
    </modular-layout>
  </panel-container>
</template>

<script>
import { schoolInfo } from './components/option'
import DataListCols from '@/components/board/DataListCols'
import TeachingResour from './components/TeachingResour'
import Corner2 from "@/components/Corner2"
import DataList from '@/components/DataList'
import Legend from "@/components/echart/Legend"
import ProgressBar from "@/components/echart/ProgressBar"
import LitterTitle from "@/components/title/LitterTitle"
import EchartBar1Color from '@/components/echart/EchartBar1Color'
import EchartBar1 from '@/components/echart/EchartBar1'
import ProgressBarMany from '@/components/echart/ProgressBarMany'
export default {
  components:{
    DataListCols,
    TeachingResour,
    Corner2,
    DataList,
    Legend,
    ProgressBar,
    LitterTitle,
    EchartBar1Color,
    EchartBar1,
    ProgressBarMany
  },
  data() {
    return {
      rquestUrl: 'http://10.18.0.81:8314',
      params: {},
      // 学校信息
      school_info: [
        {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,},
      ],
      // 案件分析option
      school_info_option: schoolInfo(),
      // 学校数量
      school_num:{
        id: 'school_num_id',
        width: 0,
        height: 0,
        xAxisData: [],
        seriesData: []
      },
      // 系统访问
      systemAccess:[
        // { name: "2019-09-23 13:45:22", num: "100", unit:'（次)' },
      ],
      // 监测设备
      education_cont:{
        id: 'education_cont_id',
        width: 0,
        height: 0,
        yAxisData: ['1月','2月','3月','4月','5月'],
        seriesData: [
          {name:'空闲数',data:[45, 45, 45, 45, 45],color:'#ff9f00', zlevel: 10},
          {name:'总数量',data:[100, 80, 100, 90, 140],color:'#0468f1', zlevel: 0},
        ],
      },
      education_data: [
        {date: '1月', total: 152, occupancy: 85},
        {date: '2月', total: 152, occupancy: 85},
        {date: '3月', total: 152, occupancy: 85},
        {date: '4月', total: 152, occupancy: 85},
        {date: '5月', total: 152, occupancy: 85}
      ],
      // 监测设备
      monitor_equipment:{
        id: 'monitor_equipment',
        width: 0,
        height: 0,
        xAxisData:[],
        seriesData: []
      },
      // 设备报警次数
      equipmentAlert:[
        { name: "园林一", num1: "100", num2: "100", num3: "100"},
        { name: "园林一", num1: "100", num2: "100", num3: "100"},
        { name: "园林一", num1: "100", num2: "100", num3: "100"},
        { name: "园林一", num1: "100", num2: "100", num3: "100"},
        { name: "园林一", num1: "100", num2: "100", num3: "100"}
      ],
    }
  },
  computed: {
    baseParams () {
      return this.$store.state.baseParams
    }
  },
  mounted() {
    this.getSchoolInfo();
    this.getSchoolNum();
    this.getSystemAccess();
    // 监测设备
    this.getMonitorQty();
    // 监测设备echart
    this.callEchart('education_cont_box',this.education_cont, .9);

  },
  methods: {
    // 学校信息柱状图
    schoolInfoEchart(id,option) {
      // 定义echart宽高
      const _div = document.getElementById(id);
      const _width = document.getElementById(id + "_box").offsetWidth;
      _div.style.width = _width + "px";
      _div.style.height = _width/1.5 + "px";
      this.initEchart(id,option);
    },
    initEchart(id, option) {
      const _div = document.getElementById(id);
      let myChart = this.$echarts.init(_div);
      myChart.setOption(option);
    },
    // 获取学校信息
    getSchoolInfo(){
      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 => {
        if (res.ret_code == 200) {
          let source = [];
          res.data.forEach((item,index)=>{
            if(index<8){
              source.push([item.SCHOOL_NAME,item.TEACHER_COUNT,item.CLASS_COUNT,item.STUDENT_COUNT]);
            }else{
              return
            }
          })
          this.school_info_option.dataset.source = [...this.school_info_option.dataset.source, ...source];
          // 学校信息echart
          this.schoolInfoEchart('school_info_id',this.school_info_option);
        }
      })
    },
    // 获取学校数量
    getSchoolNum(){
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1041'
      }
      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.COUNT);
          })
          this.school_num.xAxisData = xAxisData;
          this.school_num.seriesData = seriesData;
          // 学校数量echart
          this.callEchart('school_num_box',this.school_num, 1.03);
        }
      })
    },
    // 获取系统访问
    getSystemAccess(){
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1078'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params,
      }).then(res => {
        if (res.ret_code == 200) {
          res.data.forEach((item,index)=>{
            if(index < 6){
              this.systemAccess.push({ name: item.XXMC,num1: item.JSFWSL, num2: item.XSFWSL, unit:'（次)' })
            }else{
              return
            }
          })
        }
      })
    },
    // 获取监测设备
    getMonitorQty(){
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1067'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params,
      }).then(res => {
        let xAxisData = [];
        let seriesData = [];
        res.data.forEach(item=>{
          xAxisData.push(item.LX);
          seriesData.push(item.SL);
        })
        this.monitor_equipment.xAxisData = xAxisData;
        this.monitor_equipment.seriesData = seriesData;
        this.callEchart('monitor_equipment_box', this.monitor_equipment,2.3);
      })
    },

    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;
}
/* 盒子 */
.row{
  width: 100%;
  overflow: hidden;
  margin: 0.07rem 0;
}
.row-flex{
  display:flex;
  justify-content:space-between;
}
.col-50{
  width: 50%;
  float: left;
}
.col-40{
  width: 40%;
  float: left;
}
.col-25{
  width: 25%;
  float: left;
}
.col-35{
  width: 35%;
  float: left;
}
.col-65{
  width: 65%;
  float: left;
}
.col-55{
  width: 55%;
  float: left;
}
.col-45{
  width: 45%;
  float: left;
}
/* 基础信息 */
.education_bg{background:#05164a;border-radius:.03rem; padding:0.02rem;}
.education_til{display:flex;border-bottom:1px dashed #1c2c68}
.education_til p{width:33%;text-align:center;font-size:0.01rem; padding: .02rem 0;}
.education_til p:first-child{color:#78bffd;}
.education_til p:nth-child(2){color:#0b65ef;}
.education_til p:nth-child(3){color:#ffa300;}
.education_data{display:flex;}
.education_data p{width:33%;text-align:center;font-size:0.01rem;line-height:0.11rem; padding: .015rem 0;}
.education_data p:first-child{color:#78bffd;}
.education_data p:nth-child(2){color:#0b65ef;font-weight:bold;}
.education_data p:nth-child(3){color:#ffa300;font-weight:bold;}
</style>
<style>
.page-zhjy .dataListBox li{
  padding: .062rem .08rem !important;
}
.dataListBox thead td{
  padding: 0.045rem .02rem !important;
}
.page-zhjy .dataListBox tbody tr td{
  padding: 0.045rem .04rem !important;
}
.page-zhjy .dataListBox tbody tr td:first-child{
  width: 36% !important;
}
.page-zhjy .dataListBox tbody tr td:last-child{
  width: 32% !important;
}
</style>