Merge branch 'dev-cmn' of https://s-20coaj910c.zht2.com/cmy/data-marketing-platform into dev-ly

src/views/marketing/data/dataInfoModal.vue

@@ -36,6 +36,9 @@
         <span v-if="updateTime" class="update-time">
           更新时间: {{ formatTime(updateTime) }}
         </span>
+        <span v-if="triggerKeyword.length > 0" class="trigger-keyword">
+          触发关键字: {{ triggerKeyword.join(',') }}
+        </span>
       </div>
     </template>
   </el-dialog>
@@ -59,6 +62,9 @@ const createTime = ref<string | Date | null>(null)
 // 更新时间
 const updateTime = ref<string | Date | null>(null)
 
+// 触发关键字
+const triggerKeyword = ref<string[]>([])
+
 // 内容容器引用
 const contentWrapper = ref<HTMLElement | null>(null)
 
@@ -67,17 +73,30 @@ const openDialog = (
   richContent: string, 
   options?: {
     createTime?: string | Date,
-    updateTime?: string | Date
+    updateTime?: string | Date,
+    triggerKeyword?: string[]
   }
 ) => {
   dialogVisible.value = true
   loading.value = true
   
   // 设置内容和时间信息
-  content.value = richContent
+  // content.value = richContent
   createTime.value = options?.createTime || null
   updateTime.value = options?.updateTime || null
-  
+  triggerKeyword.value = options?.triggerKeyword || []
+
+  if(triggerKeyword.value.length > 0) {
+    // 转义正则表达式特殊字符，避免关键字中包含特殊字符导致错误
+    const escapedKeywords = triggerKeyword.value.map(keyword => 
+      keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    )
+    const keywordRegex = new RegExp(`(${escapedKeywords.join('|')})`, 'gi')
+    content.value = richContent.replace(keywordRegex, '<span class="trigger-keyword-item">$1</span>')
+  } else {
+    content.value = richContent
+  }
+
   // 模拟加载延迟
   setTimeout(() => {
     loading.value = false
@@ -274,6 +293,20 @@ defineExpose({
   :deep(tr:nth-child(even)) {
     background-color: #f9f9f9;
   }
+  
+  // 关键字高亮样式
+  :deep(.trigger-keyword-item) {
+    background: #409eff;
+    color: white;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-weight: 600;
+    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
+    position: relative;
+    display: inline-block;
+    margin: 2px 1px;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
 }
 
 .dialog-footer-info {

src/views/marketing/data/dataListModal.vue

@@ -62,7 +62,7 @@
       />
     </div>
   </el-dialog>
-  <dataInfoModal ref="richContentDialogRef"></dataInfoModal>>
+  <dataInfoModal ref="richContentDialogRef"></dataInfoModal>
 </template>
 
 <script lang="ts" setup>

src/views/marketing/record/index.vue

@@ -21,37 +21,66 @@
         style="width: 100%" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
         :header-cell-style="tableStyle?.headerCellStyle">
         
-        <el-table-column :formatter="statusFormatter" :label="'规则名称'" prop="ruleName"
+        <el-table-column :formatter="statusFormatter" :label="'规则名称'" prop="ruleName" min-width="120"
           show-overflow-tooltip></el-table-column>
-        <el-table-column :formatter="statusFormatter" :label="'触发信息'" prop="triggerInfo"
+        <el-table-column :formatter="statusFormatter" :label="'推送内容'" prop="pushContent" min-width="300"
           show-overflow-tooltip>
           <template #default="{ row }">
-            <el-link @click="showTriggerInfo(row)" target="_blank"
-              :style="{ color: '#409EFF' }">{{ row.triggerInfo }}</el-link>
+            <div style="display: flex; align-items: center; justify-content: center;">
+              <el-image style="width: 100px; height: 50px;" :src="lockScreen" :fit="'cover'" />
+              <div style="margin-left: 10px; width: 200px; text-align: left; word-break: break-all; text-wrap: auto; ">
+                http://www.baidu.comwww.baidu.com
+              </div>
+            </div>
           </template>
         </el-table-column>
-        <el-table-column :formatter="statusFormatter" :label="'推送内容'" prop="pushContent"
+        <el-table-column :formatter="statusFormatter" :label="'推送频率'" prop="pushFrequency" min-width="120"
+          show-overflow-tooltip>
+        </el-table-column>
+        <el-table-column :formatter="statusFormatter" :label="'推送时间'" prop="pushTime" min-width="200"
+          show-overflow-tooltip></el-table-column>
+        <el-table-column :formatter="statusFormatter" :label="'推送状态'" prop="pushStatus" min-width="120"
           show-overflow-tooltip>
           <template #default="{ row }">
-            {{ row.pushContent === '1' ? '图片' : '链接' }}
+             已推送
           </template>
         </el-table-column>
-        <el-table-column :formatter="statusFormatter" :label="'推送频率'" prop="pushFrequency"
-          show-overflow-tooltip>
+        <el-table-column :formatter="statusFormatter" :label="''" prop="triggerInfo" min-width="200" >
+          <template #header>
+            <div class="header-wrapper">
+              <span>触发信息</span>
+              <el-popover placement="top" trigger="hover" content="点击查看具体设备信息" :width="200">
+                <template #reference>
+                  <el-icon class="header-icon">
+                    <QuestionFilled />
+                  </el-icon>
+                </template>
+              </el-popover>
+            </div>
+          </template>
+          <template #default="{ row }">
+            <div class="trigger-info" @click="showTriggerInfo(row)">
+              <div 
+                v-if="row.triggerInfo" 
+                class="rich-content-display"
+                v-html="row.triggerInfo"
+              ></div>
+            </div>
+          </template>
         </el-table-column>
-        <el-table-column :formatter="statusFormatter" :label="'推送状态'" prop="pushStatus"
+        <el-table-column :formatter="statusFormatter" :label="'触发记录'" prop="triggerRecord" min-width="150"
           show-overflow-tooltip>
           <template #default="{ row }">
-            <el-tag :type="row.pushStatus === '1' ? 'success' : 'danger'">{{ row.pushStatus === '1' ? '成功' : '失败' }}</el-tag>
+            203.104.10.10
           </template>
         </el-table-column>
-        <el-table-column :formatter="statusFormatter" :label="'触发时间'" prop="triggerTime"
-          show-overflow-tooltip></el-table-column>
-        <el-table-column :formatter="statusFormatter" :label="'推送时间'" prop="pushTime"
+        <el-table-column :formatter="statusFormatter" :label="'触发时间'" prop="triggerTime" min-width="150"
           show-overflow-tooltip></el-table-column>
       </el-table>
       <pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
     </div>
+
+    <dataInfoModal ref="richContentDialogRef"></dataInfoModal>
   </div>
 </template>
 
@@ -60,7 +89,9 @@
 import { BasicTableProps, useTable } from '/@/hooks/table';
 import { useI18n } from 'vue-i18n';
 import { ref } from 'vue'
-import { useMessage } from '/@/hooks/message';
+const dataInfoModal = defineAsyncComponent(() => import('/@/views/marketing/data/dataInfoModal.vue'));
+import { ElImage } from 'element-plus';
+import lockScreen from '/@/assets/lockScreen.png';
 
 const { t } = useI18n();
 
@@ -92,6 +123,7 @@ interface SourceData {
   pushTime: string;
 }
 
+const richContentDialogRef = ref();
 const sourceData = ref<SourceData[]>([]);
 
 const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);
@@ -118,7 +150,13 @@ const statusFormatter = (row: any, column: any, cellValue: any, index: any) => {
 
 const showTriggerInfo = (row: any) => {
   // 信息详情弹窗
-  console.log(row);
+  richContentDialogRef.value.openDialog(
+    row.triggerInfo, 
+    {
+      createTime: row.triggerTime,
+      triggerKeyword: ['战略']
+    }
+  )
 }
 
 onMounted(() => {
@@ -126,16 +164,24 @@ onMounted(() => {
   for (let i = 1; i < 11; i++) {
     sourceData.value.push({
       ruleName: '规则名称' + i,
-      triggerInfo: '触发信息' + i,
+      triggerInfo:`<div class="fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column"><div class="fusion-text fusion-text-4"><h2 class="fusion-responsive-typography-calculated" style="--fontsize: 36; line-height: 1.25; --fontSize: 36;" data-fontsize="36" data-lineheight="45px" id="toc">什么是产品创新？</h2>
+<p><span style="font-weight: 400;">产品创新是指公司或组织创造和开发新的或改进的产品、服务或流程。 它涉及引入新颖的想法、技术、功能或设计，为客户提供附加值，使产品有别于市场上现有的产品。</span></p>
+<p><span style="font-weight: 400;">成功的产品创新需要将创造力、<a href="https://ideascale.com/zh-hans/%e5%8d%9a%e5%ae%a2/%e4%bb%80%e4%b9%88%e6%98%af%e5%b8%82%e5%9c%ba%e7%a0%94%e7%a9%b6/">市场调研</a>、客户洞察力、技术专长和有效的项目管理结合起来。 其动力来自于满足不断变化的客户需求、领先于竞争对手以及创造可持续业务增长的愿望。</span></p>
+<p><b>产品创新表格</b></p>
+<p><span style="font-weight: 400;">成功的产品创新需要将创造力、<a href="https://ideascale.com/zh-hans/%e5%8d%9a%e5%ae%a2/%e4%bb%80%e4%b9%88%e6%98%af%e5%b8%82%e5%9c%ba%e7%a0%94%e7%a9%b6/">市场调研</a>、客户洞察力、技术专长和有效的项目管理结合起来。 以下是创造可持续业务增长的产品创新形式。</span></p>
+<p><strong><b>了解更多信息：<a href="https://ideascale.com/zh-hans/%e5%8d%9a%e5%ae%a2/%e4%bb%80%e4%b9%88%e6%98%af%e6%88%98%e7%95%a5%e5%88%9b%e6%96%b0/">什么是战略创新？</a></b></strong></p>
+</div></div>`,
       triggerTime: '2025-08-29 10:00:00',
       pushStatus: i % 2 === 0 ? '1' : '2',
       pushContent: i % 2 === 0 ? '1' : '2',
-      pushFrequency: '推送频率' + i,
+      pushFrequency: '30分钟一次',
       pushTime: '2025-08-29 10:00:00',
     });
   }
   state.dataList = sourceData.value;
   state.pagination.total = state.dataList.length;
+
+  console.log(sourceData.value);
 })
 
 </script>
@@ -153,4 +199,32 @@ onMounted(() => {
 .table-tabs {
   margin-bottom: 10px;
 }
+
+.trigger-info {
+  height: 18px;
+  overflow: hidden;
+  text-align: center;
+  width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  color: #409eff;
+  cursor: pointer;
+}
+
+.header-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.header-icon {
+  margin-left: 5px;
+  color: #999;
+  font-size: 14px;
+  cursor: help;
+  
+  &:hover {
+    color: #409eff;
+  }
+}
 </style>