|
|
@@ -11,62 +11,58 @@
|
|
|
<use :xlink:href="item.icon"></use>
|
|
|
</svg>
|
|
|
<span class="information-text">{{item.value}}</span>
|
|
|
+ <div :title="[item.correlation ? '已关联':'弱关联，可进行手动修改']" v-show="item.key ==='school'">
|
|
|
+ <svg class="hint-icon" aria-hidden="true" >
|
|
|
+ <use :xlink:href="[item.correlation ? '#icon-zhengque3':'#icon-tishi2']"></use>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <el-button type="" size="small" v-show="item.key ==='school'&& !item.correlation" class="changebtn">更改</el-button>
|
|
|
+ <el-button type="" size="small" v-show="item.key ==='local'">更改</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
- <el-tabs :tab-position="tabPosition" style="height: 85%" class="demo-tabs" v-model="activeName">
|
|
|
- <el-tab-pane label="基础信息" name="basics">
|
|
|
- <div class="product-list">
|
|
|
- <p class="product-title">产品列表：</p>
|
|
|
- <div class="listbox">
|
|
|
- <div :class="[item.state ? item.key:'notenabled','listbox-item']" v-for="item in productdata" :key="item.id">
|
|
|
- <p class="item-title">{{item.title}}</p>
|
|
|
- <div class="item-content" v-show="item.state">
|
|
|
- <div class="content-left">
|
|
|
- <p>{{item.subhead1}}</p>
|
|
|
- <span>{{item.subhead1Value}}</span>
|
|
|
- </div>
|
|
|
- <div class="content-left">
|
|
|
- <p>{{item.subhead2}}</p>
|
|
|
- <span>{{item.subhead2Value}}</span>
|
|
|
+ <div class="product-list">
|
|
|
+ <!-- <p class="product-title">产品列表：</p> -->
|
|
|
+ <div class="listbox">
|
|
|
+ <div :class="[item.state ? item.key:'notenabled','listbox-item']" v-for="item in productdata" :key="item.id">
|
|
|
+ <p class="item-title">{{item.title}}</p>
|
|
|
+ <div class="item-content" v-show="item.state">
|
|
|
+ <div class="content-left">
|
|
|
+ <p>{{item.subhead1}}</p>
|
|
|
+ <span>{{item.subhead1Value}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="content-left">
|
|
|
+ <p>{{item.subhead2}}</p>
|
|
|
+ <span>{{item.subhead2Value}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="notenabled-title" v-show="!item.state">未使用</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="notenabled-title" v-show="!item.state">未使用</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
- <el-divider />
|
|
|
- <div class="product-details">
|
|
|
- <div class="user-ip">
|
|
|
- <p class="user-ip-title">用户登录</p>
|
|
|
- <el-divider />
|
|
|
- <el-table :data="tableData" height="330" style="width: 100%" size="small">
|
|
|
- <el-table-column prop="time" label="时间" align="center"/>
|
|
|
- <el-table-column prop="ip" label="ip地址" align="center"/>
|
|
|
- <el-table-column prop="location" label="位置" align="center"/>
|
|
|
- <el-table-column prop="platform" label="平台" align="center"/>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <div class="user-login">
|
|
|
- <p class="user-ip-title">用户活跃</p>
|
|
|
- <el-divider />
|
|
|
- <div class="login-echart">
|
|
|
- <commonHeatmapVue :mapData="heatMapdata"></commonHeatmapVue>
|
|
|
+ <el-divider />
|
|
|
+ <div class="product-details">
|
|
|
+ <div class="hiteachboxdiv">
|
|
|
+ <div class="common-header-title">
|
|
|
+ <div>HiTeach</div>
|
|
|
+ <div class="expire">到期日：2023-11-22</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
- <div class="heartmap-label">
|
|
|
- <div class="heatmap-item" v-for="item in maplabels" :key="item.id">
|
|
|
- <div class="colorbox" :style="{'background-color':item.color}"></div>
|
|
|
- <div class="valuebox">{{item.value}}</div>
|
|
|
- </div>
|
|
|
+ <Hiteach></Hiteach>
|
|
|
+ </div>
|
|
|
+ <div class="hitadiv">
|
|
|
+ <div class="common-header-title">
|
|
|
+ <div>HiTA</div>
|
|
|
+ <div class="expire">到期日：2023-11-22</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="user-size">
|
|
|
- <p class="user-ip-title">空间情况</p>
|
|
|
<el-divider />
|
|
|
- <div class="login-echart">
|
|
|
- <commonGaugeVue :gaugeData="gaugedata"></commonGaugeVue>
|
|
|
+ <HiTA></HiTA>
|
|
|
+ </div>
|
|
|
+ <div class="user-size">
|
|
|
+ <div class="common-header-title">
|
|
|
+ <div>空间情况</div>
|
|
|
+ <div class="expire">到期日：2023-11-22</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<div class="size-label">
|
|
|
@@ -75,16 +71,31 @@
|
|
|
<div class="size-title">{{item.title}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ <el-divider />
|
|
|
+ <div class="login-echart">
|
|
|
+ <commonGaugeVue :gaugeData="gaugedata"></commonGaugeVue>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="iesdiv">
|
|
|
+ <div class="common-header-title">
|
|
|
+ <div>IES</div>
|
|
|
+ <div class="expire">到期日：2023-11-22</div>
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
+ <IES></IES>
|
|
|
+ </div>
|
|
|
+ <div class="socratesdiv">
|
|
|
+ <div class="common-header-title">
|
|
|
+ <div>苏格拉底</div>
|
|
|
+ <div class="expire">到期日：2023-11-22</div>
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
+ <Socrates></Socrates>
|
|
|
</div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="HiTeach" name="hiteach">
|
|
|
+ </div>
|
|
|
+ <!-- <el-tab-pane label="HiTeach" name="hiteach">
|
|
|
<Hiteach v-if="activeName ==='hiteach'"></Hiteach>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="HiTA" name="hita">Role</el-tab-pane>
|
|
|
- <el-tab-pane label="IES" name="ies">Task</el-tab-pane>
|
|
|
- <el-tab-pane label="苏格拉底" name="socrates">Task</el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ </el-tab-pane> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
@@ -93,13 +104,17 @@ import { Iphone } from '@element-plus/icons'
|
|
|
import commonHeatmapVue from '../../components/echarts/commonHeatmap.vue'
|
|
|
import commonGaugeVue from '../../components/echarts/commonGauge.vue'
|
|
|
import Hiteach from './hiteach.vue'
|
|
|
+import HiTA from './hita.vue'
|
|
|
+import IES from './ies.vue'
|
|
|
+import Socrates from './socrates.vue'
|
|
|
let activeName=ref('basics')
|
|
|
let tabPosition=ref('left')
|
|
|
let userdata = ref([
|
|
|
- { id: 1, icon: '#icon-shouji', value: '1234567890', title: '' },
|
|
|
- { id: 2, icon: '#icon-dibudaohanglan-', value: '四川省成都市锦江区外国语小学', title: '' },
|
|
|
- { id: 3, icon: '#icon-youxiang', value: '123456789@qq.com', title: '' },
|
|
|
- { id: 4, icon: '#icon-shijian2', value: '2023-04-23', title: '' },
|
|
|
+ { id: 1, icon: '#icon-shouji', value: '1234567890', title: '',key:'phone',check:true},
|
|
|
+ { id: 2, icon: '#icon-dibudaohanglan-', value: '四川省成都市锦江区外国语小学', title: '',key:'school',correlation:false,check:true},
|
|
|
+ { id: 3, icon: '#icon-youxiang', value: '123456789@qq.com', title: '',key:'email',check:true },
|
|
|
+ { id: 4, icon: '#icon-shijian2', value: '2023-04-23', title: '', key: 'time', check: false },
|
|
|
+ { id: 5, icon: '#icon-yuyan-shi', value: '中文（简体）', title: '',key:'local',check:false },
|
|
|
])
|
|
|
let productdata = ref([
|
|
|
{ id: 1, title: 'HiTeach', subhead1: '课堂总时长', subhead1Value: '13H', subhead2: '课堂数量', subhead2Value: 25,key:'HiTeach',state: true },
|
|
|
@@ -259,8 +274,8 @@ let gaugedata = ref({
|
|
|
series: [
|
|
|
{
|
|
|
type: 'gauge',
|
|
|
- radius: '130%',
|
|
|
- center: ['50%', '75%'],
|
|
|
+ radius: '100%',
|
|
|
+ center: ['50%', '90%'],
|
|
|
startAngle: 180,
|
|
|
endAngle: 0,
|
|
|
min: 0,
|
|
|
@@ -340,11 +355,12 @@ let gaugedata = ref({
|
|
|
}]
|
|
|
})
|
|
|
let gaugelabels = ref([
|
|
|
- { id: 1, value: 15, title: '文档', color:'#58D9F9' },
|
|
|
- { id: 2, value: 10, title: '视频', color:'#58D9F9' },
|
|
|
- { id: 3, value: 8, title: '试卷', color:'#58D9F9' },
|
|
|
- { id: 4, value: 5, title: 'Hiteach上传', color:'#58D9F9' },
|
|
|
- {id:5,value:2,title:'其他',color:'#58D9F9'},
|
|
|
+ { id: 1, value: 15, title: '文档', color: '#58D9F9' },
|
|
|
+ {id:2,value:10,title:'学校分配空间',color:'#58D9F9'},
|
|
|
+ { id: 3, value: 10, title: '视频', color:'#58D9F9' },
|
|
|
+ { id: 4, value: 8, title: '试卷', color:'#58D9F9' },
|
|
|
+ { id: 5, value: 5, title: 'Hiteach上传', color: '#58D9F9' },
|
|
|
+ {id:6,value:2,title:'其他',color:'#58D9F9'},
|
|
|
])
|
|
|
|
|
|
</script>
|
|
|
@@ -353,20 +369,23 @@ let gaugelabels = ref([
|
|
|
line-height: 60px;
|
|
|
padding: 1%;
|
|
|
width:100%;
|
|
|
- height:100%;
|
|
|
+ /* height:100%; */
|
|
|
background-color:rgba(255,255,255,.9);
|
|
|
border-radius: 5px;
|
|
|
+ /* overflow: hidden;
|
|
|
+ overflow-y: auto; */
|
|
|
}
|
|
|
.topbox{
|
|
|
width:100%;
|
|
|
- height:10vh;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+ line-height: 40px;
|
|
|
}
|
|
|
.img-name{
|
|
|
- width:30%;
|
|
|
+ width:20%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ padding-left:2%;
|
|
|
}
|
|
|
.topbox-images{
|
|
|
width:70px;
|
|
|
@@ -384,7 +403,7 @@ let gaugelabels = ref([
|
|
|
line-height: 70px;
|
|
|
}
|
|
|
.information{
|
|
|
- width:70%;
|
|
|
+ width:75%;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
@@ -404,27 +423,30 @@ let gaugelabels = ref([
|
|
|
color:#7889a0;
|
|
|
}
|
|
|
.information-item{
|
|
|
- width:50%;
|
|
|
+ width:32%;
|
|
|
text-align:left;
|
|
|
padding-left:1%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
.product-list{
|
|
|
width:100%;
|
|
|
- padding: 1%;
|
|
|
+ padding: 0%;
|
|
|
+ line-height: 20px;
|
|
|
}
|
|
|
.product-title{
|
|
|
width:100%;
|
|
|
text-align: left;
|
|
|
font-size:16px;
|
|
|
font-weight: bold;
|
|
|
+ margin-bottom: 5px;
|
|
|
}
|
|
|
.listbox{
|
|
|
display: flex;
|
|
|
- padding: 1%;
|
|
|
}
|
|
|
.listbox-item{
|
|
|
width:18%;
|
|
|
- line-height: 40px;
|
|
|
+ line-height: 30px;
|
|
|
padding: 0% 2%;
|
|
|
border-radius: 5px;
|
|
|
margin:0% 4%;
|
|
|
@@ -475,36 +497,17 @@ let gaugelabels = ref([
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.product-details{
|
|
|
- padding: 1%;
|
|
|
+ padding: 0% 1% 1% 1%;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
line-height: 60px;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
-.user-ip{
|
|
|
- width:25%;
|
|
|
- background-color: #fff;
|
|
|
- padding: 0.5% 1%;
|
|
|
- border-radius: 5px;
|
|
|
- box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
|
|
|
-}
|
|
|
-.user-ip-title{
|
|
|
- font-size:14px;
|
|
|
- text-align: left;
|
|
|
- line-height: 14px;
|
|
|
- margin-bottom: 5px;
|
|
|
- color:#8a90a8;
|
|
|
-}
|
|
|
-.user-login{
|
|
|
- width:40%;
|
|
|
- padding: 0.5% 1%;
|
|
|
- margin:0% 1%;
|
|
|
- background-color: #fff;
|
|
|
+.hiteachboxdiv{
|
|
|
+ width:45%;
|
|
|
border-radius: 5px;
|
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
|
|
|
-}
|
|
|
-.login-echart{
|
|
|
- width:100%;
|
|
|
- height:65%;
|
|
|
+ padding: 1%;
|
|
|
}
|
|
|
.heartmap-label{
|
|
|
display: flex;
|
|
|
@@ -528,24 +531,31 @@ let gaugelabels = ref([
|
|
|
color:#c1c5d1;
|
|
|
}
|
|
|
.user-size{
|
|
|
- width:30%;
|
|
|
+ width:23%;
|
|
|
padding: 0.5% 1%;
|
|
|
- margin:0% 1%;
|
|
|
background-color: #fff;
|
|
|
border-radius: 5px;
|
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
|
|
|
}
|
|
|
.size-label{
|
|
|
+ width:100%;
|
|
|
display: flex;
|
|
|
padding: 1% 0%;
|
|
|
+ /* flex-wrap: wrap; */
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-x: auto;
|
|
|
}
|
|
|
.size-item{
|
|
|
display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
margin:0% 2%;
|
|
|
- width:20%;
|
|
|
+ width:25%;
|
|
|
line-height: 20px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
.size-value{
|
|
|
+ width:100%;
|
|
|
font-size:16px;
|
|
|
margin-right:1%;
|
|
|
}
|
|
|
@@ -553,6 +563,57 @@ let gaugelabels = ref([
|
|
|
font-size:14px;
|
|
|
color:#313b5e;
|
|
|
}
|
|
|
+.hint-icon{
|
|
|
+ width: 1em;
|
|
|
+ height: 1em;
|
|
|
+ vertical-align: -0.15em;
|
|
|
+ fill: currentColor;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+.changebtn{
|
|
|
+ margin-left:2px;
|
|
|
+}
|
|
|
+.common-header-title{
|
|
|
+ font-size:20px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.expire{
|
|
|
+ font-size:14px;
|
|
|
+ color: #bbbecd;
|
|
|
+}
|
|
|
+.hitadiv{
|
|
|
+ width:30%;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
|
|
|
+ padding: 1%;
|
|
|
+ /* height:50%; */
|
|
|
+}
|
|
|
+.login-echart{
|
|
|
+ width:100%;
|
|
|
+ height:30vh;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.iesdiv{
|
|
|
+ width:48%;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
|
|
|
+ padding: 1%;
|
|
|
+ margin-top:1%;
|
|
|
+}
|
|
|
+.socratesdiv{
|
|
|
+ width:49%;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
|
|
|
+ padding: 1%;
|
|
|
+ margin-top:1%;
|
|
|
+}
|
|
|
</style>
|
|
|
<style>
|
|
|
.inquirebox-details .el-divider{
|
chenmy