407 lines
10 KiB
Vue
407 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<div class="servicePlatform flex">
|
|||
|
|
<div class="left">
|
|||
|
|
<div class="top whiteBlock">
|
|||
|
|
<img src="@/assets/images/servicePlatform/bg1.png" class="backg_top" />
|
|||
|
|
<div class="title flex2">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/servicePlatform/title_icon.jpg"
|
|||
|
|
class="title_icon"
|
|||
|
|
/>
|
|||
|
|
<span>审批</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data_wrap">
|
|||
|
|
<el-table
|
|||
|
|
:data="tableData"
|
|||
|
|
stripe
|
|||
|
|
style="width: 100%"
|
|||
|
|
:show-header="false"
|
|||
|
|
>
|
|||
|
|
<el-table-column prop="date" label="名称" width="180">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div>物业名称：鹏兴一期</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="name" label="时间" width="180">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div>时间：2021/2/1</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="address" label="操作">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button type="primary" size="small" plain round
|
|||
|
|
>详情</el-button
|
|||
|
|
>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bottom whiteBlock">
|
|||
|
|
<img src="@/assets/images/servicePlatform/bg2.png" class="backg_top" />
|
|||
|
|
<div class="flex2 checkedBtn">
|
|||
|
|
<div :class="checkedIndex == 1 ? 'title' : 'title2'" @click="checkedBtn(1)"
|
|||
|
|
>合同到期预警</div
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
style="margin: 0 30px"
|
|||
|
|
:class="checkedIndex == 2 ? 'title' : 'title2'" @click="checkedBtn(2)"
|
|||
|
|
>年检到期预警</div
|
|||
|
|
>
|
|||
|
|
<div :class="checkedIndex == 3 ? 'title' : 'title2'" @click="checkedBtn(3)">维保到期</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="data_wrap">
|
|||
|
|
<el-table
|
|||
|
|
:data="tableData"
|
|||
|
|
stripe
|
|||
|
|
style="width: 100%"
|
|||
|
|
:show-header="false"
|
|||
|
|
>
|
|||
|
|
<el-table-column prop="date" label="名称" width="190">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div>物业：玉雅居</div>
|
|||
|
|
<div>上次年检时间：2020-01-10</div>
|
|||
|
|
<div>下次年检时间：2021-01-09</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="name" label="时间" width="140">>
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div>电梯名称：1号电梯</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="address" label="操作">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div class="customBtn">
|
|||
|
|
<div class="text">年检逾期未办</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="top whiteBlock">
|
|||
|
|
<div class="map_title">
|
|||
|
|
<img src="@/assets/images/servicePlatform/map_bg.png" />
|
|||
|
|
<div>项目分布图</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="map" style="width: 100%; height: 100%"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bottom whiteBlock">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/servicePlatform/bg3.png"
|
|||
|
|
class="backg_bottom"
|
|||
|
|
style="right: -4px"
|
|||
|
|
/>
|
|||
|
|
<div class="title flex2">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/servicePlatform/title_icon.jpg"
|
|||
|
|
class="title_icon"
|
|||
|
|
/>
|
|||
|
|
<span>故障预警</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data_wrap">
|
|||
|
|
<el-table
|
|||
|
|
:data="tableData"
|
|||
|
|
stripe
|
|||
|
|
style="width: 100%"
|
|||
|
|
:show-header="false"
|
|||
|
|
>
|
|||
|
|
<el-table-column prop="date" label="名称" width="180">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div>电梯名称：1号电梯</div>
|
|||
|
|
<div>上次年检时间：2021/2/2</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="name" label="时间" width="180">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div>下次年检时间：2022/2/1</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="address" label="操作">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div class="customBtn2">
|
|||
|
|
<div class="text">未处理</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
<div class="top whiteBlock">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/servicePlatform/bg5.png"
|
|||
|
|
class="backg_bottom"
|
|||
|
|
/>
|
|||
|
|
<div class="title flex2">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/servicePlatform/title_icon.jpg"
|
|||
|
|
class="title_icon"
|
|||
|
|
/>
|
|||
|
|
<span>安全运行时间</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data_wrap flex3">
|
|||
|
|
<div class="flex2" style="margin: 50px 0 50px 20px">
|
|||
|
|
<img src="@/assets/images/servicePlatform/icon1.png" />
|
|||
|
|
<div class="safe_wrap">
|
|||
|
|
安全运行：
|
|||
|
|
<div class="time">100天</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex2" style="margin: 0 0 0 20px">
|
|||
|
|
<img src="@/assets/images/servicePlatform/icon2.png" />
|
|||
|
|
<div class="safe_wrap">
|
|||
|
|
设备情况：
|
|||
|
|
<div class="time2">200/200</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bottom whiteBlock">
|
|||
|
|
<img src="@/assets/images/servicePlatform/bg4.png" class="backg_top" />
|
|||
|
|
<div class="title flex2">
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/servicePlatform/title_icon.jpg"
|
|||
|
|
class="title_icon"
|
|||
|
|
/>
|
|||
|
|
<span>通知公告</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="data_wrap">
|
|||
|
|
<el-table
|
|||
|
|
:data="tableData"
|
|||
|
|
stripe
|
|||
|
|
style="width: 100%"
|
|||
|
|
:show-header="false"
|
|||
|
|
>
|
|||
|
|
<el-table-column prop="date" label="名称">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div class="inform_title">关于进一步加强对物业管理的研究</div>
|
|||
|
|
<div class="inform_time">日期：2121/2/1</div>
|
|||
|
|
<div>
|
|||
|
|
由于小区管网维修，本小区将在***年**月**日，**停水，请各位业主及住房提前做好储水储备，由此给您带来不便，敬请谅解，谢谢合作！
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
mapObj: null,
|
|||
|
|
tableData: [],
|
|||
|
|
checkedIndex: 1,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.initMap();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initMap() {
|
|||
|
|
//地图加载
|
|||
|
|
this.mapObj = new AMap.Map("map", {
|
|||
|
|
resizeEnable: true,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
checkedBtn(index){
|
|||
|
|
this.checkedIndex = index
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.flex {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
.flex2 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.flex3 {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.servicePlatform {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.left {
|
|||
|
|
width: 28%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.top {
|
|||
|
|
height: 50%;
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 24px 30px;
|
|||
|
|
position: relative;
|
|||
|
|
box-shadow: 1px 3px 12px 0px rgba(29, 77, 196, 0.15);
|
|||
|
|
}
|
|||
|
|
.bottom {
|
|||
|
|
height: calc(50% - 15px);
|
|||
|
|
width: 100%;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 24px 30px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
position: relative;
|
|||
|
|
box-shadow: 1px 3px 12px 0px rgba(29, 77, 196, 0.15);
|
|||
|
|
}
|
|||
|
|
.content {
|
|||
|
|
width: 44%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0 15px;
|
|||
|
|
.top {
|
|||
|
|
height: 58%;
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
padding: 0;
|
|||
|
|
box-shadow: none;
|
|||
|
|
}
|
|||
|
|
.bottom {
|
|||
|
|
height: calc(42% - 15px);
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
#map {
|
|||
|
|
border-radius: 16px;
|
|||
|
|
}
|
|||
|
|
.map_title {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
width: 100%;
|
|||
|
|
z-index: 1111;
|
|||
|
|
img {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
div {
|
|||
|
|
width: 100%;
|
|||
|
|
position: absolute;
|
|||
|
|
text-align: center;
|
|||
|
|
top: 0;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #5181f6;
|
|||
|
|
line-height: 41px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.right {
|
|||
|
|
width: 28%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #5181f6;
|
|||
|
|
line-height: 16px;
|
|||
|
|
z-index: 1111;
|
|||
|
|
}
|
|||
|
|
.title2 {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #262d47;
|
|||
|
|
line-height: 16px;
|
|||
|
|
z-index: 1111;
|
|||
|
|
}
|
|||
|
|
.checkedBtn{
|
|||
|
|
line-height: 30px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.title_icon {
|
|||
|
|
width: 23px;
|
|||
|
|
height: 20px;
|
|||
|
|
}
|
|||
|
|
.backg_top {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
z-index: 1;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.backg_bottom {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
right: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.customBtn {
|
|||
|
|
padding: 2px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: 2px solid #ff9595;
|
|||
|
|
width: 100px;
|
|||
|
|
.text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
background: #ff9595;
|
|||
|
|
color: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.customBtn2 {
|
|||
|
|
padding: 2px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: 2px solid #ff8033;
|
|||
|
|
width: 100px;
|
|||
|
|
.text {
|
|||
|
|
font-size: 12px;
|
|||
|
|
background: #ff8033;
|
|||
|
|
color: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.safe_wrap {
|
|||
|
|
margin-left: 20px;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #262d47;
|
|||
|
|
line-height: 16px;
|
|||
|
|
.time {
|
|||
|
|
font-size: 38px;
|
|||
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #5181f6;
|
|||
|
|
line-height: 38px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
.time2 {
|
|||
|
|
font-size: 38px;
|
|||
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #9984f8;
|
|||
|
|
line-height: 38px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.inform_title {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #323b5d;
|
|||
|
|
line-height: 16px;
|
|||
|
|
}
|
|||
|
|
.inform_time {
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-family: PingFang-SC-Medium, PingFang-SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #323b5d;
|
|||
|
|
line-height: 16px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|