|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="agentSummary"> | 
|---|
|  |  |  | <div class="circle"> | 
|---|
|  |  |  | <span>总交办单</span> | 
|---|
|  |  |  | <span>{{ responeForm.total }}</span> | 
|---|
|  |  |  | <div>总交办单</div> | 
|---|
|  |  |  | <div>{{ responeForm.total }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="circle"> | 
|---|
|  |  |  | <span>进行中</span> | 
|---|
|  |  |  | <span>{{ responeForm.total }}</span> | 
|---|
|  |  |  | <div>进行中</div> | 
|---|
|  |  |  | <div>{{ responeForm.unComplete }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="circle"> | 
|---|
|  |  |  | <span>已完成</span> | 
|---|
|  |  |  | <span>{{ responeForm.complete }}</span> | 
|---|
|  |  |  | <div>已完成</div> | 
|---|
|  |  |  | <div>{{ responeForm.complete }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="circle"> | 
|---|
|  |  |  | <span>逾期</span> | 
|---|
|  |  |  | <span>{{ responeForm.overdue }}</span> | 
|---|
|  |  |  | <div>逾期</div> | 
|---|
|  |  |  | <div>{{ responeForm.overdue }}</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="overviewAndDetails"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <el-table | 
|---|
|  |  |  | :data="tableData" | 
|---|
|  |  |  | border | 
|---|
|  |  |  | max-height=" 400px" | 
|---|
|  |  |  | max-height="400" | 
|---|
|  |  |  | style="width: 100%" | 
|---|
|  |  |  | :header-cell-style="{ | 
|---|
|  |  |  | background: '#99D4FF', color: '#101111', fontSize: '16px' | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }).then((res) => { | 
|---|
|  |  |  | if (res.code === 0) { | 
|---|
|  |  |  | this.chartData = [] | 
|---|
|  |  |  | this.chartData = this.cylindricalityData | 
|---|
|  |  |  | this.chartData = res.data.polluteType | 
|---|
|  |  |  | this.cylindricalityData = res.data.escalationType | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | 
|---|
|  |  |  | $bgcolorlist: $red $orange $yellow $green; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .main { | 
|---|
|  |  |  | /deep/ .el-table__row{ | 
|---|
|  |  |  | font-size: 18px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | background: #bbbbbb; | 
|---|
|  |  |  | min-height: 800px; | 
|---|
|  |  |  | padding: 15px 10px; | 
|---|
|  |  |  | 
|---|
|  |  |  | margin-top: 20px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | @for $i from 1 to length($bgcolorlist) + 1 { | 
|---|
|  |  |  | div:nth-child(#{$i}) { | 
|---|
|  |  |  | .circle:nth-child(#{$i}) { | 
|---|
|  |  |  | background-repeat: no-repeat; | 
|---|
|  |  |  | background-size: cover; | 
|---|
|  |  |  | background-position: center center; | 
|---|
|  |  |  | 
|---|
|  |  |  | width: 200px; | 
|---|
|  |  |  | height: 90px; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | padding-top: 20px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | span { | 
|---|
|  |  |  | margin: 10px 20px; | 
|---|
|  |  |  | display: block; | 
|---|
|  |  |  | color: rgba(255, 255, 255, 1); | 
|---|
|  |  |  | font-size: 20px; | 
|---|
|  |  |  | font-weight: 700; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | color: rgba(255, 255, 255, 1); | 
|---|
|  |  |  | font-size: 20px; | 
|---|
|  |  |  | font-weight: 700; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | flex-wrap: wrap; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|