|
|
@@ -1,22 +1,24 @@
|
|
|
<template>
|
|
|
<div class="content">
|
|
|
- <div class="map">
|
|
|
- <span class="map-pro">四川省</span>
|
|
|
+ <div class="top">
|
|
|
+ <div class="map">
|
|
|
+ <span class="map-pro">{{countData.name}}</span>
|
|
|
|
|
|
- <div class="my-map">
|
|
|
- <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
|
|
|
- </div>
|
|
|
- <div class="chart">
|
|
|
- <h1>15854</h1><h2>个</h2>
|
|
|
- <span>名师工作室</span>
|
|
|
- <ul>
|
|
|
- <li><span>5215人</span><span>一线教师</span></li>
|
|
|
- <li><span>5215个</span><span>资源</span></li>
|
|
|
- <li><span>54546次</span><span>关注度</span></li>
|
|
|
- </ul>
|
|
|
- <!--<div id="Chart" :style="{width: '500px', height: '700px'}"></div>-->
|
|
|
+ <div class="my-map">
|
|
|
+ <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <h1>{{countData.data}}</h1><h2>个</h2>
|
|
|
+ <h3>名师工作室</h3>
|
|
|
+ <ul>
|
|
|
+ <li><span>{{countData.teacher}}人</span><p>一线教师</p></li>
|
|
|
+ <li><span>{{countData.source}}个</span><p>资源</p></li>
|
|
|
+ <li><span>{{countData.focus}}次</span><p>关注度</p></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="teacher-show">
|
|
|
<div class="header">
|
|
|
<h1 class="title ">名师展示</h1>
|
|
|
@@ -72,52 +74,19 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="data-view">
|
|
|
- <div class="four">
|
|
|
- <img src="https://css.huijiaoyun.com/tianyu_edu/html_other_edu/cd_good_school/images/four.png" alt="">
|
|
|
- </div>
|
|
|
<div class="resource-data">
|
|
|
- <div class="data-item">
|
|
|
- <div class="img-content">
|
|
|
- <span class="data-view-teacher"></span>
|
|
|
- </div>
|
|
|
- <p class="data-name">名师总数</p>
|
|
|
- <p class="number">13201</p>
|
|
|
- </div>
|
|
|
- <div class="data-item">
|
|
|
- <div class="img-content">
|
|
|
- <span class="data-view-member"></span>
|
|
|
- </div>
|
|
|
- <p class="data-name">成员总数</p>
|
|
|
- <p class="number">57260</p>
|
|
|
- </div>
|
|
|
- <div class="data-item">
|
|
|
- <div class="img-content">
|
|
|
- <span class="data-view-article"></span>
|
|
|
- </div>
|
|
|
- <p class="data-name">文章总数</p>
|
|
|
- <p class="number">15686</p>
|
|
|
- </div>
|
|
|
- <div class="data-item">
|
|
|
- <div class="img-content">
|
|
|
- <span class="data-view-active"></span>
|
|
|
- </div>
|
|
|
- <p class="data-name">活动总数</p>
|
|
|
- <p class="number">38792</p>
|
|
|
- </div>
|
|
|
- <div class="data-item">
|
|
|
- <div class="img-content">
|
|
|
- <span class="data-view-resource"></span>
|
|
|
- </div>
|
|
|
- <p class="data-name">资源总数</p>
|
|
|
- <p class="number">142890</p>
|
|
|
- </div>
|
|
|
- <div class="data-item">
|
|
|
- <div class="img-content">
|
|
|
- <span class="data-view-move"></span>
|
|
|
- </div>
|
|
|
- <p class="data-name">优课总数</p>
|
|
|
- <p class="number">23446</p>
|
|
|
- </div>
|
|
|
+ <ul>
|
|
|
+ <li>445585</li>
|
|
|
+ <li>856585</li>
|
|
|
+ <li>482655</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="resource">
|
|
|
+ <ul>
|
|
|
+ <li>6545585</li>
|
|
|
+ <li>152685</li>
|
|
|
+ <li>624585</li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -129,10 +98,39 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- chart: null,
|
|
|
- data: [],
|
|
|
- total: 0,
|
|
|
model1: '',
|
|
|
+ countData:[],
|
|
|
+ dataIndex: '',
|
|
|
+ countDatas: [
|
|
|
+ {
|
|
|
+ name: '四川省',
|
|
|
+ data:'14666',
|
|
|
+ teacher: '41654',
|
|
|
+ source: '599545',
|
|
|
+ focus:'454556'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '湖北省',
|
|
|
+ data: '14956',
|
|
|
+ teacher: '44944',
|
|
|
+ source: '544445',
|
|
|
+ focus: '45956'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '广东省',
|
|
|
+ data: '89966',
|
|
|
+ teacher: '41654',
|
|
|
+ source: '545445',
|
|
|
+ focus: '5416'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '云南省',
|
|
|
+ data: '14986',
|
|
|
+ teacher: '418794',
|
|
|
+ source: '545445',
|
|
|
+ focus: '45556'
|
|
|
+ }
|
|
|
+ ],
|
|
|
periodList: [
|
|
|
{
|
|
|
value: 1,
|
|
|
@@ -214,38 +212,23 @@
|
|
|
{ provice: '四川', subject: '语文', img: require('../../assets/image/resource/people11.jpg'), title: '省级名师', name: '张浩然', period: '中学', text1: '成员', number1: '1060', text2: '资源', number2: '2800', text3: '热度', number3: '1500' },
|
|
|
]
|
|
|
},
|
|
|
- teacherData: [
|
|
|
- {
|
|
|
- "name": "高新区",
|
|
|
- "value": 80
|
|
|
- }, {
|
|
|
- "name": "青羊区",
|
|
|
- "value": 87
|
|
|
- }, {
|
|
|
- "name": "天府新区",
|
|
|
- "value": 60
|
|
|
- }, {
|
|
|
- "name": "锦江区",
|
|
|
- "value": 40
|
|
|
- }, {
|
|
|
- "name": "金牛区",
|
|
|
- "value": 50
|
|
|
- }, {
|
|
|
- "name": "郫都区",
|
|
|
- "value": 30
|
|
|
- }, {
|
|
|
- "name": "温江区",
|
|
|
- "value": 40
|
|
|
- }
|
|
|
- ]
|
|
|
-
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.drawLine();
|
|
|
- //this.drawChart();
|
|
|
this.teacherList = this.teacher.datazt;
|
|
|
+ this.countData = this.countDatas[0]
|
|
|
},
|
|
|
+ //computed: {
|
|
|
+ // dataIndex: function () {
|
|
|
+ // console.log('12111541');
|
|
|
+ // }
|
|
|
+ //},
|
|
|
+ //watch: {
|
|
|
+ // dataIndex() {
|
|
|
+ // console.log('23612651');
|
|
|
+ // },
|
|
|
+ //},
|
|
|
methods: {
|
|
|
chooseSchool(data) {
|
|
|
if (data == "zt") {
|
|
|
@@ -261,6 +244,18 @@
|
|
|
teacherZone() {
|
|
|
this.$router.push('/TeacherZone')
|
|
|
},
|
|
|
+ choosePro(data) {
|
|
|
+ console.log(data, '5646464');
|
|
|
+ if (data == '0') {
|
|
|
+ this.countData = this.countDatas[0]
|
|
|
+ } else if (data == '2') {
|
|
|
+ this.countData = this.countDatas[1]
|
|
|
+ }else if (data == '1') {
|
|
|
+ this.countData = this.countDatas[2]
|
|
|
+ }else if (data == '3') {
|
|
|
+ this.countData = this.countDatas[3]
|
|
|
+ }
|
|
|
+ },
|
|
|
drawLine() {
|
|
|
var mapChart = echarts.init(document.getElementById('myChart'));
|
|
|
// mapChart的配置
|
|
|
@@ -294,7 +289,7 @@
|
|
|
normal: {
|
|
|
borderWidth: .5,//区域边框宽度
|
|
|
borderColor: '#666',//区域边框颜色
|
|
|
- areaColor: "#fff",//区域颜色
|
|
|
+ areaColor: "lightblue",//区域颜色
|
|
|
//background-image: linear-gradient(135deg, #f5f7fa 0 %, #c3cfe2 100 %);
|
|
|
},
|
|
|
emphasis: {
|
|
|
@@ -307,158 +302,49 @@
|
|
|
{ name: '四川', selected: true },//福建为选中状态
|
|
|
{ name: '广东', selected: true },//福建为选中状态
|
|
|
{ name: '湖北', selected: true },//福建为选中状态
|
|
|
+ { name: '云南', selected: true },//福建为选中状态
|
|
|
]
|
|
|
}],
|
|
|
}
|
|
|
mapChart.setOption(option);
|
|
|
- mapChart.on('click', function (params) {
|
|
|
- this.dataIndex = params.dataIndex;
|
|
|
- console.log(params);
|
|
|
+ mapChart.on('click', (params) => {
|
|
|
+ let data = params.dataIndex;
|
|
|
+ this.choosePro(data);
|
|
|
});
|
|
|
},
|
|
|
- //drawChart() {
|
|
|
- // var myChart = echarts.init(document.getElementById('Chart'));
|
|
|
- // var xData = [],
|
|
|
- // yData = [];
|
|
|
- // var min = 50; // 最小值的定义
|
|
|
- // this.teacherData.map(function (a, b) {
|
|
|
- // xData.push(a.name);
|
|
|
- // if (a.value === 0) {
|
|
|
- // yData.push(a.value + min);
|
|
|
- // } else {
|
|
|
- // yData.push(a.value);
|
|
|
- // }
|
|
|
- // });
|
|
|
- // var option = {
|
|
|
- // //color: ['#3398DB'],
|
|
|
- // tooltip: {
|
|
|
- // trigger: 'axis',
|
|
|
- // axisPointer: {
|
|
|
- // type: 'line',
|
|
|
- // lineStyle: {
|
|
|
- // opacity: 0
|
|
|
- // }
|
|
|
- // },
|
|
|
- // formatter: function (prams) {
|
|
|
- // return "名师数：" + prams[0].data
|
|
|
- // }
|
|
|
- // },
|
|
|
- // grid: {
|
|
|
- // left: '0%',
|
|
|
- // right: '0%',
|
|
|
- // bottom: '5%',
|
|
|
- // top: '5%',
|
|
|
- // height: '50%',
|
|
|
- // containLabel: true,
|
|
|
- // z: 22
|
|
|
- // },
|
|
|
- // xAxis: [{
|
|
|
- // type: 'category',
|
|
|
- // gridIndex: 0,
|
|
|
- // data: xData,
|
|
|
- // axisTick: {
|
|
|
- // alignWithLabel: true
|
|
|
- // },
|
|
|
- // axisLine: {
|
|
|
- // lineStyle: {
|
|
|
- // color: '#0c3b71'
|
|
|
- // }
|
|
|
- // },
|
|
|
- // axisLabel: {
|
|
|
- // show: true,
|
|
|
- // color: 'rgb(170,170,170)',
|
|
|
- // fontSize: 12
|
|
|
- // }
|
|
|
- // }],
|
|
|
- // yAxis: [{
|
|
|
- // type: 'value',
|
|
|
- // gridIndex: 0,
|
|
|
- // splitLine: {
|
|
|
- // show: true
|
|
|
- // },
|
|
|
- // axisTick: {
|
|
|
- // show: true
|
|
|
- // },
|
|
|
- // max: 150,
|
|
|
- // axisLine: {
|
|
|
- // lineStyle: {
|
|
|
- // color: '#0c3b71'
|
|
|
- // }
|
|
|
- // },
|
|
|
- // axisLabel: {
|
|
|
- // color: 'rgb(170,170,170)',
|
|
|
- // formatter: '{value} '
|
|
|
- // }
|
|
|
- // },
|
|
|
- // {
|
|
|
- // type: 'value',
|
|
|
- // gridIndex: 0,
|
|
|
- // max: 200,
|
|
|
- // }
|
|
|
- // ],
|
|
|
- // series: [{
|
|
|
- // type: 'bar',
|
|
|
- // barWidth: '20',
|
|
|
- // xAxisIndex: 0,
|
|
|
- // yAxisIndex: 0,
|
|
|
- // itemStyle: {
|
|
|
- // normal: {
|
|
|
- // //barBorderRadius: [30, 30, 0, 0],
|
|
|
- // color: new echarts.graphic.LinearGradient(
|
|
|
- // 0, 0, 0, 1, [
|
|
|
- // // {
|
|
|
- // // offset: 0,
|
|
|
- // // color: '#00feff'
|
|
|
- // //},
|
|
|
- // {
|
|
|
- // offset: 0.5,
|
|
|
- // color: '#4da1ff'
|
|
|
- // },
|
|
|
- // {
|
|
|
- // offset: 1,
|
|
|
- // color: '#4da1ff'
|
|
|
- // }
|
|
|
- // ]
|
|
|
- // )
|
|
|
- // }
|
|
|
- // },
|
|
|
- // data: yData,
|
|
|
- // zlevel: 11
|
|
|
-
|
|
|
- // },
|
|
|
- // ]
|
|
|
- // };
|
|
|
- // myChart.setOption(option);
|
|
|
- //}
|
|
|
},
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ background: -webkit-linear-gradient(left, #FFD3AC,#FFC381);
|
|
|
+ }
|
|
|
.map {
|
|
|
width: 65%;
|
|
|
height: 600px;
|
|
|
margin: auto;
|
|
|
/*margin-left:150px;*/
|
|
|
padding-left: 250px;
|
|
|
- background: url("../../assets/image/resource/map-bg.png") no-repeat;
|
|
|
+ background: url("../../assets/image/resource/map-bg.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- /*display:flex;*/
|
|
|
}
|
|
|
.map-pro {
|
|
|
display: block;
|
|
|
padding-top: 13%;
|
|
|
margin-left: 2%;
|
|
|
- font-size: 24px;
|
|
|
+ font-size: 25px;
|
|
|
font-weight: 800;
|
|
|
- color: orangered;
|
|
|
+ color: #f05053;
|
|
|
}
|
|
|
.my-map {
|
|
|
height: 600px;
|
|
|
width: 600px;
|
|
|
/*border: 1px solid red;*/
|
|
|
/*text-align: right;*/
|
|
|
+ /*background-color:#555;*/
|
|
|
margin-top: -15%;
|
|
|
margin-left: 25%;
|
|
|
}
|
|
|
@@ -470,23 +356,47 @@
|
|
|
margin-left: -18%;
|
|
|
}
|
|
|
.chart h1{
|
|
|
- color:coral;
|
|
|
+ color:gold;
|
|
|
+ margin-top:35px;
|
|
|
}
|
|
|
.chart h2 {
|
|
|
display: block;
|
|
|
- margin-top: -10%;
|
|
|
+ margin-top: -33px;
|
|
|
margin-left: 25%;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fefefe;
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
+ .chart h3 {
|
|
|
+ font-size:20px;
|
|
|
+ font-weight:800;
|
|
|
+ color:#fefefe;
|
|
|
}
|
|
|
.chart ul {
|
|
|
list-style:none;
|
|
|
width:150px;
|
|
|
+ margin-top:10%;
|
|
|
}
|
|
|
.chart li {
|
|
|
- width: 150px;
|
|
|
+ width: 200px;
|
|
|
height: 20px;
|
|
|
- border: 1px solid red;
|
|
|
- margin-bottom: 10px;
|
|
|
+ /*border: 1px solid red;*/
|
|
|
+ margin-bottom: 15px;
|
|
|
border-radius: 25px;
|
|
|
+ background: -webkit-linear-gradient(left, #f05053, #f05053);
|
|
|
+ }
|
|
|
+ .chart span {
|
|
|
+ color:#fff;
|
|
|
+ font-size:14px;
|
|
|
+ margin-left:15px;
|
|
|
+ }
|
|
|
+ .chart p {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 800;
|
|
|
+ display: block;
|
|
|
+ margin-left: 100px;
|
|
|
+ margin-top: -21px;
|
|
|
}
|
|
|
.header {
|
|
|
width: 100%;
|
|
|
@@ -601,12 +511,12 @@
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.teacher-info .subject {
|
|
|
- width: 116px;
|
|
|
- height: 24px;
|
|
|
+ width: 120px;
|
|
|
+ height: 25px;
|
|
|
margin: 0 auto;
|
|
|
-webkit-border-radius: 20px;
|
|
|
border-radius: 20px;
|
|
|
- background: -webkit-linear-gradient(left, #a1c4fd, #c2e9fb);
|
|
|
+ background: -webkit-linear-gradient(left, #ff7e56, #ffc77d);
|
|
|
}
|
|
|
.teacher-info .subject p span {
|
|
|
display: inline-block;
|
|
|
@@ -618,6 +528,11 @@
|
|
|
background: #fff;
|
|
|
margin: 3px 6px;
|
|
|
}
|
|
|
+ .teacher-info .subject p {
|
|
|
+ padding-top: 3px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
.teacher-detailed {
|
|
|
width: 100%;
|
|
|
height: 60px;
|
|
|
@@ -635,9 +550,11 @@
|
|
|
}
|
|
|
.data-view {
|
|
|
width: 100%;
|
|
|
- height: 663px;
|
|
|
+ height: 650px;
|
|
|
overflow: hidden;
|
|
|
- background: url('../../assets/image/resource/data-view-bg.png') no-repeat center center;
|
|
|
+ background: url('../../assets/image/resource/teacher-bottom.png') no-repeat;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
.four {
|
|
|
width: 409px;
|
|
|
@@ -666,19 +583,41 @@
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
.resource-data {
|
|
|
- width: 1100px;
|
|
|
+ /*width: 1100px;*/
|
|
|
height: 130px;
|
|
|
- -webkit-box-sizing: border-box;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 130px auto 0;
|
|
|
- display: -webkit-box;
|
|
|
- display: -webkit-flex;
|
|
|
- display: -ms-flexbox;
|
|
|
- display: flex;
|
|
|
- -webkit-justify-content: space-around;
|
|
|
- -ms-flex-pack: distribute;
|
|
|
- justify-content: space-around;
|
|
|
+ /*text-align:left;*/
|
|
|
}
|
|
|
+ .resource-data ul {
|
|
|
+ font-size: 25px;
|
|
|
+ font-weight: 800;
|
|
|
+ margin-top: 365px;
|
|
|
+ margin-left: 565px;
|
|
|
+ }
|
|
|
+ .resource-data ul li {
|
|
|
+ float: left;
|
|
|
+ width: 316px;
|
|
|
+ display: block;
|
|
|
+ font-size: 28px;
|
|
|
+ color:#ff705b;
|
|
|
+ }
|
|
|
+ .resource {
|
|
|
+ /*width: 1100px;*/
|
|
|
+ height: 130px;
|
|
|
+ /*text-align:left;*/
|
|
|
+ }
|
|
|
+ .resource ul {
|
|
|
+ font-size: 25px;
|
|
|
+ font-weight: 800;
|
|
|
+ margin-top: 48px;
|
|
|
+ margin-left: 565px;
|
|
|
+ }
|
|
|
+ .resource ul li {
|
|
|
+ float: left;
|
|
|
+ width: 316px;
|
|
|
+ display: block;
|
|
|
+ font-size: 28px;
|
|
|
+ color:#ff705b;
|
|
|
+ }
|
|
|
.data-item {
|
|
|
width: 130px;
|
|
|
height: 100%;
|
|
|
@@ -689,42 +628,6 @@
|
|
|
margin: 25px auto 17px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
- .data-view-teacher {
|
|
|
- width: 43px;
|
|
|
- height: 51px;
|
|
|
- margin-top: 4px;
|
|
|
- background: url('../../assets/image/resource/data-view-teacher.png') no-repeat;
|
|
|
- }
|
|
|
- .data-view-member {
|
|
|
- width: 54px;
|
|
|
- height: 33px;
|
|
|
- margin-top: 13px;
|
|
|
- background: url('../../assets/image/resource/data-view-member.png') no-repeat;
|
|
|
- }
|
|
|
- .data-view-article {
|
|
|
- width: 46px;
|
|
|
- height: 50px;
|
|
|
- margin-top: 4px;
|
|
|
- background: url('../../assets/image/resource/data-view-article.png') no-repeat;
|
|
|
- }
|
|
|
- .data-view-active {
|
|
|
- width: 44px;
|
|
|
- height: 50px;
|
|
|
- margin-top: 4px;
|
|
|
- background: url('../../assets/image/resource/data-view-active.png') no-repeat;
|
|
|
- }
|
|
|
- .data-view-resource {
|
|
|
- width: 46px;
|
|
|
- height: 50px;
|
|
|
- margin-top: 4px;
|
|
|
- background: url('../../assets/image/resource/data-view-resource.png') no-repeat;
|
|
|
- }
|
|
|
- .data-view-move {
|
|
|
- width: 52px;
|
|
|
- height: 50px;
|
|
|
- margin-top: 4px;
|
|
|
- background: url('../../assets/image/resource/data-view-move.png') no-repeat;
|
|
|
- }
|
|
|
.data-name {
|
|
|
font-size: 18px;
|
|
|
color: #555;
|
zhousheng
