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> |