lizhixin

src/BI/ClientApp/src/App.vue

@@ -17,6 +17,6 @@ export default {
   width: 100vw;
   height: 100vh;
   background-color: #020308;
-  overflow: hidden;
+// overflow: hidden;
 }
 </style>

src/BI/ClientApp/src/main.ts

@@ -6,7 +6,8 @@ import axios from 'axios';
 import ElementPlus from 'element-plus'
 import 'element-plus/lib/theme-chalk/index.css'
 import dataV from '@jiaminghi/data-view'
-import * as echarts from 'echarts';
+//import * as echarts from 'echarts';
+
 
 //引入全局css
 import "./assets/scss/global.scss"
@@ -17,5 +18,5 @@ const app = createApp(App)
 app.config.globalProperties.$http = axios  //绑定实例
 //请求基准路径的配置
 axios.defaults.baseURL='https://localhost:5001/api';
-app.config.globalProperties.$echarts = echarts  //绑定实例
+//app.config.globalProperties.$echarts = echarts  //绑定实例
 app.use(store).use(router).use(dataV).use(ElementPlus).mount('#app')

src/BI/ClientApp/src/router/index.ts

@@ -2,24 +2,19 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 
 const routes: Array<RouteRecordRaw> = [
   {
-    path: '/',
-    name: '/first',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "index" */ '../views/login/index.vue'),
+    path:'/',
+    redirect:'/screen'
   },
   {
     path:'/login',
     name:'login',
     component: () =>
-      import(/* webpackChunkName: "index" */ '../views/login/index.vue'),
+      import(/* webpackChunkName: "login" */ '../views/login/index.vue'),
   },
   {
     path: '/Index',
     name: 'Index',
-    component: () => import('../views/Index.vue'),
+    component: () => import(/* webpackChunkName: "index" */'../views/Index.vue'),
   },
   {
     path: '/screen',
@@ -27,6 +22,21 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "screen" */ '../views/Screen/Screen.vue'),
   },
