You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
502 lines
17 KiB
502 lines
17 KiB
<template>
|
|
<!-- 融媒体 -->
|
|
<div class="tong-container" ref="appRef">
|
|
<div class="bg">
|
|
<MainTitle :title="title"></MainTitle>
|
|
<div class="main">
|
|
<!-- 左边菜单 -->
|
|
<div class="main-left">
|
|
<div
|
|
class="main-left-box"
|
|
:class="{ boxOn: flog == index }"
|
|
v-for="(item, index) in tagTitle"
|
|
:key="index"
|
|
@click="onClick(item, index)"
|
|
>
|
|
<div class="box-icon-text">
|
|
<!-- 右边标题 -->
|
|
<div class="left-title">
|
|
<span class="title-text">{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右边内容 -->
|
|
<div class="main-right">
|
|
<div class="main-right-box">
|
|
<Content
|
|
:scrollData="scrollData"
|
|
:settingData="settingData"
|
|
:infoState="infoState"
|
|
:parentLoad="loadState"
|
|
@openInfo="openInfo"
|
|
>
|
|
</Content>
|
|
<Spin fix v-if="loadState">
|
|
<Icon
|
|
type="load-c"
|
|
size="80"
|
|
class="demo-spin-icon-load"
|
|
color="#c1cedc"
|
|
></Icon>
|
|
<div style="font-size: 40px; color: #c1cedc">
|
|
加载中...
|
|
</div>
|
|
</Spin>
|
|
</div>
|
|
<!-- <div class="page" v-if="scrollData.length > 0 && infoState">
|
|
<Page
|
|
:total="dataFilter.total"
|
|
:current.sync="dataFilter.page"
|
|
:page-size="dataFilter.pageSize"
|
|
@on-change="pageChange"
|
|
show-elevator
|
|
/>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useIndex } from "@/utils/utilsDramAdmin";
|
|
import MainTitle from "./components/MainTitle.vue";
|
|
import Content from "./components/mediaBigScreen/content";
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: "三江翠屏",
|
|
flog: 0,
|
|
dataFilter: {
|
|
page: 1,
|
|
pageSize: 20,
|
|
total: 0,
|
|
},
|
|
// tagTitle: [
|
|
// {
|
|
// columnName: "翠屏",
|
|
// columnId: "3f7adceb-fcf9-4adb-956d-7987b42cd10f",
|
|
// },
|
|
// {
|
|
// columnName: "部门动态",
|
|
// columnId: "16653738-7af1-45d3-b6a3-ab13c49b2760",
|
|
// },
|
|
// {
|
|
// columnName: "电视新闻",
|
|
// columnId: "9d3fe8a8-a994-475e-981c-aac2bce70c9b",
|
|
// },
|
|
// {
|
|
// columnName: "微视频",
|
|
// columnId: "bdb2782e-eaba-4bd9-9f1e-09d85e32c73d",
|
|
// },
|
|
// {
|
|
// columnName: "镇村动态",
|
|
// columnId: "28009c03-4766-40eb-b86d-fe09bb11ac21",
|
|
// },
|
|
// {
|
|
// columnName: "法治翠屏",
|
|
// columnId: "1d15515f-e7d5-4efd-bcdb-12d65104c14d",
|
|
// },
|
|
// {
|
|
// columnName: "医保动态",
|
|
// columnId: "972136f0-172f-436e-9fa9-332ea58fa3d4",
|
|
// },
|
|
// {
|
|
// columnName: "办事指南",
|
|
// columnId: "cd775f6e-d6f5-4b10-a78f-80042e0aa6de",
|
|
// },
|
|
// {
|
|
// columnName: "医保政策",
|
|
// columnId: "a914aa8c-27b9-4ff3-ba83-54811b41fe0b",
|
|
// },
|
|
// {
|
|
// columnName: "直播",
|
|
// columnId: "08d99eb1-b653-4386-955a-53a43c5139c3",
|
|
// },
|
|
// ],
|
|
tagTitle: [],
|
|
scrollData: [],
|
|
tenantDomainName: "",
|
|
tabJumpId: "",
|
|
loadState: false,
|
|
settingData: {},
|
|
infoState: true,
|
|
currentColumnName: "",
|
|
};
|
|
},
|
|
components: { MainTitle, Content },
|
|
mounted() {
|
|
const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
|
|
calcRate();
|
|
windowDraw();
|
|
this.queryFlData();
|
|
},
|
|
created() {},
|
|
methods: {
|
|
// 查询分类
|
|
queryFlData() {
|
|
let url = "/convergenceMedia/getColumn";
|
|
let params = {
|
|
columnId: "64525",
|
|
};
|
|
|
|
this.$http.post(url, this.common.request(params)).then((res) => {
|
|
if (res && res.data.code >= 200 && res.data.code < 400) {
|
|
let data = res.data.data;
|
|
if (
|
|
data &&
|
|
data.body &&
|
|
data.body.blocks &&
|
|
data.body.blocks.length >= 5
|
|
) {
|
|
this.tagTitle =
|
|
data.body.blocks[4].data_props &&
|
|
data.body.blocks[4].data_props.length > 0
|
|
? data.body.blocks[4].data_props
|
|
: [];
|
|
this.onClick(this.tagTitle[0], 0);
|
|
}
|
|
} else {
|
|
this.$Message.error("获取数据失败");
|
|
}
|
|
});
|
|
},
|
|
openInfo(data) {
|
|
this.infoState = data;
|
|
},
|
|
// 左边切换
|
|
// 点击切换tag
|
|
onClick(item, index) {
|
|
this.scrollData = [];
|
|
this.loadState = true;
|
|
this.flog = index;
|
|
this.dataFilter.page = 1;
|
|
this.dataFilter.total = 0;
|
|
this.tabJumpId =
|
|
item.redirection &&
|
|
item.redirection.related_data &&
|
|
item.redirection.related_data.id;
|
|
this.infoState = true;
|
|
this.currentColumnName = item.name;
|
|
this.queryScrollDataList(this.tabJumpId);
|
|
},
|
|
// 查询列表
|
|
queryScrollDataList (id) {
|
|
this.scrollData = []
|
|
let url = "/convergenceMedia/syncNewsColumn";
|
|
let params = {
|
|
// appInfoId: 516,
|
|
columnId: id,
|
|
// pageNum: this.dataFilter.page - 1,
|
|
// pageSize: 10,
|
|
// url: "http://hongqi.wengegroup.com:9001/newNews/getNewsColumnData",
|
|
// userId: "",
|
|
};
|
|
|
|
this.$http.post(url, this.common.request(params)).then((res) => {
|
|
if (res && res.data.code >= 200 && res.data.code < 400) {
|
|
this.loadState = false;
|
|
let data =
|
|
res.data.data && res.data.data.length > 0 && res.data.data.filter(item => {
|
|
if (item.name.includes("新闻列表") || item.name.includes("专题列表")) {
|
|
return true
|
|
}
|
|
})
|
|
data.forEach(element => {
|
|
if (element.data_props && element.data_props.length > 0) {
|
|
this.scrollData.push(...element.data_props)
|
|
}
|
|
});
|
|
|
|
// data.data_props && data.data_props.length > 0
|
|
// ? data.data_props
|
|
// : [];
|
|
this.scrollData = this.scrollData.map((item) => {
|
|
let contentData =
|
|
item.related_data &&
|
|
item.related_data.thumbnails &&
|
|
item.related_data.thumbnails.length > 0 &&
|
|
item.related_data.thumbnails[0];
|
|
return {
|
|
...item,
|
|
url: contentData.url,
|
|
title: item.related_data && item.related_data.title,
|
|
publish_time:
|
|
item.related_data &&
|
|
this.formatTime(item.related_data.publish_time),
|
|
};
|
|
});
|
|
|
|
} else {
|
|
this.$Message.error("获取数据失败");
|
|
}
|
|
});
|
|
},
|
|
formatTime(timestamp) {
|
|
// 处理空值或非数字情况
|
|
if (!timestamp || isNaN(Number(timestamp))) {
|
|
return "未知";
|
|
}
|
|
|
|
// 转换为毫秒级时间戳（确保输入为数字）
|
|
const targetTime = Number(timestamp) * 1000;
|
|
const now = Date.now();
|
|
const diff = now - targetTime; // 时间差（毫秒）
|
|
|
|
// 计算各类时间单位差（向下取整）
|
|
const seconds = Math.floor(diff / 1000);
|
|
const minutes = Math.floor(seconds / 60);
|
|
const hours = Math.floor(minutes / 60);
|
|
const days = Math.floor(hours / 24);
|
|
const years = Math.floor(days / 365);
|
|
|
|
// 小于1分钟（60秒）
|
|
if (seconds < 60) {
|
|
return "刚刚";
|
|
}
|
|
|
|
// 1分钟到1小时内
|
|
if (minutes < 60) {
|
|
return `${minutes}分钟前`;
|
|
}
|
|
|
|
// 1小时到24小时内
|
|
if (hours < 24) {
|
|
return `${hours}小时前`;
|
|
}
|
|
|
|
// 24小时到3天内
|
|
if (days >= 1 && days < 3) {
|
|
return `${days}天前`;
|
|
}
|
|
|
|
// 处理日期格式化
|
|
const date = new Date(targetTime);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
const day = String(date.getDate()).padStart(2, "0");
|
|
const hour = String(date.getHours()).padStart(2, "0");
|
|
const minute = String(date.getMinutes()).padStart(2, "0");
|
|
|
|
// 一年以上显示完整日期时间
|
|
if (years >= 1) {
|
|
return `${year}-${month}-${day} ${hour}:${minute}`;
|
|
}
|
|
|
|
// 3天到1年内显示月日时间
|
|
return `${month}-${day} ${hour}:${minute}`;
|
|
},
|
|
// 分页查询列表
|
|
queryPageList() {
|
|
this.scrollData = [];
|
|
this.loadState = true;
|
|
let url = "/convergenceMedia/selectByAppSpecial";
|
|
let params = {
|
|
appInfoId: 516,
|
|
columnId: this.tabJumpId,
|
|
pageNum: this.dataFilter.page - 1,
|
|
pageSize: 10,
|
|
url: "http://hongqi.wengegroup.com:9001/newNews/getNewsColumnData",
|
|
userId: "",
|
|
};
|
|
this.$http.post(url, this.common.request(params)).then((res) => {
|
|
if (res && res.data.code >= 200 && res.data.code < 400) {
|
|
this.loadState = false;
|
|
this.scrollData = res.data.data[0].list;
|
|
if (res.data.data[0].total) {
|
|
this.dataFilter.total = res.data.data[0].total;
|
|
}
|
|
} else {
|
|
this.$Message.error("获取数据失败");
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* @description 分页更换事件回调
|
|
*/
|
|
pageChange(p) {
|
|
this.dataFilter.page = p;
|
|
this.queryPageList();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "../../styles/fonts/font.less";
|
|
|
|
/deep/ #zycf_style {
|
|
}
|
|
|
|
/deep/ span {
|
|
color: #fff !important;
|
|
}
|
|
|
|
/deep/ .ivu-spin-fix {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.FbHtmlContent {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.tong-container {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
transform: scale(var(--scale)) translate(-50%, -50%);
|
|
transform-origin: 0 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
background-image: url("./../../assets/largeScreen/page-bg.png");
|
|
background-size: 100%;
|
|
|
|
.bg {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.main {
|
|
position: absolute;
|
|
margin: 0 auto;
|
|
top: 90px;
|
|
width: 1804px;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 920px;
|
|
display: flex;
|
|
|
|
.main-left {
|
|
width: 386px;
|
|
height: 876px;
|
|
margin-top: 50px;
|
|
overflow: auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
// 激活样式
|
|
.boxOn {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 386px;
|
|
height: 134px;
|
|
background: url("./../../assets/rmt/bg-ac.png") no-repeat !important;
|
|
background-size: 100%;
|
|
margin-bottom: 24px;
|
|
color: #fff;
|
|
|
|
.title-text {
|
|
font-family: "PingFang SC";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 28px;
|
|
line-height: 39px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-left-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 386px;
|
|
height: 134px;
|
|
background: url("./../../assets/rmt/bg.png") no-repeat;
|
|
background-size: 100%;
|
|
margin-bottom: 24px;
|
|
|
|
.box-icon-text {
|
|
width: 340px;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.left-title {
|
|
.title-text {
|
|
font-family: "PingFang SC";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 28px;
|
|
line-height: 39px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #eef4ff;
|
|
opacity: 0.56;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-left-box:nth-last-child(1) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.main-right {
|
|
width: 1334px;
|
|
height: 876px;
|
|
background: url("./../../assets/screenView/bg-right.png")
|
|
no-repeat;
|
|
background-size: 100%;
|
|
margin: 50px 0 0 48px;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.main-right-box {
|
|
width: 1234px;
|
|
height: 780px;
|
|
margin-top: 36px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
}
|
|
|
|
.page {
|
|
width: 100%;
|
|
height: 50px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/ .ivu-page {
|
|
color: #fff;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/deep/ .ivu-page-next,
|
|
/deep/ .ivu-page-prev,
|
|
/deep/ .ivu-page-item,
|
|
/deep/ .ivu-page-options-elevator input {
|
|
background-color: transparent;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
/deep/ .ivu-page-next a,
|
|
/deep/ .ivu-page-prev a,
|
|
/deep/ .ivu-page-item a {
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|