<template>
|
<GlobalWindow
|
title="楼宇详情"
|
:showConfirm="false"
|
:visible.sync="visible"
|
width="800px">
|
<div class="right">
|
<div class="right_head">项目名称</div>
|
<div class="right_cate">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="房源信息" name="houseinfo">
|
<div class="xm">
|
<el-card style="margin-top: 20px;">
|
<div slot="header" class="clearfix">
|
<span>房源信息</span>
|
</div>
|
<div class="xm_info">
|
<div class="xm_info_row" style="width: 25%;">
|
<span>所属项目</span>
|
<span>XXXXXXXXXX</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>楼宇</span>
|
<span>综合楼</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>楼层</span>
|
<span>1</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>房号</span>
|
<span>101活动室</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>房间编号</span>
|
<span>101</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>是否招商</span>
|
<span>否</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>建筑面积</span>
|
<span>50㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>计租面积</span>
|
<span>50㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>计费面积</span>
|
<span>45㎡</span>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="租客合同" name="project">
|
<div class="xm">
|
<el-card style="margin-top: 20px;">
|
<div slot="header" class="clearfix">
|
<span>当前在租合同</span>
|
</div>
|
<div class="xm_table">
|
<el-input v-model="input" style="width: 300px; margin-bottom: 15px;" placeholder="请输入合同编号"></el-input>
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="合同编号">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="客户名称">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="开始日期">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="结束日期">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="租赁单价">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="租赁面积（㎡）">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="签订日">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="合同来源">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="合同状态">
|
</el-table-column>
|
</el-table>
|
<div class="xm_table_f">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageTotal"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="工单记录" name="second">
|
<div class="xm">
|
<el-card>
|
<div class="xm_one1">
|
<div class="xm_one_row">
|
<span>待指派数量</span>
|
<span>15</span>
|
</div>
|
<div class="xm_one_row">
|
<span>待处理数量</span>
|
<span>15</span>
|
</div>
|
<div class="xm_one_row">
|
<span>本月工单数</span>
|
<span>15</span>
|
</div>
|
<div class="xm_one_row">
|
<span>累计工单数</span>
|
<span>15</span>
|
</div>
|
</div>
|
</el-card>
|
<el-card style="margin-top: 20px;">
|
<div class="xm_table">
|
<div class="xm_table_search">
|
<el-select v-model="value" style="width: 300px; margin-right: 15px;" placeholder="位置类型">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-select v-model="value" style="width: 300px;" placeholder="工单分类">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="工单分类">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="报修区域">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="上报人">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="上报时间">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="处理人">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="工单状态">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="操作">
|
</el-table-column>
|
</el-table>
|
<div class="xm_table_f">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageTotal"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="设备信息" name="third">
|
<div class="xm">
|
<div class="xm_chat">
|
<el-card class="xm_chat_row">
|
<div id="chat1"></div>
|
</el-card>
|
<el-card class="xm_chat_row">
|
<div id="chat2"></div>
|
</el-card>
|
</div>
|
<el-card style="margin-top: 20px;">
|
<div class="xm_table">
|
<div class="xm_table_search">
|
<div class="xm_table_search_left">
|
<el-input v-model="input" placeholder="请输入设备名称/编码" style="width: 200px; margin-right: 15px;"></el-input>
|
<el-select v-model="value" style="width: 200px; margin-right: 15px;" placeholder="设备状态">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-button type="primary">查询</el-button>
|
<el-button>清空</el-button>
|
</div>
|
<el-button type="primary">新增</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="工单分类">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="报修区域">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="上报人">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="上报时间">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="处理人">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="工单状态">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="操作">
|
</el-table-column>
|
</el-table>
|
<div class="xm_table_f">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageTotal"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="资产信息" name="fourth">
|
<div class="xm">
|
<el-card>
|
<div slot="header" class="clearfix">
|
<span>资产清单</span>
|
</div>
|
<div class="xm_table">
|
<div class="xm_table_search">
|
<div class="xm_table_search_left">
|
<el-input v-model="input" placeholder="请输入资产名称/编码" style="width: 200px; margin-right: 15px;"></el-input>
|
<el-select v-model="value" style="width: 200px; margin-right: 15px;" placeholder="资产分类">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-button type="primary">查询</el-button>
|
<el-button>清空</el-button>
|
</div>
|
<el-button type="primary">新增</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="资产编码">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="资产名称">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="条码">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="品牌">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="规格型号">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="单位">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="库存数量">
|
</el-table-column>
|
</el-table>
|
<div class="xm_table_f">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageTotal"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import * as echarts from 'echarts';
|
export default {
|
name: "houseDetails",
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data() {
|
return {
|
info: {},
|
activeName: 'houseinfo',
|
total: 0,
|
pageTotal: 10,
|
page: 1,
|
tableData: []
|
}
|
},
|
methods: {
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
this.$nextTick(() => {
|
this.reand()
|
this.reand1()
|
})
|
},
|
reand() {
|
var chartDom = document.getElementById('chat1');
|
var myChart = echarts.init(chartDom);
|
var option;
|
option = {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
top: '5%',
|
left: 'center'
|
},
|
series: [
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: ['40%', '80%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: 40,
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{ value: 1048, name: '正常' },
|
{ value: 735, name: '异常' },
|
{ value: 580, name: '报废' }
|
]
|
}
|
]
|
};
|
option && myChart.setOption(option);
|
},
|
reand1() {
|
var chartDom = document.getElementById('chat2');
|
var myChart = echarts.init(chartDom);
|
var option;
|
// There should not be negative values in rawData
|
const rawData = [
|
[100, 302, 301, 334, 390, 330, 320],
|
[320, 132, 101, 134, 90, 230, 210],
|
[220, 182, 191, 234, 290, 330, 310],
|
[150, 212, 201, 154, 190, 330, 410],
|
[820, 832, 901, 934, 1290, 1330, 1320]
|
];
|
const totalData = [];
|
for (let i = 0; i < rawData[0].length; ++i) {
|
let sum = 0;
|
for (let j = 0; j < rawData.length; ++j) {
|
sum += rawData[j][i];
|
}
|
totalData.push(sum);
|
}
|
const grid = {
|
left: 100,
|
right: 100,
|
top: 50,
|
bottom: 50
|
};
|
const series = [
|
'Direct',
|
'Mail Ad',
|
'Affiliate Ad',
|
'Video Ad',
|
'Search Engine'
|
].map((name, sid) => {
|
return {
|
name,
|
type: 'bar',
|
stack: 'total',
|
barWidth: '60%',
|
label: {
|
show: true,
|
formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
},
|
data: rawData[sid].map((d, did) =>
|
totalData[did] <= 0 ? 0 : d / totalData[did]
|
)
|
};
|
});
|
option = {
|
legend: {
|
selectedMode: false
|
},
|
grid,
|
yAxis: {
|
type: 'value'
|
},
|
xAxis: {
|
type: 'category',
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
},
|
series
|
};
|
|
option && myChart.setOption(option);
|
},
|
handleClick(tab, event) {
|
console.log(tab, event);
|
},
|
handleCurrentChange(page) {
|
this.page = page
|
},
|
handleSizeChange(pageTotal) {
|
this.pageTotal = pageTotal
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.right {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.right_head {
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
font-size: 16px;
|
font-weight: bold;
|
color: black;
|
background: #ffffff;
|
}
|
.right_cate {
|
width: 100%;
|
padding: 0 20px 20px 20px;
|
box-sizing: border-box;
|
background: #ffffff;
|
.xm {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.xm_house {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: self-end;
|
.xm_house_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 10px;
|
.xm_house_list_left {
|
flex-shrink: 0;
|
width: 100px;
|
display: flex;
|
margin-right: 20px;
|
flex-direction: column;
|
.xm_house_list_left_row {
|
width: 100px;
|
height: 100px;
|
background: rgba(242, 242, 242, 1);
|
padding: 20px 0;
|
box-sizing: border-box;
|
margin-bottom: 20px;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: space-between;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
span {
|
&:nth-child(1) {
|
font-size: 18px;
|
color: #333333;
|
font-weight: 400;
|
}
|
&:nth-child(2) {
|
font-size: 12px;
|
color: #929292;
|
}
|
}
|
}
|
}
|
.xm_house_list_right {
|
width: calc(100% - 130px);
|
display: flex;
|
flex-direction: column;
|
.item {
|
width: calc(100% - 130px);
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
.xm_house_list_right_row {
|
height: 100px;
|
width: 300px;
|
background: rgba(198, 224, 167, 0.34509803921568627);
|
padding: 10px 0;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: space-between;
|
span {
|
font-size: 14px;
|
color: #000000;
|
}
|
.xm_house_list_right_row_info {
|
display: flex;
|
flex-direction: column;
|
span {
|
&:nth-child(1) {
|
color: #000000;
|
font-size: 14px;
|
}
|
&:nth-child(2) {
|
color: #A5A5A5;
|
font-size: 12px;
|
margin-top: 3px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.xm_house_tips {
|
display: flex;
|
align-items: center;
|
.xm_house_tips_row {
|
margin-left: 30px;
|
display: flex;
|
align-items: center;
|
.xm_house_tips_row_d {
|
width: 10px;
|
height: 10px;
|
background: orange;
|
margin-right: 5px;
|
}
|
span {
|
font-size: 16px;
|
color: black;
|
}
|
}
|
}
|
}
|
.xm_chat {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.xm_chat_row {
|
width: 49%;
|
height: 300px;
|
#chat1 {
|
width: 100%;
|
height: 260px;
|
}
|
#chat2 {
|
width: 100%;
|
height: 260px;
|
}
|
}
|
}
|
.xm_one {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.xm_one_row {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
span {
|
font-size: 16px;
|
color: black;
|
&:nth-child(2) {
|
font-weight: bold;
|
margin: 15px 0;
|
}
|
&:nth-child(3) {
|
color: #666666;
|
}
|
}
|
}
|
}
|
.xm_one1 {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.xm_one_row {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
span {
|
font-size: 16px;
|
color: black;
|
&:nth-child(2) {
|
font-size: 18px;
|
font-weight: bold;
|
margin-top: 15px;
|
}
|
}
|
}
|
}
|
.xm_table {
|
width: 100%;
|
.xm_table_search {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 15px;
|
}
|
.xm_table_f {
|
width: 100%;
|
text-align: right;
|
}
|
}
|
.xm_info {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
.xm_info_row {
|
display: flex;
|
flex-direction: column;
|
span {
|
font-size: 16px;
|
&:nth-child(1) {
|
color: #666666;
|
}
|
&:nth-child(2) {
|
color: #000000;
|
margin-top: 15px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