+  {
+    path:'/tmdId',
+    name:'tmdId',
+    component:()=>import(/* webpackChunkName: "tmdID" */'../views/Screen/tmdID.vue')
+  },
+  {
+    path:'/hiteach',
+    name:'hiteach',
+    component:()=>import(/* webpackChunkName: "HITeach" */'../views/Screen/HITeach.vue')
+  },
+  {
+    path:'/socrates',
+    name:'socrates',
+    component:()=>import(/* webpackChunkName: "Socrates" */'../views/Screen/Socrates.vue')
+  },
 ]
 
 const router = createRouter({
@@ -35,6 +45,7 @@ const router = createRouter({
 })
 
 // 挂载路由导航守卫,to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作 next('/login')强制跳转login
+/*
 router.beforeEach((to, from, next) => {
   //如果访问登陆页面
   if (to.path === '/login') return next()
@@ -43,4 +54,5 @@ router.beforeEach((to, from, next) => {
   if (!tokenStr) return next({name:'login'})
   next()
 })
+*/
 export default router

src/BI/ClientApp/src/views/Screen/HITeach.vue

@@ -0,0 +1,384 @@
+<template>
+  <div class="main">
+    <div class="header">
+      HiTeach使用位置统计
+      <span id=localtime
+            style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
+    </div>
+    <div id="content">
+      <div class="content_left">
+        <div class="online">
+          <div class="title">授权状态比例</div>
+          <div ref="online_con"
+               class="online_con"
+               id="container2"></div>
+        </div>
+        <div class="industry">
+          <div class="title">在线数统计</div>
+          <div ref="industry_con"
+               class="industry_con"
+               id="container3"></div>
+        </div>
+      </div>
+      <div class="content_center">
+        <div class="center">
+          <div class="title">使用地区分布</div>
+          <div class="center_con"
+               id="distribution_map"></div>
+        </div>
+      </div>
+      <div class="content_right">
+        <div class="report">
+          <div class="report1">
+            <p>今日HiTA使用人数</p>
+            <small>{{}}</small>
+          </div>
+          <div class="report2">
+            <p>目前HITA在线人数</p>
+            <small>{{}}</small>
+          </div>
+        </div>
+        <div class="news_report">
+          <div class="title">作业系统分布</div>
+          <div ref="work"
+               class="work"
+               id="container5"></div>
+        </div>
+        <div class="data_box">
+          <div class="title">24小时内通信量</div>
+          <div class="data_con"
+               id="container4"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, defineComponent, onMounted } from 'vue';
+import * as echarts from 'echarts';
+export default defineComponent({
+  setup() {
+    let online_con = ref(null);
+    let industry_con = ref(null);
+    let work = ref(null);
+    onMounted(() => {
+      charts1();
+      charts2();
+      charts3();
+    });
+    const charts1 = () => {
+      const myChart4 = echarts.init(online_con.value);
+      const option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          top: '1%',
+          left: 'center',
+        },
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center',
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '40',
+                fontWeight: 'bold',
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 30, name: '未授权' },
+              { value: 50, name: '授权中' },
+              { value: 20, name: '已到期' },
+            ],
+          },
+        ],
+      };
+      myChart4.setOption(option);
+    };
+    const charts2 = () => {
+      const myChart5 = echarts.init(industry_con.value);
+      const option = {
+        xAxis: {
+          type: 'category',
+          data: [
+            '1',
+            '2',
+            '3',
+            '4',
+            '5',
+            '6',
+            '7',
+            '8',
+            '9',
+            '10',
+            '11',
+            '12',
+            '13',
+            '14',
+            '15',
+            '16',
+            '17',
+            '18',
+            '19',
+            '20',
+            '21',
+            '22',
+            '23',
+            '24',
+          ],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [
+              50, 70, 30, 20, 20, 10, 40, 50, 70, 80, 100, 120, 90, 150, 170,
+              160, 190, 120, 60, 80, 50, 180, 190, 50,
+            ],
+            type: 'bar',
+          },
+        ],
+      };
+      myChart5.setOption(option);
+    };
+    const charts3 = () => {
+      const myChart6 = echarts.init(work.value);
+      const option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          top: '1%',
+          left: 'center',
+        },
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center',
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '40',
+                fontWeight: 'bold',
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 30, name: '未授权' },
+              { value: 50, name: '授权中' },
+              { value: 20, name: '已到期' },
+            ],
+          },
+        ],
+      };
+      myChart6.setOption(option);
+    };
+    return {
+      online_con,
+      industry_con,
+      work,
+      charts1,
+      charts2,
+      charts3,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.main {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: url('../../assets/images/screen/tmdID/bg.jpg') no-repeat;
+  background-size: cover;
+  /* height: 880px; */
+  min-width: 1386px;
+}
+.header {
+  width: 100%;
+  height: 90px;
+  background: url('../../assets/images/screen/HITeach/header.png') center
+    no-repeat;
+  text-align: center;
+  font-size: 36px;
+  color: #00f6ff;
+  line-height: 90px;
+  margin: 0 auto;
+}
+#content {
+  width: 1860px;
+  height: 100%;
+  margin: 20px auto 0 auto;
+}
+#content .content_left {
+  width: 385px;
+  height: 100%;
+  float: left;
+}
+.content_left .online {
+  width: 385px;
+  height: 330px;
+  float: left;
+  background: url('../../assets/images/screen/HITeach/zuo2.png') no-repeat;
+}
+.content_left .title {
+  width: 385px;
+  height: 70px;
+  float: left;
+  color: #00f6ff;
+  font-size: 20px;
+  line-height: 70px;
+  background: url('../../assets/images/screen/HITeach/bottom_line.png') bottom
+    no-repeat;
+  text-align: center;
+}
+.content_left .title img {
+  vertical-align: middle;
+}
+.online .online_con {
+  width: 365px;
+  height: 240px;
+  padding: 10px;
+  float: left;
+}
+.content_left .industry {
+  width: 385px;
+  height: 425px;
+  float: left;
+  background: url('../../assets/images/screen/HITeach/hangye1.png') no-repeat;
+  margin-top: 160px;
+}
+.industry .industry_con {
+  width: 365px;
+  height: 335px;
+  padding: 0px;
+  float: left;
+}
+#content .content_center {
+  width: 1050px;
+  height: 100%;
+  float: left;
+  margin-left: 20px;
+}
+.content_center {
+  width: 1050px;
+  height: 650px;
+  float: left;
+  background: url('../../assets/images/screen/HITeach/center011.png') no-repeat;
+}
+.content_center .title {
+  width: 1050px;
+  height: 70px;
+  float: left;
+  color: #00f6ff;
+  font-size: 20px;
+  line-height: 70px;
+  background: url('../../assets/images/screen/HITeach/bottom_line.png') bottom
+    center no-repeat;
+  text-align: center;
+}
+.content_center .title img {
+  vertical-align: middle;
+}
+.content_center .center_con {
+  height: 550px;
+  width: 1000px;
+  padding: 10px;
+  float: left;
+}
+#content .content_right {
+  width: 385px;
+  height: 100%;
+  float: right;
+}
+.content_right .report {
+  width: 325px;
+  height: 145px;
+  line-height: 20px;
+  float: left;
+  background: url('../../assets/images/screen/HITeach/zuoyi.png') top no-repeat;
+  padding: 0px 0px 0px 0px;
+}
+.report1 {
+  width: 134px;
+  height: 110px;
+  background: url('../../assets/images/screen/HITeach/report01.png') center
+    no-repeat;
+  float: left;
+  text-align: center;
+  padding-top: 24px;
+}
+.report2 {
+  width: 134px;
+  height: 110px;
+  background: url('../../assets/images/screen/HITeach/report02.png') center
+    no-repeat;
+  float: right;
+  text-align: center;
+  padding-top: 24px;
+}
+.report p {
+  font-weight: bold;
+  font-size: 18px;
+  color: #00f6ff;
+}
+.report small {
+  font-size: 24px;
+}
+.content_right .news_report {
+  width: 385px;
+  height: 330px;
+  margin-top: 20px;
+  float: left;
+  background: url('../../assets/images/screen/HITeach/bg_report.png') no-repeat;
+}
+.content_right .title {
+  width: 385px;
+  height: 70px;
+  float: left;
+  color: #00f6ff;
+  font-size: 20px;
+  line-height: 70px;
+  background: url('../../assets/images/screen/HITeach/bottom_line.png') bottom
+    no-repeat;
+  text-align: center;
+}
+.content_right .title img {
+  vertical-align: middle;
+}
+.content_right .data_box {
+  width: 385px;
+  height: 420px;
+  margin-top: 20px;
+  float: left;
+  background: url('../../assets/images/screen/HITeach/bg_data1.png') no-repeat;
+}
+.data_con {
+  width: 365px;
+  height: 330px;
+  float: left;
+  padding: 10px;
+}
+</style>

src/BI/ClientApp/src/views/Screen/Screen.vue

@@ -1,120 +1,500 @@
 <template>
-<div class="Screencontainer">
-<el-form>
-      <body>
+  <div class="Screencontainer">
+    <el-form>
+
+      <div class="main">
         <div class="header">
