feat: 报表三期接口联调

src/api/indexProject.js

@@ -9,4 +9,10 @@ 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 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 )

src/views/report/Curriculum.vue

@@ -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>

src/views/report/Examination.vue

@@ -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="请选择归属组织"
+          :fieldNames="{
-          allowClear
+            label: 'name',
-        ></a-select>
+            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([]);
-
-    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" },
-    ]);
     // 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: () => {
+        customRender: (record) => {
-          return <a>导出详细信息</a>;
+          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);
+      width: calc((100% - 76px - 220px) / 3);
-    }
-
-    .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;
-      }
     }
 
     .btn {

src/views/report/Operational.vue

@@ -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 changeData = () => {
-      const timeList = [];
+    //   const timeList = [];
-      const personList = [];
+    //   const personList = [];
-      const numList = [];
+    //   const numList = [];
-      const longList = [];
+    //   const longList = [];
-      echartOneData.value?.forEach((item) => {
+    //   echartOneData.value?.forEach((item) => {
-        timeList.push(item.time);
+    //     timeList.push(item.time);
-        personList.push(item.person);
+    //     personList.push(item.person);
-        numList.push(item.num);
+    //     numList.push(item.num);
-        longList.push(item.long);
+    //     longList.push(item.long);
-      });
+    //   });
-      // 处理x轴显示信息
+    //   // 处理x轴显示信息
-      option.value.xAxis.data = timeList;
+    //   option.value.xAxis.data = timeList;
-      // 右侧坐标轴数据
+    //   // 右侧坐标轴数据
-      option.value.series[0].data = personList;
+    //   option.value.series[0].data = personList;
-      //左侧坐标轴数据
+    //   //左侧坐标轴数据
-      option.value.series[1].data = numList;
+    //   option.value.series[1].data = numList;
-      option.value.series[2].data = longList;
+    //   option.value.series[2].data = longList;
-      // 柱状图1
+    //   // 柱状图1
-      options.value.xAxis.data = timeList;
+    //   options1.value.xAxis.data = state.threeXData;
-      options.value.series[0].data = personList;
+    //   options1.value.series[0].data = personList;
-      options.value.series[1].data = numList;
+    //   options1.value.series[1].data = numList;
-      options.value.series[2].data = longList;
+    //   options1.value.series[2].data = longList;
-    };
+    // };
     // 生成echarts的方法
-    const createEcharts = () => {
+    const createEcharts1 = () => {
-      changeData();
+      // 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;

src/views/report/Project.vue

@@ -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;

src/views/report/Questionsandanswers.vue

@@ -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([]);
-
-    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" },
-    ]);
     // 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;