hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-23 01:36:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev_m' into develop

Browse Source
This commit is contained in:
BOE\10867418
2023-03-31 13:53:07 +08:00
parent 67606199b7 e83b300ea5
commit f86b4c77e8
2 changed files with 322 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/all.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

335
src/views/report/Operational.vue
View File

@@ -172,9 +172,14 @@
<div class="echartsThree">
<div class="left">
<div class="title">
<div class="leftTile">学习内容</div>
<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="" />
<img
src="../../assets/images/coursewareManage/export1.png"
alt=""
/>
<span>导出学习内容</span>
</div>
</div>
@@ -236,9 +241,14 @@
</div>
<div class="right">
<div class="title">
<div class="leftTile">学习内容</div>
<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="" />
<img
src="../../assets/images/coursewareManage/export1.png"
alt=""
/>
<span>导出学习内容</span>
</div>
</div>
@@ -279,7 +289,7 @@
</div>
</div>
</div>
<div class="leftEacharts" ref="surface3Ref" @click="eChartClickRight"></div>
<div class="leftEacharts" ref="surface3Ref"></div>
<div class="threeMsg">
<div class="threeMsgItem">
<div class="classNum" />
@@ -297,6 +307,11 @@
</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";
@@ -325,20 +340,171 @@ export default {
time: [],
day: [],
},
modalFlag: false,
});
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 eChartClickRight=()=>{
console.log('11111')
}
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?.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?.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?.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?.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 == 0) {
if (!state.towParmasn.day?.length || state.towParmasn.day?.length < 1) {
@@ -611,7 +777,6 @@ export default {
options1.value.series[1].data = project;
options1.value.series[2].data = router;
createEcharts3();
}
}
};
@@ -1073,6 +1238,142 @@ export default {
],
});
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
@@ -1084,21 +1385,27 @@ export default {
// 图表2
const myChart1 = echarts.init(surface1Ref.value);
option.value && myChart1.setOption(option.value);
window.addEventListener('resize',()=>{myChart1.resize()})
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()})
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()})
window.addEventListener("resize", () => {
myChart3.resize();
});
};
const initTime = () => {
const monthEnd = dayjs(new Date()).endOf("year").format("YYYY-MM");
@@ -1144,6 +1451,8 @@ export default {
twoSelectChange,
modalChange,
exportTwoData,
surface4Ref,
eChartClickLeft,
};
},
};