mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-13 04:46:46 +08:00
feat: 报表三期接口联调
This commit is contained in:
mx00085@163.com
@@ -10,3 +10,9 @@ export const boeuProjectPageList = (obj) => http.post('/boeu/project/pageList',
|
||||
export const boeuArticlePageList = (obj) => http.post('/boeu/article/pageList', obj )
|
||||
// 课程分页列表
|
||||
export const boeuCourseListPageV2 = (obj) => http.post('/boeu/course/List/page/v2', obj )
|
||||
// 考试列表分页
|
||||
export const boeuExamPageListV2 = (obj) => http.post('/boeu/exam/pageList/v2', obj )
|
||||
// 问答分页列表
|
||||
export const boeuQuestionPageList= (obj) => http.post('/boeu/question/pageList', obj )
|
||||
//柱状体左侧获取数据接口
|
||||
export const dataStatisticsSelectV1= (obj) => http.post('/data/statistics/select/v1', obj )
|
||||
@@ -102,11 +102,11 @@
|
||||
: record.courseType
|
||||
}}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'projectStatus'">
|
||||
<template v-if="column.key === 'publishStatus'">
|
||||
<span>{{
|
||||
record.status == "0"
|
||||
record.publishStatus == "0"
|
||||
? "未发布"
|
||||
: record.status == "1"
|
||||
: record.publishStatus == "1"
|
||||
? "已发布"
|
||||
: ""
|
||||
}}</span>
|
||||
|
||||
@@ -3,20 +3,13 @@
|
||||
<div class="examination">
|
||||
<!-- 以下为顶部搜索框 -->
|
||||
<div class="filter">
|
||||
<div class="select addTimeBox">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入考试名称"
|
||||
allowClear
|
||||
showSearch
|
||||
v-model:value="testName"
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
@@ -26,22 +19,31 @@
|
||||
placeholder="请输入创建者"
|
||||
allowClear
|
||||
showSearch
|
||||
v-model:value="createName"
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-select
|
||||
<a-cascader
|
||||
:options="option"
|
||||
placeholder="请选择组织"
|
||||
v-model:value="orgId"
|
||||
:allowClear="allowClear"
|
||||
style="width: 100%"
|
||||
placeholder="请选择归属组织"
|
||||
allowClear
|
||||
></a-select>
|
||||
:fieldNames="{
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
children: 'treeChildList',
|
||||
}"
|
||||
>
|
||||
</a-cascader>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 20px">
|
||||
<div class="btnn btn1">
|
||||
<div class="btnn btn1" @click="getTableData">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">搜索</div>
|
||||
</div>
|
||||
<div class="btn btn2">
|
||||
<div class="btn btn2" @click="reset">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">重置</div>
|
||||
</div>
|
||||
@@ -49,7 +51,7 @@
|
||||
</div>
|
||||
<!-- 以下为导出按钮 -->
|
||||
<div class="btns">
|
||||
<div class="btn btn3">
|
||||
<div class="btn btn3" @click="exportList">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出</div>
|
||||
</div>
|
||||
@@ -62,7 +64,23 @@
|
||||
:loading="tableLoading"
|
||||
:scroll="{ x: 700 }"
|
||||
:pagination="false"
|
||||
rowKey="idStr"
|
||||
:row-selection="{
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'published'">
|
||||
<span>{{
|
||||
record.published == "0"
|
||||
? "未发布"
|
||||
: record.published == "1"
|
||||
? "已发布"
|
||||
: ""
|
||||
}}</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="tableBox">
|
||||
<div class="pa">
|
||||
@@ -83,168 +101,238 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, toRefs, reactive } from "vue";
|
||||
import { ref, toRefs, reactive, onMounted } 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: "ExaminatioN",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
tableLoading: false, // table加载图标
|
||||
tableDataTotal: 12, // 数据总条数
|
||||
tableDataTotal: 0, // 数据总条数
|
||||
pageSize: 10, // 每页条数
|
||||
pageNo: 1, //当前页码
|
||||
testName: "",
|
||||
createName: "",
|
||||
orgId: null,
|
||||
allowClear: false,
|
||||
option: [],
|
||||
selectedRowKeys: [], // 选中的列
|
||||
resetOrgId: [],
|
||||
});
|
||||
const reset = async () => {
|
||||
state.createName = "";
|
||||
state.testName = "";
|
||||
state.orgId = state.resetOrgId;
|
||||
getTableData();
|
||||
};
|
||||
// table选中
|
||||
const onSelectChange = (selectedRowKeys) => {
|
||||
state.selectedRowKeys = selectedRowKeys;
|
||||
};
|
||||
const exportList = async () => {
|
||||
if (state.selectedRowKeys.length > 0) {
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/report/boeu/exam/export/list/v2",
|
||||
data: { ids: state.selectedRowKeys },
|
||||
responseType: "blob",
|
||||
headers: {
|
||||
token: Cookies.get("token"),
|
||||
},
|
||||
}).then(
|
||||
(res) => {
|
||||
downLoad(res.data, "考试.xlsx");
|
||||
},
|
||||
(err) => {
|
||||
message.error(err);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
const params = {
|
||||
testName: state.testName,
|
||||
createName: state.createName,
|
||||
pageNo: state.pageNo,
|
||||
pageSize: state.pageSize,
|
||||
orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
|
||||
};
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/report/boeu/exam/export/list/v2",
|
||||
data: params ,
|
||||
responseType: "blob",
|
||||
headers: {
|
||||
token: Cookies.get("token"),
|
||||
},
|
||||
}).then(
|
||||
(res) => {
|
||||
downLoad(res.data, "考试.xlsx");
|
||||
},
|
||||
(err) => {
|
||||
message.error(err);
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
const exportDetail = async (id) => {
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/report/boeu/exam/export/detail/v2",
|
||||
data: { ids: [id] },
|
||||
responseType: "blob",
|
||||
headers: {
|
||||
token: Cookies.get("token"),
|
||||
},
|
||||
}).then(
|
||||
(res) => {
|
||||
downLoad(res.data, "考试详细信息.xlsx");
|
||||
},
|
||||
(err) => {
|
||||
message.error(err);
|
||||
}
|
||||
);
|
||||
};
|
||||
// 表格数据
|
||||
// 表格数据
|
||||
|
||||
let tableData = ref([
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
]);
|
||||
let tableData = ref([]);
|
||||
// cloumns 表头
|
||||
const columns = ref([
|
||||
{
|
||||
title: "考试名称",
|
||||
dataIndex: "age",
|
||||
dataIndex: "testName",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "testName",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "归属组织",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "resOwner",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "resOwner",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "课程名称",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "pertainCourse",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "pertainCourse",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "项目名称",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "pertainProject",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "pertainProject",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "学习路径名称",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "pertainRouter",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "pertainRouter",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "考试人数",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "totalNumber",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "totalNumber",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "考试次数",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "testTimes",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "testTimes",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "题量",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "numOfQuest",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "numOfQuest",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "考试时长",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "testDuration",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "testDuration",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "考试满分",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "totalScore",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "totalScore",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "考试合格分",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "passLine",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "passLine",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "平均答题时长",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "averageAnswerTime",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "averageAnswerTime",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "平均得分",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "averageScore",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "averageScore",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "考试通过率",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "passRate",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "passRate",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "publishTime",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "publishTime",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "published",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "published",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: "创建人",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "creator",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "creator",
|
||||
align: "center",
|
||||
width: 120,
|
||||
},
|
||||
@@ -255,21 +343,68 @@ export default {
|
||||
width: 150,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
customRender: () => {
|
||||
return <a>导出详细信息</a>;
|
||||
customRender: (record) => {
|
||||
return (
|
||||
<a
|
||||
onClick={() => {
|
||||
exportDetail(record.record.idStr);
|
||||
}}
|
||||
>
|
||||
导出详细信息
|
||||
</a>
|
||||
);
|
||||
},
|
||||
},
|
||||
]);
|
||||
const getTableData = async () => {
|
||||
state.tableLoading = true;
|
||||
const params = {
|
||||
testName: state.testName,
|
||||
createName: state.createName,
|
||||
pageNo: state.pageNo,
|
||||
pageSize: state.pageSize,
|
||||
orgId: state.orgId ? state.orgId[state.orgId.length - 1] : null,
|
||||
};
|
||||
const res = await api.boeuExamPageListV2(params);
|
||||
if (res) {
|
||||
tableData.value = res.data.rows;
|
||||
state.tableDataTotal = res.data.total;
|
||||
state.tableLoading = false;
|
||||
}
|
||||
};
|
||||
//table 分页事件
|
||||
const changePagination = (page) => {
|
||||
state.pageNo = page;
|
||||
getTableData();
|
||||
};
|
||||
|
||||
//请求组织接口
|
||||
const getOrgList = async () => {
|
||||
const res = await api.userGetUserOrg({});
|
||||
if (res) {
|
||||
state.option = res.data?.result?.list;
|
||||
state.orgId = res.data?.result?.treeNodeList;
|
||||
state.resetOrgId = res.data?.result?.treeNodeList;
|
||||
res.data?.result?.userType === 1
|
||||
? (state.allowClear = true)
|
||||
: (state.allowClear = false);
|
||||
getTableData();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
getOrgList();
|
||||
state.tableLoading = true;
|
||||
});
|
||||
return {
|
||||
reset,
|
||||
exportDetail,
|
||||
...toRefs(state),
|
||||
tableData,
|
||||
columns,
|
||||
changePagination,
|
||||
getOrgList,
|
||||
getTableData,
|
||||
onSelectChange,
|
||||
exportList,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -289,29 +424,7 @@ export default {
|
||||
.select {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% - 76px - 360px) / 4);
|
||||
}
|
||||
|
||||
.addTimeBox {
|
||||
width: calc((100% - 76px - 360px) / 4 + 120px) !important;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.addTime {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
margin-left: 10px;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
// .ant-picker {
|
||||
// padding-left: 85px;
|
||||
// }
|
||||
|
||||
.ant-picker-range .ant-picker-active-bar {
|
||||
margin-left: 85px;
|
||||
}
|
||||
width: calc((100% - 76px - 220px) / 3);
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<!-- 营运数据概览页面! -->
|
||||
|
||||
<div class="operational">
|
||||
<div class="echartsOne">
|
||||
<div class="title">
|
||||
@@ -135,16 +136,32 @@
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
placeholder="请选择日期格式"
|
||||
allowClear
|
||||
: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"
|
||||
separator="至"
|
||||
@change="leftDayChange"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
<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>
|
||||
@@ -212,14 +229,103 @@
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, ref } from "vue";
|
||||
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({
|
||||
threeData: [],
|
||||
threeLeftType: 1,
|
||||
threeTime: [],
|
||||
threeXData: [],
|
||||
});
|
||||
const surfaceRef = ref(null);
|
||||
const surface1Ref = ref(null);
|
||||
const surface2Ref = ref(null);
|
||||
const surface3Ref = ref(null);
|
||||
|
||||
// 获取第第三排第一个柱状图的数据
|
||||
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?.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?.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.dataZoom[0].end=computedPosition(11,res?.data?.length)
|
||||
// console.log(computedPosition(1,res?.data?.length),'22222222222222222')
|
||||
// console.log(options1.value.dataZoom[0].end)
|
||||
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 option = ref({
|
||||
tooltip: {
|
||||
@@ -271,7 +377,70 @@ export default {
|
||||
],
|
||||
});
|
||||
// 柱状图1配置项
|
||||
const options = ref({
|
||||
const options1 = ref({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
grid: {
|
||||
top: "6%",
|
||||
left: "0%",
|
||||
right: "0%",
|
||||
bottom: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: [],
|
||||
axisLabel: {
|
||||
interval: 1,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "课程数",
|
||||
data: [],
|
||||
type: "bar",
|
||||
backgroundStyle: {
|
||||
color: "#1487F9",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "项目数",
|
||||
data: [],
|
||||
type: "bar",
|
||||
backgroundStyle: {
|
||||
color: "#00CECB",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "学习路径图",
|
||||
data: [],
|
||||
type: "bar",
|
||||
backgroundStyle: {
|
||||
color: "#FFA71A",
|
||||
},
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: "slider",
|
||||
show: true,
|
||||
xAxisIndex: [0],
|
||||
start: 1,
|
||||
end: 35,
|
||||
brushSelect: false,
|
||||
showDetail: false,
|
||||
startValue: 1,
|
||||
endValue: 7,
|
||||
zoomLock: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
// 柱状图2 配置项
|
||||
const options2 = ref({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
@@ -316,6 +485,7 @@ export default {
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 图表1 数据源
|
||||
const echartOneData = ref([
|
||||
{
|
||||
@@ -363,56 +533,88 @@ export default {
|
||||
]);
|
||||
|
||||
// 处理图表数据的方法
|
||||
const changeData = () => {
|
||||
const timeList = [];
|
||||
const personList = [];
|
||||
const numList = [];
|
||||
const longList = [];
|
||||
echartOneData.value?.forEach((item) => {
|
||||
timeList.push(item.time);
|
||||
personList.push(item.person);
|
||||
numList.push(item.num);
|
||||
longList.push(item.long);
|
||||
});
|
||||
// 处理x轴显示信息
|
||||
option.value.xAxis.data = timeList;
|
||||
// 右侧坐标轴数据
|
||||
option.value.series[0].data = personList;
|
||||
//左侧坐标轴数据
|
||||
option.value.series[1].data = numList;
|
||||
option.value.series[2].data = longList;
|
||||
// 柱状图1
|
||||
options.value.xAxis.data = timeList;
|
||||
options.value.series[0].data = personList;
|
||||
options.value.series[1].data = numList;
|
||||
options.value.series[2].data = longList;
|
||||
};
|
||||
// const changeData = () => {
|
||||
// const timeList = [];
|
||||
// const personList = [];
|
||||
// const numList = [];
|
||||
// const longList = [];
|
||||
// echartOneData.value?.forEach((item) => {
|
||||
// timeList.push(item.time);
|
||||
// personList.push(item.person);
|
||||
// numList.push(item.num);
|
||||
// longList.push(item.long);
|
||||
// });
|
||||
// // 处理x轴显示信息
|
||||
// option.value.xAxis.data = timeList;
|
||||
// // 右侧坐标轴数据
|
||||
// option.value.series[0].data = personList;
|
||||
// //左侧坐标轴数据
|
||||
// option.value.series[1].data = numList;
|
||||
// option.value.series[2].data = longList;
|
||||
// // 柱状图1
|
||||
// options1.value.xAxis.data = state.threeXData;
|
||||
// options1.value.series[0].data = personList;
|
||||
// options1.value.series[1].data = numList;
|
||||
// options1.value.series[2].data = longList;
|
||||
// };
|
||||
// 生成echarts的方法
|
||||
const createEcharts = () => {
|
||||
changeData();
|
||||
const createEcharts1 = () => {
|
||||
// changeData();
|
||||
// 图表1
|
||||
const myChart = echarts.init(surfaceRef.value);
|
||||
option.value && myChart.setOption(option.value);
|
||||
};
|
||||
// 生成echarts的方法
|
||||
const createEcharts2 = () => {
|
||||
// changeData();
|
||||
// 图表2
|
||||
const myChart1 = echarts.init(surface1Ref.value);
|
||||
option.value && myChart1.setOption(option.value);
|
||||
};
|
||||
// 生成echarts的方法
|
||||
const createEcharts3 = () => {
|
||||
// changeData();
|
||||
// 图表3左侧图表
|
||||
const myChart2 = echarts.init(surface2Ref.value);
|
||||
options.value && myChart2.setOption(options.value);
|
||||
options1.value && myChart2.setOption(options1.value);
|
||||
};
|
||||
// 生成echarts的方法
|
||||
const createEcharts4 = () => {
|
||||
// changeData();
|
||||
// 图表3 右侧图表
|
||||
const myChart3 = echarts.init(surface3Ref.value);
|
||||
options.value && myChart3.setOption(options.value);
|
||||
options2.value && myChart3.setOption(options2.value);
|
||||
};
|
||||
const initTime = () => {
|
||||
const monthEnd = dayjs(new Date()).endOf("year").format("YYYY-MM");
|
||||
const start = dayjs(new Date()).startOf("year").format("YYYY-MM");
|
||||
state.threeTime = [dayjs(start), dayjs(monthEnd)];
|
||||
leftMonthChange([dayjs(start), dayjs(monthEnd)]);
|
||||
};
|
||||
// const computedPosition=(length,xArraylength)=> {
|
||||
// if(xArraylength>=10){
|
||||
// return length <= 10 ? 35 : (100 - Math.floor(35 / length * 100));
|
||||
// }else{
|
||||
// return 100;//小于十条数据显示全部
|
||||
// }
|
||||
// }
|
||||
// 挂载完成
|
||||
onMounted(() => {
|
||||
createEcharts();
|
||||
createEcharts1();
|
||||
createEcharts2();
|
||||
createEcharts3();
|
||||
createEcharts4();
|
||||
initTime();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
surfaceRef,
|
||||
surface1Ref,
|
||||
surface2Ref,
|
||||
surface3Ref,
|
||||
echartOneData,
|
||||
leftMonthChange,
|
||||
leftDayChange,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -545,7 +747,7 @@ export default {
|
||||
}
|
||||
.echartsThree {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
height: 600px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
@@ -557,7 +759,7 @@ export default {
|
||||
padding: 15px;
|
||||
.leftEacharts {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
height: 400px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.title {
|
||||
@@ -606,6 +808,7 @@ export default {
|
||||
margin-top: 15px;
|
||||
width: 275px;
|
||||
margin-left: calc(50% - 133px);
|
||||
margin-top: 10px;
|
||||
.threeMsgItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -271,7 +271,7 @@ export default {
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/report/boeu/project/exportAll",
|
||||
data: { params },
|
||||
data: params ,
|
||||
responseType: "blob",
|
||||
headers: {
|
||||
token: Cookies.get("token"),
|
||||
@@ -366,7 +366,6 @@ export default {
|
||||
state.tableLoading = true;
|
||||
const params = {};
|
||||
params.status = state.status;
|
||||
params.orgId = state.orgId;
|
||||
params.createName = state.createName;
|
||||
params.projectName = state.projectName;
|
||||
params.page = state.pageNo;
|
||||
|
||||
@@ -3,20 +3,13 @@
|
||||
<div class="questionsandanswers">
|
||||
<!-- 以下为顶部搜索框 -->
|
||||
<div class="filter">
|
||||
<div class="select addTimeBox">
|
||||
<a-range-picker
|
||||
style="width: 100%"
|
||||
format="YYYY-MM-DD"
|
||||
separator="至"
|
||||
:placeholder="[' 开始时间', ' 结束时间']"
|
||||
/>
|
||||
</div>
|
||||
<div class="select">
|
||||
<a-input
|
||||
style="width: 100%; height: 40px; border-radius: 8px"
|
||||
placeholder="请输入问答标题"
|
||||
allowClear
|
||||
showSearch
|
||||
v-model:value="title"
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
@@ -26,15 +19,16 @@
|
||||
placeholder="请输入创建者"
|
||||
allowClear
|
||||
showSearch
|
||||
v-model:value="createName"
|
||||
>
|
||||
</a-input>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 20px">
|
||||
<div class="btnn btn1">
|
||||
<div class="btnn btn1" @click="getTableData">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">搜索</div>
|
||||
</div>
|
||||
<div class="btn btn2">
|
||||
<div class="btn btn2" @click="reset">
|
||||
<div class="search"></div>
|
||||
<div class="btnText">重置</div>
|
||||
</div>
|
||||
@@ -42,7 +36,7 @@
|
||||
</div>
|
||||
<!-- 以下为导出按钮 -->
|
||||
<div class="btns">
|
||||
<div class="btn btn3">
|
||||
<div class="btn btn3" @click="exportList">
|
||||
<div><img src="../../assets/svg/export.png" alt="" /></div>
|
||||
<div class="btnText">导出</div>
|
||||
</div>
|
||||
@@ -50,12 +44,28 @@
|
||||
<!-- 以下为table表格 -->
|
||||
<div class="tableBox">
|
||||
<a-table
|
||||
rowKey="idStr"
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:loading="tableLoading"
|
||||
:scroll="{ x: 700 }"
|
||||
:pagination="false"
|
||||
:row-selection="{
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<span>{{
|
||||
record.status == "0"
|
||||
? "未发布"
|
||||
: record.status == "1"
|
||||
? "已发布"
|
||||
: ""
|
||||
}}</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="tableBox">
|
||||
<div class="pa">
|
||||
@@ -76,116 +86,185 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, toRefs, reactive } from "vue";
|
||||
import { ref, toRefs, reactive, onMounted } 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: "QuestionsAndAnswers",
|
||||
setup() {
|
||||
const state = reactive({
|
||||
tableLoading: false, // table加载图标
|
||||
tableDataTotal: 12, // 数据总条数
|
||||
tableDataTotal: 0, // 数据总条数
|
||||
pageSize: 10, // 每页条数
|
||||
pageNo: 1, //当前页码
|
||||
createName: "",
|
||||
title: "",
|
||||
selectedRowKeys: [],
|
||||
});
|
||||
const reset = async () => {
|
||||
state.createName = "";
|
||||
state.title = "";
|
||||
getTableData();
|
||||
};
|
||||
const getTableData = async () => {
|
||||
state.tableLoading = true;
|
||||
const params = {
|
||||
title: state.title,
|
||||
createName: state.createName,
|
||||
pageNo: state.pageNo,
|
||||
pageSize: state.pageSize,
|
||||
};
|
||||
const res = await api.boeuQuestionPageList(params);
|
||||
if (res) {
|
||||
tableData.value = res.data.rows;
|
||||
state.tableDataTotal = res.data.total;
|
||||
state.tableLoading = false;
|
||||
}
|
||||
};
|
||||
// 表格数据
|
||||
// 表格数据
|
||||
|
||||
let tableData = ref([
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
{ name: "0000255", manager: "565656" },
|
||||
]);
|
||||
let tableData = ref([]);
|
||||
// cloumns 表头
|
||||
const columns = ref([
|
||||
{
|
||||
title: "问答标题",
|
||||
dataIndex: "age",
|
||||
dataIndex: "title",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "title",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "归属组织",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "organizationName",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "organizationName",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "浏览量",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "views",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "views",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "评论数",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "answers",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "answers",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "分享量",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "shares",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "shares",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "点赞量",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "praises",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "praises",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "收藏数",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "favorites",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "favorites",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "sysCreateTime",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "sysCreateTime",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "问答状态",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "status",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "status",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "创建人",
|
||||
dataIndex: "manager",
|
||||
dataIndex: "sysCreateBy",
|
||||
ellipsis: true,
|
||||
key: "manager",
|
||||
key: "sysCreateBy",
|
||||
align: "center",
|
||||
},
|
||||
]);
|
||||
// 导出事件
|
||||
const exportList = async () => {
|
||||
if (state.selectedRowKeys.length > 0) {
|
||||
console.log('1111')
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/report/boeu/question/exportList",
|
||||
data: {ids:state.selectedRowKeys} ,
|
||||
responseType: "blob",
|
||||
headers: {
|
||||
token: Cookies.get("token"),
|
||||
},
|
||||
}).then(
|
||||
(res) => {
|
||||
downLoad(res.data, "问答.xlsx");
|
||||
},
|
||||
(err) => {
|
||||
message.error(err);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
const params = {
|
||||
title: state.title,
|
||||
createName: state.createName,
|
||||
pageNo: state.pageNo,
|
||||
pageSize: state.pageSize,
|
||||
};
|
||||
axios({
|
||||
method: "post",
|
||||
url: "/report/boeu/question/exportList",
|
||||
data: params ,
|
||||
responseType: "blob",
|
||||
headers: {
|
||||
token: Cookies.get("token"),
|
||||
},
|
||||
}).then(
|
||||
(res) => {
|
||||
downLoad(res.data, "问答.xlsx");
|
||||
},
|
||||
(err) => {
|
||||
message.error(err);
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
//table 分页事件
|
||||
const changePagination = (page) => {
|
||||
state.pageNo = page;
|
||||
};
|
||||
|
||||
// table选中
|
||||
const onSelectChange = (selectedRowKeys) => {
|
||||
state.selectedRowKeys = selectedRowKeys;
|
||||
};
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
onSelectChange,
|
||||
tableData,
|
||||
columns,
|
||||
changePagination,
|
||||
getTableData,
|
||||
reset,
|
||||
exportList,
|
||||
};
|
||||
},
|
||||
};
|
||||
@@ -205,31 +284,8 @@ export default {
|
||||
.select {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: calc((100% - 76px - 340px) / 3);
|
||||
width: calc((100% - 76px - 200px) / 2);
|
||||
}
|
||||
|
||||
.addTimeBox {
|
||||
width: calc((100% - 76px - 340px) / 3 + 120px) !important;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.addTime {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
margin-left: 10px;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
// .ant-picker {
|
||||
// padding-left: 85px;
|
||||
// }
|
||||
|
||||
.ant-picker-range .ant-picker-active-bar {
|
||||
margin-left: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0px 26px 0px 26px;
|
||||
height: 38px;
|
||||
|
||||
Reference in New Issue
Block a user