From 4fb5105b0363e529090c2eeab1f5c3dbedd0d882 Mon Sep 17 00:00:00 2001
From: "mx00085@163.com" <mx00085@163.com>
Date: Thu, 30 Mar 2023 14:53:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=90=A5=E8=BF=90=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83,=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=A4=AE=E8=A7=86=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/indexProject.js              |   6 +-
 src/views/report/Article.vue         |  30 +-
 src/views/report/Learningpathmap.vue |  32 +-
 src/views/report/Operational.vue     | 590 +++++++++++++++++++++++----
 4 files changed, 575 insertions(+), 83 deletions(-)

diff --git a/src/api/indexProject.js b/src/api/indexProject.js
index b4fed495..e3aafe5f 100644
--- a/src/api/indexProject.js
+++ b/src/api/indexProject.js
@@ -15,4 +15,8 @@ export const boeuExamPageListV2 = (obj) => http.post('/boeu/exam/pageList/v2', o
 // 问答分页列表
 export const boeuQuestionPageList= (obj) => http.post('/boeu/question/pageList', obj )
 //柱状体左侧获取数据接口
-export const dataStatisticsSelectV1= (obj) => http.post('/data/statistics/select/v1', obj )
\ No newline at end of file
+export const dataStatisticsSelectV1= (obj) => http.post('/data/statistics/select/v1', obj )
+//柱状体右侧获取数据接口
+export const dataStatisticsSelectV2= (obj) => http.post('/data/statistics/select/v2', obj )
+// 图表2 学习情况数据接口
+export const boeuStudyDataGetStudyStaisticsList= (obj) => http.post('/boeu/studyData/getStudyStatisticsList', obj )
\ No newline at end of file
diff --git a/src/views/report/Article.vue b/src/views/report/Article.vue
index a6e539d4..d20d7d85 100644
--- a/src/views/report/Article.vue
+++ b/src/views/report/Article.vue
@@ -37,7 +37,9 @@
     <!-- 以下为导出按钮 -->
     <div class="btnzs">
       <div class="btnz btnz3" @click="exportAll">
-        <div><img src="../../assets/images/coursewareManage/export1.png" alt="" /></div>
+        <div>
+          <img src="../../assets/images/coursewareManage/export1.png" alt="" />
+        </div>
         <div class="btnzText">导出</div>
       </div>
     </div>
@@ -59,14 +61,20 @@
             <a-tooltip placement="topRight">
               <template #title>
                 <span>{{
-                  record.publishTime &&
-                  dayjs(record.publishTime).format("YYYY-MM-DD HH:mm:ss")
+                  record.sysUpdateTime
+                    ? dayjs(record.sysUpdateTime).format("YYYY-MM-DD HH:mm:ss")
+                    : record.sysCreateTime
+                    ? dayjs(record.sysCreateTime).format("YYYY-MM-DD HH:mm:ss")
+                    : ""
                 }}</span>
               </template>
               <span>{{
-                record.publishTime &&
-                dayjs(record.publishTime).format("YYYY-MM-DD HH:mm:ss")
-              }}</span>
+                  record.sysUpdateTime
+                    ? dayjs(record.sysUpdateTime).format("YYYY-MM-DD HH:mm:ss")
+                    : record.sysCreateTime
+                    ? dayjs(record.sysCreateTime).format("YYYY-MM-DD HH:mm:ss")
+                    : ""
+                }}</span>
             </a-tooltip>
           </template>
           <template v-if="column.key === 'status'">
@@ -182,12 +190,12 @@ export default {
       if (res) {
         state.tableLoading = false;
         state.tableDataTotal = res.data.total;
-        const list =res.data.rows?.map((item)=>{
+        const list = res.data.rows?.map((item) => {
           return {
             ...item,
-            key:item.id
-          }
-        })
+            key: item.id,
+          };
+        });
         tableData.value = list;
       }
     };
