地图数据 教师列表

TEAMModelOS.SmartTeach/ClientApp/components/resource/teacherMap.vue

@@ -1,112 +1,517 @@
 <template>
-  <div class="map">
-    <!--<div :style="{height:'400px',width:'100%'}" ref="myEchart"></div>-->
-    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
-    <div ref="MapMountNode" class="charts chart-bar map-mount-node"></div>
+  <div class="content">
+    <div class="map">
+      <div id="myChart" :style="{width: '600px', height: '600px'}"></div>
+    </div>
+    <div class="teacher-show">
+      <div class="header">
+        <h1 class="title ">全国名师展示</h1>
+        <ul class="region">
+          <li><a href="" class="active" rel="all">全部</a></li>
+          <li><a href="" rel="330000" class="">浙江省</a></li>
+          <li><a href="" rel="440000" class="">广东省</a></li>
+          <li><a href="" rel="210000" class="">辽宁省</a></li>
+          <li><a href="" rel="350000" class="">福建省</a></li>
+        </ul>
+      </div>
+      <div class="select">
+        <Select v-model="model1" placeholder="学段" style="width:100px">
+          <Option v-for="item in periodList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
+        <Select v-model="model1" placeholder="学科" style="width:100px">
+          <Option v-for="item in subjectList" :value="item.value" placeholder="学科" :key="item.value">{{ item.label }}</Option>
+        </Select>
+      </div>
+      <div class="content-buttom">
+
+        <div class="teacher-item" style="cursor: pointer" v-for="item in teacherList">
+          <div class="t-title">
+            <span>{{item.provice}}</span>
+            <span>
+              {{item.title}}
+            </span>
+          </div>
+          <div class="img-content">
+            <img src="http://www.wuhaneduyun.cn/uploads/snsPhotos/snscover/2019/0330/262/5c9f1ffb2b06c.png_00494494_200x200.jpg" class="th_pto">
+          </div>
+          <div class="teacher-info">
+            <p class="name">{{item.name}}</p>
+            <div class="subject">
+              <p>{{item.period}}<span></span>{{item.subject}}</p>
+            </div>
+          </div>
+          <div class="teacher-detailed">
+            <div class="item">
+              <p class="number">{{item.number1}}</p>
+              <p class="txt">{{item.text1}}</p>
+            </div>
+            <div class="item">
+              <p class="number">{{item.number2}}</p>
+              <p class="txt">{{item.text2}}</p>
+            </div>
+            <div class="item">
+              <p class="number">{{item.number3}}</p>
+              <p class="txt">{{item.text3}}</p>
+            </div>
+          </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="ewm_img">
+            <img src="https://css.huijiaoyun.com/tianyu_edu/html_other_edu/cd_good_school/images/ewm.png">
+            <p class="ewm_text">名师工作室发展报告</p>
+          </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">579260</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">1561686</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">1428690</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">234346</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 <script>
-  //import echarts from 'echarts'
-  //import '../../static/china' // 引入中国地图数据
-  import 'echarts/map/js/china.js';
+  import echarts from 'echarts'
+  import '../../static/china.js' // 引入中国地图数据
+  // import 'echarts/map/js/china.js';
   export default {
-    name: "echarts",
-    props: ["userJson"],
     data() {
       return {
-        chart: null
+        chart: null,
+        data: [],
+        total: 0,
+        model1:'',
+        periodList: [
+          {
+            value: 1,
+            label: '学前'
+          },
+          {
+            value: 2,
+            label: '小学'
+          },
+          {
+            value: 3,
+            label: '初中'
+          },
+          {
+            value: 4,
+            label: '高中'
+          },
+          {
+            value: 5,
+            label: '中职'
+          },
+        ],
+        subjectList: [
+          {
+            value: 1,
+            label: '语文'
+          },
+          {
+            value: 2,
+            label: '数学'
+          },
+          {
+            value: 3,
+            label: '英语'
+          },
+          {
+            value: 4,
+            label: '生物'
+          },
+          {
+            value:5,
+            label: '化学'
+          },
+        ],
+        teacherList: [
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500'},
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+          { provice: '四川', subject: '语文', title: '省级名师', name: '周一', period: '小学', text1: '成员', number1: '1000', text2: '资源', number2: '2000', text3: '热度', number3: '1500' },
+
+
+        ],
+
+        geoCoordMap: {
+          "四川省": [104.06, 30.67],
+          "陕西省": [108.78, 34.40],
+          "浙江省": [120.04, 30.35],
+          "广东省": [113.23, 23.22],
+          "湖北省": [114.12, 30.76],
+          "宁夏回族自治区": [106.09, 38.62],
+          "河南省": [113.45, 34.90],
+          "黑龙江省": [126.48, 45.99],
+          "甘肃省": [103.67, 36.22],
+          "河北省": [114.34, 38.22],
+          "北京市": [116.40, 39.94],
+          "江苏省": [118.72, 32.24],
+          "辽宁省": [123.24, 41.95],
+          "吉林省": [125.23, 43.90],
+          "安徽省": [117.17, 31.99],
+          "福建省": [119.16, 26.18],
+          "江西省": [115.80, 28.77],
+          "山东省": [116.91, 36.81],
+          "湖南省": [112.80, 28.47],
+          "海南省": [110.18, 19.92],
+          "贵州省": [106.49, 26.84],
+          "云南省": [102.59, 25.25],
+          "青海省": [101.60, 36.75],
+          "西藏自治区": [90.97, 29.84],
+        },
+
       };
     },
     mounted() {
-      this.chinaConfigure();
-    },
-    beforeDestroy() {
-      if (!this.chart) {
-        return;
-      }
-      this.chart.dispose();
-      this.chart = null;
+      this.drawLine();
     },
+
     methods: {
-      chinaConfigure() {
-        console.log(this.userJson)
-        let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置    
-        window.onresize = myChart.resize;
-        myChart.setOption({ // 进行相关配置
-          backgroundColor: "#02AFDB",
-          tooltip: {}, // 鼠标移到图里面的浮动提示框
-          dataRange: {
-            show: false,
-            min: 0,
-            max: 1000,
-            text: ['High', 'Low'],
-            realtime: true,
-            calculable: true,
-            color: ['orangered', 'yellow', 'lightskyblue']
+      convertData(data) {
+        var res = [];
+        for (var i = 0; i < 5; i++) {
+          var geoCoord = this.geoCoordMap[[i]];
+          if (geoCoord) {
+            res.push({
+              name: data[i].name,
+              value: geoCoord.concat(data[i].value)
+            });
+          }
+        }
+        return res;
+      },
+      drawLine () {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = echarts.init(document.getElementById('myChart'))
+        var option = {
+          backgroundColor: '',
+          title: {
+            //text: '全国教师使用情况统计图',
+            left: 'center',
+            top: '8%',
+            textStyle: {
+              color: 'black',
+              fontSize: '22'
+            }
           },
-          geo: { // 这个是重点配置区
-            map: 'china', // 表示中国地图
-            roam: true,
+          tooltip: {
+            trigger: 'item',
+            formatter: function (params) {
+              return params.name + '<br/>' +
+                params.seriesName + ": " + params.value[2]
+            }
+          },
+          legend: {
+            orient: 'vertical',
+            y: 'bottom',
+            x: 'right',
+            data: ['全国报名情况'],
+            textStyle: {
+              color: 'green'
+            }
+          },
+          geo: {
+            map: 'china',
             label: {
-              normal: {
-                show: true, // 是否显示对应地名
-                textStyle: {
-                  color: 'rgba(0,0,0,0.4)'
-                }
+              emphasis: {
+                show: false
               }
             },
+            roam: false,
             itemStyle: {
               normal: {
-                borderColor: 'rgba(0, 0, 0, 0.2)'
+                areaColor: 'blue',
+                borderColor: '#81ADDC'
               },
               emphasis: {
-                areaColor: null,
-                shadowOffsetX: 0,
-                shadowOffsetY: 0,
-                shadowBlur: 20,
-                borderWidth: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                areaColor: 'lightgreen'
               }
             }
           },
-          series: [{
-            type: 'scatter',
-            coordinateSystem: 'geo' // 对应上方配置
-          },
-          {
-            name: '启动次数', // 浮动框的标题
-            type: 'map',
-            geoIndex: 0,
-            data: [{
-              "name": "北京",
-              "value": 599
-            }, {
-              "name": "上海",
-              "value": 142
-            }, {
-              "name": "黑龙江",
-              "value": 44
-            }, {
-              "name": "深圳",
-              "value": 92
-            }, {
-              "name": "湖北",
-              "value": 810
-            }, {
-              "name": "四川",
-              "value": 453
-            }]
-          }
+          series: [
+            {
+              name: '报名人数',
+              type: 'scatter',
+              coordinateSystem: 'geo',
+              data: this.convertData(this.data),
+              symbolSize: function (val) {
+                return val[2] / 4;
+              },
+              label: {
+                normal: {
+                  formatter: '{b}',
+                  position: 'right',
+                  show: true
+                },
+                emphasis: {
+                  show: true
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: '#ddb926'
+                }
+              }
+            },
+            {
+              name: '报名人数',
+              type: 'effectScatter',
+              coordinateSystem: 'geo',
+              data: this.convertData(this.data.sort(function (a, b) {
+                return b.value - a.value;
+              }).slice(0, 5)),
+              symbolSize: function (val) {
+                return val[2] / 6;
+              },
+              showEffectOn: 'render',
+              rippleEffect: {
+                brushType: 'fill'
+              },
+              hoverAnimation: true,
+              label: {
+                normal: {
+                  formatter: '{b}',
+                  position: 'right',
+                  show: true
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: '#f4e925',
+                  shadowBlur: 16,
+                  shadowColor: '#333'
+                }
+              },
+              zlevel: 1
+            }
           ]
-        })
+        }
+        // 绘制图表
+        myChart.setOption(option);
+        
       }
-    }
+    },
+    
   }
 </script>
 <style scoped>
   .map {
     width: 100%;
-    height:600px;
+    height: 600px;
+    /*margin-left:150px;*/
+    padding-left: 250px;
+    background: url("../../assets/image/resource/banner2.jpg") center 100% no-repeat;
+  }
+  .header {
+    width: 100%;
+    height: 56px;
+    margin:auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    border-bottom: 1px solid #e4e4e4;
+  }
+  .title {
+    font-size: 32px;
+    line-height: 56px;
+    color: #000;
+    float:left;
+  }
+  .region {
+    width: 580px;
+    margin-left: 60px;
+    float: left;
+  }
+   .region li {
+    float: left;
+    margin-right: 60px;
+    margin-top: 12px;
+    font-weight:700;
+    font-size: 20px;
+    list-style:none;
+  }
+    .region li a:hover {
+      color: #1a89e3;
+      border-bottom: 2px solid #1a89e3;
+    }
+    .region li a {
+      display: inline-block;
+      line-height: 36px;
+      color: #888;
+      padding-bottom: 6px;
+    }
+  .teacher-show {
+    width: 1200px;
+    height: 1228px;
+    margin: 45px auto auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .select {
+    float: right;
+    margin-top: -3%;
+  }
+  .content-buttom {
+    width: 1200px;
+    height: 1228px;
+  }
+  .teacher-item {
+    width: 222px;
+    height: 313px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    border: 1px solid #ececec;
+    -webkit-box-shadow: 1px 1px 10px #ececec;
+    box-shadow: 1px 1px 10px #ececec;
+    margin-bottom: 20px;
+    background: #fff;
+    float: left;
+    margin-left: 1%;
+    margin-top: 1%;
+  }
+  .t-title {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+    .t-title span {
+      display: inline-block;
+      line-height: 20px;
+      font-size: 16px;
+      color: #555;
+      margin: 20px;
+    }
+   .img-content {
+    width: 100%;
+    height: 100px;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .th_pto {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    margin: 0 auto;
+    position: relative;
+  }
+  .teacher-info {
+    width: 100%;
+    height: 70px;
+    text-align: center;
+    margin-top: 22px;
+  }
+    .teacher-info .name {
+      font-size: 18px;
+      line-height: 30px;
+      font-weight: bold;
+    }
+    .teacher-info .subject {
+      width: 116px;
+      height: 24px;
+      margin: 0 auto;
+      -webkit-border-radius: 20px;
+      border-radius: 20px;
+      background: -webkit-gradient(linear, left top, right top, from(#29cff7), to(#4ae3c7));
+      background: -webkit-linear-gradient(left, #29cff7, #4ae3c7);
+      background: -o-linear-gradient(left, #29cff7, #4ae3c7);
+      background: linear-gradient(to right, #29cff7, #4ae3c7);
+    }
+      .teacher-info .subject p span {
+        display: inline-block;
+        width: 4px;
+        height: 4px;
+        -webkit-border-radius: 50%;
+        border-radius: 50%;
+        margin-top: 10px;
+        background: #fff;
+        margin: 3px 6px;
+      }
+  .teacher-detailed {
+    width: 100%;
+    height: 60px;
+    margin-top: 8px;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-justify-content: space-around;
+    -ms-flex-pack: distribute;
+    justify-content: space-around;
+  }
+   .item .txt {
+    color: #888;
   }
-
 </style>

TEAMModelOS.SmartTeach/ClientApp/static/china.js

@@ -1,4 +1,4 @@
-// import echarts from 'echarts'
+import echarts from 'echarts'
 (function (root, factory) {
     if (typeof define === 'function' && define.amd) {
         // AMD. Register as an anonymous module.

TEAMModelOS.SmartTeach/ClientApp/view/resource/HomePage.vue

@@ -2,16 +2,20 @@
   <div id="app">
     <Header></Header>
     <Home></Home>
+    <Footer></Footer>
   </div>
 </template>
 <script>
   import Header from '@/common/headers.vue'
   import Home from '@/components/resource/home.vue'
+  import Footer from '@/common/footer.vue'
+
 
   export default {
     components: {
       Header,
-      Home
+      Home,
+      Footer
     },
     data() {
       return {
@@ -27,6 +31,6 @@
   #app {
     width: 100%;
     height: auto;
-    background-color: #f3f3f3;
+    background-color: #fff;
   }
 </style>

TEAMModelOS.SmartTeach/ClientApp/view/resource/Teacher.vue

@@ -25,6 +25,6 @@
   #app {
     width: 100%;
     height: auto;
-    background-color: #f3f3f3;
+    background-color: #FFF;
   }
 </style>