579 lines
15 KiB
Vue
Executable File
579 lines
15 KiB
Vue
Executable File
<script setup lang="ts">
|
||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'
|
||
import 'swiper/css'
|
||
import AppBlock from '@/components/AppBlock.vue'
|
||
import { NIcon, useMessage, NCarousel } from 'naive-ui'
|
||
import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
|
||
import { ElCarousel, ElCarouselItem } from 'element-plus'
|
||
import { NPopover } from 'naive-ui'
|
||
import { isNotOneWeekAgo } from '@/utils'
|
||
|
||
import { getFootprintList } from '@/api/daikin/base'
|
||
|
||
import { useUserStore } from '@/stores/modules/user'
|
||
const store = useUserStore()
|
||
const { push } = useRouter()
|
||
|
||
const message = useMessage()
|
||
const userCode = ['admin', 'csr_dandang', 'tech_service'].includes(
|
||
store.user.roleCode
|
||
)
|
||
const swipeRef = ref<any>(null)
|
||
const dataList = ref([])
|
||
const swipeActiveIndex = ref(0)
|
||
function handleIndex(x: any) {
|
||
swipeActiveIndex.value = x.realIndex
|
||
}
|
||
const modules = [Autoplay, Pagination, Navigation, A11y]
|
||
const setSwiperRef = (swiper: any) => {
|
||
swipeRef.value = swiper
|
||
}
|
||
// 2
|
||
const swipeSubRef = ref<any>(null)
|
||
const dataList2 = ref([])
|
||
const swipeActiveIndex2 = ref(0)
|
||
function handleIndex2(x: any) {
|
||
swipeActiveIndex2.value = x.realIndex
|
||
}
|
||
const modules2 = [Autoplay, Pagination, Navigation, A11y]
|
||
const setSwiperRef2 = (swiper: any) => {
|
||
swipeSubRef.value = swiper
|
||
}
|
||
const pageInfo = reactive({
|
||
currentPage: 1,
|
||
pageSize: 100,
|
||
total: 10
|
||
})
|
||
const swiperList = ref()
|
||
onMounted(async () => {
|
||
dataList.value = []
|
||
msgScoll.value?.addEventListener('scroll', handleVisitsScoll)
|
||
// 空调节能Solution活动
|
||
const { rows } = await getFootprintList({
|
||
pageNum: pageInfo.currentPage,
|
||
pageSize: pageInfo.pageSize,
|
||
moduleId: '1'
|
||
})
|
||
if (rows && rows != 'null' && rows.length > 0) {
|
||
// const newData = rows.flatMap((item) => {
|
||
// if (item.imgUrl && item.imgUrl.length > 0) {
|
||
// return item.imgUrl.map((img) => {
|
||
// return {
|
||
// ...item,
|
||
// imgPath: img.url,
|
||
// };
|
||
// });
|
||
// }
|
||
swiperList.value = rows
|
||
// if(rows.length>5 || rows.length < 3){
|
||
// }else{
|
||
// swiperList.value = [...rows,...rows]
|
||
// }
|
||
}
|
||
// 碳足迹
|
||
getZu(1)
|
||
})
|
||
const shomks = () => {
|
||
// push('csr/modifyCsr2')
|
||
push({ name: 'modifyCsr2' })
|
||
}
|
||
const srcType = ref()
|
||
const openUrl = async (url) => {
|
||
if (!url) {
|
||
message.info('没有可预览文件！')
|
||
return
|
||
}
|
||
srcType.value = getLastSubstring(url)
|
||
if (
|
||
['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'pdf'].includes(srcType.value)
|
||
) {
|
||
// src.value = filePath
|
||
// pdfShow.value = true
|
||
url = 'https://view.xdocin.com/view?src=' + url
|
||
const screenWidth = window.screen.width
|
||
const screenHeight = window.screen.height
|
||
window.open(
|
||
url,
|
||
'',
|
||
'width=' +
|
||
screenWidth +
|
||
',height=' +
|
||
screenHeight +
|
||
',top=' +
|
||
0 +
|
||
',left=' +
|
||
0
|
||
)
|
||
} else {
|
||
message.error(
|
||
"文件格式不是 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'！"
|
||
)
|
||
}
|
||
}
|
||
function getLastSubstring(str: string): string {
|
||
const lastIndex = str.lastIndexOf('.')
|
||
if (lastIndex !== -1) {
|
||
return str.substring(lastIndex + 1)
|
||
} else {
|
||
return ''
|
||
}
|
||
}
|
||
|
||
const toDetail = (obj) => {
|
||
console.log(obj)
|
||
if (obj.isSelect === 2) {
|
||
message.info('没有访问权限')
|
||
return
|
||
} else {
|
||
obj.filePath?.[0]?.url
|
||
? openUrl(obj.filePath[0].url)
|
||
: message.info('没有可预览文件！')
|
||
}
|
||
}
|
||
async function down(data: {
|
||
it: {
|
||
response: { url: any; originalFilename: any }
|
||
url: any
|
||
newFileName: any
|
||
}
|
||
}) {
|
||
// console.log(data)
|
||
let url, name
|
||
if (data.it && data.it.response) {
|
||
url = data.it.response.url
|
||
name = data.it.response.originalFilename
|
||
} else {
|
||
url = data.it.url
|
||
name = data.it.newFileName
|
||
}
|
||
if (!url) {
|
||
message.error('没有可预览文件！')
|
||
return
|
||
}
|
||
// downloadFiles(url, name)
|
||
openUrl(url)
|
||
}
|
||
|
||
const dataInfo = reactive({
|
||
treeSource: 3,
|
||
type: 0,
|
||
pageSize: 10
|
||
})
|
||
let maxMsgLingth = 1
|
||
let pageNum = 1
|
||
const getZu = async (pageNum) => {
|
||
const { treeSource, type, pageSize } = dataInfo
|
||
const { rows, total } = await getFootprintList({
|
||
pageNum,
|
||
pageSize,
|
||
moduleId: '2'
|
||
})
|
||
|
||
// if (type === 0) {
|
||
// dataList.value = rows
|
||
// } else {
|
||
// }
|
||
dataList.value.push(...rows)
|
||
maxMsgLingth = total / pageSize
|
||
console.log(dataList.value, type)
|
||
}
|
||
|
||
const msgScoll = ref<HTMLElement | null>(null)
|
||
|
||
const handleVisitsScoll = () => {
|
||
// if(pageNum >= 1) return
|
||
const container = msgScoll.value
|
||
if (container) {
|
||
const isAtBottom =
|
||
container.scrollHeight - container.scrollTop === container.clientHeight
|
||
if (isAtBottom) {
|
||
if (pageNum < maxMsgLingth) {
|
||
++pageNum
|
||
getZu(pageNum)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
const scroll = ({ scrollTop }: any) => {
|
||
const isAtBottom = scrollTop >= 400
|
||
if (isAtBottom) {
|
||
if (pageNum < maxMsgLingth) {
|
||
++pageNum
|
||
getZu(pageNum)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="w-full h-full box rounded-18px overflow-hidden">
|
||
<!-- <AppBlock class="w-full ">
|
||
<img src="./images/goudongxi.png" class="w-full h-full" />
|
||
</AppBlock> -->
|
||
<div class="w-full h-500px mb-10px bg-#fff">
|
||
<div
|
||
class="text-center text-#142142 text-26px py25px font-extrabold"
|
||
style="border-bottom: solid 1px #f4f4f4"
|
||
>
|
||
PLUS活动相关
|
||
</div>
|
||
<el-button v-if="userCode" type="primary" class="button" @click="shomks"
|
||
>管理</el-button
|
||
>
|
||
<div class="text-#142142 text-20px font-extrabold flex p20px">
|
||
<!-- <div class=""></div> -->
|
||
<div class="w-70% text-24px font-bold p20px pb-0px">
|
||
<!-- 空调节能solution活动 -->
|
||
PLUS活动
|
||
</div>
|
||
|
||
<div class="w-30%" style="text-align: -webkit-right">
|
||
<div
|
||
@click="push({ name: 'modifyCsrList' })"
|
||
class="w-145px px15px text-#fff !rd-22px !bg-gradient-to-r !from-#34a6d9/90 !to-#23d1c6/70 p10px"
|
||
>
|
||
查看更多<img
|
||
src="../../../assets/images/ckgduo@2x.png"
|
||
class="w25px ml-10px mt--5px"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<AppBlock class="w-full h325px box !b-0" style="box-shadow: none">
|
||
<div class="w1200px px68px relative">
|
||
<div class="swipe-nav nav-prev">
|
||
<NIcon size="40" color="#537deb">
|
||
<ChevronBack />
|
||
</NIcon>
|
||
</div>
|
||
<div class="swipe-nav nav-next">
|
||
<NIcon size="40" color="#537deb">
|
||
<ChevronForward />
|
||
</NIcon>
|
||
</div>
|
||
<!-- :slides-per-group="3" -->
|
||
<!-- :autoplay="{delay: 3000, disableOnInteraction: false, pauseOnMouseEnter: true,stopOnLastSlide: false}" -->
|
||
<Swiper
|
||
ref="swipeRef"
|
||
@swiper="setSwiperRef"
|
||
class="h325px"
|
||
:slides-per-view="3"
|
||
:slides-per-group="1"
|
||
:loopAdditionalSlides="3"
|
||
:speed="500"
|
||
:space-between="8"
|
||
:modules="modules"
|
||
:scrollbar="{ draggable: false }"
|
||
:loop="true"
|
||
:navigation="{
|
||
nextEl: '.nav-next',
|
||
prevEl: '.nav-prev'
|
||
}"
|
||
>
|
||
<template v-for="(i, index) in swiperList" :key="index">
|
||
<SwiperSlide>
|
||
<div
|
||
class="w340px h300px overflow-hidden bg-#F6F8FF mt10px relative rd-25px"
|
||
style="box-shadow: 0px 7px 12px 0px #e7e7e7"
|
||
>
|
||
<div
|
||
class="flex items-center !bg-gradient-to-r !from-#5C87F5/90 !to-#466CCD/70 text-#fff font-[500] font-bold px20px py15px text-18px truncates"
|
||
>
|
||
<img
|
||
v-if="isNotOneWeekAgo(i.createTime)"
|
||
src="@/assets/images/NEW.gif"
|
||
class="h-20px"
|
||
alt=""
|
||
/>
|
||
活动{{ index + 1 }}:
|
||
<span>{{ i.title }}</span>
|
||
|
||
<!-- <span class="float-right"><el-icon>
|
||
<ArrowRightBold />
|
||
</el-icon></span> -->
|
||
</div>
|
||
|
||
<div class="overflow-hidden w-full h-206px z-10">
|
||
<!-- <el-carousel
|
||
autoplay
|
||
indicator-position="none"
|
||
arrow="never"
|
||
height="150px"
|
||
>
|
||
<el-carousel-item
|
||
v-if="i.imgUrl"
|
||
v-for="ite in i.imgUrl"
|
||
:key="ite.imgUrl"
|
||
>
|
||
<img
|
||
:src="ite.url"
|
||
class="p10px w-full max-h-200px image-container"
|
||
/>
|
||
</el-carousel-item>
|
||
</el-carousel> -->
|
||
<n-carousel
|
||
draggable
|
||
autoplay
|
||
trigger="hover"
|
||
mousewheel
|
||
effect="fade"
|
||
:interval="5000"
|
||
:loop="true"
|
||
class="overflow-hidden box-border"
|
||
>
|
||
<div
|
||
class="w-full h-200px overflow-hidden p10px"
|
||
v-if="i.imgUrl"
|
||
v-for="ite in i.imgUrl"
|
||
>
|
||
<img
|
||
:src="ite.url"
|
||
class="w-full max-h-200px image-container overflow-hidden"
|
||
/>
|
||
</div>
|
||
</n-carousel>
|
||
</div>
|
||
|
||
<!-- <img :src="i.imgPath" class="p10px w-full max-h-180px rd-10px" @click="toDetail(i)" /> -->
|
||
|
||
<div
|
||
class="absolute left-0 right-0 bottom-14px text-#000 text-18px text-left px16px py6px z-100 transition-none"
|
||
>
|
||
<div class="max-w500px text-16px flex flex-col">
|
||
<div class="flex items-center max-w-[84%]">
|
||
<img
|
||
src="../../../assets/images/lvbiao@2x.png"
|
||
class="mr-5px"
|
||
/>
|
||
<n-popover trigger="hover" placement="top-start">
|
||
<template #trigger>
|
||
<span
|
||
class="truncate text-18px !min-w-[auto]"
|
||
@click="toDetail(i)"
|
||
>
|
||
{{ i.filePath[0]?.originalFileName }}
|
||
</span>
|
||
</template>
|
||
<div class="text-18px leading-40px">
|
||
{{ i.filePath[0]?.originalFileName }}
|
||
</div>
|
||
</n-popover>
|
||
</div>
|
||
<div
|
||
v-if="i.filePath.length >= 1"
|
||
title="查看更多"
|
||
@click="toDetail(i)"
|
||
class="absolute cursor-pointer right--14px top-0px w60px pt-3px flex items-center ml-auto text-right"
|
||
style="
|
||
color: #4d7ee8;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
"
|
||
>
|
||
更多<el-icon>
|
||
<DArrowRight class="" />
|
||
</el-icon>
|
||
</div>
|
||
<!-- <el-dropdown max-height="100px" @command="down">
|
||
<el-icon size="25">
|
||
<CaretBottom />
|
||
</el-icon>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item
|
||
v-if="i.filePath"
|
||
v-for="it in i.filePath"
|
||
:command="{ it }"
|
||
>{{ it.originalFileName }}</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SwiperSlide>
|
||
</template>
|
||
</Swiper>
|
||
</div>
|
||
</AppBlock>
|
||
</div>
|
||
<div class="w-49% h-375px float-left bg-#fff">
|
||
<div class="text-24px font-bold p20px" @click="push({ name: 'CSRList' })">
|
||
<!-- 碳足迹报告 -->
|
||
相关活动报告
|
||
</div>
|
||
<!-- <div title="查看更多" class="absolute right-25px top-5px w80px h50px flex justify-center items-center cursor-pointer" style="background: #0539A3;line-height: 50px;color: #00C2EE;text-align: center;" @click="jumpContentHandler('BCP简报', 2)"> -->
|
||
<!-- <div
|
||
title="查看更多"
|
||
class="absolute right-25px top-5px w80px h50px flex justify-center items-center cursor-pointer"
|
||
style="
|
||
background: #0539a3;
|
||
line-height: 50px;
|
||
color: #00c2ee;
|
||
text-align: center;
|
||
"
|
||
@click="push({ name: 'CSRList' })"
|
||
>
|
||
更多<el-icon>
|
||
<DArrowRight class="" />
|
||
</el-icon>
|
||
</div> -->
|
||
<span
|
||
style="
|
||
border: #417bef 1px solid;
|
||
color: #417bef;
|
||
border-radius: 5px;
|
||
height: 30px;
|
||
"
|
||
class="absolute right-25px top-16px w80px h50px flex justify-center items-center cursor-pointer"
|
||
@click="push({ name: 'CSRList' })"
|
||
>更多<el-icon> <DArrowRight class="" /> </el-icon
|
||
></span>
|
||
<!-- <div ref="msgScoll" class="px20px h280px cent_box overflow-y-scroll "> -->
|
||
<!-- <div
|
||
ref="msgScoll"
|
||
class="px20px h280px cent_box overflow-y-scroll"
|
||
> -->
|
||
<el-scrollbar
|
||
class="px20px"
|
||
ref=""
|
||
height="280px"
|
||
always
|
||
@scroll="scroll"
|
||
>
|
||
<!-- <div class="text-#808696 bg-#F4F8FF py10px rd-5px mt10px" v-for="(i, key) in dataList" :key="i"> -->
|
||
<div
|
||
class="text-#808696 bg-#F4F8FF py10px rd-5px mt10px"
|
||
v-for="(i, key) in dataList"
|
||
:key="i"
|
||
>
|
||
<div class="truncate2 flex items-center" @click="toDetail(i)">
|
||
<span
|
||
class="text-#fff bg-#407DF1 px5px text-18px rounded-20px mr-5px inlineFlex"
|
||
>{{ ++key }}</span
|
||
>
|
||
<span class="text-18px mr-2">{{ i.title }}</span>
|
||
<img
|
||
v-if="isNotOneWeekAgo(i.createTime)"
|
||
src="@/assets/images/NEW.gif"
|
||
class="h-20px"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<span class="absolute right-10px top-24px text-18px">{{
|
||
i.createTime
|
||
}}</span>
|
||
</div>
|
||
</el-scrollbar>
|
||
<!-- </div> -->
|
||
</div>
|
||
<div class="w-50% h-375px bg-#fff float-left ml-1%">
|
||
<div class="text-24px font-bold p20px">碳足迹平台</div>
|
||
<div
|
||
class="absolute flex flex-col w-full h-full z-200 top-0 left-0 text-center bg-red justify-center items-center"
|
||
style="background-color: rgba(255, 255, 255, 0.8)"
|
||
>
|
||
<img src="@/assets/images/chah.png" />
|
||
<br />
|
||
<div class="text-#5683DB text-36px">【做成中,敬请期待】</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
/* 修正后的代码 */
|
||
::-webkit-scrollbar {
|
||
width: 5px;
|
||
height: 10px;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background-color: #f5f5f5;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: #ccc;
|
||
border-radius: 5px;
|
||
height: 50px; /* 添加高度 */
|
||
}
|
||
.image-container {
|
||
transition: filter 0.3s ease; /* 添加图像加载时的过渡效果 */
|
||
}
|
||
|
||
.truncate {
|
||
display: block;
|
||
max-width: 260px;
|
||
min-width: 260px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.truncates {
|
||
display: block;
|
||
max-width: 340px;
|
||
min-width: 340px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.button {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 20px;
|
||
z-index: 500;
|
||
}
|
||
|
||
.carousel-img {
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.truncate2 {
|
||
max-width: 78%;
|
||
overflow: hidden;
|
||
padding: 5px 10px;
|
||
line-height: 30px;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: #000;
|
||
cursor: pointer;
|
||
|
||
a {
|
||
text-decoration: none;
|
||
}
|
||
}
|
||
|
||
.swipe-nav {
|
||
// absolute left-10px w36px h46px flex items-center justify-center
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 36px;
|
||
height: 46px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid #537deb;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
|
||
&.nav-prev {
|
||
left: 16px;
|
||
}
|
||
|
||
&.nav-next {
|
||
right: 16px;
|
||
}
|
||
}
|
||
|
||
.carousel-img {
|
||
width: 100%;
|
||
height: 240px;
|
||
object-fit: cover;
|
||
}
|
||
</style>
|