update
init
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
enum Api {
|
||||
knowledgePage = '/health-intervene/archive/knowledge/browse-top',
|
||||
knowledgeStat = '/health-intervene/archive/knowledge/statistics',
|
||||
}
|
||||
|
||||
export const knowledgePageApi = (params) => defHttp.get({ url: Api.knowledgePage, params });
|
||||
export const knowledgeStatApi = (params) => defHttp.get({ url: Api.knowledgeStat, params });
|
||||
@@ -0,0 +1,49 @@
|
||||
import { BasicColumn, FormSchema } from '/@/components/Table';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '资源名称',
|
||||
dataIndex: 'title',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '内容简介',
|
||||
dataIndex: 'content',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '所属类别',
|
||||
dataIndex: 'type_dictText',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '主讲人姓名',
|
||||
dataIndex: 'keynoteSpeaker',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '主讲人所在机构',
|
||||
dataIndex: 'speakerDept',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '职务职称',
|
||||
dataIndex: 'duty',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '浏览人次',
|
||||
dataIndex: 'browseCount',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
sorter: {
|
||||
compare: (a, b) => a.browseCount - b.browseCount,
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<BasicTables @register="registerTable">
|
||||
<template #btnTop>
|
||||
<div class="all-stat">
|
||||
<span>
|
||||
视频知识总数量：{{ allData?.videoCount ? allData?.videoCount : '--' }}， 浏览总人数：{{
|
||||
allData?.videoBrowse ? allData?.videoBrowse : '--'
|
||||
}}
|
||||
</span>
|
||||
<span>
|
||||
图文知识总数量：{{ allData?.imageCount ? allData?.imageCount : '--' }}， 浏览总人数：{{
|
||||
allData?.imageBrowse ? allData?.imageBrowse : '--'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="title-p">知识浏览次数排名</p>
|
||||
<a-radio-group v-model:value="dataType" button-style="solid" @change="chooseData">
|
||||
<a-radio-button :value="1">视频知识</a-radio-button>
|
||||
<a-radio-button :value="0">图文知识</a-radio-button>
|
||||
<!-- <a-radio-button :value="2">音频知识</a-radio-button>-->
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex == 'title'">
|
||||
<a-button type="link" @click="handleClick(record)">{{ record.title }}</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTables>
|
||||
<div style="display: none">
|
||||
<ImagePreviewGroup v-if="imgList && imgList.length > 0" :preview="{ visible, onVisibleChange: (vis) => (visible = vis) }">
|
||||
<Image v-for="(item, index) in imgList" :key="index" :width="200" :fallback="getFamaleDefaultImage()" :src="getFileAccessHttpUrl(item)" />
|
||||
</ImagePreviewGroup>
|
||||
</div>
|
||||
<video-preview ref="videoPreviewRef" :url="videoUrl" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import BasicTables from '/@/components/Table/src/BasicTables.vue';
|
||||
import { useListPage } from '/@/hooks/system/useListPages';
|
||||
import { columns } from '/@/views/archivesManage/institution/timeService/knowledge/knowledge.data';
|
||||
import { knowledgePageApi, knowledgeStatApi } from '/@/views/archivesManage/institution/timeService/knowledge/knowledge.api';
|
||||
import { ref, nextTick, onMounted } from 'vue';
|
||||
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
|
||||
import VideoPreview from '/@/components/Video/VideoPreview.vue';
|
||||
import { Image, ImagePreviewGroup, message } from 'ant-design-vue';
|
||||
import { getFamaleDefaultImage, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
|
||||
const videoPreviewRef = ref();
|
||||
const dataType = ref(1);
|
||||
const imgList = ref<string[]>([]);
|
||||
const visible = ref(false);
|
||||
const { tableContext } = useListPage({
|
||||
tableProps: {
|
||||
pageTitle: '长庆油田知识资源',
|
||||
btnArr: ['add', 'search', 'edit', 'delete', 'export', 'total', 'print'],
|
||||
api: knowledgePageApi,
|
||||
columns: columns,
|
||||
beforeFetch: (params) => {
|
||||
params.type = dataType.value;
|
||||
return params;
|
||||
},
|
||||
canResize: false,
|
||||
showIndexColumn: true,
|
||||
indexColumnProps: {
|
||||
dataIndex: 'listIndex',
|
||||
width: 70,
|
||||
},
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
},
|
||||
},
|
||||
});
|
||||
const [registerTable, { reload }] = tableContext;
|
||||
const allData = ref();
|
||||
onMounted(async () => {
|
||||
allData.value = await knowledgeStatApi({});
|
||||
});
|
||||
function chooseData() {
|
||||
reload();
|
||||
}
|
||||
function handleClick(record) {
|
||||
console.log(record);
|
||||
switch (dataType.value) {
|
||||
case 1:
|
||||
previewResources(record?.videoUrl);
|
||||
break;
|
||||
case 2:
|
||||
const audio = new Audio('13203.wav');
|
||||
audio.play();
|
||||
break;
|
||||
default:
|
||||
handleAva(record?.titlePic);
|
||||
break;
|
||||
}
|
||||
}
|
||||
function handleAva(images) {
|
||||
nextTick(() => {
|
||||
imgList.value = images?.split(',');
|
||||
visible.value = true;
|
||||
});
|
||||
}
|
||||
const videoUrl = ref('');
|
||||
const showVideo = ref(false);
|
||||
function previewResources(url: string) {
|
||||
if (!url) return message.info('未找到文件资源');
|
||||
videoUrl.value = url && url.indexOf('http') !== -1 ? url : getFileAccessHttpUrl(url);
|
||||
videoPreviewRef.value && videoPreviewRef.value.showPreview();
|
||||
showVideo.value = true;
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.all-stat {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
border: 1px solid #e9e9e9;
|
||||
span {
|
||||
border-right: 1px solid #e9e9e9;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title-p {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.count {
|
||||
position: relative;
|
||||
.lined-arr {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* margin-left: 27px; */
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-radio-button-wrapper) {
|
||||
color: #1684fc !important;
|
||||
border-color: #1684fc !important;
|
||||
&:before {
|
||||
background-color: #1684fc !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-radio-button-wrapper-checked) {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user