From e83b300ea51bde64484151f1623267613ebf9a68 Mon Sep 17 00:00:00 2001
From: "mx00085@163.com" <mx00085@163.com>
Date: Fri, 31 Mar 2023 13:50:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=9F=B1=E7=8A=B6?=
 =?UTF-8?q?=E5=9B=BE=E5=A4=A7=E7=AA=97=E5=8F=A3=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/all.png               | Bin 0 -> 1051 bytes
 src/views/report/Operational.vue | 335 +++++++++++++++++++++++++++++--
 2 files changed, 322 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/all.png

diff --git a/src/assets/all.png b/src/assets/all.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e7d41ee462c8ca75cb733db880376382457166c
GIT binary patch
literal 1051
zcmV+$1mydPP)<h;3K|Lk000e1NJLTq000~S0015c1^@s7NWxAD00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR919H0XL1ONa40RR919smFU03Lm(!T<mRg-Jv~R7efwS3OJ=K@^_ZJ-8DZ
z6YwXou#lLj4RjoZ8o`pnLR%{vdn<Be!)ax&iM5SC(L_tphy~DrCejdMW1)sC#l6GZ
z@qM%NhPUH#APt3+9P{SQ`<eaT&kRb1W4!Up;0J!ak-iD{mEv9ONII9CNIIkCJ1kqD
zZC}&8&`QrQHEUO)0(VB4soW6#Wm}#>L<O45%_BPNc2{VvVa}NB1uR97WYeIR=Bh6-
z7tDeY4tpRnu|bC!!RAD=eKG6)UI1;)l8G~XAo4x0v|hueAJd5$z@k2zzVggo1cT6m
z5Pi}xPCi(xo&1@m->gsGaI?k+Xx<#c0)s%fo>PQ~1b~@9jA_hJAk>~p9$WRiD2~Vc
z!V!e%GxD)5`H|Mq4gBB*N{Ed-#dsrKvumx^bD7E|$V(&tL>ImVnq+;G!uOHFH;Hxq
zt~q7e=~uw{c1C{(4?}_j+<{;V*kh9irxey&>s4dSs04>$=b7~|S9k#>rVljBqgn$%
zEQf!`o<y0s@~8@Bp`*wHz(SU<)el}{E+|sIk1ZyBAEbb#wSHiXIxhKE5f+JQQAIeU
zfJ77_;k`U_;<)KTV3ny4P>LyaIWZMfHfW9`XBv2g!Ai_T0!-dBCwP5$b0JsJK~NpX
z;@aTrL~r3()G*em-*%SgY8T`&ZL70!ilaNO-4VRoXGv%kf)s|+^tW$(HvJ4`P6nGf
zq_}~e1wqv0V$yGwu*RU8>_FM}F=NhyXXDsQ2|~-wTEFc8PRT2Rz`#*uL&~|_n8~9U
zg_INgJ;}eSqfDc$VnVsHP8iByec+Rp8QTx9*B7=ZqElf+_cEFnp?PAXULss@=+fsX
z$;mdiFUO^h=(?mz=*YGhLiz<=z+F1_QiOANmu&LgD-RAw$m6_AxXdC)=oYq`j4HID
zLMci^pj~OAhYiu!zZ;IL(_Eq~i>{(N?f3K*BPg7~YW0e|URdt`nR`MC7yzs3W-|om
z%@9t8$-(+?pjy4P7o2$T?Ywp9X5&jr#*YnC9G}yZz{}%GNxSV&R08K%CX6FqekRNO
z%@LNxyw2OPO%!j0F1}thxm!sffwt22V`{qo-CJ-d95C6_5exBL>X<j(9M+-VMiZdl
z3dQd}VDTHf5LU*R+msXwI(S@275_+*OwjJ`v6q(0vPa>5xJH~jboPIiP~wo*e*i4M
V)|d7!^eq4Y002ovPDHLkV1gL0+nxXb

literal 0
HcmV?d00001

diff --git a/src/views/report/Operational.vue b/src/views/report/Operational.vue
index de88f4f3..adc45af7 100644
--- a/src/views/report/Operational.vue
+++ b/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=()=>{
-      console.log('11111')
-    }
+    const eChartClickRight = async () => {
+      state.modalFlag = true;
+
+      if (state.forRightType == 0) {
+        if (state.forDay?.length > 0) {
+          const dayStart = dayjs(state.forDay[0])
+            .startOf("day")
+            .format("YYYY-MM-DD 00:00:01");
+          const dayEnd = dayjs(state.forDay[1])
+            .endOf("day")
+            .format("YYYY-MM-DD hh:mm:ss");
+          const res = await api.dataStatisticsSelectV2({
+            startTime: dayStart,
+            endTime: dayEnd,
+            dateType: state.forRightType,
+          });
+          if (res) {
+            const xData = [];
+            const course = [];
+            const project = [];
+            const router = [];
+            res?.data?.forEach((item) => {
+              xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
+              item?.list?.forEach((iten) => {
+                if (iten.name == "case") {
+                  course.push(iten.value);
+                } else if (iten.name == "article") {
+                  project.push(iten.value);
+                } else if (iten.name == "question") {
+                  router.push(iten.value);
+                }
+              });
+            });
+            optionsBig.value.xAxis.data = xData;
+            optionsBig.value.series[0].data = course;
+            optionsBig.value.series[1].data = project;
+            optionsBig.value.series[2].data = router;
+            const myChart5 = echarts.init(surface4Ref.value);
+            optionsBig.value && myChart5.setOption(optionsBig.value);
+          }
+        }
+      } else if (state.forRightType == 1) {
+        if (state.forTime?.length > 0) {
+          const monthEnd = dayjs(state.forTime[1])
+            .endOf("month")
+            .format("YYYY-MM-DD hh:mm:ss");
+          const res = await api.dataStatisticsSelectV2({
+            startTime: dayjs(state.forTime[0]).format("YYYY-MM-01 00:00:01"),
+            endTime: monthEnd,
+            dateType: state.forRightType,
+          });
+          if (res) {
+            const xData = [];
+            const course = [];
+            const project = [];
+            const router = [];
+            res?.data?.forEach((item) => {
+              xData.push(item.xdata);
+              item?.list?.forEach((iten) => {
+                if (iten.name == "case") {
+                  course.push(iten.value);
+                } else if (iten.name == "article") {
+                  project.push(iten.value);
+                } else if (iten.name == "question") {
+                  router.push(iten.value);
+                }
+              });
+            });
+            optionsBig.value.xAxis.data = xData;
+            optionsBig.value.series[0].data = course;
+            optionsBig.value.series[1].data = project;
+            optionsBig.value.series[2].data = router;
+            const myChart5 = echarts.init(surface4Ref.value);
+            optionsBig.value && myChart5.setOption(optionsBig.value);
+          }
+        }
+      }
+    };
+    const eChartClickLeft = async () => {
+      state.modalFlag = true;
+      if (state.threeLeftType == 1) {
+        if (state.threeTime?.length > 0) {
+          const monthEnd = dayjs(state.threeTime[1])
+            .endOf("month")
+            .format("YYYY-MM-DD hh:mm:ss");
+          const res = await api.dataStatisticsSelectV1({
+            startTime: dayjs(state.threeTime[0]).format("YYYY-MM-01 00:00:01"),
+            endTime: monthEnd,
+            dateType: state.threeLeftType,
+          });
+          if (res) {
+            const xData = [];
+            const course = [];
+            const project = [];
+            const router = [];
+            res?.data?.forEach((item) => {
+              xData.push(item.xdata);
+              item?.list?.forEach((iten) => {
+                if (iten.name == "course") {
+                  course.push(iten.value);
+                } else if (iten.name == "project") {
+                  project.push(iten.value);
+                } else if (iten.name == "router") {
+                  router.push(iten.value);
+                }
+              });
+            });
+            options1Big.value.xAxis.data = xData;
+            options1Big.value.series[0].data = course;
+            options1Big.value.series[1].data = project;
+            options1Big.value.series[2].data = router;
+            const myChart5 = echarts.init(surface4Ref.value);
+            optionsBig.value && myChart5.setOption(options1Big.value);
+          }
+        }
+      } else if (state.threeLeftType == 0) {
+        if (state.threeDay?.length > 0) {
+          const dayStart = dayjs(state.threeDay[0])
+            .startOf("day")
+            .format("YYYY-MM-DD 00:00:01");
+          const dayEnd = dayjs(state.threeDay[1]).endOf("day").format("YYYY-MM-DD hh:mm:ss");
+          const res = await api.dataStatisticsSelectV1({
+            startTime: dayStart,
+            endTime: dayEnd,
+            dateType: state.threeLeftType,
+          });
+          if (res) {
+            const xData = [];
+            const course = [];
+            const project = [];
+            const router = [];
+            res?.data?.forEach((item) => {
+              xData.push(item.xdata.slice(item.xdata.indexOf("-") + 1));
+              item?.list?.forEach((iten) => {
+                if (iten.name == "course") {
+                  course.push(iten.value);
+                } else if (iten.name == "project") {
+                  project.push(iten.value);
+                } else if (iten.name == "router") {
+                  router.push(iten.value);
+                }
+              });
+            });
+            options1Big.value.xAxis.data = xData;
+            options1Big.value.series[0].data = course;
+            options1Big.value.series[1].data = project;
+            options1Big.value.series[2].data = router;
+            const myChart5 = echarts.init(surface4Ref.value);
+            optionsBig.value && myChart5.setOption(options1Big.value);
+          }
+        }
+      }
+    };
     const exportTwoData = async () => {
       if (state.towParmasn.dateType == 0) {
         if (!state.towParmasn.day?.length || state.towParmasn.day?.length < 1) {
@@ -611,7 +777,6 @@ export default {
           options1.value.series[1].data = project;
           options1.value.series[2].data = router;
           createEcharts3();
-          
         }
       }
     };
@@ -1073,6 +1238,142 @@ export default {
       ],
     });
 
+    const optionsBig = ref({
+      tooltip: {
+        trigger: "axis",
+      },
+      grid: {
+        top: "6%",
+        left: "0%",
+        right: "0%",
+        bottom: "15%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        data: [],
+        // axisLabel: {
+        //   interval: 0,
+        // },
+      },
+      yAxis: {
+        type: "value",
+      },
+      series: [
+        {
+          name: "案例",
+          data: [],
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#1487F9", //改变折线点的颜色
+            },
+          },
+        },
+        {
+          name: "文章",
+          data: [],
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#00CECB", //改变折线点的颜色
+            },
+          },
+        },
+        {
+          name: "问答",
+          data: [],
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#FFA71A", //改变折线点的颜色
+            },
+          },
+        },
+      ],
+      dataZoom: [
+        {
+          type: "slider",
+          show: true,
+          xAxisIndex: [0],
+          // start: 1,
+          // end: 35,
+          // startValue: 0,
+          // endValue: 5,
+          // brushSelect: false,
+          showDetail: false,
+          // zoomLock: true,
+        },
+      ],
+    });
+    const options1Big = ref({
+      tooltip: {
+        trigger: "axis",
+      },
+      grid: {
+        top: "6%",
+        left: "0%",
+        right: "0%",
+        bottom: "15%",
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        data: [],
+        // axisLabel: {
+        //   interval: 0,
+        // },
+      },
+      yAxis: {
+        type: "value",
+      },
+      series: [
+        {
+          name: "课程数",
+          data: [],
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#1487F9", //改变折线点的颜色
+            },
+          },
+        },
+        {
+          name: "项目数",
+          data: [],
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#00CECB", //改变折线点的颜色
+            },
+          },
+        },
+        {
+          name: "学习路径图",
+          data: [],
+          type: "bar",
+          itemStyle: {
+            normal: {
+              color: "#FFA71A", //改变折线点的颜色
+            },
+          },
+        },
+      ],
+      dataZoom: [
+        {
+          type: "slider",
+          show: true,
+          xAxisIndex: [0],
+          // start: 1,
+          // end: 35,
+          // startValue: 0,
+          // endValue: 5,
+          // brushSelect: false,
+          showDetail: false,
+          // zoomLock: true,
+        },
+      ],
+    });
     // 生成echarts的方法
     // const createEcharts1 = () => {
     //   // 图表1
