|
|
@@ -18,7 +18,10 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="contentbox">
|
|
|
- <div class="school-name">学校名称</div>
|
|
|
+ <div class="school-name">
|
|
|
+ <span>学校名称</span>
|
|
|
+ <div class="statistics-time">统计时间：<span>2023.03.07-2023.03.08</span></div>
|
|
|
+ </div>
|
|
|
<div class="basicsdata-box">
|
|
|
<div class="basicadata-item" v-for="(item,index) in basicaList" :key="index">
|
|
|
<div class="item-title-images">
|
|
|
@@ -45,7 +48,7 @@
|
|
|
<div class="lesson-title">{{items.title}}</div>
|
|
|
</div>
|
|
|
<div class="inquirybox"><span>{{items.content}}</span></div>
|
|
|
- <div class="less-value" v-show="!items.value">{{items.value}}</div>
|
|
|
+ <div class="less-value">{{items.value}}</div>
|
|
|
<div class="result-box">
|
|
|
<svg class="lessRicon" aria-hidden="true" v-show="items.state ===true">
|
|
|
<use xlink:href="#icon-zhengque2"></use>
|
|
|
@@ -72,15 +75,15 @@
|
|
|
</div>
|
|
|
<div class="inuse-right">
|
|
|
<div class="inuse-total">
|
|
|
- <p>{{echartData.total}}</p>
|
|
|
- <span>使用情况总量</span>
|
|
|
+ <p>450<span>/堂课</span></p>
|
|
|
+ <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 inuseList" :key="index">
|
|
|
- <p>{{itemA.title}}</p>
|
|
|
+ <div class="below-item" v-for="(itemA,index) in classType" :key="index">
|
|
|
+ <p>{{itemA.name}}</p>
|
|
|
<div class="valuebox">
|
|
|
<span>{{itemA.value}}</span>
|
|
|
<span :class="itemA.textClass">{{itemA.percent}}</span>
|
|
|
@@ -91,14 +94,39 @@
|
|
|
</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>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { ref, getCurrentInstance, defineEmits } from 'vue'
|
|
|
+import { ref, getCurrentInstance, defineEmits, computed, onMounted } from 'vue'
|
|
|
import Xlines from '@/components/echarts/Xline.vue'
|
|
|
let value1 = ref('')
|
|
|
let value = ref()
|
|
|
let $myemit = defineEmits(['myback'])
|
|
|
+let appearState = ref('default')
|
|
|
let itemWidth = ref((100 / 7).toFixed(2))
|
|
|
const options = [
|
|
|
{
|
|
|
@@ -406,6 +434,7 @@ const props2 = {
|
|
|
}
|
|
|
let basicaList = ref([
|
|
|
{ title: '学校简码', icon: '#icon-xuanzexuexiao-01', value: 'hbcn' },
|
|
|
+ { title: '学校数量', icon: '#icon-xuexiao9', value: '32' },
|
|
|
{ title: '教室总数', icon: '#icon-shouhuifangzi', value: '65' },
|
|
|
{ title: '教师总数', icon: '#icon-jiaoshijie', value: '158' },
|
|
|
{ title: '学生人次', icon: '#icon-zongrenshu', value: '7603' },
|
|
|
@@ -413,13 +442,18 @@ let basicaList = ref([
|
|
|
{ title: '课堂总时数', icon: '#icon--shijian ', value: '648 min' },
|
|
|
{ title: '授权类型', icon: '#icon-guanfangshouquan', value: '已授权' },
|
|
|
])
|
|
|
+//处理默认呈现还是学区呈现
|
|
|
+onMounted(() => {
|
|
|
+ appearState.value === 'default' ? basicaList.value.splice(1, 1) : basicaList.value.splice(0, 1)
|
|
|
+})
|
|
|
+console.log(basicaList.value, '@@@@')
|
|
|
let lessonsList = ref([
|
|
|
- { icon: '#icon--caozuorizhi', title: 'IES课程', content: '是否使用IES课程', state: true, value: '' },
|
|
|
- { icon: '#icon--caozuorizhi', title: 'webIrs', content: '是否使用webIrs', state: true, value: '' },
|
|
|
- { icon: '#icon--caozuorizhi', title: 'IRS', content: '是否使用IRS', state: true, value: '' },
|
|
|
- { icon: '#icon--caozuorizhi', title: 'HiTA', content: '是否使用HiTA', state: false, value: '' },
|
|
|
- { icon: '#icon--caozuorizhi', title: 'HaBoard', content: '是否使用HaBoard', state: false, value: '' },
|
|
|
- { icon: '#icon--caozuorizhi', title: 'IES5资源', content: '是否使用IES5资源', state: true, value: '' },
|
|
|
+ { icon: '#icon--caozuorizhi', title: 'IES课程', content: '是否使用IES课程', state: true, value: '100/堂课' },
|
|
|
+ { icon: '#icon--caozuorizhi', title: 'webIrs', content: '是否使用webIrs', state: true, value: '100/堂课' },
|
|
|
+ { icon: '#icon--caozuorizhi', title: 'IRS', content: '是否使用IRS', state: true, value: '100/堂课' },
|
|
|
+ { 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: '50/堂课' },
|
|
|
{ icon: '#icon--caozuorizhi', title: 'T指数', content: '课程T指数', state: true, value: 0 },
|
|
|
])
|
|
|
let inuseList = ref([
|
|
|
@@ -428,6 +462,13 @@ let inuseList = ref([
|
|
|
{ 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' },
|
|
|
+])
|
|
|
let echartData = ref({
|
|
|
total: 0,
|
|
|
xlines: {
|
|
|
@@ -616,6 +657,37 @@ let echartData = ref({
|
|
|
},
|
|
|
data: [5] // 系列中的数据内容数组
|
|
|
},
|
|
|
+ {
|
|
|
+ type: 'bar', // 系列类型
|
|
|
+ name: '互动数', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
|
|
+ // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
|
|
+ stack: '总量',
|
|
|
+ barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
|
|
+ // 图形上的文本标签
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'inside',
|
|
|
+ formatter: function (params) {
|
|
|
+ if (params.value > 0) {
|
|
|
+ var res = params.value + '%';
|
|
|
+ return res;
|
|
|
+ } else {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // formatter: '{c}%',
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'bolder',
|
|
|
+ color: '#fff',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 图形样式
|
|
|
+ itemStyle: {
|
|
|
+ color: '#c3bef0',
|
|
|
+ },
|
|
|
+ data: [10] // 系列中的数据内容数组
|
|
|
+ },
|
|
|
]
|
|
|
}
|
|
|
})
|
|
|
@@ -637,6 +709,7 @@ init()
|
|
|
<style scoped>
|
|
|
.details-analysis {
|
|
|
width: 100%;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
.header-select {
|
|
|
width: 100%;
|
|
|
@@ -675,7 +748,7 @@ init()
|
|
|
background: rgb(250, 250, 250);
|
|
|
/* height: 85vh; */
|
|
|
margin: 0.5% 1%;
|
|
|
- padding-bottom: 1%;
|
|
|
+ padding-bottom: 0.5%;
|
|
|
}
|
|
|
.analysisicon {
|
|
|
width: 2.3em;
|
|
|
@@ -774,12 +847,12 @@ init()
|
|
|
color: #b2b2b9;
|
|
|
}
|
|
|
.inquirybox {
|
|
|
- width: 45%;
|
|
|
+ width: 40%;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.less-value {
|
|
|
- width: 5%;
|
|
|
+ width: 10%;
|
|
|
color: #74b9ff;
|
|
|
}
|
|
|
.result-box {
|
|
|
@@ -794,7 +867,7 @@ init()
|
|
|
}
|
|
|
.inuse-box {
|
|
|
width: 98%;
|
|
|
- height: 20vh;
|
|
|
+ height: 25vh;
|
|
|
margin: 1%;
|
|
|
/* border-radius: 5px;
|
|
|
background: #fff;
|
|
|
@@ -873,8 +946,9 @@ init()
|
|
|
}
|
|
|
.echartsX {
|
|
|
width: 100%;
|
|
|
- height: 50%;
|
|
|
- margin-top: 3%;
|
|
|
+ height: 45%;
|
|
|
+ margin-top: 6%;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
.inuse-below {
|
|
|
width: 100%;
|
|
|
@@ -914,6 +988,90 @@ init()
|
|
|
font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
/* border-bottom: 1px dashed #ccc; */
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.class-title {
|
|
|
+ margin-top: 2%;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #b2b2b9;
|
|
|
+}
|
|
|
+.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;
|
|
|
}
|
|
|
.task {
|
|
|
border-bottom: 5px solid #60e9c0;
|
|
|
@@ -927,6 +1085,9 @@ init()
|
|
|
.interaction {
|
|
|
border-bottom: 5px solid #fd79a8;
|
|
|
}
|
|
|
+.testclass {
|
|
|
+ border-bottom: 5px solid #c3bef0;
|
|
|
+}
|
|
|
.task-text {
|
|
|
color: #60e9c0 !important;
|
|
|
}
|
|
|
@@ -939,6 +1100,9 @@ init()
|
|
|
.interaction-text {
|
|
|
color: #fd79a8 !important;
|
|
|
}
|
|
|
+.testclass-text {
|
|
|
+ color: #c3bef0 !important;
|
|
|
+}
|
|
|
@media screen and (max-width: 1400px) {
|
|
|
.basicadata-item {
|
|
|
line-height: 30px !important;
|
