From 34ef75bb65c546340b21071a881addc1c5738af7 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 26 Dec 2023 18:02:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=89=E5=86=9C=E5=A4=A7=E5=A4=A7=E5=B1=8F?=
=?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/screenShow/index.vue | 1782 ++++++++++++++++++++++++++++++
src/router/modules/screenShow.js | 6 +
src/styles/page/screenShow.scss | 436 ++++++++
3 files changed, 2224 insertions(+)
create mode 100644 src/pages/screenShow/index.vue
create mode 100644 src/router/modules/screenShow.js
create mode 100644 src/styles/page/screenShow.scss
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;
+ }
+}