-          <div class="header_logo">     
-           <h1>醍摩豆数据可视化</h1>
+          <div class="header_logo">
+            <h1>醍摩豆数据可视化</h1>
+          </div>
+          <div class="showTime">{{currentTime}}</div>
+          <div class="header_nav">
+            <ul>
+              <li>
+                <img src="../../assets/images/screen/Screen/line.png"
+                     alt="">
+                <a href="#/screen"
+                   class="nav_current">IES用量</a>
+              </li>
+              <li>
+                <img src="../../assets/images/screen/Screen/Histogram.png"
+                     alt="">
+                <a href="#/tmdID">醍摩豆ID申请数</a>
+              </li>
+              <li>
+                <img src="../../assets/images/screen/Screen/Map.png"
+                     alt="">
+                <a href="#/HiTeach">HiTeach使用位置统计</a>
+              </li>
+              <li>
+                <img src="../../assets/images/screen/Screen/Pie.png"
+                     alt="">
+                <a href="#/Socrates">苏格拉底平台</a>
+              </li>
+            </ul>
           </div>
-           <div class="showTime">{{currentTime}}</div>
-           <div class="header_nav">
-             <ul>
-               <li>
-                 <img src="../../assets/images/screen/line.png" alt="">
-                 <a href="#" class="nav_current">IES用量</a>
-               </li>
-               <li>
-                 <img src="../../assets/images/screen/Histogram.png" alt="">
-                 <a href="#">醍摩豆ID申请数</a>
-               </li>
-               <li>
-                 <img src="../../assets/images/screen/Map.png" alt="">
-                 <a href="#">HiTeach使用位置统计</a>
-               </li>
-               <li>
-                 <img src="../../assets/images/screen/Pie.png" alt="">
-                 <a href="#">销售数据统计</a>
-               </li>
-             </ul>
-           </div>
         </div>
-      </body>
-</el-form>
-</div>
+        <div class="data_main">
+          <div class="main_left fl">
+            <div class="left_1">
+              <div class="main_title">
+                IES大陆站
+              </div>
+              <div ref="chart_1"
+                   id="chart_1"
+                   class="chart"
+                   style="width:100%;height:280px;"></div>
+            </div>
+            <div class="left_2">
+              <div class="main_title">
+                IES国际站
+              </div>
+              <div ref="chart_2"
+                   id="chart_2"
+                   class="chart"
+                   style="width:100%;height:280px;"></div>
+            </div>
+            <div class="left_3">
+              <div class="main_title">
+                苏格拉底平台
+              </div>
+              <div ref="chart_3"
+                   id="chart_3"
+                   class="chart"
+                   style="width:100%;height:280px;"></div>
+            </div>
+          </div>
+          <div class="main_center fl">
+            <div class="center_text">
+              <div class="main_title">
+                今日装置启动分布图
+              </div>
+              <div ref="chart_map"
+                   id="chart_map"
+                   style="width:100%;height:610px"></div>
+            </div>
+          </div>
+          <div class="main_right fr">
+            <div class="right_1">
+              <div class="main_title">
+                某一学校IES用量
+              </div>
+              <div class="choice">
+                <label for="">学校:</label>
+                <select name=""
+                        id="">
+                  <option value="">青城山学校</option>
+                  <option value="">研发学校</option>
+                  <option value="">测试学校</option>
+                  <option value="">醍摩豆学院</option>
+                </select>
+              </div>
+              <div ref="chart_4"
+                   id="chart_4"
+                   class="echart"
+                   style="width:100%;height:280px"></div>
+            </div>
+            <div class="right_2">
+              <div class="main_title">
+                注册使用情况
+              </div>
+              <div ref="chart_5"
+                   id="chart_5"
+                   class="echart"
+                   style="width:100%;height:280px"></div>
+            </div>
+            <div class="right_3">
+              <div class="main_title">
+                装置注册比例
+              </div>
+              <div ref="chart_6"
+                   id="chart_6"
+                   class="echart"
+                   style="width:100%;height:280px"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-form>
+  </div>
 </template>
 <script>