@@ -314,7 +322,7 @@ export default {
       margin-bottom: 20px;
       width: calc((100% - 76px - 200px) / 2);
     }
-  
+
     .btnz {
       padding: 0px 26px 0px 26px;
       height: 38px;
diff --git a/src/views/report/Learningpathmap.vue b/src/views/report/Learningpathmap.vue
index eb9eda23..9f589655 100644
--- a/src/views/report/Learningpathmap.vue
+++ b/src/views/report/Learningpathmap.vue
@@ -15,7 +15,8 @@
             value: 'id',
             children: 'treeChildList',
           }"
-        ></a-cascader>
+        >
+        </a-cascader>
       </div>
       <div class="select">
         <a-input
@@ -77,6 +78,33 @@
           onChange: onSelectChange,
         }"
       >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'createTime'">
+            <a-tooltip placement="topRight">
+              <template #title>
+                <span>{{
+                  record.createTime &&
+                  dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss")
+                }}</span>
+              </template>
+              <span>{{
+                record.createTime &&
+                dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss")
+              }}</span>
+            </a-tooltip>
+          </template>
+          <template v-if="column.key === 'status'">
+            <span>{{
+              record.status == "0"
+                ? "草稿"
+                : record.status == "1"
+                ? "已发布"
+                : record.status == "-1"
+                ? "停用"
+                : ""
+            }}</span>
+          </template>
+        </template>
       </a-table>
       <div class="tableBox">
         <div class="pa">
@@ -104,6 +132,7 @@ import { ref, toRefs, reactive, onMounted } from "vue";
 import downLoad from "../../utils/downLoad";
 import Cookies from "vue-cookies";
 import axios from "axios";
+import dayjs from "dayjs";
 export default {
   name: "LearningPathMap",
   setup() {
@@ -413,6 +442,7 @@ export default {
       tableData,
       columns,
       changePagination,
+      dayjs,
     };
   },
 };
diff --git a/src/views/report/Operational.vue b/src/views/report/Operational.vue
index 909d2679..b9919e1b 100644
--- a/src/views/report/Operational.vue
+++ b/src/views/report/Operational.vue
@@ -2,7 +2,7 @@
   <!-- 营运数据概览页面! -->
 
   <div class="operational">
-    <div class="echartsOne">
+    <!-- <div class="echartsOne">
       <div class="title">
         <div class="left">用户活动趋势</div>
         <div class="right">
@@ -64,12 +64,12 @@
           <div class="text">访问次数</div>
         </div>
       </div>
-    </div>
+    </div> -->
     <div class="echartsTwo">
       <div class="title">
         <div class="left">学习情况</div>
-        <div class="right">
-          <img src="../../assets/svg/export.png" alt="" />
+        <div class="right" @click="exportTwoData">
+          <img src="../../assets/images/coursewareManage/export1.png" alt="" />
           <span>导出活动详情</span>
         </div>
       </div>
@@ -77,25 +77,73 @@
         <div class="left">
           <div class="leftItem">
             <a-select
-              style="width: 100%"
+              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,
+                },
+              ]"
               allowClear
             ></a-select>
           </div>
           <div class="leftItem">
             <a-select
-              style="width: 100%"
+              style="width: 112px"
               placeholder="请选择日期格式"
-              allowClear
+              @change="twoSelectChange"
+              :options="[
+                { label: '按日查找', value: 0 },
+                { label: '按月查找', value: 1 },
+              ]"
+              v-model:value="towParmasn.dateType"
             ></a-select>
           </div>
           <div class="leftItem">
