735 lines
29 KiB
Vue
735 lines
29 KiB
Vue
<template>
|
||
<div class="main">
|
||
<div class="top">
|
||
<el-row :gutter="24" style="padding: 0 30px;">
|
||
<el-col :span="8" v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps || isBranchAdmin">
|
||
<el-card class="box-card">
|
||
<div class="my-span-checklist-title">
|
||
我创建的总任务数
|
||
</div>
|
||
<div class="my-span-checklist-main">
|
||
<span>本周：</span>
|
||
<span>{{ cardInfo.createCampNumWeek }}</span>
|
||
</div>
|
||
<div class="my-span-checklist-main">
|
||
<span>本月：</span>
|
||
<span>{{ cardInfo.createCampNumMonth }}</span>
|
||
</div>
|
||
<div class="my-span-checklist-main">
|
||
<span>本年：</span>
|
||
<span>{{ cardInfo.createCampNumYear }}</span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8" v-if="isBranchAdmin || isOutletAdmin || isCommonManager">
|
||
<el-card class="box-card1">
|
||
<div class="my-span-checklist-title">
|
||
推送给我的总任务数
|
||
</div>
|
||
<div class="my-span-checklist-main">
|
||
<span>本周：</span>
|
||
<span>{{ cardInfo.pushCampNumWeek }}</span>
|
||
</div>
|
||
<div class="my-span-checklist-main">
|
||
<span>本月：</span>
|
||
<span>{{ cardInfo.pushCampNumMonth }}</span>
|
||
</div>
|
||
<div class="my-span-checklist-main">
|
||
<span>本年：</span>
|
||
<span>{{ cardInfo.pushCampNumYear }}</span>
|
||
</div>
|
||
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="8" v-if="isBranchAdmin || isOutletAdmin">
|
||
<el-card class="box-card1">
|
||
<div class="my-span-checklist-title">
|
||
其他的总任务数
|
||
</div>
|
||
<div class="my-span-checklist-main">
|
||
<span>本周：</span>
|
||
<span>{{ cardInfo.otherCampNumWeek }}</span>
|
||
</div>
|
||
<div class="my-span-checklist-main">
|
||
<span>本月：</span>
|
||
<span>{{ cardInfo.otherCampNumMonth }}</span>
|
||
</div>
|
||
<div class="my-span-checklist-main">
|
||
<span>本年：</span>
|
||
<span>{{ cardInfo.otherCampNumYear }}</span>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="content">
|
||
<el-radio-group class="header-radio" v-model="selectedTab" @input="handleChange">
|
||
<template v-if="String(deptId).substring(0, 3) === '875'">
|
||
<el-radio-button label="0" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">个人</el-radio-button>
|
||
<el-radio-button label="1" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">商户</el-radio-button>
|
||
<el-radio-button label="2" :disabled="isPrivate" :class="{ 'btn-disabled': isPrivate }">企业</el-radio-button>
|
||
</template>
|
||
<template v-else>
|
||
<el-radio-button label="2" :disabled="isPrivate" :class="{ 'btn-disabled': isPrivate }">企业</el-radio-button>
|
||
<el-radio-button label="0" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">个人</el-radio-button>
|
||
<el-radio-button label="1" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">商户</el-radio-button>
|
||
</template>
|
||
</el-radio-group>
|
||
<!-- <div class="taskTop">
|
||
<div class="taskTop_left">
|
||
<div class="taskTop_left_item" :class="[isActive1 ? 'active' : '']" @click="handleTask">
|
||
走访任务统计<i class="el-icon-arrow-down" v-if="isActive1"></i></div>
|
||
<div class="taskTop_left_item" :class="[isActive2 ? 'active' : '']" @click="handleYearTask">
|
||
年度走访统计<i class="el-icon-arrow-down" v-if="isActive2"></i></div>
|
||
</div>
|
||
|
||
</div> -->
|
||
<div class="searchForm">
|
||
<el-form ref="searchForm" :model="searchForm" label-width="80px" :inline="true">
|
||
<el-form-item label="任务来源" v-if="isBranchAdmin || isOutletAdmin || isCommonManager">
|
||
<!-- <el-input v-model="searchForm.campsource" placeholder="请输入任务来源" @blur="handleSearch" clearable
|
||
@clear="handleSearch" /> -->
|
||
<el-select v-model="searchForm.campsource" placeholder="请选择" clearable @change="handleSearch">
|
||
<el-option v-for="item in campsourceList" :key="item.value" :label="item.label"
|
||
:disabled="item.disabled" :value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="开始时间">
|
||
<el-date-picker v-model="searchForm.startTime" type="date" @change="handleSearch"
|
||
value-format="yyyy-MM-dd"></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="结束时间">
|
||
<el-date-picker v-model="searchForm.endtTime" type="date" @change="handleSearch"
|
||
value-format="yyyy-MM-dd"></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="任务名称">
|
||
<el-input v-model="searchForm.campaignName" placeholder="请输入任务名称" @blur="handleSearch" clearable
|
||
@clear="handleSearch" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="small" class="common-search-btn"
|
||
@click="handleSearch">查询</el-button>
|
||
<el-button size="small" class="common-reset-btn" type="plain" @click="resetFilters">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
</div>
|
||
<section class="operate-cnt">
|
||
<right-toolbar @queryTable="handleRefersh" :columns="columns" style="margin-left: auto"></right-toolbar>
|
||
</section>
|
||
<el-table :data="tableData" style="width: 100%" class="tableData" v-loading="Loading" max-height="600">
|
||
<el-table-column align="left" prop="campaignName" label="任务名称" show-overflow-tooltip width="150px"
|
||
v-if="columns[0].visible"></el-table-column>
|
||
<el-table-column align="left" prop="campsource" label="任务来源" show-overflow-tooltip width="150px"
|
||
v-if="isBranchAdmin || isOutletAdmin || isCommonManager"></el-table-column>
|
||
<el-table-column align="left" prop="startTime" label="开始时间" show-overflow-tooltip width="150px"
|
||
v-if="columns[1].visible"></el-table-column>
|
||
<el-table-column align="left" prop="endTime" label="结束时间" show-overflow-tooltip width="150px"
|
||
v-if="columns[2].visible"></el-table-column>
|
||
<el-table-column align="left" prop="claimEndTime" label="认领时限" show-overflow-tooltip width="150px"
|
||
v-if="columns[3].visible"></el-table-column>
|
||
<el-table-column align="left" prop="claimType" label="认领类型" show-overflow-tooltip v-if="columns[4].visible">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.claimType == '0'">强制认领</span>
|
||
<span v-if="scope.row.claimType == '1'">可选认领</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="custNum" show-overflow-tooltip width="150px"
|
||
v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps || isBranchAdmin">
|
||
<template slot="header" slot-scope="scope">
|
||
<span>活动总客户数</span>
|
||
<el-tooltip placement="top" trigger="hover" content="该任务下的总客户数" width="200">
|
||
<span class="quesiton"><i class="el-icon-question"></i></span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="pushSuccessNum" show-overflow-tooltip width="150px"
|
||
v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps">
|
||
<template slot="header" slot-scope="scope">
|
||
<span>推送成功客户数</span>
|
||
<el-tooltip placement="top" trigger="hover" content="已经推送给任务执行人(支行或客户经理)的客户数" width="200">
|
||
<span class="quesiton"><i class="el-icon-question"></i></span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="" show-overflow-tooltip width="120px"
|
||
v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps">
|
||
<template slot="header" slot-scope="scope">
|
||
<span>机构分配率</span>
|
||
<el-tooltip placement="top" trigger="hover" content="已经二次分配的支行数除以需要二次分配的总支行数" width="200">
|
||
<span class="quesiton"><i class="el-icon-question"></i></span>
|
||
</el-tooltip>
|
||
</template>
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.allocateRate == -1">无需二次分配</span>
|
||
<span v-else>{{ scope.row.allocateRate }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="dispatchNum" show-overflow-tooltip v-if="columns[5].visible"
|
||
width="150px">
|
||
<template slot="header" slot-scope="scope">
|
||
<span>已下发客户数</span>
|
||
<el-tooltip placement="top" trigger="hover" content="已经推送给走访人(客户经理等)的客户数" width="200">
|
||
<span class="quesiton"><i class="el-icon-question"></i></span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="issuedNum" show-overflow-tooltip v-if="columns[6].visible"
|
||
width="120px">
|
||
<template slot="header" slot-scope="scope">
|
||
<span>客户认领率</span>
|
||
<el-tooltip placement="top" trigger="hover" content="已被认领的客户数除以已下发客户数" width="200">
|
||
<span class="quesiton"><i class="el-icon-question"></i></span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="validVisitNum" show-overflow-tooltip v-if="columns[7].visible"
|
||
width="150px">
|
||
<template slot="header" slot-scope="scope">
|
||
<span>有效待走访客户数</span>
|
||
<el-tooltip placement="top" trigger="hover" content="已被认领的客户中,未被标记无法触达的客户数" width="200">
|
||
<span class="quesiton"><i class="el-icon-question"></i></span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="visitRate" show-overflow-tooltip v-if="columns[8].visible">
|
||
<template slot="header" slot-scope="scope">
|
||
<span>走访率</span>
|
||
<el-tooltip placement="top" trigger="hover" content="已走访客户数除以有效待走访客户数" width="200">
|
||
<span class="quesiton"><i class="el-icon-question"></i></span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="visitedNum" label="已走访户数" width="150" show-overflow-tooltip v-if="columns[9].visible">
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="loanSignRate" show-overflow-tooltip v-if="columns[10].visible"
|
||
width="150px">
|
||
<template slot="header" slot-scope="scope">
|
||
<span>贷款合同签约率</span>
|
||
<el-tooltip placement="top" trigger="hover" content="签约贷款客户数除以有效待走访客户数" width="200">
|
||
<span class="quesiton"><i class="el-icon-question"></i></span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="increaseDepositAmount" show-overflow-tooltip
|
||
v-if="columns[11].visible" width="150px">
|
||
<template slot="header" slot-scope="scope">
|
||
<span>活期存款金额提升</span>
|
||
<el-tooltip placement="top" trigger="hover" content="任务期间,客户的活期存款余额提升值(任务结束时点-任务开始时点)" width="200">
|
||
<span class="quesiton"><i class="el-icon-question"></i></span>
|
||
</el-tooltip>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="left" prop="" label="操作" width="200px" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps"
|
||
@click="viewBranch(scope.row)">查看支行</el-button>
|
||
<el-button type="text" v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps || isBranchAdmin"
|
||
@click="viewDot(scope.row)">查看网点</el-button>
|
||
<el-button type="text" v-if="isBranchAdmin || isOutletAdmin"
|
||
@click="viewPersonage(scope.row)">查看个人</el-button>
|
||
<!-- <el-button type="text" v-if="isBranchAdmin || isOutletAdmin || isCommonManager"
|
||
@click="handleCommentOn(scope.row)">点评</el-button> -->
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||
:page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="->,total,prev,pager,next,sizes" :total="total"
|
||
:current-page="pageNum"></el-pagination>
|
||
</div>
|
||
<el-drawer title="" :visible.sync="showCommentOn" :size="570" :with-header="false" direction="rtl"
|
||
:append-to-body="true" :wrapperClosable="false">
|
||
<comment-on :commentList="commentList" @confirm="handleConfirm" @cancle="handleCancle"></comment-on>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { mapGetters } from 'vuex'
|
||
import CommentOn from '../component/commentOn.vue'
|
||
import { cardList, visitingTaskList, commentList, insertCommentList } from '@/api/task/listStatistics.js'
|
||
import { Message } from 'element-ui'
|
||
export default {
|
||
components: { CommentOn },
|
||
data() {
|
||
return {
|
||
cardInfo: {
|
||
createCampNumWeek: '',
|
||
createCampNumMonth: '',
|
||
createCampNumYear: '',
|
||
pushCampNumWeek: '',
|
||
pushCampNumMonth: '',
|
||
pushCampNumYear: '',
|
||
otherCampNumWeek: '',
|
||
otherCampNumMonth: '',
|
||
otherCampNumYear: '',
|
||
},
|
||
selectedTab: '',
|
||
tableData: [],
|
||
Loading: false,
|
||
total: 0,
|
||
pageSize: 10,
|
||
pageNum: 1,
|
||
isActive1: true,
|
||
isActive2: false,
|
||
searchForm: {
|
||
campsource: '',
|
||
startTime: '',
|
||
endtTime: '',
|
||
campaignName: '',
|
||
},
|
||
showCommentOn: false,
|
||
commentList: [],
|
||
campsourceList: [],
|
||
drawcampaignId: '',
|
||
columns: [
|
||
{ key: 0, label: '任务名称', visible: true },
|
||
{ key: 1, label: '开始时间', visible: true },
|
||
{ key: 2, label: '结束时间', visible: true },
|
||
{ key: 3, label: '认领时限', visible: true },
|
||
{ key: 4, label: '认领类型', visible: true },
|
||
{ key: 5, label: '已下发客户数', visible: true },
|
||
{ key: 6, label: '客户认领率', visible: true },
|
||
{ key: 7, label: '有效待走访客户数', visible: true },
|
||
{ key: 8, label: '走访率', visible: true },
|
||
{ key: 9, label: '已走访户数', visible: true },
|
||
{ key: 10, label: '贷款合同签约率', visible: true },
|
||
{ key: 11, label: '活期存款金额提升', visible: true },
|
||
],
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['roles']),
|
||
deptId() {
|
||
return this.$store.state.user.deptId
|
||
},
|
||
//总行
|
||
isHeadAdmin() {
|
||
return this.roles.includes('headAdmin')
|
||
},
|
||
//公司部
|
||
isPublic() {
|
||
return this.roles.includes('headPublic')
|
||
},
|
||
//零售部
|
||
isPrivate() {
|
||
return this.roles.includes('headPrivate')
|
||
},
|
||
//运管部
|
||
isHeadOps() {
|
||
return this.roles.includes('headOps')
|
||
},
|
||
//支行
|
||
isBranchAdmin() {
|
||
return this.roles.includes('branchAdmin')
|
||
},
|
||
// 网点主任
|
||
isOutletAdmin() {
|
||
return this.roles.includes('outletAdmin')
|
||
},
|
||
// 客户经理
|
||
isCommonManager() {
|
||
return this.roles.includes('commonManager')
|
||
},
|
||
|
||
},
|
||
created() {
|
||
console.log(this.$route.query.selectedTab, 'sssssss')
|
||
const {selectedTab,campaignName} = this.$route.query;
|
||
if (campaignName) {
|
||
this.searchForm.campaignName = campaignName
|
||
}
|
||
if (selectedTab) {
|
||
this.selectedTab = selectedTab;
|
||
for(let key in this.$route.query){
|
||
delete this.$route.query[key];
|
||
}
|
||
} else {
|
||
// 默认选中第一个tab
|
||
const deptId = this.$store.state.user.deptId
|
||
const deptIdStr = deptId ? String(deptId) : ''
|
||
const defaultTab = deptIdStr.startsWith('875') ? '0' : '2'
|
||
|
||
if (this.isPublic) {
|
||
this.selectedTab = '2'
|
||
} else if (this.isPrivate) {
|
||
this.selectedTab = defaultTab
|
||
} else {
|
||
this.selectedTab = defaultTab
|
||
}
|
||
}
|
||
if (this.isBranchAdmin) {
|
||
this.campsourceList = [
|
||
{ label: '总行推送的', value: '总行推送的' },
|
||
{ label: '我创建的', value: '我创建的' }
|
||
]
|
||
} else if (this.isOutletAdmin || this.isCommonManager) {
|
||
this.campsourceList = [
|
||
{ label: '总行下发的', value: '总行下发的' },
|
||
{ label: '支行下发的', value: '支行下发的' }
|
||
]
|
||
}
|
||
this.initCardList()
|
||
this.initVisitingTaskList()
|
||
},
|
||
methods: {
|
||
initCardList() {
|
||
cardList(this.selectedTab).then(res => {
|
||
if (res.code == 200 && res.rows.length > 0) {
|
||
this.cardInfo = res.rows[0]
|
||
} else {
|
||
this.cardInfo = {}
|
||
}
|
||
})
|
||
},
|
||
handleChange(val) {
|
||
this.pageSize = 10,
|
||
this.pageNum = 1,
|
||
this.initCardList()
|
||
this.initVisitingTaskList()
|
||
},
|
||
handleTask() {
|
||
this.isActive1 = true
|
||
this.isActive2 = false
|
||
},
|
||
handleYearTask() {
|
||
// this.isActive1 = false
|
||
// this.isActive2 = true
|
||
},
|
||
initVisitingTaskList() {
|
||
const query = {
|
||
custType: this.selectedTab,
|
||
startTime: this.searchForm.startTime,
|
||
endTime: this.searchForm.endtTime,
|
||
campaignName: this.searchForm.campaignName,
|
||
campsource: this.searchForm.campsource,
|
||
pageSize: this.pageSize,
|
||
pageNum: this.pageNum
|
||
}
|
||
visitingTaskList(query).then(res => {
|
||
if (res.code == 200) {
|
||
this.tableData = res.rows
|
||
this.total = res.total
|
||
}
|
||
})
|
||
},
|
||
handleRefersh() {
|
||
this.searchForm = {}
|
||
this.initVisitingTaskList()
|
||
},
|
||
viewBranch(row) {
|
||
this.$router.push({
|
||
path: '/taskManage/branchDetail',
|
||
query: { campaignId: row.campaignId,selectedTab:this.selectedTab }
|
||
})
|
||
},
|
||
viewDot(row) {
|
||
if (this.isBranchAdmin) {
|
||
this.$router.push({
|
||
path: '/taskManage/dotDetail',
|
||
query: { campaignId: row.campaignId, pageType: '2', deptId: row.deptId,selectedTab:this.selectedTab }
|
||
})
|
||
} else {
|
||
this.$router.push({
|
||
path: '/taskManage/dotDetail',
|
||
query: { campaignId: row.campaignId, pageType: '1',selectedTab:this.selectedTab }
|
||
})
|
||
}
|
||
|
||
},
|
||
viewPersonage(row) {
|
||
if (this.isOutletAdmin || this.isCommonManager) {
|
||
this.$router.push({
|
||
path: '/taskManage/personageDetail',
|
||
query: { campaignId: row.campaignId, pageType: '2', outletsId: row.outletsId, personType: 'outlet' }
|
||
})
|
||
} else {
|
||
this.$router.push({
|
||
path: '/taskManage/personageDetail',
|
||
query: { campaignId: row.campaignId, pageType: '1', personType: 'branch' }
|
||
})
|
||
}
|
||
|
||
},
|
||
handleCommentOn(row) {
|
||
this.showCommentOn = true
|
||
this.drawcampaignId = row.campaignId
|
||
const params = {
|
||
campaignId: row.campaignId
|
||
}
|
||
commentList(params).then(res => {
|
||
if (res.code == 200) {
|
||
this.commentList = res.rows
|
||
}
|
||
|
||
})
|
||
},
|
||
|
||
handleConfirm(data) {
|
||
const params = {
|
||
campaignId: this.drawcampaignId,
|
||
comment: data
|
||
}
|
||
insertCommentList(params).then(res => {
|
||
if (res.code == 200) {
|
||
Message.success(res.msg)
|
||
this.showCommentOn = false
|
||
}
|
||
})
|
||
},
|
||
handleCancle() {
|
||
this.showCommentOn = false
|
||
},
|
||
handleSizeChange(newSize) {
|
||
this.pageSize = newSize
|
||
this.initVisitingTaskList()
|
||
},
|
||
handleCurrentChange(newPage) {
|
||
this.pageNum = newPage
|
||
this.initVisitingTaskList()
|
||
},
|
||
handleSearch() {
|
||
this.initVisitingTaskList()
|
||
},
|
||
resetFilters() {
|
||
this.searchForm = {}
|
||
this.initVisitingTaskList()
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.main {
|
||
background-color: #ffffff;
|
||
box-shadow: 0 3px 8px 0 #00000017;
|
||
border-radius: 16px 16px 0 0;
|
||
overflow-y: auto;
|
||
padding: 0 30px 30px 30px;
|
||
}
|
||
|
||
.box-card {
|
||
height: 181px;
|
||
background: #EAF5FF;
|
||
border-radius: 8px;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
.box-card1 {
|
||
height: 181px;
|
||
background: #EAF5FF;
|
||
border-radius: 8px;
|
||
margin-top: 25px;
|
||
|
||
}
|
||
|
||
.my-span-checklist-title {
|
||
height: 25px;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
color: #222222;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.my-span-checklist-main {
|
||
line-height: 30px;
|
||
}
|
||
|
||
.header-radio {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #ebebeb;
|
||
|
||
.btn-disabled {
|
||
::v-deep .el-radio-button__inner {
|
||
background-color: #e7e7e7;
|
||
}
|
||
}
|
||
|
||
.el-radio-button {
|
||
flex: 1;
|
||
|
||
::v-deep .el-radio-button__inner {
|
||
width: 100%;
|
||
border: none;
|
||
font-weight: 400;
|
||
letter-spacing: 0.44px;
|
||
line-height: 25px;
|
||
font-size: 16px;
|
||
color: #666666;
|
||
padding: 11px 0 12px 0;
|
||
}
|
||
|
||
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
||
background-color: #4886f8;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
border-bottom-left-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
|
||
&::before,
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
height: 21px;
|
||
width: 1px;
|
||
background: #ebebeb;
|
||
z-index: 1;
|
||
}
|
||
|
||
&::after {
|
||
right: 1px;
|
||
}
|
||
}
|
||
|
||
&.is-active {
|
||
|
||
&::before,
|
||
&::after {
|
||
content: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-disabled {
|
||
::v-deep .el-radio-button__inner {
|
||
background-color: #e7e7e7;
|
||
}
|
||
}
|
||
|
||
.header-radio {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #ebebeb;
|
||
margin-top: 25px;
|
||
|
||
.btn-disabled {
|
||
::v-deep .el-radio-button__inner {
|
||
background-color: #e7e7e7;
|
||
}
|
||
}
|
||
|
||
.el-radio-button {
|
||
flex: 1;
|
||
border: 1px solid #ccc;
|
||
|
||
::v-deep .el-radio-button__inner {
|
||
width: 100%;
|
||
border: none;
|
||
font-weight: 400;
|
||
letter-spacing: 0.44px;
|
||
line-height: 25px;
|
||
font-size: 16px;
|
||
color: #666666;
|
||
padding: 11px 0 12px 0;
|
||
}
|
||
|
||
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
||
background-color: #4886f8;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
border-bottom-left-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
|
||
&::before,
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
height: 21px;
|
||
width: 1px;
|
||
background: #ebebeb;
|
||
z-index: 1;
|
||
}
|
||
|
||
&::after {
|
||
right: 1px;
|
||
}
|
||
}
|
||
|
||
&.is-active {
|
||
|
||
&::before,
|
||
&::after {
|
||
content: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tableData {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.taskTop {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.taskTop_left {
|
||
display: flex;
|
||
}
|
||
|
||
.taskTop_left_item {
|
||
width: 150px;
|
||
text-align: center;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.el-icon-arrow-down {
|
||
margin-left: 15px;
|
||
font-size: 16px;
|
||
color: rgb(64, 149, 229);
|
||
}
|
||
|
||
.searchForm {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.operate-cnt {
|
||
margin: 0 0 10px 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
|
||
.top-right-btn {
|
||
margin-right: 24px;
|
||
padding-bottom: 6px;
|
||
}
|
||
|
||
.plain-raido-btn {
|
||
::v-deep .el-radio-button__inner {
|
||
color: #666666;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
border: 1px solid #ebebeb;
|
||
border-radius: 0;
|
||
}
|
||
|
||
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
||
border: 1px solid #4886f8;
|
||
color: #4886f8;
|
||
background-color: #ffffff;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.quesiton {
|
||
color: #b9b9b9;
|
||
}
|
||
</style> |