房态

MrShi

2025-01-22 a2633dee261ba41c96c51e58098728222b2e3360

房态

 admin/.env.test

@@ -4,7 +4,7 @@
# VUE_APP_API_URL  = 'http://192.168.5.13/gateway_interface'

# 任康
VUE_APP_API_URL  = 'http://192.168.0.143:10010'
VUE_APP_API_URL  = 'http://192.168.0.146:10010'

# 萍姐
# VUE_APP_API_URL  = 'http://192.168.0.108:10010/'

 admin/src/api/project/ywProject.js

@@ -45,6 +45,11 @@
  return request.get(`/visitsAdmin/cloudService/business/ywProject/${id}`)
}

// 根据ID查询
export function getProjectById (id) {
  return request.get(`/visitsAdmin/cloudService/business/ywProject/${id}`)
}

// 批量删除
export function deleteByIdInBatch (ids) {
  return request.get('/visitsAdmin/cloudService/business/ywProject/delete/batch', {

 admin/src/api/project/ywRoom.js

@@ -29,6 +29,16 @@
  return request.post('/visitsAdmin/cloudService/business/ywRoom/updateById', data)
}

// 查询房间态势数据
export function getRoomStatusList (data) {
  return request.post('/visitsAdmin/cloudService/business/ywRoom/getRoomStatusList', data)
}

// 查询房间租赁信息
export function getRoomContract (data) {
  return request.post('/visitsAdmin/cloudService/business/ywRoom/getRoomContract', data)
}

// 删除
export function deleteById (id) {
  return request.get(`/visitsAdmin/cloudService/business/ywRoom/delete/${id}`)

 admin/src/views/index.vue

@@ -66,7 +66,9 @@
          </el-option>
        </el-select>
      </div>
      
      <div class="main_right_date">
        <el-calendar v-model="value" :mark-data="markData"></el-calendar>
      </div>
    </div>
  </div>
</template>
@@ -90,7 +92,18 @@
        { name: '资产清单', icon: require('@/assets/indexIcon/ic_zichan@2x.png') },
      ],
      options: [],
      value: ''
      value: '',
      markData: [
        {
          date: '2025-01-22', // 标记的日期
          // 自定义标记内容
          content: '<div style="color: red;">重要事件</div>'
        },
        {
          date: '2025-01-19',
          content: '生日'
        }
      ]
    }
  },
  methods: {
@@ -253,6 +266,24 @@
        color: #222222;
        margin-bottom: 12px;
      }
      .main_right_date {
        width: 100%;
        height: 300px;
        ::v-deep .el-calendar-table tr td:first-child{
          border: none;
        }
        ::v-deep .el-calendar-table tr:first-child td{
          border: none;
        }
        ::v-deep .el-calendar-table__row td{
          border: none;
        }
        ::v-deep .el-calendar-table .el-calendar-day {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
</style>

 admin/src/views/roomStatus/index.vue

@@ -2,37 +2,58 @@
    <div class="box">
        <div class="box_content">
            <div class="left">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
                <el-input v-model="filterText" placeholder="搜索"></el-input>
                <div style="width: 100%; height: 20px;"></div>
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                <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">项目名称</div>
                <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">
                        <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>4</span>
                                            <span>在租房源数：5</span>
                                            <span>{{projectNums.leaseContractAmount}}</span>
                                            <span>在租房源数：{{projectNums.leaseRoomAmount}}</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>可招商面积</span>
                                            <span>50000㎡</span>
                                            <span>可招商房源数：15</span>
                                            <span>{{projectNums.investmentArea}}㎡</span>
                                            <span>可招商房源数：{{projectNums.investmentRoomAmount}}</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>在租实时均价</span>
                                            <span>145.75元/m²·天</span>
                                            <span>在租面积：900.00m²</span>
                                            <span>{{projectNums.leasePrice}}元/m²·天</span>
                                            <span>在租面积：{{projectNums.leaseArea}}m²</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>出租率</span>
                                            <span>50.00%</span>
                                            <span>待租面积：700.00m²</span>
                                            <span>{{(projectNums.leaseRoomAmount / projectNums.investmentRoomAmount).toFixed(2)}}%</span>
                                            <span>待租面积：{{projectNums.investmentArea - projectNums.leaseArea}}m²</span>
                                        </div>
                                    </div>
                                </el-card>
@@ -43,19 +64,19 @@
                                    <div class="xm_info">
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>项目名称</span>
                                            <span>XXXXXXXXXX</span>
                                            <span>{{projectInfo.name}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>所属地区</span>
                                            <span>安徽省-合肥市-蜀山区</span>
                                            <span>{{projectInfo.provinceName}}-{{projectInfo.cityName}}-{{projectInfo.areaName}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 50%;">
                                            <span>详细地址</span>
                                            <span>Lorem ipsum dolor sit amet, consectetur</span>
                                            <span>{{projectInfo.addr}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 100%; margin-top: 15px;">
                                            <span>项目简介</span>
                                            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum</span>
                                            <span>{{projectInfo.remark}}</span>
                                        </div>
                                    </div>
                                </el-card>
@@ -64,34 +85,53 @@
                                        <span>当前在租合同</span>
                                    </div>
                                    <div class="xm_table">
                                        <el-input v-model="input" style="width: 300px; margin-bottom: 15px;" placeholder="请输入内容"></el-input>
                                        <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
                                                prop="date"
                                                label="合同编号">
                                                <template slot-scope="{row}">
                                                    <el-button type="text">{{row.code}}</el-button>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="name"
                                                prop="renterName"
                                                label="租客">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                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="address"
                                                prop="leaseDays"
                                                label="租赁天数">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="租赁面积">
                                                <template slot-scope="{row}">
                                                    {{row.totalArea}}㎡
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                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">
@@ -109,7 +149,7 @@
                                </el-card>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="房源信息" name="houseinfo">
                        <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">
@@ -118,91 +158,99 @@
                                    <div class="xm_info">
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>所属项目</span>
                                            <span>XXXXXXXXXX</span>
                                            <span>{{roomInfo.projectName}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>楼宇</span>
                                            <span>综合楼</span>
                                            <span>{{roomInfo.buildingName}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>楼层</span>
                                            <span>1</span>
                                            <span>{{roomInfo.floorName}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>房号</span>
                                            <span>101活动室</span>
                                            <span>{{roomInfo.roomNum}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>房间编号</span>
                                            <span>101</span>
                                            <span>{{roomInfo.code}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>是否招商</span>
                                            <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>50㎡</span>
                                            <span>{{roomInfo.area}}㎡</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>计租面积</span>
                                            <span>50㎡</span>
                                            <span>{{roomInfo.rentArea}}㎡</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>计费面积</span>
                                            <span>45㎡</span>
                                            <span>{{roomInfo.feeArea}}㎡</span>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="租客合同" name="project">
                        <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">
                                        <el-input v-model="input" style="width: 300px; margin-bottom: 15px;" placeholder="请输入合同编号"></el-input>
                                        <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
                                                prop="date"
                                                label="合同编号">
                                                <template slot-scope="{row}">
                                                    <el-button type="text">{{row.code}}</el-button>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="name"
                                                label="客户名称">
                                                prop="renterName"
                                                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="租赁单价">
                                                <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="address"
                                                label="租赁面积（㎡）">
                                                prop="leaseDays"
                                                label="租赁天数">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="签订日">
                                                label="租赁面积">
                                                <template slot-scope="{row}">
                                                    {{row.totalArea}}㎡
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="合同来源">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="合同状态">
                                                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">
@@ -220,29 +268,70 @@
                                </el-card>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="楼宇概况" name="louyu">
                        <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>4</span>
                                            <span>在租房源数：5</span>
                                            <span>{{projectNums.leaseContractAmount}}</span>
                                            <span>在租房源数：{{projectNums.leaseRoomAmount}}</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>可招商面积</span>
                                            <span>50000㎡</span>
                                            <span>可招商房源数：15</span>
                                            <span>{{projectNums.investmentArea}}㎡</span>
                                            <span>可招商房源数：{{projectNums.investmentRoomAmount}}</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>在租实时均价</span>
                                            <span>145.75元/m²·天</span>
                                            <span>在租面积：900.00m²</span>
                                            <span>{{projectNums.leasePrice}}元/m²·天</span>
                                            <span>在租面积：{{projectNums.leaseArea}}m²</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>出租率</span>
                                            <span>50.00%</span>
                                            <span>待租面积：700.00m²</span>
                                            <span>{{(projectNums.leaseRoomAmount / projectNums.investmentRoomAmount).toFixed(2)}}%</span>
                                            <span>待租面积：{{projectNums.investmentArea - projectNums.leaseArea}}m²</span>
                                        </div>
                                    </div>
                                </el-card>
@@ -253,43 +342,43 @@
                                    <div class="xm_info">
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>所属项目</span>
                                            <span>阜宁文体中心</span>
                                            <span>{{buildingInfo.projectName}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>楼宇名称</span>
                                            <span>A座</span>
                                            <span>{{buildingInfo.name}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>楼宇编码</span>
                                            <span>A-</span>
                                            <span>{{buildingInfo.code}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>详细地址</span>
                                            <span>阜宁文体中心西南角</span>
                                            <span>{{buildingInfo.addr}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 100%; margin-top: 15px;">
                                            <span>详细地址</span>
                                            <span>阜宁文体中心西南角</span>
                                            <span>楼宇简介</span>
                                            <span>{{buildingInfo.remark}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>建筑面积</span>
                                            <span>1000㎡</span>
                                            <span>{{buildingInfo.cqArea}}㎡</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>计租面积</span>
                                            <span>1000㎡</span>
                                            <span>{{buildingInfo.roomRentArea}}㎡</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 50%; margin-top: 15px;">
                                            <span>计费面积</span>
                                            <span>1000㎡</span>
                                            <span>{{buildingInfo.roomFeeArea}}㎡</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>地上层数</span>
                                            <span>5</span>
                                            <span>{{buildingInfo.onFloor}}</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>地下层数</span>
                                            <span>2</span>
                                            <span>{{buildingInfo.underFloor}}</span>
                                        </div>
                                    </div>
                                </el-card>
@@ -298,184 +387,53 @@
                                        <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>
                                        <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">
                            <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"></div>
                                            <span>已出租</span>
                                        </div>
                                        <div class="xm_house_tips_row">
                                            <div class="xm_house_tips_row_d"></div>
                                            <span>未出租</span>
                                        </div>
                                        <div class="xm_house_tips_row">
                                            <div class="xm_house_tips_row_d"></div>
                                            <span>90日内到期</span>
                                        </div>
                                    </div>
                                    <div class="xm_house_list">
                                        <div class="xm_house_list_left">
                                            <div class="xm_house_list_left_row">
                                                <span>1F</span>
                                                <span>600㎡</span>
                                            </div>
                                        </div>
                                        <div class="xm_house_list_right">
                                            <div class="item">
                                                <div class="xm_house_list_right_row">
                                                    <span>101（600㎡）</span>
                                                    <div class="xm_house_list_right_row_info">
                                                        <span>租客名称</span>
                                                        <span>2024-08-16到期</span>
                                                    </div>
                                                </div>
                                                <div class="xm_house_list_right_row">
                                                    <span>101（600㎡）</span>
                                                    <div class="xm_house_list_right_row_info">
                                                        <span>租客名称</span>
                                                        <span>2024-08-16到期</span>
                                                    </div>
                                                </div>
                                                <div class="xm_house_list_right_row">
                                                    <span>101（600㎡）</span>
                                                    <div class="xm_house_list_right_row_info">
                                                        <span>租客名称</span>
                                                        <span>2024-08-16到期</span>
                                                    </div>
                                                </div>
                                                <div class="xm_house_list_right_row">
                                                    <span>101（600㎡）</span>
                                                    <div class="xm_house_list_right_row_info">
                                                        <span>租客名称</span>
                                                        <span>2024-08-16到期</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </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 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
                                                prop="date"
                                                label="工单分类">
                                                label="合同编号">
                                                <template slot-scope="{row}">
                                                    <el-button type="text">{{row.code}}</el-button>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="name"
                                                label="报修区域">
                                                prop="renterName"
                                                label="租客">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="上报人">
                                                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="address"
                                                label="上报时间">
                                                prop="leaseDays"
                                                label="租赁天数">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="处理人">
                                                label="租赁面积">
                                                <template slot-scope="{row}">
                                                    {{row.totalArea}}㎡
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="工单状态">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="操作">
                                                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">
@@ -493,7 +451,107 @@
                                </el-card>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="设备信息" name="third">
                        <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">
@@ -507,122 +565,55 @@
                                    <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-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">查询</el-button>
                                                <el-button>清空</el-button>
                                                <el-button type="primary" @click="getDevicePage">查询</el-button>
                                                <el-button @click="clear">清空</el-button>
                                            </div>
                                            <el-button type="primary">新增</el-button>
                                            <el-button type="primary" @click="handleEdit">新增</el-button>
                                        </div>
                                        <el-table
                                            :data="tableData"
                                            border
                                            v-loading="loading"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="date"
                                                label="工单分类">
                                                label="设备编码">
                                                <template slot-scope="{row}">
                                                    <el-button type="text">{{row.code}}</el-button>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="name"
                                                label="报修区域">
                                                label="设备名称">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="上报人">
                                                prop="categoryName"
                                                label="设备分类">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="上报时间">
                                                prop="modelNo"
                                                label="设备型号">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="处理人">
                                                prop="realName"
                                                label="设备管理员">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="工单状态">
                                                prop="supplier"
                                                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="库存数量">
                                                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">
@@ -644,56 +635,37 @@
                </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 {
        input: '',
        showDetail: false,
        showEdit1: false,
        filterText: '',
        tableData: [],
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        houseList: [],
        activeName: 'first',
        total: 0,
        pageTotal: 10,
@@ -701,66 +673,357 @@
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
        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.$nextTick(() => {
        this.reand()
        this.reand1()
      })
      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: {
            top: '5%',
            left: 'center'
            left: 'right',
            top: 'middle',
            width: '80'
          },
          series: [
            {
              name: 'Access From',
              name: '设备状态',
              type: 'pie',
              radius: ['40%', '80%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
                show: true,
                position: 'center',
                fontWeight: 'bold',
                fontSize: 22
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: '正常' },
                { value: 735, name: '异常' },
                { value: 580, name: '报废' }
              ]
              data: this.deviceList
            }
          ]
        };
@@ -770,7 +1033,6 @@
        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],
@@ -786,12 +1048,6 @@
          }
          totalData.push(sum);
        }
        const grid = {
          left: 100,
          right: 100,
          top: 50,
          bottom: 50
        };
        const series = [
          'Direct',
          'Mail Ad',
@@ -804,43 +1060,100 @@
            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]
            )
          };
        });
        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 = {
          legend: {
            selectedMode: false
          title: {
            text: '设备数量分类统计'
          },
          grid,
          grid: {
            left: 50,
            right: 50,
            top: 50,
            bottom: 50
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          yAxis: {
            type: 'value'
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data: xAxisData
          },
          series
          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()
        }
      },
      handleNodeClick(data) {
        console.log(data);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      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()
        }
      }
    }
  }
@@ -866,6 +1179,10 @@
                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;
@@ -875,10 +1192,12 @@
                    width: 100%;
                    padding: 20px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    background: #ffffff;
                    font-size: 16px;
                    font-weight: bold;
                    color: black;
                    background: #ffffff;
                }
                .right_cate {
                    width: 100%;
@@ -893,7 +1212,6 @@
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            align-items: self-end;
                            .xm_house_list {
                                width: 100%;
                                display: flex;
@@ -903,12 +1221,12 @@
                                    flex-shrink: 0;
                                    width: 100px;
                                    display: flex;
                                    margin-right: 20px;
                                    margin-right: 15px;
                                    flex-direction: column;
                                    .xm_house_list_left_row {
                                        width: 100px;
                                        height: 100px;
                                        background: rgba(242, 242, 242, 1);
                                        background: #F4F7FC;
                                        padding: 20px 0;
                                        box-sizing: border-box;
                                        margin-bottom: 20px;
@@ -921,56 +1239,66 @@
                                        }
                                        span {
                                            &:nth-child(1) {
                                                font-weight: 500;
                                                font-size: 18px;
                                                color: #333333;
                                                font-weight: 400;
                                                color: #000000;
                                            }
                                            &:nth-child(2) {
                                                font-size: 12px;
                                                color: #929292;
                                                font-weight: 400;
                                                font-size: 14px;
                                                color: #999999;
                                                margin-top: 10px;
                                            }
                                        }
                                    }
                                }
                                .xm_house_list_right {
                                    width: calc(100% - 130px);
                                    display: flex;
                                    flex-direction: column;
                                    .item {
                                        width: calc(100% - 130px);
                                    align-items: center;
                                    .xm_house_list_right_row {
                                        height: 100px;
                                        padding: 12px 15px;
                                        box-sizing: border-box;
                                        display: flex;
                                        align-items: center;
                                        margin-bottom: 20px;
                                        flex-direction: column;
                                        justify-content: space-between;
                                        margin-right: 10px;
                                        &:last-child {
                                            margin-bottom: 0;
                                            margin: 0 !important;
                                        }
                                        .xm_house_list_right_row {
                                            height: 100px;
                                            width: 300px;
                                            background: rgba(198, 224, 167, 0.34509803921568627);
                                            padding: 10px 0;
                                            box-sizing: border-box;
                                        .ft {
                                            display: flex;
                                            align-items: center;
                                            flex-direction: column;
                                            justify-content: space-between;
                                            span {
                                                font-size: 14px;
                                                color: #000000;
                                                &: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_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_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;
                                                }
                                            }
                                        }
@@ -981,18 +1309,20 @@
                                display: flex;
                                align-items: center;
                                .xm_house_tips_row {
                                    margin-left: 30px;
                                    display: flex;
                                    align-items: center;
                                    margin-right: 30px;
                                    .xm_house_tips_row_d {
                                        width: 10px;
                                        height: 10px;
                                        width: 20px;
                                        height: 20px;
                                        background: orange;
                                        margin-right: 5px;
                                        margin-right: 8px;
                                        border-radius: 2px;
                                    }
                                    span {
                                        font-size: 16px;
                                        color: black;
                                        font-weight: 400;
                                        font-size: 13px;
                                        color: #333333;
                                    }
                                }
                            }