|  |  | 
 |  |  |         width="100%"> | 
 |  |  |         <div class="right"> | 
 |  |  |             <div class="right_head"> | 
 |  |  |                 <span>{{info.roomNum}}</span> | 
 |  |  |                 <el-tag type="success" v-if="info.leaseStatus === 0">待租赁</el-tag> | 
 |  |  |                 <el-tag type="success" v-if="info.leaseStatus === 1">已租赁</el-tag> | 
 |  |  |                 <el-tag type="success" v-if="info.leaseStatus === 2">未开启租赁</el-tag> | 
 |  |  |                 <span class="right_head_title">{{info.roomNum}}</span> | 
 |  |  |                 <el-tag type="info" v-if="info.leaseStatus == 0">待租赁</el-tag> | 
 |  |  |                 <el-tag type="success" v-if="info.leaseStatus == 1">已租赁</el-tag> | 
 |  |  |                 <el-tag type="info" v-if="info.leaseStatus == 2">未开启租赁</el-tag> | 
 |  |  |             </div> | 
 |  |  |             <div class="right_cate"> | 
 |  |  |                 <el-tabs v-model="activeName" @tab-click="handleClick"> | 
 |  |  | 
 |  |  |                     <el-tab-pane label="租客合同" name="project"> | 
 |  |  |                         <div class="xm"> | 
 |  |  |                             <el-card style="margin-top: 20px;"> | 
 |  |  |                                 <div slot="header" class="clearfix"> | 
 |  |  |                                     <span>当前在租合同</span> | 
 |  |  |                                 </div> | 
 |  |  |                                 <div class="xm_table"> | 
 |  |  |                                     <div style="width: 100%; display: flex; align-items: center; margin-bottom: 15px;"> | 
 |  |  |                                         <el-input v-model="form.code" style="width: 300px;" placeholder="请输入合同编号"></el-input> | 
 |  |  | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             label="合同编号"> | 
 |  |  |                                             <template slot-scope="{row}"> | 
 |  |  |                                                 <el-button type="text" @click="$refs.ContractDetailRef.open('合同详情', row.id)" v-if="row.status === 1">{{row.code}}</el-button> | 
 |  |  |                                                 <el-button type="text" v-else>{{row.code}}</el-button> | 
 |  |  |                                                 <el-button type="text" @click="$refs.ContractDetailRef.open('合同详情', row.id)">{{row.code}}</el-button> | 
 |  |  |                                             </template> | 
 |  |  |                                         </el-table-column> | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             prop="renterName" | 
 |  |  |                                             label="客户名称"> | 
 |  |  |                                             <template slot-scope="{row}"> | 
 |  |  |                                                 <div style="display: flex; align-items: center;"> | 
 |  |  |                                                     {{row.renterName}} | 
 |  |  |                                                     <el-tag type="success" v-if="[1,2,3].includes(row.status)">当前租户</el-tag> | 
 |  |  |                                                 </div> | 
 |  |  |                                             </template> | 
 |  |  |                                         </el-table-column> | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             prop="startDate" | 
 |  |  | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             prop="signDate" | 
 |  |  |                                             label="签订日"> | 
 |  |  |                                         </el-table-column> | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             prop="address" | 
 |  |  |                                             label="合同来源"> | 
 |  |  |                                         </el-table-column> | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             label="合同状态"> | 
 |  |  | 
 |  |  |                                                     value: 'id', | 
 |  |  |                                                     children: 'childCategoryList' | 
 |  |  |                                                 }" /> | 
 |  |  |                                             <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-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="getFetchList">查询</el-button> | 
 |  |  |                                             <el-button @click="clear">清空</el-button> | 
 |  |  |                                         </div> | 
 |  |  |                                         <el-button type="primary" @click="$refs.operaYwWorkorderWindow.open('新建工单')">新增工单</el-button> | 
 |  |  |                                         <el-button type="primary" @click="addWorkOrder">新增工单</el-button> | 
 |  |  |                                     </div> | 
 |  |  |                                     <el-table | 
 |  |  |                                         :data="tableData" | 
 |  |  | 
 |  |  |                         <div class="xm"> | 
 |  |  |                             <div class="xm_chat"> | 
 |  |  |                                 <el-card class="xm_chat_row"> | 
 |  |  |                                     <div id="chat1"></div> | 
 |  |  |                                     <div class="xm_chat_row_info"> | 
 |  |  |                                         <span>总计</span> | 
 |  |  |                                         <span>{{amount}}</span> | 
 |  |  |                                     </div> | 
 |  |  |                                     <div id="chat1" v-if="activeName === 'third'"></div> | 
 |  |  |                                 </el-card> | 
 |  |  |                                 <el-card class="xm_chat_row"> | 
 |  |  |                                     <div id="chat2"></div> | 
 |  |  |                                     <div id="chat2" v-if="activeName === 'third'"></div> | 
 |  |  |                                 </el-card> | 
 |  |  |                             </div> | 
 |  |  |                             <el-card style="margin-top: 20px;"> | 
 |  |  | 
 |  |  |                             </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="form.code" 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" @click="getPropertyLists">查询</el-button> | 
 |  |  |                                             <el-button @click="clear">清空</el-button> | 
 |  |  |                                         </div> | 
 |  |  |                                         <el-button type="primary" @click="$refs.newMaterial.open('新建物料')">新增</el-button> | 
 |  |  |                                     </div> | 
 |  |  |                                     <el-table | 
 |  |  |                                         :data="tableData" | 
 |  |  |                                         border | 
 |  |  |                                         v-loading="loading" | 
 |  |  |                                         style="width: 100%"> | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             prop="code" | 
 |  |  |                                             label="资产编码"> | 
 |  |  |                                         </el-table-column> | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             prop="name" | 
 |  |  |                                             label="资产名称"> | 
 |  |  |                                         </el-table-column> | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             prop="qrcode" | 
 |  |  |                                             label="条码"> | 
 |  |  |                                         </el-table-column> | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             prop="brand" | 
 |  |  |                                             label="品牌"> | 
 |  |  |                                         </el-table-column> | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             prop="attr" | 
 |  |  |                                             label="规格型号"> | 
 |  |  |                                         </el-table-column> | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             prop="unitName" | 
 |  |  |                                             label="单位"> | 
 |  |  |                                         </el-table-column> | 
 |  |  |                                         <el-table-column | 
 |  |  |                                             label="库存数量"> | 
 |  |  |                                             <template v-slot="scope"> | 
 |  |  |                                                 <span>{{ scope.row.maxStock }} ~ {{ scope.row.minStock }}</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> | 
 |  |  | 
 |  |  |           areaIds: [], | 
 |  |  |           cateId: '', | 
 |  |  |           status: '', | 
 |  |  |           name: '' | 
 |  |  |           name: '', | 
 |  |  |           dealStatus: '' | 
 |  |  |         }, | 
 |  |  |         cateList: [], | 
 |  |  |         categaryList: [], | 
 |  |  |         deviceList: [], | 
 |  |  |         showDetail: false, | 
 |  |  |         showEdit1: false | 
 |  |  |         showEdit1: false, | 
 |  |  |         amount: 0 | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     methods: { | 
 |  |  |       open (title, id) { | 
 |  |  |         this.title = title | 
 |  |  |         this.activeName = 'houseinfo' | 
 |  |  |         this.houseId = id | 
 |  |  |         detailById(id) | 
 |  |  |           .then(res => { | 
 |  |  | 
 |  |  |       handleEdit(row) { | 
 |  |  |         this.showEdit1 = true | 
 |  |  |         this.$nextTick(() => { | 
 |  |  |           this.$refs.EditRef.param.projectId = this.info.projectId | 
 |  |  |           this.$refs.EditRef.param.rooms = [this.info.projectId, this.info.buildingId, this.info.floor, this.info.id] | 
 |  |  |           this.$refs.EditRef.isShowModal = true | 
 |  |  |           this.$refs.EditRef.changeProject() | 
 |  |  |           this.$refs.EditRef.getHouseVal([this.info.projectId, this.info.buildingId, this.info.floor, this.info.id]) | 
 |  |  |         }) | 
 |  |  |       }, | 
 |  |  |       handleDetail(row) { | 
 |  |  | 
 |  |  |           this.$refs.DetailRef.getDetail() | 
 |  |  |         }) | 
 |  |  |       }, | 
 |  |  |       addWorkOrder() { | 
 |  |  |         this.$refs.operaYwWorkorderWindow.open('新建工单', { | 
 |  |  |           rooms: [this.info.projectId, this.info.buildingId, this.info.floor, this.info.id], | 
 |  |  |           areaType: 0, | 
 |  |  |           content: '', | 
 |  |  |           projectId: this.info.projectId, | 
 |  |  |           buildingId: this.info.buildingId, | 
 |  |  |           floorId: this.info.floor, | 
 |  |  |           roomId: this.info.id | 
 |  |  |         }) | 
 |  |  |       }, | 
 |  |  |       // 获取设备状态 | 
 |  |  |       getDevice() { | 
 |  |  |         getDeviceStatus({ roomId: this.houseId }) | 
 |  |  | 
 |  |  |               this.$nextTick(() => { | 
 |  |  |                 this.deviceList = [ | 
 |  |  |                   { value: res.workAmount || 0, name: '正常' }, | 
 |  |  |                   { value: res.exceptionAmount || 0, name: '异常' }, | 
 |  |  |                   { value: res.exceptionAmount || 0, name: '损坏' }, | 
 |  |  |                   { value: res.errAmount || 0, name: '报废' } | 
 |  |  |                 ] | 
 |  |  |                 this.amount = res.amount | 
 |  |  |                 this.reand() | 
 |  |  |               }) | 
 |  |  |             }) | 
 |  |  | 
 |  |  |         this.form.status = '' | 
 |  |  |         this.form.areaIds = [] | 
 |  |  |         this.form.cateId = '' | 
 |  |  |         this.form.dealStatus = '' | 
 |  |  |         this.form.name = '' | 
 |  |  |         if (this.propsName === 'project') { | 
 |  |  |           this.getTenantContract() | 
 |  |  | 
 |  |  |           page: 1, | 
 |  |  |           model: { | 
 |  |  |             roomId: this.houseId, | 
 |  |  |             status: this.form.status, | 
 |  |  |             dealStatus: this.form.dealStatus, | 
 |  |  |             cateId: this.form.cateId | 
 |  |  |           } | 
 |  |  |         }).then(res => { | 
 |  |  | 
 |  |  |           capacity: this.pageTotal, | 
 |  |  |           page: this.page, | 
 |  |  |           model: { | 
 |  |  |             roomIds: [this.houseId], | 
 |  |  |             roomId: this.houseId, | 
 |  |  |             code: this.form.code | 
 |  |  |           } | 
 |  |  |         }).then(res => { | 
 |  |  | 
 |  |  |             { | 
 |  |  |               name: '设备状态', | 
 |  |  |               type: 'pie', | 
 |  |  |               radius: ['40%', '80%'], | 
 |  |  |               label: { | 
 |  |  |                 show: true, | 
 |  |  |                 position: 'center', | 
 |  |  |                 fontWeight: 'bold', | 
 |  |  |                 fontSize: 22 | 
 |  |  |               }, | 
 |  |  |               radius: ['50%', '80%'], | 
 |  |  |               data: this.deviceList | 
 |  |  |             } | 
 |  |  |           ] | 
 |  |  | 
 |  |  |         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 seriesArr = [] | 
 |  |  |         this.categaryList.forEach((one, index) => { | 
 |  |  |           one.ywDeviceCateDataVOList.forEach(two => { | 
 |  |  |             let data = [] | 
 |  |  |             this.categaryList.forEach(item => { | 
 |  |  |               data.push(0) | 
 |  |  |             }) | 
 |  |  |             data[index] = two.deviceAmount | 
 |  |  |             seriesArr.push({ | 
 |  |  |               name: two.cateName, | 
 |  |  |               type: 'bar', | 
 |  |  |               barGap:-1, | 
 |  |  |               stack: one.cateName, | 
 |  |  |               data | 
 |  |  |             }) | 
 |  |  |           }) | 
 |  |  |         }) | 
 |  |  |         let xAxisData = this.categaryList.map(item => item.cateName) | 
 |  |  |         console.log(series) | 
 |  |  |         console.log(seriesArr) | 
 |  |  |         console.log(xAxisData) | 
 |  |  |         option = { | 
 |  |  |           title: { | 
 |  |  |             text: '设备数量分类统计' | 
 |  |  | 
 |  |  |             trigger: 'axis', | 
 |  |  |             axisPointer: { | 
 |  |  |               type: 'shadow' | 
 |  |  |             }, | 
 |  |  |             formatter: params => { | 
 |  |  |               var res = `${params[0].name} <br/>` | 
 |  |  |               for (const item of params) { | 
 |  |  |                 if (item.value !== 0) { | 
 |  |  |                   res += `<span style="background: ${item.color}; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${item.seriesName} :${item.value}<br/>` | 
 |  |  |                 } | 
 |  |  |               } | 
 |  |  |               return res | 
 |  |  |             } | 
 |  |  |           }, | 
 |  |  |           yAxis: { | 
 |  |  |             type: 'value' | 
 |  |  |           }, | 
 |  |  |           xAxis: { | 
 |  |  |             type: 'category', | 
 |  |  |             data: xAxisData | 
 |  |  |           }, | 
 |  |  |           xAxis: [ | 
 |  |  |             { | 
 |  |  |               type: 'category', | 
 |  |  |               position: 'bottom', | 
 |  |  |               data: xAxisData | 
 |  |  |             } | 
 |  |  |           ], | 
 |  |  |           yAxis: [ | 
 |  |  |             { | 
 |  |  |               type: 'value', | 
 |  |  |               data: Array.from({ length: 100 }, (_, i) => i + 1) | 
 |  |  |             } | 
 |  |  |           ], | 
 |  |  |           series: seriesArr | 
 |  |  |         }; | 
 |  |  |  | 
 |  |  | 
 |  |  |         this.form.cateId = '' | 
 |  |  |         this.form.status = '' | 
 |  |  |         this.form.name = '' | 
 |  |  |         this.form.dealStatus = '' | 
 |  |  |         this.propsName = tab._props.name | 
 |  |  |         if (tab._props.name === 'project') { | 
 |  |  |           this.getTenantContract() | 
 |  |  | 
 |  |  |           this.getTenantContract() | 
 |  |  |         } else if (this.propsName === 'second') { | 
 |  |  |           this.getFetchList() | 
 |  |  |         } else if (tab._props.name === 'third') { | 
 |  |  |         } else if (this.propsName === 'third') { | 
 |  |  |           this.getDevicePage() | 
 |  |  |         } else if (this.propsName === 'fourth') { | 
 |  |  |           this.getPropertyLists() | 
 |  |  | 
 |  |  |           this.getTenantContract() | 
 |  |  |         } else if (this.propsName === 'second') { | 
 |  |  |           this.getFetchList() | 
 |  |  |         } else if (tab._props.name === 'third') { | 
 |  |  |         } else if (tab.propsName === 'third') { | 
 |  |  |           this.getDevicePage() | 
 |  |  |         } else if (this.propsName === 'fourth') { | 
 |  |  |           this.getPropertyLists() | 
 |  |  | 
 |  |  |             width: 100%; | 
 |  |  |             padding: 20px; | 
 |  |  |             box-sizing: border-box; | 
 |  |  |             span { | 
 |  |  |             .right_head_title { | 
 |  |  |                 font-size: 16px; | 
 |  |  |                 font-weight: bold; | 
 |  |  |                 color: black; | 
 |  |  | 
 |  |  |                     .xm_chat_row { | 
 |  |  |                         width: 49%; | 
 |  |  |                         height: 300px; | 
 |  |  |                         position: relative; | 
 |  |  |                         .xm_chat_row_info { | 
 |  |  |                             position: absolute; | 
 |  |  |                             top: 50%; | 
 |  |  |                             left: 50%; | 
 |  |  |                             transform: translate(-50%, -50%); | 
 |  |  |                             display: flex; | 
 |  |  |                             flex-direction: column; | 
 |  |  |                             align-items: center; | 
 |  |  |                             justify-content: center; | 
 |  |  |                             span { | 
 |  |  |                                 &:nth-child(1) { | 
 |  |  |                                     font-size: 20px; | 
 |  |  |                                     color: #222222; | 
 |  |  |                                 } | 
 |  |  |                                 &:nth-child(2) { | 
 |  |  |                                     font-size: 28px; | 
 |  |  |                                     color: #222222; | 
 |  |  |                                     font-weight: bold; | 
 |  |  |                                 } | 
 |  |  |                             } | 
 |  |  |                         } | 
 |  |  |                         #chat1 { | 
 |  |  |                             width: 100%; | 
 |  |  |                             height: 260px; |