401 lines
12 KiB
Plaintext
401 lines
12 KiB
Plaintext
<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 { 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: 4,
|
||
total: 10,
|
||
});
|
||
const swiperList = ref();
|
||
onMounted(async () => {
|
||
// 空调节能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;
|
||
}
|
||
// 碳足迹
|
||
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 {
|
||
openUrl(obj.filePath[0].url);
|
||
}
|
||
};
|
||
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 / 4;
|
||
console.log(dataList.value, type);
|
||
}
|
||
|
||
|
||
const msgScoll = ref<HTMLElement | null>(null);
|
||
onMounted(() => {
|
||
msgScoll.value?.addEventListener("scroll", handleVisitsScoll);
|
||
});
|
||
const handleVisitsScoll = () => {
|
||
const container = msgScoll.value;
|
||
if (container) {
|
||
const isAtBottom =
|
||
container.scrollHeight - container.scrollTop === container.clientHeight;
|
||
if (isAtBottom) {
|
||
if (pageNum < maxMsgLingth) {
|
||
++pageNum;
|
||
getZu(pageNum);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="w-full h-full box">
|
||
<!-- <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">空调节能solution活动</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" @click="swipeRef && swipeRef.slidePrev()">
|
||
<NIcon size="40" color="#537deb">
|
||
<ChevronBack />
|
||
</NIcon>
|
||
</div>
|
||
<div class="swipe-nav nav-next" @click="swipeRef && swipeRef.slideNext()">
|
||
<NIcon size="40" color="#537deb">
|
||
<ChevronForward />
|
||
</NIcon>
|
||
</div>
|
||
<Swiper ref="swipeRef" @slideChangeTransitionEnd="handleIndex" @swiper="setSwiperRef" class="h325px"
|
||
:slides-per-view="3" :speed="500" :space-between="0" :modules="modules" :scrollbar="{ draggable: false }"
|
||
:loop="false">
|
||
<SwiperSlide v-for="(i, index) in swiperList" :key="i">
|
||
<div class="w340px h270px overflow-hidden bg-#F6F8FF mt10px relative rd-25px"
|
||
style="box-shadow: 0px 7px 12px 0px #e7e7e7">
|
||
<div class="!bg-gradient-to-r !from-#5C87F5/90 !to-#466CCD/70 text-#fff px20px py15px text-18px truncates">
|
||
活动{{ index + 1 }}：
|
||
{{ i.title }}
|
||
|
||
<!-- <span class="float-right"><el-icon>
|
||
<ArrowRightBold />
|
||
</el-icon></span> -->
|
||
</div>
|
||
|
||
<div class="overflow-hidden w-full h-200px z-10">
|
||
<n-carousel draggable autoplay trigger="hover" mousewheel :preload="true">
|
||
<img v-if=" i.imgUrl" v-for="ite in i.imgUrl" :src="ite.url" class="p10px w-full max-h-200px image-container" />
|
||
</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-0 text-#000 text-left px16px py6px z-100">
|
||
<div class="max-w500px text-12px flex items-center">
|
||
<img src="../../../assets/images/lvbiao@2x.png" class="mr-5px" />
|
||
<span class="truncate text-16px" v-if="i.filePath&&i.filePath.length>0" @click="toDetail(i)">{{ i.filePath[0].originalFileName}} </span>
|
||
<div v-if="i.imgUrl.length > 1" title="查看更多" class="absolute right--20px top-0px w80px h0px " style="background: #0539A3;color: #4D7EE8;text-align: center;font-size: 14px;" >
|
||
更多<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>
|
||
</Swiper>
|
||
</div>
|
||
</AppBlock>
|
||
</div>
|
||
<div class="w-40% 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 " style="background: #0539A3;line-height: 50px;color: #00C2EE;text-align: center;" @click="jumpContentHandler('BCP简报', 2)">
|
||
更多<el-icon>
|
||
<DArrowRight class="" />
|
||
</el-icon>
|
||
</div>
|
||
<!-- <div ref="msgScoll" class="px20px h280px cent_box overflow-y-scroll "> -->
|
||
<div ref="msgScoll" class="px20px h280px cent_box overflow-y-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" @click="toDetail(i)">
|
||
<span class="text-#fff bg-#407DF1 px5px text-16px rounded-20px mr-5px inlineFlex">{{ ++key }}</span>
|
||
<span class="text-18px">{{ i.title }}</span>
|
||
</div>
|
||
<span class="absolute right-10px top-24px text-18px">{{ i.createTime }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-59% 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: 290px;
|
||
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>
|