-            <a-range-picker
-              style="width: 100%"
-              format="YYYY-MM-DD"
-              separator="至"
-              :placeholder="['      开始时间', '        结束时间']"
-            />
+            <div class="timeItemSearch">
+              <a-range-picker
+                v-if="towParmasn.dateType == 0"
+                style="width: 100%"
+                format="YYYY-MM-DD"
+                v-model:value="towParmasn.day"
+                separator="至"
+                @change="twoDatChange"
+                :placeholder="['      开始时间', '        结束时间']"
+              />
+              <a-range-picker
+                v-if="towParmasn.dateType == 1"
+                style="width: 100%"
+                v-model:value="towParmasn.time"
+                @change="twoMonthChange"
+                format="YYYY-MM"
+                separator="至"
+                :placeholder="['      开始时间', '        结束时间']"
+                picker="month"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -126,7 +174,7 @@
         <div class="title">
           <div class="leftTile">学习内容</div>
           <div class="rightTile" @click="exportThree">
-            <img src="../../assets/svg/export.png" alt="" />
+            <img src="../../assets/images/coursewareManage/export1.png" alt="" />
             <span>导出学习内容</span>
           </div>
         </div>
@@ -189,8 +237,8 @@
       <div class="right">
         <div class="title">
           <div class="leftTile">学习内容</div>
-          <div class="rightTile">
-            <img src="../../assets/svg/export.png" alt="" />
+          <div class="rightTile" @click="exportRight">
+            <img src="../../assets/images/coursewareManage/export1.png" alt="" />
             <span>导出学习内容</span>
           </div>
         </div>
@@ -214,15 +262,17 @@
                 style="width: 100%"
                 format="YYYY-MM-DD"
                 v-model:value="forDay"
+                @change="rightDayChange"
                 separator="至"
                 :placeholder="['      开始时间', '        结束时间']"
               />
               <a-range-picker
-                v-if="threeLeftType == 1"
+                v-if="forRightType == 1"
                 style="width: 100%"
                 v-model:value="forTime"
                 format="YYYY-MM"
                 separator="至"
+                @change="rightMonthChange"
                 :placeholder="['      开始时间', '        结束时间']"
                 picker="month"
               />
