Skip to content

E
emergency-project
Commit e9938e34 by York
Options

提交

parent af7382ab
Showing with 954 additions and 313 deletions
package-lock.json
...@@ -8,11 +8,18 @@ ...@@ -8,11 +8,18 @@
"name": "emergency-project", "name": "emergency-project",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@vue-office/docx": "^1.6.3",
"@vue-office/excel": "^1.7.14",
"@vue-office/pdf": "^2.0.10",
"@vue-office/pptx": "^1.0.1",
"axios": "^1.7.9", "axios": "^1.7.9",
"element-plus": "^2.9.1", "element-plus": "^2.9.3",
"file-saver": "^2.0.5",
"nprogress": "^0.2.0",
"pinia": "^2.3.0", "pinia": "^2.3.0",
"swiper": "^11.1.15", "swiper": "^11.2.1",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-demi": "^0.14.6",
"vue-router": "^4.5.0" "vue-router": "^4.5.0"
}, },
"devDependencies": { "devDependencies": {
...@@ -1408,6 +1415,70 @@ ...@@ -1408,6 +1415,70 @@
"vscode-uri": "^3.0.8" "vscode-uri": "^3.0.8"
} }
}, },
"node_modules/@vue-office/docx": {
"version": "1.6.3",
"resolved": "https://repo.huaweicloud.com/repository/npm/@vue-office/docx/-/docx-1.6.3.tgz",
"integrity": "sha512-Cs+3CAaRBOWOiW4XAhTwwxJ0dy8cPIf6DqfNvYcD3YACiLwO4kuawLF2IAXxyijhbuOeoFsfvoVbOc16A/4bZA==",
"hasInstallScript": true,
"peerDependencies": {
"@vue/composition-api": "^1.7.1",
"vue": "^2.0.0 || >=3.0.0",
"vue-demi": "^0.14.6"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vue-office/excel": {
"version": "1.7.14",
"resolved": "https://repo.huaweicloud.com/repository/npm/@vue-office/excel/-/excel-1.7.14.tgz",
"integrity": "sha512-pVUgt+emDQUnW7q22CfnQ+jl43mM/7IFwYzOg7lwOwPEbiVB4K4qEQf+y/bc4xGXz75w1/e3Kz3G6wAafmFBFg==",
"hasInstallScript": true,
"peerDependencies": {
"@vue/composition-api": "^1.7.1",
"vue": "^2.0.0 || >=3.0.0",
"vue-demi": "^0.14.6"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vue-office/pdf": {
"version": "2.0.10",
"resolved": "https://repo.huaweicloud.com/repository/npm/@vue-office/pdf/-/pdf-2.0.10.tgz",
"integrity": "sha512-yHVLrMAKpMPBkhBwofFyGEtEeJF0Zd7oGmf56Pe5aj/xObdRq3E1CIZqTqhWJNgHV8oLQqaX0vs4p5T1zq+GIA==",
"hasInstallScript": true,
"peerDependencies": {
"@vue/composition-api": "^1.7.1",
"vue": "^2.0.0 || >=3.0.0",
"vue-demi": "^0.14.6"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vue-office/pptx": {
"version": "1.0.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/@vue-office/pptx/-/pptx-1.0.1.tgz",
"integrity": "sha512-+V7Kctzl6f6+Yk4NaD/wQGRIkqLWcowe0jEhPexWQb8Oilbzt1OyhWRWcMsxNDTdrgm6aMLP+0/tmw27cxddMg==",
"hasInstallScript": true,
"peerDependencies": {
"@vue/composition-api": "^1.7.1",
"vue": "^2.0.0 || >=3.0.0",
"vue-demi": "^0.14.6"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vue/babel-helper-vue-transform-on": { "node_modules/@vue/babel-helper-vue-transform-on": {
"version": "1.2.5", "version": "1.2.5",
"resolved": "https://repo.huaweicloud.com/repository/npm/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.5.tgz", "resolved": "https://repo.huaweicloud.com/repository/npm/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.5.tgz",
...@@ -2192,9 +2263,9 @@ ...@@ -2192,9 +2263,9 @@
"dev": true "dev": true
}, },
"node_modules/element-plus": { "node_modules/element-plus": {
"version": "2.9.1", "version": "2.9.3",
"resolved": "https://repo.huaweicloud.com/repository/npm/element-plus/-/element-plus-2.9.1.tgz", "resolved": "https://repo.huaweicloud.com/repository/npm/element-plus/-/element-plus-2.9.3.tgz",
"integrity": "sha512-9Agqf/jt4Ugk7EZ6C5LME71sgkvauPCsnvJN12Xid2XVobjufxMGpRE4L7pS4luJMOmFAH3J0NgYEGZT5r+NDg==", "integrity": "sha512-6tSLp5XytDS4TMZ0P3aGZnr7MXTagfNycepNfIDitd9IgwM9y01+Ssu6mglNi8RiXYhek6LBWNOd/cvpIO12+w==",
"dependencies": { "dependencies": {
"@ctrl/tinycolor": "^3.4.1", "@ctrl/tinycolor": "^3.4.1",
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
...@@ -2379,6 +2450,11 @@ ...@@ -2379,6 +2450,11 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/file-saver": {
"version": "2.0.5",
"resolved": "https://repo.huaweicloud.com/repository/npm/file-saver/-/file-saver-2.0.5.tgz",
"integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"node_modules/fill-range": { "node_modules/fill-range": {
"version": "7.1.1", "version": "7.1.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/fill-range/-/fill-range-7.1.1.tgz", "resolved": "https://repo.huaweicloud.com/repository/npm/fill-range/-/fill-range-7.1.1.tgz",
...@@ -3154,6 +3230,11 @@ ...@@ -3154,6 +3230,11 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/nprogress": {
"version": "0.2.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/nprogress/-/nprogress-0.2.0.tgz",
"integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
},
"node_modules/object-assign": { "node_modules/object-assign": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/object-assign/-/object-assign-4.1.1.tgz", "resolved": "https://repo.huaweicloud.com/repository/npm/object-assign/-/object-assign-4.1.1.tgz",
...@@ -3322,6 +3403,31 @@ ...@@ -3322,6 +3403,31 @@
} }
} }
}, },
"node_modules/pinia/node_modules/vue-demi": {
"version": "0.14.10",
"resolved": "https://repo.huaweicloud.com/repository/npm/vue-demi/-/vue-demi-0.14.10.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/pirates": { "node_modules/pirates": {
"version": "4.0.6", "version": "4.0.6",
"resolved": "https://repo.huaweicloud.com/repository/npm/pirates/-/pirates-4.0.6.tgz", "resolved": "https://repo.huaweicloud.com/repository/npm/pirates/-/pirates-4.0.6.tgz",
...@@ -3914,9 +4020,9 @@ ...@@ -3914,9 +4020,9 @@
"dev": true "dev": true
}, },
"node_modules/swiper": { "node_modules/swiper": {
"version": "11.1.15", "version": "11.2.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/swiper/-/swiper-11.1.15.tgz", "resolved": "https://repo.huaweicloud.com/repository/npm/swiper/-/swiper-11.2.1.tgz",
"integrity": "sha512-IzWeU34WwC7gbhjKsjkImTuCRf+lRbO6cnxMGs88iVNKDwV+xQpBCJxZ4bNH6gSrIbbyVJ1kuGzo3JTtz//CBw==", "integrity": "sha512-62G69+iQRIfUqTmJkWpZDcX891Ra8O9050ckt1/JI2H+0483g+gq0m7gINecDqMtDh2zt5dK+uzBRxGhGOOvQA==",
"funding": [ "funding": [
{ {
"type": "patreon", "type": "patreon",
...@@ -4274,9 +4380,9 @@ ...@@ -4274,9 +4380,9 @@
} }
}, },
"node_modules/vue-demi": { "node_modules/vue-demi": {
"version": "0.14.10", "version": "0.14.6",
"resolved": "https://repo.huaweicloud.com/repository/npm/vue-demi/-/vue-demi-0.14.10.tgz", "resolved": "https://repo.huaweicloud.com/repository/npm/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"hasInstallScript": true, "hasInstallScript": true,
"bin": { "bin": {
"vue-demi-fix": "bin/vue-demi-fix.js", "vue-demi-fix": "bin/vue-demi-fix.js",
......
package.json
...@@ -10,13 +10,18 @@ ...@@ -10,13 +10,18 @@
"type-check": "vue-tsc --build" "type-check": "vue-tsc --build"
}, },
"dependencies": { "dependencies": {
"@vue-office/docx": "^1.6.3",
"@vue-office/excel": "^1.7.14",
"@vue-office/pdf": "^2.0.10",
"@vue-office/pptx": "^1.0.1",
"axios": "^1.7.9", "axios": "^1.7.9",
"element-plus": "^2.9.1", "element-plus": "^2.9.3",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"pinia": "^2.3.0", "pinia": "^2.3.0",
"swiper": "^11.1.15", "swiper": "^11.2.1",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-demi": "^0.14.6",
"vue-router": "^4.5.0" "vue-router": "^4.5.0"
}, },
"devDependencies": { "devDependencies": {
......
public/favicon.ico
No preview for this file type
src/App.vue
<template> <template>
<ElConfigProvider :locale="zhCn">
<router-view /> <router-view />
</ElConfigProvider>
</template> </template>
<script setup></script> <script setup lang="ts">
import { ElConfigProvider } from "element-plus";
import { zhCn } from "element-plus/es/locale/index";
</script>
src/api/wm/wm.js
...@@ -5,7 +5,7 @@ export function getHotList(data) { ...@@ -5,7 +5,7 @@ export function getHotList(data) {
return request({ return request({
url: "/cms/content/list", url: "/cms/content/list",
method: "get", method: "get",
params: data, data: data,
}); });
} }
...@@ -14,7 +14,7 @@ export function getRecoverList(data) { ...@@ -14,7 +14,7 @@ export function getRecoverList(data) {
return request({ return request({
url: "/cms/content/list", url: "/cms/content/list",
method: "get", method: "get",
params: data, data: data,
}); });
} }
...@@ -23,6 +23,24 @@ export function getWantMessage(data) { ...@@ -23,6 +23,24 @@ export function getWantMessage(data) {
return request({ return request({
url: "/cms/content/list", url: "/cms/content/list",
method: "post", method: "post",
params: data, data: data,
});
}
// 留言详情
export function getMessageDetail(data) {
return request({
url: "/cms/content/list",
method: "get",
data: data,
});
}
//多文件上传
export function uploadFile(data) {
return request({
url: "/cms/content/list",
method: "post",
data: data,
}); });
} }
src/components/breadcrumb/BreadCrumb.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<el-breadcrumb-item <el-breadcrumb-item
v-for="(item, index) in breadcrumbItems" v-for="(item, index) in breadcrumbItems"
:key="index" :key="index"
:to="{ path: item.path }" :to="{ path: item.path, query: { searchQuery: item.contentTitle } }"
> >
{{ item.title }} {{ item.title }}
</el-breadcrumb-item> </el-breadcrumb-item>
......
src/components/py/NewsList.vue
...@@ -13,7 +13,10 @@ ...@@ -13,7 +13,10 @@
class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer" class="group p-4 flex items-start border-b border-gray-100 hover:bg-gray-50 transition-colors cursor-pointer"
@click="getToDetail(item.id)" @click="getToDetail(item.id)"
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div
v-if="item.images != null"
class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"
>
<img :src="item.images" class="w-full h-full object-cover" /> <img :src="item.images" class="w-full h-full object-cover" />
</div> </div>
<div class="flex-grow px-6"> <div class="flex-grow px-6">
...@@ -30,10 +33,10 @@ ...@@ -30,10 +33,10 @@
<el-icon class="mr-1"><Clock /></el-icon> <el-icon class="mr-1"><Clock /></el-icon>
{{ item.contentDatetime }} {{ item.contentDatetime }}
</span> </span>
<span class="text-sm text-gray-500 flex items-center"> <!-- <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Document /></el-icon> <el-icon class="mr-1"><Document /></el-icon>
{{ item.contentTags }} {{ item.contentTags }}
</span> </span> -->
<span class="text-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon> <el-icon class="mr-1"><View /></el-icon>
{{ item.contentHit }} {{ item.contentHit }}
...@@ -103,7 +106,10 @@ ...@@ -103,7 +106,10 @@
class="group cursor-pointer" class="group cursor-pointer"
@click="getToDetail(item.id)" @click="getToDetail(item.id)"
> >
<div class="h-32 mb-2 overflow-hidden rounded-lg"> <div
v-if="item.images != null"
class="h-32 mb-2 overflow-hidden rounded-lg"
>
<img :src="item.images" class="w-full h-full object-cover" /> <img :src="item.images" class="w-full h-full object-cover" />
</div> </div>
<div <div
......
src/layout/news.vue
...@@ -3,11 +3,7 @@ ...@@ -3,11 +3,7 @@
<!-- 顶部横幅 --> <!-- 顶部横幅 -->
<header class="bg-white shadow"> <header class="bg-white shadow">
<div class="container mx-auto px-0 h-20 flex items-center"> <div class="container mx-auto px-0 h-20 flex items-center">
<img <img src="@/assets/logo1.png" alt="国徽" class="h-10 mr-4" />
src="https://ai-public.mastergo.com/ai/img_res/38fd70bdc77f4305c862a0962f46c48c.jpg"
alt="国徽"
class="h-14 mr-4"
/>
<div class="flex-1 flex items-center justify-between"> <div class="flex-1 flex items-center justify-between">
<h1 class="text-2xl font-bold text-black"> <h1 class="text-2xl font-bold text-black">
太原市互联网应急指挥和举报中心 太原市互联网应急指挥和举报中心
...@@ -16,7 +12,7 @@ ...@@ -16,7 +12,7 @@
<el-input <el-input
v-model="searchQuery" v-model="searchQuery"
class="!rounded-full" class="!rounded-full"
placeholder="搜索新闻、通知、政策文件..." placeholder="搜索新闻、通知..."
:prefix-icon="Search" :prefix-icon="Search"
@keyup.enter="handleSearch" @keyup.enter="handleSearch"
/> />
...@@ -121,7 +117,10 @@ function navigateTo(index, item) { ...@@ -121,7 +117,10 @@ function navigateTo(index, item) {
function handleSearch() { function handleSearch() {
if (searchQuery.value) { if (searchQuery.value) {
router.push({ path: "/home/search", query: { searchQuery: searchQuery.value } }); router.push({
path: "/home/search",
query: { searchQuery: searchQuery.value },
});
} else { } else {
ElMessage({ ElMessage({
message: "请输入搜索内容", message: "请输入搜索内容",
......
src/layout/py.vue
...@@ -5,10 +5,15 @@ ...@@ -5,10 +5,15 @@
<div class="container mx-auto px-8 py-4"> <div class="container mx-auto px-8 py-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<h1 class="text-2xl font-bold">山西互联网联合辟谣平台</h1> <h1 class="text-2xl font-bold cursor-pointer" @click="goToHome()">
<p class="text-sm opacity-80">主办：山西省互联网信息办公室</p> 太原市互联网联合辟谣平台
</h1>
<!-- <p class="text-sm opacity-80">主办：山西省互联网信息办公室</p> -->
</div> </div>
<div class="text-sm opacity-80">承办：黄河新闻网</div> <p class="text-sm opacity-80 cursor-pointer" @click="goToHome()">
主办：太原市互联网应急指挥和举报中心
</p>
<!-- <div class="text-sm opacity-80">承办：黄河新闻网</div> -->
</div> </div>
</div> </div>
<nav class="bg-white/10 backdrop-blur-sm"> <nav class="bg-white/10 backdrop-blur-sm">
...@@ -65,6 +70,13 @@ const router = useRouter(); ...@@ -65,6 +70,13 @@ const router = useRouter();
const navItems = ref([]); const navItems = ref([]);
function goToHome() {
if (window.opener && !window.opener.closed) {
window.opener.focus(); // 将焦点返回到原始窗口
window.close(); // 关闭当前新窗口
}
}
const data = { const data = {
categoryFlag: HLW_LH_PYPT, categoryFlag: HLW_LH_PYPT,
}; };
......
src/layout/wm.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="min-h-screen bg-gray-50"> <div class="min-h-screen bg-gray-100">
<div class="mx-auto"> <div class="mx-auto">
<!-- Hero区域 --> <!-- Hero区域 -->
<div class="relative h-[330px] mb-8 overflow-hidden"> <div class="relative h-[330px] mb-8 overflow-hidden">
...@@ -14,10 +14,14 @@ ...@@ -14,10 +14,14 @@
class="absolute inset-0 bg-gradient-to-r from-blue-900/90 via-blue-900/70 to-transparent" class="absolute inset-0 bg-gradient-to-r from-blue-900/90 via-blue-900/70 to-transparent"
></div> ></div>
</div> </div>
<div class="relative flex flex-col justify-center h-full px-12">
<div class="relative flex flex-col justify-center h-full px-12 ms-24">
<!-- 顶部区域 --> <!-- 顶部区域 -->
<div class="flex items-center justify-between mb-12"> <div class="mb-10">
<h2 class="text-5xl font-bold text-white max-w-xl leading-tight"> <h2
@click="goToHome()"
class="text-5xl font-bold text-white max-w-xl leading-tight cursor-pointer"
>
网民 网民
<span <span
class="text-6xl" class="text-6xl"
...@@ -25,11 +29,13 @@ ...@@ -25,11 +29,13 @@
>有话说</span >有话说</span
> >
</h2> </h2>
<div class="max-w-2xl bg-white/10 backdrop-blur-sm p-4 rounded-lg"> <div
class="max-w-2xl bg-white/0 backdrop-blur-sm p-2 rounded-lg cursor-pointer"
@click="goToHome()"
>
<p class="text-gray-100 text-sm leading-relaxed"> <p class="text-gray-100 text-sm leading-relaxed">
"倾听民声，解决民忧。让我们共同建设更美好的城市生活。各级政府部门要深入基层，了解群众所需所盼，及时回应群众关切，让互联网成为连接政府与群众的新桥梁。" 主办：太原市互联网应急指挥和举报中心
</p> </p>
<p class="text-right mt-2 text-gray-200">—— 市长 陈志强</p>
</div> </div>
</div> </div>
<p class="text-xl text-gray-200 max-w-xl mb-6"> <p class="text-xl text-gray-200 max-w-xl mb-6">
...@@ -40,6 +46,7 @@ ...@@ -40,6 +46,7 @@
v-model="searchQuery" v-model="searchQuery"
placeholder="搜索您关注的问题..." placeholder="搜索您关注的问题..."
class="!w-[360px] custom-input" class="!w-[360px] custom-input"
@keyup.enter="handleSearch"
> >
<template #prefix> <template #prefix>
<el-icon><Search /></el-icon> <el-icon><Search /></el-icon>
...@@ -49,6 +56,7 @@ ...@@ -49,6 +56,7 @@
<button <button
class="flex items-center px-4 py-[9px] bg-blue-500 text-white rounded-[10px] hover:bg-blue-600 transition-colors whitespace-nowrap" class="flex items-center px-4 py-[9px] bg-blue-500 text-white rounded-[10px] hover:bg-blue-600 transition-colors whitespace-nowrap"
style="border: none" style="border: none"
@click="handleSearch"
> >
<el-icon class="mr-1"><Search /></el-icon> <el-icon class="mr-1"><Search /></el-icon>
<span>搜索</span> <span>搜索</span>
...@@ -69,7 +77,7 @@ ...@@ -69,7 +77,7 @@
<!-- 页脚 --> <!-- 页脚 -->
<footer class="footer-footer py-12 mt-8"> <footer class="footer-footer py-12 mt-8">
<div class="max-w-7xl mx-auto px-6"> <div class="w-[1440px] mx-auto px-6">
<div class="grid grid-cols-3 gap-8 mb-8"> <div class="grid grid-cols-3 gap-8 mb-8">
<div> <div>
<h4 class="font-bold text-lg mb-4 text-white">联系我们</h4> <h4 class="font-bold text-lg mb-4 text-white">联系我们</h4>
...@@ -125,8 +133,16 @@ import { ...@@ -125,8 +133,16 @@ import {
Message, Message,
} from "@element-plus/icons-vue"; } from "@element-plus/icons-vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter(); const router = useRouter();
function goToHome() {
if (window.opener && !window.opener.closed) {
window.opener.focus(); // 将焦点返回到原始窗口
window.close(); // 关闭当前新窗口
}
}
router.push({ router.push({
path: "/wm/wmhome", path: "/wm/wmhome",
}); });
...@@ -138,6 +154,20 @@ function iMessageClick() { ...@@ -138,6 +154,20 @@ function iMessageClick() {
path: "/wm/imessage", path: "/wm/imessage",
}); });
} }
function handleSearch() {
if (searchQuery.value) {
router.push({
path: "/wm/search",
query: { searchQuery: searchQuery.value },
});
} else {
ElMessage({
message: "请输入搜索内容",
type: "warning",
});
}
}
</script> </script>
<style scoped> <style scoped>
.footer-footer { .footer-footer {
......
src/router/index.ts
...@@ -29,6 +29,7 @@ import RecoverList from "../views/wm/recover/RecoverList.vue"; ...@@ -29,6 +29,7 @@ import RecoverList from "../views/wm/recover/RecoverList.vue";
import MessageDetail from "../views/wm/message/MessageDetail.vue"; import MessageDetail from "../views/wm/message/MessageDetail.vue";
import RecoverDetail from "../views/wm/recover/RecoverDetail.vue"; import RecoverDetail from "../views/wm/recover/RecoverDetail.vue";
import IMessage from "../views/wm/imessage/IMessage.vue"; import IMessage from "../views/wm/imessage/IMessage.vue";
import WmSearchList from "../views/wm/search/WmSearchList.vue";
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
...@@ -159,6 +160,11 @@ const router = createRouter({ ...@@ -159,6 +160,11 @@ const router = createRouter({
path: "/wm/imessage", path: "/wm/imessage",
component: IMessage, component: IMessage,
}, },
{
name: "WmSearchList",
path: "/wm/search",
component: WmSearchList,
},
], ],
}, },
], ],
......
src/views/home/detail/NewsDetail.vue
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</div> </div>
</div> </div>
<div v-html="details.content"></div> <div class="editor-content" v-html="details.content"></div>
</div> </div>
<!-- 右侧边栏 --> <!-- 右侧边栏 -->
...@@ -47,7 +47,10 @@ ...@@ -47,7 +47,10 @@
class="group cursor-pointer" class="group cursor-pointer"
@click="itemTyClick(item.id)" @click="itemTyClick(item.id)"
> >
<div class="relative h-40 mb-2 overflow-hidden rounded-lg"> <div
v-if="item.images != null"
class="relative h-40 mb-2 overflow-hidden rounded-lg"
>
<img <img
:src="item.images" :src="item.images"
:alt="item.contentTitle" :alt="item.contentTitle"
...@@ -119,9 +122,13 @@ const route = useRoute(); ...@@ -119,9 +122,13 @@ const route = useRoute();
const router = useRouter(); const router = useRouter();
const breadcrumbItems = ref([ const breadcrumbItems = ref([
{ title: "首页", path: "/home/home" }, { title: "首页", path: "/home/home", contentTitle: "" },
{ title: route.query.title, path: route.query.titlePath }, {
{ title: "详情", path: "" }, title: route.query.title,
path: route.query.titlePath,
contentTitle: route.query.contentTitle,
},
{ title: "详情", path: "", contentTitle: "" },
]); ]);
const breadcrumbItems2 = ref([ const breadcrumbItems2 = ref([
...@@ -129,36 +136,6 @@ const breadcrumbItems2 = ref([ ...@@ -129,36 +136,6 @@ const breadcrumbItems2 = ref([
{ title: "详情", path: "" }, { title: "详情", path: "" },
]); ]);
function toRouteName() {
switch (route.query.type) {
case "0":
return "首页";
case "1":
return "新闻热点";
case "2":
return "太原新闻";
case "3":
return "山西新闻";
case "4":
return "通知公告";
}
}
function toRoute() {
switch (route.query.type) {
case "0":
return "/home/home";
case "1":
return "/home/news";
case "2":
return "/home/tynews";
case "3":
return "/home/sxnews";
case "4":
return "/home/announcements";
}
}
const hotNews = ref([]); const hotNews = ref([]);
const announcements = ref([]); const announcements = ref([]);
...@@ -183,30 +160,8 @@ function getHotsNewsList(pageSize: number, pageNo: number) { ...@@ -183,30 +160,8 @@ function getHotsNewsList(pageSize: number, pageNo: number) {
}); });
} }
function itemTyClick(id: number) { function itemTyClick(id: any) {
router.push({ getNewsDetails(id);
path: "/home/news/detail",
query: {
type: toType(),
id: id,
tabId: route.query.tabId,
},
});
}
function toType() {
switch (route.query.type) {
case "0":
return "0";
case "1":
return "1";
case "2":
return "2";
case "3":
return "3";
case "4":
return "4";
}
} }
getTzGgNewsList(5, 1); getTzGgNewsList(5, 1);
...@@ -244,27 +199,20 @@ watch( ...@@ -244,27 +199,20 @@ watch(
() => route.query.id, () => route.query.id,
(newVal, oldVal) => { (newVal, oldVal) => {
if (newVal) { if (newVal) {
data.id = newVal; getNewsDetails(newVal);
getNewsDetail(data).then((res) => {
details.value = res.data;
console.log(details.value);
});
} }
} }
); );
getNewsDetail(data).then((res) => { getNewsDetails(route.query.id);
details.value = res.data;
console.log(details.value);
});
function itemClicks(id: number) { function getNewsDetails(id: any) {
router.push({ const data = {
path: "/home/news/detail",
query: {
id: id, id: id,
tabId: route.query.tabId, };
}, getNewsDetail(data).then((res) => {
details.value = res.data;
console.log(details.value);
}); });
} }
</script> </script>
...@@ -279,4 +227,8 @@ function itemClicks(id: number) { ...@@ -279,4 +227,8 @@ function itemClicks(id: number) {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
line-height: 1.75; line-height: 1.75;
} }
:deep(.editor-content p img) {
max-width: 100%;
}
</style> </style>
src/views/home/home/HomeView.vue
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</swiper> </swiper>
</div> </div>
<!-- 快捷入口 --> <!-- 快捷入口 -->
<div class="container mx-auto px-4 mt-10 w-[1440px]"> <div class="container mx-auto px-4 mt-8 w-[1440px]">
<div class="grid grid-cols-3 gap-6"> <div class="grid grid-cols-3 gap-6">
<div <div
v-for="(entry, index) in quickEntries" v-for="(entry, index) in quickEntries"
...@@ -61,16 +61,17 @@ ...@@ -61,16 +61,17 @@
</div> </div>
</div> </div>
<!-- 新闻内容区 --> <!-- 新闻内容区 -->
<div class="container mx-auto px-4 mt-10 grid grid-cols-3 gap-6 w-[1440px]"> <div class="container mx-auto px-4 mt-8 grid grid-cols-3 gap-6 w-[1440px]">
<!-- 最新新闻 --> <!-- 最新新闻 -->
<div class="col-span-2 bg-white rounded-lg p-6 shadow-sm"> <div class="col-span-2 bg-white rounded-lg p-6 shadow-sm">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold" style="color: #000">太原新闻</h2> <h2 class="text-xl font-bold" style="color: #000">太原新闻</h2>
<el-button <el-button
v-if="true"
type="primary" type="primary"
class="!rounded-button" class="!rounded-button"
text text
@click="goToTyMoreList()" @click="goToTyMoreList(1)"
>更多</el-button >更多</el-button
> >
</div> </div>
...@@ -86,7 +87,11 @@ ...@@ -86,7 +87,11 @@
:src="item.images" :src="item.images"
fit="fill" fit="fill"
/> --> /> -->
<img :src="item.images" class="w-32 h-24 object-cover rounded" /> <img
v-if="item.images != null"
:src="item.images"
class="w-32 h-24 object-cover rounded"
/>
<div> <div>
<h3 <h3
...@@ -109,8 +114,18 @@ ...@@ -109,8 +114,18 @@
<div class="space-y-6"> <div class="space-y-6">
<!-- 热门新闻 --> <!-- 热门新闻 -->
<div class="bg-white rounded-lg p-6 shadow-sm"> <div class="bg-white rounded-lg p-6 shadow-sm">
<h2 class="text-xl font-bold mb-4" style="color: #000">热门新闻</h2> <div class="flex justify-between items-center mb-4">
<div class="space-y-4"> <h2 class="text-xl font-bold" style="color: #000">热门新闻</h2>
<el-button
v-if="true"
type="primary"
class="!rounded-button"
text
@click="goToTyMoreList(2)"
>更多</el-button
>
</div>
<div class="space-y-1">
<div <div
v-for="(hot, index) in hotNews" v-for="(hot, index) in hotNews"
:key="index" :key="index"
...@@ -160,15 +175,19 @@ ...@@ -160,15 +175,19 @@
</div> </div>
</div> </div>
<!-- 权威发布与辟谣专区 --> <!-- 权威发布与辟谣专区 -->
<div class="container mx-auto px-4 mt-10 w-[1440px]"> <div class="container mx-auto px-4 mt-8 w-[1440px]">
<div class="grid grid-cols-2 gap-6"> <div class="grid grid-cols-2 gap-6">
<!-- 权威发布 --> <!-- 权威发布 -->
<div class="bg-white rounded-lg p-6 shadow-sm"> <div class="bg-white rounded-lg p-6 shadow-sm">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold text-black">权威发布</h2> <h2 class="text-xl font-bold text-black">权威发布</h2>
<!-- <el-button type="primary" class="!rounded-button" text <el-button
type="primary"
class="!rounded-button"
text
@click="goToTyMoreList(3)"
>更多</el-button >更多</el-button
> --> >
</div> </div>
<div class="space-y-4"> <div class="space-y-4">
<div <div
...@@ -195,9 +214,13 @@ ...@@ -195,9 +214,13 @@
<div class="bg-white rounded-lg p-6 shadow-sm"> <div class="bg-white rounded-lg p-6 shadow-sm">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold text-black">辟谣专区</h2> <h2 class="text-xl font-bold text-black">辟谣专区</h2>
<!-- <el-button type="primary" class="!rounded-button" text <el-button
type="primary"
class="!rounded-button"
text
@click="goToTyMoreList(4)"
>更多</el-button >更多</el-button
> --> >
</div> </div>
<div class="space-y-4"> <div class="space-y-4">
<div <div
...@@ -208,6 +231,7 @@ ...@@ -208,6 +231,7 @@
> >
<div class="flex-shrink-0 w-24 h-16"> <div class="flex-shrink-0 w-24 h-16">
<img <img
v-if="item.images != null"
:src="item.images" :src="item.images"
class="w-full h-full object-cover rounded" class="w-full h-full object-cover rounded"
/> />
...@@ -233,7 +257,7 @@ ...@@ -233,7 +257,7 @@
</div> </div>
</div> </div>
<!-- 友情链接 --> <!-- 友情链接 -->
<div class="container mx-auto px-4 mt-10 mb-10 w-[1440px]"> <div class="container mx-auto px-4 mt-8 mb-8 w-[1440px]">
<div class="bg-white rounded-lg p-6 shadow-sm"> <div class="bg-white rounded-lg p-6 shadow-sm">
<h2 class="text-xl font-bold mb-4 text-black">友情链接</h2> <h2 class="text-xl font-bold mb-4 text-black">友情链接</h2>
<div class="grid grid-cols-6 gap-4"> <div class="grid grid-cols-6 gap-4">
...@@ -242,7 +266,7 @@ ...@@ -242,7 +266,7 @@
:key="index" :key="index"
:href="link.url" :href="link.url"
target="_blank" target="_blank"
class="text-gray-600 hover:text-blue-600" class="text-gray-600 hover:text-blue-600 text-center"
> >
{{ link.name }} {{ link.name }}
</a> </a>
...@@ -342,16 +366,48 @@ function goToDetail(id: number) { ...@@ -342,16 +366,48 @@ function goToDetail(id: number) {
}); });
} }
//太原更多 //太原更多
function goToTyMoreList() { function goToTyMoreList(index: number) {
switch (index) {
case 1: //太原新闻-更多
router.push({ router.push({
path: "/home/tynews", path: "/home/tynews",
query: { query: {
type: 0, type: 0,
}, },
}); });
break;
case 2: //热门新闻-更多
router.push({
path: "/home/news",
query: {
type: 1,
},
});
break;
case 3: //辟谣专区-更多
// 打开新标签
let routeData1 = router.resolve({
path: "/py/authority",
query: {
type: 1,
},
});
window.open(routeData1.href, "_blank");
break;
case 4: //辟谣专区-更多
// 打开新标签
let routeData2 = router.resolve({
path: "/py/rumor",
query: {
type: 1,
},
});
window.open(routeData2.href, "_blank");
break;
}
} }
getHotsNewsList(4, 1); getHotsNewsList(5, 1);
//获取新闻热点 //获取新闻热点
function getHotsNewsList(pageSize: number, pageNo: number) { function getHotsNewsList(pageSize: number, pageNo: number) {
...@@ -367,7 +423,7 @@ function getHotsNewsList(pageSize: number, pageNo: number) { ...@@ -367,7 +423,7 @@ function getHotsNewsList(pageSize: number, pageNo: number) {
}); });
} }
getQwList(5, 1); getQwList(4, 1);
//获取权威发布 //获取权威发布
function getQwList(pageSize: number, pageNo: number) { function getQwList(pageSize: number, pageNo: number) {
......
src/views/home/hotnews/News.vue
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
<el-image <el-image
v-if="news.images != null"
class="w-full h-full object-cover" class="w-full h-full object-cover"
:src="news.images" :src="news.images"
fit="fill" fit="fill"
...@@ -34,17 +35,17 @@ ...@@ -34,17 +35,17 @@
<el-icon class="mr-1"><Clock /></el-icon> <el-icon class="mr-1"><Clock /></el-icon>
{{ news.contentDatetime }} {{ news.contentDatetime }}
</span> </span>
<span class="text-sm text-gray-500 flex items-center"> <!-- <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Document /></el-icon> <el-icon class="mr-1"><Document /></el-icon>
{{ news.contentTags }} {{ news.contentTags }}
</span> </span> -->
<span class="text-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon> <el-icon class="mr-1"><View /></el-icon>
{{ news.contentHit }} {{ news.contentHit }}
</span> </span>
</div> </div>
</div> </div>
<div class="w-24 flex-shrink-0 text-right text-blue-500"> <!-- <div class="w-24 flex-shrink-0 text-right text-blue-500">
<el-tag <el-tag
:type="news.contentTags" :type="news.contentTags"
size="small" size="small"
...@@ -52,7 +53,7 @@ ...@@ -52,7 +53,7 @@
> >
{{ news.contentTags }} {{ news.contentTags }}
</el-tag> </el-tag>
</div> </div> -->
</div> </div>
</div> </div>
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
...@@ -99,6 +100,7 @@ ...@@ -99,6 +100,7 @@
:fit="fit" :fit="fit"
></el-image> --> ></el-image> -->
<img <img
v-if="item.images != null"
:src="item.images" :src="item.images"
:alt="item.title" :alt="item.title"
class="w-full h-full object-cover" class="w-full h-full object-cover"
......
src/views/home/jb/Jb.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
>首页</router-link >首页</router-link
> >
<el-icon class="mx-2"><ArrowRight /></el-icon> <el-icon class="mx-2"><ArrowRight /></el-icon>
<span class="text-gray-900">留言列表</span> <span class="text-gray-900">太原市互联网违法和不良信息举报平台</span>
</div> </div>
<!-- 页面标题 --> <!-- 页面标题 -->
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<div class="grid grid-cols-3 gap-8"> <div class="grid grid-cols-3 gap-8">
<!-- 中央网信办举报入口 --> <!-- 中央网信办举报入口 -->
<div <div
class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-50" class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-100"
@click="goUrl(1)" @click="goUrl(1)"
> >
<img <img
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
</div> </div>
<!-- 山西省举报入口 --> <!-- 山西省举报入口 -->
<div <div
class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-50" class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-100"
@click="goUrl(2)" @click="goUrl(2)"
> >
<img <img
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
</div> </div>
<!-- 太原市举报入口 --> <!-- 太原市举报入口 -->
<div <div
class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-50" class="border rounded-lg p-6 flex flex-col items-center justify-center hover:shadow-md transition-shadow bg-gray-100"
@click="goUrl(3)" @click="goUrl(3)"
> >
<img <img
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
</ol> </ol>
</div> </div>
<div> <div>
<h3 class="font-medium mb-4">二、注意事项</h3> <h3 class="font-medium mb-4 text-black">二、注意事项</h3>
<ol class="list-decimal list-inside space-y-2 text-gray-700"> <ol class="list-decimal list-inside space-y-2 text-gray-700">
<li>请您自觉遵守中华人民共和国宪法和法律。</li> <li>请您自觉遵守中华人民共和国宪法和法律。</li>
<li>举报应当实事求是，应对举报内容的真实性、客观性负责。</li> <li>举报应当实事求是，应对举报内容的真实性、客观性负责。</li>
...@@ -178,13 +178,15 @@ import { Phone, Message, ArrowRight } from "@element-plus/icons-vue"; ...@@ -178,13 +178,15 @@ import { Phone, Message, ArrowRight } from "@element-plus/icons-vue";
function goUrl(type: number) { function goUrl(type: number) {
switch (type) { switch (type) {
case 1: //中央网信办 case 1: //中央网信办
window.open("https://www.baidu.com/"); window.open("https://www.12377.cn");
break; break;
case 2: //山西省举报中心 case 2: //山西省举报中心
window.open("https://www.tynews.cn/"); window.open("https://www.sxgov.cn/node_280205.htm");
break; break;
case 3: //太原市举报平台 case 3: //太原市举报平台
window.open("https://www.tynews.cn/"); window.open(
"http://oa.wangxinban.cn/jb/#/Home/Home?agencyID=52340bbb-f782-4886-02c4-08d9605acd8c&agencyName=太原市网信"
);
break; break;
} }
} }
......
src/views/home/search/SearchList.vue
...@@ -34,17 +34,17 @@ ...@@ -34,17 +34,17 @@
<el-icon class="mr-1"><Clock /></el-icon> <el-icon class="mr-1"><Clock /></el-icon>
{{ news.contentDatetime }} {{ news.contentDatetime }}
</span> </span>
<span class="text-sm text-gray-500 flex items-center"> <!-- <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Document /></el-icon> <el-icon class="mr-1"><Document /></el-icon>
{{ news.contentTags }} {{ news.contentTags }}
</span> </span> -->
<span class="text-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon> <el-icon class="mr-1"><View /></el-icon>
{{ news.contentHit }} {{ news.contentHit }}
</span> </span>
</div> </div>
</div> </div>
<div class="w-24 flex-shrink-0 text-right text-blue-500"> <!-- <div class="w-24 flex-shrink-0 text-right text-blue-500">
<el-tag <el-tag
:type="news.contentTags" :type="news.contentTags"
size="small" size="small"
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
> >
{{ news.contentTags }} {{ news.contentTags }}
</el-tag> </el-tag>
</div> </div> -->
</div> </div>
</div> </div>
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
...@@ -139,7 +139,7 @@ ...@@ -139,7 +139,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref, watch } from "vue";
import { getNewsList } from "@/api/home/news/list"; import { getNewsList } from "@/api/home/news/list";
import { baseImageUrl, rdxw, tyxw, tzgg } from "@/utils/config"; import { baseImageUrl, rdxw, tyxw, tzgg } from "@/utils/config";
import { import {
...@@ -174,7 +174,7 @@ const handleSizeChange = (val: number) => { ...@@ -174,7 +174,7 @@ const handleSizeChange = (val: number) => {
const handleCurrentChange = (val: number) => { const handleCurrentChange = (val: number) => {
pageSize.value = pageSize.value; pageSize.value = pageSize.value;
pageNo.value = val; pageNo.value = val;
getList(pageSize.value, pageNo.value); getList(route.query.searchQuery, pageSize.value, pageNo.value);
}; };
const newsList = ref([]); const newsList = ref([]);
const tyNews = ref([]); const tyNews = ref([]);
...@@ -222,13 +222,22 @@ function getTzGgNewsList(pageSize: number, pageNo: number) { ...@@ -222,13 +222,22 @@ function getTzGgNewsList(pageSize: number, pageNo: number) {
}); });
} }
getList(pageSize.value, pageNo.value); // 监听数据变化
watch(
() => route.query.searchQuery,
(newVal, oldVal) => {
if (newVal) {
getList(newVal, pageSize.value, pageNo.value);
}
}
);
getList(searchQuery, pageSize.value, pageNo.value);
//获取新闻热点列表 //获取新闻热点列表
function getList(pageSize: number, pageNo: number) { function getList(searchQuery: any, pageSize: number, pageNo: number) {
// newsList.value = [];
const datas = { const datas = {
contentType: rdxw, contentTitle: searchQuery,
pageSize: pageSize, pageSize: pageSize,
pageNo: pageNo, pageNo: pageNo,
}; };
...@@ -253,6 +262,7 @@ function getToDetail(id: number) { ...@@ -253,6 +262,7 @@ function getToDetail(id: number) {
query: { query: {
title: "搜索结果", title: "搜索结果",
titlePath: "/home/search", titlePath: "/home/search",
contentTitle: route.query.searchQuery,
type: 1, type: 1,
id: id, id: id,
}, },
......
src/views/home/sxnews/ShanxiNews.vue
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
<el-image <el-image
v-if="news.images != null"
class="w-full h-full object-cover" class="w-full h-full object-cover"
:src="news.images" :src="news.images"
fit="fill" fit="fill"
...@@ -34,17 +35,17 @@ ...@@ -34,17 +35,17 @@
<el-icon class="mr-1"><Clock /></el-icon> <el-icon class="mr-1"><Clock /></el-icon>
{{ news.contentDatetime }} {{ news.contentDatetime }}
</span> </span>
<span class="text-sm text-gray-500 flex items-center"> <!-- <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Document /></el-icon> <el-icon class="mr-1"><Document /></el-icon>
{{ news.contentTags }} {{ news.contentTags }}
</span> </span> -->
<span class="text-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon> <el-icon class="mr-1"><View /></el-icon>
{{ news.contentHit }} {{ news.contentHit }}
</span> </span>
</div> </div>
</div> </div>
<div class="w-24 flex-shrink-0 text-right text-blue-500"> <!-- <div class="w-24 flex-shrink-0 text-right text-blue-500">
<el-tag <el-tag
:type="news.contentTags" :type="news.contentTags"
size="small" size="small"
...@@ -52,7 +53,7 @@ ...@@ -52,7 +53,7 @@
> >
{{ news.contentTags }} {{ news.contentTags }}
</el-tag> </el-tag>
</div> </div> -->
</div> </div>
</div> </div>
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
......
src/views/home/tynews/TaiyuanNews.vue
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
> >
<div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg"> <div class="w-32 h-32 flex-shrink-0 overflow-hidden rounded-lg">
<el-image <el-image
v-if="news.images != null"
class="w-full h-full object-cover" class="w-full h-full object-cover"
:src="news.images" :src="news.images"
fit="fill" fit="fill"
...@@ -34,17 +35,17 @@ ...@@ -34,17 +35,17 @@
<el-icon class="mr-1"><Clock /></el-icon> <el-icon class="mr-1"><Clock /></el-icon>
{{ news.contentDatetime }} {{ news.contentDatetime }}
</span> </span>
<span class="text-sm text-gray-500 flex items-center"> <!-- <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><Document /></el-icon> <el-icon class="mr-1"><Document /></el-icon>
{{ news.contentTags }} {{ news.contentTags }}
</span> </span> -->
<span class="text-sm text-gray-500 flex items-center"> <span class="text-sm text-gray-500 flex items-center">
<el-icon class="mr-1"><View /></el-icon> <el-icon class="mr-1"><View /></el-icon>
{{ news.contentHit }} {{ news.contentHit }}
</span> </span>
</div> </div>
</div> </div>
<div class="w-24 flex-shrink-0 text-right text-blue-500"> <!-- <div class="w-24 flex-shrink-0 text-right text-blue-500">
<el-tag <el-tag
:type="news.contentTags" :type="news.contentTags"
size="small" size="small"
...@@ -52,7 +53,7 @@ ...@@ -52,7 +53,7 @@
> >
{{ news.contentTags }} {{ news.contentTags }}
</el-tag> </el-tag>
</div> </div> -->
</div> </div>
</div> </div>
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
......
src/views/py/detail/NewsDetail.vue
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
</div> </div>
</div> </div>
<div v-html="details.content"></div> <div class="editor-content" v-html="details.content"></div>
</div> </div>
<!-- 右侧边栏 --> <!-- 右侧边栏 -->
...@@ -47,7 +47,10 @@ ...@@ -47,7 +47,10 @@
class="group cursor-pointer" class="group cursor-pointer"
@click="goToDetail(item.id)" @click="goToDetail(item.id)"
> >
<div class="relative h-40 mb-2 overflow-hidden rounded-lg"> <div
v-if="item.images != null"
class="relative h-40 mb-2 overflow-hidden rounded-lg"
>
<img <img
:src="item.images" :src="item.images"
:alt="item.contentTitle" :alt="item.contentTitle"
...@@ -126,40 +129,6 @@ const breadcrumbItems2 = ref([ ...@@ -126,40 +129,6 @@ const breadcrumbItems2 = ref([
{ title: "详情", path: "" }, { title: "详情", path: "" },
]); ]);
// function toRouteName() {
// switch (route.query.type) {
// case "0":
// return "首页";
// case "1":
// return "权威发布";
// case "2":
// return "辟谣专区";
// case "3":
// return "专家解读";
// case "4":
// return "法律法规";
// case "5":
// return "读图识谣";
// }
// }
// function toRoute() {
// switch (route.query.type) {
// case "0":
// return "/py/pyhome";
// case "1":
// return "/py/authority";
// case "2":
// return "/py/rumor";
// case "3":
// return "/py/expert";
// case "4":
// return "/py/law";
// case "5":
// return "/py/reading";
// }
// }
getList1(3, 1); getList1(3, 1);
getList2(5, 1); getList2(5, 1);
...@@ -182,13 +151,7 @@ function getList1(pageSize: number, pageNo: number) { ...@@ -182,13 +151,7 @@ function getList1(pageSize: number, pageNo: number) {
} }
function goToDetail(id: number) { function goToDetail(id: number) {
router.push({ getNewsDetails(id);
path: "/py/news/detail",
query: {
type: route.query.type,
id: id,
},
});
} }
//获取通知公告 //获取通知公告
...@@ -213,28 +176,27 @@ function getList2(pageSize: number, pageNo: number) { ...@@ -213,28 +176,27 @@ function getList2(pageSize: number, pageNo: number) {
//统计点击数量 //统计点击数量
getHit(route.query.id); getHit(route.query.id);
const data = {
id: route.query.id,
};
// 监听数据变化 // 监听数据变化
watch( // watch(
() => route.query.id, // () => route.query.id,
(newVal, oldVal) => { // (newVal, oldVal) => {
if (newVal) { // if (newVal) {
data.id = newVal; // data.id = newVal;
// getNewsDetails(newVal);
// }
// }
// );
getNewsDetails(route.query.id);
function getNewsDetails(id: any) {
const data = {
id: id,
};
getNewsDetail(data).then((res) => { getNewsDetail(data).then((res) => {
details.value = res.data; details.value = res.data;
console.log(details.value); console.log(details.value);
}); });
} }
}
);
getNewsDetail(data).then((res) => {
details.value = res.data;
console.log(details.value);
});
</script> </script>
<style scoped> <style scoped>
...@@ -247,4 +209,7 @@ getNewsDetail(data).then((res) => { ...@@ -247,4 +209,7 @@ getNewsDetail(data).then((res) => {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
line-height: 1.75; line-height: 1.75;
} }
:deep(.editor-content p img) {
max-width: 100%;
}
</style> </style>
src/views/py/home/PyHome.vue
...@@ -327,8 +327,8 @@ function getToDetail(id: number) { ...@@ -327,8 +327,8 @@ function getToDetail(id: number) {
path: "/py/news/detail", path: "/py/news/detail",
query: { query: {
pathType: "-1", pathType: "-1",
type1: zjjd, type1: pyzq,
type2: pyzq, type2: zjjd,
title1: "辟谣专区", title1: "辟谣专区",
title2: "专家解读", title2: "专家解读",
id: id, id: id,
......
src/views/wm/home/WmHome.vue
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<div class="flex-1"> <div class="flex-1">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h4 class="text-gray-900 font-medium">{{ item.title }}</h4> <h4 class="text-gray-900 font-medium">{{ item.title }}</h4>
<span class="text-gray-500 text-sm">{{ item.department }}</span> <span class="text-gray-500 text-sm">{{ item.date }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -164,34 +164,35 @@ const replies = ref([ ...@@ -164,34 +164,35 @@ const replies = ref([
// }); // });
// } // }
const hotList = ref([]);
const recoverList = ref([]);
getList1(6, 1); getList1(6, 1);
getList2(5, 1); getList2(6, 1);
//热点留言 //热点留言
function getList1(pageSize: number, pageNo: number) { function getList1(pageSize: number, pageNo: number) {
const datas = { const datas = {
contentType: "",
pageSize: pageSize, pageSize: pageSize,
pageNo: pageNo, pageNo: pageNo,
}; };
getHotList(datas).then((response) => { getHotList(datas).then((response) => {
const data = response.data; const data = response.data;
const rowsList = data.rows; const rowsList = data.rows;
// list1.value = rowsList; hotList.value = rowsList;
}); });
} }
//热点留言 //最新回复
function getList2(pageSize: number, pageNo: number) { function getList2(pageSize: number, pageNo: number) {
const datas = { const datas = {
contentType: "",
pageSize: pageSize, pageSize: pageSize,
pageNo: pageNo, pageNo: pageNo,
}; };
getRecoverList(datas).then((response) => { getRecoverList(datas).then((response) => {
const data = response.data; const data = response.data;
const rowsList = data.rows; const rowsList = data.rows;
// list1.value = rowsList; recoverList.value = rowsList;
}); });
} }
......
src/views/wm/imessage/IMessage.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="bg-gray-50"> <div>
<!-- 主要内容区域 --> <!-- 主要内容区域 -->
<div class="container mx-auto px-0 py-0 w-[1440px]"> <div class="container mx-auto px-0 py-0 w-[1440px]">
<bread-crumb :breadcrumbItems="breadcrumbItems" /> <bread-crumb :breadcrumbItems="breadcrumbItems" />
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
<form @submit.prevent="handleSubmit" class="space-y-6"> <form @submit.prevent="handleSubmit" class="space-y-6">
<div class="space-y-2"> <div class="space-y-2">
<label class="block text-sm font-medium text-gray-700"> <label class="block text-sm font-medium text-gray-700">
姓名 <span class="text-red-500">*</span> <span class="text-red-500">*</span> 姓名
</label> </label>
<el-input <el-input
v-model="formData.name" v-model="formData.name"
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<label class="block text-sm font-medium text-gray-700"> <label class="block text-sm font-medium text-gray-700">
留言标题 <span class="text-red-500">*</span> <span class="text-red-500">*</span> 留言标题
</label> </label>
<el-input <el-input
v-model="formData.title" v-model="formData.title"
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<label class="block text-sm font-medium text-gray-700"> <label class="block text-sm font-medium text-gray-700">
详细内容 <span class="text-red-500">*</span> <span class="text-red-500">*</span> 详细内容
</label> </label>
<el-input <el-input
v-model="formData.content" v-model="formData.content"
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<label class="block text-sm font-medium text-gray-700"> <label class="block text-sm font-medium text-gray-700">
联系电话 <span class="text-red-500">*</span> <span class="text-red-500">*</span> 联系电话
</label> </label>
<el-input <el-input
v-model="formData.phone" v-model="formData.phone"
...@@ -120,7 +120,19 @@ ...@@ -120,7 +120,19 @@
<label class="block text-sm font-medium text-gray-700"> <label class="block text-sm font-medium text-gray-700">
上传附件 上传附件
</label> </label>
<el-upload class="upload-demo" :auto-upload="false" action="#"> <el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:before-remove="beforeRemove"
multiple
:limit="3"
ref="uploadRef"
:on-success="handleSuccess"
:on-exceed="handleExceed"
:file-list="fileList"
:auto-upload="true"
accept=".jpg,.png,.doc,.docx,.xslx,pdf"
>
<el-button <el-button
type="danger" type="danger"
class="!rounded-button whitespace-nowrap" class="!rounded-button whitespace-nowrap"
...@@ -128,14 +140,14 @@ ...@@ -128,14 +140,14 @@
> >
<template #tip> <template #tip>
<div class="text-sm text-gray-500 mt-1"> <div class="text-sm text-gray-500 mt-1">
支持 jpg、png、pdf 格式文件 支持 jpg、jpeg、png、pdf、doc、docx、xslx 格式文件
</div> </div>
</template> </template>
</el-upload> </el-upload>
</div> </div>
<div class="space-y-2"> <div class="space-y-2">
<label class="block text-sm font-medium text-gray-700"> <label class="block text-sm font-medium text-gray-700">
验证码 <span class="text-red-500">*</span> <span class="text-red-500">*</span> 验证码
</label> </label>
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<el-input <el-input
...@@ -172,10 +184,13 @@ ...@@ -172,10 +184,13 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted } from "vue"; import { ref, onMounted, getCurrentInstance, watch } from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { Warning, ArrowRight } from "@element-plus/icons-vue"; import { Warning, ArrowRight, Message } from "@element-plus/icons-vue";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue"; import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import { getWantMessage, uploadFile } from "@/api/wm/wm";
import { ElMessageBox } from "element-plus";
// const { proxy } = getCurrentInstance();
const breadcrumbItems = ref([ const breadcrumbItems = ref([
{ title: "首页", path: "/wm/wmhome" }, { title: "首页", path: "/wm/wmhome" },
...@@ -183,6 +198,7 @@ const breadcrumbItems = ref([ ...@@ -183,6 +198,7 @@ const breadcrumbItems = ref([
]); ]);
const letters = Array.from("ABCDEFGHJKLMNPQRSTUVWXYZ23456789"); const letters = Array.from("ABCDEFGHJKLMNPQRSTUVWXYZ23456789");
const generateCaptcha = () => { const generateCaptcha = () => {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
...@@ -239,16 +255,38 @@ const generateCaptcha = () => { ...@@ -239,16 +255,38 @@ const generateCaptcha = () => {
image: canvas.toDataURL(), image: canvas.toDataURL(),
}; };
}; };
const captchaText = ref(""); const captchaText = ref("");
const captchaImage = ref(""); const captchaImage = ref("");
const fileList = ref([]);
const uploadRef = ref();
const refreshCaptcha = () => { const refreshCaptcha = () => {
const captcha = generateCaptcha(); const captcha = generateCaptcha();
captchaText.value = captcha.text; captchaText.value = captcha.text;
captchaImage.value = captcha.image; captchaImage.value = captcha.image;
}; };
onMounted(() => { onMounted(() => {
refreshCaptcha(); refreshCaptcha();
}); });
// 文件上传个数限制
function handleExceed(files: any, fileList: any) {
ElMessageBox.alert(`最多只能上传 3 个文件`);
}
//文件移除回调
function beforeRemove(file: any, fileList: any) {
return ElMessageBox.confirm(`确定移除 ${file.name}这个文件？`);
}
//文件上传成功回调
function handleSuccess() {
ElMessage({
message: "上传成功",
type: "success",
});
}
const formData = ref({ const formData = ref({
name: "", name: "",
title: "", title: "",
...@@ -256,6 +294,8 @@ const formData = ref({ ...@@ -256,6 +294,8 @@ const formData = ref({
phone: "", phone: "",
captcha: "", captcha: "",
}); });
//提交表单
const handleSubmit = () => { const handleSubmit = () => {
if ( if (
!formData.value.name || !formData.value.name ||
...@@ -279,6 +319,9 @@ const handleSubmit = () => { ...@@ -279,6 +319,9 @@ const handleSubmit = () => {
formData.value.captcha = ""; formData.value.captcha = "";
return; return;
} }
// uploadRef.value.submit();
// 提交表单
getWantMessage(formData.value).then((res) => {
ElMessage({ ElMessage({
message: "提交成功", message: "提交成功",
type: "success", type: "success",
...@@ -291,7 +334,9 @@ const handleSubmit = () => { ...@@ -291,7 +334,9 @@ const handleSubmit = () => {
phone: "", phone: "",
captcha: "", captcha: "",
}; };
uploadRef.value.clearFiles(); // 清空文件列表
refreshCaptcha(); refreshCaptcha();
});
}; };
</script> </script>
<style scoped> <style scoped>
......
src/views/wm/message/MessageDetail.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="bg-gray-50">
<div class="mx-auto w-[1440px] px-4 py-0"> <div class="mx-auto w-[1440px] px-4 py-0">
<bread-crumb <bread-crumb
:breadcrumbItems=" :breadcrumbItems="
...@@ -20,7 +19,7 @@ ...@@ -20,7 +19,7 @@
<span <span
class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700" class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700"
> >
已办理 已回复
</span> </span>
<span>留言人: 李**</span> <span>留言人: 李**</span>
<span>时间: 2024年1月15日 09:23</span> <span>时间: 2024年1月15日 09:23</span>
...@@ -28,42 +27,110 @@ ...@@ -28,42 +27,110 @@
</div> </div>
<!-- 问题描述 --> <!-- 问题描述 -->
<div class="mb-8"> <div class="mb-6">
<p class="mb-4 text-gray-600"> <p class="text-gray-600">
施工扬尘污染问题严重影响了周边居民的正常生活，希望相关部门能够重视此事。主要存在以下问题： 施工扬尘污染问题严重影响了周边居民的正常生活，希望相关部门能够重视此事。主要存在以下问题：
<br />施工现场未按要求设置防尘设施 <br />运输车辆未做好防尘措施
<br />现场积尘较多，未及时清理
<br />建议加强监管力度，落实各项防尘措施，保障居民生活环境。
</p> </p>
<ul class="ml-6 list-disc space-y-2 text-gray-600"> <!-- 附件区域 -->
<li>施工现场未按要求设置防尘设施</li> <div
<li>运输车辆未做好防尘措施</li> v-if="attachments.length > 0"
<li>现场积尘较多，未及时清理</li> class="mt-1 border-t border-gray-200 pt-3"
</ul> >
<p class="mt-4 text-gray-600"> <h3 class="mb-3 text-sm font-medium text-gray-900 weight-bold">
建议加强监管力度，落实各项防尘措施，保障居民生活环境。 附件：
</p> </h3>
<div class="space-y-1">
<div
v-for="(file, index) in attachments"
:key="index"
class="group flex cursor-pointer items-center rounded-md p-1 hover:bg-gray-50"
@click="handlePreview(file)"
>
<el-icon class="mr-2 text-gray-400" color="blue">
<Document
v-if="
file.type === 'pdf' ||
file.type === 'doc' ||
file.type === 'docx'
"
/>
<Picture
v-else-if="
file.type === 'jpg' ||
file.type === 'png' ||
file.type === 'jpeg'
"
/>
<Grid v-else-if="file.type === 'xlsx'" />
</el-icon>
<span class="text-sm text-gray-600 group-hover:text-blue-600">{{
file.name
}}</span>
</div> </div>
</div>
</div>
</div>
<!-- 预览弹窗 -->
<el-dialog
custom-class="preview-dialog"
v-model="previewVisible"
:title="currentFile?.name"
destroy-on-close
style="margin-top: 10vh; width: 80%"
>
<div style="min-height: 75vh">
<img
class="center-block h-full w-full object-contain"
v-if="
currentFile?.type === 'jpg' ||
currentFile?.type === 'png' ||
currentFile?.type === 'jpeg'
"
:src="currentFile.url"
style="height: 75vh"
/>
<vue-office-pdf
v-if="currentFile?.type === 'pdf'"
class="h-full w-full min-h-[600px]"
:src="currentFile.url"
style="height: 75vh"
/>
<vue-office-docx
v-if="currentFile?.type === 'doc' || currentFile?.type === 'docx'"
:src="currentFile.url"
style="height: 75vh"
/>
<vue-office-excel
v-if="currentFile?.type === 'xlsx'"
:src="currentFile.url"
style="height: 75vh"
/>
<!-- <vue-office-pptx
v-if="currentFile?.type === 'ppt'"
:src="currentFile.url"
style="height: 75vh"
/> -->
</div>
</el-dialog>
<!-- 官方回复 --> <!-- 官方回复 -->
<div class="rounded-lg bg-gray-50 p-6"> <div class="rounded-lg bg-gray-50 p-5">
<h2 class="mb-4 text-lg font-medium text-gray-900">官方回复：</h2> <h2 class="mb-4 text-lg font-medium text-red-500">官方回复：</h2>
<div class="space-y-4 text-gray-600"> <div class="space-y-4 text-gray-600">
<p> <p>
网友您好！收到您的投诉后，我局高度重视，立即组织相关部门进行实地调查和处理。经查： 网友您好！收到您的投诉后，我局高度重视，立即组织相关部门进行实地调查和处理。经查：
</p> <br />1.
<p>
1.
关于城东新区排水管网改造工程施工现场扬尘污染问题，我局已要求施工单位立即采取以下整改措施： 关于城东新区排水管网改造工程施工现场扬尘污染问题，我局已要求施工单位立即采取以下整改措施：
</p> <br />增设雾炮机和喷淋设备，加强施工现场降尘
<ul class="ml-6 list-disc space-y-2"> <br />对裸露土地进行苫盖，设置防尘网
<li>增设雾炮机和喷淋设备，加强施工现场降尘</li> <br />增加洒水车频次，保持路面湿润 <br />2.
<li>对裸露土地进行苫盖，设置防尘网</li>
<li>增加洒水车频次，保持路面湿润</li>
</ul>
<p>
2.
目前整改措施已全部落实到位，扬尘污染问题得到有效控制。后续我局将继续加强监管，确保施工期间不发生扬尘污染问题。 目前整改措施已全部落实到位，扬尘污染问题得到有效控制。后续我局将继续加强监管，确保施工期间不发生扬尘污染问题。
<br />感谢您对我们工作的监督，我们将持续改进服务质量。
</p> </p>
<p>感谢您对我们工作的监督，我们将持续改进服务质量。</p>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -71,10 +138,24 @@ ...@@ -71,10 +138,24 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ArrowRight } from "@element-plus/icons-vue"; import {
ArrowRight,
Document,
Picture,
Grid,
DataBoard,
} from "@element-plus/icons-vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue"; import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import { ref } from "vue"; import { ref } from "vue";
import { getMessageDetail } from "@/api/wm/wm";
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficePptx from "@vue-office/pptx";
import "@vue-office/excel/lib/index.css";
import "@vue-office/docx/lib/index.css";
const route = useRoute(); const route = useRoute();
...@@ -88,6 +169,41 @@ const breadcrumbItems2 = ref([ ...@@ -88,6 +169,41 @@ const breadcrumbItems2 = ref([
{ title: "首页", path: "/wm/wmhome" }, { title: "首页", path: "/wm/wmhome" },
{ title: "详情", path: "" }, { title: "详情", path: "" },
]); ]);
// 获取留言详情
getMessageDetail(route.query.id).then((res) => {});
interface FileItem {
name: string;
type: string;
url: string;
}
const attachments = ref<FileItem[]>([
{
name: "现场照片1.jpeg",
type: "jpeg",
url: "https://q7.itc.cn/images01/20240805/c433884dec2943c7ac15098e4f940e96.jpeg",
},
{
name: "污染情况报告.pdf",
type: "pdf",
url: "http://static.shanhuxueyuan.com/test.pdf",
},
{
name: "监测数据.xlsx",
type: "xlsx",
url: "http://static.shanhuxueyuan.com/demo/excel.xlsx",
},
]);
const previewVisible = ref(false);
const currentFile = ref<FileItem | null>(null);
const handlePreview = (file: FileItem) => {
currentFile.value = file;
previewVisible.value = true;
};
</script> </script>
<style scoped> <style scoped>
......
src/views/wm/message/MessageList.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="bg-gray-50">
<div class="w-[1440px] mx-auto px-4"> <div class="w-[1440px] mx-auto px-4">
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<div class="flex items-center justify-between py-2 border-b mb-5"> <div class="flex items-center justify-between py-2 border-b mb-5">
...@@ -41,26 +40,56 @@ ...@@ -41,26 +40,56 @@
<!-- 分页 --> <!-- 分页 -->
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
<el-pagination <el-pagination
v-model:current-page="currentPage" v-model:current-page="pageNo"
:page-size="10" v-model:page-size="pageSize"
:total="50" background
:pager-count="5" :total="total"
:page-sizes="[10, 20, 30, 40]"
layout="prev, pager, next" layout="prev, pager, next"
class="!rounded-button" @size-change="handleSizeChange"
@current-change="handleCurrentChange"
/> />
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { Search, ArrowRight } from "@element-plus/icons-vue"; import { Search, ArrowRight } from "@element-plus/icons-vue";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue"; import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import { getHotList } from "@/api/wm/wm";
const router = useRouter(); const router = useRouter();
const searchText = ref(""); const searchText = ref("");
const currentPage = ref(1); const pageNo = ref(1);
const pageSize = ref(10);
const hotList = ref([]);
const total = ref(0);
const handleSizeChange = (val: number) => {
pageSize.value = val;
pageNo.value = pageNo.value;
};
const handleCurrentChange = (val: number) => {
pageSize.value = pageSize.value;
pageNo.value = val;
getList(pageSize.value, pageNo.value);
};
getList(pageSize.value, pageNo.value);
//获取新闻热点列表
function getList(pageSize: number, pageNo: number) {
const datas = {
pageSize: pageSize,
pageNo: pageNo,
};
getHotList(datas).then((response) => {
const data = response.data;
const rowsList = data.rows;
hotList.value = rowsList;
});
}
const breadcrumbItems = ref([ const breadcrumbItems = ref([
{ title: "首页", path: "/wm/wmhome" }, { title: "首页", path: "/wm/wmhome" },
......
src/views/wm/recover/RecoverDetail.vue
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 --> <!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template> <template>
<div class="bg-gray-50">
<div class="mx-auto w-[1440px] px-4 py-0"> <div class="mx-auto w-[1440px] px-4 py-0">
<!-- 面包屑导航 -->
<bread-crumb <bread-crumb
:breadcrumbItems=" :breadcrumbItems="
route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems route.query.pathType == '-1' ? breadcrumbItems2 : breadcrumbItems
...@@ -21,7 +19,7 @@ ...@@ -21,7 +19,7 @@
<span <span
class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700" class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700"
> >
已办理 已回复
</span> </span>
<span>留言人: 李**</span> <span>留言人: 李**</span>
<span>时间: 2024年1月15日 09:23</span> <span>时间: 2024年1月15日 09:23</span>
...@@ -29,42 +27,110 @@ ...@@ -29,42 +27,110 @@
</div> </div>
<!-- 问题描述 --> <!-- 问题描述 -->
<div class="mb-8"> <div class="mb-6">
<p class="mb-4 text-gray-600"> <p class="text-gray-600">
施工扬尘污染问题严重影响了周边居民的正常生活，希望相关部门能够重视此事。主要存在以下问题： 施工扬尘污染问题严重影响了周边居民的正常生活，希望相关部门能够重视此事。主要存在以下问题：
<br />施工现场未按要求设置防尘设施 <br />运输车辆未做好防尘措施
<br />现场积尘较多，未及时清理
<br />建议加强监管力度，落实各项防尘措施，保障居民生活环境。
</p> </p>
<ul class="ml-6 list-disc space-y-2 text-gray-600"> <!-- 附件区域 -->
<li>施工现场未按要求设置防尘设施</li> <div
<li>运输车辆未做好防尘措施</li> v-if="attachments.length > 0"
<li>现场积尘较多，未及时清理</li> class="mt-1 border-t border-gray-200 pt-3"
</ul> >
<p class="mt-4 text-gray-600"> <h3 class="mb-3 text-sm font-medium text-gray-900 weight-bold">
建议加强监管力度，落实各项防尘措施，保障居民生活环境。 附件：
</p> </h3>
<div class="space-y-1">
<div
v-for="(file, index) in attachments"
:key="index"
class="group flex cursor-pointer items-center rounded-md p-1 hover:bg-gray-50"
@click="handlePreview(file)"
>
<el-icon class="mr-2 text-gray-400" color="blue">
<Document
v-if="
file.type === 'pdf' ||
file.type === 'doc' ||
file.type === 'docx'
"
/>
<Picture
v-else-if="
file.type === 'jpg' ||
file.type === 'png' ||
file.type === 'jpeg'
"
/>
<Grid v-else-if="file.type === 'xlsx'" />
</el-icon>
<span class="text-sm text-gray-600 group-hover:text-blue-600">{{
file.name
}}</span>
</div>
</div>
</div>
</div>
<!-- 预览弹窗 -->
<el-dialog
custom-class="preview-dialog"
v-model="previewVisible"
:title="currentFile?.name"
destroy-on-close
style="margin-top: 10vh; width: 80%"
>
<div style="min-height: 75vh">
<img
class="center-block h-full w-full object-contain"
v-if="
currentFile?.type === 'jpg' ||
currentFile?.type === 'png' ||
currentFile?.type === 'jpeg'
"
:src="currentFile.url"
style="height: 75vh"
/>
<vue-office-pdf
v-if="currentFile?.type === 'pdf'"
class="h-full w-full min-h-[600px]"
:src="currentFile.url"
style="height: 75vh"
/>
<vue-office-docx
v-if="currentFile?.type === 'doc' || currentFile?.type === 'docx'"
:src="currentFile.url"
style="height: 75vh"
/>
<vue-office-excel
v-if="currentFile?.type === 'xlsx'"
:src="currentFile.url"
style="height: 75vh"
/>
<!-- <vue-office-pptx
v-if="currentFile?.type === 'ppt'"
:src="currentFile.url"
style="height: 75vh"
/> -->
</div> </div>
</el-dialog>
<!-- 官方回复 --> <!-- 官方回复 -->
<div class="rounded-lg bg-gray-50 p-6"> <div class="rounded-lg bg-gray-50 p-5">
<h2 class="mb-4 text-lg font-medium text-gray-900">官方回复：</h2> <h2 class="mb-4 text-lg font-medium text-red-500">官方回复：</h2>
<div class="space-y-4 text-gray-600"> <div class="space-y-4 text-gray-600">
<p> <p>
网友您好！收到您的投诉后，我局高度重视，立即组织相关部门进行实地调查和处理。经查： 网友您好！收到您的投诉后，我局高度重视，立即组织相关部门进行实地调查和处理。经查：
</p> <br />1.
<p>
1.
关于城东新区排水管网改造工程施工现场扬尘污染问题，我局已要求施工单位立即采取以下整改措施： 关于城东新区排水管网改造工程施工现场扬尘污染问题，我局已要求施工单位立即采取以下整改措施：
</p> <br />增设雾炮机和喷淋设备，加强施工现场降尘
<ul class="ml-6 list-disc space-y-2"> <br />对裸露土地进行苫盖，设置防尘网
<li>增设雾炮机和喷淋设备，加强施工现场降尘</li> <br />增加洒水车频次，保持路面湿润 <br />2.
<li>对裸露土地进行苫盖，设置防尘网</li>
<li>增加洒水车频次，保持路面湿润</li>
</ul>
<p>
2.
目前整改措施已全部落实到位，扬尘污染问题得到有效控制。后续我局将继续加强监管，确保施工期间不发生扬尘污染问题。 目前整改措施已全部落实到位，扬尘污染问题得到有效控制。后续我局将继续加强监管，确保施工期间不发生扬尘污染问题。
<br />感谢您对我们工作的监督，我们将持续改进服务质量。
</p> </p>
<p>感谢您对我们工作的监督，我们将持续改进服务质量。</p>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -72,13 +138,27 @@ ...@@ -72,13 +138,27 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ArrowRight } from "@element-plus/icons-vue"; import {
ArrowRight,
Document,
Picture,
Grid,
DataBoard,
} from "@element-plus/icons-vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue"; import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import { ref } from "vue"; import { ref } from "vue";
import { getMessageDetail } from "@/api/wm/wm";
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficePptx from "@vue-office/pptx";
import "@vue-office/excel/lib/index.css";
import "@vue-office/docx/lib/index.css";
const route = useRoute(); const route = useRoute();
const type = route.query.type;
const breadcrumbItems = ref([ const breadcrumbItems = ref([
{ title: "首页", path: "/wm/wmhome" }, { title: "首页", path: "/wm/wmhome" },
{ title: route.query.title, path: route.query.pathType }, { title: route.query.title, path: route.query.pathType },
...@@ -89,6 +169,41 @@ const breadcrumbItems2 = ref([ ...@@ -89,6 +169,41 @@ const breadcrumbItems2 = ref([
{ title: "首页", path: "/wm/wmhome" }, { title: "首页", path: "/wm/wmhome" },
{ title: "详情", path: "" }, { title: "详情", path: "" },
]); ]);
// 获取留言详情
getMessageDetail(route.query.id).then((res) => {});
interface FileItem {
name: string;
type: string;
url: string;
}
const attachments = ref<FileItem[]>([
{
name: "现场照片1.jpeg",
type: "jpeg",
url: "https://q7.itc.cn/images01/20240805/c433884dec2943c7ac15098e4f940e96.jpeg",
},
{
name: "污染情况报告.pdf",
type: "pdf",
url: "http://static.shanhuxueyuan.com/test.pdf",
},
{
name: "监测数据.xlsx",
type: "xlsx",
url: "http://static.shanhuxueyuan.com/demo/excel.xlsx",
},
]);
const previewVisible = ref(false);
const currentFile = ref<FileItem | null>(null);
const handlePreview = (file: FileItem) => {
currentFile.value = file;
previewVisible.value = true;
};
</script> </script>
<style scoped> <style scoped>
......
src/views/wm/recover/RecoverList.vue
...@@ -49,12 +49,14 @@ ...@@ -49,12 +49,14 @@
<!-- 分页 --> <!-- 分页 -->
<div class="flex justify-center mt-8"> <div class="flex justify-center mt-8">
<el-pagination <el-pagination
v-model:current-page="currentPage" v-model:current-page="pageNo"
:page-size="pageSize" v-model:page-size="pageSize"
:total="totalItems" background
:pager-count="5" :total="total"
:page-sizes="[10, 20, 30, 40]"
layout="prev, pager, next" layout="prev, pager, next"
class="!rounded-button" @size-change="handleSizeChange"
@current-change="handleCurrentChange"
/> />
</div> </div>
</div> </div>
...@@ -66,15 +68,45 @@ import { ref, computed } from "vue"; ...@@ -66,15 +68,45 @@ import { ref, computed } from "vue";
import { Search, ArrowRight } from "@element-plus/icons-vue"; import { Search, ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue"; import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
import { getRecoverList } from "@/api/wm/wm";
const router = useRouter(); const router = useRouter();
const searchText = ref(""); const searchText = ref("");
const currentPage = ref(1); const pageNo = ref(1);
const pageSize = ref(5); const pageSize = ref(10);
const recoverList = ref([]);
const total = ref(0);
const handleSizeChange = (val: number) => {
pageSize.value = val;
pageNo.value = pageNo.value;
};
const handleCurrentChange = (val: number) => {
pageSize.value = pageSize.value;
pageNo.value = val;
getList(pageSize.value, pageNo.value);
};
getList(pageSize.value, pageNo.value);
//获取新闻热点列表
function getList(pageSize: number, pageNo: number) {
const datas = {
pageSize: pageSize,
pageNo: pageNo,
};
getRecoverList(datas).then((response) => {
const data = response.data;
const rowsList = data.rows;
recoverList.value = rowsList;
});
}
const breadcrumbItems = ref([ const breadcrumbItems = ref([
{ title: "首页", path: "/wm/wmhome" }, { title: "首页", path: "/wm/wmhome" },
{ title: "回复列表" }, { title: "回复列表" },
]); ]);
const allItems = [ const allItems = [
{ {
title: "关于东湖公园设施改善的回复", title: "关于东湖公园设施改善的回复",
...@@ -116,7 +148,7 @@ const allItems = [ ...@@ -116,7 +148,7 @@ const allItems = [
const totalItems = computed(() => allItems.length); const totalItems = computed(() => allItems.length);
const displayItems = computed(() => { const displayItems = computed(() => {
const start = (currentPage.value - 1) * pageSize.value; const start = (pageNo.value - 1) * pageSize.value;
const filtered = allItems.filter( const filtered = allItems.filter(
(item) => (item) =>
item.title.includes(searchText.value) || item.title.includes(searchText.value) ||
......
src/views/wm/search/WmSearchList.vue 0 → 100644
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
<div class="mx-auto w-[1440px] px-4">
<!-- 面包屑导航 -->
<div class="flex items-center justify-between py-2 border-b mb-5">
<bread-crumb :breadcrumbItems="breadcrumbItems" />
</div>
<!-- 回复列表 -->
<div>
<div
v-for="(item, index) in displayItems"
:key="index"
class="bg-white rounded-lg p-6 mb-4 shadow-sm hover:shadow-md transition-shadow"
@click="clickList(item.id)"
>
<div class="flex justify-between items-start mb-3">
<h3 class="text-lg font-medium text-gray-900">{{ item.title }}</h3>
<span
:class="[
'px-3 py-1 rounded-full text-sm',
item.status === '已处理'
? 'bg-green-50 text-green-600'
: 'bg-orange-50 text-orange-600',
]"
>{{ item.status }}</span
>
</div>
<p class="text-gray-600 mb-4">{{ item.content }}</p>
<div class="text-sm text-gray-400">{{ item.time }}</div>
</div>
</div>
<!-- 分页 -->
<div class="flex justify-center mt-8">
<el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="totalItems"
:pager-count="5"
layout="prev, pager, next"
class="!rounded-button"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { Search, ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import BreadCrumb from "@/components/breadcrumb/BreadCrumb.vue";
const router = useRouter();
const searchText = ref("");
const currentPage = ref(1);
const pageSize = ref(5);
const breadcrumbItems = ref([
{ title: "首页", path: "/wm/wmhome" },
{ title: "搜索结果" },
]);
const allItems = [
{
title: "关于东湖公园设施改善的回复",
content:
"感谢您的建议。我局已安排相关部门实地考察，将在东湖公园增设 25 组休闲椅和 10 处遮阳凉亭，预计本月内完工。",
time: "2024-12-27 09:41",
status: "已处理",
},
{
title: "关于龙泉山交通问题的回复",
content:
"关于龙泉山拥堵问题，我们已制定改善方案：1. 优化信号灯配时；2. 增设潮汐车道；3. 加强交通疏导。预计一周内见效。",
time: "2024-12-02 12:24",
status: "已处理",
},
{
title: "关于金融大厦停车问题的回复",
content:
"金融大厦地下停车场扩建工程已列入今年重点项目，将新增车位 600 个，预计 6 月完工。",
time: "2024-12-02 12:24",
status: "已处理",
},
{
title: "关于市民广场交通设施的回复",
content:
"我们将对市民广场周边道路进行优化：1. 新增人行天桥；2. 扩建非机动车道；3. 增设智能红绿灯。预计两周内完成。",
time: "2024-12-02 12:24",
status: "未处理",
},
{
title: "关于青山湖环境整治的回复",
content:
"青山湖环境整治工程已启动，包括水质净化、垃圾清理、绿化提升等多项工作，预计三个月内完成。",
time: "2024-12-02 12:24",
status: "未处理",
},
];
const totalItems = computed(() => allItems.length);
const displayItems = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
const filtered = allItems.filter(
(item) =>
item.title.includes(searchText.value) ||
item.content.includes(searchText.value)
);
return filtered.slice(start, start + pageSize.value);
});
function clickList(id: number) {
router.push({
path: "/wm/recoverdetail",
query: {
title: "搜索结果",
pathType: "/wm/search",
id: id,
},
});
}
</script>
<style scoped>
.el-pagination {
justify-content: center;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment