Merge branch 'dev_m' into develop

src/views/report/Operational.vue

@@ -172,9 +172,14 @@
     <div class="echartsThree">
       <div class="left">
         <div class="title">
-          <div class="leftTile">学习内容</div>
+          <div class="leftTile">
+            学习内容 <span @click="eChartClickLeft"><img src="../../assets/all.png" alt="" style="width:14px;height:14px;cursor: pointer;"></span>
+          </div>
           <div class="rightTile" @click="exportThree">
-            <img src="../../assets/images/coursewareManage/export1.png" alt="" />
+            <img
+              src="../../assets/images/coursewareManage/export1.png"
+              alt=""
+            />
             <span>导出学习内容</span>
           </div>
         </div>
@@ -236,9 +241,14 @@
       </div>
       <div class="right">
         <div class="title">
-          <div class="leftTile">学习内容</div>
+          <div class="leftTile">
+            学习内容 <span @click="eChartClickRight"><img src="../../assets/all.png" alt="" style="width:14px;height:14px;cursor: pointer;"></span>
+          </div>
           <div class="rightTile" @click="exportRight">
-            <img src="../../assets/images/coursewareManage/export1.png" alt="" />
+            <img
+              src="../../assets/images/coursewareManage/export1.png"
+              alt=""
+            />
             <span>导出学习内容</span>
           </div>
         </div>
@@ -279,7 +289,7 @@
             </div>
           </div>
         </div>
-        <div class="leftEacharts" ref="surface3Ref" @click="eChartClickRight"></div>
+        <div class="leftEacharts" ref="surface3Ref"></div>
         <div class="threeMsg">
           <div class="threeMsgItem">
             <div class="classNum" />
@@ -297,6 +307,11 @@
       </div>
     </div>
   </div>
+  <div>
+    <a-modal v-model:visible="modalFlag" title="学习内容" style="width: 1100px">
+      <div style="height: 500px" ref="surface4Ref"></div>
+    </a-modal>
+  </div>
 </template>
 <script>
 import * as echarts from "echarts";
@@ -325,20 +340,171 @@ export default {
         time: [],
         day: [],
       },
+      modalFlag: false,
     });
     const surfaceRef = ref(null);
     const surface1Ref = ref(null);
     const surface2Ref = ref(null);
     const surface3Ref = ref(null);
-
+    const surface4Ref = ref(null);
     const dates = ref();
     const hackValue = ref();
 
     const datess = ref();
     const hackValues = ref();
