Skip to content

P
pica-admin-consultation
提交 bc4b045e 编写于 作者: liran's avatar liran
浏览文件
操作

添加/修改组件:course-list

上级 dd0b28d3
显示空白字符变更
内嵌 并排
正在显示 包含 1405 行增加 和 2 行删除
package.json
浏览文件 @ bc4b045e
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"dependencies": { "dependencies": {
"axios": "0.16.2", "axios": "0.16.2",
"better-scroll": "^0.1.15", "better-scroll": "^0.1.15",
"echarts": "^4.2.0-rc.2",
"fastclick": "^1.0.6", "fastclick": "^1.0.6",
"iscroll": "^5.2.0", "iscroll": "^5.2.0",
"js-cookie": "^2.2.0", "js-cookie": "^2.2.0",
......
src/router/router.js
浏览文件 @ bc4b045e
import App from '../App' import App from '../App'
const home = r => require.ensure([], () => r(require('../views/home/home')), 'home') const home = r => require.ensure([], () => r(require('../views/home/home')), 'home')
const gpranking = r => require.ensure([], () => r(require('../views/gpranking/gpranking.vue')), 'gpranking')
export default [{ export default [{
path: '/', path: '/',
...@@ -16,5 +19,10 @@ export default [{ ...@@ -16,5 +19,10 @@ export default [{
path: '/home', path: '/home',
component: home component: home
}, },
//学习评价gpranking页面
{
path: '/gpranking',
component: gpranking
}
] ]
}] }]
src/views/gpranking/gpranking.vue 0 → 100644
浏览文件 @ bc4b045e
<template>
<div class="main">
<div class="basic">
<!-- 背景图片 -->
<img class="bg" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt="">
<!-- 个人信息 -->
<div class="info">
<!-- 左侧头像 -->
<div class="info-profile">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt="">
</div>
<!-- 右侧个人信息 -->
<div class="info-detail">
<div class="info-detail-name">
王小呆
</div>
<div class="info-detail-others">
自<span> 2016.3.23</span>起&nbsp;&nbsp;您与云鹊医相识已经<span>483</span>天啦
</div>
</div>
</div>
</div>
<div class="detail">
<div class="tab-header">
<div class="tab-header-name" :class="{active:currentTab===0}" @click="toggleTab(0)">
<div class="text">
本院
</div>
<div class="bar">
</div>
</div>
<div class="tab-header-name" :class="{active:currentTab===1}" @click="toggleTab(1)">
<div class="text">
本省
</div>
<div class="bar">
</div>
</div>
<div class="tab-header-name" :class="{active:currentTab===2}" @click="toggleTab(2)">
<div class="text">
全国
</div>
<div class="bar">
</div>
</div>
</div>
<div class="tab">
<!-- 近七天成长路径 -->
<div class="sub grow-path">
<header class="title">30天成长路径</header>
<!-- 图表 -->
<div id="growPath" class="grow-path-chart">
</div>
</div>
<!-- 学习情况 -->
<div class="sub study-condition">
<header class="title">学习情况</header>
<!-- 图表 -->
<div class="study-conditon-chart" id="studyCondition" style="width:100%;height:400px;">
</div>
<!-- 对比 -->
<div class="study-condition-cmp">
<header>
<div class="title">我的Top3</div>
<div class="title">院内Top3</div>
</header>
<div class="rank">
<div class="rank-sec my-rank">
<div class="rank-item">
<div class="rank-num">1</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
<div class="rank-item">
<div class="rank-num">2</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
<div class="rank-item">
<div class="rank-num">3</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
</div>
<div class="rank-sec all-rank">
<div class="rank-item">
<div class="rank-num">1</div>
<div class="rank-name">聚集糖尿病治疗与管理</div>
</div>
<div class="rank-item">
<div class="rank-num">2</div>
<div class="rank-name">聚集糖尿病治疗与管理</div>
</div>
<div class="rank-item">
<div class="rank-num">3</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
</div>
</div>
</div>
</div>
<!-- 为你推荐 -->
<div class="recommend-for-you">
<recommend-list :title="recommendTitle" title-position="center" :recommends="recommendList"></recommend-list>
</div>
<!-- 其它为你推荐 -->
<recommend-list
title="你可能需要"
title-position="left"
has-change=true
has-more=true
has-course-tag=true
tag-position="right"
:recommends="recommendListTest"></recommend-list>
<!-- 课程列表 -->
<course-list
title="你可能需要"
title-position="left"
has-change=true
has-more=true
has-course-tag=true
tag-position="right"
:courses="courseList"></course-list>
</div>
</div>
</div>
</template>
<script>
// import RecommendList from './RecommendList.vue'
// import RecommendListTest from './RecommendListTest.vue'
import RecommendList from 'src/components/common/yqy/RecommendList.vue'
import CourseList from 'src/components/common/yqy/CourseList.vue'
var echarts=require('echarts');
export default {
name:'gpranking',
components:{
// RecommendList,
RecommendList,
CourseList
},
data(){
return{
currentTab:0,
//编辑的数据
basicInfo:{"name":"王小呆","level":"学习小能手","date":"2016.3.23","days":555,"imgLink":""},
//图表数据
OptionGrowPath:{},//30天成长路径
OptionStudyCondition:{},
//为你推荐数据：
recommendTitle:"为你推荐",
recommendList:[],
recommendListTest:[],
courseList:[]
}
},
mounted(){
this.handleData();
// this.generateExample();
this.generateStudyConditionChart();
this.generateGrowPathChart();
//为你推荐
this.getRecommendList();
},
methods:{
handleData:function(){
this.OptionGrowPath={
// title:{
// show:true,
// },
legend:{
itemHeight:6,//图例的高度
itemGap:10,//图例间距
itemWidth:10,//图例的宽度
textStyle:{//整体设置文字部分的样式
color:'#666',
fontSize:12,
fontweight:400,
height:16.5,
lineHeight:16.5,
padding:[0,30,0,0],
// borderColor:'#ccc',
// borderWidth:2,
},
data:[
{
name:'我的学习时长',
icon:'line',
},
{
name:'我的学习课程',
},
{
name:'平均学习时长',
icon:'line',
},
{
name:'平均学习课程',
}
],
},
dataset: {
//提供一份数据
source: [
['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
['10.6','15','22','2','4'],
['10.7','15','24','2','4'],
['10.8','17','28','2','4'],
['10.9','15','18','2','4'],
['今天','15','20','2','4']
]
},
grid:{
left:0,
right:0,
bottom:0
},
xAxis:
{
type:'category',
axisLine:{
lineStyle:{
type:'solid',
color:'#EDEEF0',
width:'2',
},
},
axisLabel:{
show:true,
textStyle:{
// color:'#aaa', //坐标值具体的颜色
// color:'rgb(255,0,0)',
},
fontSize:'10px',
},
axisTick:{
show:false,
// length:10
},
data:[
{value:'10.6',
textStyle:{fontweight:'bold',color:'#000'}},
'10.7', '10.8','10.9', '今天'],
},
yAxis:[
{
type:'value',
name:'时长',
// interval:25,
min:0,
// max:60,
axisLabel:{
formatter:`{value}min`
},
show:false
},
{
type:'value',
name:'课程',
min:0,
// max:6,
axisLabel:{
formatter:`{value}`
},
show:false
}
],
series:[
//['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
{
type:'line',
symbol:'none',
smooth:true,
itemStyle:{'color':'#449284'}
},{
type:'line',
symbol:'none',
smooth:true,
itemStyle:{'color':'#CAA861'}
},{
type:'bar',
yAxisIndex:1,
label:{
show:true,
position:'top'
},
barGap:0.1,
barCategoryGap:'30px',
itemStyle:{'color':'#CAA861'}
},{
type:'bar',
yAxisIndex:1,
label:{
show:true,
position:'top'
},
barGap:0.1,
barCategoryGap:'30px',
itemStyle:{'color':'rgba(202,168,97,0.2)'}//透明度以这种方式设置，才会在图例中有效果
}
]
};
this.OptionStudyCondition={
// color:{},
legend: {},
tooltip: {},
dataset: {
//提供一份数据
source: [
['content', '我的', '本院平均'],
['在学课程', 12, 10],
['完成课程', 56,62],
['完成考试', 23,45],
['获得证书', 8,20],
['参与项目', 4,6]
]
},
grid:{
show:false,
left:0,
right:0,
// bottom:0
},
textStyle:{
color:'#444'
},
xAxis: {
type: 'category',
// name:'xxxx',
axisLine:{
lineStyle:{
type:'solid',
color:'#aaa',
width:'4',
},
},
triggerEvent:true,
axisLabel:{
show:true,
textStyle:{
// color:'#aaa', //坐标值具体的颜色
// color:'rgb(255,0,0)',
},
fontSize:'10px',
clickable:true
},
axisTick:{
show:false,
// length:10
},
data:[
{value:'在学课程',
textStyle:{fontweight:'bold',color:'#000'}},
'完成课程', '完成考试','获得证书', '参与项目'],
},
yAxis: {
show:false,
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: 'bar',
barGap:0,
barCategoryGap:'30px',
label:{
show:true,
position:'top'
},
itemStyle:{
'color':'#5489FD',
'opacity':0.84
}
},
{
type: 'bar',
barGap:0.1,
barCategoryGap:'30px',
label:{
show:true,
position:'top'
},
itemStyle:{
'color':'#5489FD',
'opacity':0.34
}
}
]
};
},
getRecommendList(){
this.recommendList=[
{name:'肖丹丹',num:'671',title:'全科医学中医患关系',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
{name:'肖丹丹',num:'672',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
{name:'肖丹丹',num:'673',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
{name:'肖丹丹',num:'674',title:'患者心理学入门文字很长文字很长文字很长文字很长',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'}
],
this.recommendListTest=[
{name:'肖丹',num:'666',title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'},
{name:'肖小丹',num:'667',title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'治疗'},
{name:'肖丹丹',num:'668',title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'随访'},
{name:'肖丹丹',num:'669',title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'检查'},
],
this.courseList=[
{name:'肖丹',num:'666人',time:'刚刚',saveStatus:true,title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'},
{name:'肖小丹',num:'1.1k',time:'3小时前',saveStatus:false,title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'糖尿病'},
{name:'肖丹丹',num:'668',time:'3小时前',saveStatus:false,title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'心脏病'},
{name:'肖丹丹',num:'669',time:'3小时前',saveStatus:true,title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'检查'},
]
},
toggleTab:function(tab){
this.currentTab=tab;
},
generateGrowPathChart:function(){
let growPathChart=echarts.init(document.getElementById('growPath'));
growPathChart.setOption(this.OptionGrowPath);
growPathChart.on('click',function(params){
if(params.value){
alert("单击了"+params.name+"柱状图");
}else{
alert("单击了"+params.name+"x轴标签");
}
// console.log(params)
});
// s
},
generateStudyConditionChart:function(){
let studyConditionChart=echarts.init(document.getElementById('studyCondition'));
studyConditionChart.setOption(this.OptionStudyCondition);
// studyConditionChart.on('axisareaselected',function(){
// console.log('xxx')
// })
studyConditionChart.on('click',function(params){
if(params.value){
alert("单击了"+params.name+"柱状图");
}else{
alert("单击了"+params.name+"x轴标签");
}
// console.log(params)
if(params.componentType=='xAxis'){
// console.log(params.value)
}
});
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
/*****************************************basic信息******************************************/
.main{
background-color:$fc;//整体背景为蓝色
}
.basic{
width:px2rem(375px);
height:px2rem(150px);
position:relative;
}
.basic .bg{/*图片响应式:内容自动向下排列*/
width:px2rem(375px);
height:px2rem(119px);
// margin-bottom:px2rem(51px)
}
.basic .info{
@include cl;//水平居中
display:flex;
display:-webkit-flex;
flex-direction:row;
justify-content: center;
position: absolute;
top:px2rem(80px);
width:px2rem(345px);
height:px2rem(70px);
border-radius:px2rem(3px);
box-shadow: 0 px2rem(1px) px2rem(11px) 0 rgba(21,138,123,0.1);
}
.basic .info-profile {
margin-right:px2rem(5px);
display:flex;
display:-webkit-flex;
flex-direction: row;
align-items:center;
}
.basic .info-profile img{
width:px2rem(40px);
height:px2rem(40px);
border-radius:px2rem(20px);
}
.basic .info-detail{
display:flex;
display:-webkit-flex;
flex-direction:column;
justify-content: center;
}
.basic .info-detail .info-detail-name{
font-size:px2rem(15px);
font-weight:500;
margin-bottom:px2rem(3px);
text-align:left;
}
.basic .info-detail .info-detail-others{
height:px2rem(20px);
line-height:px2rem(20px);
font-size:px2rem(13px);
font-weight:400;
color:rgb(102,102,102)
}
/****************************************具体信息*****************************************/
.detail{
display:flex;
flex-direction: column;
/* justify-content:center; */
width:100%;
padding-top:px2rem(20px);
padding-right:px2rem(15px);
padding-left:px2rem(15px);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.tab-header{
display:flex;
justify-content:center;
width:100%;
height:px2rem(34.5px);
box-shadow: 0 px2rem(2px) px2rem(4px) 0 rgba(0,0,0,0.04)
}
.tab-header .tab-header-name{
width:px2rem(30px);
height:px2rem(17px);
line-height:px2rem(17px);
font-size:px2rem(15px);
font-weight:400;
color:rgb(153,153,153)
/* padding:1rem; */
/* margin:0 2rem; */
}
.tab-header .tab-header-name:nth-child(1),.tab-header .tab-header-name:nth-child(2){
margin-right:px2rem(67.5px);
}
.tab-header .tab-header-name .text{
height:px2rem(17px);
line-height:px2rem(17px);
}
.tab-header .tab-header-name.active .bar{
width:px2rem(10px);
height:px2rem(3px);
margin-top:px2rem(9.5px);
margin-left:px2rem(10px);
background:#449284;
border-radius:px2rem(1.5px);
}
.tab-header .tab-header-name.active{
font-weight:500;
color:rgb(51,51,51)
}
.tab{
width:100%;
}
.sub.grow-path,.sub.study-condition{
padding:0 px2rem(5px);
}
.sub>.title{/*整体控制每个部分标题与内容之间的间距与样式*/
margin-top:px2rem(25px);
margin-bottom:px2rem(11px);
height:px2rem(25px);
line-height:px2rem(25px);
font-size:px2rem(18px);
font-weight:400;
color:#333;
text-align:center;
}
.sub.grow-path>.title{
margin-top:px2rem(25px);
}
.sub.study-condition>.title{
margin-top:px2rem(20px);
}
/*成长情况*/
.grow-path-chart{
width:100%;
height:px2rem(282px);/*(33+532)/2*/
}
/*学习情况*/
.study-condition-cmp{
width:100%;
height:px2rem(239px);
background-color:rgb(234,241,255);
}
.study-condition-cmp>header{
display:flex;
display: -webkit-flex;
flex-direction:row;
height:px2rem(37.5px);
line-height:px2rem(37.5px);
font-size:px2rem(12px);
font-weight: 400;
}
.study-condition-cmp>header>.title{
width:50%;
text-align:center;
}
.study-condition-cmp .rank{
display:flex;
display: -webkit-flex;
flex-direction:row;
}
.study-condition-cmp .rank .rank-sec{
background-color: #fff;
width:50%;
}
.study-condition-cmp .rank .rank-sec.my-rank{
margin-right:px2rem(14px);
}
.study-condition-cmp .rank .rank-sec.all-rank{
margin-left:px2rem(14px);
}
.study-condition-cmp .rank .rank-sec .rank-item{
display:flex;
display:-webkit-flex;
flex-flow:row;
-ms-flex-flow: row;
align-items: center;
background-color:rgb(234,241,255);
color:#666;
border-radius: px2rem(1.5px);
height:px2rem(52px);/*?*/
}
/*控制rank-item的具体margin状况*/
.study-condition-cmp .rank .rank-sec.my-rank .rank-item{
margin:px2rem(7px) px2rem(7.5px) px2rem(10px) 0;
}
.study-condition-cmp .rank .rank-sec.all-rank .rank-item{
margin:px2rem(7px) 0 px2rem(10px) px2rem(7.5px);
}
.study-condition-cmp .rank .rank-sec .rank-item:nth-last-child(1){
margin-bottom:px2rem(7px);
}
.study-condition-cmp .rank .rank-sec .rank-item .rank-num{
width:px2rem(13px);
height:px2rem(13px);
text-align:center;
line-height:px2rem(13px);
background-color: #709CFE;
color:#fff;
font-weight:400;
font-size:px2rem(12px);
border-radius: px2rem(6.5px);
margin-left:px2rem(10px);
margin-right:px2rem(7px);
/* margin:0 0.5rem; */
}
.study-condition-cmp .rank .rank-sec .rank-item .rank-name{
font-size:px2rem(13px);
font-weight:400;
margin-right:px2rem(9.5px);
color:rgb(102,102,102);
height:px2rem(37px);
line-height:px2rem(18.5px);
}
/*为你推荐*/
.recommend-for-you{
padding-top:px2rem(5px);/*补充推荐list组件里不足的顶部间距*/
}
</style>
src/views/gpranking/gprankingOld.vue 0 → 100644
浏览文件 @ bc4b045e
<template>
<div class="main">
<div class="basic">
<!-- 背景图片 -->
<img class="bg" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt="">
<!-- 个人信息 -->
<div class="info">
<!-- 左侧头像 -->
<div class="info-profile">
<img src="../images/profile.jpg" alt="">
</div>
<!-- 右侧个人信息 -->
<ul class="info-detail">
<li>
<span class="info-detail-name">王小呆</span>
<span class="info-detail-others">学习能手</span>
</li>
<li>
<span class="info-detail-others">自2016.3.23起</span>
<span class="info-detail-others">您与云鹊医相识已经483天啦</span>
</li>
</ul>
</div>
</div>
<div class="detail">
<div class="tab-header">
<div class="tab-header-name" :class="{active:currentTab===0}" @click="toggleTab(0)">
<div class="text">
本院
</div>
<div class="bar">
</div>
</div>
<div class="tab-header-name" :class="{active:currentTab===1}" @click="toggleTab(1)">
<div class="text">
本省
</div>
<div class="bar">
</div>
</div>
<div class="tab-header-name" :class="{active:currentTab===2}" @click="toggleTab(2)">
<div class="text">
全国
</div>
<div class="bar">
</div>
</div>
</div>
<div class="tab">
<!-- 近七天成长路径 -->
<div class="sub grow-path">
<header class="title">近7天成长路径</header>
<!-- 图表 -->
<div id="growPath" class="grow-path-chart">
</div>
</div>
<!-- 学习情况 -->
<div class="sub study-condition">
<header class="title">学习情况</header>
<!-- 图表 -->
<div class="study-conditon-chart" id="studyCondition" style="width:100%;height:400px;">
</div>
<!-- 对比 -->
<div class="study-condition-cmp">
<header>
<div class="title">我的Top3</div>
<div class="title">院内Top3</div>
</header>
<div class="rank">
<div class="rank-sec my-rank">
<div class="rank-item">
<div class="rank-num">1</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
<div class="rank-item">
<div class="rank-num">2</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
<div class="rank-item">
<div class="rank-num">3</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
</div>
<div class="rank-sec all-rank">
<div class="rank-item">
<div class="rank-num">1</div>
<div class="rank-name">聚集糖尿病治疗与管理</div>
</div>
<div class="rank-item">
<div class="rank-num">2</div>
<div class="rank-name">聚集糖尿病治疗与管理</div>
</div>
<div class="rank-item">
<div class="rank-num">3</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
</div>
</div>
</div>
</div>
<!-- 为你推荐 -->
<div class="recommend-for-you">
<recommend-list-test :title="recommendTitle" position="center" :recommends="recommendList"></recommend-list-test>
</div>
<!-- 其它为你推荐 -->
<recommend-list-test
title="你可能需要"
title-position="center"
has-more=true
has-course-tag=true
tag-position="right"
:recommends="recommendListTest"></recommend-list-test>
</div>
</div>
</div>
</template>
<script>
import RecommendList from './RecommendList.vue'
import RecommendListTest from './RecommendListTest.vue'
var echarts=require('echarts');
export default {
name:'gpranking',
components:{
RecommendList,
RecommendListTest
},
data(){
return{
currentTab:0,
//编辑的数据
basicInfo:{"name":"王小呆","level":"学习小能手","date":"2016.3.23","days":555,"imgLink":""},
//图表数据
OptionStudyCondition:{},
OptionGrowPath:{},
//为你推荐数据：
recommendTitle:"为你推荐",
recommendList:[],
recommendListTest:[]
}
},
mounted(){
this.getData();
// this.generateExample();
this.generateStudyConditionChart();
this.generateGrowPathChart();
//为你推荐
this.getRecommendList();
},
methods:{
getData:function(){
this.OptionGrowPath={
title:{
show:true,
},
legend:{
data:[
{
name:'我的学习时长',
icon:'line',
textStyle:{
// color:'blue'
}
},
{
name:'我的学习课程',
},
{
name:'平均学习时长',
icon:'line',
},
{
name:'平均学习课程',
}
],
top:0,
padding:10,
// show:false
},
dataset: {
//提供一份数据
source: [
['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
['10.6','15','22','2','4'],
['10.7','15','24','2','4'],
['10.8','17','28','2','4'],
['10.9','15','18','2','4'],
['10.10','17','19','2','4'],
['今天','15','20','2','4']
]
},
grid:{
left:0,
right:0,
bottom:0
},
xAxis:[
{
type:'category',
axisLine:{
lineStyle:{
type:'solid',
color:'#aaa',
width:'4',
},
},
axisLabel:{
show:true,
textStyle:{
// color:'#aaa', //坐标值具体的颜色
// color:'rgb(255,0,0)',
},
fontSize:'10px',
},
axisTick:{
show:false,
// length:10
},
}
],
yAxis:[
{
type:'value',
name:'时长',
// interval:25,
min:0,
max:40,
axisLabel:{
formatter:`{value}min`
},
show:false
// show:true
},
{
type:'value',
name:'课程',
min:0,
max:10,
axisLabel:{
formatter:`{value}`
},
show:false
}
],
series:[
//['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
{
type:'line',
symbol:'none',
itemStyle:{'color':'#FFCE67'}
},{
type:'line',
symbol:'none',
itemStyle:{'color':'#FFCE67','opacity':0.4}//折线上的效果不好
},{
type:'bar',
yAxisIndex:1,
label:{
show:true,
position:'top'
},
barGap:0.1,
barCategoryGap:'30px',
itemStyle:{'color':'#FFCE67'}
},{
type:'bar',
yAxisIndex:1,
label:{
show:true,
position:'top'
},
barGap:0.1,
barCategoryGap:'30px',
itemStyle:{'color':'#FFCE67','opacity':0.4}
}
]
};
this.OptionStudyCondition={
// color:{},
legend: {},
tooltip: {},
dataset: {
//提供一份数据
source: [
['content', '我的', '本院平均'],
['在学课程', 12, 10],
['完成课程', 56,62],
['完成考试', 23,45],
['获得证书', 8,20],
['参与项目', 4,6]
]
},
grid:{
show:false,
left:0,
right:0,
// bottom:0
},
textStyle:{
color:'#444'
},
xAxis: {
type: 'category',
// name:'xxxx',
axisLine:{
lineStyle:{
type:'solid',
color:'#aaa',
width:'4',
},
},
triggerEvent:true,
axisLabel:{
show:true,
textStyle:{
// color:'#aaa', //坐标值具体的颜色
// color:'rgb(255,0,0)',
},
fontSize:'10px',
clickable:true
},
axisTick:{
show:false,
// length:10
},
data:[
{value:'在学课程',
textStyle:{fontweight:'bold',color:'#000'}},
'完成课程', '完成考试','获得证书', '参与项目'],
},
yAxis: {
show:false,
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: 'bar',
barGap:0,
barCategoryGap:'30px',
label:{
show:true,
position:'top'
},
itemStyle:{
'color':'#5489FD',
'opacity':0.84
}
},
{
type: 'bar',
barGap:0.1,
barCategoryGap:'30px',
label:{
show:true,
position:'top'
},
itemStyle:{
'color':'#5489FD',
'opacity':0.34
}
}
]
};
},
getRecommendList(){
this.recommendList=[
{name:'肖丹丹',num:'671',title:'全科医学中医患关系',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'},
{name:'肖丹丹',num:'672',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'},
{name:'肖丹丹',num:'673',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'},
{name:'肖丹丹',num:'674',title:'患者心理学入门文字很长文字很长文字很长文字很长',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'}
],
this.recommendListTest=[
{name:'肖丹',num:'666',title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'诊断'},
{name:'肖小丹',num:'667',title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'治疗'},
{name:'肖丹丹',num:'668',title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
{name:'肖丹丹',num:'669',title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'检查'},
{name:'肖丹丹',num:'670',title:'全科医学中医患关系',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
{name:'肖丹丹',num:'670',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
{name:'肖丹丹',num:'670',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
{name:'肖丹丹',num:'670',title:'患者心理学入门',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'}
]
},
toggleTab:function(tab){
this.currentTab=tab;
},
generateGrowPathChart:function(){
let growPathChart=echarts.init(document.getElementById('growPath'));
growPathChart.setOption(this.OptionGrowPath);
growPathChart.on('click',function(params){
if(params.value){
alert("单击了"+params.name+"柱状图");
}else{
alert("单击了"+params.name+"x轴标签");
}
// console.log(params)
});
// s
},
generateStudyConditionChart:function(){
let studyConditionChart=echarts.init(document.getElementById('studyCondition'));
studyConditionChart.setOption(this.OptionStudyCondition);
// studyConditionChart.on('axisareaselected',function(){
// console.log('xxx')
// })
studyConditionChart.on('click',function(params){
if(params.value){
alert("单击了"+params.name+"柱状图");
}else{
alert("单击了"+params.name+"x轴标签");
}
// console.log(params)
if(params.componentType=='xAxis'){
// console.log(params.value)
}
});
}
}
}
</script>
<style scoped>
/*****************************************basic信息******************************************/
.basic{
width:100%;
/* min-height:358px; */
position:relative;
}
.basic .bg{/*图片响应式:内容自动向下排列*/
width:100%;
/* height:380px; */
}
.basic .info{
/*实现多个元素水平方向上居中*/
display:flex;
display:-webkit-flex;
flex-direction:row;
justify-content: center;
position: absolute;
top:7.8rem;/*整体距离顶部的位置*/
width:100%;
}
.basic .info-profile {
margin-right:1rem;
}
.basic .info-profile img{
width:4.5rem;
height:4.5rem;
border-radius:2.25rem;
}
.basic .info-detail{
display:flex;
flex-direction:column;
}
.basic .info-detail li{
margin-bottom:0.3rem;
text-align:left;
color:#fff;
}
.basic .info-detail .info-detail-name{
margin-right:0.6rem;
height:2.25rem;
line-height:2.25rem;
font-size:1.6rem;
font-weight:500;
}
.basic .info-detail .info-detail-others{
margin-right:0.6rem;
height:2rem;
line-height:2rem;
font-size:1.3rem;
font-weight:400;
}
/****************************************具体信息*****************************************/
.detail{
display:flex;
flex-direction: column;
/* justify-content:center; */
width:100%;
padding:0 1.5rem;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.tab-header{
display:flex;
justify-content:center;
width:100%;
height:3.45rem;
}
.tab-header .tab-header-name{
width:3rem;
font-size:1.5rem;
font-weight:400;
color:rgb(153,153,153)
/* padding:1rem; */
/* margin:0 2rem; */
}
.tab-header .tab-header-name:nth-child(1),.tab-header .tab-header-name:nth-child(2){
margin-right:6.75rem;
}
.tab-header .tab-header-name .text{
height:1.7rem;
line-height:1.7rem;
}
.tab-header .tab-header-name.active .bar{
width:1rem;
height:0.3rem;
margin-top:0.95rem;
margin-left:1rem;/*(3-1)/2*/
background:rgba(84,137,253,1);
border-radius:0.15rem;
}
.tab-header .tab-header-name.active{
font-weight:500;
color:rgba(51,51,51)
}
.tab{
width:100%;
}
.sub.grow-path,.sub.study-condition{
/* margin-left:2rem;
margin-right:2rem; */
padding:0 0.5rem;
}
/* .sub.recommend-for-you{
margin-left:1.5rem;
margin-right:1.5rem;
} */
.sub>.title{/*整体控制每个部分标题与内容之间的间距与样式*/
margin-top:2.5rem;
margin-bottom:1.1rem;
height:2.5rem;
line-height:2.5rem;
font-size:1.8rem;
color:#333;
text-align:center;
}
/*成长情况*/
.grow-path-chart{
width:100%;
min-height:27rem;/*(33+1125-543)/20*/
}
/*学习情况*/
.study-condition-cmp{
width:100%;
height:23.9rem;
background-color:rgb(234,241,255);
}
.study-condition-cmp>header{
display:flex;
display: -webkit-flex;
flex-direction:row;
height:3.75rem;
line-height:3.75rem;
font-size:1.2rem;
font-weight: 400;
}
.study-condition-cmp>header>.title{
width:50%;
text-align:center;
}
.study-condition-cmp .rank{
display:flex;
display: -webkit-flex;
flex-direction:row;
}
.study-condition-cmp .rank .rank-sec{
background-color: #fff;
width:50%;
}
.study-condition-cmp .rank .rank-sec.my-rank{
margin-right:1.4rem;
/* border-top-right-radius: 0.5rem; */
/* border-bottom-right-radius: 0.5rem; */
}
.study-condition-cmp .rank .rank-sec.all-rank{
margin-left:1.4rem;
/* border-top-left-radius: 0.5rem; */
/* border-bottom-left-radius: 0.5rem; */
}
.study-condition-cmp .rank .rank-sec .rank-item{
display:flex;
display:-webkit-flex;
flex-flow:row;
-ms-flex-flow: row;
align-items: center;
background-color:rgb(234,241,255);
color:#666;
border-radius: 0.15rem;
height:5.2rem;/*?*/
}
/*控制rank-item的具体margin状况*/
.study-condition-cmp .rank .rank-sec.my-rank .rank-item{
margin:0.7rem 0.75rem 1rem 0;
}
.study-condition-cmp .rank .rank-sec.all-rank .rank-item{
margin:0.7rem 0 1rem 0.75rem;
}
.study-condition-cmp .rank .rank-sec .rank-item:nth-last-child(1){
margin-bottom:0.7rem;
}
.study-condition-cmp .rank .rank-sec .rank-item .rank-num{
width:1.3rem;
height:1.3rem;
text-align:center;
line-height:1.3rem;
background-color: #709CFE;
color:#fff;
font-weight:400;
font-size:1.2rem;
border-radius: 0.65rem;
margin-left:1rem;
margin-right:0.7rem;
/* margin:0 0.5rem; */
}
.study-condition-cmp .rank .rank-sec .rank-item .rank-name{
font-size:1.3rem;
font-weight:400;
margin-right:0.95rem;
color:rgb(102,102,102);
height:3.7rem;
line-height:1.85rem;
}
/*为你推荐*/
.recommend-for-you{
padding-top:0.5rem;/*补充推荐list组件里不足的顶部间距*/
}
</style>
src/views/home/home.vue
浏览文件 @ bc4b045e
...@@ -24,7 +24,6 @@ ...@@ -24,7 +24,6 @@
<script> <script>
import { Header } from 'mint-ui'; import { Header } from 'mint-ui';
import yqyTest from '@/components/common/yqy/yqyTest'
export default { export default {
data(){ data(){
...@@ -34,7 +33,6 @@ export default { ...@@ -34,7 +33,6 @@ export default {
}, },
components:{ components:{
Header, Header,
yqyTest
}, },
mounted(){ mounted(){
this.init() this.init()
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或