增加资源访问量

src/modules/resource/lessonplan/components/ViewBottom.vue → src/components/DataAccess.vue

 <script setup lang="ts">
 import * as echarts from 'echarts'
 const echartsRef = ref()
+const props = defineProps({
+  data: {
+    type: Object
+  }
+})
 onMounted(() => {
   const myEcharts = echarts.init(echartsRef.value)
   const option = {
@@ -10,7 +15,7 @@ onMounted(() => {
       right: 30
     },
     xAxis: {
-      data: ['2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21'],
+      data: props.data?.recently_records_map.map((item: any) => item.time),
       axisTick: {
         show: false
       }
@@ -19,49 +24,27 @@ onMounted(() => {
     yAxis: {},
     series: [
       {
+        name: '访问量',
         type: 'bar',
         barWidth: '18',
-        data: [5, 20, 36, 10, 10, 20]
+        data: props.data?.recently_records_map.map((item: any) => item.num)
       }
     ]
   }
   //设置配置
   myEcharts.setOption(option)
 })
-const listOptions = {
-  columns: [
-    { label: '访问时间', prop: 'date', align: 'center' },
-    { label: '姓名', prop: 'name', align: 'center' },
-    { label: '所在项目', prop: 'project', align: 'center' },
-    { label: '访问时长', prop: 'duration', align: 'center' }
-  ],
-  data: [
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    },
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    },
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    },
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    }
-  ]
-}
+const listOptions = $computed(() => {
+  return {
+    columns: [
+      { label: '访问时间', prop: 'created_at', align: 'center' },
+      { label: '姓名', prop: 'sso_id_name', align: 'center' },
+      { label: '所在项目', prop: 'project_id_name', align: 'center' },
+      { label: '访问时长', prop: 'page_dwell_time', align: 'center' }
+    ],
+    data: props.data?.recently_records
+  }
+})
 </script>
 
 <template>
