Skip to content

R
risk-monitor
提交 68fd1e83 authored 作者: 张烨's avatar 张烨
浏览文件
操作

fix:政令模块细节优化

上级 3c79fc23
隐藏空白字符变更
内嵌 并排
正在显示 包含 145 行增加 和 116 行删除
src/views/decree/decreeHome/index.vue
浏览文件 @ 68fd1e83
......@@ -63,12 +63,18 @@
</div>
</div>
</div> -->
<div class="home-main-header-item-box">
<div class="item" v-for="(item, index) in govInsList.slice(0, 12)" :key="index" @click="handleToInstitution(item)">
<div class="home-main-header-item-box" v-if="govInsList.length">
<div class="item" v-for="(item, index) in govInsList.slice(0, 7)" :key="index" @click="handleToInstitution(item)">
<div class="item-left">
<img :src="item.img ? item.img : DefaultIcon2" alt="" />
<img :src="item.orgImage || DefaultIcon2" alt="" />
</div>
<div class="item-right">{{ item.name }}</div>
<div class="item-right one-line-ellipsis">{{ item.orgName }}</div>
<div class="item-num">{{ item.total }}项</div>
<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
</div>
<div class="item">
<div class="item-num item-more">查看全部机构 ({{govInsList.length+1}}家)</div>
<el-icon color="var(--color-primary-100)"><ArrowRightBold /></el-icon>
</div>
</div>
</div>
......@@ -271,7 +277,7 @@
<div class="search-box">
<el-select v-model="searchType" :empty-values="[null, undefined]" style="width: 100%" filterable>
<el-option label="全部政府部门" value="" />
<el-option v-for="item in govInsList" :key="item.id" :label="item.name" :value="item.id" />
<el-option v-for="item in govInsList" :key="item.orgId" :label="item.orgName" :value="item.orgId" />
</el-select>
</div>
<div style="flex: auto;"></div>
......@@ -417,11 +423,11 @@ import { ElMessage } from "element-plus";
// 跳转行政机构主页
const handleToInstitution = item => {
window.sessionStorage.setItem("curTabName", item.name);
window.sessionStorage.setItem("curTabName", item.orgName);
const curRoute = router.resolve({
path: "/institution",
query: {
id: item.id
id: item.orgId
}
});
window.open(curRoute.href, "_blank");
......@@ -447,13 +453,7 @@ const handleGetDepartmentList = async () => {
const res = await getDepartmentList();
console.log("机构列表", res);
if (res.code === 200 && res.data) {
govInsList.value = res.data.map(item => {
return {
id: item.orgId,
name: item.orgName,
img: item.orgImage
};
});
govInsList.value = res.data;
}
} catch (error) {
console.error("获取机构列表error", error);
......@@ -1390,15 +1390,17 @@ onMounted(async () => {
}
.home-main-header-item-box {
margin-top: 48px;
margin-bottom: 64px;
margin: 48px 0 64px;
width: 1600px;
display: flex;
flex-wrap: wrap;
gap: 16px;
.item {
width: 254px;
height: 72px;
width: 20%;
flex: auto;
height: 80px;
padding: 0 16px;
display: flex;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.65);
......@@ -1406,8 +1408,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
align-items: center;
gap: 17px;
margin: 0 6px 16px 6px;
justify-content: center;
cursor: pointer;
transition:
transform 0.3s ease,
......@@ -1419,10 +1420,9 @@ onMounted(async () => {
}
.item-left {
margin-left: 24px;
width: 48px;
height: 48px;
font-size: 0px;
img {
width: 100%;
height: 100%;
......@@ -1430,12 +1430,28 @@ onMounted(async () => {
}
.item-right {
width: 140px;
width: 20px;
flex: auto;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 24px;
line-height: 20px;
margin: 0 16px;
}
.item-num {
white-space: nowrap;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 20px;
margin-right: 2px;
color: var(--color-primary-100);
}
.item-more {
margin-right: 12px;
font-size: 16px;
}
}
}
......
src/views/decree/decreeLayout/overview/measures/index.vue
浏览文件 @ 68fd1e83
<template>
<div class="introduction-wrap">
<div class="left">
<div class="page-left">
<div class="box1">
<AnalysisBox title="主要指令" :showAllBtn="false">
<div class="analysis-box">
......@@ -21,7 +21,7 @@
<el-empty v-if="!contentList?.length" style="padding: 60px 0;" description="暂无数据" :image-size="100" />
<div v-for="(section, index) in contentList" :key="index" class="section">
<div class="section-header">
<div class="section-title text-align-justify">({{ simpleNumToChinese(index+1) }}) {{ section.content }}</div>
<div class="section-title text-align-justify" v-html="section.content"></div>
<div class="section-icon">
<img src="./assets/images/open-icon.png" alt="" />
</div>
......@@ -30,19 +30,19 @@
<div class="numbered-list">
<div v-for="(item, itemIndex) in section.slaver" :key="itemIndex" class="list-item">
<div class="list-item-dot">{{itemIndex+1}}.</div>
<div class="list-item-word">{{ item.content }}</div>
<div class="list-item-word" v-html="item.content"></div>
<!-- 渲染二级列表 -->
<div v-if="item.slaver" class="sub-list">
<div v-for="(subItem, subIndex) in item.slaver" :key="subIndex" class="sub-item">
<div class="sub-item-dot">({{subIndex+1}})</div>
<div class="sub-item-word">{{ subItem.content }}</div>
<div class="sub-item-word" v-html="subItem.content"></div>
<!-- 渲染三级列表 -->
<div v-if="subItem.slaver" class="sub-sub-list">
<div v-for="(subSubItem, subSubIndex) in subItem.slaver" :key="subSubIndex" class="sub-sub-item">
<div class="sub-sub-item-dot">{{ALPHABET[subSubIndex%26]}}.</div>
<div class="sub-sub-item-word">{{ subSubItem.content }}</div>
<div class="sub-sub-item-word" v-html="subItem.content"></div>
</div>
</div>
</div>
......@@ -55,17 +55,22 @@
</AnalysisBox>
</div>
</div>
<div class="right">
<div class="page-right">
<div class="box3">
<AnalysisBox title="发布机构" :showAllBtn="false">
<AnalysisBox title="执行机构" :showAllBtn="false">
<div class="box3-top">
<div class="box3-top-top" @click="handleToInstitution(box3TopTopData)">
<div class="organization-list">
<div class="organization-item" v-for="item in organizationInfo.list" :key="item.id">
<ActionButton @click="handleOrganization(item)" :name="item.obb" :type="item.id==organizationInfo.node.id?'active':'normal'" />
</div>
</div>
<div class="box3-top-top" @click="handleToInstitution()">
<div class="left">
<img :src="box3TopTopData.logo ? box3TopTopData.logo : DefaultIcon2" alt="" />
<img :src="organizationInfo.node.logo || DefaultIcon2" alt="" />
</div>
<div class="right">
<div class="name">{{ box3TopTopData.name + " >" }}</div>
<div class="ename">{{ box3TopTopData.eName }}</div>
<div class="name">{{ organizationInfo.node.name + " >" }}</div>
<div class="ename">{{ organizationInfo.node.ename }}</div>
</div>
</div>
<div class="box3-top-bottom">
......@@ -76,17 +81,21 @@
<div class="text">{{ "关键人物" }}</div>
</div>
<div class="box3-top-bottom-main">
<div class="box3-top-bottom-item" v-for="(item, index) in box3TopBottomData" :key="index">
<div class="box3-top-bottom-item" v-for="(item, index) in organizationInfo.node.leaders" :key="index">
<div class="box3-top-bottom-item-left">
<img :src="item.avatar ? item.avatar : DefaultIcon1" alt="" />
<img :src="item.avatar || DefaultIcon1" alt="" />
</div>
<div class="box3-top-bottom-item-right">
<div class="name" @click="handleClickUser(item)">{{ item.name }}</div>
<div class="name one-line-ellipsis text-click-hover" @click="handleClickUser(item)">{{ item.name }}</div>
<div class="position">{{ item.job }}</div>
</div>
</div>
</div>
</div>
<div class="organization-button">
<div class="button-text">查看政令执行情况</div>
<el-icon size="16"><Right /></el-icon>
</div>
</div>
</AnalysisBox>
</div>
......@@ -109,14 +118,14 @@
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";
import { Search } from '@element-plus/icons-vue'
import { getDecreeIssueOrganization } from "@/api/decree/introduction";
import { getDecreeOrganization } from "@/api/decree/introduction";
import { getDecreeRelatedEntity, getDecreeMainContent } from "@/api/decree/background";
import { getDecreehylyList } from "@/api/decree/home";
import ActionButton from '@/components/base/ActionButton/index.vue'
import DefaultIcon1 from "@/assets/icons/default-icon1.png";
import DefaultIcon2 from "@/assets/icons/default-icon2.png";
import defaultCom from "@/views/coopRestriction/assets/images/default-icon2.png"
......@@ -211,14 +220,16 @@ const contentList = ref([
const ALPHABET = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
const onMainContentData = async () => {
try {
const res = await getDecreeMainContent({
id: route.query.id,
keyword: commandWord.value,
domainId: areaType.value
});
const keyword = commandWord.value;
const res = await getDecreeMainContent({ id: route.query.id, keyword, domainId: areaType.value });
console.log("主要指令", res);
if (res && res.code === 200) {
contentList.value = res.data;
contentList.value = res.data || [];
contentList.value.forEach((item, index) => { item.content = `(${simpleNumToChinese(index+1)}) ${item.content}` })
if (keyword) {
let word = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
contentList.value.forEach(item => {onHighlight(word, item)})
}
} else {
contentList.value = []
}
......@@ -227,12 +238,19 @@ const onMainContentData = async () => {
console.error("获取主要指令数据失败:", error);
}
};
// 搜索高亮效果
const onHighlight = (word, row) => {
row.content = String(row.content).replace(new RegExp(word, "gi"), (match) => {
return `<span class="highlight">${match}</span>`;
});
if (row.slaver?.length) {
row.slaver.forEach(item => { onHighlight(word, item) })
}
}
// 数字转中文（支持 0-99 整数）
const simpleNumToChinese = (num) => {
// 1. 基础校验：只处理 0-99 的整数
if (!Number.isInteger(num) || num < 0 || num > 99) {
return '仅支持 0-99 之间的整数';
}
if (!Number.isInteger(num) || num < 0 || num > 99) return '100';
// 2. 定义基础字符
const singleChars = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
const tenChar = '十';
......@@ -271,20 +289,34 @@ const onRelatedEntityData = async () => {
}
};
// 发布机构
const box3TopTopData = ref({
id: "",
logo: "",
name: "",
eName: ""
});
const box3TopBottomData = ref([]);
// 跳转行政机构主页
const handleToInstitution = item => {
// 执行机构
const organizationInfo = reactive({
list : [],
node: {id: "", obb: "", logo: "", name: "", ename: "", leaders: []},
})
const handleGetOrgnization = async () => {
try {
const res = await getDecreeOrganization({id: route.query.id});
console.log("执行机构", res);
if (res.code === 200 && res.data?.length) {
organizationInfo.list = res.data;
organizationInfo.node = res.data[0];
}
} catch (error) {
organizationInfo.node = {id: "", obb: "", logo: "", name: "", ename: "", leaders: []};
console.error("获取执行机构数据失败", error);
}
};
// 切换执行机构
const handleOrganization = (node) => {
organizationInfo.node = node;
};
// 跳转机构主页
const handleToInstitution = () => {
const curRoute = router.resolve({
path: "/institution",
query: {
id: item.id
id: organizationInfo.node.id
}
});
window.open(curRoute.href, "_blank");
......@@ -300,21 +332,6 @@ const handleClickUser = item => {
});
window.open(routeData.href, "_blank");
};
const handleGetOrgnization = async () => {
try {
const res = await getDecreeIssueOrganization({id: route.query.id});
console.log("发布机构", res);
if (res.code === 200 && res.data) {
let { id, image, name, ename } = res.data
Object.assign(box3TopTopData.value, { id, logo: image, name, eName: ename });
box3TopBottomData.value = res.data.personList;
}
} catch (error) {
box3TopTopData.value = { id: "", logo: "", name: "", eName: "" };
box3TopBottomData.value = [];
console.error("执行机构error", error);
}
};
onMounted(() => {
handleGetAreaList();
......@@ -325,13 +342,19 @@ onMounted(() => {
</script>
<style lang="scss" scoped>
.analysis-content {
:deep(span.highlight) {
background-color: #ffff00;
}
}
.introduction-wrap {
display: flex;
width: 1600px;
padding: 16px 0;
gap: 16px;
.left {
.page-left {
width: 20px;
flex: auto;
......@@ -456,7 +479,7 @@ onMounted(() => {
}
}
.right {
.page-right {
width: 520px;
display: flex;
flex-direction: column;
......@@ -465,10 +488,34 @@ onMounted(() => {
.box3 {
.box3-top {
margin-top: 2px;
padding: 0 22px 20px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.organization-list {
display: flex;
flex-wrap: wrap;
margin-bottom: 16px;
gap: 8px 16px;
}
.organization-button {
height: 36px;
background-color: var(--color-primary-100);
color: var(--bg-white-100);
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
cursor: pointer;
.button-text {
margin-right: 8px;
font-family: Microsoft YaHei;
font-size: 16px;
line-height: 16px;
}
}
.box3-top-top {
width: 473px;
height: 88px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
......@@ -476,42 +523,13 @@ onMounted(() => {
background: rgba(247, 248, 249, 1);
display: flex;
align-items: center;
margin: 0 auto;
position: relative;
cursor: pointer;
.more {
position: absolute;
right: 17px;
top: 17px;
display: flex;
gap: 3px;
.text {
height: 16px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 16px;
}
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
.left {
width: 64px;
height: 64px;
margin-left: 17px;
font-size: 0px;
img {
width: 100%;
height: 100%;
......@@ -519,7 +537,8 @@ onMounted(() => {
}
.right {
width: 370px;
width: 20px;
flex: auto;
margin-left: 15px;
.name {
......@@ -544,9 +563,7 @@ onMounted(() => {
}
.box3-top-bottom {
width: 473px;
height: 193px;
margin: 0 auto;
.box3-top-bottom-header {
height: 40px;
......@@ -623,10 +640,6 @@ onMounted(() => {
line-height: 24px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.position {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论