elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善数据-人员预警页面

shibei_master
dai 4 years ago
parent
4421416cdb
commit
1228f878fd
4 changed files with 143 additions and 115 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. 44
      src/assets/scss/modules/visual/warning.scss
  2. 2
      src/router/index.js
  3. 5
      src/views/modules/visual/warning/components/screen-table/index.vue
  4. 117
      src/views/modules/visual/warning/index.vue

44
src/assets/scss/modules/visual/warning.scss
View File

@ -2,10 +2,11 @@
box-sizing: border-box; box-sizing: border-box;
// width: 1881px; // width: 1881px;
width: 100%; width: 100%;
height: 914px; // height: 100%;
min-height: 100%;
margin: auto; margin: auto;
color: #fff; color: #fff;
background: url('../../../img/modules/visual/warning-box.png') no-repeat center; // background: url("../../../img/modules/visual/warning-box.png") no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
padding: 45px 21px 35px 24px; padding: 45px 21px 35px 24px;
@ -13,7 +14,8 @@
display: flex; display: flex;
// justify-content: space-around; // justify-content: space-around;
justify-content: flex-start; justify-content: flex-start;
height: 190px; flex-wrap: wrap;
min-height: 190px;
.top-item { .top-item {
box-sizing: border-box; box-sizing: border-box;
@ -21,10 +23,11 @@
height: 190px; height: 190px;
padding: 10px 22px 14px 21px; padding: 10px 22px 14px 21px;
// background: rgba(255, 255, 255, 0); // background: rgba(255, 255, 255, 0);
border: 1px solid #1043C0; border: 1px solid #1043c0;
box-shadow: 0px 83px 150px 0px #002790; box-shadow: 0px 83px 150px 0px #002790;
border-radius: 8px; border-radius: 8px;
margin-right: 15px; margin-right: 15px;
margin-bottom: 15px;
&-img { &-img {
display: flex; display: flex;
@ -34,6 +37,7 @@
width: 78px; width: 78px;
height: 78px; height: 78px;
margin-right: 16px; margin-right: 16px;
margin-bottom: 10px;
} }
.top-item-left { .top-item-left {
@ -47,13 +51,13 @@
span:nth-child(1) { span:nth-child(1) {
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
} }
span:nth-child(2) { span:nth-child(2) {
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
color: #00FFFC; color: #00fffc;
margin-top: 10px; margin-top: 10px;
} }
} }
@ -76,13 +80,14 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 10px 0 29px; padding: 0 10px 0 29px;
cursor: pointer;
&::after { &::after {
display: block; display: block;
content: ''; content: "";
width: 8px; width: 8px;
height: 8px; height: 8px;
background: #F0F3F7; background: #f0f3f7;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 12px; left: 12px;
@ -94,7 +99,7 @@
font-size: 16px; font-size: 16px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
} }
div:nth-child(2) { div:nth-child(2) {
@ -103,7 +108,7 @@
font-size: 20px; font-size: 20px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
.right-icon { .right-icon {
width: 10px; width: 10px;
@ -113,7 +118,7 @@
} }
.num-item-active { .num-item-active {
background: linear-gradient(0deg, #1A5AFD, #26C4FF); background: linear-gradient(0deg, #1a5afd, #26c4ff);
} }
.num-item:nth-child(2) { .num-item:nth-child(2) {
@ -121,17 +126,15 @@
} }
} }
} }
} }
&-bottom { &-bottom {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: calc(100% - 300px); height: calc(100% - 300px);
min-height: 300px;
margin-top: 60px; margin-top: 60px;
.pagination { .pagination {
box-sizing: border-box; box-sizing: border-box;
margin-top: 20px; margin-top: 20px;
@ -141,24 +144,21 @@
justify-content: flex-end; justify-content: flex-end;
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
background: #0266D1; background: #0266d1;
color: #000D3F; color: #000d3f;
} }
/deep/ .el-pagination .el-pager li { /deep/ .el-pagination .el-pager li {
background: #002E74; background: #002e74;
} }
/deep/ .el-pagination .btn-prev { /deep/ .el-pagination .btn-prev {
background: #002E74; background: #002e74;
} }
/deep/ .el-pagination .btn-next { /deep/ .el-pagination .btn-next {
background: #002E74; background: #002e74;
} }
} }
} }
} }