@@ -1084,21 +1385,27 @@ export default {
       // 图表2
       const myChart1 = echarts.init(surface1Ref.value);
       option.value && myChart1.setOption(option.value);
-      window.addEventListener('resize',()=>{myChart1.resize()})
+      window.addEventListener("resize", () => {
+        myChart1.resize();
+      });
     };
     // 生成echarts的方法
     const createEcharts3 = () => {
       // 图表3左侧图表
       const myChart2 = echarts.init(surface2Ref.value);
       options1.value && myChart2.setOption(options1.value);
-      window.addEventListener('resize',()=>{myChart2.resize()})
+      window.addEventListener("resize", () => {
+        myChart2.resize();
+      });
     };
     // 生成echarts的方法
     const createEcharts4 = () => {
       // 图表3 右侧图表
       const myChart3 = echarts.init(surface3Ref.value);
       options2.value && myChart3.setOption(options2.value);
-      window.addEventListener('resize',()=>{myChart3.resize()})
+      window.addEventListener("resize", () => {
+        myChart3.resize();
+      });
     };
     const initTime = () => {
       const monthEnd = dayjs(new Date()).endOf("year").format("YYYY-MM");
@@ -1144,6 +1451,8 @@ export default {
       twoSelectChange,
       modalChange,
       exportTwoData,
+      surface4Ref,
+      eChartClickLeft,
     };
   },
 };