@@ -262,15 +312,19 @@ export default {
   name: "OperationaL",
   setup() {
     const state = reactive({
-      threeData: [],
       threeLeftType: 1,
       threeTime: [],
       threeDay: [],
       threeXData: [],
-      forData: [],
       forRightType: 1,
       forTime: [],
       forDay: [],
+      towParmasn: {
+        type: 1,
+        dateType: 1,
+        time: [],
+        day: [],
+      },
     });
     const surfaceRef = ref(null);
     const surface1Ref = ref(null);
@@ -278,8 +332,86 @@ export default {
     const surface3Ref = ref(null);
 
     const dates = ref();
-    // const value = ref();
     const hackValue = ref();
+
+    const datess = ref();
+    const hackValues = ref();
+    const exportTwoData = async () => {
+      if (state.towParmasn.dateType == 0) {
+        if (!state.towParmasn.day?.length || state.towParmasn.day?.length < 1) {
+          message.error("请选择要导出的时间日期后再进行导出");
+        } else {
+          const dayStart = dayjs(state.towParmasn.day[0])
+            .startOf("day")
+            .format("YYYY-MM-DD 00:00:01");
+          const dayEnd = dayjs(state.towParmasn.day[1])
+            .endOf("day")
+            .format("YYYY-MM-DD hh:mm:ss");
+          axios({
+            method: "post",
+            url: "/report/boeu/studyData/exportDetailAll",
+            data: {
+              beginTime: dayStart,
+              endTime: dayEnd,
+              dateType: state.towParmasn.dateType,
+              type: state.towParmasn.type,
+            },
+            responseType: "blob",
+            headers: {
+              token: Cookies.get("token"),
+            },
+          }).then(
+            (res) => {
+              downLoad(res.data, "学习情况.xlsx");
+            },
+            (err) => {
+              message.error(err);
+            }
+          );
+        }
+      } else if (state.towParmasn.dateType == 1) {
+        if (
+          !state.towParmasn.time?.length ||
+          state.towParmasn.time?.length < 1
+        ) {
+          message.error("请选择要导出的月份后再进行导出");
+        } else {
+          const monthEnd = dayjs(state.towParmasn.time[1])
+            .endOf("month")
+            .format("YYYY-MM-DD hh:mm:ss");
+          axios({
+            method: "post",
+            url: "/report/data/statistics/export/v2",
+            data: {
+              beginTime: dayjs(state.towParmasn.time[0]).format(
+                "YYYY-MM-01 00:00:01"
+              ),
+              endTime: monthEnd,
+              dateType: state.towParmasn.dateType,
+              type: state.towParmasn.type,
+            },
+            responseType: "blob",
+            headers: {
+              token: Cookies.get("token"),
+            },
+          }).then(
+            (res) => {
+              downLoad(res.data, "学习情况.xlsx");
+            },
+            (err) => {
+              message.error(err);
+            }
+          );
+        }
+      }
+    };
+    const modalChange = async () => {
+      if (state.towParmasn.dateType == 1) {
+        twoMonthChange(state.towParmasn.time);
+      } else if (state.towParmasn.dateType == 0) {
+        twoDatChange(state.towParmasn.day);
+      }
+    };
     const onCalendarChange = (val) => {
       dates.value = val;
     };
@@ -301,6 +433,148 @@ export default {
         dates.value[1] && dates.value[1].diff(current, "days") > 60;
       return tooEarly || tooLate;
     };
+    const onCalendarChanges = (val) => {
+      datess.value = val;
+    };
+    const onOpenChanges = (open) => {
+      if (open) {
+        datess.value = [];
+        hackValues.value = [];
+      } else {
+        hackValues.value = undefined;
+      }
+    };
+    const disabledDates = (current) => {
+      if (!datess.value || datess.value.length === 0) {
+        return false;
+      }
+      const tooLate =
+        datess.value[0] && current.diff(datess.value[0], "days") > 60;
+      const tooEarly =
+        datess.value[1] && datess.value[1].diff(current, "days") > 60;
+      return tooEarly || tooLate;
+    };
+    const twoSelectChange = async (e) => {
+      if (e == 1) {
+        twoMonthChange(state.towParmasn.time);
+      } else if (e == 0) {
+        twoDatChange(state.towParmasn.day);
+      }
+    };
+    // 获取图表2月份数据
+    const twoMonthChange = async (e) => {
+      if (e?.length > 0) {
+        const monthEnd = dayjs(e[1])
+          .endOf("month")
+          .format("YYYY-MM-DD hh:mm:ss");
+        const res = await api.boeuStudyDataGetStudyStaisticsList({
+          beginTime: dayjs(e[0]).format("YYYY-MM-01 00:00:01"),
+          endTime: monthEnd,
+          dateType: state.towParmasn.dateType,
+          type: state.towParmasn.type,
+        });
+        if (res) {
+          if (
+            state.towParmasn.type == 4 ||
+            state.towParmasn.type == 5 ||
+            state.towParmasn.type == 6
+          ) {
+            const xData = [];
+            const avgDuration = [];
+            const count = [];
+            const duration = [];
+            res?.data?.forEach((item) => {
+              xData.push(item.month);
+              avgDuration.push(item.viewCount);
+              count.push(item.count);
+              duration.push(item.duration);
+            });
+            option.value.xAxis.data = xData;
+            // 右侧坐标轴数据
+            option.value.series[0].data = count;
+            //左侧坐标轴数据
+            option.value.series[1].data = avgDuration;
+            option.value.series[2].data = duration;
+            createEcharts2();
+          } else {
+            const xData = [];
+            const avgDuration = [];
+            const count = [];
+            const duration = [];
+            res?.data?.forEach((item) => {
+              xData.push(item.month);
+              avgDuration.push(item.avgDuration);
+              count.push(item.count);
+              duration.push(item.duration);
+            });
+            option.value.xAxis.data = xData;
+            // 右侧坐标轴数据
+            option.value.series[0].data = count;
+            //左侧坐标轴数据
+            option.value.series[1].data = avgDuration;
+            option.value.series[2].data = duration;
+            createEcharts2();
+          }
+        }
+      }
+    };
+    const twoDatChange = async (e) => {
+      if (e?.length > 0) {
+        const dayStart = dayjs(e[0])
+          .startOf("day")
+          .format("YYYY-MM-DD 00:00:01");
+        const dayEnd = dayjs(e[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
+        const res = await api.boeuStudyDataGetStudyStaisticsList({
+          beginTime: dayStart,
+          endTime: dayEnd,
+          dateType: state.towParmasn.dateType,
+          type: state.towParmasn.type,
+        });
+        if (res) {
+          if (
+            state.towParmasn.type == 4 ||
+            state.towParmasn.type == 5 ||
+            state.towParmasn.type == 6
+          ) {
+            const xData = [];
+            const avgDuration = [];
+            const count = [];
+            const duration = [];
+            res?.data?.forEach((item) => {
+              xData.push(item.month);
+              avgDuration.push(item.viewCount);
+              count.push(item.count);
+              duration.push(item.duration);
+            });
+            option.value.xAxis.data = xData;
+            // 右侧坐标轴数据
+            option.value.series[0].data = count;
+            //左侧坐标轴数据
+            option.value.series[1].data = avgDuration;
+            option.value.series[2].data = duration;
+            createEcharts2();
+          } else {
+            const xData = [];
+            const avgDuration = [];
+            const count = [];
+            const duration = [];
+            res?.data?.forEach((item) => {
+              xData.push(item.month);
+              avgDuration.push(item.avgDuration);
+              count.push(item.count);
+              duration.push(item.duration);
+            });
+            option.value.xAxis.data = xData;
+            // 右侧坐标轴数据
+            option.value.series[0].data = count;
+            //左侧坐标轴数据
+            option.value.series[1].data = avgDuration;
+            option.value.series[2].data = duration;
+            createEcharts2();
+          }
+        }
+      }
+    };
     // 获取第第三排第一个柱状图的数据
     const leftMonthChange = async (e) => {
       if (e?.length > 0) {
@@ -383,7 +657,7 @@ export default {
     //第三排第一个柱状图导出数据
     const exportThree = () => {
       if (state.threeLeftType == 0) {
-        if (state.threeDay.length < 1) {
+        if (!state.threeDay.length || state.threeDay.length < 1) {
           message.error("请选择要导出的时间日期后再进行导出");
         } else {
           const dayStart = dayjs(state.threeDay[0])
@@ -414,17 +688,17 @@ export default {
           );
         }
       } else if (state.threeLeftType == 1) {
-        if (state.threeData.length < 1) {
+        if (!state.threeTime.length || state.threeTime.length < 1) {
           message.error("请选择要导出的月份后再进行导出");
         } else {
-          const monthEnd = dayjs(state.threeData[1])
+          const monthEnd = dayjs(state.threeTime[1])
             .endOf("month")
             .format("YYYY-MM-DD hh:mm:ss");
           axios({
             method: "post",
             url: "/report/data/statistics/export/v1",
             data: {
-              startTime: dayjs(state.threeData[0]).format(
+              startTime: dayjs(state.threeTime[0]).format(
                 "YYYY-MM-01 00:00:01"
               ),
               endTime: monthEnd,
@@ -447,13 +721,146 @@ export default {
     };
     const rightChange = (e) => {
       if (e == 1) {
-        // leftMonthChange(state.threeTime);
+        rightMonthChange(state.forTime);
       } else if (e == 0) {
-        // leftDayChange(state.threeDay);
+        rightDayChange(state.forDay);
       }
     };
     // 获取第三排第二个柱状图的数据
-
+    const rightMonthChange = async (e) => {
+      if (e?.length > 0) {
+        const monthEnd = dayjs(e[1])
+          .endOf("month")
+          .format("YYYY-MM-DD hh:mm:ss");
+        const res = await api.dataStatisticsSelectV2({
+          startTime: dayjs(e[0]).format("YYYY-MM-01 00:00:01"),
+          endTime: monthEnd,
+          dateType: state.forRightType,
+        });
+        if (res) {
+          const xData = [];
+          const course = [];
+          const project = [];
+          const router = [];
+          res?.data?.forEach((item) => {
+            xData.push(item.xdata);
+            item?.list?.forEach((iten) => {
+              if (iten.name == "case") {
+                course.push(iten.value);
+              } else if (iten.name == "article") {
+                project.push(iten.value);
+              } else if (iten.name == "question") {
+                router.push(iten.value);
+              }
+            });
+          });
+          options2.value.xAxis.data = xData;
+          options2.value.series[0].data = course;
+          options2.value.series[1].data = project;
+          options2.value.series[2].data = router;
+          createEcharts4();
+        }
+      }
+    };
+    const rightDayChange = async (e) => {
+      if (e?.length > 0) {
+        const dayStart = dayjs(e[0])
+          .startOf("day")
+          .format("YYYY-MM-DD 00:00:01");
+        const dayEnd = dayjs(e[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
+        const res = await api.dataStatisticsSelectV2({
+          startTime: dayStart,
+          endTime: dayEnd,
+          dateType: state.forRightType,
+        });
+        if (res) {
+          const xData = [];
+          const course = [];
+          const project = [];
+          const router = [];
+          res?.data?.forEach((item) => {
+            xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
+            item?.list?.forEach((iten) => {
+              if (iten.name == "case") {
+                course.push(iten.value);
+              } else if (iten.name == "article") {
+                project.push(iten.value);
+              } else if (iten.name == "question") {
+                router.push(iten.value);
+              }
+            });
+          });
+          options2.value.xAxis.data = xData;
+          options2.value.series[0].data = course;
+          options2.value.series[1].data = project;
+          options2.value.series[2].data = router;
+          createEcharts4();
+        }
+      }
+    };
+    // right 导出
+    const exportRight = () => {
+      if (state.forRightType == 0) {
+        if (!state.forDay.length || state.forDay.length < 1) {
+          message.error("请选择要导出的时间日期后再进行导出");
+        } else {
+          const dayStart = dayjs(state.forDay[0])
+            .startOf("day")
+            .format("YYYY-MM-DD 00:00:01");
+          const dayEnd = dayjs(state.forDay[1])
+            .endOf("day")
+            .format("YYYY-MM-DD hh:mm:ss");
+          axios({
+            method: "post",
+            url: "/report/data/statistics/export/v2",
+            data: {
+              startTime: dayStart,
+              endTime: dayEnd,
+              dateType: state.forRightType,
+            },
+            responseType: "blob",
+            headers: {
+              token: Cookies.get("token"),
+            },
+          }).then(
+            (res) => {
+              downLoad(res.data, "学习内容.xlsx");
+            },
+            (err) => {
+              message.error(err);
+            }
+          );
+        }
+      } else if (state.forRightType == 1) {
+        if (!state.forTime.length || state.forTime.length < 1) {
+          message.error("请选择要导出的月份后再进行导出");
+        } else {
+          const monthEnd = dayjs(state.forTime[1])
+            .endOf("month")
+            .format("YYYY-MM-DD hh:mm:ss");
+          axios({
+            method: "post",
+            url: "/report/data/statistics/export/v2",
+            data: {
+              startTime: dayjs(state.forTime[0]).format("YYYY-MM-01 00:00:01"),
+              endTime: monthEnd,
+              dateType: state.forRightType,
+            },
+            responseType: "blob",
+            headers: {
+              token: Cookies.get("token"),
+            },
+          }).then(
+            (res) => {
+              downLoad(res.data, "学习内容.xlsx");
+            },
+            (err) => {
+              message.error(err);
+            }
+          );
+        }
+      }
+    };
     // 折线图配置项
     const option = ref({
       tooltip: {
@@ -487,20 +894,39 @@ export default {
       ],
       series: [
         {
-          name: "访问人数",
+          name: "总学习人数",
           type: "line",
           data: [],
+          normal: {
+            color: "#387df7", //改变折线点的颜色
+            lineStyle: {
+              color: "#387df7", //改变折线颜色
+            },
+          },
         },
         {
-          name: "访问次数",
-          type: "line",
-          data: [],
-        },
-        {
-          name: "停留时长",
+          name: "人均学习时长",
           type: "line",
           data: [],
           yAxisIndex: 1,
+          normal: {
+            color: "#00cecb", //改变折线点的颜色
+            lineStyle: {
+              color: "#00cecb", //改变折线颜色
+            },
+          },
+        },
+        {
+          name: "总学习时长",
+          type: "line",
+          data: [],
+          yAxisIndex: 1,
+          normal: {
+            color: "#ffa71a", //改变折线点的颜色
+            lineStyle: {
+              color: "#ffa71a", //改变折线颜色
+            },
+          },
         },
       ],
     });
@@ -531,24 +957,30 @@ export default {
           name: "课程数",
           data: [],
           type: "bar",
-          backgroundStyle: {
-            color: "#1487F9",
+          itemStyle: {
+            normal: {
+              color: "#1487F9", //改变折线点的颜色
+            },
           },
         },
         {
           name: "项目数",
           data: [],
           type: "bar",
-          backgroundStyle: {
-            color: "#00CECB",
+          itemStyle: {
+            normal: {
+              color: "#00CECB", //改变折线点的颜色
+            },
           },
         },
         {
           name: "学习路径图",
           data: [],
           type: "bar",
-          backgroundStyle: {
-            color: "#FFA71A",
+          itemStyle: {
+            normal: {
+              color: "#FFA71A", //改变折线点的颜色
+            },
           },
         },
       ],
@@ -561,9 +993,9 @@ export default {
           // end: 35,
           startValue: 0,
           endValue: 5,
-          // brushSelect: false,
+          brushSelect: false,
           showDetail: false,
-          // zoomLock: true,
+          zoomLock: true,
         },
       ],
     });
@@ -594,24 +1026,30 @@ export default {
           name: "课程数",
           data: [],
           type: "bar",
-          backgroundStyle: {
-            color: "#1487F9",
+          itemStyle: {
+            normal: {
+              color: "#1487F9", //改变折线点的颜色
+            },
           },
         },
         {
           name: "项目数",
           data: [],
           type: "bar",
-          backgroundStyle: {
-            color: "#00CECB",
+          itemStyle: {
+            normal: {
+              color: "#00CECB", //改变折线点的颜色
+            },
           },
         },
         {
           name: "学习路径图",
           data: [],
           type: "bar",
-          backgroundStyle: {
-            color: "#FFA71A",
+          itemStyle: {
+            normal: {
+              color: "#FFA71A", //改变折线点的颜色
+            },
           },
         },
       ],
@@ -624,19 +1062,19 @@ export default {
           // end: 35,
           startValue: 0,
           endValue: 5,
-          // brushSelect: false,
+          brushSelect: false,
           showDetail: false,
-          // zoomLock: true,
+          zoomLock: true,
         },
       ],
     });
 
     // 生成echarts的方法
-    const createEcharts1 = () => {
-      // 图表1
-      const myChart = echarts.init(surfaceRef.value);
-      option.value && myChart.setOption(option.value);
-    };
+    // const createEcharts1 = () => {
+    //   // 图表1
+    //   const myChart = echarts.init(surfaceRef.value);
+    //   option.value && myChart.setOption(option.value);
+    // };
     // 生成echarts的方法
     const createEcharts2 = () => {
       // 图表2
@@ -660,11 +1098,14 @@ export default {
       const start = dayjs(new Date()).startOf("year").format("YYYY-MM");
       state.threeTime = [dayjs(start), dayjs(monthEnd)];
       state.forTime = [dayjs(start), dayjs(monthEnd)];
+      state.towParmasn.time = [dayjs(start), dayjs(monthEnd)];
       leftMonthChange([dayjs(start), dayjs(monthEnd)]);
+      rightMonthChange([dayjs(start), dayjs(monthEnd)]);
+      twoMonthChange([dayjs(start), dayjs(monthEnd)]);
     };
     // 挂载完成
     onMounted(() => {
-      createEcharts1();
+      // createEcharts1();
       createEcharts2();
       createEcharts3();
       createEcharts4();
@@ -672,6 +1113,7 @@ export default {
     });
     return {
       ...toRefs(state),
+      rightMonthChange,
       rightChange,
       exportThree,
       disabledDate,
@@ -684,6 +1126,16 @@ export default {
       leftMonthChange,
       leftDayChange,
       selectChange,
+      rightDayChange,
+      exportRight,
+      onCalendarChanges,
+      onOpenChanges,
+      disabledDates,
+      twoMonthChange,
+      twoDatChange,
+      twoSelectChange,
+      modalChange,
+      exportTwoData,
     };
   },
 };
@@ -726,11 +1178,12 @@ export default {
       .right {
         padding: 0 15px;
         background: white;
+        background: #4ea6ff;
         height: 32px;
         line-height: 34px;
         border-radius: 4px;
-        color: #387df7;
-        border: 1px solid #387df7;
+        color: white;
+        // border: 1px solid #387df7;
         cursor: pointer;
         img {
           margin-top: -3px;
@@ -738,7 +1191,7 @@ export default {
         }
       }
       .right:hover {
-        background: rgba(64, 158, 255, 0.2);
+        background: rgba(64, 158, 255, 0.76);
       }
     }
     .echarts {
@@ -842,12 +1295,11 @@ export default {
         }
         .rightTile {
           padding: 0 15px;
-          background: white;
+          background: #4ea6ff;
           height: 32px;
           line-height: 34px;
           border-radius: 4px;
-          color: #387df7;
-          border: 1px solid #387df7;
+          color: white;
           cursor: pointer;
           img {
             margin-top: -3px;
@@ -855,7 +1307,7 @@ export default {
           }
         }
         .rightTile:hover {
-          background: rgba(64, 158, 255, 0.2);
+          background: rgba(64, 158, 255, 0.76);
         }
       }
       .searchThree {
@@ -874,7 +1326,6 @@ export default {
       }
       .threeMsg {
         display: flex;
-        margin-top: 15px;
         width: 275px;
         margin-left: calc(50% - 133px);
         margin-top: 10px;
@@ -916,7 +1367,7 @@ export default {
       padding: 15px;
       .leftEacharts {
         width: 100%;
-        height: 300px;
+        height: 400px;
         margin-top: 20px;
       }
       .title {
@@ -930,12 +1381,11 @@ export default {
         }
         .rightTile {
           padding: 0 15px;
-          background: white;
+          background: #4ea6ff;
           height: 32px;
           line-height: 34px;
           border-radius: 4px;
-          color: #387df7;
-          border: 1px solid #387df7;
+          color: white;
           cursor: pointer;
           img {
             margin-top: -3px;
@@ -943,7 +1393,7 @@ export default {
           }
         }
         .rightTile:hover {
-          background: rgba(64, 158, 255, 0.2);
+          background: rgba(64, 158, 255, 0.76);
         }
       }
       .searchThree {
@@ -962,7 +1412,7 @@ export default {
       }
       .threeMsg {
         display: flex;
-        margin-top: 15px;
+        margin-top: 10px;
         width: 275px;
         margin-left: calc(50% - 133px);
         .threeMsgItem {