<template>
|
<div class="container mx-auto px-4 py-8">
|
<!-- 面包屑导航 -->
|
<div class="mb-6 text-sm">
|
<el-breadcrumb separator=">" class="text-gray-600">
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>政策资讯</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<div class="flex gap-[30px]">
|
<div class="left-news-box">
|
<!-- 主标题 -->
|
<h1 class="text-2xl font-bold my-[10px]" style="margin-top:10px;">政策资讯</h1>
|
|
<!-- 标签页 -->
|
<div class="bg-white rounded-lg shadow" style="height: calc(100% - 50px);">
|
<el-tabs v-model="activeTab" class="policy-tabs h-full">
|
<el-tab-pane label="相关法律" name="laws" class="h-full">
|
<div class="flex flex-col w-full h-full" style="justify-content: center; align-items: center;">
|
<!-- 列表内容 -->
|
<div class="w-full px-6 flex-1 h-full" style="box-sizing: border-box;">
|
<div v-for="(item, index) in policyList" :key="index" class="policy-item">
|
<div @click="toDetail"
|
class="flex flex-col justify-between items-start py-4 border-b border-gray-200 hover:bg-gray-50" style="border-bottom: 1px solid #f1f1f1;">
|
<div class="flex-1">
|
<a
|
class="text-blue-600 hover:text-blue-800 text-lg mb-2 block text-[20px] text-[#0d0d0d]">{{
|
item.title
|
}}</a>
|
<p class="text-gray-500 text-[16px] text-[#797979]">{{ item.description }}</p>
|
</div>
|
<div class="text-gray-400 text-sm text-[#797979]">
|
发布时间：{{ item.publishTime }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 分页 -->
|
<div class="flex items-center justify-center p-4 border-t w-full h-[64px]">
|
<div class="flex items-center">
|
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
|
:page-sizes="[20, 30, 50]" :background="true"
|
layout="total, sizes, prev, pager, next, jumper" :total="policyList.length"
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="公告通知" name="notices">
|
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
<!-- 右侧标准动态 -->
|
<div class="">
|
<div class="p-4" style="border: 1px solid #d1d1d1; box-sizing: border-box;">
|
<h3 class="text-lg font-bold mb-4 flex items-center right-title-name" style="border-bottom: 2px solid #003a8f;margin-bottom: 6px; padding-bottom: 5px;">
|
<span class="w-1 h-6 bg-blue-600 mr-2"></span>
|
标准动态
|
</h3>
|
<ul class="space-y-4 my-[0px]">
|
<li v-for="(news, index) in standardNews" :key="index" class="text-sm"
|
style="border-bottom: 1px dashed; border-color: #d1d1d1; padding: 10px 0;">
|
<a href="#" class="text-[18px] text-[#646465] hover:text-blue-600">{{ news.title }}</a>
|
<div class="text-gray-400 mt-1 text-[14px] text-[#646465]">发布时间：{{ news.date }}</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted } from 'vue'
|
import mammoth from 'mammoth';
|
import { useRouter } from 'vue-router';
|
const activeTab = ref('laws')
|
const currentPage = ref(1)
|
const pageSize = ref(20)
|
const total = ref(100)
|
const router = useRouter();
|
// 模拟数据
|
const policyList = ref([
|
{
|
title: '《上海市经济信息化委关于开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作的通知》',
|
description: '有关单位：为贯彻落实《上海市节能减排（应对气候变化）专项资金管理办法（沪发改规范〔2021〕5号）》和《上海市工业通信业用能设备更新专项扶持实施细则》（沪经信规范〔2025〕1号），进一步推进本市工业通信业用能设备更新工作，现组织开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作。',
|
publishTime: '2024-04-23'
|
},
|
// 添加更多数据项...
|
])
|
|
const standardNews = ref([
|
{
|
id: '7',
|
title: '上海市人民政府关于印发《上海市推动大规模设备更新和消费品以旧换新行动计划（2024-2027年）》的通知',
|
date: '2024-04-23',
|
link: 'test',
|
},
|
{
|
id: '1',
|
title: '上海市经济信息化委关于征集用能设备更新供应链平台的通知',
|
date: '2025-02-07',
|
link: 'https://sheitc.sh.gov.cn/jjyx/20250207/7e424cc336b84066890ba2366c4543a1.html',
|
},
|
{
|
id: '2',
|
title: '浙江大规模以旧换新方案公布',
|
date: '2025-02-08',
|
link: 'https://news.qq.com/rain/a/20250208A05YH100',
|
},
|
{
|
id: '3',
|
title: '2024年设备更新与消费品以旧换新成效显著',
|
date: '2025-02-10',
|
link: 'https://www.sohu.com/a/857615850_122006510',
|
},
|
{
|
id: '4',
|
title: '印发推动工业领域设备更新工作实施方案的通知',
|
date: '2024-10-22',
|
link: 'https://gxj.quanzhou.gov.cn/zwgk/zfxxgk/fdzdgknr/gzdt/202410/t20241022_3093021.htm',
|
},
|
{
|
id: '5',
|
title: '关于《上海市工业通信业用能设备更新专项政策实施细则（征求意见稿）》公开征求意见的公告',
|
date: '2024-12-18',
|
link: 'https://sheitc.sh.gov.cn/gg/20241218/517c960cef5d40f0bb04b1099c64d9eb.html',
|
},
|
])
|
|
const handleSizeChange = (val: number) => {
|
pageSize.value = val
|
// TODO: 重新加载数据
|
}
|
|
const handleCurrentChange = (val: number) => {
|
currentPage.value = val
|
// TODO: 重新加载数据
|
}
|
|
const toDetail = ()=>{
|
router.push({
|
path:"/news-detail/99"
|
})
|
}
|
|
onMounted(() => {
|
// TODO: 初始化加载数据
|
readDocFile()
|
})
|
|
const readDocFile = () => {
|
let filePath = "http://198.18.0.1:5680/static/Data/test.docx"
|
// 将文件转为blob对象
|
// let docFileBlob = new Blob([filePath])
|
// let reader = new FileReader()
|
// reader.readAsArrayBuffer(docFileBlob)
|
|
// reader.onload = (evt)=> {
|
// let arrayBuffer = evt.target.result
|
// mammoth.convertToHtml({ arrayBuffer: arrayBuffer }).then((res)=>{
|
// console.log(res,158)
|
// }).catch(err=>{
|
// console.log(err)
|
// })
|
// }
|
|
// 读取文件内容
|
fetch(filePath)
|
.then(res => res.arrayBuffer())
|
.then(buffer => {
|
mammoth.convertToHtml({ arrayBuffer: buffer })
|
.then((result) => {
|
console.log(result,'文件读取');
|
})
|
.catch((err) => {
|
console.error("转换错误:", err);
|
});
|
})
|
.catch(error => console.error('Error reading file:', error));
|
// 将文件转换成blob对象
|
|
// mammoth.convertToHtml({
|
// path: filePath,
|
// // options: {
|
// // styleMap: `
|
// // p[style-name='Title'] => h1
|
// // p[style-name='Subtitle'] => h2
|
// // strong => b
|
// // `
|
// // }
|
// }).then(res => {
|
// console.log(res)
|
// }).catch(err => {
|
// console.log(err)
|
// })
|
}
|
</script>
|
|
<style scoped>
|
.policy-tabs :deep(.el-tabs__header) {
|
margin: 0;
|
border-bottom: 1px solid #e5e7eb;
|
background-color: #f1f1f1;
|
}
|
|
.policy-tabs :deep(.el-tabs__nav-wrap) {
|
padding: 0 1.5rem;
|
}
|
|
.policy-tabs :deep(.el-tabs__item) {
|
font-size: 1rem;
|
height: 48px;
|
line-height: 48px;
|
}
|
|
.policy-tabs :deep(.el-tabs__item.is-active) {
|
font-weight: bold;
|
}
|
|
.policy-item:last-child>div {
|
border-bottom: none;
|
}
|
|
.left-news-box {
|
width: 100%;
|
position: relative;
|
|
&::before {
|
content: "";
|
width: 20%;
|
position: absolute;
|
top: 0px;
|
height: 4px;
|
background-color: #73af2d;
|
}
|
|
&::after {
|
content: "";
|
width: 80%;
|
position: absolute;
|
top: 0px;
|
left: 20%;
|
height: 4px;
|
background-color: #003a8f;
|
}
|
}
|
.right-title-name{
|
position: relative;
|
&::before{
|
content: "";
|
width: 4px;
|
position: absolute;
|
top: 0px;
|
height: 80%;
|
background-color: var(--theme-color);
|
}
|
}
|
|
:deep(.el-tabs__content){
|
height: 100%;
|
}
|
</style>
|
