elink-star
/
epmet-work-pc-chengyang
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

12344

feature
是小王呀\24601 1 year ago
parent
fefa09bcae
commit
0a2b2cde1d
2 changed files with 263 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 174
      src/views/modules/shequzhili/analysis/css/index.scss
  2. 189
      src/views/modules/shequzhili/analysis/index.vue

174
src/views/modules/shequzhili/analysis/css/index.scss
View File

@ -95,7 +95,7 @@ border-left: #777 solid 1px;
.item { .item {
width: 282px; width: 282px;
height: 86px; height: 86px;
background: #E6F0FF; background: #f7faff;
border-radius: 6px; border-radius: 6px;
margin: 15px 25px 15px 0; margin: 15px 25px 15px 0;
display: flex; display: flex;
@ -128,12 +128,11 @@ border-left: #777 solid 1px;
.item_row1 { .item_row1 {
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
height: 23px; height: 23px;
.row_left { .row_left {
font-size: 14px; font-size: 18px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #666666; color: #666666;
@ -153,10 +152,11 @@ border-left: #777 solid 1px;
margin-top: 2px; margin-top: 2px;
} }
.text{ .text{
font-size: 20px; font-size: 16px;
font-family: PingFang SC; font-family: PingFang SC;
color: #333333; color: #333333;
margin-right: 5px; padding-left:10px ;
} }
} }
@ -169,7 +169,7 @@ border-left: #777 solid 1px;
height: 23px; height: 23px;
margin-top: 10px; margin-top: 10px;
.row_left { .row_left {
font-size: 14px; font-size: 18px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #666666; color: #666666;
@ -189,10 +189,10 @@ border-left: #777 solid 1px;
margin-top: 2px margin-top: 2px
} }
.text{ .text{
font-size: 18px; font-size: 16px;
font-family: PingFang SC; font-family: PingFang SC;
color: #666666; color: #333333;
margin-right: 5px; padding-left:10px
} }
} }
@ -248,4 +248,160 @@ border-left: #777 solid 1px;
border: 1px solid #6bb9f8; border: 1px solid #6bb9f8;
} }
} }
.item1 {
width: 400px;
height: 86px;
background: #f7faff;
border-radius: 6px;
margin: 15px 25px 15px 0;
display: flex;
position: relative;
.item_category {
width: 100%;
display: flex;
align-items: center;
padding: 8px;
> img {
width: 66px;
height: 66px;
}
.item_content {
margin-left: 5px;
width: 100%;
text-align: left;
display: flex;
flex-direction: column;
justify-content: flex-start;
.item_count {
font-size: 28px;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
.item_row1 {
border-radius: 4px;
display: flex;
align-items: center;
height: 23px;
.row_left {
font-size: 11px;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
text-align: center;
margin-left: 5px;
}
.row_right {
margin: 0px 5px 0 0;
cursor: pointer;
display: flex;
flex-direction: row;
.img{
width: 16px;
height: 16px;
margin-top: 2px;
}
.text{
font-size: 16px;
font-family: PingFang SC;
color: #333333;
padding-left:10px
}
}
}
.item_row2 {
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
height: 23px;
margin-top: 10px;
.row_left {
font-size: 18px;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
text-align: center;
margin-left: 5px;
}
.row_right {
margin: 0px 5px 0 0;
cursor: pointer;
display: flex;
flex-direction: row;
.img{
width: 16px;
height: 16px;
margin-top: 2px
}
.text{
font-size: 16px;
font-family: PingFang SC;
color: #333333;
padding-left:10px
}
}
}
}
> span {
margin-left: 16px;
font-size: 24px;
}
}
.item_add {
cursor: pointer;
font-size: 24px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
display: flex;
align-items: center;
padding: 17px 16px;
> img {
width: 86px;
height: 86px;
}
> span {
font-size: 24px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
margin-left: 16px;
}
}
.icon_circle {
cursor: pointer;
position: absolute;
top: -10px;
right: -10px;
height: 23px;
width: 23px;
background-color: #ffffff;
border-radius: 50%;
border: 1px solid #a5a5a5;
}
.icon_sel {
cursor: pointer;
background-color: #6bb9f8;
border: 1px solid #6bb9f8;
}
}
} }

189
src/views/modules/shequzhili/analysis/index.vue
View File

