<template>
|
<div class="homePage">
|
<ul class="home">
|
<li v-loading="todoLoading" element-loading-background="transparent">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>待办事项</span>
|
<span class='el-icon-refresh-right refresh' @click="refresh" title="刷新"></span>
|
</div>
|
<div class="default" v-if="!todoLoading&&!todo.length">
|
<img src="../../assets/images/default.png" alt="">
|
</div>
|
<ul class="content" v-show="!todoLoading&&todo.length">
|
<li>
|
<p>事项分类</p>
|
<div class="toDoChart">
|
<div class="chart">
|
<div id="todoEle"></div>
|
<div class="manage">
|
<ul>
|
<li>
|
<p>
|
<span></span>
|
<span>贷款管理</span>
|
<span>{{loan}} 项</span>
|
</p>
|
<p>
|
<span></span>
|
<span>资金管理</span>
|
<span>{{capital}} 项</span>
|
</p>
|
<p>
|
<span></span>
|
<span>风险管理</span>
|
<span>{{risk}} 项</span>
|
</p>
|
</li>
|
<li>
|
<p>
|
<span></span>
|
<span>贷后管理</span>
|
<span>{{afterLoan}} 项</span>
|
</p>
|
<p>
|
<span></span>
|
<span>产品管理</span>
|
<span>{{product}} 项</span>
|
</p>
|
<p>
|
<span></span>
|
<span>逾期提醒</span>
|
<span>{{overdueCount}} 项</span>
|
</p>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</li>
|
<li>
|
<p>全部事项</p>
|
<ul>
|
<li v-for="(item,index) in todo" :key="index">
|
<span v-if="item.sysType == '01'">【贷款】</span>
|
<span v-if="item.sysType == '02'">【贷后】</span>
|
<span v-if="item.sysType == '03'">【产品】</span>
|
<span v-if="item.sysType == '04'">【资金】</span>
|
<span v-if="item.sysType == '05'">【风险】</span>
|
<span v-if="item.sysType == '06'">【逾期提醒】</span>
|
<span
|
class="todoActive"
|
:class="{selected:item.isSelect}"
|
@click="handleLink(item)"
|
:title="`${(item.productName?item.productName+' '+' '+' ':'')+(item.itemName?item.itemName+' '+' '+' ':'')+item.phaseName}`"
|
>
|
{{` ${(item.productName?item.productName+' ':'')+(item.itemName?item.itemName+' ':'')+item.phaseName}`}}
|
</span>
|
</li>
|
</ul>
|
</li>
|
</ul>
|
</el-card>
|
</li>
|
<li v-loading="doneLoading" element-loading-background="transparent">
|
<el-card class="box-card">
|
<div slot="header">
|
<span>已办事项</span>
|
<p v-for="(item,index) in dateOrMonth" :key="index" @click="selectDataOrMonth(item,index)" :class="{ active : index == activeIndex }">
|
<el-button type="text">{{item}}</el-button>
|
<span></span>
|
</p>
|
</div>
|
<div class="default" v-if="!doneLoading&&!done.length">
|
<img src="../../assets/images/default.png" alt="">
|
</div>
|
<ul class="content" v-show="!doneLoading&&done.length">
|
<li>
|
<p>处理事项趋势统计</p>
|
<div class="toDoChart">
|
<div id="doneEle"></div>
|
</div>
|
</li>
|
<li>
|
<p>全部事项</p>
|
<ul>
|
<li v-for="(item,index) in done" :key="index">
|
<span v-if="item.sysType == '01'">【贷款】</span>
|
<span v-if="item.sysType == '02'">【贷后】</span>
|
<span v-if="item.sysType == '03'">【产品】</span>
|
<span v-if="item.sysType == '04'">【资金】</span>
|
<span v-if="item.sysType == '05'">【风险】</span>
|
<span v-if="item.sysType == '06'">【逾期提醒】</span>
|
<span
|
class="active"
|
:title="`${(item.productName?item.productName+' '+' '+' ':'')+(item.itemName?item.itemName+' '+' '+' ':'')+(item.transAmt?item.transAmt+' '+' '+' ':'')+item.phaseName}`"
|
>
|
{{` ${(item.productName?item.productName+' ':'')+(item.itemName?item.itemName+' ':'')+(item.transAmt?item.transAmt+' ':'')+item.phaseName}`}}
|
</span>
|
</li>
|
</ul>
|
</li>
|
</ul>
|
</el-card>
|
</li>
|
<li>
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>公告信息</span>
|
<el-input placeholder="输入您想搜索的关键字" v-model="notice" class="input-with-select">
|
<el-button slot="append" @click="searchNotice">搜索</el-button>
|
</el-input>
|
</div>
|
<div class="notice">
|
<div class="btn">
|
<p>
|
<el-button
|
v-for="(item,index) in noticeBtns"
|
:key="index"
|
:class="{active:selNoticeIndex == index}"
|
plain size="small"
|
round
|
@click="handleNotice(item,index)"
|
>
|
{{item.label}}
|
</el-button>
|
</p>
|
</div>
|
<ul v-if="showNotice">
|
<li v-for="(item,index) in taskList" :key="index">
|
<span></span>
|
<span>【数据导出】</span>
|
<span
|
class="active"
|
@click="downloadFileTaskInfo(item)"
|
:title="`${item.taskdesc} 导出成功`"
|
v-if="item.finishflag == '1'"
|
>
|
{{item.taskdesc}} 导出成功
|
</span>
|
<span
|
v-else-if="item.finishflag == '2'"
|
:title="`${item.taskdesc} 导出失败`"
|
>
|
{{item.taskdesc}} 导出失败
|
</span>
|
<span
|
v-else
|
:title="`${item.taskdesc} 导出中`"
|
>
|
{{item.taskdesc}} 导出中
|
</span>
|
<span
|
class="el-icon-download download"
|
v-if="item.finishflag == '1'"
|
@click="downloadFileTaskInfo(item)"
|
>
|
</span>
|
</li>
|
</ul>
|
<ul v-else>
|
<li v-for="(item,index) in boardList" :key="index">
|
<span></span>
|
<span>【{{item.contenttypeDesc}}】</span>
|
<span
|
class="active"
|
:class="{selected:item.isSelect}"
|
@click="handleBoardAndHelp(item)"
|
:title="item.boardname"
|
>
|
{{item.boardname}}
|
</span>
|
</li>
|
</ul>
|
</div>
|
</el-card>
|
</li>
|
<li>
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>帮助文档清单</span>
|
<el-input placeholder="输入您想搜索的关键字" v-model="help" class="input-with-select">
|
<el-button slot="append" @click="searchHelp">搜索</el-button>
|
</el-input>
|
</div>
|
<div class="help">
|
<div class="btn">
|
<p>
|
<el-button
|
v-for="(item,index) in helpBtns"
|
:key="index"
|
:class="{active:selHelpIndex == index}"
|
plain
|
size="small"
|
round
|
@click="handleHelpDoc(item,index)"
|
>
|
{{item.label}}
|
</el-button>
|
</p>
|
</div>
|
<ul>
|
<li v-for="(item,index) in helpList" :key="index">
|
<span></span>
|
<span>【{{item.contenttypeDesc}}】</span>
|
<span
|
class="active"
|
:class="{selected:item.isSelect}"
|
:title="item.boardname"
|
@click="handleBoardAndHelp(item)"
|
>
|
{{item.boardname}}
|
</span>
|
</li>
|
</ul>
|
</div>
|
</el-card>
|
</li>
|
</ul>
|
<el-dialog
|
width="850px"
|
:title="title"
|
:visible.sync="dialogVisible"
|
:close-on-click-modal="false"
|
:append-to-body="false"
|
center
|
>
|
<ul class="images" :class="{'center' : images.length <= 1}">
|
<li v-for="(item,index) in images" :key="index">
|
<span @click="downloadDoc(item)" :title="item.filename">{{item.filename}}</span>
|
<span @click="downloadDoc(item)" class="el-icon-download"></span>
|
</li>
|
</ul>
|
<span slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="dialogVisible = false">关闭</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
downloadHelpDoc,
|
downloadFileTaskInfo
|
} from '@/views/comprehensiveTransaction/serve/public'
|
import {
|
getBoardList,
|
qryHomePageTaskList,
|
mergeRequest,
|
getAttachMentList,
|
getFileTaskInfoList
|
} from '@api/product'
|
export default {
|
data () {
|
return {
|
notice:'',
|
help:'',
|
doneChart:'',
|
doChart:'',
|
title:'',
|
contentType:'',
|
todo:[],
|
helpList:[],
|
taskList:[],
|
tasks:[],
|
helps:[],
|
activeIndex:1,
|
selNoticeIndex:0,
|
selHelpIndex:0,
|
toDoTotal:0,
|
loan:0,
|
afterLoan:0,
|
capital:0,
|
risk:0,
|
overdueCount: 0,
|
product:0,
|
done:[],
|
toDoList:[],
|
doneGroupInfo:[],
|
fileTaskInfo:[],
|
boardList:[],
|
boards:[],
|
images:[],
|
dateOrMonth:['月','日'],
|
noticeBtns:[
|
{
|
label: '全部',
|
value: ''
|
},
|
{
|
label: '系统公告',
|
value: '01'
|
},
|
{
|
label: '业务公告',
|
value: '02'
|
},
|
{
|
label: '数据导出',
|
value: '06'
|
},
|
],
|
helpBtns:[
|
{
|
label: '全部',
|
value: ''
|
},
|
{
|
label: '操作指引',
|
value: '03'
|
},
|
{
|
label: '产品手册',
|
value: '04'
|
},
|
{
|
label: '业务流程',
|
value: '05'
|
},
|
],
|
dialogVisible:false,
|
todoLoading:false,
|
doneLoading:false,
|
showNotice:false,
|
}
|
},
|
created () {
|
// 查询公告信息
|
this.getBoardList('01')
|
// 查询帮助文档
|
this.getBoardList('02')
|
// 查询待办
|
this.qryHomePageTaskList('00')
|
// 查询已办
|
this.qryHomePageTaskList('01','01')
|
},
|
mounted () {
|
window.refreshChart = ()=>{
|
this.doChart.destroy();
|
this.doneChart.destroy();
|
this.todoChart()
|
this.todoneChart()
|
}
|
},
|
methods: {
|
// 刷新首页
|
refresh(){
|
window.location.reload()
|
},
|
// 处理帮助文档按钮事件
|
handleHelpDoc(row,index){
|
const { label,value } = row
|
this.contentType = value
|
this.selHelpIndex = index
|
switch (label) {
|
case '全部':
|
this.helpList = this.helps
|
break;
|
case '操作指引':
|
this.helpDocList('03')
|
break;
|
case '产品手册':
|
this.helpDocList('04')
|
break;
|
case '业务流程':
|
this.helpDocList('05')
|
break;
|
default:
|
break;
|
}
|
},
|
// 处理公告信息按钮事件
|
handleNotice(row,index){
|
const { label,value } = row
|
this.contentType = value
|
this.selNoticeIndex = index
|
switch (label) {
|
case '全部':
|
this.showNotice = false
|
this.boardList = this.boards
|
break;
|
case '系统公告':
|
this.showNotice = false
|
this.viewNotice('02')
|
break;
|
case '业务公告':
|
this.showNotice = false
|
this.viewNotice('01')
|
break;
|
case '数据导出':
|
this.showNotice = true
|
this.getFileTaskInfoList()
|
break;
|
default:
|
break;
|
}
|
},
|
// 切换日月
|
selectDataOrMonth(row,index){
|
this.activeIndex = index
|
if(index === 1){
|
this.qryHomePageTaskList('01','01')
|
}else if(index === 0){
|
this.qryHomePageTaskList('01','02')
|
}
|
},
|
// 待办事项饼图数据处理
|
todoChart(){
|
this.toDoList = [
|
{ name: '贷款管理', percent: parseFloat((this.loan/this.toDoTotal).toFixed(2)) },
|
{ name: '贷后管理', percent: parseFloat((this.afterLoan/this.toDoTotal).toFixed(2)) },
|
{ name: '资金管理', percent: parseFloat((this.capital/this.toDoTotal).toFixed(2)) },
|
{ name: '产品管理', percent: parseFloat((this.product/this.toDoTotal).toFixed(2)) },
|
{ name: '风险管理', percent: parseFloat((this.risk/this.toDoTotal).toFixed(2)) },
|
{ name: '逾期提醒', percent: parseFloat((this.overdueCount/this.toDoTotal).toFixed(2)) }
|
];
|
this.doChart = new G2.Chart({
|
container: 'todoEle',
|
forceFit: true,
|
height: 163,
|
padding: [10, 10, 10, 10],
|
options: {
|
geoms: [
|
{
|
type: 'intervalStack',
|
position: 'percent',
|
color: {
|
field: 'name',
|
colors: ['#903BE8','#FF3060','#0089F6','#20DA7D','#FFCA00','#FF0000'],
|
},
|
style: {
|
lineWidth: 1,
|
stroke: '#fff'
|
},
|
},
|
]
|
},
|
});
|
this.doChart.source(this.toDoList, {
|
percent: {
|
formatter: val => {
|
val = (val * 100).toFixed() + '%';
|
return val;
|
}
|
}
|
});
|
this.doChart.coord('theta', {
|
innerRadius: 0.7,
|
});
|
this.doChart.tooltip({
|
showTitle: false,
|
itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
|
});
|
this.doChart.guide().html({
|
position: [ '50%', '50%' ],
|
html: `<div style="color:#AAAAAA;font-size: 12px;text-align: center;width: 10em;">总待办事项<br><span style="color:#222;font-size:24px;font-weight:600;">${this.toDoTotal}</span></div>`,
|
alignX: 'middle',
|
alignY: 'middle'
|
});
|
this.doChart.render();
|
},
|
todoneChart(){
|
this.doneChart = new G2.Chart({
|
container: 'doneEle',
|
forceFit: true,
|
height: 220,
|
padding: [ 10, 40, 10, 40 ],
|
});
|
this.doneChart.source(this.doneGroupInfo);
|
this.doneChart.scale('handleDate', {
|
range: [ 0, 1 ],
|
tickCount: 10,
|
type: 'timeCat'
|
});
|
this.doneChart.axis('handleDate', false);
|
this.doneChart.axis('数量', {
|
label: {
|
textStyle: {
|
fill: '#aaaaaa',
|
},
|
formatter: text => {
|
return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
|
}
|
}
|
});
|
this.doneChart.tooltip({
|
crosshairs: 'y',
|
share: true
|
});
|
this.doneChart.legend({
|
attachLast: true
|
});
|
this.doneChart.line().position('handleDate*数量').color('#0081F0');
|
this.doneChart.area().position('handleDate*数量').color('#0081F0').opacity(.1);
|
this.doneChart.render();
|
},
|
// 查询首页待办
|
qryHomePageTaskList(dataType,timeSpanType){
|
if(dataType == '00'){
|
this.todoLoading = true
|
Promise.all([
|
qryHomePageTaskList({dataType:dataType,timeSpanType:timeSpanType,sysType:'01'}),
|
qryHomePageTaskList({dataType:dataType,timeSpanType:timeSpanType,sysType:'02'}),
|
qryHomePageTaskList({dataType:dataType,timeSpanType:timeSpanType,sysType:'03'}),
|
qryHomePageTaskList({dataType:dataType,timeSpanType:timeSpanType,sysType:'04'}),
|
qryHomePageTaskList({dataType:dataType,timeSpanType:timeSpanType,sysType:'05'}),
|
qryHomePageTaskList({dataType:dataType,timeSpanType:timeSpanType,sysType:'06'}),
|
]).then(res=>{
|
this.todoLoading = false
|
res.forEach(val => {
|
if(val.code == '00'){
|
this.toDoTotal += val.result.total
|
val.result.dataInfo.forEach(child => {
|
switch (child.sysType) {
|
case '01':
|
// 01代表贷款管理
|
this.loan = JSON.parse(this.loan) + 1
|
break;
|
case '02':
|
// 02代表贷后管理
|
this.afterLoan = JSON.parse(this.afterLoan) + 1
|
break;
|
case '03':
|
// 03代表产品管理
|
this.product = JSON.parse(this.product) + 1
|
break;
|
case '04':
|
// 04代表资金管理
|
this.capital = JSON.parse(this.capital) + 1
|
break;
|
case '05':
|
// 05代表风险管理
|
this.risk = JSON.parse(this.risk) + 1
|
break;
|
case '06':
|
// 06代表逾期提醒
|
this.overdueCount = JSON.parse(this.overdueCount) + 1
|
break;
|
default:
|
break;
|
}
|
this.todo.push(child)
|
});
|
|
}
|
});
|
//排序，逾期提醒在最上方
|
this.todo.sort(this.customSort)
|
if (this.overdueCount > 0) {
|
this.$alert(`您有${this.overdueCount}条逾期提醒待处理`, '逾期提醒', {
|
confirmButtonText: '确定',
|
type: 'warning'
|
}).then(() => {});
|
}
|
|
this.$nextTick(()=>{
|
this.todoChart()
|
})
|
})
|
}else{
|
this.doneLoading = true
|
qryHomePageTaskList({dataType:dataType,timeSpanType:timeSpanType,sysType:'all'}).then(res=>{
|
this.doneLoading = false
|
this.done = res.result.dataInfo
|
this.doneGroupInfo = []
|
this.done.forEach(val => {
|
for (const key in val) {
|
if (key == 'transAmt' && val[key]) {
|
val[key] = this.formatMoney(val[key])
|
}
|
}
|
});
|
res.result.dataGroupInfo.forEach(val => {
|
const obj = {}
|
obj.handleDate = val.handleDate
|
obj['数量'] = val.dataCount
|
this.doneGroupInfo.push(obj)
|
});
|
this.$nextTick(()=>{
|
if(this.doneChart){
|
this.doneChart.destroy()
|
}
|
this.todoneChart()
|
})
|
})
|
}
|
},
|
//待办事项排序
|
customSort(a, b) {
|
if (a.sysType === '06') return -1;
|
if (b.sysType === '06') return 1;
|
return 0;
|
},
|
async getBoardList(sorttype,contenttype){
|
const res = await getBoardList({ sorttype:sorttype, contenttype: contenttype })
|
if(sorttype == '01'){
|
// 01是公告信息
|
this.boards = this.boardList = res.result
|
}else{
|
// 02是帮助文档
|
this.helps = this.helpList = res.result
|
}
|
},
|
// 点击搜索公告
|
searchNotice(){
|
const { notice,contentType } = this
|
if(contentType == '06'){
|
this.taskList = this.tasks.filter(function ({taskdesc}) {
|
return taskdesc.indexOf(notice) != -1
|
})
|
}else{
|
this.boardList = this.boards.filter(function ({boardname,contenttype}) {
|
return boardname.indexOf(notice) != -1 && (!contentType || contentType == contenttype)
|
})
|
}
|
},
|
// 点击搜索帮助文档
|
searchHelp(){
|
const { help,contentType } = this
|
if(help){
|
this.helpList = this.helps.filter(function ({boardname,contenttype}) {
|
return boardname.indexOf(help) != -1 && (!contentType || contentType == contenttype)
|
})
|
}
|
},
|
// 帮助文档按钮点击事件
|
helpDocList(type){
|
this.helpList = this.helps.filter(function ({ contenttype, boardname }) {
|
return contenttype === type
|
})
|
},
|
// 公告信息按钮事件
|
viewNotice(type){
|
this.boardList = this.boards.filter(function ({contenttype}) {
|
return contenttype !== type
|
})
|
},
|
// 查询附件信息
|
async handleBoardAndHelp(row){
|
this.title = row.boardtitle
|
this.$set(row,'isSelect',true)
|
const res = await getAttachMentList({ docno : row.docno })
|
this.images = res.result
|
this.dialogVisible = true
|
},
|
// 下载文件
|
downloadDoc(row){
|
downloadHelpDoc({ docno : row.docno, attachmentno : row.attachmentno })
|
},
|
// 数据导出
|
async getFileTaskInfoList(){
|
const res = await getFileTaskInfoList({ currentPage: 1, pageSize: 100 })
|
this.taskList = this.tasks = res.result.records
|
},
|
// 数据导出下载
|
downloadFileTaskInfo(row){
|
downloadFileTaskInfo({ serialno: row.serialno })
|
},
|
// 点击跳转新窗口
|
handleLink(row){
|
this.$set(row,'isSelect',true)
|
console.log('handleLink',row, window.parent)
|
window.parent.getMenuIdByParent(row.secMenuId,row.menuId)
|
},
|
// 金额格式化
|
formatMoney(value) {
|
if (value) {
|
value =
|
parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(2) + "";
|
if (value == "NaN") return;
|
let l = value
|
.split(".")[0]
|
.split("")
|
.reverse();
|
let r = value.split(".")[1];
|
let t = "";
|
for (let i = 0; i < l.length; i++) {
|
t += l[i] + ((i + 1) % 3 === 0 && i + 1 !== l.length ? "," : "");
|
}
|
return (
|
t
|
.split("")
|
.reverse()
|
.join("") +
|
"." +
|
r
|
);
|
}
|
},
|
}
|
}
|
</script>
|
|
<style lang="stylus">
|
.homePage
|
height 100%
|
min-width 1202px
|
.home
|
height 100%
|
padding 10px 20px 20px 0
|
box-sizing border-box
|
background-color #F9F9F9
|
>li
|
width 50%
|
height 50%
|
position relative
|
min-height 370px
|
padding 0 0 20px 20px
|
box-sizing border-box
|
float left
|
.el-card
|
height 100%
|
border 0
|
box-shadow:0px 2px 8px 0px rgba(0,0,0,0.04);
|
.el-card__header
|
padding 0 20px
|
height 46px
|
line-height 46px
|
border-bottom 1px solid #eee
|
.refresh
|
display inline-block
|
float right
|
line-height 46px
|
font-size 20px
|
color #aaa
|
cursor pointer
|
&:hover
|
color #0081f0
|
.el-input-group
|
width 210px
|
float right
|
margin-top 10px
|
.el-input__inner
|
width 159px
|
height 26px
|
font-size 12px
|
line-height 26px
|
border-radius 14px
|
border-color #eee
|
border-top-right-radius 0
|
border-bottom-right-radius 0
|
.el-input-group__append
|
font-size 12px
|
background-color #0081F0
|
color #ffffff
|
border-color #0081F0
|
border-radius 14px
|
border-top-left-radius 0
|
border-bottom-left-radius 0
|
p
|
display inline-block
|
height 46px
|
float right
|
position relative
|
margin-left 42px
|
&:last-child
|
margin 0
|
&.active
|
>span
|
display inline-block
|
position absolute
|
left 50%
|
transform translateX(-50%)
|
bottom 4px
|
width:12px;
|
height:2px;
|
background-color #0081F0
|
.el-card__body
|
height calc(100% - 46px)
|
overflow hidden
|
padding 20px 0
|
box-sizing border-box
|
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
&::-webkit-scrollbar
|
width: 6px;
|
height 6px;
|
background-color: #fff;
|
&::-webkit-scrollbar-track
|
border-radius: 1em;
|
background-color: transparent;
|
&::-webkit-scrollbar-thumb
|
border-radius: 1em;
|
background:#EEEEEE;
|
.notice,
|
.help
|
height 100%
|
.btn
|
text-align center
|
margin-bottom 20px
|
p
|
.el-button
|
margin-left 20px
|
padding 7px 15px
|
font-weight normal
|
border-color #ccc
|
&.active
|
color #0081F0
|
border-color #0081F0
|
&:first-child
|
margin 0
|
ul
|
height calc(100% - 50px)
|
overflow auto
|
padding 0 20px
|
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
&::-webkit-scrollbar
|
width: 6px;
|
height 6px;
|
background-color: #fff;
|
&::-webkit-scrollbar-track
|
border-radius: 1em;
|
background-color: transparent;
|
&::-webkit-scrollbar-thumb
|
border-radius: 1em;
|
background:#EEEEEE;
|
li
|
padding-left 14px
|
margin-bottom 16px
|
color #999999
|
font-size 14px
|
position relative
|
overflow: hidden;
|
text-overflow:ellipsis;
|
white-space: nowrap;
|
>span
|
&:first-child
|
position absolute
|
top 50%
|
transform translateY(-50%)
|
left 0
|
display inline-block
|
width 4px
|
height 4px
|
background-color #eee
|
span
|
&.active,
|
&.selected
|
cursor pointer
|
&:hover
|
color #0081F0
|
&.active
|
color #333
|
&.selected
|
color #999
|
&.download
|
margin-left 10px
|
cursor pointer
|
color #0081F0
|
&:last-child
|
margin 0
|
.content
|
height 100%
|
padding 0 0 0 20px
|
display flex
|
justify-content space-between
|
>li
|
width 50%
|
height 100%
|
overflow hidden
|
>p
|
font-size 14px
|
color #222
|
font-weight 600
|
.toDoChart
|
height calc(100% - 19px)
|
position relative
|
#doneEle,.chart
|
width 100%
|
position absolute
|
top 50%
|
left 50%
|
transform translate(-50%,-50%)
|
#doneEle
|
height 220px
|
.chart
|
#todoEle
|
height 163px
|
p
|
&:first-child
|
padding-top 56px
|
color #AAAAAA
|
font-size 12px
|
&:last-child
|
color #222222
|
font-size 34px
|
.manage
|
text-align center
|
ul
|
display inline-block
|
li
|
float left
|
p
|
line-height 15px
|
margin-top 14px
|
text-align left
|
span
|
&:first-child
|
display inline-block
|
width 6px
|
height 6px
|
vertical-align middle
|
border-radius 50%
|
&:nth-child(2)
|
font-size 12px
|
color #999999
|
margin-left 7px
|
&:last-child
|
font-size 12px
|
color #555555
|
margin-left 4px
|
&:first-child
|
margin-right 30px
|
p
|
&:first-child
|
margin-top 7px
|
span
|
&:first-child
|
background-color #903BE8
|
&:nth-child(2)
|
span
|
&:first-child
|
background-color #0089F6
|
&:nth-child(3)
|
span
|
&:first-child
|
background-color #FFCA00
|
|
&:nth-child(2)
|
margin-left 30px
|
p
|
&:first-child
|
margin-top 7px
|
span
|
&:first-child
|
background-color #FF3060
|
&:nth-child(2)
|
span
|
&:first-child
|
background-color #20DA7D
|
&:nth-child(3)
|
span
|
&:first-child
|
background-color #FF0000
|
&:nth-child(2)
|
margin-left 30px
|
ul
|
height calc(100% - 37px)
|
overflow auto
|
margin-top 24px
|
padding-right 20px
|
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
&::-webkit-scrollbar
|
width: 6px;
|
height 6px;
|
background-color: #fff;
|
&::-webkit-scrollbar-track
|
border-radius: 1em;
|
background-color: transparent;
|
&::-webkit-scrollbar-thumb
|
border-radius: 1em;
|
background:#EEEEEE;
|
li
|
font-size 14px
|
color #999999
|
margin-bottom 14px
|
overflow: hidden;
|
text-overflow:ellipsis;
|
white-space: nowrap;
|
span
|
&.todoActive
|
color #333
|
cursor pointer
|
&:hover
|
color #0081F0
|
&.active
|
color #333
|
&.selected
|
color #999
|
&:hover
|
color #0081F0
|
.default
|
position relative
|
height 100%
|
img
|
width 338px
|
height 183px
|
position absolute
|
top 50%
|
left 50%
|
transform translate(-50%,-50%)
|
&:nth-child(3),
|
&:last-child
|
padding-bottom 0
|
.el-dialog
|
max-height calc(100% - 180px)
|
margin 0 !important
|
position absolute
|
top 50%
|
left 50%
|
transform translate(-50%,-50%)
|
overflow auto
|
.el-dialog__header
|
padding 40px 20px 10px
|
.el-dialog__title
|
font-weight 600
|
.el-dialog__body
|
padding 30px 40px
|
max-height calc(100% - 30px)
|
overflow auto
|
.images
|
display flex
|
justify-content space-between
|
flex-wrap wrap
|
text-align center
|
li
|
width 367px
|
margin-top 24px
|
text-align left
|
line-height 20px
|
&:first-child,
|
&:nth-child(2)
|
margin-top 0
|
span
|
cursor pointer
|
&:first-child
|
display inline-block
|
max-width 335px
|
overflow: hidden;
|
text-overflow:ellipsis;
|
white-space: nowrap;
|
margin-right 18px
|
line-height 20px
|
vertical-align: bottom;
|
&:hover
|
color #0081F0
|
&:last-child
|
color #0081F0
|
.el-dialog__footer
|
padding-bottom 30px
|
.el-button
|
padding 0
|
width 120px
|
height 30px
|
</style>
|