2
src/router/index.js
View File

@ -218,7 +218,7 @@ router.beforeEach((to, from, next) => {
// }else{ // }else{
http http
.get("/oper/access/menu/nav") .get("/gov/access/menu/nav")
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
// Vue.prototype.$message.error(res.msg) // Vue.prototype.$message.error(res.msg)

5
src/views/modules/visual/warning/components/screen-table/index.vue
View File

@ -137,6 +137,7 @@ mounted () {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.warning-table{ .warning-table{
box-sizing: border-box; box-sizing: border-box;
@ -172,8 +173,8 @@ mounted () {
&-tr { &-tr {
width: 100%; width: 100%;
// height: 50px; height: 50px;
height: calc(100% / 10); // height: calc(100% / 10);
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;

117
src/views/modules/visual/warning/index.vue
View File

@ -1,37 +1,44 @@
<template> <template>
<div class="warning-box"> <div class="warning-box">
<cpt-card>
<div class="warning-box-top"> <div class="warning-box-top">
<div class="top-item" v-for="(item, index) in warningList" :key="index"> <div class="top-item" v-for="(item, index) in warningList" :key="index">
<div class="top-item-img"> <div class="top-item-img">
<img <img :src="item.dataIcon" />
:src="item.dataIcon"
alt=""
srcset=""
/>
<div class="top-item-left"> <div class="top-item-left">
<span>{{ item.label }}</span> <span>{{ item.label }}</span>
<span>{{ item.count }}</span> <span>{{ item.count }}</span>
</div> </div>
</div> </div>
<div class="top-item-num"> <div class="top-item-num">
<div class="num-item" :class="{'num-item-active':activeIndex==index&&activeVal=='top'}" @click="onClickList(index,'top')"> <div
<div>5-10人</div> class="num-item"
:class="{
'num-item-active': activeIndex == index && activeLevel == '1',
}"
@click="onClickList(index, '1')"
>
<div>{{ item.level1 }}-{{ item.level2 }}人</div>
<div> <div>
<div>{{ item.levelCount1 }}栋</div> <div>{{ item.levelCount1 }}栋</div>
<img <img
src="../../../../assets/img/modules/visual/right-icon.png" src="../../../../assets/img/modules/visual/right-icon.png"
alt=""
class="right-icon" class="right-icon"
/> />
</div> </div>
</div> </div>
<div class="num-item" :class="{'num-item-active':activeIndex==index&&activeVal=='bottom'}" @click="onClickList(index,'bottom')"> <div
<div>10人以上</div> class="num-item"
:class="{
'num-item-active': activeIndex == index && activeLevel == '2',
}"
@click="onClickList(index, '2')"
>
<div>{{ item.level2 }}人以上</div>
<div> <div>
<div>{{ item.levelCount2 }}栋</div> <div>{{ item.levelCount2 }}栋</div>
<img <img
src="../../../../assets/img/modules/visual/right-icon.png" src="../../../../assets/img/modules/visual/right-icon.png"
alt=""
class="right-icon" class="right-icon"
/> />
</div> </div>
@ -40,7 +47,11 @@
</div> </div>
</div> </div>
<div class="warning-box-bottom"> <div class="warning-box-bottom">
<screen-table :headerList='headerList' :tableData='tableData' :visibleLoading='visibleLoading'></screen-table> <screen-table
:headerList="headerList"
:tableData="tableData"
:visibleLoading="visibleLoading"
></screen-table>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
:current-page="pageNo" :current-page="pageNo"
@ -49,31 +60,36 @@
layout="prev, pager, next" layout="prev, pager, next"
@size-change="pageSizeChangeHandleNew" @size-change="pageSizeChangeHandleNew"
@current-change="pageCurrentChangeHandleNew" @current-change="pageCurrentChangeHandleNew"
:total="total"> :total="total"
>
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
</cpt-card>
</div> </div>
</template> </template>
<script> <script>
import { requestPost } from "@/js/dai/request"; import { requestPost } from "@/js/dai/request";
import screenTable from "./components/screen-table/index"; import screenTable from "./components/screen-table/index";
import cptCard from "@/views/modules/visual/cpts/card";
import nextTick from "dai-js/tools/nextTick";
export default { export default {
name: "warning-box", name: "warning-box",
components: { components: {
screenTable cptCard,
screenTable,
}, },
data() { data() {
return { return {
warningList:[ warningList: [],
],
headerList: [ headerList: [
{ title: '序号' }, { title: "序号" },
{ title: '所属网格'}, { title: "所属网格" },
{ title: '所属小区'}, { title: "所属小区" },
{ title: '楼号'}, { title: "楼号" },
{ title: '姓名' }, { title: "姓名" },
], ],
tableData: [ tableData: [
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'], // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
@ -83,35 +99,45 @@ export default {
pageSize: 10, pageSize: 10,
total: 0, total: 0,
activeIndex: 0, activeIndex: 0,
activeVal:'top' activeLevel: "1",
}; };
}, },
mounted(){ async mounted() {
this.getUserwarnlist() await nextTick(100);
this.getBuildingwarnlist() this.getBuildingwarnlist();
}, },
methods: { methods: {
onClickList(index,val){ onClickList(index, level) {
this.activeIndex = index this.activeIndex = index;
this.activeVal = val this.activeLevel = level;
this.pageNo = 1;
this.getUserwarnlist();
}, },
//具体人员列表 //具体人员列表
async getUserwarnlist() { async getUserwarnlist() {
let tableData =[] const { activeIndex, activeLevel, warningList } = this;
const reqItem = warningList[activeIndex];
let tableData = [];
const url = "/epmetuser/statsresiwarn/userwarnlist"; const url = "/epmetuser/statsresiwarn/userwarnlist";
let params = { let params = {
configId:'432a17da8902c930096236408bd554fc', configId: reqItem.configId,
buildingIdList: ['be19318ac32fd4eb92c9d68cc0575c44'], buildingIdList: reqItem["buildingIdList" + activeLevel],
pageNo:1, pageNo: this.pageNo,
pageSize:10 pageSize: this.pageSize,
}; };
const { data, code, msg } = await requestPost(url, params); const { data, code, msg } = await requestPost(url, params);
if (code === 0) { if (code === 0) {
data.list.forEach((item, index) => { data.list.forEach((item, index) => {
tableData.push([index+1,item.gridName,item.neighborhoodName,item.buildingName,item.residentNames?item.residentNames:"暂无"]) tableData.push([
}) index + 1,
this.tableData = tableData item.gridName,
this.total = data.total item.neighborhoodName,
item.buildingName,
item.residentNames ? item.residentNames : "暂无",
]);
});
this.tableData = tableData;
this.total = data.total;
} else { } else {
} }
}, },
@ -119,24 +145,25 @@ export default {
async getBuildingwarnlist() { async getBuildingwarnlist() {
const url = "/epmetuser/statsresiwarn/buildingwarnlist"; const url = "/epmetuser/statsresiwarn/buildingwarnlist";
let params = { let params = {
agencyId:'9943d28cbd9006de1d6bc4f6e178e55e', agencyId: this.$store.state.user.agencyId,
}; };
const { data, code, msg } = await requestPost(url, params); const { data, code, msg } = await requestPost(url, params);
if (code === 0) { if (code === 0) {
this.warningList = data this.warningList = data;
this.visibleLoading = false this.visibleLoading = false;
this.getUserwarnlist();
} else { } else {
} }
}, },
pageSizeChangeHandleNew(val) { pageSizeChangeHandleNew(val) {
this.pageNo = 1 this.pageNo = 1;
this.pageSize = val this.pageSize = val;
}, },
pageCurrentChangeHandleNew(val) { pageCurrentChangeHandleNew(val) {
this.pageNo = val this.pageNo = val;
this.getUserwarnlist() this.getUserwarnlist();
},
}, },
}
}; };
</script> </script>

Write Preview
Loading…
Cancel
Save