@ -22,88 +22,85 @@
<div style="display: flex;justify-content: space-between;flex-direction:row;"> <div style="display: flex;justify-content: space-between;flex-direction:row;">
<h1 style="font-size: 24px; font-weight: bold;"> 事件统计 </h1> <h1 style="font-size: 24px; font-weight: bold;"> 事件统计 </h1>
</div> </div>
<div class="dashboard"> <div class="div_room">
<div class="card"> <div class="item">
<div class="card-icon "> <div class="item_category">
<img style="width: 40px;height: 40px;" src="./img/eventSumNum.png"> <img src="@/assets/images/category/perpon.png" alt />
</div> <div class="item_content">
<div class="card-content"> <div class="item_row1">
<p class="card-title">{{analysisList.total}}</p> <div class="row_left">{{analysisList.total}}</div>
<p class="card-text">事件总数</p> </div>
</div> <div class="item_row2">
</div> <div class="row_left">事件总数</div>
<div class="card1"> </div>
<div class="card-icon "> </div>
<img style="width: 40px;height: 40px;" src="./img/eventNum.png"> </div>
</div>
<div class="card-content1"> </div>
<div style="display: flex;flex-direction: column;justify-content: center;"> <div class="item1">
<div style="display: flex;flex-direction: row;"> <div class="item_category">
<p class="card-title">{{analysisList.resolveTotal}}</p> <img src="@/assets/images/category/perpon.png" />
<span class="percentage">{{analysisList.resolveRate}}%</span> <div class="item_content">
</div> <div class="item_row1">
<p class="card-text">已办结事件数</p> <div class="row_left">{{analysisList.resolveTotal}}</div>
</div> <div class="text">{{analysisList.resolveRate}}%</div>
<div style="padding-left: 20px; display: flex;flex-direction: column;justify-content: center;"> </div>
<div style="display: flex;flex-direction: row;"> <div class="item_row2">
<p class="card-title">{{analysisList.unresolveTotal}}</p> <div class="row_left">已办结事件数</div>
<span class="percentage">{{analysisList.unresolveRate}}%</span> </div>
</div> </div>
<p class="card-text">未办结事件数</p> </div>
</div> <div class="item_category">
<div class="item_content">
</div> <div class="item_row1">
</div> <div class="row_left">{{analysisList.unresolveTotal}}</div>
<div class="card"> <div class="text">{{analysisList.resolveRate}}%</div>
<div class="card-icon "> </div>
<img style="width: 40px;height: 40px;" src="./img/perp.png"> <div class="item_row2">
</div> <div class="row_left">未办结事件数</div>
<div class="card-content"> </div>
<p class="card-title">{{analysisList.illegalConnectTotal}} <span class="percentage">{{analysisList.illegalConnectRate}}%</span></p> </div>
<p class="card-text">联系当事人超期事件数</p> </div>
</div>
</div> </div>
<div class="card"> <div class="item">
<div class="card-icon "> <div class="item_category">
<img style="width: 40px;height: 40px;" src="./img/overdue.png"> <img src="@/assets/images/category/perpon.png" alt />
</div> <div class="item_content">
<div class="card-content"> <div class="item_row1">
<p class="card-title">{{analysisList.illegalResolveTotal}} <span class="percentage">{{analysisList.illegalResolveRate}}%</span></p> <div class="row_left">{{analysisList.illegalConnectTotal}}</div>
<p class="card-text">办理超期事件数</p>
</div> <div class="text">{{analysisList.illegalConnectRate}}%</div>
</div>
</div>
<div class="item_row2">
<div class="row_left">联系当事人超期事件数</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item_category">
<img src="@/assets/images/category/perpon.png" alt />
<div class="item_content">
<div class="item_row1">
<div class="row_left">{{analysisList.illegalResolveTotal}}</div>
<div class="text">{{analysisList.illegalResolveRate}}%</div>
</div>
<div class="item_row2">
<div class="row_left">办理超期事件数</div>
</div>
</div>
</div>
</div>
</div> </div>
<div style="display: flex;justify-content: space-between;flex-direction:row;"> <div style="display: flex;justify-content: space-between;flex-direction:row;">
<h1 style="font-size: 24px; font-weight: bold;"> 事件类型统计 </h1> <h1 style="font-size: 24px; font-weight: bold;"> 事件类型统计 </h1>
</div> </div>
<!-- <table >
<thead>
<tr>
<th>一级分类</th>
<th>二级分类</th>
<th>三级分类</th>
<th>四级分类</th>
<th>事件数量</th>
<th>同级占比</th>
</tr>
<tr v-for="item in tableList" :key="item.id" :item="item" :level=1>
<td v-if="level === 1" :rowspan="calculateRowspan(item)">{{ item.categoryName }}</td>
<td v-else></td>
<td v-if="level === 2" :rowspan="calculateRowspan(item)">{{ item.categoryName }}</td>
<td v-else></td>
<td v-if="level === 3" :rowspan="calculateRowspan(item)">{{ item.categoryName }}</td>
<td v-else></td>
<td v-if="level === 4">{{ item.categoryName }}</td>
<td v-if="level === 4">{{ item.eventCount }}</td>
<td v-if="level === 4">{{ item.proportion }}</td>
<td v-else></td>
<td >{{ item.eventCount }}</td>
<td >{{item.proportion}}</td>
</tr>
<TableRow v-for="item in tableList" :key="item.id" :item="item" :level="1" />
</thead>
</table> -->
<el-table <el-table
:data="tableList" :data="tableList"
style="width: 100%;margin-bottom: 20px;" style="width: 100%;margin-bottom: 20px;"
@ -154,7 +151,7 @@
</el-table> </el-table>
<div style="display: flex;justify-content: space-between;flex-direction:row; height:500px"> <div style="display: flex;justify-content: space-between;flex-direction:row; height:500px">
<div style="display: flex;justify-content: space-between;flex-direction:column;"> <div style="display: flex;width: 50%; margin-right: 10px; justify-content: space-between;flex-direction:column;">
<h1 style="font-size: 24px; font-weight: bold;"> 部门科室工单量统计 </h1> <h1 style="font-size: 24px; font-weight: bold;"> 部门科室工单量统计 </h1>
<el-table :data="departmentList" height="250" border class="m-table-item" style="width: 100%"> <el-table :data="departmentList" height="250" border class="m-table-item" style="width: 100%">
<!-- <el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> --> <!-- <el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> -->
@ -169,12 +166,12 @@
<el-table-column prop="totalRate" align="center" label="占比" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="totalRate" align="center" label="占比" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="unresolveRate" align="center" label="未办结数" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="unresolveRate" align="center" label="未办结数" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="illegalConnectRate" align="center" label="联系当事人超期数" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="illegalConnectRate" align="center" label="联系当事人超期数" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="cillegalResolveRateontent" align="center" label="办理超期数" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="illegalResolveTotal" align="center" label="办理超期数" :show-overflow-tooltip="true"></el-table-column>
</el-table> </el-table>
</div> </div>
<div style="display: flex;justify-content: space-between;flex-direction:column;"> <div style="display: flex;margin-right: 10px; justify-content: space-between;flex-direction:column;">
<h1 style="font-size: 24px; font-weight: bold; margin-right: 600px;"> 社区工单量统计 </h1> <h1 style="font-size: 24px; font-weight: bold;"> 社区工单量统计 </h1>
<el-table :data="communityList" height="300" border class="m-table-item" style="width: 100%"> <el-table :data="communityList" height="300" border class="m-table-item" style="width: 100%">
<!-- <el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> --> <!-- <el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> -->
<!-- <el-table-column prop="address" align="center" label="地点" :show-overflow-tooltip="true"></el-table-column> --> <!-- <el-table-column prop="address" align="center" label="地点" :show-overflow-tooltip="true"></el-table-column> -->
@ -188,7 +185,7 @@
<el-table-column prop="totalRate" align="center" label="占比" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="totalRate" align="center" label="占比" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="unresolveRate" align="center" label="未办结数" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="unresolveRate" align="center" label="未办结数" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="illegalConnectRate" align="center" label="联系当事人超期数" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="illegalConnectRate" align="center" label="联系当事人超期数" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="cillegalResolveRateontent" align="center" label="办理超期数" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="illegalResolveTotal" align="center" label="办理超期数" :show-overflow-tooltip="true"></el-table-column>
</el-table> </el-table>
</div> </div>
@ -674,6 +671,7 @@ export default {
mounted() { mounted() {
this.user = this.$store.state.user; this.user = this.$store.state.user;
this.agencyId = this.user.agencyId; this.agencyId = this.user.agencyId;
this.getLastMonthRange()
this.getOrgData(); this.getOrgData();
this.agencyLevel = localStorage.getItem("level", this.orgData.level); this.agencyLevel = localStorage.getItem("level", this.orgData.level);
this.getTableData(); this.getTableData();
@ -979,22 +977,29 @@ export default {
formatDate1(date) { formatDate1(date) {
// 获取年份、月份和日期 // 获取年份、月份和日期
const year = date.getFullYear(); const year = date.getFullYear();
const month = date.getMonth() + 1; // 月份从0开始 const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate(); const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
// 返回格式化的字符串
return `${year}-${month}-${day} 00:00:00`;
}, },
//获取前一个月的日期 //获取前一个月的日期
getLastMonthRange() { getLastMonthRange() {
const now = new Date(); const now = new Date();
const firstDayOfCurrentMonth = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1)); const firstDayOfCurrentMonth = new Date(now.getFullYear(), now.getMonth(), 1);
const lastDayOfLastMonth = new Date(firstDayOfCurrentMonth - 1); const lastDayOfLastMonth = new Date(firstDayOfCurrentMonth - 1);
const firstDayOfLastMonth = new Date(Date.UTC(lastDayOfLastMonth.getUTCFullYear(), lastDayOfLastMonth.getUTCMonth(), 1)); const firstDayOfLastMonth = new Date(lastDayOfLastMonth.getFullYear(), lastDayOfLastMonth.getMonth(), 1);
firstDayOfLastMonth.setUTCHours(0, 0, 0, 0);
lastDayOfLastMonth.setUTCHours(0, 0, 0, 0); firstDayOfLastMonth.setHours(0, 0, 0, 0);
lastDayOfLastMonth.setHours(23, 59, 59, 999);
this.formData.queryDateStart =this.formatDate1(firstDayOfLastMonth), this.formData.queryDateStart =this.formatDate1(firstDayOfLastMonth),
this.formData.queryDateEnd=this.formatDate1(lastDayOfLastMonth) this.formData.queryDateEnd=this.formatDate1(lastDayOfLastMonth)
console.log(this.formData.queryDateEnd);
}, },
//对部门进行统计 //对部门进行统计
async EventCate(){ async EventCate(){

Write Preview
Loading…
Cancel
Save