<template>
|
<div class="workbench">
|
<el-card style="height: 100%">
|
<div class="banner">
|
<div class="banner-item" style="background-color: rgb(25, 144, 255)">
|
<span class="banner-item-title">今日待审核人员</span>
|
<span class="banner-item-number">{{ pendingNumber }}</span>
|
</div>
|
<div class="banner-item" style="background-color: rgb(255, 153, 51)">
|
<span class="banner-item-title">今日已审核人员</span>
|
<span class="banner-item-number">{{ pendedNumber }}</span>
|
</div>
|
<div class="banner-item" style="background-color: rgb(48, 194, 91)">
|
<span class="banner-item-title">今日进群人数</span>
|
<span class="banner-item-number">{{ nowNumber }}</span>
|
</div>
|
<div class="banner-item" style="background-color: rgb(250, 204, 20)">
|
<span class="banner-item-title">今日新增案件</span>
|
<span class="banner-item-number">{{ nowCause }}</span>
|
</div>
|
<div class="banner-item" style="background-color: rgb(22, 194, 194)">
|
<span class="banner-item-title">案件总数</span>
|
<span class="banner-item-number">{{ causeCount }}</span>
|
</div>
|
<div class="banner-item" style="background-color: rgb(255, 128, 124)">
|
<span class="banner-item-title">管理人员</span>
|
<span class="banner-item-number">{{ managerCount }}</span>
|
</div>
|
</div>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-card class="card-list">
|
<template slot="header">
|
<span>待审核人员</span>
|
</template>
|
<el-table :data="checkPendingList" style="width: 100%" stripe>
|
<el-table-column label="报案人" prop="reporterName" width="80"></el-table-column>
|
<el-table-column label="手机号码" prop="mobile"></el-table-column>
|
<el-table-column label="身份证号码" prop="idcard" width="200"></el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" size="medium" @click="handleAudit(scope.row)">审核</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
<el-col :span="12">
|
<el-card class="card-list">
|
<template slot="header">
|
<span>群组动态</span>
|
</template>
|
<el-table :data="groupMessageList" style="width: 100%" stripe :show-header="false">
|
<el-table-column width="80">
|
<template slot-scope="scope">
|
<i class="el-icon-user message-img" :style="imgColorList[scope.$index]"></i>
|
</template>
|
</el-table-column>
|
<el-table-column>
|
<template slot-scope="scope">
|
<div class="message-item">
|
<div class="message-item-title">
|
<span>{{ scope.row.groupName }} 案件</span>
|
<span>{{ scope.row.userName }}</span>
|
<span>发布了</span>
|
<el-button type="text" size="medium" @click="toGroup(scope.row.groupId)">消息</el-button>
|
</div>
|
<div class="message-item-time">
|
<span>{{ scope.row.ctime }}</span>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
</el-row>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import {
|
checkPendedNumber,
|
checkPendingNumber,
|
intoGroupNumber,
|
newCase,
|
allCase,
|
allManager,
|
checkPendingList,
|
groupMessage
|
} from '@/api/workbench'
|
|
export default {
|
name: "Workbench",
|
data() {
|
return {
|
pendedNumber: 0,
|
pendingNumber: 0,
|
nowNumber: 0,
|
nowCause: 0,
|
causeCount: 0,
|
managerCount: 0,
|
checkPendingList: [],
|
groupMessageList: [],
|
imgColorList: [
|
{"backgroundColor": "rgb(94, 212, 136)"},
|
{"backgroundColor": "rgb(128, 128, 255)"},
|
{"backgroundColor": "rgb(193, 128, 255)"},
|
{"backgroundColor": "rgb(25, 144, 255)"},
|
{"backgroundColor": "rgb(255, 128, 124)"},
|
]
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
init() {
|
checkPendedNumber().then(
|
res => this.pendedNumber = res
|
)
|
checkPendingNumber().then(
|
res => this.pendingNumber = res
|
)
|
intoGroupNumber().then(
|
res => this.nowNumber = res
|
)
|
newCase().then(
|
res => this.nowCause = res
|
)
|
allCase().then(
|
res => this.causeCount = res
|
)
|
allManager().then(
|
res => this.managerCount = res
|
)
|
checkPendingList().then(
|
res => this.checkPendingList = res
|
)
|
groupMessage().then(
|
res => this.groupMessageList = res
|
)
|
},
|
handleAudit(row) {
|
console.log(row)
|
},
|
toGroup(groupId) {
|
console.log(groupId)
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.workbench {
|
background-color: white;
|
height: 100%;
|
}
|
|
.banner {
|
margin: 0;
|
width: 100%;
|
height: 100px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
background-color: #fff;
|
|
.banner-item {
|
width: 165px;
|
height: 68px;
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
align-items: center;
|
|
.banner-item-title {
|
font-size: 16px;
|
color: #fff;
|
}
|
|
.banner-item-number {
|
font-size: 20px;
|
color: #fff;
|
}
|
}
|
}
|
|
::v-deep(.el-card__body) {
|
height: 418px;
|
}
|
|
.card-list {
|
font-size: 16px;
|
}
|
|
::v-deep(.el-table thead) {
|
color: #000000;
|
}
|
|
.message-img {
|
width: 50px;
|
height: 50px;
|
background-color: red;
|
border-radius: 50%;
|
text-align: center;
|
line-height: 50px;
|
color: white;
|
font-size: 40px;
|
}
|
|
.message-item {
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
|
.message-item-title {
|
display: flex;
|
align-content: flex-start;
|
|
font-size: 14px;
|
font-weight: 700;
|
color: #000;
|
|
::v-deep(.el-button--small) {
|
font-size: 14px;
|
}
|
|
span {
|
height: 34px;
|
line-height: 34px;
|
text-align: center;
|
margin-right: 20px;
|
}
|
}
|
}
|
</style>
|
