|
|
@@ -1,103 +1,133 @@
|
|
|
<template>
|
|
|
- <div class="boxswai">
|
|
|
- <div class="boxnei flex flex-d-c">
|
|
|
- <el-menu :default-active="activeIndex"
|
|
|
- class="el-menu-demo"
|
|
|
- mode="horizontal"
|
|
|
- text-color='black'
|
|
|
- active-text-color='#1684FC'
|
|
|
- @select="handleSelect"
|
|
|
- >
|
|
|
- <el-menu-item index="1" v-model="activeIndex">我的待办工单</el-menu-item>
|
|
|
- <el-menu-item index="2" v-model="activeIndex">所有代办工单</el-menu-item>
|
|
|
- </el-menu>
|
|
|
- <div class="information flex1">
|
|
|
- <el-collapse v-show="activeIndex == 1">
|
|
|
- <el-collapse-item
|
|
|
- :name="item.title"
|
|
|
- v-for="(item,key) in collapseData1"
|
|
|
- :key="key"
|
|
|
- >
|
|
|
- <template slot="title">
|
|
|
- <i
|
|
|
- class="el-icon-chat-dot-round"
|
|
|
- style="fontSize:18px;margin-right:10px;"
|
|
|
- > </i>{{item.title}}
|
|
|
- </template>
|
|
|
+ <div class="h-100p">
|
|
|
+ <div class="h-100p flex flex-d-c">
|
|
|
+ <div class="bgc-w border-10 flex1 flex flex-d-c" style="height:0">
|
|
|
+ <div class="active-menus">
|
|
|
+ <div class="active-item" :class="{'active-select':activeIndex == 1}" @click="handleSelect(1)">
|
|
|
+ <img :src="'/img/welIndex/Frame25'+(activeIndex == 1?'4':'7')+'.png'" alt="">
|
|
|
+ <div style="margin-top:5px;">
|
|
|
+ <el-badge :value="0" :hidden="true" class="item">
|
|
|
+ <span class="font-bold">我的代办工单 </span>
|
|
|
+ </el-badge>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="triangle-bottomleft" :class="{'b-b-b-w':activeIndex == 1}" ></div>
|
|
|
+ <div class="active-item" :class="{'active-select':activeIndex == 2}" @click="handleSelect(2)">
|
|
|
+ <img :src="'/img/welIndex/Frame25'+(activeIndex == 2?'6':'5')+'.png'" alt="">
|
|
|
+ <div style="margin-top:5px;">
|
|
|
+ <el-badge :value="0" :hidden="true" class="item">
|
|
|
+ <span class="font-bold">所有代办工单 </span>
|
|
|
+ </el-badge>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="triangle-bottomleft" :class="{'b-b-b-w':activeIndex == 2}"></div>
|
|
|
+ </div>
|
|
|
+ <el-scrollbar class="flex1">
|
|
|
+ <div class="pd-10" v-show="activeIndex == 1">
|
|
|
+ <div v-if="collapseData1.length == 0" class="flex flex-center">
|
|
|
<div>
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- style="color:rgb(65, 80, 88);"
|
|
|
- @click="openPreview(item)"
|
|
|
- >立即处理</el-button>
|
|
|
+ <img src="/img/welIndex/empty.png" alt="">
|
|
|
+ <div class="text-align-c" style="color:#CCD0DE;font-size:14px;">没有找到代办工单~</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="info-item" v-for="(item,key) in collapseData1" :key="key">
|
|
|
+ <div class="flex jc-al-c">
|
|
|
+ <img style="width:14px;height:14px;" src="/img/welIndex/warning.png" alt="">
|
|
|
+ <span class="mg-l-10" style="font-size:14px;">{{item.title}}</span>
|
|
|
</div>
|
|
|
+ <el-dropdown>
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ <el-link icon="el-icon-more" :underline="false" style="transform:rotate(90deg)"></el-link>
|
|
|
+ </span>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item @click.native="openPreview(item)">立即处理</el-dropdown-item>
|
|
|
+ <el-dropdown-item @click.native="ignore(key)">忽略</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ <div v-if="collapseData1.length == 1" style="color:#CCD0DE;">
|
|
|
+ 没有更多数据了~
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pd-10" v-show="activeIndex == 2">
|
|
|
+ <div v-if="collapseData2.length == 0" class="flex flex-center">
|
|
|
<div>
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- @click="ignore(key)"
|
|
|
- v-throttle="3000"
|
|
|
- style="color:rgb(65, 80, 88);"
|
|
|
- >忽略</el-button>
|
|
|
+ <img src="/img/welIndex/empty.png" alt="">
|
|
|
+ <div class="text-align-c" style="color:#CCD0DE;font-size:14px;">没有找到代办工单~</div>
|
|
|
</div>
|
|
|
- </el-collapse-item>
|
|
|
- </el-collapse>
|
|
|
- <el-collapse v-show="activeIndex==2">
|
|
|
- <el-collapse-item
|
|
|
- :name="item.title"
|
|
|
- v-for="(item,key) in collapseData2"
|
|
|
- :key="key"
|
|
|
- >
|
|
|
- <template slot="title">
|
|
|
- <i
|
|
|
- class="el-icon-chat-dot-round"
|
|
|
- style="fontSize:18px;margin-right:10px;"
|
|
|
- > </i>{{item.title}}
|
|
|
- </template>
|
|
|
- <div v-show="item.operation">
|
|
|
- <div>
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- style="color:rgb(65, 80, 88);"
|
|
|
- @click="openPreview(item)"
|
|
|
- >立即处理</el-button>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- v-throttle="3000"
|
|
|
- @click="ignore2(key)"
|
|
|
- style="color:rgb(65, 80, 88);"
|
|
|
- >忽略</el-button>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="info-item" v-for="(item,key) in collapseData2" :key="key">
|
|
|
+ <div class="flex jc-al-c">
|
|
|
+ <img style="width:14px;height:14px;" src="/img/welIndex/warning.png" alt="">
|
|
|
+ <span class="mg-l-10" style="font-size:14px;">{{item.title}}</span>
|
|
|
</div>
|
|
|
- </el-collapse-item>
|
|
|
- </el-collapse>
|
|
|
- </div>
|
|
|
+ <el-dropdown v-if="item.operation">
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ <el-link icon="el-icon-more" :underline="false" style="transform:rotate(90deg)"></el-link>
|
|
|
+ </span>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item @click.native="openPreview(item)">立即处理</el-dropdown-item>
|
|
|
+ <el-dropdown-item @click.native="ignore2(key)">忽略</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ <div v-if="collapseData2.length == 1" style="color:#CCD0DE;">
|
|
|
+ 没有更多数据了~
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <div style="height:500px">
|
|
|
<el-row :gutter="20" class="mg-t-20">
|
|
|
<el-col :span="8">
|
|
|
- <div class="chart-title">证书统计(总计{{pfxAmount}}个)</div>
|
|
|
- <div id="container"></div>
|
|
|
+ <div class="bgc-w pd-10 border-10">
|
|
|
+ <div class="chart-title">
|
|
|
+ <img src="/img/welIndex/Frame001.png" alt="">
|
|
|
+ <span class="mg-t-10">
|
|
|
+ 证书统计
|
|
|
+ <span class="title-tip">(总计{{pfxAmount}}个)</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div id="container"></div>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
- <div class="chart-title">人员账户统计(总计{{personAmount}}位)</div>
|
|
|
- <div id="container2"></div>
|
|
|
+ <div class="bgc-w pd-10 border-10">
|
|
|
+ <div class="chart-title">
|
|
|
+ <img src="/img/welIndex/Frame002.png" alt="">
|
|
|
+ <span class="mg-t-10">
|
|
|
+ 人员账户统计
|
|
|
+ <span class="title-tip">(总计{{personAmount}}个)</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div id="container2"></div>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
- <div class="chart-title" style="margin-left: 5%;">
|
|
|
- <span>维护类型统计汇总</span>
|
|
|
- <el-select v-model="projectId" placeholder="请选择项目" size="small" @change="selectProjectOpinion" style="width:340px">
|
|
|
- <el-option
|
|
|
- v-for="item in projectList"
|
|
|
- :key="item.id"
|
|
|
- :label="item.projectName"
|
|
|
- :value="item.id"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
+ <div class="bgc-w pd-10 border-10">
|
|
|
+ <div class="chart-title jc-sb">
|
|
|
+ <div class="flex">
|
|
|
+ <img src="/img/welIndex/Frame003.png" alt="">
|
|
|
+ <span class="mg-t-10">
|
|
|
+ 维护类型统计汇总
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <el-select v-model="projectId" placeholder="请选择项目" size="small" @change="selectProjectOpinion" style="width:340px;margin-top:6px;" class="index-select">
|
|
|
+ <el-option
|
|
|
+ v-for="item in projectList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.projectName"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div id="container3"></div>
|
|
|
</div>
|
|
|
- <div id="container3"></div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ </div>
|
|
|
|
|
|
+ </div>
|
|
|
<el-dialog
|
|
|
title=""
|
|
|
:visible.sync="imgVisible"
|
|
|
@@ -144,8 +174,6 @@
|
|
|
<el-button type="primary" @click="submissionProgress">确 定</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
-
|
|
|
- </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -180,7 +208,7 @@ export default {
|
|
|
},
|
|
|
pieObj:null,
|
|
|
pfxAmount: 0,
|
|
|
- cancel: true
|
|
|
+ cancel: true,
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -310,7 +338,7 @@ export default {
|
|
|
if(this.collapseData2.length > 0){
|
|
|
let removeIndex = -1;
|
|
|
this.collapseData2.forEach((vo,index) => {
|
|
|
- if(this.collapseData1[key].userOpinionId = vo.userOpinionId){
|
|
|
+ if(this.collapseData1[key].userOpinionId == vo.userOpinionId){
|
|
|
removeIndex = index;
|
|
|
}
|
|
|
});
|
|
|
@@ -325,7 +353,7 @@ export default {
|
|
|
if(this.collapseData1.length > 0){
|
|
|
let removeIndex = -1;
|
|
|
this.collapseData1.forEach((vo,index) => {
|
|
|
- if(this.collapseData2[key].userOpinionId = vo.userOpinionId){
|
|
|
+ if(this.collapseData2[key].userOpinionId == vo.userOpinionId){
|
|
|
removeIndex = index;
|
|
|
}
|
|
|
});
|
|
|
@@ -346,7 +374,11 @@ export default {
|
|
|
seriesField: 'category',
|
|
|
isStack:false,
|
|
|
legend: {
|
|
|
- position: 'bottom',
|
|
|
+ position: 'top-left',
|
|
|
+ offsetX:'12',
|
|
|
+ marker:{
|
|
|
+ symbol:'circle'
|
|
|
+ }
|
|
|
},
|
|
|
autoFit:true,
|
|
|
scrollbar: {
|
|
|
@@ -387,7 +419,11 @@ export default {
|
|
|
],
|
|
|
},
|
|
|
legend: {
|
|
|
- position: 'bottom',
|
|
|
+ position: 'top-left',
|
|
|
+ offsetX:'12',
|
|
|
+ marker:{
|
|
|
+ symbol:'circle'
|
|
|
+ }
|
|
|
},
|
|
|
});
|
|
|
|
|
|
@@ -408,7 +444,11 @@ export default {
|
|
|
},
|
|
|
interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
|
|
|
legend: {
|
|
|
- position: 'bottom',
|
|
|
+ position: 'top-left',
|
|
|
+ offsetX:'12',
|
|
|
+ marker:{
|
|
|
+ symbol:'circle'
|
|
|
+ }
|
|
|
},
|
|
|
});
|
|
|
piePlot.render();
|
|
|
@@ -507,10 +547,15 @@ export default {
|
|
|
}
|
|
|
|
|
|
.chart-title{
|
|
|
- margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
font-weight: 700;
|
|
|
- font-size: 18px;
|
|
|
- color: rgba(119, 40, 245, 0.85);
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1A1A1A;
|
|
|
+}
|
|
|
+
|
|
|
+.title-tip{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #838791;
|
|
|
}
|
|
|
|
|
|
.boxswai{
|
|
|
@@ -518,4 +563,53 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
padding-bottom: 10px;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+.active-menus{
|
|
|
+ height: 62px;
|
|
|
+ display: flex;
|
|
|
+ background-color: #F8F8F8;
|
|
|
+ border-radius: 10px 10px 0 0;
|
|
|
+}
|
|
|
+.active-item{
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.active-select{
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 10px 0 0 0 ;
|
|
|
+}
|
|
|
+
|
|
|
+.triangle-bottomleft {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-bottom: 62px solid #F8F8F8;
|
|
|
+ border-right: 30px solid transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.b-b-b-w{
|
|
|
+ border-bottom-color: #FFFFFF;
|
|
|
+}
|
|
|
+
|
|
|
+.info-item{
|
|
|
+ background-color: #F8FAFF;
|
|
|
+ border: 1px solid #EEEEEE;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #50545E;
|
|
|
+}
|
|
|
+
|
|
|
+.index-select{
|
|
|
+ /deep/.el-input__inner{
|
|
|
+ border: none;
|
|
|
+ background-color: #F7F9FD;
|
|
|
+ border-radius: 64px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
gangyj
