|
|
@@ -26,19 +26,18 @@
|
|
|
<img src="../assets/images/header.png">
|
|
|
<p class="company_name">中国东信智慧楼宇</p>
|
|
|
</div>
|
|
|
- <div class="demo-basic--circle">
|
|
|
+ <!-- <div class="demo-basic--circle">
|
|
|
<div
|
|
|
class="block"
|
|
|
:style="{
|
|
|
'background-image': 'url(' + dmUser.user.dmUser.faceid + ')',
|
|
|
- 'background-size': 'contain',
|
|
|
+
|
|
|
'background-position': 'center',
|
|
|
border: '1px solid #ebebeb',
|
|
|
'background-color': '#f1f1f1',
|
|
|
}"
|
|
|
style="background-repeat: no-repeat"
|
|
|
>
|
|
|
- <!-- <img :src="dmUser.user.dmUser.faceid" alt="">-->
|
|
|
</div>
|
|
|
<div class="userInfo">
|
|
|
<div class="name">
|
|
|
@@ -47,28 +46,28 @@
|
|
|
<el-divider />
|
|
|
<div class="departmeny">
|
|
|
<div class="icon_right">
|
|
|
- <img src="../assets/images/avatar.png" alt="" srcset="">
|
|
|
+ <img src="../assets/images/avatar.png" alt="" srcset="" />
|
|
|
<div class="world">
|
|
|
<p>部门:</p>
|
|
|
<p>{{ dmUser.user.dept.name }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="icon_right">
|
|
|
- <img src="../assets/images/phone.png" alt="" srcset="">
|
|
|
+ <img src="../assets/images/phone.png" alt="" srcset="" />
|
|
|
<div class="world">
|
|
|
<p>手机:</p>
|
|
|
<p>{{ dmUser.user.phone }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="icon_right">
|
|
|
- <img src="../assets/images/money.png" alt="" srcset="">
|
|
|
+ <img src="../assets/images/money.png" alt="" srcset="" />
|
|
|
<div class="world">
|
|
|
<p>余额</p>
|
|
|
<p>{{ balance }}元</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="icon_right">
|
|
|
- <img src="../assets/images/che.png" alt="" srcset="">
|
|
|
+ <img src="../assets/images/che.png" alt="" srcset="" />
|
|
|
<div class="world">
|
|
|
<p>已录入车牌</p>
|
|
|
<p>{{ plate }}</p>
|
|
|
@@ -77,64 +76,103 @@
|
|
|
</div>
|
|
|
<div class="icon" />
|
|
|
</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="demo-basic--circle">
|
|
|
+ <div
|
|
|
+ class="block"
|
|
|
+ :style="{
|
|
|
+ 'background-image': 'url(' + dmUser.user.dmUser.faceid + ')',
|
|
|
+
|
|
|
+ 'background-position': 'center',
|
|
|
+ border: '1px solid #ebebeb',
|
|
|
+ 'background-color': '#f1f1f1'
|
|
|
+ }"
|
|
|
+ style="background-repeat: no-repeat"
|
|
|
+ />
|
|
|
+ <div class="infomation">
|
|
|
+ <div class="name">
|
|
|
+ <span>{{ dmUser.user.nickName }}</span>
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
+ <div class="departmeny">
|
|
|
+ <div class="icon_right">
|
|
|
+ <p>
|
|
|
+ 部门:
|
|
|
+ <span>{{ dmUser.user.dept.name }}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="icon_right">
|
|
|
+ <p>
|
|
|
+ 手机:
|
|
|
+ <span>{{ dmUser.user.phone }}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="icon_right">
|
|
|
+ <p>
|
|
|
+ 余额：
|
|
|
+ <span>{{ balance }}元</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="icon_right">
|
|
|
+ <p>
|
|
|
+ 已录入车牌：
|
|
|
+ <span>{{ plate }}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="mt_20 table_box">
|
|
|
<div class="each_card_box">
|
|
|
- <el-card class="box-card">
|
|
|
- <div class="clearfix">
|
|
|
- <h3 class="title_class">最近通行记录</h3>
|
|
|
- </div>
|
|
|
- <el-table
|
|
|
- :data="currentTableData"
|
|
|
- :header-cell-style="rowClass"
|
|
|
- style="width: 100%; margin-top: 12px"
|
|
|
- height="300"
|
|
|
- >
|
|
|
- <el-table-column prop="NO" label="序号" width="50" />
|
|
|
- <el-table-column prop="dmRoomDevice.name" label="通行地点" />
|
|
|
- <el-table-column prop="accessTime" label="时间" />
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
+ <div class="clearfix">
|
|
|
+ <h3 class="title_class">最近通行记录</h3>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="currentTableData"
|
|
|
+ :header-cell-style="rowClass"
|
|
|
+ style="width: 100%; margin-top: 12px"
|
|
|
+ height="260"
|
|
|
+ >
|
|
|
+ <el-table-column prop="NO" label="序号" width="50" />
|
|
|
+ <el-table-column prop="dmRoomDevice.name" label="通行地点" />
|
|
|
+ <el-table-column prop="accessTime" label="时间" />
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
<div class="each_card_box">
|
|
|
- <el-card class="box-card">
|
|
|
- <div class="clearfix">
|
|
|
- <h3 class="title_class">最近消费记录</h3>
|
|
|
- </div>
|
|
|
- <el-table
|
|
|
- :data="consumptionTableData"
|
|
|
- :header-cell-style="rowClass"
|
|
|
- style="width: 100%; margin-top: 12px"
|
|
|
- height="300"
|
|
|
- >
|
|
|
- <el-table-column prop="NO" label="序号" width="50" />
|
|
|
- <el-table-column prop="termName" label="消费设备" width="80" />
|
|
|
- <el-table-column prop="money" label="金额" width="60" />
|
|
|
- <el-table-column prop="createDate" label="时间" />
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
+ <div class="clearfix">
|
|
|
+ <h3 class="title_class">最近消费记录</h3>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="consumptionTableData"
|
|
|
+ :header-cell-style="rowClass"
|
|
|
+ style="width: 100%; margin-top: 12px"
|
|
|
+ height="260"
|
|
|
+ >
|
|
|
+ <el-table-column prop="NO" label="序号" width="50" />
|
|
|
+ <el-table-column prop="termName" label="消费设备" width="80" />
|
|
|
+ <el-table-column prop="money" label="金额" width="60" />
|
|
|
+ <el-table-column prop="createDate" label="时间" />
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
<div class="each_card_box">
|
|
|
- <el-card class="box-card">
|
|
|
- <div class="clearfix">
|
|
|
- <h3 class="title_class">最近访客预约记录</h3>
|
|
|
- </div>
|
|
|
- <el-table
|
|
|
- :data="visitorTableData"
|
|
|
- :header-cell-style="rowClass"
|
|
|
- style="width: 100%; margin-top: 12px"
|
|
|
- height="300"
|
|
|
- >
|
|
|
- <el-table-column prop="NO" label="序号" width="50" />
|
|
|
- <el-table-column prop="visitor_name" label="访客名称" />
|
|
|
- <el-table-column prop="start_time" label="到访时间" />
|
|
|
- </el-table>
|
|
|
- </el-card>
|
|
|
+ <div class="clearfix">
|
|
|
+ <h3 class="title_class">最近访客预约记录</h3>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="visitorTableData"
|
|
|
+ :header-cell-style="rowClass"
|
|
|
+ style="width: 100%; margin-top: 12px"
|
|
|
+ height="260"
|
|
|
+ >
|
|
|
+ <el-table-column prop="NO" label="序号" width="50" />
|
|
|
+ <el-table-column prop="visitor_name" label="访客名称" />
|
|
|
+ <el-table-column prop="start_time" label="到访时间" />
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="">
|
|
|
- <el-card class="box-card" style="margin-top: 10px">
|
|
|
+ <el-card class="box-card" style="margin-top: 16px">
|
|
|
<div slot="header" class="clearfix">
|
|
|
<h3 class="title_class">快捷功能入口</h3>
|
|
|
</div>
|
|
|
@@ -153,7 +191,7 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<!-- -->
|
|
|
- <el-col :span="24" class="mt_20 system">
|
|
|
+ <el-col :span="24" class=" system">
|
|
|
<el-card class="box-card">
|
|
|
<div slot="header" class="clearfix">
|
|
|
<h3 class="title_class">系统功能入口</h3>
|
|
|
@@ -251,7 +289,7 @@ export default {
|
|
|
},
|
|
|
getUser(token) {
|
|
|
if (!localStorage.getItem('dmUser')) {
|
|
|
- ssoGetUser(token).then((res) => {
|
|
|
+ ssoGetUser(token).then(res => {
|
|
|
// console.log(111)
|
|
|
localStorage.setItem('dmUser', JSON.stringify(res.data.data))
|
|
|
this.dmUser = res.data.data
|
|
|
@@ -274,10 +312,10 @@ export default {
|
|
|
for (let i = 0; i < this.dmUser.user.roles.length; i++) {
|
|
|
roles.push(this.dmUser.user.roles[i].id)
|
|
|
}
|
|
|
- crudDmSystem.queryByRoleId(roles, 0).then((res) => {
|
|
|
+ crudDmSystem.queryByRoleId(roles, 0).then(res => {
|
|
|
this.systemList = res
|
|
|
})
|
|
|
- crudDmSystem.queryByRoleId(roles, 1).then((res) => {
|
|
|
+ crudDmSystem.queryByRoleId(roles, 1).then(res => {
|
|
|
this.systemListOne = res
|
|
|
})
|
|
|
})
|
|
|
@@ -313,7 +351,7 @@ export default {
|
|
|
'https://smartpark.caih.com/dxapi/dxtop/staff/cardBalance?card=' +
|
|
|
card
|
|
|
)
|
|
|
- .then((res) => {
|
|
|
+ .then(res => {
|
|
|
this.balance = res.data.data
|
|
|
})
|
|
|
},
|
|
|
@@ -331,7 +369,7 @@ export default {
|
|
|
data,
|
|
|
{ headers: { XYTACCESSTOKEN: accToken }}
|
|
|
)
|
|
|
- .then((res) => {
|
|
|
+ .then(res => {
|
|
|
this.plate = res.data.data[0].plateNumber
|
|
|
})
|
|
|
},
|
|
|
@@ -349,7 +387,7 @@ export default {
|
|
|
data,
|
|
|
{ headers: { XYTACCESSTOKEN: accToken }}
|
|
|
)
|
|
|
- .then((res) => {
|
|
|
+ .then(res => {
|
|
|
this.currentTableData = res.data.data.content
|
|
|
this.currentTableData.forEach((element, index) => {
|
|
|
element.NO = index + 1
|
|
|
@@ -370,7 +408,7 @@ export default {
|
|
|
data,
|
|
|
{ headers: { XYTACCESSTOKEN: accToken }}
|
|
|
)
|
|
|
- .then((res) => {
|
|
|
+ .then(res => {
|
|
|
this.consumptionTableData = res.data.data.content
|
|
|
this.consumptionTableData.forEach((element, index) => {
|
|
|
element.NO = index + 1
|
|
|
@@ -389,7 +427,7 @@ export default {
|
|
|
data,
|
|
|
{ headers: { XYTACCESSTOKEN: accToken }}
|
|
|
)
|
|
|
- .then((res) => {
|
|
|
+ .then(res => {
|
|
|
this.visitorTableData = res.data.data
|
|
|
this.visitorTableData.forEach((element, index) => {
|
|
|
element.NO = index + 1
|
|
|
@@ -509,128 +547,161 @@ export default {
|
|
|
.demo-basic--circle {
|
|
|
display: flex;
|
|
|
background-color: #fff;
|
|
|
- padding: 20px;
|
|
|
+ height: 200px;
|
|
|
+ // padding: 20px;
|
|
|
box-sizing: border-box;
|
|
|
+ align-items: flex-end;
|
|
|
|
|
|
.block {
|
|
|
width: 120px;
|
|
|
height: 160px;
|
|
|
- margin-right: 30px;
|
|
|
- // background-size: contain;
|
|
|
- // background-repeat: no-repeat;
|
|
|
- // background-position: center;
|
|
|
- // border: 1px solid #ebebeb;
|
|
|
+ margin: 0 30px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
background-color: #f1f1f1;
|
|
|
img {
|
|
|
width: 120px;
|
|
|
height: 130px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .userInfo {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
+ .infomation {
|
|
|
+ flex: 1;
|
|
|
.name {
|
|
|
- font-family: MicrosoftYaHeiUI;
|
|
|
+ margin-bottom: 12px;
|
|
|
font-size: 18px;
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
- font-weight: 400;
|
|
|
- padding-bottom: 20px;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
-
|
|
|
.departmeny {
|
|
|
- margin-top: 25px;
|
|
|
+ margin-top: 24px;
|
|
|
+ width: 50%;
|
|
|
display: flex;
|
|
|
- font-size: 16px;
|
|
|
-
|
|
|
- p {
|
|
|
- margin-right: 50px;
|
|
|
-
|
|
|
- span {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // .icon_left {
|
|
|
- // display: flex;
|
|
|
- // img {
|
|
|
- // width: 15px;
|
|
|
- // height: 15px;
|
|
|
- // }
|
|
|
- // .world {
|
|
|
- // margin-left: 20px;
|
|
|
- // p:nth-child(2) {
|
|
|
- // margin-top: 8px;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- .icon_right {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- margin-right: 5px;
|
|
|
- padding: 3px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .world {
|
|
|
- // margin-left: 20px;
|
|
|
- font-size: 12px;
|
|
|
- color: rgba(0, 0, 0, 0.65);
|
|
|
+ flex-wrap: wrap;
|
|
|
+ div {
|
|
|
+ width: 50%;
|
|
|
+ p {
|
|
|
+ width: 100%;
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 20px;
|
|
|
font-weight: 400;
|
|
|
-
|
|
|
- p:nth-child(2) {
|
|
|
- margin-top: 8px;
|
|
|
- font-size: 15px;
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 20px;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .icon_right:nth-child(n + 3) {
|
|
|
- img {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- margin-right: 5px;
|
|
|
- padding: 3px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
-
|
|
|
- .world {
|
|
|
- // margin-left: 20px;
|
|
|
- font-size: 12px;
|
|
|
- color: rgba(0, 0, 0, 0.65);
|
|
|
- font-weight: 400;
|
|
|
-
|
|
|
- p:nth-child(2) {
|
|
|
- margin-top: 8px;
|
|
|
- font-size: 15px;
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .icon {
|
|
|
- margin-top: 25px;
|
|
|
- display: flex;
|
|
|
}
|
|
|
}
|
|
|
+ // .userInfo {
|
|
|
+ // width: 100%;
|
|
|
+
|
|
|
+ // .name {
|
|
|
+ // font-family: MicrosoftYaHeiUI;
|
|
|
+ // font-size: 18px;
|
|
|
+ // color: rgba(0, 0, 0, 0.85);
|
|
|
+ // font-weight: 400;
|
|
|
+ // padding-bottom: 20px;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .departmeny {
|
|
|
+ // margin-top: 25px;
|
|
|
+ // display: flex;
|
|
|
+ // font-size: 16px;
|
|
|
+
|
|
|
+ // p {
|
|
|
+ // margin-right: 50px;
|
|
|
+
|
|
|
+ // span {
|
|
|
+ // margin-right: 5px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // .icon_left {
|
|
|
+ // // display: flex;
|
|
|
+ // // img {
|
|
|
+ // // width: 15px;
|
|
|
+ // // height: 15px;
|
|
|
+ // // }
|
|
|
+ // // .world {
|
|
|
+ // // margin-left: 20px;
|
|
|
+ // // p:nth-child(2) {
|
|
|
+ // // margin-top: 8px;
|
|
|
+ // // }
|
|
|
+ // // }
|
|
|
+ // // }
|
|
|
+ // .icon_right {
|
|
|
+ // display: flex;
|
|
|
+
|
|
|
+ // img {
|
|
|
+ // width: 25px;
|
|
|
+ // height: 25px;
|
|
|
+ // margin-right: 5px;
|
|
|
+ // padding: 3px;
|
|
|
+ // border-radius: 50%;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .world {
|
|
|
+ // // margin-left: 20px;
|
|
|
+ // font-size: 12px;
|
|
|
+ // color: rgba(0, 0, 0, 0.65);
|
|
|
+ // font-weight: 400;
|
|
|
+
|
|
|
+ // p:nth-child(2) {
|
|
|
+ // margin-top: 8px;
|
|
|
+ // font-size: 15px;
|
|
|
+ // color: rgba(0, 0, 0, 0.85);
|
|
|
+ // font-weight: 400;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .icon_right:nth-child(n + 3) {
|
|
|
+ // img {
|
|
|
+ // width: 32px;
|
|
|
+ // height: 32px;
|
|
|
+ // margin-right: 5px;
|
|
|
+ // padding: 3px;
|
|
|
+ // border-radius: 50%;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .world {
|
|
|
+ // // margin-left: 20px;
|
|
|
+ // font-size: 12px;
|
|
|
+ // color: rgba(0, 0, 0, 0.65);
|
|
|
+ // font-weight: 400;
|
|
|
+
|
|
|
+ // p:nth-child(2) {
|
|
|
+ // margin-top: 8px;
|
|
|
+ // font-size: 15px;
|
|
|
+ // color: rgba(0, 0, 0, 0.85);
|
|
|
+ // font-weight: 700;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .icon {
|
|
|
+ // margin-top: 25px;
|
|
|
+ // display: flex;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
|
|
|
.table_box {
|
|
|
- background-color: #fff;
|
|
|
display: flex;
|
|
|
- padding: 10px;
|
|
|
+ justify-content: space-between;
|
|
|
+ // padding: 10px;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.each_card_box {
|
|
|
- width: 33.33%;
|
|
|
- padding: 5px;
|
|
|
+ width: 32.5%;
|
|
|
+ padding: 24px;
|
|
|
+ background-color: #fff;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
@@ -669,6 +740,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.system {
|
|
|
+ margin-top: 16px;
|
|
|
.box-card {
|
|
|
margin-top: 5px;
|
|
|
|
|
|
@@ -786,13 +858,15 @@ export default {
|
|
|
}
|
|
|
|
|
|
.title_class {
|
|
|
+ font-family: MicrosoftYaHeiUI-Bold;
|
|
|
font-size: 15px;
|
|
|
color: rgba(0, 0, 0, 0.85);
|
|
|
font-weight: 700;
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
|
|
|
|
.mt_20 {
|
|
|
- margin-top: 10px;
|
|
|
+ margin-top: 35px;
|
|
|
}
|
|
|
|
|
|
.content {
|
da_ji