Skip to content

Z
zxn-adputin
Commit 0b053262 authored by lijin's avatar lijin
Browse files
Options

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

parent 1fae0be5
Hide whitespace changes
Inline Side-by-side
Showing with 239 additions and 39 deletions
src/views/campaignTask/CampaignTaskManage.vue
View file @ 0b053262
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment