3 changed files with 83 additions and 443 deletions
@ -1,357 +1,13 @@ |
|||||
<script lang='ts' setup> |
|
||||
import { useUserStore } from "@/store/modules/user" |
|
||||
|
|
||||
import { ref } from 'vue' |
|
||||
import { getUserDetail, getZxxyNavis, getTuijian, getCarousel } from '@/api/knowledge/index' |
|
||||
import Archivestype from '@/views/knowledge/knowledge/components/archivestype.vue' |
|
||||
import Navili from '@/views/knowledge/knowledge/components/Navili.vue' |
|
||||
import KnowledgeContent from '@/views/knowledge/knowledge/components/KnowledgeContent.vue' |
|
||||
import { UserQuery, UserDetail, NaviQuery, Navi, Graphicform, PageParam } from '@/api/knowledge/types' |
|
||||
import { onScroll, scrollTo, formatDate } from '@/api/knowledge/scroll' |
|
||||
import { useRouter } from 'vue-router' |
|
||||
import errimg from '@/assets/404_images/imgNotFound.png' |
|
||||
|
|
||||
const active = ref(0); // 当前激活的导航索引 |
|
||||
|
|
||||
|
|
||||
const userStore = useUserStore(); |
|
||||
const { userKey, userToken } = userStore; |
|
||||
|
|
||||
|
|
||||
const userDetail = ref<UserDetail>({ |
|
||||
//证件号码 |
|
||||
idcardno: ["1", "2"], |
|
||||
//姓名 |
|
||||
name: 'a', |
|
||||
//头像url |
|
||||
icon: 'b', |
|
||||
//工号 |
|
||||
wmNumber: '2', |
|
||||
//唯一识别码 |
|
||||
wmKey: "1", |
|
||||
//adminorg |
|
||||
adminorg: "9999", |
|
||||
}); |
|
||||
const tuijianPage = ref<Graphicform[]>(); |
|
||||
|
|
||||
const naviList = ref<Navi[]>(); |
|
||||
const naviList1 = ref<Navi[]>(); |
|
||||
//用户信息查询参数 |
|
||||
const userQueryParam = reactive<UserQuery>({ |
|
||||
userkey: userKey, |
|
||||
usertoken: userToken, |
|
||||
}); |
|
||||
//navi查询参数 |
|
||||
const naviQueryParam = reactive<NaviQuery>({ |
|
||||
atParentId: "",//知识库 |
|
||||
userkey: userKey, |
|
||||
usertoken: userToken, |
|
||||
}); |
|
||||
const pageParamTuijian = reactive<PageParam>({ |
|
||||
total: 0, |
|
||||
page: 1, |
|
||||
pagesize: 7, |
|
||||
archivesTypeAtParentId: "", //知识库or新闻资讯 |
|
||||
gParentSun: "", |
|
||||
//唯一识别码 |
|
||||
key: String(userDetail.value.wmKey), |
|
||||
//adminorg |
|
||||
adminorg: String(userDetail.value.adminorg), |
|
||||
userkey: userKey, |
|
||||
usertoken: userToken, |
|
||||
|
|
||||
}) |
|
||||
const carousel = ref<Graphicform[]>(); |
|
||||
function errorImg(e: any) { |
|
||||
e.srcElement.src = errimg; |
|
||||
//这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用 |
|
||||
e.srcElement.onerror = null; //防止闪图 |
|
||||
} |
|
||||
const fatherisReady = ref(0); |
|
||||
|
|
||||
const router = useRouter() |
|
||||
const routerUrl = toRaw(router).currentRoute.value.fullPath |
|
||||
onBeforeMount(() => { |
|
||||
//当前登录用户详细信息 |
|
||||
getUserDetail(userQueryParam) |
|
||||
.then(({ data }) => { |
|
||||
userDetail.value = data |
|
||||
}); |
|
||||
|
|
||||
}) |
|
||||
|
|
||||
|
|
||||
onMounted(() => { |
|
||||
// 监听滚动事件 |
|
||||
window.addEventListener('scroll', jsScroll, false) |
|
||||
|
|
||||
if (routerUrl.endsWith("index")) {//此时页面为知识库 |
|
||||
naviQueryParam.atParentId = '16213848089876281' |
|
||||
pageParamTuijian.archivesTypeAtParentId = '16213848089876281' |
|
||||
} else if (routerUrl.endsWith("news")) {//此时页面为新闻资讯 |
|
||||
naviQueryParam.atParentId = '16213847972425134' |
|
||||
pageParamTuijian.archivesTypeAtParentId = '16213847972425134' |
|
||||
} |
|
||||
getZxxyNavis(naviQueryParam) |
|
||||
.then(({ data }) => { |
|
||||
naviList.value = data |
|
||||
}).finally(() => { |
|
||||
fatherisReady.value = 100; |
|
||||
}) |
|
||||
//推荐 |
|
||||
getTuijian(pageParamTuijian) |
|
||||
.then(({ data }) => { |
|
||||
tuijianPage.value = data.list |
|
||||
pageParamTuijian.page = data.pageNum |
|
||||
pageParamTuijian.total = data.total |
|
||||
}); |
|
||||
getCarousel(pageParamTuijian) |
|
||||
.then(({ data }) => { |
|
||||
carousel.value = data.list |
|
||||
}); |
|
||||
}); |
|
||||
|
|
||||
|
|
||||
function jsScroll() { |
|
||||
active.value = onScroll(); |
|
||||
} |
|
||||
|
|
||||
onUnmounted(() => { |
|
||||
// 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错 |
|
||||
window.removeEventListener('scroll', onScroll) |
|
||||
}); |
|
||||
function handleCurrentChange() { |
|
||||
|
|
||||
getTuijian(pageParamTuijian) |
|
||||
.then(({ data }) => { |
|
||||
tuijianPage.value = data.list |
|
||||
pageParamTuijian.page = data.pageNum |
|
||||
pageParamTuijian.total = data.total |
|
||||
}); |
|
||||
|
|
||||
} |
|
||||
|
|
||||
//dialog |
|
||||
const cardContentSource = ref<Graphicform>({}); |
|
||||
const showContentBox = ref(false); //详情弹窗 |
|
||||
|
|
||||
function showContentDialog(item: any) { |
|
||||
showContentBox.value = true; |
|
||||
cardContentSource.value = item; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
</script> |
|
||||
<template> |
<template> |
||||
<div class="app-container"> |
<h1>test</h1> |
||||
<KnowledgeContent v-model:isShow="showContentBox" :contentSource="cardContentSource"></KnowledgeContent> |
|
||||
<!-- 内容区域 --> |
|
||||
<div class="content"> |
|
||||
|
|
||||
<div class="models "> |
|
||||
|
|
||||
<div class="model-title"> |
|
||||
<h3>推荐</h3> |
|
||||
|
|
||||
</div> |
|
||||
<div class="grid-tuijian"> |
|
||||
<el-carousel indicator-position="outside" class="mycarousel" arrow="always"> |
|
||||
<el-carousel-item v-for="(item, index) in carousel" :key="index" @click="showContentDialog(item)"> |
|
||||
|
|
||||
<img style="width: 495px; height: 300px;border-radius:16px;margin-top: 4px; margin-left: 4px;" |
|
||||
referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" /> |
|
||||
</el-carousel-item> |
|
||||
</el-carousel> |
|
||||
|
|
||||
<div v-for="(item, index) in tuijianPage" :key="index" class="tuijian-card" @click="showContentDialog(item)"> |
|
||||
<img style="width: 170px; height: 126px;border-radius:8px;margin-top: 4px; margin-left: 4px;" |
|
||||
referrerpolicy="no-referrer" :src="item.gThumbnail" fit="fill" loading="lazy" @error="errorImg($event)" /> |
|
||||
|
|
||||
<div class="card-right"> |
|
||||
<span class="card-title" :title=item.gTitle>{{ item.gTitle }}</span> |
|
||||
<span class="card-text" :title=item.gDescribe>{{ item.gDescribe }}</span> |
|
||||
|
|
||||
<span class="time-span"><span class="fa fa-clock-o"></span>{{ formatDate(item.gAddTime) }}</span> |
|
||||
|
|
||||
<span class="myicons"> |
|
||||
<span class="fa fa-star-o"></span>收藏(<span>{{ item.gCollectionSum }}</span>) <span |
|
||||
class="fa fa-thumbs-o-up"></span>赞(<span>{{ |
|
||||
item.gLikes }}</span>) <span class="fa fa-thumbs-o-down"></span>踩(<span>{{ item.gStepOn }}</span>) |
|
||||
<span class="fa fa-eye">阅读</span>(<span>{{ item.gRead }}</span>) |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
<el-pagination class="pagi" v-model:current-page="pageParamTuijian.page" v-if="pageParamTuijian.total > 0" |
|
||||
v-model:page-size="pageParamTuijian.pagesize" layout="prev, pager, next, jumper" :total="pageParamTuijian.total" |
|
||||
@current-change="handleCurrentChange" /> |
|
||||
</div> |
|
||||
<!-- 各知识/新闻分区 --> |
|
||||
|
|
||||
<template v-for="(item, index) in naviList"> |
|
||||
<Archivestype :liContent=item :index=(index) :fatherisReady="fatherisReady" :routerUrl="routerUrl"></Archivestype> |
|
||||
</template> |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
</div> |
|
||||
|
|
||||
<!-- 导航区域 --> |
|
||||
|
|
||||
<ul class="navs"> |
|
||||
<li :class="{ active: active === 0 }" @click="scrollTo(0)"> |
|
||||
推荐 |
|
||||
</li> |
|
||||
|
|
||||
<template v-for="(item, index) in naviList"> |
|
||||
<Navili :class="{ active: active === index+1 }" :oneli=item :index=(index+1) v-if="item.hasCard" :active=active |
|
||||
@click="scrollTo(index + 1)"></Navili> |
|
||||
</template> |
|
||||
|
|
||||
</ul> |
|
||||
</div> |
|
||||
</template> |
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
|
||||
|
</script> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
.content { |
/* |
||||
background-color: white; |
|
||||
width: 89.1%; |
|
||||
margin-left: 190px; |
|
||||
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; |
|
||||
border-radius: 5px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
/* 导航栏的样式 */ |
|
||||
.navs { |
|
||||
|
|
||||
|
|
||||
|
|
||||
width: 192px; |
|
||||
position: fixed; |
|
||||
height: auto; |
|
||||
top: 95px; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.navs li { |
|
||||
|
|
||||
text-align: center; |
|
||||
line-height: 3; |
|
||||
font-size: 15.5px; |
|
||||
color: #909399; |
|
||||
background-color: white; |
|
||||
margin-right: 15px; |
|
||||
} |
|
||||
|
|
||||
.navs li:hover { |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
/* 当导航被点亮后改变颜色 */ |
|
||||
.navs .active { |
|
||||
color: #409EFF; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.model-title { |
|
||||
margin-top: -9px; |
|
||||
height: 30px; |
|
||||
} |
|
||||
|
|
||||
.grid-tuijian { |
|
||||
|
|
||||
|
|
||||
display: grid; |
|
||||
grid-template-columns: repeat(auto-fill, 484px); |
|
||||
gap: 10px; |
|
||||
grid-auto-flow: row dense; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.tuijian-card { |
|
||||
display: flex; |
|
||||
width: 481px; |
|
||||
height: 140px; |
|
||||
padding: 3px; |
|
||||
border-radius: 8px; |
|
||||
flex-direction: row; |
|
||||
flex-wrap: wrap; |
|
||||
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; |
|
||||
} |
|
||||
|
|
||||
.mycarousel { |
|
||||
|
|
||||
grid-row-start: 1; |
|
||||
grid-row-end: 3; |
|
||||
border-radius: 15px; |
|
||||
width: 480px; |
|
||||
height: 290px; |
|
||||
} |
|
||||
|
|
||||
.card-right { |
|
||||
display: flex; |
|
||||
width: 300px; |
|
||||
flex-direction: column; |
|
||||
flex-wrap: wrap; |
|
||||
padding-left: 8px; |
|
||||
} |
|
||||
|
|
||||
.card-title { |
|
||||
|
|
||||
|
|
||||
height: 1.5em !important; |
|
||||
display: -webkit-box; |
|
||||
-webkit-box-orient: vertical; |
|
||||
overflow: hidden; |
|
||||
-webkit-line-clamp: 1; |
|
||||
|
|
||||
|
|
||||
|
|
||||
} |
|
||||
|
|
||||
.card-text { |
|
||||
margin-top: 2px; |
|
||||
margin-bottom: 2px; |
|
||||
height: 3.1em; |
|
||||
font-size: 14px; |
|
||||
color: #909399; |
|
||||
display: -webkit-box; |
|
||||
-webkit-box-orient: vertical; |
|
||||
overflow: hidden; |
|
||||
-webkit-line-clamp: 2; |
|
||||
} |
|
||||
|
|
||||
.time-span { |
|
||||
height: 1.5em; |
|
||||
align-self: end; |
|
||||
margin-top: auto; |
|
||||
font-size: 13px; |
|
||||
margin-right: 5px; |
|
||||
color: #909399; |
|
||||
|
|
||||
|
|
||||
} |
|
||||
|
|
||||
.myicons { |
|
||||
|
|
||||
align-self: end; |
|
||||
margin-right: 5px; |
|
||||
font-size: 13px; |
|
||||
color: #909399; |
|
||||
} |
|
||||
|
|
||||
.el-pagination { |
|
||||
margin-top: 20px; |
|
||||
margin-bottom: 10px; |
|
||||
justify-content: center; |
|
||||
|
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
|
*/ |
||||
|
</style> |
||||
@ -1,102 +1,12 @@ |
|||||
<template> |
<template> |
||||
<el-upload |
<video :src="lowcodevideoStore.videoResource" loop controls style="width:70%;max-width: 800px;"></video> |
||||
:action="uploadUrl" :drag="true" :before-remove="beforeRemove" |
|
||||
:on-success="videoUploadOk" :show-file-list="true" |
|
||||
:on-error="videoUploadErr" |
|
||||
:on-preview="selectVideo" |
|
||||
style="width: 50%;" |
|
||||
accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb"> |
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon> |
|
||||
<div class="el-upload__text"> |
|
||||
拖拽视频文件到此 或 <em>点此上传</em> |
|
||||
</div> |
|
||||
<template #tip> |
|
||||
<div class="el-upload__tip"> |
|
||||
<!-- jpg/png files with a size less than 500kb --> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-upload> |
|
||||
|
|
||||
<video v-if="videoReady" :src="videoResource" loop controls style="width: 50%;"></video> |
|
||||
</template> |
</template> |
||||
|
|
||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||
import { uploadUrl } from '@/api/DesignForm' |
|
||||
import { UploadFilled } from '@element-plus/icons-vue' |
|
||||
import { UploadFile, UploadFiles } from 'element-plus/es/components/upload/src/upload'; |
|
||||
//视频地址 |
|
||||
const videoResource = ref<string>() |
|
||||
//上传是否成功 |
|
||||
const videoReady = ref(false) |
|
||||
type VideoMsg = { |
|
||||
CreatedAt: string |
|
||||
UpdatedAt: string |
|
||||
fileSize: bigint |
|
||||
id: bigint |
|
||||
key: string |
|
||||
name: string |
|
||||
physicspath: string |
|
||||
size: string |
|
||||
tag: string |
|
||||
type: number |
|
||||
url: string |
|
||||
} |
|
||||
//成功上传的视频 |
|
||||
const videoArr = reactive<VideoMsg[]>([]); |
|
||||
const emits = defineEmits(["addedVideo"]); |
|
||||
//上传成功钩子 |
|
||||
function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) { |
|
||||
videoResource.value = response.data.url; |
|
||||
videoReady.value = true; |
|
||||
//console.log(response) |
|
||||
const videoMsg:VideoMsg = { |
|
||||
CreatedAt: '', |
|
||||
UpdatedAt: '', |
|
||||
fileSize: 0n, |
|
||||
id: 0n, |
|
||||
key: '', |
|
||||
name: '', |
|
||||
physicspath: '', |
|
||||
size: '', |
|
||||
tag: '', |
|
||||
type: 0, |
|
||||
url: '' |
|
||||
} |
|
||||
videoMsg.CreatedAt = response.data.CreatedAt; |
|
||||
videoMsg.UpdatedAt = response.data.UpdatedAt; |
|
||||
videoMsg.fileSize = response.data.fileSize; |
|
||||
videoMsg.id = response.data.id; |
|
||||
videoMsg.key = response.data.key; |
|
||||
videoMsg.name = response.data.name; |
|
||||
videoMsg.physicspath = response.data.physicspath; |
|
||||
videoMsg.size = response.data.size; |
|
||||
videoMsg.tag = response.data.tag; |
|
||||
videoMsg.type = response.data.type; |
|
||||
videoMsg.url = response.data.url; |
|
||||
videoArr.push(videoMsg); |
|
||||
//console.log(videoArr) |
|
||||
emits("addedVideo",videoArr) |
|
||||
} |
|
||||
|
|
||||
//删除钩子 禁止删除 |
import uselowcodevideoStore from '@/store/modules/lowcodevideo' |
||||
function beforeRemove(){ |
const lowcodevideoStore = uselowcodevideoStore(); |
||||
return false; |
|
||||
} |
|
||||
|
|
||||
//上传失败钩子 |
|
||||
function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles){ |
|
||||
alert("上传失败,请重试") |
|
||||
console.log("上传失败"+error); |
|
||||
|
|
||||
} |
|
||||
//点击文件列表中已上传的文件时的钩子,点击即替换video标签的src |
|
||||
function selectVideo(uploadFile: UploadFile){ |
|
||||
|
|
||||
const res:any = uploadFile.response; |
|
||||
const resd = res.data; |
|
||||
const resdurl = resd.url; |
|
||||
videoResource.value = resdurl; |
|
||||
} |
|
||||
</script> |
</script> |
||||
|
|
||||
<style scoped></style> |
<style scoped></style> |
||||
Loading…
Reference in new issue