修改工作日程表模块

src/views/ZMOverView/components/fourSuppress/components/allGovernment/components/CalendarHeatmap.vue

@@ -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>