提交 2f52ad9a authored 作者: matian's avatar matian

增加资源访问量

上级 a1c0cba1
<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 = {
const listOptions = $computed(() => {
return {
columns: [
{ label: '访问时间', prop: 'date', align: 'center' },
{ label: '姓名', prop: 'name', align: 'center' },
{ label: '所在项目', prop: 'project', align: 'center' },
{ label: '访问时长', prop: 'duration', align: 'center' }
{ 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: [
{
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: '资源管理系统'
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;
......
......@@ -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;
......
<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({
......
......@@ -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"
......
<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>
......@@ -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>
......
<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>
......@@ -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>
......
<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>
<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>
......@@ -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>
......
<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>
<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>
<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>
<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>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论