mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-07 09:56:44 +08:00
1927 lines
58 KiB
Vue
1927 lines
58 KiB
Vue
<template>
|
|
<!-- 营运数据概览页面! -->
|
|
|
|
<div class="operational">
|
|
<!-- <div class="echartsOne">
|
|
<div class="title">
|
|
<div class="left">用户活动趋势</div>
|
|
<div class="right">
|
|
<img src="../../assets/svg/export.png" alt="" />
|
|
<span>导出活动详情</span>
|
|
</div>
|
|
</div>
|
|
<div class="search">
|
|
<div class="left">
|
|
<div class="leftItem">
|
|
<a-select
|
|
style="width: 100%"
|
|
placeholder="请选择模块"
|
|
allowClear
|
|
></a-select>
|
|
</div>
|
|
<div class="leftItem">
|
|
<a-select
|
|
style="width: 100%"
|
|
placeholder="请选择日期格式"
|
|
allowClear
|
|
></a-select>
|
|
</div>
|
|
<div class="leftItem">
|
|
<a-range-picker
|
|
style="width: 100%"
|
|
format="YYYY-MM-DD"
|
|
separator="至"
|
|
:placeholder="[' 开始时间', ' 结束时间']"
|
|
/>
|
|
</div>
|
|
<div class="leftItem">
|
|
<a-select
|
|
style="width: 100%"
|
|
placeholder="请选择入口"
|
|
allowClear
|
|
></a-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="echarts" ref="surfaceRef"></div>
|
|
<div class="msg">
|
|
<div class="item">
|
|
<div class="start" />
|
|
<div class="radio" />
|
|
<div class="end" />
|
|
<div class="text">停留时长</div>
|
|
</div>
|
|
<div class="item1">
|
|
<div class="start" />
|
|
<div class="radio" />
|
|
<div class="end" />
|
|
<div class="text">访问人数</div>
|
|
</div>
|
|
<div class="item2">
|
|
<div class="start" />
|
|
<div class="radio" />
|
|
<div class="end" />
|
|
<div class="text">访问次数</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div class="echartsTwo">
|
|
<div class="title">
|
|
<div class="left">学习情况</div>
|
|
<div class="right" @click="exportTwoData" v-show="towParmasn.type != 2">
|
|
<img src="../../assets/images/coursewareManage/export1.png" alt="" />
|
|
<span>导出学习情况</span>
|
|
</div>
|
|
</div>
|
|
<div class="search">
|
|
<div class="left">
|
|
<div class="leftItem">
|
|
<a-select
|
|
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,
|
|
},
|
|
]"
|
|
></a-select>
|
|
</div>
|
|
<div class="leftItem">
|
|
<a-select
|
|
style="width: 112px"
|
|
placeholder="请选择日期格式"
|
|
@change="twoSelectChange"
|
|
:options="[
|
|
{ label: '按日查找', value: 1 },
|
|
{ label: '按月查找', value: 2 },
|
|
]"
|
|
v-model:value="towParmasn.dateType"
|
|
></a-select>
|
|
</div>
|
|
<div class="leftItem">
|
|
<div class="timeItemSearch">
|
|
<a-range-picker
|
|
v-if="towParmasn.dateType == 1"
|
|
style="width: 100%"
|
|
format="YYYY-MM-DD"
|
|
v-model:value="towParmasn.day"
|
|
separator="至"
|
|
@change="twoDatChange"
|
|
:placeholder="[' 开始时间', ' 结束时间']"
|
|
/>
|
|
<a-range-picker
|
|
v-if="towParmasn.dateType == 2"
|
|
style="width: 100%"
|
|
v-model:value="towParmasn.time"
|
|
@change="twoMonthChange"
|
|
format="YYYY-MM"
|
|
separator="至"
|
|
:placeholder="[' 开始时间', ' 结束时间']"
|
|
picker="month"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="leftItem">
|
|
<a-checkbox-group style="margin-left:20px" v-model:value="checkedList" :options="plainOptions" @change="checkboxChange" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="echarts" ref="surface1Ref"></div>
|
|
<div class="msg">
|
|
<div class="item">
|
|
<div class="start" />
|
|
<div class="radio" />
|
|
<div class="end" />
|
|
<div class="text">{{chartLabel.one}}</div>
|
|
</div>
|
|
<div class="item2">
|
|
<div class="start" />
|
|
<div class="radio" />
|
|
<div class="end" />
|
|
<div class="text">{{chartLabel.two}}</div>
|
|
</div>
|
|
<div class="item1">
|
|
<div class="start" />
|
|
<div class="radio" />
|
|
<div class="end" />
|
|
<div class="text">{{chartLabel.three}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="echartsThree">
|
|
<div class="left">
|
|
<div class="title">
|
|
<div class="leftTile">
|
|
学习内容 <span @click="eChartClickLeft"><img src="../../assets/all.png" alt="" style="width:14px;height:14px;cursor: pointer;"></span>
|
|
</div>
|
|
<div class="rightTile" @click="exportThree">
|
|
<img
|
|
src="../../assets/images/coursewareManage/export1.png"
|
|
alt=""
|
|
/>
|
|
<span>导出学习内容</span>
|
|
</div>
|
|
</div>
|
|
<div class="searchThree">
|
|
<div class="leftSearch">
|
|
<div class="leftItemSearch">
|
|
<a-select
|
|
style="width: 100%"
|
|
placeholder="请选择日期格式"
|
|
@change="selectChange"
|
|
:options="[
|
|
{ label: '按日查找', value: 0 },
|
|
{ label: '按月查找', value: 1 },
|
|
]"
|
|
v-model:value="threeLeftType"
|
|
></a-select>
|
|
</div>
|
|
<div class="timeItemSearch">
|
|
<a-range-picker
|
|
v-if="threeLeftType == 0"
|
|
style="width: 100%"
|
|
format="YYYY-MM-DD"
|
|
v-model:value="threeDay"
|
|
separator="至"
|
|
@change="leftDayChange"
|
|
:placeholder="[' 开始时间', ' 结束时间']"
|
|
@openChange="onOpenChange"
|
|
@calendarChange="onCalendarChange"
|
|
/>
|
|
<a-range-picker
|
|
v-if="threeLeftType == 1"
|
|
style="width: 100%"
|
|
v-model:value="threeTime"
|
|
@change="leftMonthChange"
|
|
format="YYYY-MM"
|
|
separator="至"
|
|
:placeholder="[' 开始时间', ' 结束时间']"
|
|
picker="month"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="leftEacharts" ref="surface2Ref"></div>
|
|
<div class="threeMsg">
|
|
<div class="threeMsgItem">
|
|
<div class="classNum" />
|
|
<div class="MsgItemText">课程数</div>
|
|
</div>
|
|
<div class="threeMsgItem">
|
|
<div class="projectNum" />
|
|
<div class="MsgItemText">项目数</div>
|
|
</div>
|
|
<div class="threeMsgItem">
|
|
<div class="study" />
|
|
<div class="MsgItemText">学习路径图</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="title">
|
|
<div class="leftTile">
|
|
学习内容 <span @click="eChartClickRight"><img src="../../assets/all.png" alt="" style="width:14px;height:14px;cursor: pointer;"></span>
|
|
</div>
|
|
<div class="rightTile" @click="exportRight">
|
|
<img
|
|
src="../../assets/images/coursewareManage/export1.png"
|
|
alt=""
|
|
/>
|
|
<span>导出学习内容</span>
|
|
</div>
|
|
</div>
|
|
<div class="searchThree">
|
|
<div class="leftSearch">
|
|
<div class="leftItemSearch">
|
|
<a-select
|
|
style="width: 100%"
|
|
placeholder="请选择日期格式"
|
|
@change="rightChange"
|
|
:options="[
|
|
{ label: '按日查找', value: 0 },
|
|
{ label: '按月查找', value: 1 },
|
|
]"
|
|
v-model:value="forRightType"
|
|
></a-select>
|
|
</div>
|
|
<div class="timeItemSearch">
|
|
<a-range-picker
|
|
v-if="forRightType == 0"
|
|
style="width: 100%"
|
|
format="YYYY-MM-DD"
|
|
v-model:value="forDay"
|
|
@change="rightDayChange"
|
|
separator="至"
|
|
:placeholder="[' 开始时间', ' 结束时间']"
|
|
/>
|
|
<a-range-picker
|
|
v-if="forRightType == 1"
|
|
style="width: 100%"
|
|
v-model:value="forTime"
|
|
format="YYYY-MM"
|
|
separator="至"
|
|
@change="rightMonthChange"
|
|
:placeholder="[' 开始时间', ' 结束时间']"
|
|
picker="month"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="leftEacharts" ref="surface3Ref"></div>
|
|
<div class="threeMsg">
|
|
<div class="threeMsgItem">
|
|
<div class="classNum" />
|
|
<div class="MsgItemText">案例</div>
|
|
</div>
|
|
<div class="threeMsgItem">
|
|
<div class="projectNum" />
|
|
<div class="MsgItemText">文章</div>
|
|
</div>
|
|
<div class="threeMsgItem">
|
|
<div class="study" />
|
|
<div class="MsgItemText">问答</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a-modal v-model:visible="modalFlag" title="学习内容" style="width: 1100px">
|
|
<div style="height: 500px" ref="surface4Ref"></div>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import "dayjs/locale/zh-cn";
|
|
import { onMounted, ref, reactive, toRefs } from "vue";
|
|
import * as api from "../../api/indexProject";
|
|
import dayjs from "dayjs";
|
|
import axios from "axios";
|
|
import Cookies from "vue-cookies";
|
|
import downLoad from "../../utils/downLoad";
|
|
import { message } from "ant-design-vue";
|
|
export default {
|
|
name: "OperationaL",
|
|
setup() {
|
|
const state = reactive({
|
|
threeLeftType: 1,
|
|
threeTime: [],
|
|
threeDay: [],
|
|
threeXData: [],
|
|
forRightType: 1,
|
|
forTime: [],
|
|
forDay: [],
|
|
towParmasn: {
|
|
type: 1,
|
|
dateType: 2,
|
|
time: [],
|
|
day: [],
|
|
},
|
|
modalFlag: false,
|
|
checkedList: ['学习人数', '总学习时长'],
|
|
limitCheckedList: ['学习人数', '总学习时长'],
|
|
plainOptions: ['学习人数', '总学习时长', '人均学习时长'],
|
|
chartLabel: {
|
|
one: "学习人数",
|
|
two: "总学习时长",
|
|
three: "人均学习时长",
|
|
}
|
|
});
|
|
const surfaceRef = ref(null);
|
|
const surface1Ref = ref(null);
|
|
const surface2Ref = ref(null);
|
|
const surface3Ref = ref(null);
|
|
const surface4Ref = ref(null);
|
|
const dates = ref();
|
|
const hackValue = ref();
|
|
|
|
const datess = ref();
|
|
const hackValues = ref();
|
|
|
|
const checkboxChange = (event) => {
|
|
console.log("checkboxChange event:",event);
|
|
if(event.length>2){
|
|
message.warning("最多选两个");
|
|
console.log("checkboxChange checkedList:",state.checkedList);
|
|
state.checkedList = state.limitCheckedList;
|
|
}else{
|
|
state.limitCheckedList = event;
|
|
// modalChange();
|
|
if (state.towParmasn.dateType == 2) {
|
|
twoMonthChange(state.towParmasn.time);
|
|
} else if (state.towParmasn.dateType == 1) {
|
|
twoDatChange(state.towParmasn.day);
|
|
}
|
|
}
|
|
};
|
|
|
|
const eChartClickRight = async () => {
|
|
state.modalFlag = true;
|
|
|
|
if (state.forRightType == 0) {
|
|
if (state.forDay?.length > 0) {
|
|
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");
|
|
const res = await api.dataStatisticsSelectV2({
|
|
startTime: dayStart,
|
|
endTime: dayEnd,
|
|
dateType: state.forRightType,
|
|
});
|
|
if (res) {
|
|
const xData = [];
|
|
const course = [];
|
|
const project = [];
|
|
const router = [];
|
|
res?.data?.result.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);
|
|
}
|
|
});
|
|
});
|
|
optionsBig.value.xAxis.data = xData;
|
|
optionsBig.value.series[0].data = course;
|
|
optionsBig.value.series[1].data = project;
|
|
optionsBig.value.series[2].data = router;
|
|
const myChart5 = echarts.init(surface4Ref.value);
|
|
optionsBig.value && myChart5.setOption(optionsBig.value);
|
|
}
|
|
}
|
|
} else if (state.forRightType == 1) {
|
|
if (state.forTime?.length > 0) {
|
|
const monthEnd = dayjs(state.forTime[1])
|
|
.endOf("month")
|
|
.format("YYYY-MM-DD hh:mm:ss");
|
|
const res = await api.dataStatisticsSelectV2({
|
|
startTime: dayjs(state.forTime[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?.result.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);
|
|
}
|
|
});
|
|
});
|
|
optionsBig.value.xAxis.data = xData;
|
|
optionsBig.value.series[0].data = course;
|
|
optionsBig.value.series[1].data = project;
|
|
optionsBig.value.series[2].data = router;
|
|
const myChart5 = echarts.init(surface4Ref.value);
|
|
optionsBig.value && myChart5.setOption(optionsBig.value);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const eChartClickLeft = async () => {
|
|
state.modalFlag = true;
|
|
if (state.threeLeftType == 1) {
|
|
if (state.threeTime?.length > 0) {
|
|
const monthEnd = dayjs(state.threeTime[1])
|
|
.endOf("month")
|
|
.format("YYYY-MM-DD hh:mm:ss");
|
|
const res = await api.dataStatisticsSelectV1({
|
|
startTime: dayjs(state.threeTime[0]).format("YYYY-MM-01 00:00:01"),
|
|
endTime: monthEnd,
|
|
dateType: state.threeLeftType,
|
|
});
|
|
if (res) {
|
|
const xData = [];
|
|
const course = [];
|
|
const project = [];
|
|
const router = [];
|
|
res?.data?.result.forEach((item) => {
|
|
xData.push(item.xdata);
|
|
item?.list?.forEach((iten) => {
|
|
if (iten.name == "course") {
|
|
course.push(iten.value);
|
|
} else if (iten.name == "project") {
|
|
project.push(iten.value);
|
|
} else if (iten.name == "router") {
|
|
router.push(iten.value);
|
|
}
|
|
});
|
|
});
|
|
options1Big.value.xAxis.data = xData;
|
|
options1Big.value.series[0].data = course;
|
|
options1Big.value.series[1].data = project;
|
|
options1Big.value.series[2].data = router;
|
|
const myChart5 = echarts.init(surface4Ref.value);
|
|
optionsBig.value && myChart5.setOption(options1Big.value);
|
|
}
|
|
}
|
|
} else if (state.threeLeftType == 0) {
|
|
if (state.threeDay?.length > 0) {
|
|
const dayStart = dayjs(state.threeDay[0])
|
|
.startOf("day")
|
|
.format("YYYY-MM-DD 00:00:01");
|
|
const dayEnd = dayjs(state.threeDay[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
|
|
const res = await api.dataStatisticsSelectV1({
|
|
startTime: dayStart,
|
|
endTime: dayEnd,
|
|
dateType: state.threeLeftType,
|
|
});
|
|
if (res) {
|
|
const xData = [];
|
|
const course = [];
|
|
const project = [];
|
|
const router = [];
|
|
res?.data?.result.forEach((item) => {
|
|
xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
|
|
item?.list?.forEach((iten) => {
|
|
if (iten.name == "course") {
|
|
course.push(iten.value);
|
|
} else if (iten.name == "project") {
|
|
project.push(iten.value);
|
|
} else if (iten.name == "router") {
|
|
router.push(iten.value);
|
|
}
|
|
});
|
|
});
|
|
options1Big.value.xAxis.data = xData;
|
|
options1Big.value.series[0].data = course;
|
|
options1Big.value.series[1].data = project;
|
|
options1Big.value.series[2].data = router;
|
|
const myChart5 = echarts.init(surface4Ref.value);
|
|
optionsBig.value && myChart5.setOption(options1Big.value);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const exportTwoData = async () => {
|
|
if (state.towParmasn.dateType == 1) {
|
|
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 == 2) {
|
|
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/boeu/studyData/exportDetailAll",
|
|
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 () => {
|
|
console.log("modalChange type:",state.towParmasn.type);
|
|
if(state.towParmasn.type==2 || state.towParmasn.type==3){
|
|
state.chartLabel.one = "总阅读人数";
|
|
state.chartLabel.two = "总阅读时长";
|
|
state.chartLabel.three = "人均阅读时长";
|
|
state.plainOptions = ["总阅读人数","总阅读时长","人均阅读时长"];
|
|
state.checkedList = ["总阅读人数","总阅读时长"];
|
|
state.limitCheckedList = ["总阅读人数","总阅读时长"];
|
|
}else if(state.towParmasn.type==4){
|
|
state.chartLabel.one = "总查看人数";
|
|
state.chartLabel.two = "总提问人数";
|
|
state.chartLabel.three = "总回答人数";
|
|
state.plainOptions = ["总查看人数","总提问人数","总回答人数"];
|
|
state.checkedList = ["总查看人数","总提问人数"];
|
|
state.limitCheckedList = ["总查看人数","总提问人数"];
|
|
}else {
|
|
state.chartLabel.one = "学习人数";
|
|
state.chartLabel.two = "总学习时长";
|
|
state.chartLabel.three = "人均学习时长";
|
|
state.plainOptions = ["学习人数","总学习时长","人均学习时长"];
|
|
state.checkedList = ["学习人数","总学习时长"];
|
|
state.limitCheckedList = ["学习人数","总学习时长"];
|
|
}
|
|
option.value.series[0].name = state.chartLabel.one;
|
|
option.value.series[1].name = state.chartLabel.two;
|
|
option.value.series[2].name = state.chartLabel.two;
|
|
if (state.towParmasn.dateType == 2) {
|
|
twoMonthChange(state.towParmasn.time);
|
|
} else if (state.towParmasn.dateType == 1) {
|
|
twoDatChange(state.towParmasn.day);
|
|
}
|
|
};
|
|
const onCalendarChange = (val) => {
|
|
dates.value = val;
|
|
};
|
|
const onOpenChange = (open) => {
|
|
if (open) {
|
|
dates.value = [];
|
|
hackValue.value = [];
|
|
} else {
|
|
hackValue.value = undefined;
|
|
}
|
|
};
|
|
const disabledDate = (current) => {
|
|
if (!dates.value || dates.value.length === 0) {
|
|
return false;
|
|
}
|
|
const tooLate =
|
|
dates.value[0] && current.diff(dates.value[0], "days") > 60;
|
|
const tooEarly =
|
|
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 == 2) {
|
|
twoMonthChange(state.towParmasn.time);
|
|
} else if (e == 1) {
|
|
twoDatChange(state.towParmasn.day);
|
|
}
|
|
};
|
|
// 获取图表2月份数据
|
|
const twoMonthChange = async (e) => {
|
|
console.log("twoMonthChange e:",e);
|
|
// if (e?.length > 0) {
|
|
if (true) {
|
|
const monthEnd = dayjs(state.towParmasn.time[1])
|
|
.endOf("month")
|
|
.format("YYYY-MM-DD 23:59:59");
|
|
const res = await api.boeuStudyDataGetStudyStaisticsList({
|
|
beginTime: dayjs(state.towParmasn.time[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?.result.forEach((item) => {
|
|
xData.push(item.day);
|
|
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;
|
|
option.value.series[0].data = [];
|
|
option.value.series[1].data = [];
|
|
option.value.series[2].data = [];
|
|
console.log("checkedList:",state.checkedList);
|
|
for(let i=0;i<state.checkedList.length;i++){
|
|
if(state.checkedList[i]=="学习人数" || state.checkedList[i]=="总阅读人数" || state.checkedList[i]=="总查看人数"){
|
|
option.value.series[0].data = count;
|
|
option.value.series[0].name = state.checkedList[i];
|
|
}
|
|
if(state.checkedList[i]=="人均学习时长" || state.checkedList[i]=="人均阅读时长" || state.checkedList[i]=="总回答人数"){
|
|
option.value.series[1].data = avgDuration;
|
|
option.value.series[1].yAxisIndex = i;
|
|
option.value.series[1].name = state.checkedList[i];
|
|
}
|
|
if(state.checkedList[i]=="总学习时长" || state.checkedList[i]=="总阅读时长" || state.checkedList[i]=="总提问人数"){
|
|
option.value.series[2].data = duration;
|
|
option.value.series[2].yAxisIndex = i;
|
|
option.value.series[2].name = state.checkedList[i];
|
|
}
|
|
}
|
|
createEcharts2();
|
|
} else {
|
|
const xData = [];
|
|
const avgDuration = [];
|
|
const count = [];
|
|
const duration = [];
|
|
res?.data?.result.forEach((item) => {
|
|
xData.push(item.day);
|
|
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;
|
|
option.value.series[0].data = [];
|
|
option.value.series[1].data = [];
|
|
option.value.series[2].data = [];
|
|
console.log("checkedList:",state.checkedList);
|
|
console.log("666 duration:",duration);
|
|
for(let i=0;i<state.checkedList.length;i++){
|
|
if(state.checkedList[i]=="学习人数" || state.checkedList[i]=="总阅读人数" || state.checkedList[i]=="总查看人数"){
|
|
option.value.series[0].data = count;
|
|
option.value.series[0].name = state.checkedList[i];
|
|
}
|
|
if(state.checkedList[i]=="人均学习时长" || state.checkedList[i]=="人均阅读时长" || state.checkedList[i]=="总回答人数"){
|
|
option.value.series[1].data = avgDuration;
|
|
option.value.series[1].yAxisIndex = i;
|
|
option.value.series[1].name = state.checkedList[i];
|
|
}
|
|
if(state.checkedList[i]=="总学习时长" || state.checkedList[i]=="总阅读时长" || state.checkedList[i]=="总提问人数"){
|
|
option.value.series[2].data = duration;
|
|
option.value.series[2].yAxisIndex = i;
|
|
option.value.series[2].name = state.checkedList[i];
|
|
}
|
|
}
|
|
console.log("123:",option.value.series)
|
|
createEcharts2();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const twoDatChange = async (e) => {
|
|
console.log("twoDatChange e:",e);
|
|
// if (e?.length > 0) {
|
|
if (true) {
|
|
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 23:59:59");
|
|
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?.result.forEach((item) => {
|
|
xData.push(item.day);
|
|
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;
|
|
option.value.series[0].data = [];
|
|
option.value.series[1].data = [];
|
|
option.value.series[2].data = [];
|
|
console.log("checkedList:",state.checkedList);
|
|
for(let i=0;i<state.checkedList.length;i++){
|
|
if(state.checkedList[i]=="学习人数" || state.checkedList[i]=="总阅读人数" || state.checkedList[i]=="总查看人数"){
|
|
option.value.series[0].data = count;
|
|
option.value.series[0].name = state.checkedList[i];
|
|
}
|
|
if(state.checkedList[i]=="人均学习时长" || state.checkedList[i]=="人均阅读时长" || state.checkedList[i]=="总回答人数"){
|
|
option.value.series[1].data = avgDuration;
|
|
option.value.series[1].yAxisIndex = i;
|
|
option.value.series[1].name = state.checkedList[i];
|
|
}
|
|
if(state.checkedList[i]=="总学习时长" || state.checkedList[i]=="总阅读时长" || state.checkedList[i]=="总提问人数"){
|
|
option.value.series[2].data = duration;
|
|
option.value.series[2].yAxisIndex = i;
|
|
option.value.series[2].name = state.checkedList[i];
|
|
}
|
|
}
|
|
createEcharts2();
|
|
} else {
|
|
const xData = [];
|
|
const avgDuration = [];
|
|
const count = [];
|
|
const duration = [];
|
|
res?.data?.result.forEach((item) => {
|
|
xData.push(item.day);
|
|
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;
|
|
option.value.series[0].data = [];
|
|
option.value.series[1].data = [];
|
|
option.value.series[2].data = [];
|
|
console.log("checkedList:",state.checkedList);
|
|
for(let i=0;i<state.checkedList.length;i++){
|
|
if(state.checkedList[i]=="学习人数" || state.checkedList[i]=="总阅读人数" || state.checkedList[i]=="总查看人数"){
|
|
option.value.series[0].data = count;
|
|
option.value.series[0].name = state.checkedList[i];
|
|
}
|
|
if(state.checkedList[i]=="人均学习时长" || state.checkedList[i]=="人均阅读时长" || state.checkedList[i]=="总回答人数"){
|
|
option.value.series[1].data = avgDuration;
|
|
option.value.series[1].yAxisIndex = i;
|
|
option.value.series[1].name = state.checkedList[i];
|
|
}
|
|
if(state.checkedList[i]=="总学习时长" || state.checkedList[i]=="总阅读时长" || state.checkedList[i]=="总提问人数"){
|
|
option.value.series[2].data = duration;
|
|
option.value.series[2].yAxisIndex = i;
|
|
option.value.series[2].name = state.checkedList[i];
|
|
}
|
|
}
|
|
createEcharts2();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
// 获取第第三排第一个柱状图的数据
|
|
const leftMonthChange = async (e) => {
|
|
if (e?.length > 0) {
|
|
const monthEnd = dayjs(e[1])
|
|
.endOf("month")
|
|
.format("YYYY-MM-DD hh:mm:ss");
|
|
const res = await api.dataStatisticsSelectV1({
|
|
startTime: dayjs(e[0]).format("YYYY-MM-01 00:00:01"),
|
|
endTime: monthEnd,
|
|
dateType: state.threeLeftType,
|
|
});
|
|
if (res) {
|
|
const xData = [];
|
|
const course = [];
|
|
const project = [];
|
|
const router = [];
|
|
res?.data?.result.forEach((item) => {
|
|
xData.push(item.xdata);
|
|
item?.list?.forEach((iten) => {
|
|
if (iten.name == "course") {
|
|
course.push(iten.value);
|
|
} else if (iten.name == "project") {
|
|
project.push(iten.value);
|
|
} else if (iten.name == "router") {
|
|
router.push(iten.value);
|
|
}
|
|
});
|
|
});
|
|
options1.value.xAxis.data = xData;
|
|
options1.value.series[0].data = course;
|
|
options1.value.series[1].data = project;
|
|
options1.value.series[2].data = router;
|
|
createEcharts3();
|
|
}
|
|
}
|
|
};
|
|
const leftDayChange = 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.dataStatisticsSelectV1({
|
|
startTime: dayStart,
|
|
endTime: dayEnd,
|
|
dateType: state.threeLeftType,
|
|
});
|
|
if (res) {
|
|
const xData = [];
|
|
const course = [];
|
|
const project = [];
|
|
const router = [];
|
|
res?.data?.result.forEach((item) => {
|
|
xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
|
|
item?.list?.forEach((iten) => {
|
|
if (iten.name == "course") {
|
|
course.push(iten.value);
|
|
} else if (iten.name == "project") {
|
|
project.push(iten.value);
|
|
} else if (iten.name == "router") {
|
|
router.push(iten.value);
|
|
}
|
|
});
|
|
});
|
|
options1.value.xAxis.data = xData;
|
|
options1.value.series[0].data = course;
|
|
options1.value.series[1].data = project;
|
|
options1.value.series[2].data = router;
|
|
createEcharts3();
|
|
}
|
|
}
|
|
};
|
|
const selectChange = async (e) => {
|
|
if (e == 1) {
|
|
leftMonthChange(state.threeTime);
|
|
} else if (e == 0) {
|
|
leftDayChange(state.threeDay);
|
|
}
|
|
};
|
|
//第三排第一个柱状图导出数据
|
|
const exportThree = () => {
|
|
if (state.threeLeftType == 0) {
|
|
if (!state.threeDay.length || state.threeDay.length < 1) {
|
|
message.error("请选择要导出的时间日期后再进行导出");
|
|
} else {
|
|
const dayStart = dayjs(state.threeDay[0])
|
|
.startOf("day")
|
|
.format("YYYY-MM-DD 00:00:01");
|
|
const dayEnd = dayjs(state.threeDay[1])
|
|
.endOf("day")
|
|
.format("YYYY-MM-DD hh:mm:ss");
|
|
axios({
|
|
method: "post",
|
|
url: "/report/data/statistics/export/v1",
|
|
data: {
|
|
startTime: dayStart,
|
|
endTime: dayEnd,
|
|
dateType: state.threeLeftType,
|
|
},
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then(
|
|
(res) => {
|
|
downLoad(res.data, "学习内容.xlsx");
|
|
},
|
|
(err) => {
|
|
message.error(err);
|
|
}
|
|
);
|
|
}
|
|
} else if (state.threeLeftType == 1) {
|
|
if (!state.threeTime.length || state.threeTime.length < 1) {
|
|
message.error("请选择要导出的月份后再进行导出");
|
|
} else {
|
|
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.threeTime[0]).format(
|
|
"YYYY-MM-01 00:00:01"
|
|
),
|
|
endTime: monthEnd,
|
|
dateType: state.threeLeftType,
|
|
},
|
|
responseType: "blob",
|
|
headers: {
|
|
token: Cookies.get("token"),
|
|
},
|
|
}).then(
|
|
(res) => {
|
|
downLoad(res.data, "学习内容.xlsx");
|
|
},
|
|
(err) => {
|
|
message.error(err);
|
|
}
|
|
);
|
|
}
|
|
}
|
|
};
|
|
const rightChange = (e) => {
|
|
if (e == 1) {
|
|
rightMonthChange(state.forTime);
|
|
} else if (e == 0) {
|
|
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?.result.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?.result.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: {
|
|
trigger: "axis",
|
|
},
|
|
grid: {
|
|
top: "6%",
|
|
left: "0%",
|
|
right: "0%",
|
|
bottom: "2%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: [],
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
axisLine: {
|
|
show: true,
|
|
},
|
|
},
|
|
{
|
|
type: "value",
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "总学习人数",
|
|
type: "line",
|
|
data: [],
|
|
normal: {
|
|
color: "#387df7", //改变折线点的颜色
|
|
lineStyle: {
|
|
color: "#387df7", //改变折线颜色
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "人均学习时长",
|
|
type: "line",
|
|
data: [],
|
|
yAxisIndex: 1,
|
|
normal: {
|
|
color: "#00cecb", //改变折线点的颜色
|
|
lineStyle: {
|
|
color: "#00cecb", //改变折线颜色
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "总学习时长",
|
|
type: "line",
|
|
data: [],
|
|
yAxisIndex: 1,
|
|
normal: {
|
|
color: "#ffa71a", //改变折线点的颜色
|
|
lineStyle: {
|
|
color: "#ffa71a", //改变折线颜色
|
|
},
|
|
},
|
|
},
|
|
],
|
|
});
|
|
// 柱状图1配置项
|
|
const options1 = ref({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
grid: {
|
|
top: "6%",
|
|
left: "0%",
|
|
right: "0%",
|
|
bottom: "15%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: [],
|
|
axisLabel: {
|
|
interval: 0,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: "课程数",
|
|
data: [],
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#1487F9", //改变折线点的颜色
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "项目数",
|
|
data: [],
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#00CECB", //改变折线点的颜色
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "学习路径图",
|
|
data: [],
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#FFA71A", //改变折线点的颜色
|
|
},
|
|
},
|
|
},
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: "slider",
|
|
show: true,
|
|
xAxisIndex: [0],
|
|
// start: 1,
|
|
// end: 35,
|
|
startValue: 0,
|
|
endValue: 5,
|
|
brushSelect: false,
|
|
showDetail: false,
|
|
zoomLock: true,
|
|
},
|
|
],
|
|
});
|
|
// 柱状图2 配置项
|
|
const options2 = ref({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
grid: {
|
|
top: "6%",
|
|
left: "0%",
|
|
right: "0%",
|
|
bottom: "15%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: [],
|
|
axisLabel: {
|
|
interval: 0,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: "案例",
|
|
data: [],
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#1487F9", //改变折线点的颜色
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "文章",
|
|
data: [],
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#00CECB", //改变折线点的颜色
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "问答",
|
|
data: [],
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#FFA71A", //改变折线点的颜色
|
|
},
|
|
},
|
|
},
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: "slider",
|
|
show: true,
|
|
xAxisIndex: [0],
|
|
// start: 1,
|
|
// end: 35,
|
|
startValue: 0,
|
|
endValue: 5,
|
|
brushSelect: false,
|
|
showDetail: false,
|
|
zoomLock: true,
|
|
},
|
|
],
|
|
});
|
|
|
|
const optionsBig = ref({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
grid: {
|
|
top: "6%",
|
|
left: "0%",
|
|
right: "0%",
|
|
bottom: "15%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: [],
|
|
// axisLabel: {
|
|
// interval: 0,
|
|
// },
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: "案例",
|
|
data: [],
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#1487F9", //改变折线点的颜色
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "文章",
|
|
data: [],
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#00CECB", //改变折线点的颜色
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "问答",
|
|
data: [],
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#FFA71A", //改变折线点的颜色
|
|
},
|
|
},
|
|
},
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: "slider",
|
|
show: true,
|
|
xAxisIndex: [0],
|
|
// start: 1,
|
|
// end: 35,
|
|
// startValue: 0,
|
|
// endValue: 5,
|
|
// brushSelect: false,
|
|
showDetail: false,
|
|
// zoomLock: true,
|
|
},
|
|
],
|
|
});
|
|
const options1Big = ref({
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
grid: {
|
|
top: "6%",
|
|
left: "0%",
|
|
right: "0%",
|
|
bottom: "15%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: [],
|
|
// axisLabel: {
|
|
// interval: 0,
|
|
// },
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: "课程数",
|
|
data: [],
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#1487F9", //改变折线点的颜色
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "项目数",
|
|
data: [],
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#00CECB", //改变折线点的颜色
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "学习路径图",
|
|
data: [],
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#FFA71A", //改变折线点的颜色
|
|
},
|
|
},
|
|
},
|
|
],
|
|
dataZoom: [
|
|
{
|
|
type: "slider",
|
|
show: true,
|
|
xAxisIndex: [0],
|
|
// start: 1,
|
|
// end: 35,
|
|
// startValue: 0,
|
|
// endValue: 5,
|
|
// brushSelect: false,
|
|
showDetail: false,
|
|
// zoomLock: true,
|
|
},
|
|
],
|
|
});
|
|
// 生成echarts的方法
|
|
// const createEcharts1 = () => {
|
|
// // 图表1
|
|
// const myChart = echarts.init(surfaceRef.value);
|
|
// option.value && myChart.setOption(option.value);
|
|
// };
|
|
// 生成echarts的方法
|
|
const createEcharts2 = () => {
|
|
// 图表2
|
|
const myChart1 = echarts.init(surface1Ref.value);
|
|
option.value && myChart1.setOption(option.value);
|
|
window.addEventListener("resize", () => {
|
|
myChart1.resize();
|
|
});
|
|
};
|
|
// 生成echarts的方法
|
|
const createEcharts3 = () => {
|
|
// 图表3左侧图表
|
|
const myChart2 = echarts.init(surface2Ref.value);
|
|
options1.value && myChart2.setOption(options1.value);
|
|
window.addEventListener("resize", () => {
|
|
myChart2.resize();
|
|
});
|
|
};
|
|
// 生成echarts的方法
|
|
const createEcharts4 = () => {
|
|
// 图表3 右侧图表
|
|
const myChart3 = echarts.init(surface3Ref.value);
|
|
options2.value && myChart3.setOption(options2.value);
|
|
window.addEventListener("resize", () => {
|
|
myChart3.resize();
|
|
});
|
|
};
|
|
const initTime = () => {
|
|
// console.log("initTime:",dayjs(new Date()).year()+"-"+(dayjs(new Date()).month()));
|
|
// const monthEnd = dayjs(new Date()).endOf("year").format("YYYY-MM");
|
|
var year = dayjs(new Date()).year();
|
|
var month = dayjs(new Date()).month()+1;
|
|
console.log("initTime year:",year,"month:",month);
|
|
var year1 = year;
|
|
var month1 = parseInt(month) - 5;
|
|
if(month1<=0){
|
|
year1 = parseInt(year1) - 1;
|
|
month1 = 12 - (Math.abs(month1)%12);
|
|
}
|
|
console.log("initTime year1:",year1,"month1:",month1);
|
|
const monthEnd = dayjs(new Date()).year()+"-"+(dayjs(new Date()).month()+1);
|
|
// const start = dayjs(new Date()).startOf("year").format("YYYY-MM");
|
|
const start = year1 + "-" + month1;
|
|
state.threeTime = [dayjs(start), dayjs(monthEnd)];
|
|
state.forTime = [dayjs(start), dayjs(monthEnd)];
|
|
state.towParmasn.time = [dayjs(start), dayjs(monthEnd)];
|
|
state.towParmasn.day = [dayjs( year + "-" + month + "-" + "01" ), dayjs(monthEnd)];
|
|
state.threeDay = [dayjs( year + "-" + month + "-" + "01" ), dayjs(monthEnd)];
|
|
state.forDay = [dayjs( year + "-" + month + "-" + "01" ), dayjs(monthEnd)];
|
|
leftMonthChange([dayjs(start), dayjs(monthEnd)]);
|
|
rightMonthChange([dayjs(start), dayjs(monthEnd)]);
|
|
twoMonthChange([dayjs(start), dayjs(monthEnd)]);
|
|
};
|
|
// 挂载完成
|
|
onMounted(() => {
|
|
// createEcharts1();
|
|
createEcharts2();
|
|
createEcharts3();
|
|
createEcharts4();
|
|
initTime();
|
|
});
|
|
return {
|
|
...toRefs(state),
|
|
checkboxChange,
|
|
eChartClickRight,
|
|
rightMonthChange,
|
|
rightChange,
|
|
exportThree,
|
|
disabledDate,
|
|
onCalendarChange,
|
|
onOpenChange,
|
|
surfaceRef,
|
|
surface1Ref,
|
|
surface2Ref,
|
|
surface3Ref,
|
|
leftMonthChange,
|
|
leftDayChange,
|
|
selectChange,
|
|
rightDayChange,
|
|
exportRight,
|
|
onCalendarChanges,
|
|
onOpenChanges,
|
|
disabledDates,
|
|
twoMonthChange,
|
|
twoDatChange,
|
|
twoSelectChange,
|
|
modalChange,
|
|
exportTwoData,
|
|
surface4Ref,
|
|
eChartClickLeft,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.operational {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
padding: 0 38px;
|
|
.echartsOne,
|
|
.echartsTwo {
|
|
width: 100%;
|
|
height: 600px;
|
|
border: 1px solid rgba(232, 236, 239, 1);
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
.search {
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
height: 40px;
|
|
.left {
|
|
display: flex;
|
|
.leftItem {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
.left {
|
|
font-size: 18px;
|
|
color: black;
|
|
font-weight: 600;
|
|
}
|
|
.right {
|
|
padding: 0 15px;
|
|
background: white;
|
|
background: #4ea6ff;
|
|
height: 32px;
|
|
line-height: 34px;
|
|
border-radius: 4px;
|
|
color: white;
|
|
// border: 1px solid #387df7;
|
|
cursor: pointer;
|
|
img {
|
|
margin-top: -3px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.right:hover {
|
|
background: rgba(64, 158, 255, 0.76);
|
|
}
|
|
}
|
|
.echarts {
|
|
height: 400px;
|
|
width: 100%;
|
|
}
|
|
.msg {
|
|
margin-left: calc(50% - 135px);
|
|
width: 330px;
|
|
display: flex;
|
|
margin-top: 20px;
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 15px;
|
|
.start,
|
|
.end {
|
|
width: 5px;
|
|
height: 2px;
|
|
background: #387df7;
|
|
// margin-top: 4px;
|
|
}
|
|
.radio {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
border: 2px solid #387df7;
|
|
}
|
|
.text {
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
.item1 {
|
|
// margin-right: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
.start,
|
|
.end {
|
|
width: 5px;
|
|
height: 2px;
|
|
background: #00cecb;
|
|
// margin-top: 4px;
|
|
}
|
|
.radio {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
border: 2px solid #00cecb;
|
|
}
|
|
.text {
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
.item2 {
|
|
margin-right: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
.start,
|
|
.end {
|
|
width: 5px;
|
|
height: 2px;
|
|
background: #ffa71a;
|
|
// margin-top: 4px;
|
|
}
|
|
.radio {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
border: 2px solid #ffa71a;
|
|
}
|
|
.text {
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.echartsThree {
|
|
width: 100%;
|
|
height: 600px;
|
|
margin-top: 20px;
|
|
margin-bottom: 30px;
|
|
display: flex;
|
|
.left {
|
|
width: calc(50% - 5px);
|
|
height: 100%;
|
|
border: 1px solid rgba(232, 236, 239, 1);
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
.leftEacharts {
|
|
width: 100%;
|
|
height: 400px;
|
|
margin-top: 20px;
|
|
}
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
.leftTile {
|
|
font-size: 18px;
|
|
color: black;
|
|
font-weight: 600;
|
|
}
|
|
.rightTile {
|
|
padding: 0 15px;
|
|
background: #4ea6ff;
|
|
height: 32px;
|
|
line-height: 34px;
|
|
border-radius: 4px;
|
|
color: white;
|
|
cursor: pointer;
|
|
img {
|
|
margin-top: -3px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.rightTile:hover {
|
|
background: rgba(64, 158, 255, 0.76);
|
|
}
|
|
}
|
|
.searchThree {
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
height: 40px;
|
|
.leftSearch {
|
|
display: flex;
|
|
.leftItemSearch {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.timeItemSearch {
|
|
width: 400px;
|
|
}
|
|
}
|
|
.threeMsg {
|
|
display: flex;
|
|
width: 275px;
|
|
margin-left: calc(50% - 133px);
|
|
margin-top: 10px;
|
|
.threeMsgItem {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
.classNum {
|
|
width: 24px;
|
|
height: 14px;
|
|
background: #1487f9;
|
|
border-radius: 2px;
|
|
}
|
|
.projectNum {
|
|
width: 24px;
|
|
height: 14px;
|
|
background: #00cecb;
|
|
border-radius: 2px;
|
|
}
|
|
.study {
|
|
width: 24px;
|
|
height: 14px;
|
|
background: #ffa71a;
|
|
border-radius: 2px;
|
|
}
|
|
.MsgItemText {
|
|
margin-left: 5px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
margin-left: 10px;
|
|
width: calc(50% - 5px);
|
|
height: 100%;
|
|
border: 1px solid rgba(232, 236, 239, 1);
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
.leftEacharts {
|
|
width: 100%;
|
|
height: 400px;
|
|
margin-top: 20px;
|
|
}
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
.leftTile {
|
|
font-size: 18px;
|
|
color: black;
|
|
font-weight: 600;
|
|
}
|
|
.rightTile {
|
|
padding: 0 15px;
|
|
background: #4ea6ff;
|
|
height: 32px;
|
|
line-height: 34px;
|
|
border-radius: 4px;
|
|
color: white;
|
|
cursor: pointer;
|
|
img {
|
|
margin-top: -3px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.rightTile:hover {
|
|
background: rgba(64, 158, 255, 0.76);
|
|
}
|
|
}
|
|
.searchThree {
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
height: 40px;
|
|
.leftSearch {
|
|
display: flex;
|
|
.leftItemSearch {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.timeItemSearch {
|
|
width: 400px;
|
|
}
|
|
}
|
|
.threeMsg {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
width: 275px;
|
|
margin-left: calc(50% - 133px);
|
|
.threeMsgItem {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
.classNum {
|
|
width: 24px;
|
|
height: 14px;
|
|
background: #1487f9;
|
|
border-radius: 2px;
|
|
}
|
|
.projectNum {
|
|
width: 24px;
|
|
height: 14px;
|
|
background: #00cecb;
|
|
border-radius: 2px;
|
|
}
|
|
.study {
|
|
width: 24px;
|
|
height: 14px;
|
|
background: #ffa71a;
|
|
border-radius: 2px;
|
|
}
|
|
.MsgItemText {
|
|
margin-left: 5px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|