-import {ref,defineComponent ,relative} from 'vue'
+//import 'echarts/lib/chart/line';
+//import 'echarts/lib/chart/pie';
+import * as echarts from 'echarts';
+//import  'echarts/map/js/china';
+import { ref, defineComponent, relative, onMounted } from 'vue';
 export default defineComponent({
-  setup(){
-    let currentTime=ref("");
-                var t = null;
-                t = setTimeout(time, 1000);//開始运行
-                function time() {
-                clearTimeout(t);//清除定时器
-                var dt = new Date();
-                var y = dt.getFullYear();
-                var mt = dt.getMonth() + 1;
-                var day = dt.getDate();
-                var h = dt.getHours();//获取时
-                var m = dt.getMinutes();//获取分
-                var s = dt.getSeconds();//获取秒
-      currentTime.value = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
-                t = setTimeout(time, 1000); //设定定时器，循环运行     
-            }
-    return{
-currentTime,
+  setup() {
+    let chart_1 = ref(null);
+    let chart_2 = ref(null);
+    let chart_3 = ref(null);
+    let chart_4 = ref(null);
+    let chart_5 = ref(null);
+    let chart_6 = ref(null);
+    let currentTime = ref('');
+    var t = null;
+    t = setTimeout(time, 1000); //開始运行
+    function time() {
+      clearTimeout(t); //清除定时器
+      var dt = new Date();
+      var y = dt.getFullYear();
+      var mt = dt.getMonth() + 1;
+      var day = dt.getDate();
+      var h = dt.getHours(); //获取时
+      var m = dt.getMinutes(); //获取分
+      var s = dt.getSeconds(); //获取秒
+      currentTime.value =
+        '当前时间：' +
+        y +
+        '年' +
+        mt +
+        '月' +
+        day +
+        '-' +
+        h +
+        '时' +
+        m +
+        '分' +
+        s +
+        '秒';
+      t = setTimeout(time, 1000); //设定定时器，循环运行
     }
-  }
-})
+    onMounted(() => {
+      loadEcharts1();
+      loadEcharts2();
+      loadEcharts3();
+      loadEcharts4();
+      loadEcharts5();
+      loadEcharts6();
+    });
+    const loadEcharts1 = () => {
+      const myChart = echarts.init(chart_1.value);
+      const option = {
+        xAxis: {
+          type: 'category',
+          data: ['学校数', '教师账号数', '上传影片数'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150],
+            type: 'bar',
+          },
+        ],
+      };
+
+      myChart.setOption(option);
+    };
+    const loadEcharts2 = () => {
+      const myChart = echarts.init(chart_2.value);
+      const option = {
+        xAxis: {
+          type: 'category',
+          data: ['学校数', '教师账号数', '上传影片数'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150],
+            type: 'bar',
+          },
+        ],
+      };
+      myChart.setOption(option);
+    };
+    const loadEcharts3 = () => {
+      const myChart = echarts.init(chart_3.value);
+      const option = {
+        xAxis: {
+          type: 'category',
+          data: ['学校数', '教师账号数', '上传影片数'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150],
+            type: 'bar',
+          },
+        ],
+      };
+      myChart.setOption(option);
+    };
+    const loadEcharts4 = () => {
+      const myChart = echarts.init(chart_4.value);
+      const option = {
+        xAxis: {
+          type: 'category',
+          data: ['课前预习', '课堂数据', '班级数', '学生数', '作业活动'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150, 130, 145],
+            type: 'bar',
+          },
+        ],
+      };
+      myChart.setOption(option);
+    };
+    const loadEcharts5 = () => {
+      const myChart = echarts.init(chart_5.value);
+      const option = {
+        xAxis: {
+          type: 'category',
+          data: [
+            '今日注册数',
+            '大陆注册总数',
+            '国际注册总数',
+            '今日使用服务次数',
+            '历史使用服务次数',
+          ],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [120, 200, 150, 130, 145],
+            type: 'line',
+          },
+        ],
+      };
+      myChart.setOption(option);
+    };
+    const loadEcharts6 = () => {
+      const myChart = echarts.init(chart_6.value);
+      const option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+        },
+        series: [
+          {
+            name: '装置注册比例',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 35, name: 'Teach' },
+              { value: 65, name: 'HiTA' },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+    };
+    return {
+      currentTime,
+      chart_1,
+      chart_2,
+      chart_3,
+      chart_4,
+      chart_5,
+      chart_6,
+      loadEcharts1,
+      loadEcharts2,
+      loadEcharts3,
+      loadEcharts4,
+      loadEcharts5,
+      loadEcharts6,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-  .header{
-    width: 100%;
-    height: 80px;
-    background: #030829;
-    padding:0 20px;
-    min-width: 1366px;
+.main {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: url('../../assets/images/screen/tmdID/bg.jpg') no-repeat;
+  background-size: cover;
+  /* height: 880px; */
+  min-width: 1386px;
 }
-.header>.header_logo{
-    padding:10px 10px 10px 0px;
+.header {
+  width: 100%;
+  height: 80px;
+  background: url('../../assets/images/screen/Screen/head_bg.png') no-repeat;
+  padding: 0 230px;
+  min-width: 1366px;
 }
-.header>.header_logo>a{
-    display: block;
+.header > .header_logo {
+  padding: 10px 10px 10px 0px;
+  color: rgb(252, 249, 249);
 }
-.header>.header_logo>a>img{
-    width:260px;
+.header > .header_logo > a {
+  display: block;
+}
+.header > .header_logo > a > img {
+  width: 260px;
 }
 
-.header>.header_nav{
-    margin-left: 20px;
-}
-.header>.header_nav>ul>li{
-    float: left;
-    margin-right: 6px;
-    position: relative;
-}
-.header>.header_nav>ul>li>a{
-    display: block;
-    height: 80px;
-    padding:0 10px 0 30px;
-    line-height: 80px;
-    color:#fff;
-}
-.header>.header_nav>ul>li>a:hover{
-    border-bottom: 4px solid #4b8df8;
-}
-.header>.header_nav>ul>li>img{
-    float: left;
-    position: absolute;
-    top: 0px;
-    left:10px;
-    width: 30px;
-    height: 30px;
+.header > .header_nav {
+  margin-left: 300px;
+}
+.header > .header_nav > ul > li {
+  float: left;
+  margin-right: 6px;
+  position: relative;
+}
+.header > .header_nav > ul > li > a {
+  display: block;
+  //height: 80px;
+  padding: 0 80px 10px 45px;
+  line-height: 30px;
+  float: left;
+  color: rgb(252, 250, 250);
+}
+.header > .header_nav > ul > li > a:hover {
+  border-bottom: 4px solid #4b8df8;
+}
+.header > .header_nav > ul > li > a.nav_current {
+  border-bottom: 4px solid #4b8df8;
+}
+.header > .header_nav > ul > li > img {
+  float: left;
+  position: absolute;
+  top: 0px;
+  left: 10px;
+  width: 30px;
+  height: 30px;
 }
 //.header>.header_nav>ul>li>a.nav_current{
- //   border-bottom: 4px solid #4b8df8;
+//   border-bottom: 4px solid #4b8df8;
 //}
-  .showTime{
-     position: absolute;
-     right: 0px;
-     top: 0;
-     line-height: 40px;
-     color: rgba(255, 255, 255, 0.7);
-     font-size: 20px;
-  }
-  
+.showTime {
+  position: absolute;
+  right: 0px;
+  top: 0;
+  line-height: 40px;
+  color: rgba(250, 250, 250, 0.7);
+  font-size: 18px;
+}
 
+.data_main {
+  //width: calc(100% - 40px);
+  // margin-bottom: 40px;
+  height: 100%;
+  margin-left: 20px;
+  margin-top: 20px;
+  display: flex;
+}
+.data_main .main_left {
+  width: 24%;
+}
+.data_main .main_left > div {
+  width: 100%;
+  height: 249px;
+  box-sizing: border-box;
+  border: 1px solid #034c6a;
+  box-shadow: 0px 0 55px rgba(255, 255, 255, 0.1) inset;
+  position: relative;
+}
+.left_1,
+.left_2,
+.left_3， .right_1,
+.right_2,
+.right_3,
+.right_1 {
+  margin-bottom: 50px;
+}
+.data_main .main_left div .main_title {
+  width: 180px;
+  height: 35px;
+  line-height: 33px;
+  background-color: #034c6a;
+  border-radius: 18px;
+  position: absolute;
+  top: -17px;
+  left: 50%;
+  margin-left: -90px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+  box-sizing: border-box;
+  padding-left: 45px;
+  z-index: 1000;
+}
 
+.data_main .main_center {
+  width: 52%;
+  height: 610px;
+}
+.data_main .main_center .center_text {
+  width: calc(100% - 50px);
+  height: 846px;
+  margin-left: 25px;
+  margin-right: 25px;
+  box-sizing: border-box;
+  border: 1px solid #034c6a;
+  box-shadow: 0px 0 55px rgba(255, 255, 255, 0.1) inset;
+  position: relative;
+  /*background: url("../img/chart_map.png") no-repeat center ;*/
+}
+.data_main .main_center .main_title {
+  width: 180px;
+  height: 35px;
+  line-height: 33px;
+  background-color: #034c6a;
+  border-radius: 18px;
+  position: absolute;
+  top: -17px;
+  left: 50%;
+  margin-left: -90px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+  box-sizing: border-box;
+  padding-left: 10px;
+  z-index: 1000;
+}
 
+.data_main .main_right {
+  width: 23%;
+}
+.data_main .main_right div .main_title {
+  width: 180px;
+  height: 35px;
+  line-height: 33px;
+  background-color: #034c6a;
+  border-radius: 18px;
+  position: absolute;
+  top: -17px;
+  left: 50%;
+  margin-left: -90px;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+  box-sizing: border-box;
+  padding-left: 32px;
+}
+.data_main .main_right > div {
+  width: 100%;
+  height: 249px;
+  box-sizing: border-box;
+  border: 1px solid #034c6a;
+  box-shadow: 0px 0 55px rgba(255, 255, 255, 0.1) inset;
+  position: relative;
+}
+.data_main .main_right div.right_1 .choice {
+  position: absolute;
+  top: 25px;
+  right: 30px;
+  z-index: 1000;
+}
+.data_main .main_right div.right_1 .choice label {
+  color: rgb(250, 249, 249);
+}
 </style>

src/BI/ClientApp/src/views/Screen/Socrates.vue

@@ -0,0 +1,544 @@
+<template>
+  <div class="main">
+    <div class="header">苏格拉底平台</div>
+    <div class="content">
+      <div class="top">
+        <el-row :gutter="20">
+          <el-col :span="3">
+            <div class="top1">
+              <div class="title">今日IES使用数</div>
+              <div ref="IES_use"
+                   class="IES_use"
+                   id="container1"
+                   style="width:100%;height:280px;"></div>
+            </div>
+          </el-col>
+          <el-col :span="3">
+            <div class="top2">
+              <div class="title">账号使用情况</div>
+              <div ref="account_use"
+                   class="account_use"
+                   id="container2"
+                   style="width:100%;height:280px;"></div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="top3">
+              <div class="title">一日使用率走势</div>
+              <div ref="utilization_rate"
+                   class="utilization_rate"
+                   id="container3"></div>
+            </div>
+          </el-col>
+          <el-col :span="4">
+            <div class="top4">
+              <div class="title">资源上传及使用状况</div>
+              <div ref="resources"
+                   class="resources"
+                   id="container4"></div>
+            </div>
+          </el-col>
+          <el-col :span="7">
+            <div class="top5">
+              <div class="title">点阅率成长趋势</div>
+              <div ref="click_rate"
+                   class="click_rate"
+                   id="container5"></div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="bottom">
+        <el-row :gutter="20">
+          <el-col :span="4">
+            <div class="bottom1">
+              <div class="title">今日苏格拉底平台使用数</div>
+              <div ref="socrates"
+                   class="socrates"
+                   id="container1"
+                   style="width:100%;height:280px;"></div>
+            </div>
+          </el-col>
+          <el-col :span="7">
+            <div class="bottom2">
+              <div class="title">点阅率成长趋势</div>
+              <div ref="click"
+                   class="click"
+                   id="container2"
+                   style="width:100%;height:280px;"></div>
+            </div>
+          </el-col>
+          <el-col :span="5">
+            <div class="bottom3">
+              <div class="title">资源上传及使用状况</div>
+              <div ref="resource_upload"
+                   class="resource_upload"
+                   id="container3"
+                   style="width:100%;height:280px;"></div>
+            </div>
+          </el-col>
+          <el-col :span="7">
+            <div class="bottom4">
+              <div class="title">资源上传统计</div>
+              <div ref="statistics"
+                   class="statistics"
+                   id="container4"
+                   style="width:100%;height:280px;"></div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+
+<script>
+import * as echarts from 'echarts';
+import { ref, defineComponent, onMounted } from 'vue';
+export default defineComponent({
+  setup() {
+    let utilization_rate = ref(null);
+    let click_rate = ref(null);
+    let click = ref(null);
+    let statistics = ref(null);
+    onMounted(() => {
+      Echarts1();
+      Echarts2();
+      Echarts3();
+      Echarts4();
+    });
+    const Echarts1 = () => {
+      const myChart1 = echarts.init(utilization_rate.value);
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985',
+            },
+          },
+        },
+        legend: {
+          data: ['IES中国', 'IES台湾', 'IES全球'],
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [
+              '1',
+              '2',
+              '3',
+              '4',
+              '5',
+              '6',
+              '7',
+              '8',
+              '9',
+              '10',
+              '11',
+              '12',
+              '13',
+              '14',
+              '15',
+              '16',
+              '17',
+              '18',
+              '19',
+              '20',
+              '21',
+              '22',
+              '23',
+              '24',
+            ],
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+          },
+        ],
+        series: [
+          {
+            name: 'IES中国',
+            type: 'line',
+            stack: '总量',
+            areaStyle: {},
+            emphasis: {
+              focus: 'series',
+            },
+            data: [
+              30, 40, 20, 10, 60, 80, 100, 150, 160, 180, 150, 160, 170, 140,
+              100, 120, 90, 50, 80, 60, 100, 20, 10, 50,
+            ],
+          },
+          {
+            name: 'IES台湾',
+            type: 'line',
+            stack: '总量',
+            areaStyle: {},
+            emphasis: {
+              focus: 'series',
+            },
+            data: [
+              10, 30, 20, 50, 40, 60, 80, 100, 110, 90, 130, 120, 150, 180, 170,
+              190, 120, 180, 150, 120, 130, 140, 110,
+            ],
+          },
+          {
+            name: 'IES全球',
+            type: 'line',
+            stack: '总量',
+            areaStyle: {},
+            emphasis: {
+              focus: 'series',
+            },
+            data: [
+              5, 10, 6, 28, 40, 32, 50, 60, 12, 18, 20, 60, 15, 29, 32, 55, 19,
+              26, 85, 25, 63, 23, 52, 32, 52, 32, 51, 20,
+            ],
+          },
+        ],
+      };
+      myChart1.setOption(option);
+    };
+    const Echarts2 = () => {
+      const myChart2 = echarts.init(click_rate.value);
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985',
+            },
+          },
+        },
+        legend: {
+          data: ['IES中国', 'IES台湾', 'IES全球'],
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [
+              '1',
+              '2',
+              '3',
+              '4',
+              '5',
+              '6',
+              '7',
+              '8',
+              '9',
+              '10',
+              '11',
+              '12',
+              '13',
+              '14',
+              '15',
+              '16',
+              '17',
+              '18',
+              '19',
+              '20',
+              '21',
+              '22',
+              '23',
+              '24',
+            ],
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+          },
+        ],
+        series: [
+          {
+            name: 'IES中国',
+            type: 'line',
+            stack: '总量',
+            areaStyle: {},
+            emphasis: {
+              focus: 'series',
+            },
+            data: [
+              30, 40, 20, 10, 60, 80, 100, 150, 160, 180, 150, 160, 170, 140,
+              100, 120, 90, 50, 80, 60, 100, 20, 10, 50,
+            ],
+          },
+          {
+            name: 'IES台湾',
+            type: 'line',
+            stack: '总量',
+            areaStyle: {},
+            emphasis: {
+              focus: 'series',
+            },
+            data: [
+              10, 30, 20, 50, 40, 60, 80, 100, 110, 90, 130, 120, 150, 180, 170,
+              190, 120, 180, 150, 120, 130, 140, 110,
+            ],
+          },
+          {
+            name: 'IES全球',
+            type: 'line',
+            stack: '总量',
+            areaStyle: {},
+            emphasis: {
+              focus: 'series',
+            },
+            data: [
+              5, 10, 6, 28, 40, 32, 50, 60, 12, 18, 20, 60, 15, 29, 32, 55, 19,
+              26, 85, 25, 63, 23, 52, 32, 52, 32, 51, 20,
+            ],
+          },
+        ],
+      };
+      myChart2.setOption(option);
+    };
+    const Echarts3 = () => {
+      const myChart3 = echarts.init(click.value);
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985',
+            },
+          },
+        },
+        legend: {
+          data: ['IES中国', 'IES台湾', 'IES全球'],
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [
+              '1',
+              '2',
+              '3',
+              '4',
+              '5',
+              '6',
+              '7',
+              '8',
+              '9',
+              '10',
+              '11',
+              '12',
+              '13',
+              '14',
+              '15',
+              '16',
+              '17',
+              '18',
+              '19',
+              '20',
+              '21',
+              '22',
+              '23',
+              '24',
+            ],
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+          },
+        ],
+        series: [
+          {
+            //name: 'IES中国',
+            type: 'line',
+            stack: '总量',
+            areaStyle: {},
+            emphasis: {
+              focus: 'series',
+            },
+            data: [
+              30, 40, 20, 10, 60, 80, 100, 150, 160, 180, 150, 160, 170, 140,
+              100, 120, 90, 50, 80, 60, 100, 20, 10, 50,
+            ],
+          },
+        ],
+      };
+      myChart3.setOption(option);
+    };
+    const Echarts4 = () => {
+      const myChart4 = echarts.init(statistics.value);
+      const option = {
+        xAxis: {
+          type: 'category',
+          data: [
+            '1',
+            '2',
+            '3',
+            '4',
+            '5',
+            '6',
+            '7',
+            '8',
+            '9',
+            '10',
+            '11',
+            '12',
+            '13',
+            '14',
+            '15',
+            '16',
+            '17',
+            '18',
+            '19',
+            '20',
+            '21',
+            '22',
+            '23',
+            '24',
+          ],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [
+              30, 40, 20, 10, 60, 80, 100, 150, 160, 180, 150, 160, 170, 140,
+              100, 120, 90, 50, 80, 60, 100, 20, 10, 50,
+            ],
+            type: 'bar',
+          },
+        ],
+      };
+      myChart4.setOption(option);
+    };
+    return {
+      utilization_rate,
+      click_rate,
+      click,
+      statistics,
+      Echarts1,
+      Echarts2,
+      Echarts3,
+      Echarts4,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.main {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: url('../../assets/images/screen/tmdID/bg.jpg') no-repeat;
+  background-size: cover;
+  /* height: 880px; */
+  min-width: 1386px;
+}
+.header {
+  width: 100%;
+  height: 90px;
+  text-align: center;
+  font-size: 36px;
+  color: #00f6ff;
+  line-height: 90px;
+  margin: 0 auto;
+}
+.title {
+  color: rgb(253, 253, 253);
+  font-size: 19px;
+  padding-top: 15px;
+  padding-left: 20px;
+}
+.top1 {
+  margin-bottom: 50px;
+}
+.top1 > div {
+  width: 100%;
+  height: 120px;
+  box-sizing: border-box;
+  //border: 1px solid #034c6a;
+  box-shadow: 0px 0 55px rgba(255, 255, 255, 0.1) inset;
+}
+.top2 > div {
+  width: 100%;
+  height: 120px;
+  box-sizing: border-box;
+  //border: 1px solid #034c6a;
+  box-shadow: 0px 0 55px rgba(255, 255, 255, 0.1) inset;
+}
+.top3 > div {
+  width: 100%;
+  height: 200px;
+  box-sizing: border-box;
+  //border: 1px solid #034c6a;
+  box-shadow: 0px 0 55px rgba(255, 255, 255, 0.1) inset;
+}
+.top4 > div {
+  width: 100%;
+  height: 200px;
+  box-sizing: border-box;
+  //border: 1px solid #034c6a;
+  box-shadow: 0px 0 55px rgba(255, 255, 255, 0.1) inset;
+}
+.top5 > div {
+  width: 100%;
+  height: 200px;
+  box-sizing: border-box;
+  //border: 1px solid #034c6a;
+  box-shadow: 0px 0 55px rgba(255, 255, 255, 0.1) inset;
+}
+.bottom1 > div {
+  width: 100%;
+  height: 120px;
+  box-sizing: border-box;
+  //border: 1px solid #034c6a;
+  box-shadow: 0px 0 55px rgba(255, 255, 255, 0.1) inset;
+}
+.bottom2 > div {
+  width: 100%;
+  height: 120px;
+  box-sizing: border-box;
+  //border: 1px solid #034c6a;
+  box-shadow: 0px 0 55px rgba(255, 255, 255, 0.1) inset;
+}
+.bottom3 > div {
+  width: 100%;
+  height: 120px;
+  box-sizing: border-box;
+  //border: 1px solid #034c6a;
+  box-shadow: 0px 0 55px rgba(255, 255, 255, 0.1) inset;
+}
+.bottom4 > div {
+  width: 100%;
+  height: 120px;
+  box-sizing: border-box;
+  //border: 1px solid #034c6a;
+  box-shadow: 0px 0 55px rgba(255, 255, 255, 0.1) inset;
+}
+</style>

src/BI/ClientApp/src/views/Screen/tmdID.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="main">
+    <div class="top_title">
+      醍摩豆ID申请数
+    </div>
+    <div class="datas">
+      <div class="data_left">
+        <div class="left_top">
+          <div class="left_top_title">今日产品销售</div>
+          <div class="left_top_main">
+            <div class="left_main_circle">
+              <p class="counter-value circle_num1">订单总数</p>
+              <span class="span_font">5</span>
+            </div>
+            <div class="left_main_circle">
+              <p class="counter-value circle_num2">软体序号</p>
+              <span class="span_font">3</span>
+            </div>
+            <div class="left_main_circle">
+              <p class="counter-value circle_num3">服务序号</p>
+              <span class="span_font">2</span>
+            </div>
+            <div class="left_main_circle">
+              <p class="counter-value circle_num4">硬体</p>
+              <span class="span_font">3</span>
+            </div>
+          </div>
+        </div>
+        <div class="left_bottom">
+          <div class="left_top_title">产品销售走势</div>
+          <div class="choice">
+            <select name=""
+                    id="">
+              <option value="">逐年</option>
+              <option value="">一年间</option>
+            </select>
+          </div>
+          <div ref="sales_trendbus"
+               id="sales_trendbus"
+               class="left_top_main left_bottom_main"></div>
+        </div>
+      </div>
+      <div class="data_middle">
+        <div class="middle_top">
+          <div class="middle_top_list">
+            <div class="list_title">醍摩豆ID申请数</div>
+            <div class="list_num list_num1"><span class="counter-value">900</span></div>
+            <div class="today_list_font">今日申请数<span>10</span></div>
+          </div>
+          <div class="middle_top_list">
+            <div class="list_title">IES服务绑定数</div>
+            <div class="list_num list_num2"><span class="counter-value">500</span></div>
+            <div class="today_list_font">今日绑定数<span>12</span></div>
+          </div>
+          <div class="middle_top_list">
+            <div class="list_title">苏格拉底平台登录数</div>
+            <div class="list_num list_num3"><span class="counter-value">200</span></div>
+            <div class="today_list_font">今日登录数<span>9</span></div>
+          </div>
+        </div>
+        <div id="map"
+             class="middle_bottm"></div>
+      </div>
+      <div class="data_right">
+        <div class="right_top">
+          <div class="left_top_title">订单逐年数量表</div>
+          <div ref="Order_form"
+               id="Order_form"
+               class="left_top_main right_top_main"></div>
+        </div>
+        <div class="right_bottom">
+          <div class="left_top_title">各产品销售比例</div>
+          <div ref="proportion"
+               id="proportion"
+               class="left_top_main right_top_main"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { ref, defineComponent, onMounted } from 'vue';
+export default defineComponent({
+  setup() {
+    let sales_trendbus = ref(null);
+    let Order_form = ref(null);
+    let proportion = ref(null);
+    onMounted(() => {
+      Echarts1();
+      Echarts2();
+      Echarts3();
+    });
+    const Echarts1 = () => {
+      const myChart1 = echarts.init(sales_trendbus.value);
+      const option = {
+        xAxis: {
+          type: 'category',
+          data: [
+            '2012',
+            '2013',
+            '2014',
+            '2015',
+            '2016',
+            '2017',
+            '2017',
+            '2018',
+            '2019',
+            '2020',
+            '2021',
+          ],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [100, 110, 120, 130, 140, 150, 180, 175, 190, 160, 200],
+            type: 'line',
+          },
+        ],
+      };
+
+      myChart1.setOption(option);
+    };
+    const Echarts2 = () => {
+      const myChart2 = echarts.init(Order_form.value);
+      const option = {
+        xAxis: {
+          type: 'category',
+          data: [
+            '2012',
+            '2013',
+            '2014',
+            '2015',
+            '2016',
+            '2017',
+            '2017',
+            '2018',
+            '2019',
+            '2020',
+            '2021',
+          ],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            data: [100, 110, 120, 130, 140, 150, 180, 175, 190, 160, 200],
+            type: 'bar',
+          },
+        ],
+      };
+
+      myChart2.setOption(option);
+    };
+    const Echarts3 = () => {
+      const myChart3 = echarts.init(proportion.value);
+      const option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+        },
+        series: [
+          {
+            name: '装置注册比例',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 20, name: '软体服务销售' },
+              { value: 40, name: 'HiTeach销售' },
+              { value: 15, name: '云服务销售' },
+              { value: 35, name: '其他服务销售' },
+            ],
+          },
+        ],
+      };
+      myChart3.setOption(option);
+    };
+    return {
+      sales_trendbus,
+      Order_form,
+      proportion,
+      Echarts1,
+      Echarts2,
+      Echarts3,
+    };
+  },
+});
+</script>
+
+
+<style lang="scss" scoped>
+.main {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: url('../../assets/images/screen/tmdID/bg.jpg') no-repeat;
+  background-size: cover;
+  /* height: 880px; */
+  min-width: 1386px;
+}
+.left_bottom .choice {
+  position: absolute;
+  top: 520px;
+  left: 400px;
+  z-index: 1000;
+}
+.top_title {
+  width: 100%;
+  padding-top: 20px;
+  color: #4adefe;
+  text-align: center;
+  font-size: 40px;
+}
+.datas {
+  width: 95%;
+  height: 80%;
+  margin: auto;
+  margin-top: 2%;
+}
+.data_left,
+.data_middle,
+.data_right {
+  float: left;
+  height: 100%;
+}
+.data_left {
+  width: 26%;
+}
+.left_top {
+  width: 100%;
+  height: 48%;
+  background: url('../../assets/images/screen/tmdID/dataBg.png') no-repeat;
+  background-size: 100%;
+}
+.left_top_title {
+  font-size: 16px;
+  color: #ffffff;
+  padding-left: 10%;
+  padding-top: 6%;
+}
+.left_top_main {
+  width: 80%;
+  height: 76%;
+  margin: auto;
+  margin-top: 4%;
+}
+.left_main_circle {
+  float: left;
+  width: 35%;
+  height: 44%;
+  background: url('../../assets/images/screen/tmdID/cicleBg.png') no-repeat;
+  background-size: 100%;
+  color: #4adefe;
+  text-align: center;
+}
+.left_main_circle p {
+  font-size: 16px;
+  margin-top: 20%;
+}
+.left_main_circle span {
+  font-size: 12px;
+}
+.left_main_circle:nth-of-type(2) {
+  margin-left: 22%;
+}
+.left_main_circle:nth-of-type(3) {
+  margin-top: 8%;
+}
+.left_main_circle:nth-of-type(4) {
+  margin-top: 8%;
+  margin-left: 22%;
+}
+.left_bottom {
+  width: 100%;
+  height: 48%;
+  background: url('../../assets/images/screen/tmdID/dataBg.png') no-repeat;
+  background-size: 100%;
+  margin-top: 7%;
+}
+//.left_bottom_main {
+/* background: white; */
+//}
+.data_middle {
+  width: 38%;
+  margin: 0 2.5%;
+  /* background: white; */
+}
+.middle_top {
+  width: 100%;
+  height: 17%;
+}
+.middle_top_list {
+  float: left;
+  width: 33.2%;
+  height: 65%;
+  margin-top: 5%;
+  text-align: center;
+  color: #4adefe;
+}
+.middle_top_list span {
+  color: #f3db5c;
+}
+.list_title {
+  font-size: 18px;
+  margin-top: -15%;
+}
+.list_num {
+  margin-top: 3%;
+  font-size: 16px;
+}
+.list_num span {
+  font-size: 30px;
+}
+.today_list_font {
+  font-size: 14px;
+  margin-top: 4%;
+}
+.middle_top_list:nth-of-type(2) {
+  border-left: 1px solid #4e72b0;
+  border-right: 1px solid #4e72b0;
+}
+.middle_bottom {
+  width: 100%;
+  height: 75%;
+  margin-top: 9%;
+  background: transparent;
+}
+.data_right {
+  width: 31%;
+}
+.right_top {
+  width: 100%;
+  height: 48%;
+  background: url('../../assets/images/screen/tmdID/msgBg.png') no-repeat;
+  background-size: 100%;
+}
+.right_top_main {
+  width: 95%;
+}
+.right_bottom {
+  width: 100%;
+  height: 48%;
+  background: url('../../assets/images/screen/tmdID/msgBg.png') no-repeat;
+  background-size: 100%;
+  margin-top: 6%;
+}
+.highcharts-credits {
+  display: none;
+}
+.highcharts-legend {
+  display: none;
+}
+</style>
+