|
|
@@ -1,15 +1,908 @@
|
|
|
<template>
|
|
|
<div class="school-dash-container">
|
|
|
- <!-- 这里放学校看板页面 -->
|
|
|
+ <div class="schoolanalysebox" >
|
|
|
+ <div class="school-analyse-header bgimg">
|
|
|
+ <div class="school-analyse-headersbox">
|
|
|
+ <div class="school-analyse-headersbox-name">
|
|
|
+ <span>123456</span>
|
|
|
+ </div>
|
|
|
+ <div class="school-analyse-headersbox-basics">
|
|
|
+ <div class="items-basics">
|
|
|
+ <p class="items-basics-title">教师数：</p>
|
|
|
+ <p class="items-basics-num">{{anSchool.teachNum}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="items-basics">
|
|
|
+ <p class="items-basics-title">学生数：</p>
|
|
|
+ <p class="items-basics-num">{{anSchool.studentNum}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="items-basics">
|
|
|
+ <p class="items-basics-title">智慧教室：</p>
|
|
|
+ <p class="items-basics-num">{{anSchool.classNum}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="items-basics">
|
|
|
+ <p class="items-basics-title">资源数：</p>
|
|
|
+ <p class="items-basics-num">{{anSchool.classInfoNum}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="backbtn">
|
|
|
+ <Button size="small" @click="detailsback">
|
|
|
+ <Icon type="ios-arrow-back" />
|
|
|
+ 返回
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--课堂信息-->
|
|
|
+ <div class="class-datas">
|
|
|
+ <div class="class-info">
|
|
|
+ <div class="class-box box1" v-for="item in classroomsData.attend" :key="item.id">
|
|
|
+ <div class="classbox-num">{{item.value}}</div>
|
|
|
+ <div class="classbox-title">{{item.name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="class-total">
|
|
|
+ <div class="class-box total-box total1" v-for="itemD in classroomsData.details" :key="itemD.id">
|
|
|
+ <div class="classbox-num total-num">{{itemD.value}}</div>
|
|
|
+ <div class="classbox-title total-title">{{itemD.name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--课堂信息end-->
|
|
|
+ <div class="school-analyse-top">
|
|
|
+ <div class="school-analyse-top-left" >
|
|
|
+ <Bar :barData="detailsEchart.bar1"></Bar>
|
|
|
+ </div>
|
|
|
+ <div class="school-analyse-top-center">
|
|
|
+ <Bar :barData="detailsEchart.bar2"></Bar>
|
|
|
+ </div>
|
|
|
+ <div class="school-analyse-top-right">
|
|
|
+ <Bar :barData="detailsEchart.bar3"></Bar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="school-analyse-center">
|
|
|
+ <div class="school-analyse-center-bottom">
|
|
|
+ <div :class="[item.classname,'bottom-item']" v-for="item in detailsbasics" :key="item.id" >
|
|
|
+ <div class="bottom-item-header">
|
|
|
+ <!-- <svg class="icon" aria-hidden="true">
|
|
|
+ <use :xlink:href="item.icon"></use>
|
|
|
+ </svg> -->
|
|
|
+ <Icon :custom="item.icon" class="model-icon" />
|
|
|
+ <span>{{item.title}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="comparebox">
|
|
|
+ <p class="comparebox-num">{{item.num}}</p>
|
|
|
+ <p class="comparebox-subhead">
|
|
|
+ <span class="comparebox-subhead-title">{{item.today}}:</span>
|
|
|
+ <span class="comparebox-subhead-value">{{item.todayNum}}</span>
|
|
|
+ </p>
|
|
|
+ <p class="comparebox-subhead">
|
|
|
+ <span class="comparebox-subhead-title">{{item.subheading}}:</span>
|
|
|
+ <span class="comparebox-subhead-value">{{item.subheadingNum}}</span>
|
|
|
+ <span class="comparebox-subhead-state">
|
|
|
+ <!-- <el-image style="width: 12px; height: 12px" :src="imgdata[0].url" :fit="fit" v-if="item.subheadingState==='down'" />
|
|
|
+ <el-image style="width: 12px; height: 12px" :src="imgdata[1].url" :fit="fit" v-if="item.subheadingState==='up'" /> -->
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p class="comparebox-subhead">
|
|
|
+ <span class="comparebox-subhead-title">{{item.subhead}}:</span>
|
|
|
+ <span class="comparebox-subhead-value">{{item.subheadNum}}</span>
|
|
|
+ <span class="comparebox-subhead-state">
|
|
|
+ <!-- <el-image style="width: 12px; height: 12px" :src="imgdata[0].url" :fit="fit" v-if="item.subheadState==='down'" />
|
|
|
+ <el-image style="width: 12px; height: 12px" :src="imgdata[1].url" :fit="fit" v-if="item.subheadState==='up'" /> -->
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="school-analyse-center-line" >
|
|
|
+ <CommonLine :lineData="detailsEchart.line"></CommonLine>
|
|
|
+ <!-- <TestLine></TestLine> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="school-analyse-bottom">
|
|
|
+ <div class="school-analyse-bottom-left">
|
|
|
+ <div class="flag-as-box">年级占比</div>
|
|
|
+ <Gradepie :mapData="detailsGrade" v-show="detailsGrade.length > 0"></Gradepie>
|
|
|
+ <div class="notdatas" v-show="detailsGrade.length == 0">暂无数据</div>
|
|
|
+ </div>
|
|
|
+ <div class="school-analyse-bottom-right">
|
|
|
+ <div class="flag-as-box">科目占比</div>
|
|
|
+ <ConventionPie :pieData="detailsEchart.subject" v-show="detailsEchart.subject.series[0].data.length >0"></ConventionPie>
|
|
|
+ <div class="notdatas" v-show="detailsEchart.subject.series[0].data.length ==0">暂无数据</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Bar from './echart/bar.vue'
|
|
|
+import CommonLine from '../../areaMgmt/AreaEcharts/commonLine.vue'
|
|
|
+import Gradepie from '../../areaMgmt/AreaEcharts/gradePie.vue'
|
|
|
+import ConventionPie from '../../areaMgmt/AreaEcharts/conventionPie.vue'
|
|
|
+import * as echarts from 'echarts'
|
|
|
export default {
|
|
|
+ components:{
|
|
|
+ Bar,
|
|
|
+ CommonLine,
|
|
|
+ Gradepie,
|
|
|
+ ConventionPie
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ schoolDeatils:{
|
|
|
+ name:'123456'
|
|
|
+ },
|
|
|
+ anSchool:{
|
|
|
+ teachNum: 0,
|
|
|
+ studentNum: 0,
|
|
|
+ classNum: 0,
|
|
|
+ classInfoNum: 0,
|
|
|
+ //下面的图表
|
|
|
+ class: 0,
|
|
|
+ activity: 0,
|
|
|
+ interact: 0,
|
|
|
+ classed: [],
|
|
|
+ activitys: [],
|
|
|
+ interacts: [],
|
|
|
+ times: ['11','22'],
|
|
|
+ },
|
|
|
+ classroomsData:{
|
|
|
+ attend: [
|
|
|
+ { id: 1, name: '课堂总数', value: 0 },
|
|
|
+ { id: 2, name: '今日课堂', value: 0 },
|
|
|
+ { id: 3, name: '本周课堂', value: 0 },
|
|
|
+ { id: 4, name: '本月课堂', value: 0 },
|
|
|
+ { id: 5, name: '本年课堂', value: 0 },
|
|
|
+ ],
|
|
|
+ details: [
|
|
|
+ { id: 1, name: '课堂总时数', value: 0 },
|
|
|
+ { id: 2, name: '课堂总参与人次', value: 0 },
|
|
|
+ { id: 3, name: '课堂总互动次数', value: 0 },
|
|
|
+ { id: 4, name: '课堂任务总人次', value: 0 },
|
|
|
+ { id: 5, name: '课堂提问总题数', value: 0 },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ detailsEchart:{
|
|
|
+ bar1: {
|
|
|
+ timeline: {
|
|
|
+ axisType: 'category',
|
|
|
+ show: false,
|
|
|
+ autoPlay: false,
|
|
|
+ playInterval: 1000,
|
|
|
+ data: [11,15,13,14,15],
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '25%',
|
|
|
+ bottom: '1.5%',
|
|
|
+ left: '5%',
|
|
|
+ right: '5%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ interval: 0,
|
|
|
+ rotate: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: '#A6D3FD',
|
|
|
+ fontSize: 10,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ show: true,
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ data: ['1月','2月','3月','4月','5月',],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}',
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '课例',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '20',
|
|
|
+ data: [11,15,16,18,17],
|
|
|
+ itemStyle: {
|
|
|
+ //lenged文本
|
|
|
+ opacity: 1,
|
|
|
+ color: function () {
|
|
|
+ return new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ 0,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(162, 155, 254,0.2)', // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(112, 103, 245, 0.5)', // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ )
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ bar2: {
|
|
|
+ timeline: {
|
|
|
+ axisType: 'category',
|
|
|
+ show: false,
|
|
|
+ autoPlay: false,
|
|
|
+ playInterval: 1000,
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '25%',
|
|
|
+ bottom: '1.5%',
|
|
|
+ left: '2%',
|
|
|
+ right: '5%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ interval: 0,
|
|
|
+ rotate: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: '#A6D3FD',
|
|
|
+ fontSize: 10,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ show: true,
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ data: ['1月','2月','3月','4月','5月',],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}',
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //变量则写在options中
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '活动',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '20',
|
|
|
+ data: [11,15,16,14,18],
|
|
|
+ itemStyle: {
|
|
|
+ //lenged文本
|
|
|
+ opacity: 1,
|
|
|
+ color: function () {
|
|
|
+ return new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ 0,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(250, 177, 160,0.5)', // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(255, 117, 26, 0.7)', // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ )
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ bar3: {
|
|
|
+ timeline: {
|
|
|
+ axisType: 'category',
|
|
|
+ show: false,
|
|
|
+ autoPlay: false,
|
|
|
+ playInterval: 1000,
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '25%',
|
|
|
+ bottom: '1.5%',
|
|
|
+ left: '5%',
|
|
|
+ right: '5%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ interval: 0,
|
|
|
+ rotate: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: '#A6D3FD',
|
|
|
+ fontSize: 10,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ show: true,
|
|
|
+ type: 'shadow',
|
|
|
+ },
|
|
|
+ data: ['1月','2月','3月','4月','5月',],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}',
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //变量则写在options中
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '互动',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '20',
|
|
|
+ data: [10,5,9,78,12],
|
|
|
+ itemStyle: {
|
|
|
+ //lenged文本
|
|
|
+ opacity: 1,
|
|
|
+ color: function () {
|
|
|
+ return new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ 0,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(29, 227, 255,.3)', // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(29, 227, 255,.9)', // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ )
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ line: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ crossStyle: {
|
|
|
+ color: '#999',
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '25%',
|
|
|
+ left: '2%',
|
|
|
+ bottom: '5%',
|
|
|
+ right: '2%',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ // data: this.anSchool.times,
|
|
|
+ data:['1月','2月','3月','4月','5月'],
|
|
|
+ textStyle: {
|
|
|
+ color: '#000',
|
|
|
+ },
|
|
|
+ right: '20%',
|
|
|
+ top: '15%',
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data:['1月','2月','3月','4月','5月'],
|
|
|
+ boundaryGap: false,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '全年各月总数据',
|
|
|
+ type: 'line',
|
|
|
+ symbolSize: 8,
|
|
|
+ markPoint: {
|
|
|
+ data: [
|
|
|
+ { type: 'max', name: 'Max' },
|
|
|
+ { type: 'min', name: 'Min' },
|
|
|
+ ],
|
|
|
+ label: {
|
|
|
+ color: '#FFF', // 文字颜色
|
|
|
+ padding: [0, 0, 5, 0], // 可用padding调整图片内文字距离
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [11,68,30,482,30],
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(3,118,255,.5)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: 'rgba(3,118,255,.5)',
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(3,118,255,.3)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(3,118,255,.9)'
|
|
|
+ }
|
|
|
+ ], false),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ subject: {
|
|
|
+ // color: ['#ef5777', '#0fbcf9', '#0be881', '#575fcf', '#ffd32a', '#55E6C1', '#3742fa', '#B33771', '#F8EFBA'],
|
|
|
+ color: ['#3fb1e3', '#6be6c1', '#626c91', '#a0a7e6', '#c4ebad', '#96dee8'],
|
|
|
+ // title: {
|
|
|
+ // text: '科目占比',
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: '12',
|
|
|
+ // color: '#b2bec3',
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+
|
|
|
+ legend: {
|
|
|
+ right: '10%',
|
|
|
+ orient: 'vertical',
|
|
|
+ itemWidth: 10,
|
|
|
+ itemHeight: 10, // 修改icon图形大小
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 14,
|
|
|
+ color: '#333',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '科目占比',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '80%',
|
|
|
+ center: ['45%', '50%'],
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 2,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ position: 'inner',
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ detailsGrade:[ {
|
|
|
+ value: 0,
|
|
|
+ name: '123',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ name: '456',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ name: '789',
|
|
|
+ },],
|
|
|
+ detailsbasics:[
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: '课例',
|
|
|
+ num: 0,
|
|
|
+ icon: 'iconfont icon-zhihuiketang',
|
|
|
+ subheading: '昨日对比',
|
|
|
+ subheadingNum: '0%',
|
|
|
+ subheadingState: '',
|
|
|
+ subhead: '上月对比',
|
|
|
+ subheadNum: '0%',
|
|
|
+ subheadState: '',
|
|
|
+ classname: 'purples',
|
|
|
+ today: '今日数据',
|
|
|
+ todayNum: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: '活动',
|
|
|
+ num: 0,
|
|
|
+ icon: 'iconfont icon-activity-line',
|
|
|
+ subheading: '昨日对比',
|
|
|
+ subheadingNum: '0%',
|
|
|
+ subheadingState: '',
|
|
|
+ subhead: '上月对比',
|
|
|
+ subheadNum: '0%',
|
|
|
+ subheadState: '',
|
|
|
+ classname: 'oranges',
|
|
|
+ today: '今日数据',
|
|
|
+ todayNum: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: '互动',
|
|
|
+ num: 0,
|
|
|
+ icon: 'iconfont icon-hudong2',
|
|
|
+ subheading: '昨日对比',
|
|
|
+ subheadingNum: '0%',
|
|
|
+ subheadingState: '',
|
|
|
+ subhead: '上月对比',
|
|
|
+ subheadNum: '0%',
|
|
|
+ subheadState: '',
|
|
|
+ classname: 'blues',
|
|
|
+ today: '今日数据',
|
|
|
+ todayNum: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: '总数据',
|
|
|
+ num: 0,
|
|
|
+ icon: 'iconfont icon-suoyouzhijieguidangjilu',
|
|
|
+ subheading: '上月对比',
|
|
|
+ subheadingNum: '0%',
|
|
|
+ subheadingState: '',
|
|
|
+ subhead: '去年对比',
|
|
|
+ subheadNum: '0%',
|
|
|
+ subheadState: '',
|
|
|
+ classname: 'total',
|
|
|
+ today: '今日数据',
|
|
|
+ todayNum: 0,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ detailsback(){
|
|
|
+ this.$router.push('/dashCenter')
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-
|
|
|
+<style scoped>
|
|
|
+.school-dash-container{
|
|
|
+ padding: 1%;
|
|
|
+ background-image: url('./bg-img.jpg');
|
|
|
+ background-size: contain;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.schoolanalysebox {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ /* overflow: hidden;
|
|
|
+ overflow-y: auto; */
|
|
|
+ background-color: rgba(240,240,245,.6);
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.school-analyse-header {
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 5px 5px 0px 0px;
|
|
|
+}
|
|
|
+.bgimg {
|
|
|
+ background-color: rgb(81, 86, 184);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center center;
|
|
|
+ /* background: linear-gradient(90deg, #36d1dc, #5b86e5); */
|
|
|
+ /* background: linear-gradient(90deg, rgba(54, 209, 220, 0.7), rgba(91, 134, 229, 0.7)); */
|
|
|
+ background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
|
|
|
+}
|
|
|
+.school-analyse-headersbox {
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.school-analyse-headersbox-name {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: hsla(0, 0%, 100%, 0.9);
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ margin-top: 2%;
|
|
|
+}
|
|
|
+.school-analyse-headersbox-basics {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.items-basics {
|
|
|
+ width: 23%;
|
|
|
+ padding: 1%;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.items-basics-title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: hsla(0, 0%, 100%, 0.9);
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+.items-basics-num {
|
|
|
+ font-size: 22px;
|
|
|
+ color: hsla(0, 0%, 100%, 0.9);
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.backbtn {
|
|
|
+ position: absolute;
|
|
|
+ left: 1%;
|
|
|
+ top: 2%;
|
|
|
+}
|
|
|
+.backbtnicon {
|
|
|
+ width: 1em;
|
|
|
+ height: 1em;
|
|
|
+ vertical-align: -0.1em;
|
|
|
+ fill: currentColor;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 2px;
|
|
|
+}
|
|
|
+.class-datas {
|
|
|
+ width: 100%;
|
|
|
+ /* background: #fff; */
|
|
|
+ margin-top: 1%;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.class-info,
|
|
|
+.class-total {
|
|
|
+ width: 100%;
|
|
|
+ padding: 1%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.class-box {
|
|
|
+ width: 15%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ /* background-color: #eef4fb; */
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 0px 5px hsl(0deg 0% 0% /0.05);
|
|
|
+}
|
|
|
+.classbox-num {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #043d75;
|
|
|
+}
|
|
|
+.classbox-title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #AAA8AD;
|
|
|
+ /* font-weight: 600; */
|
|
|
+}
|
|
|
+.school-analyse-top {
|
|
|
+ /* width: 100%; */
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: #fff;
|
|
|
+ /* margin-top: 1%; */
|
|
|
+ flex-wrap: wrap;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 0% 1% 1% 1%;
|
|
|
+}
|
|
|
+.school-analyse-top-left,
|
|
|
+.school-analyse-top-center,
|
|
|
+.school-analyse-top-right {
|
|
|
+ width: 30%;
|
|
|
+ height: 240px;
|
|
|
+ border-right: 1px dashed rgba(200, 214, 229, 0.7);
|
|
|
+ margin: 1%;
|
|
|
+ padding-right: 1%;
|
|
|
+}
|
|
|
+.school-analyse-top-right {
|
|
|
+ border-right: 0px;
|
|
|
+}
|
|
|
+.school-analyse-center {
|
|
|
+ /* width: 100%; */
|
|
|
+ height: 40vh;
|
|
|
+ /* margin-top: 1%; */
|
|
|
+ background: #fff;
|
|
|
+ padding: 1%;
|
|
|
+ margin:1%;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.school-analyse-center-bottom {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.bottom-item {
|
|
|
+ width: 24%;
|
|
|
+ height: 160px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ background-color: rgba(112, 103, 245, 0.3);
|
|
|
+ border-radius: 10px;
|
|
|
+ position:relative;
|
|
|
+}
|
|
|
+.bottom-item-header {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.school-analyse-center-line {
|
|
|
+ width: 100%;
|
|
|
+ height: 21vh;
|
|
|
+}
|
|
|
+.comparebox-subhead {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.comparebox-num {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.comparebox-subhead-value,
|
|
|
+.comparebox-subhead-state {
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+.school-analyse-bottom {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 1%;
|
|
|
+ margin-bottom: 1%;
|
|
|
+}
|
|
|
+.school-analyse-bottom-left,
|
|
|
+.school-analyse-bottom-right {
|
|
|
+ width: 48%;
|
|
|
+ height: 32vh;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin:0% 1% 1% 1%;
|
|
|
+ position:relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.school-analyse-bottom-left{
|
|
|
+ position:relative;
|
|
|
+}
|
|
|
+.flag-as-box{
|
|
|
+ position:absolute;
|
|
|
+ top:2px;
|
|
|
+ left:5px;
|
|
|
+ font-size:14px;
|
|
|
+ color:#B8C3C7;
|
|
|
+}
|
|
|
+.notdatas{
|
|
|
+ font-size:16px;
|
|
|
+ font-weight: 700;
|
|
|
+ color:#909399;
|
|
|
+}
|
|
|
+.model-icon{
|
|
|
+ fill: currentColor;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #fff;
|
|
|
+ margin-right:5px;
|
|
|
+}
|
|
|
+.purples {
|
|
|
+ /* background: rgba(112, 103, 245, 0.3); */
|
|
|
+ background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
|
|
|
+}
|
|
|
+.oranges {
|
|
|
+ /* background: rgba(255, 117, 26, 0.3); */
|
|
|
+ background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
|
|
|
+}
|
|
|
+.blues {
|
|
|
+ /* background: rgba(29, 227, 255, 0.3); */
|
|
|
+ background-image: linear-gradient(62deg, #74EBD5 0%, #9FACE6 100%);
|
|
|
+}
|
|
|
+.total {
|
|
|
+ /* background: rgba(26, 125, 255, 0.3); */
|
|
|
+ background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
|
|
|
+}
|
|
|
</style>
|
