新闻
This commit is contained in:
XaoLi717
parent
ef62a77e7a
commit
5f0474654b
@ -27,26 +27,16 @@
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-card shadow="hover" style="margin-bottom: 10px;height: 200px">
|
||||
<el-card shadow="hover" >
|
||||
<el-carousel :interval="4000" height="200px" @change="handleCarouselChange" ref="carousel">
|
||||
<el-carousel-item v-for="item in image" :key="item.id">
|
||||
<el-image style="width: 100%; height: 100%" :src="item.src" alt="无图片" :title="item.name"/>
|
||||
<el-carousel-item v-for="item in filteredListFoImg" :key="item.id">
|
||||
<el-image style="width: 100%; height: 100%" :src="item.newsImg" alt="无图片" :title="item.newsName"/>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-card>
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<span v-if="image[pageNo - 1]">{{image[pageNo-1].title}}</span>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-pagination
|
||||
size="small"
|
||||
layout="prev, pager, next"
|
||||
v-model:current-page="pageNo"
|
||||
:total="image.length"
|
||||
:page-size="1"
|
||||
@current-change="handlePageChange"
|
||||
/>
|
||||
<el-col :span="24">
|
||||
<span v-if="filteredListFoImg[pageNo - 1]">{{filteredListFoImg[pageNo-1].newsName}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
@ -223,7 +213,7 @@
|
||||
<template #header >
|
||||
<div class="SystemThem" style="height: 2px;"></div>
|
||||
<div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
|
||||
<span style="display: inline-block;">公告</span>
|
||||
<span style="display: inline-block;">新闻</span>
|
||||
<el-link
|
||||
type="primary"
|
||||
:underline="false"
|
||||
@ -235,14 +225,20 @@
|
||||
</div>
|
||||
</template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item,index) in todo"
|
||||
:key="`card-${index}`"
|
||||
>
|
||||
<span style="display: inline-block; margin-bottom: 10px;font-size: 15px;color: #105cfb" >* {{item.title}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-for="(item, index) in filteredListFoNews" :key="`dynamics-${index}`">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<div class="text-14px" @click="openDialog(item.contentType,item.id)">
|
||||
<dict-tag :type="DICT_TYPE.OA_NEWS_TYPE" :value="item.contentType" /> :
|
||||
{{ item.newsName }}
|
||||
</div>
|
||||
<div class=" text-12px text-gray-400">
|
||||
{{ formatTime(item.newsCreatetime, 'yyyy-MM-dd') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider />
|
||||
</div>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<el-card shadow="hover" class="mt-8px">
|
||||
@ -274,7 +270,6 @@
|
||||
</el-row>
|
||||
</el-skeleton>
|
||||
</el-card>
|
||||
<!-- <el-card shadow="hover" class="mt-8px">-->
|
||||
<el-card shadow="hover" class="mt-8px">
|
||||
<template #header >
|
||||
<div class="SystemThem" style="height: 2px;"></div>
|
||||
@ -313,29 +308,22 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 80%;">
|
||||
<el-form>
|
||||
<el-form-item>
|
||||
<span style="font-size: 20px; font-weight: bold;">{{formDataNews.newsName}}</span>
|
||||
<el-divider style="border-top: none; margin: 0;"/>
|
||||
<span style="font-size: 12px">发布时间: {{formatTime(formDataNews.newsCreatetime,'yyyy-MM-dd')}}</span>
|
||||
<el-divider style="margin-top: 10px"/>
|
||||
<span style="line-height: 1.2" v-html="formDataNews.newsContent"></span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">确 定</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<style>
|
||||
.SystemThem {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
.custom-calendar {
|
||||
height: 310px; /* 根据需要调整高度 */
|
||||
}
|
||||
.custom-calendar .el-calendar-table__row {
|
||||
height: 40px; /* 设置行高度，根据需要调整 */
|
||||
}
|
||||
.custom-calendar .el-calendar-day {
|
||||
height: 100%; /* 设置每个日历单元格的高度为100% */
|
||||
display: flex; /* 使用 flexbox */
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
}
|
||||
.custom-shadow-hover:hover {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important; /* 悬停时更深的阴影 */
|
||||
}
|
||||
</style>
|
||||
<script lang="ts" setup>
|
||||
import mn from '../../../src/assets/svgs/login-box-bg.svg'
|
||||
import { set } from 'lodash-es'
|
||||
import { EChartsOption } from 'echarts'
|
||||
|
||||
@ -345,6 +333,9 @@ import {WorkplaceTotal, Project, Notice, Shortcut, Todo, Email} from './types'
|
||||
import { pieOptions, barOptions } from './echarts-data'
|
||||
import {dateFormatter2} from "@/utils/formatTime";
|
||||
import {CalendarDateType, CalendarInstance} from "element-plus";
|
||||
import {NewsApi, NewsVO} from "@/api/base/news";
|
||||
import {formatTime} from "../../utils";
|
||||
import {DICT_TYPE} from "@/utils/dict";
|
||||
|
||||
defineOptions({ name: 'Home' })
|
||||
|
||||
@ -354,13 +345,60 @@ const { setWatermark } = useWatermark()
|
||||
const loading = ref(true)
|
||||
const avatar = userStore.getUser.avatar
|
||||
const username = userStore.getUser.nickname
|
||||
const dialogVisible = ref(false) // 新闻展示弹窗是否显示
|
||||
const dialogTitle = ref("") // 新闻展示标题
|
||||
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
||||
const openDialog = async (type:number,id?:number) => {
|
||||
dialogVisible.value = true;
|
||||
dialogTitle.value = type === 1?"通知":"公告"
|
||||
if (id){
|
||||
formDataNews.value = await NewsApi.getNews(id)
|
||||
}
|
||||
}
|
||||
const formDataNews = ref({
|
||||
id: undefined,
|
||||
newsName: undefined,
|
||||
newsCreatetime: Date,
|
||||
newsImg: undefined,
|
||||
newsContent: undefined,
|
||||
contentType: undefined,
|
||||
newsStatus: undefined,
|
||||
status: undefined,
|
||||
deptId: undefined,
|
||||
})
|
||||
// 获取统计数
|
||||
let totalSate = reactive<WorkplaceTotal>({
|
||||
project: 0,
|
||||
access: 0,
|
||||
todo: 0
|
||||
})
|
||||
const newsList = ref<NewsVO[]>([])//新闻列表数据
|
||||
const newsQueryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
id: undefined,
|
||||
newsName: undefined,
|
||||
newsCreatetime: [],
|
||||
contentType: undefined,
|
||||
newsStatus: undefined,
|
||||
status: undefined,
|
||||
deptId: undefined,
|
||||
createTime: [],
|
||||
})
|
||||
const getNewsList = async () => {
|
||||
const newsData = await NewsApi.getNewsPage(newsQueryParams)
|
||||
newsList.value = newsData.list
|
||||
// console.log("data",newsData)
|
||||
}
|
||||
const filteredListFoImg = computed(() => {
|
||||
return newsList.value.filter(item => item.newsStatus !== "0" && item.status!=="0");
|
||||
});
|
||||
const filteredListFoNews = computed(() => {
|
||||
return newsList.value.filter(item => item.status!=="0");
|
||||
});
|
||||
onMounted(() => {
|
||||
getNewsList()
|
||||
})
|
||||
const calendar = ref<CalendarInstance>()
|
||||
const selectDate = (val: CalendarDateType) => {
|
||||
if (!calendar.value) return
|
||||
@ -369,17 +407,8 @@ const selectDate = (val: CalendarDateType) => {
|
||||
const handleCarouselChange = async (currentIndex:number) => {
|
||||
pageNo.value=currentIndex+1
|
||||
|
||||
}
|
||||
const handlePageChange = async (newPage:number) => {
|
||||
const carousel = (document.querySelector('.el-carousel') as any);
|
||||
carousel.setActiveItem(newPage - 1); // 设置轮播显示项与分页同步
|
||||
|
||||
}
|
||||
const pageNo = ref<number | undefined>(1)
|
||||
const image = ref<Array<{ id: number; src: string; name: string; title: string }>>([
|
||||
{id: 1, src: mn, name: '02',title:'首页图片展示标题1'},
|
||||
{id: 2, src: mn, name: '03',title:'首页图片展示标题2'},
|
||||
])
|
||||
const getCount = async () => {
|
||||
const data = {
|
||||
project: 40,
|
||||
@ -647,3 +676,24 @@ const getAllApi = async () => {
|
||||
|
||||
getAllApi()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.SystemThem {
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
.custom-calendar {
|
||||
height: 310px; /* 根据需要调整高度 */
|
||||
}
|
||||
.custom-calendar .el-calendar-table__row {
|
||||
height: 40px; /* 设置行高度，根据需要调整 */
|
||||
}
|
||||
.custom-calendar .el-calendar-day {
|
||||
height: 100%; /* 设置每个日历单元格的高度为100% */
|
||||
display: flex; /* 使用 flexbox */
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
}
|
||||
.custom-shadow-hover:hover {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important; /* 悬停时更深的阴影 */
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user