Skip to content

R
risk-monitor
提交 fc3e7871 authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

修改工作日程表模块

上级 d0c0200e
隐藏空白字符变更
内嵌 并排
正在显示 包含 155 行增加 和 42 行删除
src/views/ZMOverView/components/fourSuppress/components/allGovernment/components/CalendarHeatmap.vue
浏览文件 @ fc3e7871
......@@ -37,22 +37,55 @@
</div>
</div>
</div> -->
<el-dialog v-model="tooltipVisible" width="690px">
<el-dialog v-model="tooltipVisible" width="1298px">
<div class="tooltip-header flex-display">
<div class="tooltip-header-left text-title-3-bold">{{ currentDate }}</div>
<div class="tooltip-header-right text-title-3-show">{{ `${currentOrgNum}个部门/${currentDetailList.length}项举措` }}
<div class="tooltip-header-right text-title-3-show">{{ `涉及${currentDetailList.length}项行政令` }}
</div>
</div>
<div class="tooltip-main">
<div class="tooltip-main-item" v-for="item, index in currentDetailList" :key="index">
<div class="item-footer color-bg-active flex-display" @click="handleToDetail(item)">
<div class="footer-text text-tip-2 main-color">{{ item.name }}</div>
<div class="footer-arrow">
<img src="./right-arrow.svg" alt="">
<div class="item-main-header flex-display" @click="handleToDetail(item)">
<div class="item-main-header-left">
<div class="item-main-header-type color-bg-active text-tip-1 main-color">{{ '政令' }}</div>
<div class="text-title-3-bold main-color">{{ item.administrativeOrderInfoTitle }}</div>
</div>
<div class="item-main-header-right text-tip-1-bold main-color">
{{ `涉及${item.orgNum}个部门` }}
</div>
</div>
<div class="item-list" v-for="val, idx in item.list" :key="idx">
<div class="item-header flex-display">
<div class="item-list">
<div class="item-list-item flex-display" v-for="val, idx in item.innerList" :key="idx">
<div class="item-list-left flex-display">
<div class="id text-bold main-color color-bg-active">{{ idx + 1 }}</div>
<div class="info">
<div class="content text-regular text-primary-80-clor">{{ val.name }}</div>
<div class="area-box flex-display">
<AreaTag v-for="tag, tagIdx in val.techDomainList" :key="tagIdx" :tagName="tag"></AreaTag>
</div>
</div>
</div>
<div class="item-list-right ">
<div class="right-list-item flex-display" v-for="org, orgIdx in val.orgList" :key="orgIdx">
<div class="org-box flex-display">
<div class="logo">
<img style="width: 100%; height: 100%;" :src="org.orgLogoUrl" alt="">
</div>
<div class="org-name text-tip-1 text-primary-80-clor">{{ org.orgName }}</div>
</div>
<div class="status">
<div class="status-on text-tip-2" v-if="org.stauts === 2">{{ '已落实' }}</div>
<div class="status-off text-tip-2" v-else>{{ '未落实' }}</div>
</div>
</div>
</div>
</div>
<!-- <div class="item-header flex-display">
<div class="item-header-left flex-display">
<div class="logo">
<img style="width:100%; height: 100%" :src="val.orgLogoUrl" alt="logo">
......@@ -67,7 +100,7 @@
<AreaTag v-for="tag, idxx in val.techDomainList.slice(0, 3)" :key="idxx" :tagName="tag"></AreaTag>
</div>
</div>
<div class="item-content text-compact">{{ val.name }}</div>
<div class="item-content text-compact">{{ val.name }}</div> -->
</div>
......@@ -430,6 +463,8 @@ function getOption() {
// 点击政令，跳转详情
const handleToDetail = (item) => {
console.log('item', item);
const path = "/decreeLayout/overview/introduction";
const query = { id: item.orderId };
const route = router.resolve({ path, query });
......@@ -452,22 +487,47 @@ onMounted(() => {
if (list.length > 0) {
currentDate.value = date
// 按 administrativeOrderInfoTitle 分类
// const grouped = [];
// const map = new Map();
// 按 sanctionId 分类，sanctionId 相同合为一个元素，形式为 { name: 'xxx', info: {} }
const grouped = [];
const map = new Map();
const titleMap = new Map();
list.forEach(item => {
const key = item.administrativeOrderInfoTitle;
if (!map.has(key)) {
map.set(key, { name: key, list: [] });
grouped.push(map.get(key));
const title = item.administrativeOrderInfoTitle || '';
if (!titleMap.has(title)) {
titleMap.set(title, { administrativeOrderInfoTitle: title, innerList: [], orgNum: 0, orderId: item.orderId });
grouped.push(titleMap.get(title));
}
// 统计 orgNum
const group = titleMap.get(title);
// 用 Set 统计不同 orgName
if (!group._orgSet) group._orgSet = new Set();
group._orgSet.add(item.orgName);
group.orgNum = group._orgSet.size;
// 按 sanctionId 分类
const innerList = titleMap.get(title).innerList;
let sanctionGroup = innerList.find(g => g.sanctionId === item.sanctionId);
if (!sanctionGroup) {
sanctionGroup = {
sanctionId: item.sanctionId,
name: item.name,
techDomainList: item.techDomainList || [],
orgList: [],
info: []
};
innerList.push(sanctionGroup);
}
map.get(key).list.push(item);
sanctionGroup.orgList.push({
orgName: item.orgName,
orgLogoUrl: item.orgLogoUrl,
status: item.status
});
sanctionGroup.info.push({ ...item });
});
currentDetailList.value = grouped;
console.log('currentDetailList', currentDetailList.value);
// 统计不同 orgName 的个数
const orgNames = new Set(list.map(item => item.orgName));
currentOrgNum.value = orgNames.size
tooltipVisible.value = true
} else {
tooltipVisible.value = false
......@@ -503,27 +563,39 @@ onBeforeUnmount(() => {
/* pointer-events: none; */
/* 让鼠标事件穿透到图表，避免闪烁 */
z-index: 1000;
width: 670px;
width: 1278px;
background: rgb(255, 255, 255);
}
.tooltip-header {
height: 50px;
height: 56px;
box-sizing: border-box;
padding: 13px 24px;
padding: 12px 24px;
justify-content: space-between;
border-bottom: 1px solid rgb(234, 236, 238);
}
.tooltip-main {
padding: 0 24px 10px;
.tooltip-header-left{
margin-top: 10px;
}
.tooltip-header-right{
height: 34px;
background: rgba(206, 79, 81, 0.1);
border-radius: 17px;
color: rgba(206, 79, 81);
padding: 5px 12px;
}
/* .tooltip-main {
padding: 0 24px 10px;
} */
.tooltip-main-item {
padding: 10px 0;
width: 622px;
width: 1254px;
/* height: 144px; */
border-bottom: 1px solid rgb(234, 236, 238);
}
......@@ -540,6 +612,50 @@ onBeforeUnmount(() => {
}
.item-list-item{
padding: 12px 12px 16px 20px;
border-bottom: 1px solid rgb(234, 236, 238);
}
.item-list-left{
width: 848px;
}
.area-box {
margin-top: 8px;
gap: 8px;
}
.id{
width: 30px;
height: 30px;
border-radius: 15px;
text-align: center;
line-height: 30px;
}
.info{
width: 800px;
}
.item-list-right{
width: 356px;
justify-content: space-between;
}
.right-list-item {
justify-content: space-between;
margin-bottom: 8px;
}
.org-box {
gap: 8px;
}
.org-name{
width: 234px;
}
.logo {
width: 24px;
height: 24px;
......@@ -559,36 +675,33 @@ onBeforeUnmount(() => {
background: rgba(206, 79, 81, 0.1);
}
.item-content {
height: 48px;
display: -webkit-box;
-webkit-line-clamp: 2;
/* 限制显示2行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
/* 可选：防止单词被截断 */
}
.item-header-right {
gap: 8px;
}
.item-footer {
width: 622px;
height: 40px;
.item-main-header {
width: 1254px;
height: 68px;
padding: 0 8px;
margin-top: 4px;
border-radius: 4px;
justify-content: space-between;
align-items: center;
cursor: pointer;
border-bottom: 1px solid rgb(234, 236, 238);
}
.item-main-header-left {
display: flex;
gap: 8px;
align-items: center;
}
.footer-arrow {
width: 20px;
height: 20px;
.item-main-header-type {
height: 28px;
border-radius: 4px;
padding: 0 8px;
line-height: 28px;
text-align: center;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论