TEAMModelOS/TEAMModelBI/ClientApp/src/view/userInquire/iot.vue

<template>
    <div class="details-analysis">
      <!--默认样式  某个学校的分析数据-->
      <div>
        <div class="contentbox">
          <div class="basicsdata-box">
            <div class="basicadata-item" v-for="(item,index) in basicaList" :key="index">
              <div class="item-title-images">
                <div class="item-title">{{item.title}}</div>
                <div class="item-images">
                  <svg class="analysisicon" aria-hidden="true">
                    <use :xlink:href="item.icon"></use>
                  </svg>
                </div>
              </div>
              <div :class="[item.key === 'classtime' || item.key === 'participationnum' ? 'item-nums-special':'item-nums']">
                <p v-if="item.key === 'classtime' || item.key === 'participationnum'">{{item.value}}<span class="timetag">Min</span><br /><span>{{Math.round(item.value/60)}}<span class="timetag">H</span></span></p>
                <p v-else>{{item.value}}</p>
              </div>
            </div>
          </div>
          <div class="apparatusAndpower">
            <div class="inuse-left">
              <p class="inuse-title">课中互动</p>
              <div class="inuse-item" v-for="(item,index) in inuseList" :key="index">
                <div class="item-img">
                  <svg class="inuseicon" aria-hidden="true">
                    <use :xlink:href="item.icon"></use>
                  </svg>
                </div>
                <div class="item-box">
                  <p>{{item.value}}</p>
                  <span>{{item.title}}</span>
                </div>
              </div>
            </div>
            <!-- <div class="apparatus-box">
              <p class="apparatus-title">设备与授权</p>
              <div class="apparatus-item" v-for="(item,index) in powerList.facility" :key="index">
                <div class="item-num">{{item.value}}</div>
                <span class="item-title">{{item.name}}</span>
              </div>
            </div>
            <div class="power-box">
              <p class="apparatus-title">课堂与授权</p>
              <div class="power-item" v-for="(item,index) in powerList.class" :key="index">
                <div class="item-num">{{item.value}}</div>
                <span class="item-title">{{item.name}}</span>
              </div>
            </div> -->
          </div>
          <div class="minxinbox">
            <div class="lessons-box">
              <div class="lessons-item" v-for="(items,indexs) in lessonsList" :key="indexs">
                <div class="lessons-img-title">
                  <div class="lessons-img">
                    <svg class="lessonsicon" aria-hidden="true">
                      <use :xlink:href="items.icon"></use>
                    </svg>
                  </div>
                  <!-- <div class="lesson-title">{{items.title}}</div> -->
                </div>
                <div class="inquirybox"><span>{{items.content}}</span></div>
                <div class="less-value">
                  <span class="lessvalue-num">{{items.value}}</span>
                  <!-- {{indexs+1 === lessonsList.length ? items.value:items.value}} -->
                  <span v-if="indexs+1 !== lessonsList.length">/堂课</span>
                </div>
                <div class="result-box">
                  <svg class="lessRicon" aria-hidden="true">
                    <use :xlink:href="items.value !==0 ? '#icon-zhengque2':'#icon-cuowu'"></use>
                  </svg>
                </div>
              </div>
            </div>
            <div class="inuse-right">
              <div class="inuse-total">
                <div class="class-title">多形态课堂</div>
              </div>
              <div class="echartsX">
                <Xlines :lineData="echartData.xlines"></Xlines>
              </div>
              <!-- <div class="inuse-below">
                <div class="below-item" v-for="(itemA,index) in classType" :key="index">
                  <p>{{itemA.name}}</p>
                  <div class="valuebox">
                    <span>{{itemA.value}}</span>
                  </div>
                  <div :class="itemA.class"></div>
                </div>
              </div> -->
            </div>
          </div>
        </div>
        <!--上一个或者下一个-->
        <!-- <div class="lastbtn">
          <div class="btn-ls">
            <svg class="last-btns" aria-hidden="true">
              <use xlink:href="#icon-icon-test"></use>
            </svg>
          </div>
          <div class="btn-ls-text">
            <p class="next-school">XXX学校</p>
            <p class="next-title">上一个学校</p>
          </div>
        </div>
        <div class="nextbtn">
          <div class="btn-ls">
            <svg class="last-btns" aria-hidden="true">
              <use xlink:href="#icon-icon-test1"></use>
            </svg>
          </div>
          <div class="btn-ls-text">
            <p class="next-school">XXX学校</p>
            <p class="next-title">下一个学校</p>
          </div>
        </div> -->
        <!--上一个或者下一个end-->
      </div>
    </div>
  </template>
  <script setup>
  import { ref, getCurrentInstance, defineEmits, computed, onMounted, watch } from 'vue'
  import Xlines from '@/components/echarts/Xline.vue'
  import * as echarts from 'echarts'
  let props = defineProps({
    detailsData: Object,
  })
  console.log(props.detailsData, '子组件')
  let value1 = ref('')
  let value = ref()
  let $myemit = defineEmits(['myback'])
  const activeName = ref('areas')
  let appearState = ref('area')
  const options = [
    {
      value: 'guide',
      label: 'Guide',
      children: [
        {
          value: 'disciplines',
          label: 'Disciplines',
          children: [
            {
              value: 'consistency',
              label: 'Consistency',
            },
            {
              value: 'feedback',
              label: 'Feedback',
            },
            {
              value: 'efficiency',
              label: 'Efficiency',
            },
            {
              value: 'controllability',
              label: 'Controllability',
            },
          ],
        },
        {
          value: 'navigation',
          label: 'Navigation',
          children: [
            {
              value: 'side nav',
              label: 'Side Navigation',
            },
            {
              value: 'top nav',
              label: 'Top Navigation',
            },
          ],
        },
      ],
    },
    {
      value: 'component',
      label: 'Component',
      children: [
        {
          value: 'basic',
          label: 'Basic',
          children: [
            {
              value: 'layout',
              label: 'Layout',
            },
            {
              value: 'color',
              label: 'Color',
            },
            {
              value: 'typography',
              label: 'Typography',
            },
            {
              value: 'icon',
              label: 'Icon',
            },
            {
              value: 'button',
              label: 'Button',
            },
          ],
        },
        {
          value: 'form',
          label: 'Form',
          children: [
            {
              value: 'radio',
              label: 'Radio',
            },
            {
              value: 'checkbox',
              label: 'Checkbox',
            },
            {
              value: 'input',
              label: 'Input',
            },
            {
              value: 'input-number',
              label: 'InputNumber',
            },
            {
              value: 'select',
              label: 'Select',
            },
            {
              value: 'cascader',
              label: 'Cascader',
            },
            {
              value: 'switch',
              label: 'Switch',
            },
            {
              value: 'slider',
              label: 'Slider',
            },
            {
              value: 'time-picker',
              label: 'TimePicker',
            },
            {
              value: 'date-picker',
              label: 'DatePicker',
            },
            {
              value: 'datetime-picker',
              label: 'DateTimePicker',
            },
            {
              value: 'upload',
              label: 'Upload',
            },
            {
              value: 'rate',
              label: 'Rate',
            },
            {
              value: 'form',
              label: 'Form',
            },
          ],
        },
        {
          value: 'data',
          label: 'Data',
          children: [
            {
              value: 'table',
              label: 'Table',
            },
            {
              value: 'tag',
              label: 'Tag',
            },
            {
              value: 'progress',
              label: 'Progress',
            },
            {
              value: 'tree',
              label: 'Tree',
            },
            {
              value: 'pagination',
              label: 'Pagination',
            },
            {
              value: 'badge',
              label: 'Badge',
            },
          ],
        },
        {
          value: 'notice',
          label: 'Notice',
          children: [
            {
              value: 'alert',
              label: 'Alert',
            },
            {
              value: 'loading',
              label: 'Loading',
            },
            {
              value: 'message',
              label: 'Message',
            },
            {
              value: 'message-box',
              label: 'MessageBox',
            },
            {
              value: 'notification',
              label: 'Notification',
            },
          ],
        },
        {
          value: 'navigation',
          label: 'Navigation',
          children: [
            {
              value: 'menu',
              label: 'Menu',
            },
            {
              value: 'tabs',
              label: 'Tabs',
            },
            {
              value: 'breadcrumb',
              label: 'Breadcrumb',
            },
            {
              value: 'dropdown',
              label: 'Dropdown',
            },
            {
              value: 'steps',
              label: 'Steps',
            },
          ],
        },
        {
          value: 'others',
          label: 'Others',
          children: [
            {
              value: 'dialog',
              label: 'Dialog',
            },
            {
              value: 'tooltip',
              label: 'Tooltip',
            },
            {
              value: 'popover',
              label: 'Popover',
            },
            {
              value: 'card',
              label: 'Card',
            },
            {
              value: 'carousel',
              label: 'Carousel',
            },
            {
              value: 'collapse',
              label: 'Collapse',
            },
          ],
        },
      ],
    },
    {
      value: 'resource',
      label: 'Resource',
      children: [
        {
          value: 'axure',
          label: 'Axure Components',
        },
        {
          value: 'sketch',
          label: 'Sketch Templates',
        },
        {
          value: 'docs',
          label: 'Design Documentation',
        },
      ],
    },
  ]
  const optionsS = [
    {
      value: 'Option1',
      label: 'Option1',
      children: [
        {
          value: 'axure',
          label: 'Axure Components',
        },
      ]
    },
    {
      value: 'Option2',
      label: 'Option2',
      children: [
        {
          value: 'axure1',
          label: 'Axure Components1',
        },
      ]
    },
    {
      value: 'Option3',
      label: 'Option3',
      children: [
        {
          value: 'axure2',
          label: 'Axure Components2',
        },
      ]
    },
  ]
  const props2 = {
    multiple: true,
    checkStrictly: true,
  }
  //查看学区详情 学校的列表
  let tableData = ref([
    {
      name: '成都市外国语小学',
      schoolnum: 56,
      teachnum: 132,
      studentnum: 560,
      classnum: 39,
      tnum: 78,
      timenum: 313,
      powertype: 1,
    },
  ])
  let filterValue = ref()
  let filterType = ref('day')
  let basicaList = ref([
    { title: '学生人次', icon: '#icon-zongrenshu', value: '7603', key: 'studentnum' },
    { title: '学生参与总时数', icon: '#icon-_shijian_xiaoshuai', value: '8小时', key: 'participationnum' },
    { title: '课堂总数', icon: '#icon-ketang', value: '45', key: 'classnum' },
    { title: '课堂总时数', icon: '#icon--shijian ', value: '648', key: 'classtime' },
  ])
  let powerList = ref({
    facility: [
      { name: '设备数量', value: 0, },
      { name: '无授权设备', value: 0, },
      { name: '授权设备', value: 0, }
    ],
    class: [
      { name: '928授权', value: 0 },
      { name: 'ID授权', value: 0 },
      { name: '设备授权', value: 0 },
      { name: '综合授权', value: 0 },
    ]
  })
  let itemWidth = ref((100 / basicaList.value.length).toFixed(2))
  let statisticsTime = ref({
    year: 0,
    month: 0,
    day: 0
  })
  //处理默认呈现还是学区呈现
  let schoolData = ref({
    name: '',
    region: '',
    province: '',
    city: '',
    dist: '',
  })
  let lessonsList = ref([
    { icon: '#icon--caozuorizhi', title: 'IES课程', content: '使用IES课程', state: true, value: 0 },
    { icon: '#icon--caozuorizhi', title: 'webIrs', content: '使用webIrs', state: true, value: 0 },
    { icon: '#icon--caozuorizhi', title: 'IRS', content: '使用IRS', state: true, value: 0 },
    { icon: '#icon--caozuorizhi', title: 'HiTA', content: '使用HiTA', state: false, value: 0 },
    { icon: '#icon--caozuorizhi', title: 'HaBoard', content: '使用HaBoard', state: false, value: 0 },
    { icon: '#icon--caozuorizhi', title: 'IES5资源', content: '使用IES5资源', state: true, value: 0 },
    { icon: '#icon--caozuorizhi', title: 'T指数', content: '课程T绿灯数', state: true, value: 0 },
  ])
  let inuseList = ref([
    { title: '学习任务数', value: 15, icon: '#icon-renwu', percent: '41.2%', class: 'task', textClass: 'task-text' },
    { title: '学习作品数', value: 10, icon: '#icon-yiwancheng-', percent: '30%', class: 'accomplish', textClass: 'accomplish-text' },
    { title: '测验题目数', value: 22, icon: '#icon-ic_mianxing_jiakaotimu_1', percent: '10%', class: 'topic', textClass: 'topic-text' },
    { title: '学生互动次数', value: 58, icon: '#icon-hudongshequ', percent: '5%', class: 'interaction', textClass: 'interaction-text' },
  ])
  let classType = ref([
    { name: '合作型态课堂', value: 20, percent: '41.2%', class: 'task', textClass: 'task-text' },
    { name: '互动型态课堂', value: 20, percent: '30%', class: 'accomplish', textClass: 'accomplish-text' },
    { name: '任务型态课堂', value: 20, percent: '10%', class: 'topic', textClass: 'topic-text' },
    { name: '差异化形态课堂', value: 20, percent: '5%', class: 'interaction', textClass: 'interaction-text' },
    { name: '测验型态课堂', value: 30, percent: '15%', class: 'testclass', textClass: 'testclass-text' },
    { name: '无型态课堂', value: 0, percent: '0%', class: 'noneclass', textClass: 'noneclassclass-text' },
    { name: '未上课', value: 0, percent: '0%', class: 'noneclass', textClass: 'noneclassclass-text' },
  ])
  let echartData = ref({
    total: 0,
    xlines: {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          show: true,
          status: 'shadow',
          z: -1,
          shadowStyle: {
            color: 'rgba(81, 138, 252, 0.1)',
          },
          type: 'shadow'
        }
      },
      grid: {
        bottom: '0%',
        left: '5%',
        right: '5%',
        top: '8%',
        containLabel: true,
      },
      xAxis: {
        position: 'bottom',
        type: 'category',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#ECF1F6'
          }
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          rotate: 0,
          fontSize: 12,
          color: 'rgba(0, 0, 0, 1)'
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(193, 207, 220, 1)',
            width: 0,
            type: 'dashed'
          }
        },
        boundaryGap: true, // 坐标轴两边是否留白
        data: ['合作', '互动', '任务', '差异化', '测验', '无型态', '未上课']
      },
      yAxis: [
        {
          type: 'value',
          position: 'left',
          minInterval: 0,
          // maxInterval: 5,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            rotate: 0,
            fontSize: 12,
            color: 'rgba(0, 0, 0, 1)',
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(193, 207, 220, 1)',
              width: 1,
              type: 'solid'
            }
          },
        }
      ],
      series: [
        {
          type: 'bar',
          data: [],
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(124, 135, 254, 1)"
              },
              {
                offset: 1,
                color: "rgba(81, 138, 252, 1)"
              }
              ])
            }
          },
          label: {
            normal: {
              show: true,
              position: "top",
              textStyle: {
                color: "rgba(63, 149, 218, 1)",
                fontSize: 18,
                fontFamily: 'DIN',
                fontWeight: 'bold'
              }
            }
          },
          barMaxWidth: '20%',
        }
      ]
    }
  })
  function init (transfervalue) {
    // let totalsArr = []
    // inuseList.value.forEach((item) => { totalsArr.push(item.value) })
    // console.log(totalsArr)
    // let totalNum = totalsArr.reduce(function (prev, cur) {
    //   return prev + cur;
    // })
    // props.pattern.state ==='school' ? appearState.value='default': props.pattern.state ==='area' ? appearState.value='area':appearState.value='default'
    
    let propsbox=transfervalue? transfervalue:props
    
    console.log(propsbox,props,'数据1234')
    //学校基础信息
    // let { name, region, province, city, dist } = propsbox.detailsData.school
    // schoolData.value.name = appearState.value ==='default' ? name: appearState.value ==='area' ? propsbox.detailsData.name:''
    // schoolData.value.region = region
    // schoolData.value.province = province
    // schoolData.value.city = city
    // schoolData.value.dist = dist
  
    //处理header基础信息
    let { schoolId, stuShow, lessonLengMin, lessonRecord, stuLessonLengMin, tmidCnt, year, month, day } = propsbox.detailsData
    statisticsTime.value.year = year
    statisticsTime.value.month = month
    statisticsTime.value.day = day
    console.log(schoolId, stuShow, '!!!!!')
    // basicaList.value[0].value = schoolId
    // basicaList.value[1].value = 0
    // basicaList.value[2].value = 0
    // basicaList.value[0].value = tmidCnt
    basicaList.value[0].value = stuShow
    basicaList.value[1].value = stuLessonLengMin
    basicaList.value[2].value = lessonRecord
    basicaList.value[3].value = lessonLengMin
  
    //处理课中使用数据
    let { useIES, useWebIrs, useDeviceIrs, useHita, useHaboard, useIES5Resource, tGreen } = propsbox.detailsData
    lessonsList.value[0].value = useIES
    lessonsList.value[1].value = useWebIrs
    lessonsList.value[2].value = useDeviceIrs
    lessonsList.value[3].value = useHita
    lessonsList.value[4].value = useHaboard
    lessonsList.value[5].value = useIES5Resource
    lessonsList.value[6].value = tGreen
  
    //授权占比
    // let { deviceCnt, deviceNoAuth, deviceAuth, lessonCnt928, lessonCntId, lessonCntDevice, lessonCntIdDevice } = propsbox.detailsData
    // powerList.value.facility[0].value = deviceCnt
    // // basicaList.value[2].value = deviceCnt
    // powerList.value.facility[1].value = deviceNoAuth
    // powerList.value.facility[2].value = deviceAuth
    // powerList.value.class[0].value = lessonCnt928
    // powerList.value.class[1].value = lessonCntId
    // powerList.value.class[2].value = lessonCntDevice
    // powerList.value.class[3].value = lessonCntIdDevice
    //处理任务数、作品完成、题目等。。。。
    let { mission, missionFin, item, interact } = propsbox.detailsData
    inuseList.value[0].value = mission
    inuseList.value[1].value = missionFin
    inuseList.value[2].value = item
    inuseList.value[3].value = interact
  
    //处理多形态课堂
    let { lTypeCoop, lTypeIact, lTypeMis, lTypeTst, lTypeDif, lTypeNone,lessonLeng0} = propsbox.detailsData
    let totalNum = [lTypeCoop, lTypeIact, lTypeMis, lTypeTst, lTypeDif].reduce((prev, cur) => { return prev + cur }, 0)
    echartData.value.total = totalNum
    console.log(totalNum)
    classType.value[0].value = lTypeCoop
    classType.value[0].percent = lTypeCoop === 0 ? 0 : (lTypeCoop / totalNum).toFixed(2) * 100
    classType.value[1].value = lTypeIact
    classType.value[1].percent = lTypeIact === 0 ? 0 : (lTypeIact / totalNum).toFixed(2) * 100
    classType.value[2].value = lTypeMis
    classType.value[2].percent = lTypeMis === 0 ? 0 : (lTypeMis / totalNum).toFixed(2) * 100
    classType.value[3].value = lTypeTst
    classType.value[3].percent = lTypeTst === 0 ? 0 : (lTypeTst / totalNum).toFixed(2) * 100
    classType.value[4].value = lTypeDif
    classType.value[4].percent = lTypeDif === 0 ? 0 : (lTypeDif / totalNum).toFixed(2) * 100
    classType.value[4].value = lTypeNone
    classType.value[5].value = lessonLeng0 ? lessonLeng0:0
  
    //echarts占比
    echartData.value.xlines.series[0].data = [lTypeCoop, lTypeIact, lTypeMis, lTypeTst, lTypeDif, lTypeNone, classType.value[5].value]
    // echartData.value.xlines.series[1].data = [classType.value[1].percent]
    // echartData.value.xlines.series[2].data = [classType.value[2].percent]
    // echartData.value.xlines.series[3].data = [classType.value[3].percent]
    // echartData.value.xlines.series[4].data = [classType.value[4].percent]

  }
  function detailsSchool(value){
    console.log(value,'查看要传的数据')
    let params={detailsData:value}
    init(params)
    appearState.value = 'default'
  }
  function backbtn () {
    $myemit('myback', 'default')
  }
onMounted(() => {
  init()
})
  watch(() => props, (newValue) => {
    console.log()
    //   propValue.value = newValue;
    let datas={detailsData:newValue.detailsData}
    init(datas)
  },{deep:true});
  watch(()=>props,(newdata)=>{
    console.log(newdata,'9999999999999999')
  })

  </script>
  <style  scoped>
  .details-analysis {
    width: 100%;
    position: relative;
  }
  .header-select {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 5px #e9e9e9;
  }
  .header-select-title,
  .header-select-box {
    display: inline-block;
    float: left;
    width: 50%;
    text-align: left;
    padding-left: 1%;
    line-height: 60px;
  }
  .header-select-title {
    font-size: 18px;
    font-weight: bold;
  }
  .header-select-box {
    text-align: right;
    padding-right: 1%;
  }
  .select-box-time,
  .select-box-area,
  .select-box-school {
    display: inline-block;
    vertical-align: top;
    padding-top: 1%;
  }
  .contentbox {
    width: 98%;
    /* padding: 1% 1%; */
    /* background: rgb(250, 250, 250); */
    /* height: 85vh; */
    /* margin: 0.5% 1%; */
    padding-bottom: 0.5%;
  }
  .area-contentbox {
    width: 100%;
    margin: 0%;
  }
  .analysisicon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.2em;
    fill: currentColor;
    /* overflow: hidden;
    margin-right: 25px;
    margin-left: 0px; */
  }
  .basicsdata-box {
    overflow: hidden;
    width: 100%;
    /* height: 30vh; */
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .apparatusAndpower {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    line-height: 60px;
    /* justify-content: space-between; */
  }
  .apparatus-box,
  .power-box {
    width: 32%;
    box-shadow: 0 2px 5px #e9e9e9;
    background: #fff;
    margin: 0.5%;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    flex-wrap: wrap;
  }
  .apparatus-item {
    width: 30%;
    margin: 0% 1%;
    box-shadow: 0 2px 5px #e9e9e9;
    background: #fff;
    border-radius: 5px;
    margin: 1%;
  }
  .power-item {
    width: 23%;
    margin: 0% 1%;
    box-shadow: 0 2px 5px #e9e9e9;
    background: #fff;
    border-radius: 5px;
    margin: 1%;
  }
  .apparatus-title {
    font-size: 16px;
    margin-bottom: 5px;
    border-bottom: 1px dashed #e9e9e9;
    line-height: 40px;
    width: 100%;
    background: #dfe6e9;
    color: #fff;
    font-weight: bold;
  }
  .inuse-title {
    width: 100%;
    background: #dfe6e9;
    margin-bottom: 5px;
    line-height: 25px;
    border-bottom: 1px dashed #e9e9e9;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
  }
  .item-num {
    font-size: 20px;
    font-weight: bold;
  }
  .basicadata-item {
    display: flex;
    width: 20%;
    padding: 5px 5px;
    flex-direction: column;
    /* height: 60px; */
    line-height: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px #e9e9e9;
    background: #fff;
    margin: 0.5%;
  }
  .item-title-images {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .item-title {
    font-size: 18px;
    font-weight: bold;
    color: #9ba1b4;
  }
  .item-nums {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    color: #303a5d;
  }
  .item-nums-special {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    color: #303a5d;
    line-height: 20px;
  }
  .timetag {
    font-size: 14px;
    margin-left: 1%;
    color: #7f8c8d;
  }
  .minxinbox {
    width: 100%;
    display: flex;
  }
  .lessons-box {
    width: 50%;
    height: 36.3vh;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 5px #e9e9e9;
    margin: 0.5% 1%;
    overflow: hidden;
    overflow-y: auto;
  }
  .lessons-item {
    width: 100%;
    padding: 0% 10%;
    display: flex;
    /* justify-content: center; */
    text-align: center;
    /* margin: 0 auto; */
    line-height: 40px;
    box-shadow: 0 2px 5px #e9e9e9;
    margin-top: 0.8%;
    background: #dfe6e9;
  }
  .lessons-img-title {
    width: 20%;
    display: flex;
    align-items: center;
  }
  .lessons-img {
    width: 45px;
    height: 45px;
    /* background: #bdc3c7; */
    position: relative;
    border-radius: 5px;
  }
  .lessonsicon {
    position: absolute;
    width: 25px;
    height: 25px;
    vertical-align: -0.5em;
    fill: currentColor;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .lesson-title {
    margin-left: 1%;
    font-size: 16px;
    color: #b2b2b9;
  }
  .inquirybox {
    width: 40%;
    font-size: 16px;
    font-weight: bold;
  }
  .less-value {
    width: 15%;
    color: #6fb1fc;
  }
  .result-box {
    width: 15%;
    text-align: right;
  }
  .lessRicon {
    width: 2em;
    height: 2em;
    vertical-align: -0.5em;
    fill: currentColor;
  }
  .lessvalue-num {
    font-size: 18px;
    color: #007fff;
  }
  .inuse-left {
    width: 100%;
    box-shadow: 0 2px 5px #e9e9e9;
    background: #fff;
    margin: 0.5%;
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  }
  .inuse-right {
    width: 49.5%;
    margin-left: 0%;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 5px #e9e9e9;
    margin: 0.5% 0%;
    /* margin-left: 1%; */
    position: relative;
  }
  .inuse-item {
    width: 22%;
    display: flex;
    height: 80px;
    /* line-height: 40px; */
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    /* box-shadow: 0 2px 5px #e9e9e9; */
    border: 1px solid #e9e9e9;
    margin: 0.5%;
  }
  .inuseicon {
    width: 1.6em;
    height: 1.6em;
    vertical-align: -0.5em;
    fill: currentColor;
  }
  .item-box {
    width: 54%;
    padding: 5px 0px;
    line-height: 20px;
  }
  .item-img {
    width: 45%;
  }
  .item-box p,
  .inuse-total p {
    font-size: 22px;
    color: #303a5d;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .item-box span,
  .inuse-total span {
    font-size: 14px;
    color: #b2b2b9;
  }
  .inuse-total {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 30%;
    line-height: 20px;
    text-align: left;
  }
  .echartsX {
    width: 100%;
    height: 90%;
    margin-top: 5%;
    overflow: hidden;
  }
  .inuse-below {
    width: 100%;
    display: flex;
    padding: 0% 1%;
    justify-content: space-between;
    align-items: center;
  }
  .below-item {
    width: 13%;
    line-height: 18px;
    text-align: left;
    margin-left: 2%;
  }
  .below-item p {
    text-align: left;
    font-size: 14px;
    color: #b2b2b9;
  }
  .valuebox {
    display: flex;
    justify-content: space-between;
  }
  .valuebox span {
    font-size: 18px;
    color: #303a5d;
    font-weight: bold;
    margin-left: 5px;
  }
  .valuebox span:nth-child(2) {
    font-size: 14px;
    margin-left: 30px;
    font-weight: bold;
  }
  .school-name {
    line-height: 40px;
    font-size: 20px;
    font-weight: bold;
    /* border-bottom: 1px dashed #ccc; */
    position: relative;
  }
  .class-title {
    margin-top: 0%;
    font-size: 16px;
    color: #303a5d;
  }
  .lastbtn {
    width: 80px;
    height: auto;
    line-height: 20px;
    position: absolute;
    left: 0.5%;
    top: 45%;
    opacity: 0.4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    font-size: 14px;
    padding: 5px;
  }
  .nextbtn {
    width: 80px;
    height: auto;
    line-height: 20px;
    position: absolute;
    right: 0.5%;
    top: 45%;
    opacity: 0.4;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    font-size: 14px;
    padding: 5px;
  }
  .lastbtn:hover,
  .nextbtn:hover {
    background-color: #dfe6e9;
    opacity: 1;
    box-shadow: rgba(6, 24, 44, 0.1) 0px 0px 0px 2px,
      rgba(6, 24, 44, 0.1) 0px 4px 6px -1px,
      rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    cursor: pointer;
  }
  .lastbtn:hover .btn-ls-text,
  .nextbtn:hover .btn-ls-text {
    opacity: 0.8;
  }
  .btn-ls {
    width: 100%;
  }
  .btn-ls-text {
    margin-top: 3px;
    color: #303a5d;
    opacity: 0;
  }
  .last-btns {
    width: 40px;
    height: 40px;
    vertical-align: -0.5em;
    fill: currentColor;
  }
  .btn-ls-text p {
    margin-bottom: 5px;
  }
  .next-school {
    font-size: 12px;
    color: #303a5d;
    font-weight: bold;
  }
  .next-title {
    font-size: 8px;
    color: #34495e;
  }
  .statistics-time {
    position: absolute;
    right: 0.5%;
    top: 0.5%;
    font-size: 14px;
    color: #9ba1b4;
  }
  .statistics-address {
    position: absolute;
    left: 0.5%;
    top: 0.5%;
    font-size: 14px;
    color: #9ba1b4;
  }
  /*学区样式*/
  .area-box {
    line-height: 60px;
  }
  .school-list {
    padding: 0.5%;
  }
  .areaFilter {
    padding: 0% 0.5%;
    display: flex;
    justify-content: space-between;
  }
  .task {
    border-bottom: 5px solid #60e9c0;
  }
  .accomplish {
    border-bottom: 5px solid #03241b;
  }
  .topic {
    border-bottom: 5px solid #62d0f3;
  }
  .interaction {
    border-bottom: 5px solid #fd79a8;
  }
  .testclass {
    border-bottom: 5px solid #c3bef0;
  }
  .noneclass {
    border-bottom: 5px solid #95a5a6;
  }
  .task-text {
    color: #60e9c0 !important;
  }
  .accomplish-text {
    color: #03241b !important;
  }
  .topic-text {
    color: #62d0f3 !important;
  }
  .interaction-text {
    color: #fd79a8 !important;
  }
  .testclass-text {
    color: #c3bef0 !important;
  }
  .noneclassclass-text {
    color: #95a5a6 !important;
  }
  @media screen and (max-width: 1400px) {
    .basicadata-item {
      line-height: 30px !important;
    }
    .item-img {
      width: 35% !important;
    }
    .item-box {
      width: 65% !important;
    }
    .inuse-total {
      line-height: 16px;
    }
    .echartsX {
      height: 95%;
      margin-top: 4%;
    }
    .inuse-total {
      top: 0%;
    }
  }
  </style>
  <style>
  .select-box-time .el-date-editor,
  .select-box-area .el-cascader,
  .select-box-school .el-cascader {
    display: inline-block;
    vertical-align: top;
  }
  .area-box .el-tabs__header {
    box-shadow: 0 2px 5px #e9e9e9;
    background-color: #fff;
    margin: 0px 0px 1px;
  }
  .area-box .el-tabs__nav-wrap {
    padding: 0% 0.5%;
  }
  .area-box .el-tabs__header {
    margin: 0;
  }
  .contentbox .el-divider {
    margin: 10px 0;
  }
  </style>