diff --git a/src/pages/screenShow/index.vue b/src/pages/screenShow/index.vue
new file mode 100644
index 0000000..3173922
--- /dev/null
+++ b/src/pages/screenShow/index.vue
@@ -0,0 +1,1782 @@
+<template>
+  <div class="wrap">
+    <!-- 全屏 -->
+    <img class="full"
+         src="@/assets/img/screen/full.png"
+         alt=""
+         @click="fullScreen">
+    <!--header-->
+    <div class="header">
+      <div class="bg_header">
+        <div class="header_nav fl t_title">平台大数据可视化看板</div>
+      </div>
+    </div>
+
+    <!--main-->
+    <div class="content">
+      <div class="left">
+        <div class="item">
+          <!--左上边框-->
+          <div class="t_line_box">
+            <i class="t_l_line"></i>
+            <i class="l_t_line"></i>
+          </div>
+          <!--右上边框-->
+          <div class="t_line_box">
+            <i class="t_r_line"></i>
+            <i class="r_t_line"></i>
+          </div>
+          <!--左下边框-->
+          <div class="t_line_box">
+            <i class="l_b_line"></i>
+            <i class="b_l_line"></i>
+          </div>
+          <!--右下边框-->
+          <div class="t_line_box">
+            <i class="r_b_line"></i>
+            <i class="b_r_line"></i>
+          </div>
+          <div class="main_title">
+            <img src="@/assets/img/screen/t_1.png"
+                 alt="">
+            全国分地区有效用标绿色食用单位与产品数
+          </div>
+          <ul class="time-switch">
+            <li v-for="(item, i) in types"
+                :key="i"
+                :class="{active: item.id === type1}"
+                @click="switchType1(item.id)">{{ item.name }}</li>
+          </ul>
+          <div id="chart1"
+               class="chart"></div>
+        </div>
+        <div class="item">
+          <div class="t_line_box">
+            <i class="t_l_line"></i>
+            <i class="l_t_line"></i>
+          </div>
+          <div class="t_line_box">
+            <i class="t_r_line"></i>
+            <i class="r_t_line"></i>
+          </div>
+          <div class="t_line_box">
+            <i class="l_b_line"></i>
+            <i class="b_l_line"></i>
+          </div>
+          <div class="t_line_box">
+            <i class="r_b_line"></i>
+            <i class="b_r_line"></i>
+          </div>
+          <div class="main_title">
+            <img src="@/assets/img/screen/t_2.png"
+                 alt="">
+            全国分地区绿色食品当年获证单位与产品数
+          </div>
+          <ul class="time-switch">
+            <li v-for="(item, i) in types"
+                :key="i"
+                :class="{active: item.id === type2}"
+                @click="switchType2(item.id)">{{ item.name }}</li>
+          </ul>
+          <div id="chart2"
+               class="chart t_btn9"></div>
+        </div>
+        <div class="item">
+          <div class="t_line_box">
+            <i class="t_l_line"></i>
+            <i class="l_t_line"></i>
+          </div>
+          <div class="t_line_box">
+            <i class="t_r_line"></i>
+            <i class="r_t_line"></i>
+          </div>
+          <div class="t_line_box">
+            <i class="l_b_line"></i>
+            <i class="b_l_line"></i>
+          </div>
+          <div class="t_line_box">
+            <i class="r_b_line"></i>
+            <i class="b_r_line"></i>
+          </div>
+          <div class="main_title">
+            <img src="@/assets/img/screen/t_7.png"
+                 alt="">
+            全国农产品地理标志产品登记数
+          </div>
+          <div id="chart3"
+               class="chart t_btn9"></div>
+        </div>
+      </div>
+      <div class="middle">
+        <div class="item"
+             style="height: 620px">
+          <!--左上边框-->
+          <div class="t_line_box">
+            <i class="t_l_line"></i>
+            <i class="l_t_line"></i>
+          </div>
+          <!--右上边框-->
+          <div class="t_line_box">
+            <i class="t_r_line"></i>
+            <i class="r_t_line"></i>
+          </div>
+          <!--左下边框-->
+          <div class="t_line_box">
+            <i class="l_b_line"></i>
+            <i class="b_l_line"></i>
+          </div>
+          <!--右下边框-->
+          <div class="t_line_box">
+            <i class="r_b_line"></i>
+            <i class="b_r_line"></i>
+          </div>
+          <video class="video"
+                 ref="video"
+                 width="100%"
+                 height="100%"
+                 autoplay
+                 muted
+                 loop>
+            <source src="@/assets/videos/screen.mp4"
+                    type="video/mp4">
+            您的浏览器不支持 video 标签。
+          </video>
+          <div class="stat-mask"></div>
+          <div class="stat-wrap">
+            <p class="num num1">{{ overview.numberOfPeopleStudy }}</p>
+            <p class="num num2">{{ overview.courseStudyFrequency }}</p>
+            <p class="num num3">{{ overview.courseStudyTime }}</p>
+            <p class="num num4">{{ overview.numberOfExperiments }}</p>
+            <p class="num num5">{{ overview.cumulativeExperimentTime }}</p>
+          </div>
+          <div class="active-number">
+            <p class="val">{{ overview.currentActivePeople }}</p>
+            <p class="name">当前活跃人数</p>
+          </div>
+        </div>
+        <div class="item"
+             style="height: 440px;">
+          <!--左上边框-->
+          <div class="t_line_box">
+            <i class="t_l_line"></i>
+            <i class="l_t_line"></i>
+          </div>
+          <!--右上边框-->
+          <div class="t_line_box">
+            <i class="t_r_line"></i>
+            <i class="r_t_line"></i>
+          </div>
+          <!--左下边框-->
+          <div class="t_line_box">
+            <i class="l_b_line"></i>
+            <i class="b_l_line"></i>
+          </div>
+          <!--右下边框-->
+          <div class="t_line_box">
+            <i class="r_b_line"></i>
+            <i class="b_r_line"></i>
+          </div>
+          <div class="main_title">
+            <img src="@/assets/img/screen/t_3.png"
+                 alt="">
+            绿色食品十大产业图谱
+          </div>
+          <!-- <el-carousel height="150px">
+            <el-carousel-item v-for="item in 10"
+                              :key="item">
+              <img class="pic"
+                   :src="require('@/assets/img/screenShow/' + item + '.jpg')"
+                   alt="">
+            </el-carousel-item>
+          </el-carousel> -->
+        </div>
+      </div>
+      <div class="right">
+        <div class="item">
+          <!--左上边框-->
+          <div class="t_line_box">
+            <i class="t_l_line"></i>
+            <i class="l_t_line"></i>
+          </div>
+          <!--右上边框-->
+          <div class="t_line_box">
+            <i class="t_r_line"></i>
+            <i class="r_t_line"></i>
+          </div>
+          <!--左下边框-->
+          <div class="t_line_box">
+            <i class="l_b_line"></i>
+            <i class="b_l_line"></i>
+          </div>
+          <!--右下边框-->
+          <div class="t_line_box">
+            <i class="r_b_line"></i>
+            <i class="b_r_line"></i>
+          </div>
+          <div class="main_title">
+            <img src="@/assets/img/screen/t_4.png"
+                 alt="">
+            2022年安徽省绿色食品十大产业全产业链产值
+          </div>
+          <div id="chart5"
+               class="chart"></div>
+        </div>
+        <div class="item">
+          <!--左上边框-->
+          <div class="t_line_box">
+            <i class="t_l_line"></i>
+            <i class="l_t_line"></i>
+          </div>
+          <!--右上边框-->
+          <div class="t_line_box">
+            <i class="t_r_line"></i>
+            <i class="r_t_line"></i>
+          </div>
+          <!--左下边框-->
+          <div class="t_line_box">
+            <i class="l_b_line"></i>
+            <i class="b_l_line"></i>
+          </div>
+          <!--右下边框-->
+          <div class="t_line_box">
+            <i class="r_b_line"></i>
+            <i class="b_r_line"></i>
+          </div>
+          <div class="main_title">
+            <img src="@/assets/img/screen/t_5.png"
+                 alt="">
+            2013-2021年安徽省绿色食品有效用标单位数和产品数
+          </div>
+          <div id="chart6"
+               class="chart"></div>
+        </div>
+        <div class="item">
+          <div class="t_line_box">
+            <i class="t_l_line"></i>
+            <i class="l_t_line"></i>
+          </div>
+          <div class="t_line_box">
+            <i class="t_r_line"></i>
+            <i class="r_t_line"></i>
+          </div>
+          <div class="t_line_box">
+            <i class="l_b_line"></i>
+            <i class="b_l_line"></i>
+          </div>
+          <div class="t_line_box">
+            <i class="r_b_line"></i>
+            <i class="b_r_line"></i>
+          </div>
+          <div class="main_title">
+            <img src="@/assets/img/screen/t_7.png"
+                 alt="">
+            2016-2021年安徽省农产品地理标志产品登记数
+          </div>
+          <div id="chart7"
+               class="chart"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Util from '@/libs/util'
+import * as echarts from 'echarts'
+import Setting from '@/setting'
+export default {
+  data () {
+    return {
+      token: Util.local.get(Setting.tokenKey),
+      type1: 0,
+      type2: 0,
+      types: [
+        {
+          id: 0,
+          name: '单位数'
+        },
+        {
+          id: 1,
+          name: '产品数'
+        }
+      ],
+      overview: {},
+      goodsSell: [],
+      cryptoList: [],
+      courses: [],
+      popularCourses: [],
+      achs: [],
+      actives: [],
+      examChart: null,
+      timer1: null,
+      timer2: null,
+      provinces: ['北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '境外']
+    }
+  },
+  mounted () {
+    this.renderChart1()
+    this.renderChart2()
+    this.getData()
+    // this.renderChart()
+  },
+
+  methods: {
+    // 全屏
+    fullScreen () {
+      // 检测是否全屏
+      if (document.fullscreenElement ||
+        document.mozFullScreenElement ||
+        document.msFullScreenElement ||
+        document.webkitFullscreenElement) {
+        const fn = document.exitFullScreen ||
+          document.mozCancelFullScreen ||
+          document.webkitExitFullscreen ||
+          document.msExitFullscreen
+        fn.call(document)
+      } else {
+        const el = document.body
+        const fn = el.requestFullscreen ||
+          el.mozRequestFullScreen ||
+          el.webkitRequestFullscreen ||
+          el.msRequestFullscreen
+        fn.call(el)
+      }
+    },
+    getData () {
+      const animateChart = (chart, option, data, num = 6) => {
+        // 每次向后滚动一个，最后一个从头开始。
+        if (option.dataZoom[0].endValue == data.length) {
+          option.dataZoom[0].endValue = num
+          option.dataZoom[0].startValue = 0
+        }
+        else {
+          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+        }
+        chart.setOption(option)
+      }
+      let chart = {}
+
+
+      const data3 = ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '宁夏回族自治区', '青海省', '新疆维吾尔自治区']
+      const option3 = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: '10%',
+          textStyle: {
+            color: '#fff'
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          top: '30%',
+          bottom: '3%',
+          containLabel: true
+        },
+        dataZoom: [//滑动条
+          {
+            xAxisIndex: 0,//这里是从X轴的0刻度开始
+            show: false,//是否显示滑动条，不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 5  // 一次性展示6个。
+          }
+        ],
+        color: ['#4388ff', '#f0231c', '#8c2bff', '#2defe2', '#eeac12', '#12c23c'],
+        xAxis: [
+          {
+            type: 'category',
+            data: data3,
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                color: '#fff',
+              },
+              rotate: 60
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 12,
+                color: '#fff'
+              },
+              formatter: '{value}个'
+            },
+          }
+        ],
+        series: [
+          {
+            name: '2016年',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: ['12', '7', '28', '108', '82', '75', '15', '111', '13', '52', '44', '35', '62', '74', '294', '60', '112', '42', '19', '85', '7', '47', '154', '35', '75', '10', '70', '73', '52', '49', '75']
+          },
+          {
+            name: '2017年',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: ['13', '7', '32', '130', '94', '82', '15', '120', '13', '56', '54', '45', '70', '78', '313', '79', '127', '49', '24', '96', '16', '48', '159', '54', '77', '13', '81', '77', '54', '55', '111']
+          },
+          {
+            name: '2018年',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: ['13', '8', '37', '143', '107', '90', '19', '127', '14', '61', '69', '62', '79', '83', '323', '103', '143', '67', '33', '113', '24', '48', '169', '63', '81', '19', '96', '92', '59', '59', '119']
+          },
+          {
+            name: '2019年',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: ['13', '8', '42', '155', '117', '95', '23', '140', '14', '72', '89', '69', '81', '94', '330', '119', '154', '80', '39', '126', '30', '53', '176', '100', '83', '20', '103', '109', '60', '63', '121']
+          },
+          {
+            name: '2020年',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: ['15', '9', '47', '161', '127', '97', '24', '149', '15', '98', '115', '99', '98', '97', '336', '139', '173', '97', '50', '147', '37', '62', '184', '131', '85', '25', '109', '124', '60', '66', '121']
+          },
+          {
+            name: '2021年',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: ['15', '9', '55', '175', '134', '100', '25', '168', '16', '137', '152', '119', '115', '101', '351', '160', '195', '126', '62', '154', '40', '70', '199', '151', '86', '35', '117', '132', '60', '77', '125']
+          },
+        ]
+      }
+      chart[3] = echarts.init(document.querySelector(`#chart3`))
+      chart[3].setOption(option3)
+      setInterval(function () {
+        animateChart(chart[3], option3, data3)
+      }, 1500)
+
+
+      const data5 = ['稻米', '小麦', '玉米', '生猪', '家禽', '水产', '中药材', '蔬菜', '茶叶', '林特']
+      const option5 = {
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          left: '18%',
+          right: '5%',
+          top: '15%',
+          bottom: '13%'
+        },
+        dataZoom: [//滑动条
+          {
+            xAxisIndex: 0,//这里是从X轴的0刻度开始
+            show: false,//是否显示滑动条，不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 5  // 一次性展示6个。
+          }
+        ],
+        xAxis: [{
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#fff',
+            },
+            rotate: 60
+          },
+          data: data5
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 12,
+              color: '#fff'
+            },
+            formatter: '{value} 亿元'
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#25CEF3']
+            }
+          }
+
+        }, {
+          type: 'value',
+          name: '增长（%）',
+          interval: 5,
+          axisLabel: {
+            formatter: '{value} %'
+          }
+        }],
+        series: [{
+          name: '产值',
+          type: 'bar',
+          barWidth: 8,
+          itemStyle: {
+            normal: {
+              barBorderRadius: [10, 10, 0, 0],
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                offset: 0,
+                color: "#009AFD"
+              }, {
+                offset: 0.8,
+                color: "#33DAFF"
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+            }
+          },
+          data: [1366.5, 1200, 593.5, 1409, 1256, 1083, 773.6, 1413, 734.7, 1216]
+        },
+        {
+          name: '增长（%）',
+          type: 'line',
+          yAxisIndex: 1,
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + ' %';
+            }
+          },
+          data: [6.5, 18.4, 15.5, 3.5, 2.0, 6.0, 9.7, 8.8, 4.1, 3.3]
+        }
+        ]
+      }
+      chart[5] = echarts.init(document.querySelector(`#chart5`))
+      chart[5].setOption(option5)
+      setInterval(function () {
+        animateChart(chart[5], option5, data5)
+      }, 3000)
+
+
+      const data6 = ['2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021']
+      const option6 = {
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          left: '18%',
+          right: '5%',
+          top: '15%',
+          bottom: '13%'
+        },
+        dataZoom: [//滑动条
+          {
+            xAxisIndex: 0,//这里是从X轴的0刻度开始
+            show: false,//是否显示滑动条，不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 5  // 一次性展示6个。
+          }
+        ],
+        xAxis: [{
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#fff',
+            },
+            rotate: 60
+          },
+          data: data6
+        }],
+        yAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 12,
+              color: '#fff'
+            },
+            formatter: '{value} 家'
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: 'dashed',
+              color: ['#25CEF3']
+            }
+          }
+
+        }, {
+          type: 'value',
+          name: '产品数（个）',
+          // interval: 5,
+          axisLabel: {
+            formatter: '{value} 个'
+          }
+        }],
+        series: [{
+          name: '单位数（家）',
+          type: 'bar',
+          barWidth: 8,
+          itemStyle: {
+            normal: {
+              barBorderRadius: [10, 10, 0, 0],
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                offset: 0,
+                color: "#e23fc1"
+              }, {
+                offset: 0.8,
+                color: "#11acef"
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+            }
+          },
+          data: [386, 450, 501, 592, 819, 1202, 1526, 1973, 1990]
+        },
+        {
+          name: '产品数（个）',
+          type: 'line',
+          yAxisIndex: 1,
+          tooltip: {
+            valueFormatter: function (value) {
+              return value + ' 个';
+            }
+          },
+          data: [1163, 1406, 1503, 1703, 2237, 2960, 3421, 3849, 3788]
+          // data: [2, 4, 6, 23]
+        }
+        ]
+      }
+      chart[6] = echarts.init(document.querySelector(`#chart6`))
+      chart[6].setOption(option6)
+      setInterval(function () {
+        animateChart(chart[6], option6, data6)
+      }, 3000)
+
+
+      const option7 = {
+        grid: {
+          left: '18%',
+          right: '5%',
+          top: '30%',
+          bottom: '13%'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          top: '8%',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        series: [
+          {
+            name: '产品登记数（个）',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 35, name: '2016年' },
+              { value: 45, name: '2017年' },
+              { value: 62, name: '2018年' },
+              { value: 69, name: '2019年' },
+              { value: 99, name: '2020年' },
+              { value: 119, name: '2021年' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+      chart[7] = echarts.init(document.querySelector(`#chart7`))
+      chart[7].setOption(option7)
+    },
+    // 获取文本表格数据
+    getList () {
+      // 本院数据概览
+      this.$post(this.api.overviewOfOurSchoolData).then(({ data }) => {
+        this.overview = data
+      }).catch(res => { })
+
+      // 本月综合学习积极性最高的实验课程
+      this.$post(this.api.getTheMostUsedCoursesInOurSchool).then(({ data }) => {
+        this.courses = data
+      }).catch(res => { })
+
+      // 热门理论课程排行榜
+      this.$post(this.api.courseRankings).then(({ data }) => {
+        this.popularCourses = data
+      }).catch(res => { })
+
+      // 学霸排行榜
+      this.$post(`${this.api.academicLeadersRanking}?pageNum=1&pageSize=20`).then(({ data }) => {
+        const list = data.records
+        // 优先排序平均分，然后再排序练习次数
+        list.sort((a, b) => {
+          if (a.avgScore == b.avgScore) return b.practiceNumber - a.practiceNumber
+          return b.avgScore - a.avgScore
+        })
+        this.achs = list
+      }).catch(res => { })
+
+      // 活跃度排行榜
+      this.$post(this.api.activityRanking).then(({ list }) => {
+        list.sort((a, b) => {
+          return +b.activityIndex - +a.activityIndex
+        })
+        this.actives = list
+      }).catch(res => { })
+      this.scrollTable()
+    },
+    // 切换
+    switchType1 (id) {
+      this.type1 = id
+      this.renderChart1()
+    },
+    // 切换
+    switchType2 (id) {
+      this.type2 = id
+      this.renderChart2()
+    },
+    // 全国分地区有效用标
+    renderChart1 () {
+      const series = []
+      const type = this.type1
+      if (type) {
+        series.push(
+          ['288', '135', '1348', '96', '378', '661', '329', '1301', '182', '1796', '1177', '1163', '502', '500', '2940', '386', '1331', '751', '626', '149', '20', '424', '910', '69', '455', '3', '199', '452', '81', '144', '245', '35'],
+          ['288', '176', '930', '147', '394', '740', '355', '1459', '234', '2159', '1276', '1406', '593', '527', '3370', '405', '1419', '824', '735', '171', '25', '637', '1029', '44', '512', '5', '204', '462', '97', '170', '327', '33'],
+          ['291', '188', '1084', '158', '443', '843', '447', '1738', '252', '2195', '1263', '1503', '657', '595', '3509', '544', '1541', '984', '740', '193', '28', '763', '1258', '24', '569', '9', '216', '611', '106', '202', '400', '32'],
+          ['309', '156', '783', '154', '494', '968', '545', '2072', '285', '1994', '1197', '1703', '575', '598', '3380', '572', '1591', '1030', '715', '196', '48', '772', '1251', '35', '740', '12', '224', '645', '211', '221', '548', '3'],
+          ['269', '156', '823', '171', '630', '992', '791', '2495', '271', '2027', '1182', '2237', '553', '581', '3330', '662', '1601', '1157', '575', '205', '68', '761', '1197', '52', '793', '35', '298', '759', '285', '240', '546', '4'],
+          ['289', '172', '986', '269', '947', '1040', '984', '2700', '534', '2464', '1356', '2960', '662', '645', '3667', '722', '1706', '1380', '597', '204', '103', '1214', '1281', '137', '1158', '36', '324', '1092', '404', '261', '604', '34'],
+          ['291', '144', '1015', '490', '1170', '927', '1056', '2748', '1135', '3296', '1469', '3421', '760', '653', '3898', '1019', '1786', '1798', '597', '246', '116', '1889', '1593', '262', '1753', '42', '321', '1292', '336', '277', '537', '8'],
+          ['232', '159', '1045', '896', '1447', '1015', '1101', '3108', '1578', '3708', '1574', '3849', '897', '942', '4083', '1367', '1937', '2528', '565', '493', '123', '2712', '1737', '377', '2065', '45', '370', '1539', '379', '264', '599', '5'],
+          ['297', '163', '1179', '1486', '1701', '1047', '1176', '3244', '1778', '5055', '2442', '3788', '1144', '1291', '4137', '2227', '2319', '3099', '682', '822', '88', '3239', '1984', '373', '2378', '65', '561', '1703', '547', '310', '736', '10'],
+        )
+      } else {
+        series.push(
+          ['50', '54', '415', '38', '141', '293', '180', '537', '136', '793', '735', '386', '282', '182', '1084', '143', '395', '259', '304', '78', '13', '150', '274', '19', '213', '3', '83', '224', '30', '62', '136', '4'],
+          ['67', '64', '308', '63', '148', '335', '182', '597', '165', '922', '814', '450', '347', '203', '1235', '159', '445', '286', '345', '91', '17', '243', '354', '12', '235', '5', '85', '233', '37', '76', '172', '5'],
+          ['66', '69', '348', '76', '156', '400', '210', '685', '177', '948', '774', '501', '377', '226', '1276', '204', '495', '352', '341', '110', '16', '278', '457', '19', '261', '9', '102', '303', '45', '92', '202', '4'],
+          ['65', '59', '275', '77', '173', '450', '216', '779', '193', '913', '773', '592', '353', '256', '1335', '213', '536', '395', '349', '116', '26', '297', '465', '25', '288', '10', '124', '321', '73', '96', '271', '2'],
+          ['58', '57', '276', '79', '202', '477', '270', '928', '189', '907', '743', '819', '329', '255', '1388', '265', '569', '442', '320', '135', '38', '318', '471', '35', '301', '14', '172', '378', '88', '101', '268', '3'],
+          ['64', '58', '323', '135', '313', '480', '337', '1025', '350', '1113', '866', '1202', '378', '304', '1523', '332', '628', '566', '324', '147', '55', '513', '525', '78', '384', '15', '196', '475', '101', '104', '283', '6'],
+          ['61', '52', '353', '290', '397', '470', '391', '1110', '656', '1510', '947', '1526', '429', '327', '1625', '510', '693', '780', '339', '188', '69', '746', '673', '165', '501', '17', '188', '525', '97', '107', '236', '6'],
+          ['52', '53', '373', '527', '529', '543', '419', '1172', '876', '1693', '1097', '1973', '491', '474', '1702', '756', '777', '1139', '326', '363', '75', '988', '750', '241', '567', '32', '230', '670', '108', '106', '215', '4'],
+          ['61', '59', '496', '830', '639', '557', '438', '1211', '946', '2272', '1719', '1990', '537', '642', '1788', '1261', '923', '1454', '416', '621', '64', '1136', '841', '257', '643', '36', '375', '779', '129', '121', '245', '7']
+        )
+      }
+
+      const option1 = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: '15%',
+          textStyle: {
+            color: '#fff'
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          top: '40%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#fff',
+            },
+            rotate: 60
+          },
+          data: this.provinces
+        },
+        dataZoom: [//滑动条
+          {
+            xAxisIndex: 0,//这里是从X轴的0刻度开始
+            show: false,//是否显示滑动条，不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 7  // 一次性展示6个。
+          }
+        ],
+        color: ['#4BF0FF', '#0081c9', '#b9def3', '#8864ff', '#db5afd', '#df93f3', '#9fff92', '#e9de6d', '#f98362'],
+        yAxis: [
+          {
+            type: 'value',
+            name: type ? '产品数' : '单位数',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 12,
+                color: '#fff'
+              },
+              formatter: '{value}' + (type ? '个' : '家')
+            },
+          }
+        ],
+        series: [
+          {
+            name: '2013',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[0]
+          },
+          {
+            name: '2014',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[1]
+          },
+          {
+            name: '2015',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[2]
+          },
+          {
+            name: '2016',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[3]
+          },
+          {
+            name: '2017',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[4]
+          },
+          {
+            name: '2018',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[5]
+          },
+          {
+            name: '2019',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[6]
+          },
+          {
+            name: '2020',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[7]
+          },
+          {
+            name: '2021',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[8]
+          },
+        ]
+      }
+      const chart = echarts.init(document.querySelector(`#chart1`))
+      chart.setOption(option1)
+      clearInterval(this.timer1)
+      this.timer1 = setInterval(() => {
+        this.animateChart(chart, option1, this.provinces)
+      }, 1500)
+    },
+
+    // 全国分地区绿色食品
+    renderChart2 () {
+      const series = []
+      const type = this.type2
+      if (type) {
+        series.push(
+          ['288', '135', '1348', '96', '378', '661', '329', '1301', '182', '1796', '1177', '1163', '502', '500', '2940', '386', '1331', '751', '626', '149', '20', '424', '910', '69', '455', '3', '199', '452', '81', '144', '245', '35'],
+          ['288', '176', '930', '147', '394', '740', '355', '1459', '234', '2159', '1276', '1406', '593', '527', '3370', '405', '1419', '824', '735', '171', '25', '637', '1029', '44', '512', '5', '204', '462', '97', '170', '327', '33'],
+          ['291', '188', '1084', '158', '443', '843', '447', '1738', '252', '2195', '1263', '1503', '657', '595', '3509', '544', '1541', '984', '740', '193', '28', '763', '1258', '24', '569', '9', '216', '611', '106', '202', '400', '32'],
+          ['309', '156', '783', '154', '494', '968', '545', '2072', '285', '1994', '1197', '1703', '575', '598', '3380', '572', '1591', '1030', '715', '196', '48', '772', '1251', '35', '740', '12', '224', '645', '211', '221', '548', '3'],
+          ['269', '156', '823', '171', '630', '992', '791', '2495', '271', '2027', '1182', '2237', '553', '581', '3330', '662', '1601', '1157', '575', '205', '68', '761', '1197', '52', '793', '35', '298', '759', '285', '240', '546', '4'],
+          ['289', '172', '986', '269', '947', '1040', '984', '2700', '534', '2464', '1356', '2960', '662', '645', '3667', '722', '1706', '1380', '597', '204', '103', '1214', '1281', '137', '1158', '36', '324', '1092', '404', '261', '604', '34'],
+          ['291', '144', '1015', '490', '1170', '927', '1056', '2748', '1135', '3296', '1469', '3421', '760', '653', '3898', '1019', '1786', '1798', '597', '246', '116', '1889', '1593', '262', '1753', '42', '321', '1292', '336', '277', '537', '8'],
+          ['232', '159', '1045', '896', '1447', '1015', '1101', '3108', '1578', '3708', '1574', '3849', '897', '942', '4083', '1367', '1937', '2528', '565', '493', '123', '2712', '1737', '377', '2065', '45', '370', '1539', '379', '264', '599', '5'],
+          ['297', '163', '1179', '1486', '1701', '1047', '1176', '3244', '1778', '5055', '2442', '3788', '1144', '1291', '4137', '2227', '2319', '3099', '682', '822', '88', '3239', '1984', '373', '2378', '65', '561', '1703', '547', '310', '736', '10'],
+        )
+      } else {
+        series.push(
+          ['24', '29', '111', '20', '60', '121', '77', '198', '63', '340', '282', '150', '99', '74', '459', '68', '186', '124', '118', '38', '5', '98', '157', '6', '89', '1', '49', '97', '18', '15', '52', '1'],
+          ['30', '34', '90', '36', '59', '137', '65', '258', '72', '453', '341', '203', '168', '97', '537', '58', '192', '117', '154', '37', '9', '140', '168', '2', '106', '4', '32', '79', '21', '40', '89', '2'],
+          ['19', '17', '105', '20', '60', '191', '95', '311', '56', '301', '261', '186', '134', '84', '410', '101', '204', '154', '118', '43', '6', '64', '187', '14', '98', '4', '37', '149', '14', '41', '77', '1'],
+          ['28', '19', '110', '25', '81', '184', '71', '303', '88', '319', '276', '264', '110', '98', '560', '71', '201', '171', '116', '44', '17', '125', '153', '10', '125', '5', '69', '117', '42', '23', '124'],
+          ['23', '28', '106', '37', '87', '147', '128', '407', '59', '401', '277', '405', '121', '98', '554', '109', '218', '168', '110', '55', '17', '152', '174', '14', '111', '6', '76', '154', '38', '49', '91', '2'],
+          ['21', '21', '147', '76', '175', '204', '156', '423', '238', '485', '391', '589', '175', '125', '620', '182', '274', '268', '130', '53', '28', '263', '233', '57', '183', '4', '59', '227', '28', '37', '93', '4'],
+          ['26', '20', '137', '186', '165', '185', '140', '394', '425', '764', '354', '600', '174', '130', '659', '255', '268', '387', '122', '90', '30', '390', '305', '96', '233', '9', '66', '199', '37', '26', '75', '2'],
+          ['16', '23', '137', '296', '243', '193', '158', '483', '318', '590', '449', '861', '189', '255', '669', '370', '298', '541', '123', '234', '22', '437', '267', '92', '189', '21', '120', '296', '54', '49', '82'],
+          ['29', '28', '275', '412', '292', '240', '178', '500', '351', '1142', '1008', '644', '210', '295', '661', '721', '432', '625', '218', '320', '24', '422', '331', '86', '275', '11', '208', '345', '47', '50', '106', '6']
+        )
+      }
+
+      const option1 = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          top: '15%',
+          textStyle: {
+            color: '#fff'
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          top: '40%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            lineStyle: {
+              color: '#fff'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#fff',
+            },
+            rotate: 60
+          },
+          data: this.provinces
+        },
+        dataZoom: [//滑动条
+          {
+            xAxisIndex: 0,//这里是从X轴的0刻度开始
+            show: false,//是否显示滑动条，不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 7  // 一次性展示6个。
+          }
+        ],
+        color: ['#e574de', '#3be6f5', '#b2fbb0', '#ffb346', '#1da8f5', '#4bddc0', '#b87aff', '#9233ff', '#ff33f2'],
+        yAxis: [
+          {
+            type: 'value',
+            name: type ? '产品数' : '单位数',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 12,
+                color: '#fff'
+              },
+              formatter: '{value}' + (type ? '个' : '家')
+            },
+          }
+        ],
+        series: [
+          {
+            name: '2013',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[0]
+          },
+          {
+            name: '2014',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[1]
+          },
+          {
+            name: '2015',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[2]
+          },
+          {
+            name: '2016',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[3]
+          },
+          {
+            name: '2017',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[4]
+          },
+          {
+            name: '2018',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[5]
+          },
+          {
+            name: '2019',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[6]
+          },
+          {
+            name: '2020',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[7]
+          },
+          {
+            name: '2021',
+            type: 'bar',
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data: series[8]
+          },
+        ]
+      }
+      const chart = echarts.init(document.querySelector(`#chart2`))
+      chart.setOption(option1)
+      clearInterval(this.timer2)
+      this.timer2 = setInterval(() => {
+        this.animateChart(chart, option1, this.provinces)
+      }, 1500)
+    },
+    // 获取图标数据并渲染
+    async renderChart () {
+      const animateChart = (chart, option, data, num = 6) => {
+        // 每次向后滚动一个，最后一个从头开始。
+        if (option.dataZoom[0].endValue == data.length) {
+          option.dataZoom[0].endValue = num
+          option.dataZoom[0].startValue = 0
+        }
+        else {
+          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+        }
+        chart.setOption(option)
+      }
+      let chart = {}
+
+      // 学生成绩分布分析
+      const year = new Date().getFullYear()
+      const times = []
+      // 获取过去五年的上下半年日期
+      for (let i = 0; i < 6; i++) {
+        times.push({
+          startTime: (year - i) + '-02-01',
+          endTime: (year - i) + '-08-31'
+        })
+        times.push({
+          startTime: (year - i) + '-09-01',
+          endTime: (year - i + 1) + '-01-31'
+        })
+      }
+      this.$post(this.api.studentGradeDistribution, times).then(({ data }) => {
+        const times = []
+        const data1 = []
+        const data2 = []
+        const data3 = []
+        const data4 = []
+        data.map(e => {
+          times.push(e.time)
+          data1.push(e.yellow.replace('%', ''))
+          data2.push(e.green.replace('%', ''))
+          data3.push(e.blue.replace('%', ''))
+          data4.push(e.pink.replace('%', ''))
+        })
+        const option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            top: '10%',
+            textStyle: {
+              color: '#fff'
+            },
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            top: '30%',
+            bottom: '3%',
+            containLabel: true
+          },
+          dataZoom: [//滑动条
+            {
+              xAxisIndex: 0,//这里是从X轴的0刻度开始
+              show: false,//是否显示滑动条，不影响使用
+              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+              startValue: 0, // 从头开始。
+              endValue: 5  // 一次性展示6个。
+            }
+          ],
+          color: ['#4388ff', '#44cfff', '#8c2bff', '#2defe2'],
+          xAxis: [
+            {
+              type: 'category',
+              data: times,
+              axisLine: {
+                lineStyle: {
+                  color: '#fff'
+                }
+              },
+              axisLabel: {
+                interval: 0,
+                textStyle: {
+                  color: '#fff',
+                },
+                rotate: 60
+              },
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              axisLine: {
+                lineStyle: {
+                  color: '#fff'
+                }
+              },
+              axisLabel: {
+                margin: 10,
+                textStyle: {
+                  fontSize: 12,
+                  color: '#fff'
+                },
+                formatter: '{value}%'
+              },
+            }
+          ],
+          series: [
+            {
+              name: '60以下',
+              type: 'bar',
+              stack: 'Ad',
+              emphasis: {
+                focus: 'series'
+              },
+              data: data1
+            },
+            {
+              name: '60-69',
+              type: 'bar',
+              stack: 'Ad',
+              emphasis: {
+                focus: 'series'
+              },
+              data: data2
+            },
+            {
+              name: '70-89',
+              type: 'bar',
+              stack: 'Ad',
+              emphasis: {
+                focus: 'series'
+              },
+              data: data3
+            },
+            {
+              name: '90-100',
+              type: 'bar',
+              stack: 'Ad',
+              emphasis: {
+                focus: 'series'
+              },
+              data: data4
+            },
+          ]
+        }
+        chart[0] = echarts.init(document.querySelector(`#chart2`))
+        chart[0].setOption(option)
+        setInterval(function () {
+          animateChart(chart[0], option, data, 5)
+        }, 3000)
+      }).catch(res => { })
+
+      // 学生实验课程考核成绩趋势图
+      const colors = [
+        {
+          color1: '#0184d5',
+          color2: 'rgba(1, 132, 213, 0.4)'
+        },
+        {
+          color1: '#00d887',
+          color2: 'rgba(0, 216, 135, 0.4)'
+        },
+        {
+          color1: '#e71872',
+          color2: 'rgba(40, 147, 189, 0.4)'
+        },
+        {
+          color1: '#f9d437',
+          color2: 'rgba(50, 234, 144, 0.4)'
+        },
+        {
+          color1: '#912892',
+          color2: 'rgba(31, 24, 153, 0.4)'
+        },
+        {
+          color1: '#f21259',
+          color2: 'rgba(40, 176, 97, 0.4)'
+        },
+        {
+          color1: '#7343fe',
+          color2: 'rgba(50, 240, 140, 0.4)'
+        },
+        {
+          color1: '#ea7321',
+          color2: 'rgba(65, 94, 123, 0.4)'
+        },
+        {
+          color1: '#934ea2',
+          color2: 'rgba(32, 123, 223, 0.4)'
+        },
+        {
+          color1: '#672313',
+          color2: 'rgba(156, 40, 100, 0.4)'
+        },
+        {
+          color1: '#0184d5',
+          color2: 'rgba(60, 132, 60, 0.4)'
+        },
+        {
+          color1: '#00d887',
+          color2: 'rgba(60, 42, 244, 0.4)'
+        },
+        {
+          color1: '#e71872',
+          color2: 'rgba(90, 147, 180, 0.4)'
+        },
+        {
+          color1: '#f9d437',
+          color2: 'rgba(150, 20, 144, 0.4)'
+        },
+      ]
+      // 登录前登录后调的课程接口不一样
+      const cousrseRes = await this.$post(this.api.listOfGoods, {
+        pageNum: 1,
+        pageSize: 1000,
+        sort: 0,
+        isShelves: 0,
+        hotTag: 1,
+      })
+      if (cousrseRes) {
+        const courseList = cousrseRes.page.records
+        const ids = courseList.map(e => e.mallId)
+        times.map(e => {
+          e.mallId = ids
+        })
+        const courseData = {}
+        this.$post(this.api.studentAssessSchievement, times).then(({ data }) => {
+          const xData = data.map(e => e.time)
+          const len = xData.length
+          courseList.map(e => {
+            courseData[e.productName] = new Array(len).fill(0, 0)
+          })
+          const series = []
+          data.map((e, i) => {
+            e.assesScoreRespList.map(n => {
+              const item = courseList.find(j => j.mallId == n.mallId)
+              if (item) {
+                const name = item.productName
+                if (courseData[name]) {
+                  courseData[name][i] = +n.avgScore
+                }
+              }
+            })
+          })
+          let index = 0
+          // 生成series
+          for (const i in courseData) {
+            series.push({
+              name: i,
+              type: 'line',
+              // smooth: true,
+              symbol: 'circle',
+              symbolSize: 5,
+              lineStyle: {
+                normal: {
+                  color: colors[index].color1,
+                  width: 2
+                }
+              },
+              itemStyle: {
+                normal: {
+                  color: colors[index].color1,
+                  borderWidth: 8
+                }
+              },
+              data: courseData[i]
+            })
+            ++index
+            if (index > 9) index = 0
+          }
+          const option = {
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                lineStyle: {
+                  color: '#dddc6b'
+                }
+              }
+            },
+            legend: {
+              top: '8%',
+              data: courseList.map(e => e.productName),
+              textStyle: {
+                color: 'rgba(255,255,255,.5)',
+                fontSize: '12',
+              }
+            },
+            dataZoom: [//滑动条
+              {
+                xAxisIndex: 0,//这里是从X轴的0刻度开始
+                show: false,//是否显示滑动条，不影响使用
+                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+                startValue: 0, // 从头开始。
+                endValue: 6  // 一次性展示6个。
+              }
+            ],
+            grid: {
+              left: '30',
+              top: '45%',
+              right: '10',
+              bottom: '5%',
+              containLabel: true
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              axisLabel: {
+                interval: 0,
+                textStyle: {
+                  color: "rgba(255,255,255,.9)",
+                  fontSize: 12,
+                },
+              },
+              axisLine: {
+                lineStyle: {
+                  color: 'rgba(255,255,255,.2)'
+                }
+              },
+              data: xData
+            },
+            yAxis: [{
+              type: 'value',
+              name: '平均分',
+              min: 0,
+              max: 100,
+              interval: 10,
+              splitNumber: 10,
+              nameTextStyle: {
+                color: '#fff'
+              },
+              axisTick: { show: false },
+              axisLine: {
+                lineStyle: {
+                  color: 'rgba(255,255,255,.1)'
+                }
+              },
+              axisLabel: {
+                textStyle: {
+                  color: "rgba(255,255,255,.9)",
+                  fontSize: 12,
+                },
+              },
+              splitLine: {
+                lineStyle: {
+                  color: 'rgba(255,255,255,.1)'
+                }
+              }
+            }],
+            series
+          }
+          chart[1] = echarts.init(document.querySelector(`#chart5`))
+          chart[1].setOption(option)
+          // setInterval(function () {
+          //   animateChart(chart[1], option, times)
+          // }, 5000)
+        }).catch(res => { })
+      }
+
+      // 月人均在线学习时长情况
+      const date = new Date()
+      date.setMonth(date.getMonth() + 1)
+      const months = []
+      // 获取近12个月的日期
+      for (let i = 0; i < 12; i++) {
+        date.setMonth(date.getMonth() - 1)
+        const pre = date.getFullYear() + '-' + Util.formateTime(date.getMonth() + 1) + '-'
+        months.push({
+          startTime: pre + '01',
+          endTime: pre + new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).getTime() - 1000 * 60 * 60 * 24).getDate()
+        })
+      }
+      this.$post(this.api.monthlyAverageOnlineTime, months).then(({ data }) => {
+        const option = {
+          title: {
+            text: ''
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          xAxis: {
+            type: 'category',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                color: '#fff',
+              },
+              rotate: 60
+            },
+            data: data.map(e => e.time)
+          },
+          dataZoom: [//滑动条
+            {
+              xAxisIndex: 0,//这里是从X轴的0刻度开始
+              show: false,//是否显示滑动条，不影响使用
+              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+              startValue: 0, // 从头开始。
+              endValue: 7  // 一次性展示6个。
+            }
+          ],
+          yAxis: {
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#fff'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 12,
+                color: '#fff'
+              },
+              formatter: '{value}'
+            },
+          },
+          color: ['#4BF0FF', '#44AFF0', '#4E82FF', '#584BFF', '#BE4DFF', '#F845F1'],
+          legend: {
+            data: ['月人均在线学习时长情况'],
+            textStyle: {
+              color: '#fff'
+            },
+            top: '8%'
+          },
+          grid: {
+            top: '20%',
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          series: [
+            {
+              data: data.map(e => e.averageDuration),
+              type: 'bar',
+              barWidth: 11,
+              itemStyle: {
+                normal: {
+                  barBorderRadius: [10, 10, 0, 0],
+                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                    offset: 0,
+                    color: "#4033F9"
+                  }, {
+                    offset: 0.8,
+                    color: "#516fff"
+                  }], false),
+                  shadowColor: 'rgba(0, 0, 0, 0.1)',
+                }
+              },
+              showBackground: true,
+              backgroundStyle: {
+                color: 'rgba(180, 180, 180, 0.2)'
+              }
+            }
+          ]
+        }
+        chart[2] = echarts.init(document.querySelector(`#chart3`))
+        chart[2].setOption(option)
+        setInterval(function () {
+          animateChart(chart[2], option, data)
+        }, 1500)
+      }).catch(res => { })
+
+      // 平台登录人数
+      this.$get(this.api.platformLoginStatistics, {
+        platform: Setting.platformId
+      }).then(({ data }) => {
+        const option = {
+          tooltip: {
+            trigger: 'axis',
+          },
+          grid: {
+            left: '12%',
+            right: '5%',
+            top: '15%',
+            bottom: '30%'
+          },
+          dataZoom: [//滑动条
+            {
+              xAxisIndex: 0,//这里是从X轴的0刻度开始
+              show: false,//是否显示滑动条，不影响使用
+              type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+              startValue: 0, // 从头开始。
+              endValue: 3  // 一次性展示6个。
+            }
+          ],
+          xAxis: [{
+            type: 'category',
+            axisLine: {
+              lineStyle: {
+                color: '#57617B'
+              }
+            },
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                color: '#fff',
+              },
+              rotate: 60
+            },
+            data: data.map(e => e.today)
+          }],
+          yAxis: [{
+            type: 'value',
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#57617B'
+              }
+            },
+            axisLabel: {
+              margin: 10,
+              textStyle: {
+                fontSize: 12,
+                color: '#fff'
+              },
+              formatter: '{value}'
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed',
+                color: ['#25CEF3']
+              }
+            }
+
+          }],
+          series: [{
+            name: '平台登录人数',
+            type: 'bar',
+            barWidth: 8,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [10, 10, 0, 0],
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: "#009AFD"
+                }, {
+                  offset: 0.8,
+                  color: "#33DAFF"
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+              }
+            },
+            data: data.map(e => e.quantity)
+          }
+          ]
+        }
+        chart[3] = echarts.init(document.querySelector(`#chart4`))
+        chart[3].setOption(option)
+        setInterval(function () {
+          animateChart(chart[3], option, data, 3)
+        }, 1500)
+      }).catch(res => { })
+
+      // 监听resize事件，动态改变chart大小
+      window.addEventListener('resize', () => {
+        this.examChart && this.examChart.resize()
+        for (let i = 0; i < 4; i++) {
+          chart[i] && chart[i].resize()
+        }
+      })
+    },
+    // 动画
+    animateChart (chart, option, data, num = 6) {
+      // 每次向后滚动一个，最后一个从头开始。
+      if (option.dataZoom[0].endValue == data.length) {
+        option.dataZoom[0].endValue = num
+        option.dataZoom[0].startValue = 0
+      }
+      else {
+        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+      }
+      chart.setOption(option)
+    },
+    // 表格滚动效果
+    scrollTable () {
+      const dom = this.$refs.popularCourses
+      const dom1 = this.$refs.ach
+      const dom2 = this.$refs.active
+      setInterval(() => {
+        dom.scrollTop += 1
+        if (dom.clientHeight + dom.scrollTop === dom.scrollHeight) dom.scrollTop = 0
+
+        dom1.scrollTop += 1
+        if (dom1.clientHeight + dom1.scrollTop === dom1.scrollHeight) dom1.scrollTop = 0
+
+        dom2.scrollTop += 1
+        if (dom2.clientHeight + dom2.scrollTop === dom2.scrollHeight) dom2.scrollTop = 0
+      }, 30)
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/page/screenShow.scss';
+</style>
\ No newline at end of file
diff --git a/src/router/modules/screenShow.js b/src/router/modules/screenShow.js
new file mode 100644
index 0000000..dbb9c7b
--- /dev/null
+++ b/src/router/modules/screenShow.js
@@ -0,0 +1,6 @@
+export default {
+  path: `/screenShow`,
+  name: 'screenShow',
+  component: () => import('@/pages/screenShow'),
+  meta: { title: '数据看板' }
+}
\ No newline at end of file
diff --git a/src/styles/page/screenShow.scss b/src/styles/page/screenShow.scss
new file mode 100644
index 0000000..5855475
--- /dev/null
+++ b/src/styles/page/screenShow.scss
@@ -0,0 +1,436 @@
+@import '../var.scss';
+// ::-webkit-scrollbar-thumb {
+//   display: none;
+// }
+body {
+    min-width: 1480px;
+}
+// ::-webkit-scrollbar {
+//   width: 8px;
+//   height: 8px;
+// }
+// ::-webkit-scrollbar-thumb {
+//   width: 5px;
+//   border-radius: 6px;
+//   background: rgba(85, 219, 255, .8);
+// }
+.video {
+    position: absolute;
+    top: 0;
+    left: -20%;
+    width: 150%;
+    // height: 720px;
+}
+.wrap {
+    width: 100%;
+    height: 100vh;
+    color: #333;
+    background: url('../../assets/img/screen/screen1.jpg') no-repeat;
+    background-size: 100% 100%;
+    overflow: auto;
+    .full {
+        z-index: 10;
+        position: absolute;
+        top: 20px;
+        right: 30px;
+        cursor: pointer;
+        transition: 0.5s;
+        &:hover {
+            transform: scale(1.2);
+        }
+    }
+    .l_t_line {
+        width: 5px;
+        height: 24px;
+        left: -3px;
+        top: -3px;
+    }
+    .t_l_line {
+        height: 5px;
+        width: 26px;
+        left: -3px;
+        top: -3px;
+    }
+    .t_line_box {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+    .t_line_box i {
+        background-color: #4788fb;
+        box-shadow: 0px 0px 10px #4788fb;
+        position: absolute;
+    }
+    .t_r_line {
+        height: 5px;
+        width: 26px;
+        right: -3px;
+        top: -3px;
+    }
+    .r_t_line {
+        width: 5px;
+        height: 24px;
+        right: -3px;
+        top: -3px;
+    }
+    .l_b_line {
+        width: 5px;
+        height: 24px;
+        left: -3px;
+        bottom: -3px;
+    }
+    .b_l_line {
+        height: 5px;
+        width: 26px;
+        left: -3px;
+        bottom: -3px;
+    }
+    .r_b_line {
+        width: 5px;
+        height: 24px;
+        right: -3px;
+        bottom: -3px;
+    }
+    .b_r_line {
+        height: 5px;
+        width: 26px;
+        right: -3px;
+        bottom: -3px;
+    }
+    .pics {
+        .pic {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .earth {
+        z-index: 0;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        img {
+            position: absolute;
+            top: 52%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            opacity: 0.4;
+        }
+        .lbx {
+            z-index: 2;
+            max-width: 95%;
+            max-height: 95%;
+            animation: rotate 15s linear infinite;
+        }
+        .jt {
+            z-index: 3;
+            max-width: 90%;
+            max-height: 90%;
+            opacity: 0.3;
+            animation: rotate-reverse 15s linear infinite;
+        }
+        .map {
+            z-index: 1;
+            max-width: 85%;
+            max-height: 85%;
+        }
+    }
+    @keyframes rotate {
+        0% {
+            transform: translate(-50%, -50%) rotate(0);
+        }
+        50% {
+            transform: translate(-50%, -50%) rotate(180deg);
+        }
+        100% {
+            transform: translate(-50%, -50%) rotate(360deg);
+        }
+    }
+    @keyframes rotate-reverse {
+        0% {
+            transform: translate(-50%, -50%) rotate(0360deg);
+        }
+        50% {
+            transform: translate(-50%, -50%) rotate(180deg);
+        }
+        100% {
+            transform: translate(-50%, -50%) rotate(0);
+        }
+    }
+}
+.time-switch {
+    z-index: 2;
+    position: absolute;
+    display: flex;
+    top: 24px;
+    right: 10px;
+    li {
+        padding: 0 14px;
+        line-height: 24px;
+        color: #fff;
+        background-color: #0a111c;
+        border-radius: 8px;
+        cursor: pointer;
+        &.active {
+            background-color: #00d8ff;
+        }
+    }
+}
+.active-number {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    padding: 10px 40px;
+    background: url(../../assets/img/screen/title-bg.png) 0 0 / cover no-repeat;
+    .val {
+        font-size: 50px;
+        font-family: 'yjsz';
+        color: #00f3ff;
+        text-shadow: 0 0 25px #00d8ff;
+        text-align: center;
+    }
+    .name {
+        font-size: 16px;
+        color: #fff;
+        text-shadow: 0 0 25px #00d8ff;
+    }
+}
+.stat-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.65);
+}
+.stat-wrap {
+    position: relative;
+    height: 100%;
+    background: url(../../assets/img/screen/stat.png) 0 0/100% auto no-repeat;
+    .num {
+        position: absolute;
+        width: 100px;
+        text-align: center;
+        font-size: 32px;
+        font-weight: bold;
+        color: #00d8ff;
+        white-space: nowrap;
+    }
+    .num1 {
+        top: 140px;
+        left: 12px;
+    }
+    .num2 {
+        top: 49px;
+        right: 187px;
+    }
+    .num3 {
+        top: 260px;
+        left: 200px;
+    }
+    .num4 {
+        top: 296px;
+        right: 368px;
+    }
+    .num5 {
+        bottom: 319px;
+        right: 57px;
+    }
+}
+.main_table {
+    width: 100%;
+    margin-top: 25px;
+    table {
+        width: 100%;
+    }
+    tr {
+        height: 42px;
+    }
+    th {
+        font-size: 12px;
+        font-weight: 600;
+        color: #61d2f7;
+        text-align: center;
+    }
+    td {
+        color: #fff;
+        font-size: 10px;
+        text-align: center;
+    }
+    tbody tr:nth-child(odd) {
+        background-color: #072951;
+        box-shadow: -10px 0px 15px #2c58a6 inset, 10px 0px 15px #2c58a6 inset;
+    }
+    .percent {
+        width: 64px;
+        margin: 0 auto;
+        line-height: 24px;
+        color: #fff;
+        text-align: center;
+        background-color: #0faf7d;
+        border-radius: 2px;
+        &.fall {
+            background-color: #db4154;
+        }
+    }
+}
+.header {
+    z-index: 2;
+    position: relative;
+    width: 100%;
+    height: 80px;
+    padding: 0 20px;
+}
+.bg_header {
+    width: 100%;
+    height: 80px;
+    background: url(../../assets/img/screen/screen2.png) no-repeat;
+    background-size: 100% 100%;
+}
+.t_title {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    font-size: 2.5em;
+    line-height: 80px;
+    color: #fff;
+}
+$height: 344px;
+.content {
+    display: flex;
+    padding: 20px;
+    .left,
+    .right {
+        min-width: 300px;
+        width: 24%;
+    }
+    .middle {
+        width: 913px;
+        min-width: 913px;
+        margin: 0 30px;
+        overflow: hidden;
+    }
+    .item {
+        position: relative;
+        height: $height;
+        margin-bottom: 30px;
+        border: 1px solid #2c58a6;
+        box-shadow: 0 0 10px #2c58a6;
+    }
+}
+.chart {
+    height: $height;
+}
+.popular-wrap {
+    height: 170px;
+    margin-top: 45px;
+    overflow: auto;
+    &::-webkit-scrollbar-thumb {
+        display: none;
+    }
+}
+.list {
+    padding: 0 15px;
+    margin-top: 25px;
+    overflow: auto;
+    li {
+        position: relative;
+        padding: 10px 10px;
+        &:nth-child(2) {
+            .index {
+                background-color: #67a0ff;
+            }
+        }
+        &:nth-child(3) {
+            .index {
+                background-color: #2b71ff;
+            }
+        }
+        &:nth-child(4) {
+            .index {
+                background-color: #8c2bff;
+            }
+        }
+        &:nth-child(5) {
+            .index {
+                background-color: #ff612b;
+            }
+        }
+        &:nth-child(6) {
+            .index {
+                background-color: #4152f1;
+            }
+        }
+        &:nth-child(7) {
+            .index {
+                background-color: #d14cc9;
+            }
+        }
+        &:nth-child(8) {
+            .index {
+                background-color: #f52c8d;
+            }
+        }
+        &:nth-child(9) {
+            .index {
+                background-color: #f1561b;
+            }
+        }
+        &:nth-child(10) {
+            .index {
+                background-color: #f50000;
+            }
+        }
+    }
+    &.popular {
+        margin-top: 0;
+        li:nth-child(odd) {
+            background-color: #072951;
+            box-shadow: -10px 0px 15px #2c58a6 inset, 10px 0px 15px #2c58a6 inset;
+        }
+    }
+    .index {
+        position: absolute;
+        width: 20px;
+        line-height: 20px;
+        color: #fff;
+        font-size: 12px;
+        text-align: center;
+        border-radius: 50%;
+        background-color: #2defe2;
+    }
+    .text {
+        width: 60%;
+        margin: 0 auto;
+        color: #61d2f7;
+        text-align: center;
+        @include ellipsis;
+    }
+    .icon {
+        position: absolute;
+        top: 10px;
+        right: 10%;
+    }
+}
+.main_title {
+    display: flex;
+    align-items: center;
+    height: 35px;
+    line-height: 33px;
+    background-color: #2c58a6;
+    border-radius: 18px;
+    position: absolute;
+    top: -17px;
+    left: 50%;
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+    white-space: nowrap;
+    padding: 0 20px;
+    z-index: 1000;
+    text-align: center;
+    transform: translateX(-50%);
+    img {
+        margin-right: 10px;
+    }
+}