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