-    const eChartClickRight=()=>{
+    const eChartClickRight = async () => {
-      console.log('11111')
+      state.modalFlag = true;
+
+      if (state.forRightType == 0) {
+        if (state.forDay?.length > 0) {
+          const dayStart = dayjs(state.forDay[0])
+            .startOf("day")
+            .format("YYYY-MM-DD 00:00:01");
+          const dayEnd = dayjs(state.forDay[1])
+            .endOf("day")
+            .format("YYYY-MM-DD hh:mm:ss");
+          const res = await api.dataStatisticsSelectV2({
+            startTime: dayStart,
+            endTime: dayEnd,
+            dateType: state.forRightType,
+          });
+          if (res) {
+            const xData = [];
+            const course = [];
+            const project = [];
+            const router = [];
+            res?.data?.forEach((item) => {
+              xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
+              item?.list?.forEach((iten) => {
+                if (iten.name == "case") {
+                  course.push(iten.value);
+                } else if (iten.name == "article") {
+                  project.push(iten.value);
+                } else if (iten.name == "question") {
+                  router.push(iten.value);
                 }
+              });
+            });
+            optionsBig.value.xAxis.data = xData;
+            optionsBig.value.series[0].data = course;
+            optionsBig.value.series[1].data = project;
+            optionsBig.value.series[2].data = router;
+            const myChart5 = echarts.init(surface4Ref.value);
+            optionsBig.value && myChart5.setOption(optionsBig.value);
+          }
+        }
+      } else if (state.forRightType == 1) {
+        if (state.forTime?.length > 0) {
+          const monthEnd = dayjs(state.forTime[1])
+            .endOf("month")
+            .format("YYYY-MM-DD hh:mm:ss");
+          const res = await api.dataStatisticsSelectV2({
+            startTime: dayjs(state.forTime[0]).format("YYYY-MM-01 00:00:01"),
+            endTime: monthEnd,
+            dateType: state.forRightType,
+          });
+          if (res) {
+            const xData = [];
+            const course = [];
+            const project = [];
+            const router = [];
+            res?.data?.forEach((item) => {
+              xData.push(item.xdata);
+              item?.list?.forEach((iten) => {
+                if (iten.name == "case") {
+                  course.push(iten.value);
+                } else if (iten.name == "article") {
+                  project.push(iten.value);
+                } else if (iten.name == "question") {
+                  router.push(iten.value);
+                }
+              });
+            });
+            optionsBig.value.xAxis.data = xData;
+            optionsBig.value.series[0].data = course;
+            optionsBig.value.series[1].data = project;
+            optionsBig.value.series[2].data = router;
+            const myChart5 = echarts.init(surface4Ref.value);
+            optionsBig.value && myChart5.setOption(optionsBig.value);
+          }
+        }
+      }
+    };
+    const eChartClickLeft = async () => {
+      state.modalFlag = true;
+      if (state.threeLeftType == 1) {
+        if (state.threeTime?.length > 0) {
+          const monthEnd = dayjs(state.threeTime[1])
+            .endOf("month")
+            .format("YYYY-MM-DD hh:mm:ss");
+          const res = await api.dataStatisticsSelectV1({
+            startTime: dayjs(state.threeTime[0]).format("YYYY-MM-01 00:00:01"),
+            endTime: monthEnd,
+            dateType: state.threeLeftType,
+          });
+          if (res) {
+            const xData = [];
+            const course = [];
+            const project = [];
+            const router = [];
+            res?.data?.forEach((item) => {
+              xData.push(item.xdata);
+              item?.list?.forEach((iten) => {
+                if (iten.name == "course") {
+                  course.push(iten.value);
+                } else if (iten.name == "project") {
+                  project.push(iten.value);
+                } else if (iten.name == "router") {
+                  router.push(iten.value);
+                }
+              });
+            });
+            options1Big.value.xAxis.data = xData;
+            options1Big.value.series[0].data = course;
+            options1Big.value.series[1].data = project;
+            options1Big.value.series[2].data = router;
+            const myChart5 = echarts.init(surface4Ref.value);
+            optionsBig.value && myChart5.setOption(options1Big.value);
+          }
+        }
+      } else if (state.threeLeftType == 0) {
+        if (state.threeDay?.length > 0) {
+          const dayStart = dayjs(state.threeDay[0])
+            .startOf("day")
+            .format("YYYY-MM-DD 00:00:01");
+          const dayEnd = dayjs(state.threeDay[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
+          const res = await api.dataStatisticsSelectV1({
+            startTime: dayStart,
+            endTime: dayEnd,
+            dateType: state.threeLeftType,
+          });
+          if (res) {
+            const xData = [];
+            const course = [];
+            const project = [];
+            const router = [];
+            res?.data?.forEach((item) => {
+              xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
+              item?.list?.forEach((iten) => {
+                if (iten.name == "course") {
+                  course.push(iten.value);
+                } else if (iten.name == "project") {
+                  project.push(iten.value);
+                } else if (iten.name == "router") {
+                  router.push(iten.value);
+                }
+              });
+            });
+            options1Big.value.xAxis.data = xData;
+            options1Big.value.series[0].data = course;
+            options1Big.value.series[1].data = project;
+            options1Big.value.series[2].data = router;
+            const myChart5 = echarts.init(surface4Ref.value);
+            optionsBig.value && myChart5.setOption(options1Big.value);
+          }
+        }
+      }
+    };
     const exportTwoData = async () => {
       if (state.towParmasn.dateType == 0) {
         if (!state.towParmasn.day?.length || state.towParmasn.day?.length < 1) {
@@ -611,7 +777,6 @@ export default {
           options1.value.series[1].data = project;
           options1.value.series[2].data = router;
           createEcharts3();
-          
         }
       }
     };
@@ -1073,6 +1238,142 @@ export default {
       ],
     });
 
+    const optionsBig = ref({
+      tooltip: {
+        trigger: "axis",
+      },
+      grid: {
+        top: "6%",
+        left: "0%",
+        right: "0%",
+        bottom: "15%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        data: [],
+        // axisLabel: {
+        //   interval: 0,
+        // },
+      },
+      yAxis: {
+        type: "value",
+      },
+      series: [
+        {
+          name: "案例",
+          data: [],
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#1487F9", //改变折线点的颜色
+            },
+          },
+        },
+        {
+          name: "文章",
+          data: [],
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#00CECB", //改变折线点的颜色
+            },
+          },
+        },
+        {
+          name: "问答",
+          data: [],
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#FFA71A", //改变折线点的颜色
+            },
+          },
+        },
+      ],
+      dataZoom: [
+        {
+          type: "slider",
+          show: true,
+          xAxisIndex: [0],
+          // start: 1,
+          // end: 35,
+          // startValue: 0,
+          // endValue: 5,
+          // brushSelect: false,
+          showDetail: false,
+          // zoomLock: true,
+        },
+      ],
+    });
+    const options1Big = ref({
+      tooltip: {
+        trigger: "axis",
+      },
+      grid: {
+        top: "6%",
+        left: "0%",
+        right: "0%",
+        bottom: "15%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        data: [],
+        // axisLabel: {
+        //   interval: 0,
+        // },
+      },
+      yAxis: {
+        type: "value",
+      },
+      series: [
+        {
+          name: "课程数",
+          data: [],
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#1487F9", //改变折线点的颜色
+            },
+          },
+        },
+        {
+          name: "项目数",
+          data: [],
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#00CECB", //改变折线点的颜色
+            },
+          },
+        },
+        {
+          name: "学习路径图",
+          data: [],
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#FFA71A", //改变折线点的颜色
+            },
+          },
+        },
+      ],
+      dataZoom: [
+        {
+          type: "slider",
+          show: true,
+          xAxisIndex: [0],
+          // start: 1,
+          // end: 35,
+          // startValue: 0,
+          // endValue: 5,
+          // brushSelect: false,
+          showDetail: false,
+          // zoomLock: true,
+        },
+      ],
+    });
     // 生成echarts的方法
     // const createEcharts1 = () => {
     //   // 图表1
@@ -1084,21 +1385,27 @@ export default {
       // 图表2
       const myChart1 = echarts.init(surface1Ref.value);
       option.value && myChart1.setOption(option.value);
-      window.addEventListener('resize',()=>{myChart1.resize()})
+      window.addEventListener("resize", () => {
+        myChart1.resize();
+      });
     };
     // 生成echarts的方法
     const createEcharts3 = () => {
       // 图表3左侧图表
       const myChart2 = echarts.init(surface2Ref.value);
       options1.value && myChart2.setOption(options1.value);
-      window.addEventListener('resize',()=>{myChart2.resize()})
+      window.addEventListener("resize", () => {
+        myChart2.resize();
+      });
     };
     // 生成echarts的方法
     const createEcharts4 = () => {
       // 图表3 右侧图表
       const myChart3 = echarts.init(surface3Ref.value);
       options2.value && myChart3.setOption(options2.value);
-      window.addEventListener('resize',()=>{myChart3.resize()})
+      window.addEventListener("resize", () => {
+        myChart3.resize();
+      });
     };
     const initTime = () => {
       const monthEnd = dayjs(new Date()).endOf("year").format("YYYY-MM");
@@ -1144,6 +1451,8 @@ export default {
       twoSelectChange,
       modalChange,
       exportTwoData,
+      surface4Ref,
+      eChartClickLeft,
     };
   },
 };