9 changed files with 542 additions and 339 deletions
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<div class="enjoy-service"> |
|||
<div class="enjoy-service-item" v-for="(item, index) in data"> |
|||
<div class="num">+{{ item.classificationNum }}</div> |
|||
<div class="info"> |
|||
<div class="title">{{ item.classification }}</div> |
|||
<div class="time">{{ item.recordTime }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
data: [], |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
this.getData(); |
|||
}, |
|||
props: { |
|||
resiId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
getData() { |
|||
this.data = []; |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/recorHistory") |
|||
.then(({ data: res }) => { |
|||
if (res.code == 0) { |
|||
this.data = res.data; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.enjoy-service { |
|||
padding-left: 26px; |
|||
margin-top: 12px; |
|||
height: 100%; |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.enjoy-service-item { |
|||
color: #333333; |
|||
display: flex; |
|||
padding: 14px 16px 14px; |
|||
margin-bottom: 8px; |
|||
background: #fff; |
|||
|
|||
&:hover { |
|||
background: #f5f7fa !important; |
|||
color: #0056D6 !important; |
|||
|
|||
*, |
|||
*::before, |
|||
*::after { |
|||
// 这将会选择所有子元素和伪元素 |
|||
color: #0056D6 !important; |
|||
} |
|||
} |
|||
|
|||
.num { |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
line-height: 22px; |
|||
color: #000000; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.info { |
|||
font-size: 14px; |
|||
margin-left: 40px; |
|||
|
|||
.title { |
|||
font-weight: 500; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.time { |
|||
font-weight: 400; |
|||
color: #000000; |
|||
opacity: 0.65; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,26 @@ |
|||
<!-- 房屋模块用 --> |
|||
<template> |
|||
<div class=''> |
|||
|
|||
</div> |
|||
</template> |
|||
<!-- --> |
|||
<script> |
|||
export default{ |
|||
data(){ |
|||
return{}; |
|||
}, |
|||
//创建前 |
|||
created(){}, |
|||
//方法 |
|||
methods:{}, |
|||
//子组件注册 |
|||
components:{}, |
|||
//计算 |
|||
computed:{}, |
|||
//监听 |
|||
watch:{}, |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
</style> |
|||
@ -0,0 +1,139 @@ |
|||
<template> |
|||
<div class="cnt-right"> |
|||
<div class="list"> |
|||
<div class="item f-hflex" :key="index" v-for="(item, index) in list"> |
|||
<el-row type="flex" class="row"> |
|||
<el-col :span="12" align="left">{{item.classification}}</el-col> |
|||
<el-col :span="12" align="right">{{item.classificationNum || 0}}</el-col> |
|||
</el-row> |
|||
<div class="item-progress"> |
|||
<b :style="{ |
|||
width: item.per + '%', |
|||
}"></b> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
//数据 |
|||
data() { |
|||
return { |
|||
list: [], |
|||
}; |
|||
}, |
|||
//创建前 |
|||
created() { |
|||
this.getData(); |
|||
}, |
|||
props: { |
|||
resiId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
//方法 |
|||
methods: { |
|||
getData() { |
|||
this.$http |
|||
.get("/actual/base/peopleRoomOverview/serviceNumber?resid=" + this.resiId) |
|||
.then(({ data: res }) => { |
|||
// res.data = [ |
|||
// { |
|||
// "classification": "服务找人", |
|||
// "classificationNum": '12' |
|||
// }, |
|||
// { |
|||
// "classification": "温暖找人", |
|||
// "classificationNum": '15' |
|||
// }, |
|||
// { |
|||
// "classification": "技能找人", |
|||
// "classificationNum": '20' |
|||
// }, |
|||
// { |
|||
// "classification": "岗位找人", |
|||
// "classificationNum": '40' |
|||
// } |
|||
// ] |
|||
let total = res.data.reduce((sum, item) => sum + Number(item.classificationNum), 0); |
|||
res.data = res.data.map(item => ({ |
|||
...item, |
|||
per: (Number(item.classificationNum) / total * 100).toFixed(2) // 保留两位小数 |
|||
})); |
|||
this.list = res.data |
|||
console.log( res.data); |
|||
|
|||
}); |
|||
}, |
|||
}, |
|||
//子组件注册 |
|||
components: {}, |
|||
//计算 |
|||
computed: {}, |
|||
//监听 |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
|
|||
.cnt-right { |
|||
.list { |
|||
.item { |
|||
margin-top: 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: rgba(44, 53, 66, 0.85); |
|||
line-height: 24px; |
|||
cursor: pointer; |
|||
.row{ |
|||
width: 100%; |
|||
margin: 0 0 10px; |
|||
padding: 0 10px 0 0; |
|||
} |
|||
.item-name { |
|||
margin-left: 5px; |
|||
width: 80px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.item-div { |
|||
width: 1px; |
|||
height: 12px; |
|||
background: #d8d8d8; |
|||
border-radius: 1px; |
|||
} |
|||
|
|||
.item-count { |
|||
width: 90px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.item-per { |
|||
min-width: 70px; |
|||
} |
|||
|
|||
.item-progress { |
|||
margin-right: 15px; |
|||
width: 100%; |
|||
height: 24px; |
|||
background: #e6f0ff; |
|||
border-radius: 1px; |
|||
overflow: hidden; |
|||
|
|||
b { |
|||
display: block; |
|||
height: 24px; |
|||
background: #7ba6e6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue