Skip to content

C
company_app
提交 5a763bf7 作者: 毛细亚
操作

优化违规记录界面样式与交互

上级 0f750f9d
正在显示 包含 41 行增加 和 103 行删除
src/views/ViolationRecord.vue
<template>
<div class="violationRecord">
<el-form
v-loading="loading"
class="violationRecordContent"
label-width="90px"
>
<el-form v-loading="loading" class="violationRecordContent" label-width="90px">
<div v-if="violationList.length > 0">
<div
v-for="(item, index) in violationList"
:key="index"
class="contentItem"
>
<div v-for="(item, index) in violationList" :key="index" class="contentItem">
<el-form-item label="违规时间:">
<p>{{ item.violation_time }}</p>
</el-form-item>
......@@ -31,15 +23,9 @@
<el-form-item label="是否允许申诉:">
<p class="error">{{ item.appeal_name }}</p>
</el-form-item>
<el-form-item
v-if="item.remake != ''"
label="详情:"
>
<el-form-item v-if="item.remake != ''" label="详情:">
<!-- AI自动封禁 -->
<div
v-if="item.information_type === 6"
class="remarkType"
>
<div v-if="item.information_type === 6" class="remarkType">
<p>
<span class="label">所属项目:</span><span>{{ item.newRemake.project || "" }}</span>
</p>
......@@ -66,68 +52,31 @@
</p>
</div>
<!-- 其他类型 -->
<div
v-else
class="remarkType"
>
<div
v-if="item.remake.indexOf('src=') !== -1"
class="remakeImage"
>
<div v-else class="remarkType">
<div v-if="item.remake.indexOf('src=') !== -1" class="remakeImage">
<p class="watchDetails">
<el-button
type="text"
icon="el-icon-view"
size="medium"
<el-button type="text" icon="el-icon-view" size="medium"
style="z-index: 1; position: relative; margin-left: 5px"
@click="showRemake(item.remake)"
>查看大图</el-button>
@click="showRemake(item.remake)">查看大图</el-button>
</p>
<p class="remakeDetails" v-html="item.remake"></p>
</div>
<div
v-else
class="remakeImage"
>
<div v-else class="remakeImage">
<p class="remakeDetails" v-html="item.remake"></p>
</div>
</div>
</el-form-item>
<!-- 命中统计表格 -->
<div v-if="item && item.newRemake && item.newRemake.hit">
<div
class="title"
style="font-weight: 600; margin-bottom: 10px"
>
<div v-if="item && item.newRemake && item.newRemake.hit">
<div class="title" style="font-weight: 600; margin-bottom: 10px">
命中统计
</div>
<el-table
:data="item.newRemake.hit"
size="medium"
style="width: 100%"
class="hit-statistics-table"
>
<el-table-column
prop="content"
label="文本内容"
show-overflow-tooltip
/>
<el-table-column
prop="type"
label="命中类型"
width="120"
/>
<el-table-column
prop="key"
label="关键字"
width="120"
show-overflow-tooltip
/>
<el-table-column
label="时间"
width="180"
>
<el-table :data="item.newRemake.hit" size="medium" style="width: 100%" class="hit-statistics-table">
<el-table-column prop="content" label="文本内容" show-overflow-tooltip />
<el-table-column prop="type" label="命中类型" width="120" />
<el-table-column prop="key" label="关键字" width="120" show-overflow-tooltip />
<el-table-column label="时间" width="180">
<template slot-scope="{ row }">
<span>{{ $moment(row.time).format("YYYY-MM-DD HH:mm:ss") }}</span>
</template>
......@@ -136,29 +85,16 @@
</div>
</div>
</div>
<!-- 无数据状态 -->
<div
v-if="!loading && violationList.length == 0"
class="noContent rowFlex allCenter"
>
<div v-if="!loading && violationList.length == 0" class="noContent rowFlex allCenter">
<noContent title="暂无数据" description="当前没有任何数据，请稍后再试或联系管理员" />
</div>
</el-form>
<!-- 查看大图弹窗 -->
<el-dialog
title="查看大图"
:visible.sync="imageLayer"
width="320px"
center
append-to-body
@close="imageLayer = false"
>
<div
v-html="imageSrc"
class="layerImage"
></div>
<el-dialog title="查看大图" :visible.sync="imageLayer" width="320px" center append-to-body @close="imageLayer = false">
<div v-html="imageSrc" class="layerImage"></div>
</el-dialog>
</div>
</template>
......@@ -188,13 +124,13 @@ export default {
...mapState("game", ["accountSelect"]),
},
mounted() {
this.requestViolationList()
this.requestViolationList()
},
methods: {
memberChange() {
this.requestViolationList()
},
handleRemark(remark) {
try {
const remarkObj = JSON.parse(JSON.parse(remark.replace(/\r\n\t/g, "")));
......@@ -204,12 +140,12 @@ export default {
return remark;
}
},
showRemake(remake) {
this.imageSrc = remake;
this.imageLayer = true;
},
requestViolationList() {
const data = {
account_type: 1,
......@@ -262,8 +198,8 @@ export default {
height: 100%;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
overflow-x: hidden;
.violationRecordContent {
width: 100%;
padding: 20px;
......@@ -274,10 +210,11 @@ export default {
border-bottom: 1px dashed #ebeef5;
margin-bottom: 20px;
padding-bottom: 20px;
::v-deep .el-form-item__label{
::v-deep .el-form-item__label {
line-height: 40px;
}
&:last-child {
border-bottom: none;
}
......@@ -304,11 +241,11 @@ export default {
.hit-statistics-table {
margin-top: 10px;
margin-bottom: 20px;
::v-deep .el-table__header-wrapper th {
background-color: #f7f8fa;
}
::v-deep .el-button--text {
color: #3491FA;
}
......@@ -317,22 +254,22 @@ export default {
::v-deep .el-form-item {
margin-bottom: 8px;
}
::v-deep .el-form-item__label {
color: #86909C;
font-weight: 500;
}
::v-deep .el-form-item__content {
color: #333;
}
.title {
color: #333;
font-size: 16px;
position: relative;
padding-left: 10px;
&:before {
content: '';
position: absolute;
......@@ -345,15 +282,15 @@ export default {
border-radius: 3px;
}
}
::v-deep .el-dialog__header {
padding: 15px 20px;
background-color: #f7f8fa;
}
::v-deep .el-button--text {
color: #3491FA;
&:hover {
color: #5ba8fb;
}
......@@ -362,6 +299,7 @@ export default {
.remakeDetails {
word-break: break-all;
::v-deep img {
max-width: 200px;
max-height: 200px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论