mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-09 19:06:45 +08:00
feat: 营运数据接口联调,部分央视修改
This commit is contained in:
@@ -15,4 +15,8 @@ export const boeuExamPageListV2 = (obj) => http.post('/boeu/exam/pageList/v2', o
|
||||
// 问答分页列表
|
||||
export const boeuQuestionPageList= (obj) => http.post('/boeu/question/pageList', obj )
|
||||
//柱状体左侧获取数据接口
|
||||
export const dataStatisticsSelectV1= (obj) => http.post('/data/statistics/select/v1', obj )
|
||||
export const dataStatisticsSelectV1= (obj) => http.post('/data/statistics/select/v1', obj )
|
||||
//柱状体右侧获取数据接口
|
||||
export const dataStatisticsSelectV2= (obj) => http.post('/data/statistics/select/v2', obj )
|
||||
// 图表2 学习情况数据接口
|
||||
export const boeuStudyDataGetStudyStaisticsList= (obj) => http.post('/boeu/studyData/getStudyStatisticsList', obj )
|
||||
@@ -37,7 +37,9 @@
|
||||
<!-- 以下为导出按钮 -->
|
||||
<div class="btnzs">
|
||||
<div class="btnz btnz3" @click="exportAll">
|
||||
<div><img src="../../assets/images/coursewareManage/export1.png" alt="" /></div>
|
||||
<div>
|
||||
<img src="../../assets/images/coursewareManage/export1.png" alt="" />
|
||||
</div>
|
||||
<div class="btnzText">导出</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -59,14 +61,20 @@
|
||||
<a-tooltip placement="topRight">
|
||||
<template #title>
|
||||
<span>{{
|
||||
record.publishTime &&
|
||||
dayjs(record.publishTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
record.sysUpdateTime
|
||||
? dayjs(record.sysUpdateTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
: record.sysCreateTime
|
||||
? dayjs(record.sysCreateTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
: ""
|
||||
}}</span>
|
||||
</template>
|
||||
<span>{{
|
||||
record.publishTime &&
|
||||
dayjs(record.publishTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
}}</span>
|
||||
record.sysUpdateTime
|
||||
? dayjs(record.sysUpdateTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
: record.sysCreateTime
|
||||
? dayjs(record.sysCreateTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
: ""
|
||||
}}</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
@@ -182,12 +190,12 @@ export default {
|
||||
if (res) {
|
||||
state.tableLoading = false;
|
||||
state.tableDataTotal = res.data.total;
|
||||
const list =res.data.rows?.map((item)=>{
|
||||
const list = res.data.rows?.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
key:item.id
|
||||
}
|
||||
})
|
||||
key: item.id,
|
||||
};
|
||||
});
|
||||
tableData.value = list;
|
||||
}
|
||||
};
|
||||
@@ -314,7 +322,7 @@ export default {
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% - 76px - 200px) / 2);
|
||||
}
|
||||
|
||||
|
||||
.btnz {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
|
||||
@@ -15,7 +15,8 @@
|
||||
value: 'id',
|
||||
children: 'treeChildList',
|
||||
}"
|
||||
></a-cascader>
|
||||
>
|
||||
</a-cascader>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
@@ -77,6 +78,33 @@
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'createTime'">
|
||||
<a-tooltip placement="topRight">
|
||||
<template #title>
|
||||
<span>{{
|
||||
record.createTime &&
|
||||
dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
}}</span>
|
||||
</template>
|
||||
<span>{{
|
||||
record.createTime &&
|
||||
dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
}}</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<span>{{
|
||||
record.status == "0"
|
||||
? "草稿"
|
||||
: record.status == "1"
|
||||
? "已发布"
|
||||
: record.status == "-1"
|
||||
? "停用"
|
||||
: ""
|
||||
}}</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="tableBox">
|
||||
<div class="pa">
|
||||
@@ -104,6 +132,7 @@ import { ref, toRefs, reactive, onMounted } from "vue";
|
||||
import downLoad from "../../utils/downLoad";
|
||||
import Cookies from "vue-cookies";
|
||||
import axios from "axios";
|
||||
import dayjs from "dayjs";
|
||||
export default {
|
||||
name: "LearningPathMap",
|
||||
setup() {
|
||||
@@ -413,6 +442,7 @@ export default {
|
||||
tableData,
|
||||
columns,
|
||||
changePagination,
|
||||
dayjs,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<!-- 营运数据概览页面! -->
|
||||
|
||||
<div class="operational">
|
||||
<div class="echartsOne">
|
||||
<!-- <div class="echartsOne">
|
||||
<div class="title">
|
||||
<div class="left">用户活动趋势</div>
|
||||
<div class="right">
|
||||
@@ -64,12 +64,12 @@
|
||||
<div class="text">访问次数</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="echartsTwo">
|
||||
<div class="title">
|
||||
<div class="left">学习情况</div>
|
||||
<div class="right">
|
||||
<img src="../../assets/svg/export.png" alt="" />
|
||||
<div class="right" @click="exportTwoData">
|
||||
<img src="../../assets/images/coursewareManage/export1.png" alt="" />
|
||||
<span>导出活动详情</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,25 +77,73 @@
|
||||
<div class="left">
|
||||
<div class="leftItem">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
style="width: 112px"
|
||||
placeholder="请选择模块"
|
||||
v-model:value="towParmasn.type"
|
||||
@change="modalChange"
|
||||
:options="[
|
||||
{
|
||||
label: '项目',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '学习路径图',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '课程',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: '案例',
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: '文章',
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
label: '问答',
|
||||
value: 6,
|
||||
},
|
||||
]"
|
||||
allowClear
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="leftItem">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
style="width: 112px"
|
||||
placeholder="请选择日期格式"
|
||||
allowClear
|
||||
@change="twoSelectChange"
|
||||
:options="[
|
||||
{ label: '按日查找', value: 0 },
|
||||
{ label: '按月查找', value: 1 },
|
||||
]"
|
||||
v-model:value="towParmasn.dateType"
|
||||
></a-select>
|
||||
</div>
|
||||
<div class="leftItem">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
<div class="timeItemSearch">
|
||||
<a-range-picker
|
||||
v-if="towParmasn.dateType == 0"
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
v-model:value="towParmasn.day"
|
||||
separator="至"
|
||||
@change="twoDatChange"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
<a-range-picker
|
||||
v-if="towParmasn.dateType == 1"
|
||||
style="width: 100%"
|
||||
v-model:value="towParmasn.time"
|
||||
@change="twoMonthChange"
|
||||
format="YYYY-MM"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
picker="month"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -126,7 +174,7 @@
|
||||
<div class="title">
|
||||
<div class="leftTile">学习内容</div>
|
||||
<div class="rightTile" @click="exportThree">
|
||||
<img src="../../assets/svg/export.png" alt="" />
|
||||
<img src="../../assets/images/coursewareManage/export1.png" alt="" />
|
||||
<span>导出学习内容</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -189,8 +237,8 @@
|
||||
<div class="right">
|
||||
<div class="title">
|
||||
<div class="leftTile">学习内容</div>
|
||||
<div class="rightTile">
|
||||
<img src="../../assets/svg/export.png" alt="" />
|
||||
<div class="rightTile" @click="exportRight">
|
||||
<img src="../../assets/images/coursewareManage/export1.png" alt="" />
|
||||
<span>导出学习内容</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -214,15 +262,17 @@
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
v-model:value="forDay"
|
||||
@change="rightDayChange"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
<a-range-picker
|
||||
v-if="threeLeftType == 1"
|
||||
v-if="forRightType == 1"
|
||||
style="width: 100%"
|
||||
v-model:value="forTime"
|
||||
format="YYYY-MM"
|
||||
separator="至"
|
||||
@change="rightMonthChange"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
picker="month"
|
||||
/>
|
||||
@@ -262,15 +312,19 @@ export default {
|
||||
name: "OperationaL",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
threeData: [],
|
||||
threeLeftType: 1,
|
||||
threeTime: [],
|
||||
threeDay: [],
|
||||
threeXData: [],
|
||||
forData: [],
|
||||
forRightType: 1,
|
||||
forTime: [],
|
||||
forDay: [],
|
||||
towParmasn: {
|
||||
type: 1,
|
||||
dateType: 1,
|
||||
time: [],
|
||||
day: [],
|
||||
},
|
||||
});
|
||||
const surfaceRef = ref(null);
|
||||
const surface1Ref = ref(null);
|
||||
@@ -278,8 +332,86 @@ export default {
|
||||
const surface3Ref = ref(null);
|
||||
|
||||
const dates = ref();
|
||||
// const value = ref();
|
||||
const hackValue = ref();
|
||||
|
||||
const datess = ref();
|
||||
const hackValues = ref();
|
||||
const exportTwoData = async () => {
|
||||
if (state.towParmasn.dateType == 0) {
|
||||
if (!state.towParmasn.day?.length || state.towParmasn.day?.length < 1) {
|
||||
message.error("请选择要导出的时间日期后再进行导出");
|
||||
} else {
|
||||
const dayStart = dayjs(state.towParmasn.day[0])
|
||||
.startOf("day")
|
||||
.format("YYYY-MM-DD 00:00:01");
|
||||
const dayEnd = dayjs(state.towParmasn.day[1])
|
||||
.endOf("day")
|
||||
.format("YYYY-MM-DD hh:mm:ss");
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/report/boeu/studyData/exportDetailAll",
|
||||
data: {
|
||||
beginTime: dayStart,
|
||||
endTime: dayEnd,
|
||||
dateType: state.towParmasn.dateType,
|
||||
type: state.towParmasn.type,
|
||||
},
|
||||
responseType: "blob",
|
||||
headers: {
|
||||
token: Cookies.get("token"),
|
||||
},
|
||||
}).then(
|
||||
(res) => {
|
||||
downLoad(res.data, "学习情况.xlsx");
|
||||
},
|
||||
(err) => {
|
||||
message.error(err);
|
||||
}
|
||||
);
|
||||
}
|
||||
} else if (state.towParmasn.dateType == 1) {
|
||||
if (
|
||||
!state.towParmasn.time?.length ||
|
||||
state.towParmasn.time?.length < 1
|
||||
) {
|
||||
message.error("请选择要导出的月份后再进行导出");
|
||||
} else {
|
||||
const monthEnd = dayjs(state.towParmasn.time[1])
|
||||
.endOf("month")
|
||||
.format("YYYY-MM-DD hh:mm:ss");
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/report/data/statistics/export/v2",
|
||||
data: {
|
||||
beginTime: dayjs(state.towParmasn.time[0]).format(
|
||||
"YYYY-MM-01 00:00:01"
|
||||
),
|
||||
endTime: monthEnd,
|
||||
dateType: state.towParmasn.dateType,
|
||||
type: state.towParmasn.type,
|
||||
},
|
||||
responseType: "blob",
|
||||
headers: {
|
||||
token: Cookies.get("token"),
|
||||
},
|
||||
}).then(
|
||||
(res) => {
|
||||
downLoad(res.data, "学习情况.xlsx");
|
||||
},
|
||||
(err) => {
|
||||
message.error(err);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
const modalChange = async () => {
|
||||
if (state.towParmasn.dateType == 1) {
|
||||
twoMonthChange(state.towParmasn.time);
|
||||
} else if (state.towParmasn.dateType == 0) {
|
||||
twoDatChange(state.towParmasn.day);
|
||||
}
|
||||
};
|
||||
const onCalendarChange = (val) => {
|
||||
dates.value = val;
|
||||
};
|
||||
@@ -301,6 +433,148 @@ export default {
|
||||
dates.value[1] && dates.value[1].diff(current, "days") > 60;
|
||||
return tooEarly || tooLate;
|
||||
};
|
||||
const onCalendarChanges = (val) => {
|
||||
datess.value = val;
|
||||
};
|
||||
const onOpenChanges = (open) => {
|
||||
if (open) {
|
||||
datess.value = [];
|
||||
hackValues.value = [];
|
||||
} else {
|
||||
hackValues.value = undefined;
|
||||
}
|
||||
};
|
||||
const disabledDates = (current) => {
|
||||
if (!datess.value || datess.value.length === 0) {
|
||||
return false;
|
||||
}
|
||||
const tooLate =
|
||||
datess.value[0] && current.diff(datess.value[0], "days") > 60;
|
||||
const tooEarly =
|
||||
datess.value[1] && datess.value[1].diff(current, "days") > 60;
|
||||
return tooEarly || tooLate;
|
||||
};
|
||||
const twoSelectChange = async (e) => {
|
||||
if (e == 1) {
|
||||
twoMonthChange(state.towParmasn.time);
|
||||
} else if (e == 0) {
|
||||
twoDatChange(state.towParmasn.day);
|
||||
}
|
||||
};
|
||||
// 获取图表2月份数据
|
||||
const twoMonthChange = async (e) => {
|
||||
if (e?.length > 0) {
|
||||
const monthEnd = dayjs(e[1])
|
||||
.endOf("month")
|
||||
.format("YYYY-MM-DD hh:mm:ss");
|
||||
const res = await api.boeuStudyDataGetStudyStaisticsList({
|
||||
beginTime: dayjs(e[0]).format("YYYY-MM-01 00:00:01"),
|
||||
endTime: monthEnd,
|
||||
dateType: state.towParmasn.dateType,
|
||||
type: state.towParmasn.type,
|
||||
});
|
||||
if (res) {
|
||||
if (
|
||||
state.towParmasn.type == 4 ||
|
||||
state.towParmasn.type == 5 ||
|
||||
state.towParmasn.type == 6
|
||||
) {
|
||||
const xData = [];
|
||||
const avgDuration = [];
|
||||
const count = [];
|
||||
const duration = [];
|
||||
res?.data?.forEach((item) => {
|
||||
xData.push(item.month);
|
||||
avgDuration.push(item.viewCount);
|
||||
count.push(item.count);
|
||||
duration.push(item.duration);
|
||||
});
|
||||
option.value.xAxis.data = xData;
|
||||
// 右侧坐标轴数据
|
||||
option.value.series[0].data = count;
|
||||
//左侧坐标轴数据
|
||||
option.value.series[1].data = avgDuration;
|
||||
option.value.series[2].data = duration;
|
||||
createEcharts2();
|
||||
} else {
|
||||
const xData = [];
|
||||
const avgDuration = [];
|
||||
const count = [];
|
||||
const duration = [];
|
||||
res?.data?.forEach((item) => {
|
||||
xData.push(item.month);
|
||||
avgDuration.push(item.avgDuration);
|
||||
count.push(item.count);
|
||||
duration.push(item.duration);
|
||||
});
|
||||
option.value.xAxis.data = xData;
|
||||
// 右侧坐标轴数据
|
||||
option.value.series[0].data = count;
|
||||
//左侧坐标轴数据
|
||||
option.value.series[1].data = avgDuration;
|
||||
option.value.series[2].data = duration;
|
||||
createEcharts2();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const twoDatChange = async (e) => {
|
||||
if (e?.length > 0) {
|
||||
const dayStart = dayjs(e[0])
|
||||
.startOf("day")
|
||||
.format("YYYY-MM-DD 00:00:01");
|
||||
const dayEnd = dayjs(e[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
|
||||
const res = await api.boeuStudyDataGetStudyStaisticsList({
|
||||
beginTime: dayStart,
|
||||
endTime: dayEnd,
|
||||
dateType: state.towParmasn.dateType,
|
||||
type: state.towParmasn.type,
|
||||
});
|
||||
if (res) {
|
||||
if (
|
||||
state.towParmasn.type == 4 ||
|
||||
state.towParmasn.type == 5 ||
|
||||
state.towParmasn.type == 6
|
||||
) {
|
||||
const xData = [];
|
||||
const avgDuration = [];
|
||||
const count = [];
|
||||
const duration = [];
|
||||
res?.data?.forEach((item) => {
|
||||
xData.push(item.month);
|
||||
avgDuration.push(item.viewCount);
|
||||
count.push(item.count);
|
||||
duration.push(item.duration);
|
||||
});
|
||||
option.value.xAxis.data = xData;
|
||||
// 右侧坐标轴数据
|
||||
option.value.series[0].data = count;
|
||||
//左侧坐标轴数据
|
||||
option.value.series[1].data = avgDuration;
|
||||
option.value.series[2].data = duration;
|
||||
createEcharts2();
|
||||
} else {
|
||||
const xData = [];
|
||||
const avgDuration = [];
|
||||
const count = [];
|
||||
const duration = [];
|
||||
res?.data?.forEach((item) => {
|
||||
xData.push(item.month);
|
||||
avgDuration.push(item.avgDuration);
|
||||
count.push(item.count);
|
||||
duration.push(item.duration);
|
||||
});
|
||||
option.value.xAxis.data = xData;
|
||||
// 右侧坐标轴数据
|
||||
option.value.series[0].data = count;
|
||||
//左侧坐标轴数据
|
||||
option.value.series[1].data = avgDuration;
|
||||
option.value.series[2].data = duration;
|
||||
createEcharts2();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// 获取第第三排第一个柱状图的数据
|
||||
const leftMonthChange = async (e) => {
|
||||
if (e?.length > 0) {
|
||||
@@ -383,7 +657,7 @@ export default {
|
||||
//第三排第一个柱状图导出数据
|
||||
const exportThree = () => {
|
||||
if (state.threeLeftType == 0) {
|
||||
if (state.threeDay.length < 1) {
|
||||
if (!state.threeDay.length || state.threeDay.length < 1) {
|
||||
message.error("请选择要导出的时间日期后再进行导出");
|
||||
} else {
|
||||
const dayStart = dayjs(state.threeDay[0])
|
||||
@@ -414,17 +688,17 @@ export default {
|
||||
);
|
||||
}
|
||||
} else if (state.threeLeftType == 1) {
|
||||
if (state.threeData.length < 1) {
|
||||
if (!state.threeTime.length || state.threeTime.length < 1) {
|
||||
message.error("请选择要导出的月份后再进行导出");
|
||||
} else {
|
||||
const monthEnd = dayjs(state.threeData[1])
|
||||
const monthEnd = dayjs(state.threeTime[1])
|
||||
.endOf("month")
|
||||
.format("YYYY-MM-DD hh:mm:ss");
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/report/data/statistics/export/v1",
|
||||
data: {
|
||||
startTime: dayjs(state.threeData[0]).format(
|
||||
startTime: dayjs(state.threeTime[0]).format(
|
||||
"YYYY-MM-01 00:00:01"
|
||||
),
|
||||
endTime: monthEnd,
|
||||
@@ -447,13 +721,146 @@ export default {
|
||||
};
|
||||
const rightChange = (e) => {
|
||||
if (e == 1) {
|
||||
// leftMonthChange(state.threeTime);
|
||||
rightMonthChange(state.forTime);
|
||||
} else if (e == 0) {
|
||||
// leftDayChange(state.threeDay);
|
||||
rightDayChange(state.forDay);
|
||||
}
|
||||
};
|
||||
// 获取第三排第二个柱状图的数据
|
||||
|
||||
const rightMonthChange = async (e) => {
|
||||
if (e?.length > 0) {
|
||||
const monthEnd = dayjs(e[1])
|
||||
.endOf("month")
|
||||
.format("YYYY-MM-DD hh:mm:ss");
|
||||
const res = await api.dataStatisticsSelectV2({
|
||||
startTime: dayjs(e[0]).format("YYYY-MM-01 00:00:01"),
|
||||
endTime: monthEnd,
|
||||
dateType: state.forRightType,
|
||||
});
|
||||
if (res) {
|
||||
const xData = [];
|
||||
const course = [];
|
||||
const project = [];
|
||||
const router = [];
|
||||
res?.data?.forEach((item) => {
|
||||
xData.push(item.xdata);
|
||||
item?.list?.forEach((iten) => {
|
||||
if (iten.name == "case") {
|
||||
course.push(iten.value);
|
||||
} else if (iten.name == "article") {
|
||||
project.push(iten.value);
|
||||
} else if (iten.name == "question") {
|
||||
router.push(iten.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
options2.value.xAxis.data = xData;
|
||||
options2.value.series[0].data = course;
|
||||
options2.value.series[1].data = project;
|
||||
options2.value.series[2].data = router;
|
||||
createEcharts4();
|
||||
}
|
||||
}
|
||||
};
|
||||
const rightDayChange = async (e) => {
|
||||
if (e?.length > 0) {
|
||||
const dayStart = dayjs(e[0])
|
||||
.startOf("day")
|
||||
.format("YYYY-MM-DD 00:00:01");
|
||||
const dayEnd = dayjs(e[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
|
||||
const res = await api.dataStatisticsSelectV2({
|
||||
startTime: dayStart,
|
||||
endTime: dayEnd,
|
||||
dateType: state.forRightType,
|
||||
});
|
||||
if (res) {
|
||||
const xData = [];
|
||||
const course = [];
|
||||
const project = [];
|
||||
const router = [];
|
||||
res?.data?.forEach((item) => {
|
||||
xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
|
||||
item?.list?.forEach((iten) => {
|
||||
if (iten.name == "case") {
|
||||
course.push(iten.value);
|
||||
} else if (iten.name == "article") {
|
||||
project.push(iten.value);
|
||||
} else if (iten.name == "question") {
|
||||
router.push(iten.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
options2.value.xAxis.data = xData;
|
||||
options2.value.series[0].data = course;
|
||||
options2.value.series[1].data = project;
|
||||
options2.value.series[2].data = router;
|
||||
createEcharts4();
|
||||
}
|
||||
}
|
||||
};
|
||||
// right 导出
|
||||
const exportRight = () => {
|
||||
if (state.forRightType == 0) {
|
||||
if (!state.forDay.length || state.forDay.length < 1) {
|
||||
message.error("请选择要导出的时间日期后再进行导出");
|
||||
} else {
|
||||
const dayStart = dayjs(state.forDay[0])
|
||||
.startOf("day")
|
||||
.format("YYYY-MM-DD 00:00:01");
|
||||
const dayEnd = dayjs(state.forDay[1])
|
||||
.endOf("day")
|
||||
.format("YYYY-MM-DD hh:mm:ss");
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/report/data/statistics/export/v2",
|
||||
data: {
|
||||
startTime: dayStart,
|
||||
endTime: dayEnd,
|
||||
dateType: state.forRightType,
|
||||
},
|
||||
responseType: "blob",
|
||||
headers: {
|
||||
token: Cookies.get("token"),
|
||||
},
|
||||
}).then(
|
||||
(res) => {
|
||||
downLoad(res.data, "学习内容.xlsx");
|
||||
},
|
||||
(err) => {
|
||||
message.error(err);
|
||||
}
|
||||
);
|
||||
}
|
||||
} else if (state.forRightType == 1) {
|
||||
if (!state.forTime.length || state.forTime.length < 1) {
|
||||
message.error("请选择要导出的月份后再进行导出");
|
||||
} else {
|
||||
const monthEnd = dayjs(state.forTime[1])
|
||||
.endOf("month")
|
||||
.format("YYYY-MM-DD hh:mm:ss");
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/report/data/statistics/export/v2",
|
||||
data: {
|
||||
startTime: dayjs(state.forTime[0]).format("YYYY-MM-01 00:00:01"),
|
||||
endTime: monthEnd,
|
||||
dateType: state.forRightType,
|
||||
},
|
||||
responseType: "blob",
|
||||
headers: {
|
||||
token: Cookies.get("token"),
|
||||
},
|
||||
}).then(
|
||||
(res) => {
|
||||
downLoad(res.data, "学习内容.xlsx");
|
||||
},
|
||||
(err) => {
|
||||
message.error(err);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
// 折线图配置项
|
||||
const option = ref({
|
||||
tooltip: {
|
||||
@@ -487,20 +894,39 @@ export default {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "访问人数",
|
||||
name: "总学习人数",
|
||||
type: "line",
|
||||
data: [],
|
||||
normal: {
|
||||
color: "#387df7", //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: "#387df7", //改变折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "访问次数",
|
||||
type: "line",
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "停留时长",
|
||||
name: "人均学习时长",
|
||||
type: "line",
|
||||
data: [],
|
||||
yAxisIndex: 1,
|
||||
normal: {
|
||||
color: "#00cecb", //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: "#00cecb", //改变折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "总学习时长",
|
||||
type: "line",
|
||||
data: [],
|
||||
yAxisIndex: 1,
|
||||
normal: {
|
||||
color: "#ffa71a", //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: "#ffa71a", //改变折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -531,24 +957,30 @@ export default {
|
||||
name: "课程数",
|
||||
data: [],
|
||||
type: "bar",
|
||||
backgroundStyle: {
|
||||
color: "#1487F9",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#1487F9", //改变折线点的颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "项目数",
|
||||
data: [],
|
||||
type: "bar",
|
||||
backgroundStyle: {
|
||||
color: "#00CECB",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#00CECB", //改变折线点的颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "学习路径图",
|
||||
data: [],
|
||||
type: "bar",
|
||||
backgroundStyle: {
|
||||
color: "#FFA71A",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#FFA71A", //改变折线点的颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
@@ -561,9 +993,9 @@ export default {
|
||||
// end: 35,
|
||||
startValue: 0,
|
||||
endValue: 5,
|
||||
// brushSelect: false,
|
||||
brushSelect: false,
|
||||
showDetail: false,
|
||||
// zoomLock: true,
|
||||
zoomLock: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -594,24 +1026,30 @@ export default {
|
||||
name: "课程数",
|
||||
data: [],
|
||||
type: "bar",
|
||||
backgroundStyle: {
|
||||
color: "#1487F9",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#1487F9", //改变折线点的颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "项目数",
|
||||
data: [],
|
||||
type: "bar",
|
||||
backgroundStyle: {
|
||||
color: "#00CECB",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#00CECB", //改变折线点的颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "学习路径图",
|
||||
data: [],
|
||||
type: "bar",
|
||||
backgroundStyle: {
|
||||
color: "#FFA71A",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#FFA71A", //改变折线点的颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
@@ -624,19 +1062,19 @@ export default {
|
||||
// end: 35,
|
||||
startValue: 0,
|
||||
endValue: 5,
|
||||
// brushSelect: false,
|
||||
brushSelect: false,
|
||||
showDetail: false,
|
||||
// zoomLock: true,
|
||||
zoomLock: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 生成echarts的方法
|
||||
const createEcharts1 = () => {
|
||||
// 图表1
|
||||
const myChart = echarts.init(surfaceRef.value);
|
||||
option.value && myChart.setOption(option.value);
|
||||
};
|
||||
// const createEcharts1 = () => {
|
||||
// // 图表1
|
||||
// const myChart = echarts.init(surfaceRef.value);
|
||||
// option.value && myChart.setOption(option.value);
|
||||
// };
|
||||
// 生成echarts的方法
|
||||
const createEcharts2 = () => {
|
||||
// 图表2
|
||||
@@ -660,11 +1098,14 @@ export default {
|
||||
const start = dayjs(new Date()).startOf("year").format("YYYY-MM");
|
||||
state.threeTime = [dayjs(start), dayjs(monthEnd)];
|
||||
state.forTime = [dayjs(start), dayjs(monthEnd)];
|
||||
state.towParmasn.time = [dayjs(start), dayjs(monthEnd)];
|
||||
leftMonthChange([dayjs(start), dayjs(monthEnd)]);
|
||||
rightMonthChange([dayjs(start), dayjs(monthEnd)]);
|
||||
twoMonthChange([dayjs(start), dayjs(monthEnd)]);
|
||||
};
|
||||
// 挂载完成
|
||||
onMounted(() => {
|
||||
createEcharts1();
|
||||
// createEcharts1();
|
||||
createEcharts2();
|
||||
createEcharts3();
|
||||
createEcharts4();
|
||||
@@ -672,6 +1113,7 @@ export default {
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
rightMonthChange,
|
||||
rightChange,
|
||||
exportThree,
|
||||
disabledDate,
|
||||
@@ -684,6 +1126,16 @@ export default {
|
||||
leftMonthChange,
|
||||
leftDayChange,
|
||||
selectChange,
|
||||
rightDayChange,
|
||||
exportRight,
|
||||
onCalendarChanges,
|
||||
onOpenChanges,
|
||||
disabledDates,
|
||||
twoMonthChange,
|
||||
twoDatChange,
|
||||
twoSelectChange,
|
||||
modalChange,
|
||||
exportTwoData,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -726,11 +1178,12 @@ export default {
|
||||
.right {
|
||||
padding: 0 15px;
|
||||
background: white;
|
||||
background: #4ea6ff;
|
||||
height: 32px;
|
||||
line-height: 34px;
|
||||
border-radius: 4px;
|
||||
color: #387df7;
|
||||
border: 1px solid #387df7;
|
||||
color: white;
|
||||
// border: 1px solid #387df7;
|
||||
cursor: pointer;
|
||||
img {
|
||||
margin-top: -3px;
|
||||
@@ -738,7 +1191,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.right:hover {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
background: rgba(64, 158, 255, 0.76);
|
||||
}
|
||||
}
|
||||
.echarts {
|
||||
@@ -842,12 +1295,11 @@ export default {
|
||||
}
|
||||
.rightTile {
|
||||
padding: 0 15px;
|
||||
background: white;
|
||||
background: #4ea6ff;
|
||||
height: 32px;
|
||||
line-height: 34px;
|
||||
border-radius: 4px;
|
||||
color: #387df7;
|
||||
border: 1px solid #387df7;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
img {
|
||||
margin-top: -3px;
|
||||
@@ -855,7 +1307,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.rightTile:hover {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
background: rgba(64, 158, 255, 0.76);
|
||||
}
|
||||
}
|
||||
.searchThree {
|
||||
@@ -874,7 +1326,6 @@ export default {
|
||||
}
|
||||
.threeMsg {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
width: 275px;
|
||||
margin-left: calc(50% - 133px);
|
||||
margin-top: 10px;
|
||||
@@ -916,7 +1367,7 @@ export default {
|
||||
padding: 15px;
|
||||
.leftEacharts {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
height: 400px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.title {
|
||||
@@ -930,12 +1381,11 @@ export default {
|
||||
}
|
||||
.rightTile {
|
||||
padding: 0 15px;
|
||||
background: white;
|
||||
background: #4ea6ff;
|
||||
height: 32px;
|
||||
line-height: 34px;
|
||||
border-radius: 4px;
|
||||
color: #387df7;
|
||||
border: 1px solid #387df7;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
img {
|
||||
margin-top: -3px;
|
||||
@@ -943,7 +1393,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.rightTile:hover {
|
||||
background: rgba(64, 158, 255, 0.2);
|
||||
background: rgba(64, 158, 255, 0.76);
|
||||
}
|
||||
}
|
||||
.searchThree {
|
||||
@@ -962,7 +1412,7 @@ export default {
|
||||
}
|
||||
.threeMsg {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
margin-top: 10px;
|
||||
width: 275px;
|
||||
margin-left: calc(50% - 133px);
|
||||
.threeMsgItem {
|
||||
|
||||
Reference in New Issue
Block a user