291 lines
7.8 KiB
Plaintext
291 lines
7.8 KiB
Plaintext
<!-- 外部情报 > 情报详情 -->
|
||
<script setup lang="ts">
|
||
import AppBlock from "@/components/AppBlock.vue";
|
||
import AppNewsBox from "@/components/AppNewsBox.vue";
|
||
import Layout from "./components/Layout.vue";
|
||
import DetailNews from "./DetailNews.vue";
|
||
import {
|
||
getArticleDetail,
|
||
getArticlePage,
|
||
getManagerDetail,
|
||
} from "@/api/daikin/base";
|
||
import { message } from "@/utils/message";
|
||
|
||
const { push } = useRouter();
|
||
const route = useRoute();
|
||
|
||
const SideNews = [
|
||
{ key: "IntelligenceOutside", name: "社外情报" },
|
||
{ key: "IntelligenceWithin", name: "社内情报" },
|
||
];
|
||
|
||
const state = ref<any>({});
|
||
async function getData() {
|
||
const { id, flag } = route.params;
|
||
console.log(typeof(flag))
|
||
if (!id) return;
|
||
if (flag==='true') {
|
||
// 驳回&撤回
|
||
const { data } = await getManagerDetail(id as string);
|
||
data.tagColor = data.tag === "紧急" ? "#e60e0e" : "#2cba06";
|
||
data.content = unescapeHTML(data.content);
|
||
state.value = data;
|
||
} else {
|
||
const { data } = await getArticleDetail(id as string);
|
||
data.tagColor = data.tag === "紧急" ? "#e60e0e" : "#2cba06";
|
||
|
||
data.content = unescapeHTML(data.content);
|
||
state.value = data;
|
||
}
|
||
}
|
||
function unescapeHTML(html: string) {
|
||
const doc = new DOMParser().parseFromString(html, "text/html");
|
||
return doc.documentElement.textContent;
|
||
}
|
||
|
||
async function getDatas(id: string) {
|
||
if (!id) return;
|
||
const { data } = await getArticleDetail(id as string);
|
||
data.content = unescapeHTML(data.content);
|
||
state.value = data;
|
||
}
|
||
|
||
async function toDetail2(n: { id: any }) {
|
||
console.log(route, route.path, n.id);
|
||
if (n.id === 0) return;
|
||
if (n.isSelect === 1) {
|
||
getDatas(n.id);
|
||
} else {
|
||
message.info("您没有权限查看！");
|
||
}
|
||
}
|
||
|
||
getData();
|
||
getPageList(1);
|
||
getPageLists(1);
|
||
|
||
const neiScoll = ref<HTMLElement | null>(null);
|
||
const waiScoll = ref<HTMLElement | null>(null);
|
||
onMounted(() => {
|
||
neiScoll.value?.addEventListener("scroll", handleNeiScoll);
|
||
waiScoll.value?.addEventListener("scroll", handlewaiScoll);
|
||
});
|
||
|
||
const listData = ref<any[]>([]);
|
||
let neiLength: number;
|
||
let neiPum = 1;
|
||
async function getPageList(page) {
|
||
const pasr = {
|
||
pageNum: page,
|
||
pageSize: 6,
|
||
type: 2,
|
||
position: "recommend",
|
||
};
|
||
const { rows, total } = await getArticlePage(pasr);
|
||
neiLength = total / 6;
|
||
listData.value.push(...rows);
|
||
console.log(listData.value);
|
||
}
|
||
|
||
const listDatas = ref<any[]>([]);
|
||
let waiLength: number;
|
||
let waiPum = 1;
|
||
async function getPageLists(page) {
|
||
const pasr = {
|
||
pageNum: page,
|
||
pageSize: 6,
|
||
type: 1,
|
||
position: "recommend",
|
||
};
|
||
const { rows, total } = await getArticlePage(pasr);
|
||
waiLength = total / 6;
|
||
listDatas.value.push(...rows);
|
||
}
|
||
|
||
const handleNeiScoll = () => {
|
||
const container = neiScoll.value;
|
||
if (container) {
|
||
const isAtBottom =
|
||
container.scrollHeight - container.scrollTop === container.clientHeight;
|
||
if (isAtBottom) {
|
||
if (neiPum < neiLength) {
|
||
++neiPum;
|
||
getPageList(neiPum);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
const handlewaiScoll = () => {
|
||
const container = waiScoll.value;
|
||
if (container) {
|
||
const isAtBottom =
|
||
container.scrollHeight - container.scrollTop === container.clientHeight;
|
||
if (isAtBottom) {
|
||
if (waiPum < waiLength) {
|
||
++waiPum;
|
||
getPageList(waiPum);
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Layout>
|
||
<div class="page-wrap h-834px">
|
||
<div class="page-main">
|
||
<AppBlock class="h-full">
|
||
<div class="overflow-y-auto h-full">
|
||
<div class="px46px py40px">
|
||
<DetailNews
|
||
:title="state.title"
|
||
:content="state.content"
|
||
:publishTime="state.publishTime"
|
||
:tag="state.tag"
|
||
:tagColor="state.tagColor"
|
||
:source="state.source"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</AppBlock>
|
||
</div>
|
||
<div class="page-side">
|
||
<AppBlock class="h-400px">
|
||
<div class="box h-full">
|
||
<div
|
||
class="box-title flex items-center"
|
||
@click="push({ name: 'IntelligenceWithin' })"
|
||
>
|
||
<span class="flex-1">社内情报</span>
|
||
<span>❯</span>
|
||
</div>
|
||
<div ref="neiScoll" class="box-content overflow-y-auto px22px">
|
||
<div class="py13px line" v-for="i in listData" :key="i">
|
||
<!-- <AppNewsBox @click="toDetail2(i)"
|
||
class="!lh-2em"
|
||
:labelText="i.tag"
|
||
labelColor="#2cba06"
|
||
:text="i.title"
|
||
:date="i.publishTime"
|
||
size="h20px"
|
||
/> -->
|
||
<div class="flex" @click="toDetail2(i)">
|
||
<img
|
||
v-if="i.tag === 'New'"
|
||
src="../../../assets/images/NEW3.gif"
|
||
class="h20px"
|
||
/>
|
||
<img
|
||
v-if="i.tag === '紧急'"
|
||
src="../../../assets/images/jj.gif"
|
||
class="h20px"
|
||
/>
|
||
<div class="ml5px leading-4.5 max-w300px overflow-ellipsis">
|
||
{{ i.title }}
|
||
</div>
|
||
</div>
|
||
<div class="text-#808696 text-right">{{ i.publishTime }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AppBlock>
|
||
</div>
|
||
<div class="page-side">
|
||
<AppBlock class="h-400px">
|
||
<div class="box h-full">
|
||
<div
|
||
class="box-title flex items-center"
|
||
@click="push({ name: 'IntelligenceOutside' })"
|
||
>
|
||
<span class="flex-1">社外情报</span>
|
||
<span>❯</span>
|
||
</div>
|
||
<div ref="waiScoll" class="box-content overflow-y-auto px22px">
|
||
<div class="py13px line" v-for="i in listDatas" :key="i">
|
||
<!-- <AppNewsBox @click="toDetail2(i)"
|
||
class="!lh-2em"
|
||
:labelText="i.tag"
|
||
labelColor="#2cba06"
|
||
:text="i.title"
|
||
:date="i.publishTime"
|
||
size="h20px"
|
||
/> -->
|
||
|
||
<div class="flex" @click="toDetail2(i)">
|
||
<img
|
||
v-if="i.tag === 'New'"
|
||
src="../../../assets/images/NEW3.gif"
|
||
class="h20px"
|
||
/>
|
||
<img
|
||
v-if="i.tag === '紧急'"
|
||
src="../../../assets/images/jj.gif"
|
||
class="h20px"
|
||
/>
|
||
<div class="ml5px leading-4.5 max-w300px overflow-ellipsis">
|
||
{{ i.title }}
|
||
</div>
|
||
</div>
|
||
<div class="text-#808696 text-right mt8px">
|
||
{{ i.publishTime }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</AppBlock>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
</template>
|
||
|
||
<style scoped lang="less">
|
||
.overflow-ellipsis {
|
||
white-space: nowrap; /* 防止换行 */
|
||
overflow: hidden; /* 隐藏溢出部分 */
|
||
text-overflow: ellipsis; /* 显示省略号 */
|
||
}
|
||
.page-wrap {
|
||
display: grid;
|
||
grid-template-columns: 1fr 314px;
|
||
grid-template-rows: repeat(2, 1fr);
|
||
grid-column-gap: 30px;
|
||
grid-row-gap: 30px;
|
||
|
||
.page-main {
|
||
height: 830px;
|
||
grid-area: 1 / 1 / 3 / 2;
|
||
width: 100%;
|
||
}
|
||
.page-side {
|
||
height: 100%;
|
||
grid-area: 1 / 2 / 2 / 3;
|
||
&:last-of-type {
|
||
height: 300px;
|
||
grid-area: 2 / 2 / 3 / 3;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box {
|
||
--title-h: 58px;
|
||
|
||
border: 0;
|
||
.box-title {
|
||
height: var(--title-h);
|
||
color: #fff;
|
||
background-color: #537deb;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
padding: 0 24px;
|
||
cursor: pointer;
|
||
}
|
||
.box-content {
|
||
height: 100%;
|
||
max-height: calc(100% - var(--title-h));
|
||
}
|
||
}
|
||
.line {
|
||
border-bottom: 1px solid #eef3fb;
|
||
}
|
||
</style>
|