计划任务增加广告信息展示

src/views/campaignTask/CampaignTaskManage.vue

@@ -75,39 +75,50 @@
           {{ calculateDuration(scope.row) }}
         </template>
       </el-table-column>
-      <el-table-column prop="status" label="状态" width="120">
+      <el-table-column prop="status" label="状态" sortables>
         <template slot-scope="scope">
-          <el-tag :type="getStatusType(scope.row.status)">
+          <el-tag 
+            :type="getStatusType(scope.row.status)"
+            :class="{'clickable-tag': scope.row.status === 4}"
+            @click="scope.row.status === 4 && showErrorMessage(scope.row)">
             {{ getStatusText(scope.row.status) }}
           </el-tag>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="primary"
-            @click="handleEdit(scope.row)">编辑</el-button>
-          <el-button
-            size="mini"
-            type="success"
-            @click="handleDetail(scope.row)">详情</el-button>
-          <el-button
-            v-if="scope.row.status === 1"
-            size="mini"
-            type="success"
-            @click="handleStart(scope.row)">开始</el-button>
-          <el-button
-            v-else
-            size="mini"
-            type="success"
-            disabled
-            >开始</el-button>
-          <!-- <el-button
-            v-if="scope.row.status === 4"
-            size="mini"
-            type="warning"
-            @click="handleRetry(scope.row)">重试</el-button> -->
+          <div class="operation-buttons">
+            <el-button
+              size="mini"
+              type="primary"
+              icon="el-icon-edit"
+              circle
+              title="编辑"
+              @click="handleEdit(scope.row)"></el-button>
+            <el-button
+              size="mini"
+              type="info"
+              icon="el-icon-view"
+              circle
+              title="详情"
+              @click="handleDetail(scope.row)"></el-button>
+            <el-button
+              v-if="scope.row.status === 1"
+              size="mini"
+              type="success"
+              icon="el-icon-video-play"
+              circle
+              title="开始"
+              @click="handleStart(scope.row)"></el-button>
+            <el-button
+              v-else
+              size="mini"
+              type="success"
+              icon="el-icon-video-play"
+              circle
+              title="开始"
+              disabled></el-button>
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -146,38 +157,65 @@
       width="80%"
     >
       <el-table :data="currentTaskDetail" border>
