教师页面数据地图

TEAMModelOS.SmartTeach/ClientApp/components/HeaderPage.vue

@@ -16,27 +16,27 @@
         <div class="who-is">
           <ul class="people-list">
             <li class=" show animated slideInLeft delay-1s">
-              <img src="../assets/image/who01.png">
+              <img src="../../assets/image/resource/who01.png">
               <span>我是管理者</span>
             </li>
             <li class=" show animated slideInLeft ">
-              <img src="../assets/image/who02.png">
+              <img src="../../assets/image/resource/who02.png">
               <span>我是教师</span>
             </li>
             <li class="show animated slideInRight">
-              <img src="../assets/image/who03.png">
+              <img src="../../assets/image/resource/who03.png">
               <span>我是学生</span>
             </li>
             <li class="show animated slideInRight delay-1s">
-              <img src="../assets/image/who04.png">
+              <img src="../../assets/image/resource/who04.png">
               <span>我是家长</span>
             </li>
           </ul>
         </div>
         <div class="center-info">
           <h1>已超过<span>1000</span>所学校开通了我们的服务</h1>
-          <img  src="../assets/image/center01.png" >
-          <img  src="../assets/image/bottom.png" >
+          <img  src="../../assets/image/resource/center01.png" >
+          <img  src="../../assets/image/resource/bottom.png" >
         </div>
      </div>
 </template>
@@ -47,10 +47,10 @@
         homeCarouselImg: [
 
           {
-            images: require('../assets/image/banner02.png')
+            images: require('../../assets/image/resource/banner02.png')
           },
           {
-            images: require('../assets/image/banner01.png')
+            images: require('../../assets/image/resource/banner01.png')
           },
         ]
       };
@@ -66,7 +66,6 @@
 
   .title {
     width: 100%;
-    margin-top: 5%;
   }
 
   .header {

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

@@ -0,0 +1,112 @@
+<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>
+</template>
+<script>
+  //import echarts from 'echarts'
+  //import '../../static/china' // 引入中国地图数据
+  import 'echarts/map/js/china.js';
+  export default {
+    name: "echarts",
+    props: ["userJson"],
+    data() {
+      return {
+        chart: null
+      };
+    },
+    mounted() {
+      this.chinaConfigure();
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return;
+      }
+      this.chart.dispose();
+      this.chart = null;
+    },
+    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']
+          },
+          geo: { // 这个是重点配置区
+            map: 'china', // 表示中国地图
+            roam: true,
+            label: {
+              normal: {
+                show: true, // 是否显示对应地名
+                textStyle: {
+                  color: 'rgba(0,0,0,0.4)'
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                borderColor: 'rgba(0, 0, 0, 0.2)'
+              },
+              emphasis: {
+                areaColor: null,
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                shadowBlur: 20,
+                borderWidth: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          },
+          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
+            }]
+          }
+          ]
+        })
+      }
+    }
+  }
+</script>
+<style scoped>
+  .map {
+    width: 100%;
+    height:600px;
+  }
+
+</style>

TEAMModelOS.SmartTeach/ClientApp/router/routes.js

@@ -2,8 +2,12 @@
 //import ServerSideLogin from '@/view/serverside/login'
 // import HTTP404 from '@/view/404'
 import Index from '@/view/resource/index'
+import HomePage from '@/view/resource/HomePage'
+import Teacher from '@/view/resource/Teacher'
 import { resolve } from 'url';
 
 export const routes = [  
   { name: 'index', path: '', component: Index },
+  { name: 'HomePage', path: '/HomePage', component: HomePage },
+  { name: 'Teacher', path: '/Teacher', component: Teacher },
 ]

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

@@ -0,0 +1,32 @@
+<template>
+  <div id="app">
+    <Header></Header>
+    <Home></Home>
+  </div>
+</template>
+<script>
+  import Header from '@/common/headers.vue'
+  import Home from '@/components/resource/home.vue'
+
+  export default {
+    components: {
+      Header,
+      Home
+    },
+    data() {
+      return {
+
+      }
+    },
+    mounted() {
+
+    }
+  }
+</script>
+<style scoped>
+  #app {
+    width: 100%;
+    height: auto;
+    background-color: #f3f3f3;
+  }
+</style>

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

@@ -0,0 +1,30 @@
+<template>
+  <div id="app">
+    <Header></Header>
+    <teacher-map></teacher-map>
+  </div>
+</template>
+<script>
+  import Header from '@/common/headers.vue'
+  import TeacherMap from '@/components/resource/teacherMap.vue'
+
+  export default {
+    components: {
+      Header,
+      TeacherMap
+    },
+    data() {
+      return {
+
+      }
+    },
+
+  }
+</script>
+<style scoped>
+  #app {
+    width: 100%;
+    height: auto;
+    background-color: #f3f3f3;
+  }
+</style>