@@ -95,8 +78,8 @@ const listOptions = {
 .data-box {
   display: flex;
   .echart {
-    flex: 1;
     width: 65%;
+    flex: 1;
     height: 369px;
     box-sizing: border-box;
     border: 1px solid #e0e0e0;
@@ -110,8 +93,9 @@ const listOptions = {
     }
   }
   .label-box {
-    box-sizing: border-box;
     width: 25%;
+
+    box-sizing: border-box;
     flex: 1;
     height: 369px;
     border: 1px solid #e0e0e0;

src/components/base/PreviewFiles.vue

@@ -85,6 +85,7 @@ if (props.item?.url?.indexOf('.pdf') !== -1 || props.item?.url?.indexOf('.txt')
   .img_zip {
     width: 100px;
     height: 100px;
+    margin: auto;
   }
   .zip_tips {
     font-size: 14px;

src/modules/course/my/components/ViewDetailsVideo.vue

 <script setup lang="ts">
 import { getVideoDetails } from '../api'
 import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
-// import PreviewFiles from '@/components/base/PreviewFiles.vue'
 import ViewCourseChapter from './ViewCourseChapter.vue'
 
 const props: any = defineProps({

src/modules/course/my/views/ViewDetails.vue

@@ -127,7 +127,7 @@ const listOptions = computed(() => {
       { label: '总分', prop: 'paper_total_score', align: 'center' },
       { label: '及格分数', prop: 'pass_score', align: 'center' },
       { label: '更新时间', prop: 'updated_at', align: 'center' },
-      { label: '操作', slots: 'table-operate', align: 'center' , fixed: 'right'}
+      { label: '操作', slots: 'table-operate', align: 'center', fixed: 'right' }
     ],
     data: resourceData.exam
   }
@@ -244,14 +244,14 @@ const handleExamDetail = (row: any) => {
               <PreviewFiles
                 v-for="item in resourceData.courseware"
                 :key="item.id"
-                :url="item.url"
+                :item="item"
                 style="margin-top: 10px"
               ></PreviewFiles>
               <el-empty description="暂无数据" v-if="!resourceData.courseware.length" />
             </el-tab-pane>
             <el-tab-pane label="教案" name="2">
               <PreviewFiles
-                :url="item.url"
+                :item="item"
                 v-for="item in resourceData.lessonPlan"
                 :key="item.id"
                 style="margin-top: 10px"

src/modules/resource/courseware/components/ViewBottom.vue

-<script setup lang="ts">
-import * as echarts from 'echarts'
-const echartsRef = ref()
-onMounted(() => {
-  const myEcharts = echarts.init(echartsRef.value)
-  const option = {
-    grid: {
-      bottom: 30,
-      left: 30,
-      right: 30
-    },
-    xAxis: {
-      data: ['2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21'],
-      axisTick: {
-        show: false
-      }
-    },
-    color: ['#BF9D6B'],
-    yAxis: {},
-    series: [
-      {
-        type: 'bar',
-        barWidth: '18',
-        data: [5, 20, 36, 10, 10, 20]
-      }
-    ]
-  }
-  //设置配置
-  myEcharts.setOption(option)
-})
-const listOptions = {
-  columns: [
-    { label: '访问时间', prop: 'date', align: 'center' },
-    { label: '姓名', prop: 'name', align: 'center' },
-    { label: '所在项目', prop: 'project', align: 'center' },
-    { label: '访问时长', prop: 'duration', align: 'center' }
-  ],
-  data: [
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    },
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    },
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    },
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    }
-  ]
-}
-</script>
-
-<template>
-  <div class="data-box">
-    <div class="echart">
-      <div class="name">访问量/关联量一周走势图</div>
-      <div
-        class="echarts"
-        ref="echartsRef"
-        :style="{
-          width: '600px',
-          height: '300px'
-        }"
-      ></div>
-    </div>
-    <div class="label-box">
-      <div class="name">最近访问</div>
-      <AppList v-bind="listOptions" ref="appList" stripe></AppList>
-    </div>
-  </div>
-  <!-- <div
-    class="echarts"
-    ref="echartsRef"
-    :style="{
-      width: '600px',
-      height: '300px'
-    }"
-  ></div> -->
-</template>
-<style lang="scss" scoped>
-.data-box {
-  display: flex;
-  .echart {
-    width: 65%;
-    flex: 1;
-    height: 369px;
-    box-sizing: border-box;
-    border: 1px solid #e0e0e0;
-    border-radius: 10px;
-    margin-right: 10px;
-    padding: 20px;
-    .name {
-      font-size: 16px;
-      line-height: 100%;
-      color: #333333;
-    }
-  }
-  .label-box {
-    width: 25%;
-
-    box-sizing: border-box;
-    flex: 1;
-    height: 369px;
-    border: 1px solid #e0e0e0;
-    border-radius: 10px;
-    margin-left: 10px;
-    padding: 20px;
-    .name {
-      font-size: 16px;
-      line-height: 100%;
-      color: #333333;
-    }
-  }
-}
-</style>

src/modules/resource/courseware/components/ViewCenter.vue

@@ -40,7 +40,7 @@ const props = defineProps({
       </div>
     </div>
     <div class="file-box">
-      <PreviewFiles :url="props.data?.url"></PreviewFiles>
+      <PreviewFiles :item="props.data"></PreviewFiles>
     </div>
   </div>
 </template>

src/modules/resource/courseware/views/View.vue

 <script setup lang="ts">
 import ViewTop from '../components/ViewTop.vue'
 import ViewCenter from '../components/ViewCenter.vue'
-import ViewBottom from '../components/ViewBottom.vue'
 import Operation from '../components/Operation.vue'
 import ResourceCourseList from '@/components/ResourceCourseList.vue'
+import DataAccess from '@/components/DataAccess.vue'
+
 
 import { getCourseDetails } from '../api'
 
@@ -22,7 +23,7 @@ getCourseDetails({ id: id }).then(res => {
     <Operation :data="courseDetails"></Operation>
     <ViewTop v-if="Object.keys(courseDetails).length" :data="courseDetails"></ViewTop>
     <ViewCenter v-if="Object.keys(courseDetails).length" :data="courseDetails"></ViewCenter>
-    <ViewBottom></ViewBottom>
+    <DataAccess v-if="Object.keys(courseDetails).length" :data="courseDetails"></DataAccess>
   </AppCard>
   <ResourceCourseList title="课件资源关联使用课程" :list="courseDetails.course_list"></ResourceCourseList>
 </template>

src/modules/resource/lessonplan/components/ViewCenter.vue

@@ -40,7 +40,7 @@ const props = defineProps({
       </div>
     </div>
     <div class="file-box">
-      <PreviewFiles :url="props.data?.url"></PreviewFiles>
+      <PreviewFiles :item="props.data"></PreviewFiles>
     </div>
   </div>
 </template>

src/modules/resource/lessonplan/views/View.vue

 <script setup lang="ts">
 import ViewTop from '../components/ViewTop.vue'
 import ViewCenter from '../components/ViewCenter.vue'
-import ViewBottom from '../components/ViewBottom.vue'
 import Operation from '../components/Operation.vue'
 import ResourceCourseList from '@/components/ResourceCourseList.vue'
+import DataAccess from '@/components/DataAccess.vue'
 
 import { getLessonDetails } from '../api'
 
@@ -19,10 +19,10 @@ getLessonDetails({ id: id }).then((res: any) => {
 
 <template>
   <AppCard title="教案资源信息">
-    <Operation :data="lessonDetails"></Operation>
-    <ViewTop :data="lessonDetails"></ViewTop>
+    <Operation v-if="Object.keys(lessonDetails).length" :data="lessonDetails"></Operation>
+    <ViewTop v-if="Object.keys(lessonDetails).length" :data="lessonDetails"></ViewTop>
     <ViewCenter v-if="Object.keys(lessonDetails).length" :data="lessonDetails"></ViewCenter>
-    <ViewBottom></ViewBottom>
+    <DataAccess v-if="Object.keys(lessonDetails).length" :data="lessonDetails"></DataAccess>
   </AppCard>
   <ResourceCourseList title="教案资源关联使用课程" :list="lessonDetails.course_list"></ResourceCourseList>
 </template>

src/modules/resource/other/components/ViewBottom.vue

-<script setup lang="ts">
-import * as echarts from 'echarts'
-const echartsRef = ref()
-onMounted(() => {
-  const myEcharts = echarts.init(echartsRef.value)
-  const option = {
-    grid: {
-      bottom: 30,
-      left: 30,
-      right: 30
-    },
-    xAxis: {
-      data: ['2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21'],
-      axisTick: {
-        show: false
-      }
-    },
-    color: ['#BF9D6B'],
-    yAxis: {},
-    series: [
-      {
-        type: 'bar',
-        barWidth: '18',
-        data: [5, 20, 36, 10, 10, 20]
-      }
-    ]
-  }
-  //设置配置
-  myEcharts.setOption(option)
-})
-const listOptions = {
-  columns: [
-    { label: '访问时间', prop: 'date', align: 'center' },
-    { label: '姓名', prop: 'name', align: 'center' },
-    { label: '所在项目', prop: 'project', align: 'center' },
-    { label: '访问时长', prop: 'duration', align: 'center' }
-  ],
-  data: [
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    },
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    },
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    },
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    }
-  ]
-}
-</script>
-
-<template>
-  <div class="data-box">
-    <div class="echart">
-      <div class="name">访问量/关联量一周走势图</div>
-      <div
-        class="echarts"
-        ref="echartsRef"
-        :style="{
-          width: '600px',
-          height: '300px'
-        }"
-      ></div>
-    </div>
-    <div class="label-box">
-      <div class="name">最近访问</div>
-      <AppList v-bind="listOptions" ref="appList" stripe></AppList>
-    </div>
-  </div>
-  <!-- <div
-    class="echarts"
-    ref="echartsRef"
-    :style="{
-      width: '600px',
-      height: '300px'
-    }"
-  ></div> -->
-</template>
-<style lang="scss" scoped>
-.data-box {
-  display: flex;
-  .echart {
-    flex: 1;
-    width: 65%;
-    height: 369px;
-    box-sizing: border-box;
-    border: 1px solid #e0e0e0;
-    border-radius: 10px;
-    margin-right: 10px;
-    padding: 20px;
-    .name {
-      font-size: 16px;
-      line-height: 100%;
-      color: #333333;
-    }
-  }
-  .label-box {
-    box-sizing: border-box;
-    width: 25%;
-
-    flex: 1;
-    height: 369px;
-    border: 1px solid #e0e0e0;
-    border-radius: 10px;
-    margin-left: 10px;
-    padding: 20px;
-    .name {
-      font-size: 16px;
-      line-height: 100%;
-      color: #333333;
-    }
-  }
-}
-</style>

src/modules/resource/other/components/ViewCenter.vue

@@ -40,7 +40,7 @@ const props = defineProps({
       </div>
     </div>
     <div class="file-box">
-      <PreviewFiles :url="props.data?.url"></PreviewFiles>
+      <PreviewFiles :item="props.data"></PreviewFiles>
     </div>
   </div>
 </template>

src/modules/resource/other/views/View.vue

 <script setup lang="ts">
 import ViewTop from '../components/ViewTop.vue'
 import ViewCenter from '../components/ViewCenter.vue'
-import ViewBottom from '../components/ViewBottom.vue'
 import Operation from '../components/Operation.vue'
 import ResourceCourseList from '@/components/ResourceCourseList.vue'
+import DataAccess from '@/components/DataAccess.vue'
 
 import { getOtherDetails } from '../api'
 
@@ -20,10 +20,10 @@ getOtherDetails({ id: id }).then((res: any) => {
 
 <template>
   <AppCard title="其他资源信息">
-    <Operation :data="otherDetails"></Operation>
-    <ViewTop :data="otherDetails"></ViewTop>
+    <Operation v-if="Object.keys(otherDetails).length" :data="otherDetails"></Operation>
+    <ViewTop v-if="Object.keys(otherDetails).length" :data="otherDetails"></ViewTop>
     <ViewCenter v-if="Object.keys(otherDetails).length" :data="otherDetails"></ViewCenter>
-    <ViewBottom></ViewBottom>
+    <DataAccess v-if="Object.keys(otherDetails).length" :data="otherDetails"></DataAccess>
   </AppCard>
   <ResourceCourseList title="其他资源关联使用课程" :list="otherDetails.course_list"></ResourceCourseList>
 </template>

src/modules/resource/video/components/ViewBottom.vue

-<script setup lang="ts">
-import * as echarts from 'echarts'
-const echartsRef = ref()
-onMounted(() => {
-  const myEcharts = echarts.init(echartsRef.value)
-  const option = {
-    grid: {
-      bottom: 30,
-      left: 30,
-      right: 30
-    },
-    xAxis: {
-      data: ['2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21', '2022-02-21'],
-      axisTick: {
-        show: false
-      }
-    },
-    color: ['#BF9D6B'],
-    yAxis: {},
-    series: [
-      {
-        type: 'bar',
-        barWidth: '18',
-        data: [5, 20, 36, 10, 10, 20, 5]
-      }
-    ]
-  }
-  //设置配置
-  myEcharts.setOption(option)
-})
-const listOptions = {
-  columns: [
-    { label: '访问时间', prop: 'date', align: 'center' },
-    { label: '姓名', prop: 'name', align: 'center' },
-    { label: '所在项目', prop: 'project', align: 'center' },
-    { label: '访问时长', prop: 'duration', align: 'center' }
-  ],
-  data: [
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    },
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    },
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    },
-    {
-      duration: '120分钟',
-      date: '2022-06-15',
-      name: '王重阳',
-      project: '资源管理系统'
-    }
-  ]
-}
-</script>
-
-<template>
-  <div class="data-box">
-    <div class="echart">
-      <div class="name">访问量/关联量一周走势图</div>
-      <div
-        class="echarts"
-        ref="echartsRef"
-        :style="{
-          width: '600px',
-          height: '300px'
-        }"
-      ></div>
-    </div>
-    <div class="label-box">
-      <div class="name">最近访问</div>
-      <AppList v-bind="listOptions" ref="appList" stripe></AppList>
-    </div>
-  </div>
-</template>
-<style lang="scss" scoped>
-.data-box {
-  display: flex;
-  .echart {
-    flex: 1;
-    width: 65%;
-    height: 369px;
-    box-sizing: border-box;
-    border: 1px solid #e0e0e0;
-    border-radius: 10px;
-    margin-right: 10px;
-    padding: 20px;
-    .name {
-      font-size: 16px;
-      line-height: 100%;
-      color: #333333;
-    }
-  }
-  .label-box {
-    width: 25%;
-    box-sizing: border-box;
-    flex: 1;
-    height: 369px;
-    border: 1px solid #e0e0e0;
-    border-radius: 10px;
-    margin-left: 10px;
-    padding: 20px;
-    .name {
-      font-size: 16px;
-      line-height: 100%;
-      color: #333333;
-    }
-  }
-}
-</style>

src/modules/resource/video/views/View.vue

 <script setup lang="ts">
 import ViewTop from '../components/ViewTop.vue'
 import ViewCenter from '../components/ViewCenter.vue'
-import ViewBottom from '../components/ViewBottom.vue'
 import Operation from '../components/Operation.vue'
 import ResourceCourseList from '@/components/ResourceCourseList.vue'
+import DataAccess from '@/components/DataAccess.vue'
 import { getVideoDetails } from '../api'
 
 // 路由
@@ -19,10 +19,10 @@ getVideoDetails({ id: id }).then(res => {
 
 <template>
   <AppCard title="视频资源信息">
-    <Operation :data="videoDetails"></Operation>
-    <ViewTop :data="videoDetails"></ViewTop>
+    <Operation v-if="Object.keys(videoDetails).length" :data="videoDetails"></Operation>
+    <ViewTop v-if="Object.keys(videoDetails).length" :data="videoDetails"></ViewTop>
     <ViewCenter v-if="Object.keys(videoDetails).length" :data="videoDetails"></ViewCenter>
-    <ViewBottom></ViewBottom>
+    <DataAccess v-if="Object.keys(videoDetails).length" :data="videoDetails"></DataAccess>
   </AppCard>
   <ResourceCourseList title="视频资源关联使用课程" :list="videoDetails.course_list"></ResourceCourseList>
 </template>

src/modules/teach/qa/components/ReplyDialog.vue

 <script lang="ts" setup>
+// import type { UploadInstance } from 'element-plus'
 const emit = defineEmits<Emits>()
+// const uploadRef = ref<UploadInstance>()
 
+// const submitUpload = () => {
+//   uploadRef.value!.submit()
+// }
 defineProps({
   isShowReplyDialog: {
     type: Boolean
@@ -95,9 +100,22 @@ const replyList = ref([
           <div class="right_center">
             <div class="tit">回答内容： {{ item.reply_con }}</div>
           </div>
+          <!-- <el-input></el-input>
+          <el-upload
+            ref="uploadRef"
+            class="upload-demo"
+            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+            :auto-upload="false"
+            style="margin-top: 10px"
+          >
+            <template #trigger>
+              <el-button type="primary">select file</el-button>
+            </template>
+          </el-upload> -->
         </div>
       </div>
     </div>
+    <!-- <el-button type="primary" style="display: flex; justify-content: center">提交回复</el-button> -->
   </el-dialog>
 </template>