-        <el-table-column prop="id" label="ID"></el-table-column>
-        <el-table-column prop="advertiserId" label="广告账户ID"></el-table-column>
-        <el-table-column prop="campaignId" label="广告计划ID"></el-table-column>
-        <el-table-column prop="adgroupId" label="广告组ID"></el-table-column>
-        <el-table-column prop="startTime" label="开始时间">
+        <el-table-column prop="id" label="ID" width="80"></el-table-column>
+        <el-table-column prop="advertiserId" label="广告账户ID" align="center" sortable></el-table-column>
+        <el-table-column prop="campaignId" label="广告计划ID" align="center" sortable></el-table-column>
+        <el-table-column prop="adgroupId" label="广告组ID" align="center" sortable></el-table-column>
+        <el-table-column label="投放国家" min-width="200" sortable>
+          <template slot-scope="scope">
+            <div class="table-countries-container">
+              <template v-if="scope.row.countries && scope.row.countries.length > 0">
+                <el-tag 
+                  v-for="(country, index) in typeof scope.row.countries === 'string' ? 
+                    JSON.parse(scope.row.countries) : scope.row.countries" 
+                  :key="country.code"
+                  v-if="index < 5"
+                  size="mini" 
+                  class="country-tag"
+                  type="primary"
+                  effect="light">
+                  {{ country.code }}
+                </el-tag>
+                <span v-if="(typeof scope.row.countries === 'string' ? 
+                  JSON.parse(scope.row.countries) : scope.row.countries).length > 5" 
+                  class="more-countries">...</span>
+              </template>
+              <span v-else class="no-countries-text">无国家信息</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="startTime" label="开始时间" sortable>
           <template slot-scope="scope">
           {{ scope.row.startTime ? moment(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
         </template>
         </el-table-column>
-        <el-table-column prop="finishTime" label="结束时间">
+        <el-table-column prop="finishTime" label="结束时间" sortable>
           <template slot-scope="scope">
           {{ scope.row.finishTime ? moment(scope.row.finishTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
         </template>
         </el-table-column>
-        <el-table-column label="执行时间" width="150">
+        <el-table-column label="执行时间" width="150" sortable>
         <template slot-scope="scope">
           {{ calculateDuration(scope.row) }}
         </template>
       </el-table-column>
-        <el-table-column prop="status" label="状态">
+        <el-table-column prop="status" label="状态" sortables>
           <template slot-scope="scope">
-            <el-tag :type="getStatusType(scope.row.status)">
-              {{ getStatusText(scope.row.status) }}
-            </el-tag>
+            <el-tag 
+            :type="getStatusType(scope.row.status)"
+            :class="{'clickable-tag': scope.row.status === 4}"
+            @click="scope.row.status === 4 && showErrorMessage(scope.row)">
+            {{ getStatusText(scope.row.status) }}
+          </el-tag>
           </template>
         </el-table-column>
         <!-- 新增操作列 -->
-        <el-table-column label="操作" width="120">
+        <el-table-column label="操作" width="120" align="center">
           <template slot-scope="scope">
             <el-button 
               type="primary" 
               size="mini" 
+              icon="el-icon-data-analysis"
               v-if="scope.row.adInfo" 
               @click="showAdInfo(scope.row)">
               广告信息
@@ -196,6 +234,25 @@
       :modal-append-to-body="false"
     >
       <div v-if="currentAdInfo" class="drawer-content">
+        <!-- 国家信息 -->
+        <div class="section-title">投放国家</div>
+        <div class="countries-section">
+          <template v-if="currentAdInfo.countries && currentAdInfo.countries.length > 0">
+            <div v-for="(country, index) in currentAdInfo.countries.slice(0, 10)" :key="country.code" class="country-item">
+              <el-tag 
+                size="small" 
+                class="country-tag"
+                type="primary"
+                effect="light">
+                {{ country.code }}
+              </el-tag>
+              <span v-if="index < Math.min(currentAdInfo.countries.length, 10) - 1 && index < 9" class="country-separator">,</span>
+            </div>
+            <span v-if="currentAdInfo.countries.length > 10" class="more-countries">...</span>
+          </template>
+          <span v-else class="no-countries">无国家信息</span>
+        </div>
+        
         <!-- 标题部分 -->
         <div class="section-title">标题</div>
         <div class="headlines-section">
@@ -245,6 +302,22 @@
     <el-dialog :visible.sync="videoPlayVisible" append-to-body width="70%" class="video-dialog">
       <video :src="currentVideoUrl" controls autoplay class="video-player"></video>
     </el-dialog>
+
+    <!-- 添加错误信息对话框 -->
+    <el-dialog
+      title="失败原因"
+      :visible.sync="errorMessageVisible"
+      width="50%"
+      center
+    >
+      <div class="error-message-content">
+        <p v-if="currentErrorMsg">{{ currentErrorMsg }}</p>
+        <p v-else class="no-error-message">未提供失败原因</p>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="errorMessageVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
     
   </div>
 </template>
@@ -298,7 +371,9 @@ export default {
       previewVisible: false,
       previewImageUrl: '',
       videoPlayVisible: false,
-      currentVideoUrl: ''
+      currentVideoUrl: '',
+      errorMessageVisible: false,
+      currentErrorMsg: ''
     }
   },
   created() {
@@ -504,6 +579,13 @@ export default {
         try {
           // 如果adInfo是字符串，则解析为JSON对象
           this.currentAdInfo = typeof row.adInfo === 'string' ? JSON.parse(row.adInfo) : row.adInfo;
+          
+          // 确保countries字段可用
+          if (row.countries) {
+            this.currentAdInfo.countries = typeof row.countries === 'string' ? 
+              JSON.parse(row.countries) : row.countries;
+          }
+          
           this.drawerVisible = true;
         } catch (error) {
           console.error('解析广告信息失败:', error);
@@ -522,6 +604,15 @@ export default {
     playVideo(url) {
       this.currentVideoUrl = url;
       this.videoPlayVisible = true;
+    },
+
+    showErrorMessage(row) {
+      if (row && row.errorMsg) {
+        this.currentErrorMsg = row.errorMsg;
+        this.errorMessageVisible = true;
+      } else {
+        this.$message.info('没有失败原因');
+      }
     }
   }
 }
@@ -736,4 +827,113 @@ export default {
     width: calc(50% - 15px);
   }
 }
+
+.countries-section {
+  margin: 0 0 25px 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  background-color: #f8f9fc;
+  padding: 15px;
+  border-radius: 6px;
+}
+
+.country-item {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 5px;
+}
+
+.country-tag {
+  border-radius: 4px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+  padding: 0 8px;
+  height: 26px;
+  line-height: 24px;
+  margin-bottom: 5px;
+}
+
+.country-tag:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.country-separator {
+  margin: 0 3px;
+  color: #909399;
+}
+
+.more-countries {
+  color: #909399;
+  font-style: italic;
+  margin-left: 5px;
+}
+
+.no-countries {
+  color: #909399;
+  font-style: italic;
+}
+
+.table-countries-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  max-width: 100%;
+}
+
+.no-countries-text {
+  color: #909399;
+  font-style: italic;
+}
+
+/* 调整标签在表格中的样式 */
+.el-table .country-tag {
+  margin-bottom: 3px;
+  font-size: 11px;
+  height: 22px;
+  line-height: 20px;
+  padding: 0 5px;
+}
+
+.clickable-tag {
+  cursor: pointer;
+}
+
+.clickable-tag:hover {
+  opacity: 0.85;
+}
+
+.error-message-content {
+  padding: 15px;
+  background-color: #fef0f0;
+  border-radius: 4px;
+  border-left: 4px solid #f56c6c;
+  word-break: break-all;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.no-error-message {
+  color: #909399;
+  font-style: italic;
+}
+
+.operation-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.operation-buttons .el-button {
+  margin-left: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.operation-buttons .el-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
 </style>