学习内容
-
-
+
+
导出学习内容
@@ -214,15 +262,17 @@
style="width: 100%"
format="YYYY-MM-DD"
v-model:value="forDay"
+ @change="rightDayChange"
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
/>
@@ -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 {