fix: 对接后台首页
This commit is contained in:
parent
94cb2cbcfa
commit
ef80e5486f
@ -9,8 +9,8 @@
|
||||
</div>
|
||||
|
||||
<div class="top_content_left_title_text_box">
|
||||
<div class="top_content_left_title_text_sub_title">{{props.text}}</div>
|
||||
<div class="top_content_left_title_text_title">{{props.count}}</div>
|
||||
<div class="top_content_left_title_text_sub_title">{{ props.text }}</div>
|
||||
<div class="top_content_left_title_text_title">{{ props.count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -19,7 +19,7 @@
|
||||
<div class="top_content_right_num_box">
|
||||
<img v-if="props.percentage > 0" src="/img/home/上升.png" alt="">
|
||||
<img v-if="props.percentage < 0" src="/img/home/下降.png" alt="">
|
||||
<div class="top_content_right_num">{{props.percentage}}%</div>
|
||||
<div class="top_content_right_num">{{ props.percentage }}%</div>
|
||||
</div>
|
||||
<div class="top_content_right_price">同昨日对比</div>
|
||||
</div>
|
||||
@ -38,66 +38,165 @@ import * as echarts from 'echarts';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
// 数据
|
||||
option: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
percentage: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
idx: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// 数据
|
||||
data: {
|
||||
type: Array,
|
||||
default: [
|
||||
['1', 500],
|
||||
['2', 900],
|
||||
['3', 460],
|
||||
['4', 1150],
|
||||
['5', 300],
|
||||
['6', 1000],
|
||||
['7', 400],
|
||||
],
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
percentage: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
idx: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
console.log(props.data,'this is data');
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
await echartsInit()
|
||||
await echartsInit()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
echarts.dispose(document.getElementById('mainBox' + props.idx));
|
||||
echarts.dispose(document.getElementById('mainBox' + props.idx));
|
||||
});
|
||||
|
||||
// 数据预览 echarts 参数
|
||||
let options = ref({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
show: false,
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false, // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false, // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, '30%'],
|
||||
show: false,
|
||||
},
|
||||
visualMap: {
|
||||
type: 'piecewise',
|
||||
show: false,
|
||||
// 淡化效果
|
||||
dimension: 0.1,
|
||||
// 最小值
|
||||
min: 0,
|
||||
seriesIndex: 1,
|
||||
pieces: [
|
||||
{
|
||||
gt: 1,
|
||||
lt: 3,
|
||||
color: 'rgba(0, 0, 180, 0.4)'
|
||||
},
|
||||
{
|
||||
gt: 5,
|
||||
lt: 7,
|
||||
color: 'rgba(0, 0, 180, 0.4)'
|
||||
}
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: 0.6,
|
||||
symbol: 'none',
|
||||
showSymbol: true,
|
||||
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0.7,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#a5b9fe' // 0%处的颜色为淡橙色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#4e70df' // 100%处的颜色为橙色
|
||||
}]
|
||||
},
|
||||
width: 3,
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0.8,
|
||||
x2: 0,
|
||||
y2: 0.4,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#ffffff' // 0%处的颜色为淡橙色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#e7f1ff' // 100%处的颜色为橙色
|
||||
}]
|
||||
}
|
||||
},
|
||||
areaStyle: {},
|
||||
data: props.data
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
|
||||
// 顶部第一个盒子
|
||||
async function echartsInit() {
|
||||
console.log(document.getElementById('mainBox' + props.idx));
|
||||
let myChart = echarts.getInstanceByDom(document.getElementById('mainBox' + props.idx)); //有的话就获取已有echarts实例的DOM节点。
|
||||
|
||||
if (myChart == null) { // 如果不存在，就进行初始化。
|
||||
myChart = echarts.init(document.getElementById('mainBox' + props.idx));
|
||||
}
|
||||
let myChart = echarts.getInstanceByDom(document.getElementById('mainBox' + props.idx)); //有的话就获取已有echarts实例的DOM节点。
|
||||
|
||||
props.option && myChart.setOption(props.option);
|
||||
if (myChart == null) { // 如果不存在，就进行初始化。
|
||||
myChart = echarts.init(document.getElementById('mainBox' + props.idx));
|
||||
}
|
||||
|
||||
options.value && myChart.setOption(options.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mainBox {
|
||||
width: 450px;
|
||||
margin-top: -139px;
|
||||
margin-left: -45px;
|
||||
margin-top: -70px;
|
||||
height: 300px;
|
||||
width: 450px;
|
||||
margin-top: -139px;
|
||||
margin-left: -45px;
|
||||
margin-top: -70px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.top_box_pos {
|
||||
|
||||
@ -62,127 +62,6 @@
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
// 顶部盒子左边
|
||||
.top_content_left_box {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
// background-color: aquamarine;
|
||||
}
|
||||
|
||||
.top_content_left_title_box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px 0 0 5px;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.top_content_left_title_img_box {
|
||||
width: 40%;
|
||||
height: 60%;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
// border: 5px solid red;
|
||||
}
|
||||
|
||||
.top_content_left_title_img_box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.top_content_left_title_text_box {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.top_content_left_title_text_title {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.top_content_left_title_text_sub_title {
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
font-weight: bold;
|
||||
color: #9aa4ba;
|
||||
}
|
||||
|
||||
.top_content_right_box {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
// background-color: aquamarine;
|
||||
padding: 23px 20px 0 0;
|
||||
}
|
||||
|
||||
|
||||
.top_content_right_price {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-right: -10px;
|
||||
margin-bottom: 3px;
|
||||
font-size: 13px;
|
||||
|
||||
font-weight: bold;
|
||||
color: #9ca1bb;
|
||||
}
|
||||
|
||||
.Top_content_right_price {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-bottom: 3px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #9ca1bb;
|
||||
|
||||
}
|
||||
|
||||
.top_content_right_num_box {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.top_content_right_num_box img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
object-fit: contain;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
|
||||
.top_line_box {
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
// background-color: orange;
|
||||
}
|
||||
|
||||
.user {
|
||||
margin-top: -40px;
|
||||
margin-bottom: 30px;
|
||||
// font-family: 楷体;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 450px;
|
||||
margin-top: -139px;
|
||||
margin-left: -45px;
|
||||
margin-top: -70px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#main2 {
|
||||
width: 450px;
|
||||
margin-top: -130px;
|
||||
margin-left: -45px;
|
||||
margin-top: -70px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#main3 {
|
||||
width: 1850px;
|
||||
@ -191,38 +70,6 @@
|
||||
margin-left: -7%;
|
||||
}
|
||||
|
||||
#main7 {
|
||||
width: 450px;
|
||||
margin-top: -139px;
|
||||
margin-left: -45px;
|
||||
margin-top: -70px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#main8 {
|
||||
width: 450px;
|
||||
margin-top: -139px;
|
||||
margin-left: -45px;
|
||||
margin-top: -70px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#main9 {
|
||||
width: 450px;
|
||||
margin-top: -139px;
|
||||
margin-left: -45px;
|
||||
margin-top: -70px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.Bottom_pie_chart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
// 柱状图
|
||||
.Wave_pattern {
|
||||
width: 95%;
|
||||
@ -241,52 +88,8 @@
|
||||
margin-top: 40px;
|
||||
font-family: 幼圆;
|
||||
}
|
||||
|
||||
.Wave_pattern_box {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #1b5afa;
|
||||
}
|
||||
|
||||
.middle_show_box {
|
||||
width: 100%;
|
||||
background-color: #f9f9f9;
|
||||
// padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.middle_pos_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.8rem 2rem;
|
||||
}
|
||||
|
||||
.middle_title_box {
|
||||
// margin-top: 3rem;
|
||||
// margin-left: 5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.year_select_box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.year_text {
|
||||
margin-right: 1.5rem;
|
||||
font-weight: bold;
|
||||
transition: .4s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.year_text_actice {
|
||||
color: #8dbffb !important;
|
||||
}
|
||||
|
||||
.year_text:hover {
|
||||
color: #8dbffb;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<!-- 顶部的所有盒子 -->
|
||||
<div class="top_title_box">
|
||||
@ -297,20 +100,20 @@
|
||||
<div class="total">
|
||||
<div class="top_content_box">
|
||||
|
||||
<CountBox :option="options" :idx="1" :text="'教师总数'" :img="'/img/home/分组 1 (10).png'" :count="'4,423'"
|
||||
:percentage="'0'">
|
||||
<CountBox :data="teacherEchartsData" :idx="1" :text="'教师总数'" :img="'/img/home/分组 1 (10).png'"
|
||||
:count="teacherData.count" :percentage="teacherData.percentage">
|
||||
</CountBox>
|
||||
|
||||
<CountBox :option="options" :idx="2" :text="'文章总数'" :img="'/img/home/分组 1 (11).png'" :count="'2,153'"
|
||||
:percentage="'28'">
|
||||
<CountBox :data="infoArticleEchartsData" :idx="2" :text="'文章总数'" :img="'/img/home/分组 1 (11).png'"
|
||||
:count="infoArticleData.count" :percentage="infoArticleData.percentage">
|
||||
</CountBox>
|
||||
|
||||
<CountBox :option="options" :idx="3" :text="'访客总数'" :img="'/img/home/分组 1 (12).png'" :count="'3,25'"
|
||||
:percentage="'28'">
|
||||
<CountBox :data="flowEchartsData" :idx="3" :text="'访客总数'" :img="'/img/home/分组 1 (12).png'" :count="flowData.count"
|
||||
:percentage="flowData.percentage">
|
||||
</CountBox>
|
||||
|
||||
<CountBox :option="options" :idx="4" :text="'作品总数'" :img="'/img/home/分组 1 (13).png'" :count="'14,423'"
|
||||
:percentage="'28'">
|
||||
<CountBox :data="worksEchartsData" :idx="4" :text="'作品总数'" :img="'/img/home/分组 1 (13).png'" :count="worksData.count"
|
||||
:percentage="worksData.percentage">
|
||||
</CountBox>
|
||||
|
||||
</div>
|
||||
@ -348,10 +151,58 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import CountBox from "~/components/Echarts/CountBox.vue"
|
||||
import { getHomeData } from '~/service/home';
|
||||
|
||||
// Echarts数据
|
||||
let teacherEchartsData = [
|
||||
['1', 500],
|
||||
['2', 900],
|
||||
['3', 460],
|
||||
['4', 1150],
|
||||
['5', 300],
|
||||
['6', 1000],
|
||||
['7', 400],
|
||||
]
|
||||
|
||||
let infoArticleEchartsData = [
|
||||
['1', 500],
|
||||
['2', 900],
|
||||
['3', 460],
|
||||
['4', 1150],
|
||||
['5', 300],
|
||||
['6', 1000],
|
||||
['7', 400],
|
||||
]
|
||||
|
||||
let flowEchartsData = [
|
||||
['1', 500],
|
||||
['2', 900],
|
||||
['3', 460],
|
||||
['4', 1150],
|
||||
['5', 300],
|
||||
['6', 1000],
|
||||
['7', 400],
|
||||
]
|
||||
|
||||
let worksEchartsData = [
|
||||
['1', 500],
|
||||
['2', 900],
|
||||
['3', 460],
|
||||
['4', 1150],
|
||||
['5', 300],
|
||||
['6', 1000],
|
||||
['7', 400],
|
||||
]
|
||||
|
||||
let teacherData = ref({})
|
||||
let infoArticleData = ref({})
|
||||
let flowData = ref({})
|
||||
let worksData = ref({})
|
||||
let enrolData = ref({})
|
||||
|
||||
onMounted(async () => {
|
||||
await getHome()
|
||||
await echartsInit3()
|
||||
})
|
||||
|
||||
@ -359,105 +210,21 @@ onBeforeUnmount(() => {
|
||||
echarts.dispose(document.getElementById('main3'));
|
||||
});
|
||||
|
||||
// 数据预览 echarts 参数
|
||||
let options = ref({
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
show: false,
|
||||
axisTick: {
|
||||
show: false // 不显示坐标轴刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false, // 不显示坐标轴线
|
||||
},
|
||||
axisLabel: {
|
||||
show: false, // 不显示坐标轴上的文字
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 不显示网格线
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, '30%'],
|
||||
show: false,
|
||||
},
|
||||
visualMap: {
|
||||
type: 'piecewise',
|
||||
show: false,
|
||||
// 淡化效果
|
||||
dimension: 0.1,
|
||||
// 最小值
|
||||
min: 0,
|
||||
seriesIndex: 1,
|
||||
pieces: [
|
||||
{
|
||||
gt: 1,
|
||||
lt: 3,
|
||||
color: 'rgba(0, 0, 180, 0.4)'
|
||||
},
|
||||
{
|
||||
gt: 5,
|
||||
lt: 7,
|
||||
color: 'rgba(0, 0, 180, 0.4)'
|
||||
}
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: 0.6,
|
||||
symbol: 'none',
|
||||
showSymbol: true,
|
||||
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0.7,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#a5b9fe' // 0%处的颜色为淡橙色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#4e70df' // 100%处的颜色为橙色
|
||||
}]
|
||||
},
|
||||
width: 3,
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0.8,
|
||||
x2: 0,
|
||||
y2: 0.4,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#ffffff' // 0%处的颜色为淡橙色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#e7f1ff' // 100%处的颜色为橙色
|
||||
}]
|
||||
}
|
||||
},
|
||||
areaStyle: {},
|
||||
// 获取接口数据
|
||||
async function getHome() {
|
||||
const { code, data } = await getHomeData();
|
||||
if (code == 0) {
|
||||
teacherData.value = data.data_preview.teacher
|
||||
infoArticleData.value = data.data_preview.info_article
|
||||
flowData.value = data.data_preview.flow
|
||||
worksData.value = data.data_preview.works
|
||||
|
||||
enrolData.value = data.statistics
|
||||
console.log(data, "首页");
|
||||
}
|
||||
}
|
||||
|
||||
data: [
|
||||
['1', 500],
|
||||
['2', 900],
|
||||
['3', 460],
|
||||
['4', 1150],
|
||||
['5', 300],
|
||||
['6', 1000],
|
||||
['7', 400],
|
||||
],
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
// 柱形图
|
||||
@ -542,9 +309,10 @@ async function echartsInit3() {
|
||||
barBorderRadius: 3,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
],
|
||||
// data: [
|
||||
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
// ],
|
||||
data: enrolData.value.signup
|
||||
},
|
||||
{
|
||||
name: '留言人数',
|
||||
@ -556,9 +324,7 @@ async function echartsInit3() {
|
||||
barBorderRadius: 3,
|
||||
},
|
||||
},
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
],
|
||||
data: enrolData.value.leave_message
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
15
src/service/home.js
Normal file
15
src/service/home.js
Normal file
@ -0,0 +1,15 @@
|
||||
import {
|
||||
api,
|
||||
downloadFile,
|
||||
createApiUrl
|
||||
} from '~/utils/axios';
|
||||
|
||||
|
||||
/**
|
||||
* 获取后台首页数据
|
||||
* @param {Object} data
|
||||
* @return {Promise} api
|
||||
*/
|
||||
export function getHomeData(data) {
|
||||
return api.post('Home.Home/getHomeData', data);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user