<template>
|
<div class="box">
|
<div class="box_content">
|
<div class="left">
|
<el-input v-model="filterText" placeholder="搜索"></el-input>
|
<div style="width: 100%; height: 20px;"></div>
|
<el-tree
|
ref="tree"
|
:data="houseList"
|
node-key="id"
|
:default-expanded-keys="ids"
|
highlight-current
|
@node-click="nodeClick"
|
:default-checked-keys="ids"
|
:filter-node-method="filterNode"
|
:props="{ children: 'projectDataVOList', label: 'name' }">
|
<span class="custom-tree-node" style="width: 100%; display: flex; align-items: center; justify-content: space-between;" slot-scope="{ node, data }">
|
<span>{{ data.name }}</span>
|
<span style="color: #2080f7;" v-if="data.lv === 3">
|
{{data.leaseStatus === 0 ? '待租赁' : data.leaseStatus === 1 ? '已租赁' : data.leaseStatus === 2 ? '未开启租赁' : ''}}
|
</span>
|
</span>
|
</el-tree>
|
</div>
|
<div class="right">
|
<div class="right_head">
|
{{title}}
|
<el-tag type="info" v-if="leaseStatus === 0" style="margin-left: 10px;">待租赁</el-tag>
|
<el-tag type="success" v-if="leaseStatus === 1" style="margin-left: 10px;">已租赁</el-tag>
|
<el-tag type="warning" v-if="leaseStatus === 2" style="margin-left: 10px;">未开启租赁</el-tag>
|
</div>
|
<div class="right_cate">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="项目概况" name="first" v-if="lv === 0">
|
<div class="xm">
|
<el-card>
|
<div class="xm_one">
|
<div class="xm_one_row">
|
<span>在租合同数</span>
|
<span>{{projectNums.leaseContractAmount}}</span>
|
<span>在租房源数：{{projectNums.leaseRoomAmount}}</span>
|
</div>
|
<div class="xm_one_row">
|
<span>可招商面积</span>
|
<span>{{projectNums.investmentArea}}㎡</span>
|
<span>可招商房源数：{{projectNums.investmentRoomAmount}}</span>
|
</div>
|
<div class="xm_one_row">
|
<span>在租实时均价</span>
|
<span>{{projectNums.leasePrice}}元/m²·天</span>
|
<span>在租面积：{{projectNums.leaseArea}}m²</span>
|
</div>
|
<div class="xm_one_row">
|
<span>出租率</span>
|
<span>{{(projectNums.leaseRoomAmount / projectNums.investmentRoomAmount).toFixed(2)}}%</span>
|
<span>待租面积：{{projectNums.investmentArea - projectNums.leaseArea}}m²</span>
|
</div>
|
</div>
|
</el-card>
|
<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>{{projectInfo.name}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>所属地区</span>
|
<span>{{projectInfo.provinceName}}-{{projectInfo.cityName}}-{{projectInfo.areaName}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 50%;">
|
<span>详细地址</span>
|
<span>{{projectInfo.addr}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 100%; margin-top: 15px;">
|
<span>项目简介</span>
|
<span>{{projectInfo.remark}}</span>
|
</div>
|
</div>
|
</el-card>
|
<el-card style="margin-top: 20px;">
|
<div slot="header" class="clearfix">
|
<span>当前在租合同</span>
|
</div>
|
<div class="xm_table">
|
<div style="display: flex; align-items: center; margin-bottom: 15px;">
|
<el-input v-model="form.code" style="width: 150px; margin-right: 15px;" placeholder="请输入合同编号"></el-input>
|
<el-button type="primary" @click="getFetchList">搜索</el-button>
|
<el-button @click="clear">重置</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
v-loading="loading"
|
style="width: 100%">
|
<el-table-column
|
label="合同编号">
|
<template slot-scope="{row}">
|
<el-button type="text">{{row.code}}</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="renterName"
|
label="租客">
|
</el-table-column>
|
<el-table-column
|
label="租赁单价">
|
<template slot-scope="{row}">
|
<div style="display: flex; align-items: center;">
|
<span>{{row.leasePrice || 0}}元/㎡·天</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="leaseDays"
|
label="租赁天数">
|
</el-table-column>
|
<el-table-column
|
label="租赁面积">
|
<template slot-scope="{row}">
|
{{row.totalArea}}㎡
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="房源">
|
<template slot-scope="{row}">
|
<div style="display: flex; flex-direction: column;">
|
<span v-for="(item, index) in row.roomList" :key="index">
|
{{item.projectName}}/{{item.buildingName}}/{{item.floorName}}/{{item.roomNum}}
|
</span>
|
</div>
|
</template>
|
</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="houseinfo" v-if="[3].includes(lv)">
|
<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>{{roomInfo.projectName}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>楼宇</span>
|
<span>{{roomInfo.buildingName}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>楼层</span>
|
<span>{{roomInfo.floorName}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>房号</span>
|
<span>{{roomInfo.roomNum}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>房间编号</span>
|
<span>{{roomInfo.code}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>是否招商</span>
|
<span v-if="roomInfo.isInvestment === 0">否</span>
|
<span v-if="roomInfo.isInvestment === 1">是</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>建筑面积</span>
|
<span>{{roomInfo.area}}㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>计租面积</span>
|
<span>{{roomInfo.rentArea}}㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>计费面积</span>
|
<span>{{roomInfo.feeArea}}㎡</span>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="租客合同" name="project" v-if="[3].includes(lv)">
|
<div class="xm">
|
<el-card style="margin-top: 20px;">
|
<div slot="header" class="clearfix">
|
<span>当前在租合同</span>
|
</div>
|
<div class="xm_table">
|
<div style="display: flex; align-items: center; margin-bottom: 15px;">
|
<el-input v-model="form.code" style="width: 150px; margin-right: 15px;" placeholder="请输入合同编号"></el-input>
|
<el-button type="primary" @click="getFetchList">搜索</el-button>
|
<el-button @click="clear">重置</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
v-loading="loading"
|
style="width: 100%">
|
<el-table-column
|
label="合同编号">
|
<template slot-scope="{row}">
|
<el-button type="text">{{row.code}}</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="renterName"
|
label="租客">
|
</el-table-column>
|
<el-table-column
|
label="租赁单价">
|
<template slot-scope="{row}">
|
<div style="display: flex; align-items: center;">
|
<span>{{row.leasePrice || 0}}元/㎡·天</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="leaseDays"
|
label="租赁天数">
|
</el-table-column>
|
<el-table-column
|
label="租赁面积">
|
<template slot-scope="{row}">
|
{{row.totalArea}}㎡
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="房源">
|
<template slot-scope="{row}">
|
<div style="display: flex; flex-direction: column;">
|
<span v-for="(item, index) in row.roomList" :key="index">
|
{{item.projectName}}/{{item.buildingName}}/{{item.floorName}}/{{item.roomNum}}
|
</span>
|
</div>
|
</template>
|
</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="house" v-if="[1,2].includes(lv)">
|
<div class="xm">
|
<div class="xm_house">
|
<div class="xm_house_tips">
|
<div class="xm_house_tips_row">
|
<div class="xm_house_tips_row_d" style="background: rgba(0,186,146,0.1);"></div>
|
<span>已出租</span>
|
</div>
|
<div class="xm_house_tips_row">
|
<div class="xm_house_tips_row_d" style="background: #F7F7F7;"></div>
|
<span>未出租</span>
|
</div>
|
<div class="xm_house_tips_row">
|
<div class="xm_house_tips_row_d" style="background: rgba(255,158,0,0.14);"></div>
|
<span>90日内到期</span>
|
</div>
|
</div>
|
<div class="xm_house_list" v-for="(item, index) in roomStatus" :key="index">
|
<div class="xm_house_list_left">
|
<div class="xm_house_list_left_row">
|
<span>{{item.floorName}}</span>
|
<span>{{item.floorArea}}㎡</span>
|
</div>
|
</div>
|
<div class="xm_house_list_right">
|
<div class="xm_house_list_right_row" :style="{ width: ifWidth(child.roomRentArea), backgroundColor: ifBackground(child.roomStatus) }" v-for="(child, i) in item.ywRoomStatusDataVOList" :key="i">
|
<div class="ft">
|
<span>{{child.roomCode}}</span>
|
<span>（{{child.roomRentArea}}㎡）</span>
|
</div>
|
<div class="xm_house_list_right_row_info" v-if="child.roomStatus !== 0">
|
<span>{{child.customerName}}</span>
|
<span>{{child.overData.substring(0, 10)}}到期</span>
|
</div>
|
<div class="xm_house_list_right_row_day" v-if="child.roomStatus === 0">未出租｜空置{{child.freeDayAmount}}天</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="楼宇概况" name="louyu" v-if="lv === 1">
|
<div class="xm">
|
<el-card>
|
<div class="xm_one">
|
<div class="xm_one_row">
|
<span>在租合同数</span>
|
<span>{{projectNums.leaseContractAmount}}</span>
|
<span>在租房源数：{{projectNums.leaseRoomAmount}}</span>
|
</div>
|
<div class="xm_one_row">
|
<span>可招商面积</span>
|
<span>{{projectNums.investmentArea}}㎡</span>
|
<span>可招商房源数：{{projectNums.investmentRoomAmount}}</span>
|
</div>
|
<div class="xm_one_row">
|
<span>在租实时均价</span>
|
<span>{{projectNums.leasePrice}}元/m²·天</span>
|
<span>在租面积：{{projectNums.leaseArea}}m²</span>
|
</div>
|
<div class="xm_one_row">
|
<span>出租率</span>
|
<span>{{(projectNums.leaseRoomAmount / projectNums.investmentRoomAmount).toFixed(2)}}%</span>
|
<span>待租面积：{{projectNums.investmentArea - projectNums.leaseArea}}m²</span>
|
</div>
|
</div>
|
</el-card>
|
<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>{{buildingInfo.projectName}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>楼宇名称</span>
|
<span>{{buildingInfo.name}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>楼宇编码</span>
|
<span>{{buildingInfo.code}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>详细地址</span>
|
<span>{{buildingInfo.addr}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 100%; margin-top: 15px;">
|
<span>楼宇简介</span>
|
<span>{{buildingInfo.remark}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>建筑面积</span>
|
<span>{{buildingInfo.cqArea}}㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>计租面积</span>
|
<span>{{buildingInfo.roomRentArea}}㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 50%; margin-top: 15px;">
|
<span>计费面积</span>
|
<span>{{buildingInfo.roomFeeArea}}㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>地上层数</span>
|
<span>{{buildingInfo.onFloor}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>地下层数</span>
|
<span>{{buildingInfo.underFloor}}</span>
|
</div>
|
</div>
|
</el-card>
|
<el-card style="margin-top: 20px;">
|
<div slot="header" class="clearfix">
|
<span>当前在租合同</span>
|
</div>
|
<div class="xm_table">
|
<div style="display: flex; align-items: center; margin-bottom: 15px;">
|
<el-input v-model="form.code" style="width: 150px; margin-right: 15px;" placeholder="请输入合同编号"></el-input>
|
<el-button type="primary" @click="getFetchList">搜索</el-button>
|
<el-button @click="clear">重置</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
v-loading="loading"
|
style="width: 100%">
|
<el-table-column
|
label="合同编号">
|
<template slot-scope="{row}">
|
<el-button type="text">{{row.code}}</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="renterName"
|
label="租客">
|
</el-table-column>
|
<el-table-column
|
label="租赁单价">
|
<template slot-scope="{row}">
|
<div style="display: flex; align-items: center;">
|
<span>{{row.leasePrice || 0}}元/㎡·天</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="leaseDays"
|
label="租赁天数">
|
</el-table-column>
|
<el-table-column
|
label="租赁面积">
|
<template slot-scope="{row}">
|
{{row.totalArea}}㎡
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="房源">
|
<template slot-scope="{row}">
|
<div style="display: flex; flex-direction: column;">
|
<span v-for="(item, index) in row.roomList" :key="index">
|
{{item.projectName}}/{{item.buildingName}}/{{item.floorName}}/{{item.roomNum}}
|
</span>
|
</div>
|
</template>
|
</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" v-if="[0,2,3].includes(lv)">
|
<div class="xm">
|
<el-card>
|
<div class="xm_one1">
|
<div class="xm_one_row">
|
<span>待指派数量</span>
|
<span>{{workOrderNums.waitAssignAmount || 0}}</span>
|
</div>
|
<div class="xm_one_row">
|
<span>待处理数量</span>
|
<span>{{workOrderNums.waitDealAmount || 0}}</span>
|
</div>
|
<div class="xm_one_row">
|
<span>本月工单数</span>
|
<span>{{workOrderNums.monthAmount || 0}}</span>
|
</div>
|
<div class="xm_one_row">
|
<span>累计工单数</span>
|
<span>{{workOrderNums.amount || 0}}</span>
|
</div>
|
</div>
|
</el-card>
|
<el-card style="margin-top: 20px;">
|
<div class="xm_table">
|
<div class="xm_table_search">
|
<div>
|
<el-cascader style="width: 150px; margin-right: 15px;" v-model="form.areaIds" @change="changeSel" placeholder="请选择工单分类" clearable
|
:options="cateList" :props="{
|
label: 'name',
|
value: 'id',
|
children: 'childCategoryList'
|
}" />
|
<el-select v-model="form.dealStatus" style="width: 150px; margin-right: 15px;" placeholder="工单状态">
|
<el-option label="待指派" :value="0"></el-option>
|
<el-option label="已指派" :value="1"></el-option>
|
<el-option label="已处理" :value="2"></el-option>
|
</el-select>
|
<el-button type="primary" @click="getWorkOrderList">查询</el-button>
|
<el-button @click="clear">清空</el-button>
|
</div>
|
<el-button type="primary" @click="$refs.operaYwWorkorderWindow.open('新建工单')">新增工单</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
v-lading="loading"
|
style="width: 100%">
|
<el-table-column
|
prop="categoryName"
|
label="工单分类">
|
</el-table-column>
|
<el-table-column
|
label="报修区域">
|
<template v-slot="scope">
|
<span>{{ scope.row.buildingName }} / {{ scope.row.areaType == 0 ? scope.row.roomNum : scope.row.floorName
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="creatorName"
|
label="上报人">
|
</el-table-column>
|
<el-table-column
|
prop="createDate"
|
label="上报时间">
|
</el-table-column>
|
<el-table-column
|
prop="dealUserName"
|
label="处理人">
|
</el-table-column>
|
<el-table-column
|
label="工单状态">
|
<template slot-scope="{row}">
|
<span v-if="row.dealStatus === 0">待指派</span>
|
<span v-if="row.dealStatus === 1">已指派</span>
|
<span v-if="row.dealStatus === 2">已处理</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作">
|
<template slot-scope="{row}">
|
<el-button type="text" @click="handleDetail(row)">查看详情</el-button>
|
</template>
|
</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" v-if="[0,1,2,3].includes(lv)">
|
<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="form.name" placeholder="请输入设备名称/编码" style="width: 150px; margin-right: 15px;"></el-input>
|
<el-select v-model="form.status" style="width: 150px; margin-right: 15px;" placeholder="设备状态">
|
<el-option label="正常" :value="0"></el-option>
|
<el-option label="损坏" :value="1"></el-option>
|
<el-option label="报废" :value="2"></el-option>
|
</el-select>
|
<el-button type="primary" @click="getDevicePage">查询</el-button>
|
<el-button @click="clear">清空</el-button>
|
</div>
|
<el-button type="primary" @click="handleEdit">新增</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
v-loading="loading"
|
style="width: 100%">
|
<el-table-column
|
label="设备编码">
|
<template slot-scope="{row}">
|
<el-button type="text">{{row.code}}</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="设备名称">
|
</el-table-column>
|
<el-table-column
|
prop="categoryName"
|
label="设备分类">
|
</el-table-column>
|
<el-table-column
|
prop="modelNo"
|
label="设备型号">
|
</el-table-column>
|
<el-table-column
|
prop="realName"
|
label="设备管理员">
|
</el-table-column>
|
<el-table-column
|
prop="supplier"
|
label="设备供应商">
|
</el-table-column>
|
<el-table-column
|
label="设备状态">
|
<template slot-scope="{row}">
|
<span v-if="row.status === 0">正常</span>
|
<span v-if="row.status === 1">损坏</span>
|
<span v-if="row.status === 2">报废</span>
|
</template>
|
</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>
|
</div>
|
<!-- 新建工单 -->
|
<OperaYwWorkorderWindow ref="operaYwWorkorderWindow" />
|
<!-- 工单详情 -->
|
<Detail v-if="showDetail" ref="DetailRef" @close="showDetail = false" />
|
<!-- 新建设备 -->
|
<Edit v-if="showEdit1" ref="EditRef" @success="getDevicePage" @close="showEdit1 = false" />
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import { tree, getProjectById } from '@/api/project/ywProject'
|
import { getRoomContract, getRoomStatusList, detailById as roomDetailById } from '@/api/project/ywRoom'
|
import { fetchList } from '@/api/contract'
|
import OperaYwWorkorderWindow from '../workorder/components/OperaYwWorkorderWindow'
|
import { fetchList as getCateList } from '@/api/business/category'
|
import { getDataVO, fetchList as workderList } from '@/api/workorder/ywWorkorder'
|
import { detailById } from '@/api/project/ywBuilding'
|
import Detail from '../workorder/components/detail'
|
import { fetchList as devicePage, getDeviceCateData, getDeviceStatus } from '@/api/Inspection/device'
|
import Edit from '../operation/components/deviceEdit'
|
export default {
|
name: 'index',
|
components: { OperaYwWorkorderWindow, Detail, Edit },
|
data() {
|
return {
|
showDetail: false,
|
showEdit1: false,
|
filterText: '',
|
tableData: [],
|
houseList: [],
|
activeName: 'first',
|
total: 0,
|
pageTotal: 10,
|
page: 1,
|
options: [{
|
value: '选项1',
|
label: '黄金糕'
|
}],
|
value: '',
|
form: {
|
name: '',
|
status: '',
|
project: '',
|
buildingId: '',
|
floorId: '',
|
roomId: '',
|
code: '',
|
areaIds: [],
|
cateId: '',
|
dealStatus: ''
|
},
|
title: '',
|
cateList: [],
|
deviceList: [],
|
categaryList: [],
|
roomStatus: [],
|
projectInfo: {},
|
projectNums: {},
|
workOrderNums: {},
|
buildingInfo: {},
|
roomInfo: {},
|
loading: false,
|
lv: 0,
|
leaseStatus: ''
|
}
|
},
|
created () {
|
this.getHouseTree()
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val);
|
}
|
},
|
methods: {
|
nodeClick(e) {
|
this.tableData = []
|
this.pageSize = 10
|
this.page = 1
|
this.form.project = ''
|
this.form.buildingId = ''
|
this.form.floorId = ''
|
this.form.roomId = ''
|
this.leaseStatus = ''
|
this.lv = e.lv
|
this.title = e.name
|
if (e.lv === 0) {
|
this.activeName = 'first'
|
this.form.project = e.id
|
this.getProjectByIds()
|
} else if (e.lv === 1) {
|
this.activeName = 'house'
|
this.form.buildingId = e.id
|
this.getRoomStatusLists()
|
} else if (e.lv === 2) {
|
this.activeName = 'house'
|
this.form.floorId = e.id
|
this.getRoomStatusLists()
|
} else if (e.lv === 3) {
|
this.activeName = 'houseinfo'
|
this.form.roomId = e.id
|
this.leaseStatus = e.leaseStatus
|
this.roomDetailByIds()
|
}
|
},
|
// 搜索树
|
filterNode(value, data) {
|
if (!value) return true;
|
return data.name.indexOf(value) !== -1;
|
},
|
// 判断房态宽度
|
ifWidth(num) {
|
if (num >= 0 && num <= 100) {
|
return '150px'
|
} else if (num >= 101 && num <= 200) {
|
return '180px'
|
} else if (num >= 201 && num <= 300) {
|
return '210px'
|
} else if (num >= 301 && num <= 400) {
|
return '240px'
|
} else if (num >= 401 && num <= 500) {
|
return '270px'
|
} else {
|
return '300px'
|
}
|
},
|
// 判断房态背景色
|
ifBackground(type) {
|
if (type === 0) {
|
return '#F7F7F7'
|
} else if (type === 1) {
|
return 'rgba(0,186,146,0.14)'
|
} else if (type === 2) {
|
return 'rgba(255,158,0,0.14)'
|
}
|
},
|
// 获取房源详情
|
roomDetailByIds() {
|
roomDetailById(this.form.roomId)
|
.then(res => {
|
this.roomInfo = res
|
})
|
},
|
// 获取楼宇详情
|
getDetailById() {
|
detailById(this.form.buildingId)
|
.then(res => {
|
console.log(res)
|
this.buildingInfo = res
|
})
|
},
|
// 房态数据
|
getRoomStatusLists() {
|
getRoomStatusList({
|
buildingId: this.form.buildingId,
|
floor: this.form.floorId
|
}).then(res => {
|
this.roomStatus = res
|
})
|
},
|
// 获取设备状态
|
getDevice() {
|
getDeviceStatus({
|
projectId: this.form.project,
|
buildingId: this.form.buildingId,
|
floorId: this.form.floorId,
|
roomId: this.form.roomId
|
})
|
.then(res => {
|
this.$nextTick(() => {
|
this.deviceList = [
|
{ value: res.workAmount || 0, name: '正常' },
|
{ value: res.exceptionAmount || 0, name: '异常' },
|
{ value: res.errAmount || 0, name: '报废' }
|
]
|
this.reand()
|
})
|
})
|
},
|
// 设备数量分布统计
|
getDeviceCateDatas() {
|
getDeviceCateData({
|
projectId: this.form.project,
|
buildingId: this.form.buildingId,
|
floorId: this.form.floorId,
|
roomId: this.form.roomId
|
}).then(res => {
|
this.categaryList = res
|
this.$nextTick(() => {
|
this.reand1()
|
})
|
})
|
},
|
handleEdit(row) {
|
this.showEdit1 = true
|
this.$nextTick(() => {
|
this.$refs.EditRef.isShowModal = true
|
})
|
},
|
// 获取设备分页
|
getDevicePage() {
|
this.loading = true
|
devicePage({
|
capacity: this.pageTotal,
|
page: this.page,
|
model: {
|
projectId: this.form.project,
|
buildingId: this.form.buildingId,
|
floorId: this.form.floorId,
|
roomId: this.form.roomId,
|
status: this.form.status,
|
name: this.form.name
|
}
|
}).then(res => {
|
this.tableData = res.records
|
this.total = res.total
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
handleDetail(row) {
|
this.showDetail = true
|
this.$nextTick(() => {
|
this.$refs.DetailRef.visible = true
|
this.$refs.DetailRef.id = row.id
|
this.$refs.DetailRef.getDetail()
|
})
|
},
|
// 获取工单列表
|
getWorkOrderList() {
|
this.loading = true
|
workderList({
|
capacity: this.pageTotal,
|
page: this.page,
|
model: {
|
projectId: this.form.project,
|
buildingId: this.form.buildingId,
|
floorId: this.form.floorId,
|
roomId: this.form.roomId,
|
dealStatus: this.form.dealStatus,
|
cateId: this.form.cateId
|
}
|
}).then(res => {
|
this.tableData = res.records
|
this.total = res.total
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
getCate() {
|
getCateList({
|
model: { type: 3 },
|
capacity: 1000,
|
page: 1,
|
}).then(res => {
|
this.cateList = res.records || []
|
})
|
},
|
// 获取项目信息
|
getProjectByIds() {
|
getProjectById(this.form.project)
|
.then(res => {
|
this.projectInfo = res
|
})
|
this.getGK()
|
this.getFetchList()
|
},
|
//项目概况
|
getGK() {
|
getRoomContract({
|
projectId: this.form.project,
|
buildingId: this.form.buildingId,
|
floorId: this.form.floorId,
|
roomId: this.form.roomId,
|
}).then(res => {
|
this.projectNums = res
|
})
|
},
|
changeSel(e) {
|
if (e && e.length == 2) {
|
this.$set(this.form, 'cateId', e[1])
|
} else {
|
this.$set(this.form, 'cateId', '')
|
}
|
},
|
// 获取工单数量
|
getDataVOs() {
|
let queryType = ''
|
let queryId = ''
|
if (this.lv === 0) {
|
queryType = 1
|
queryId = this.form.project
|
} else if (this.lv === 2) {
|
queryType = 2
|
queryId = this.form.floorId
|
} else if (this.lv === 3) {
|
queryType = 3
|
queryId = this.form.roomId
|
}
|
getDataVO({
|
queryType,
|
queryId
|
}).then(res => {
|
this.workOrderNums = res
|
})
|
},
|
clear() {
|
this.form.code = ''
|
this.form.name = ''
|
this.form.status = ''
|
this.form.dealStatus = ''
|
this.form.cateId = ''
|
this.form.areaIds = []
|
if (['first', 'louyu', 'houseinfo'].includes(this.activeName)) {
|
this.getFetchList()
|
} else if (this.activeName === 'second') {
|
this.getWorkOrderList()
|
} else if (this.activeName === 'third') {
|
this.getDevicePage()
|
}
|
},
|
// 获取当前在租合同
|
getFetchList() {
|
this.loading = true
|
fetchList({
|
capacity: this.pageSize,
|
page: this.page,
|
model: {
|
projectId: this.form.project,
|
buildingId: this.form.buildingId,
|
floorId: this.form.floorId,
|
roomId: this.form.roomId,
|
code: this.form.code
|
}
|
}).then(res => {
|
this.tableData = res.records
|
this.total = res.total
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
getHouseTree() {
|
tree({})
|
.then(res => {
|
this.addParamToArray(res)
|
this.form.project = res[0].id
|
this.title = res[0].name
|
this.houseList = res
|
this.getProjectByIds()
|
})
|
},
|
addParamToArray(arr) {
|
for (let i = 0; i < arr.length; i++) {
|
const currentItem = arr[i].projectDataVOList
|
arr[i].idd = arr[i].lv + '-' + arr[i].id
|
if (currentItem.length > 0) {
|
this.addParamToArray(currentItem)
|
}
|
}
|
},
|
reand() {
|
var chartDom = document.getElementById('chat1');
|
var myChart = echarts.init(chartDom);
|
var option;
|
option = {
|
title: {
|
text: '设备状态'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
left: 'right',
|
top: 'middle',
|
width: '80'
|
},
|
series: [
|
{
|
name: '设备状态',
|
type: 'pie',
|
radius: ['40%', '80%'],
|
label: {
|
show: true,
|
position: 'center',
|
fontWeight: 'bold',
|
fontSize: 22
|
},
|
data: this.deviceList
|
}
|
]
|
};
|
option && myChart.setOption(option);
|
},
|
reand1() {
|
var chartDom = document.getElementById('chat2');
|
var myChart = echarts.init(chartDom);
|
var option;
|
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 series = [
|
'Direct',
|
'Mail Ad',
|
'Affiliate Ad',
|
'Video Ad',
|
'Search Engine'
|
].map((name, sid) => {
|
return {
|
name,
|
type: 'bar',
|
stack: 'total',
|
barWidth: '60%',
|
data: rawData[sid].map((d, did) =>
|
totalData[did] <= 0 ? 0 : d / totalData[did]
|
)
|
};
|
});
|
let seriesArr = this.categaryList.map(item => {
|
return {
|
name: item.cateName,
|
type: 'bar',
|
stack: 'total',
|
barWidth: '60%',
|
data: item.ywDeviceCateDataVOList.map((child) =>
|
child.deviceAmount
|
)
|
}
|
})
|
let xAxisData = this.categaryList.map(item => item.cateName)
|
console.log(series)
|
console.log(seriesArr)
|
console.log(xAxisData)
|
option = {
|
title: {
|
text: '设备数量分类统计'
|
},
|
grid: {
|
left: 50,
|
right: 50,
|
top: 50,
|
bottom: 50
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
yAxis: {
|
type: 'value'
|
},
|
xAxis: {
|
type: 'category',
|
data: xAxisData
|
},
|
series: seriesArr
|
};
|
|
option && myChart.setOption(option);
|
},
|
handleCurrentChange(page) {
|
this.page = page
|
if (['first', 'louyu', 'houseinfo'].includes(this.activeName)) {
|
this.getFetchList()
|
} else if (this.activeName === 'second') {
|
this.getWorkOrderList()
|
} else if (tab.name === 'third') {
|
this.getDevicePage()
|
}
|
},
|
handleSizeChange(pageTotal) {
|
this.pageTotal = pageTotal
|
if (['first', 'louyu', 'houseinfo'].includes(this.activeName)) {
|
this.getFetchList()
|
} else if (this.activeName === 'second') {
|
this.getWorkOrderList()
|
} else if (tab.name === 'third') {
|
this.getDevicePage()
|
}
|
},
|
handleClick(tab) {
|
this.page = 1
|
this.pageSize = 10
|
this.activeName = tab.name
|
this.tableData = []
|
if (tab.name === 'first') {
|
this.getFetchList()
|
} else if (tab.name === 'second') {
|
this.getDataVOs()
|
this.getCate()
|
this.getWorkOrderList()
|
} else if (tab.name === 'third') {
|
this.getDevicePage()
|
this.getDevice()
|
this.getDeviceCateDatas()
|
} else if (tab.name === 'louyu') {
|
this.getGK()
|
this.getFetchList()
|
this.getDetailById()
|
} else if (tab.name === 'house') {
|
this.getRoomStatusLists()
|
} else if (tab.name === 'houseinfo') {
|
this.roomDetailByIds()
|
} else if (tab.name === 'project') {
|
this.getFetchList()
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
height: 100%;
|
padding: 16px;
|
box-sizing: border-box;
|
.box_content {
|
width: 100%;
|
display: flex;
|
align-items: start;
|
justify-content: space-between;
|
.left {
|
width: 300px;
|
padding: 20px;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
margin-right: 20px;
|
display: flex;
|
flex-direction: column;
|
background: #ffffff;
|
::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
|
background-color: #f0f7ff;
|
color: rgb(65, 107, 255)
|
}
|
}
|
.right {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.right_head {
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
background: #ffffff;
|
font-size: 16px;
|
font-weight: bold;
|
color: black;
|
}
|
.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;
|
.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: 15px;
|
flex-direction: column;
|
.xm_house_list_left_row {
|
width: 100px;
|
height: 100px;
|
background: #F4F7FC;
|
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-weight: 500;
|
font-size: 18px;
|
color: #000000;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 14px;
|
color: #999999;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
.xm_house_list_right {
|
display: flex;
|
align-items: center;
|
.xm_house_list_right_row {
|
height: 100px;
|
padding: 12px 15px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
margin-right: 10px;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.ft {
|
display: flex;
|
align-items: center;
|
span {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 18px;
|
color: #000000;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 14px;
|
color: #999999;
|
}
|
}
|
}
|
.xm_house_list_right_row_day {
|
font-weight: 400;
|
font-size: 13px;
|
color: #999999;
|
}
|
.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 {
|
display: flex;
|
align-items: center;
|
margin-right: 30px;
|
.xm_house_tips_row_d {
|
width: 20px;
|
height: 20px;
|
background: orange;
|
margin-right: 8px;
|
border-radius: 2px;
|
}
|
span {
|
font-weight: 400;
|
font-size: 13px;
|
color: #333333;
|
}
|
}
|
}
|
}
|
.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>
|
