| | |
| | | <template> |
| | | <GlobalWindow |
| | | title="楼宇详情" |
| | | :title="title" |
| | | :showConfirm="false" |
| | | :visible.sync="visible" |
| | | width="800px"> |
| | | width="100%"> |
| | | <div class="right"> |
| | | <div class="right_head">项目名称</div> |
| | | <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> |
| | | </div> |
| | | <div class="right_cate"> |
| | | <el-tabs v-model="activeName" @tab-click="handleClick"> |
| | | <el-tab-pane label="房源信息" name="houseinfo"> |
| | |
| | | <div class="xm_info"> |
| | | <div class="xm_info_row" style="width: 25%;"> |
| | | <span>所属项目</span> |
| | | <span>XXXXXXXXXX</span> |
| | | <span>{{info.projectName}}</span> |
| | | </div> |
| | | <div class="xm_info_row" style="width: 25%;"> |
| | | <span>楼宇</span> |
| | | <span>综合楼</span> |
| | | <span>{{info.buildingName}}</span> |
| | | </div> |
| | | <div class="xm_info_row" style="width: 25%;"> |
| | | <span>楼层</span> |
| | | <span>1</span> |
| | | <span>{{info.floorName}}</span> |
| | | </div> |
| | | <div class="xm_info_row" style="width: 25%;"> |
| | | <span>房号</span> |
| | | <span>101活动室</span> |
| | | <span>{{info.roomNum}}</span> |
| | | </div> |
| | | <div class="xm_info_row" style="width: 25%; margin-top: 15px;"> |
| | | <span>房间编号</span> |
| | | <span>101</span> |
| | | <span>{{info.code}}</span> |
| | | </div> |
| | | <div class="xm_info_row" style="width: 25%; margin-top: 15px;"> |
| | | <span>是否招商</span> |
| | | <span>否</span> |
| | | <span v-if="info.isInvestment === 0">否</span> |
| | | <span v-if="info.isInvestment === 1">是</span> |
| | | </div> |
| | | <div class="xm_info_row" style="width: 25%; margin-top: 15px;"> |
| | | <span>建筑面积</span> |
| | | <span>50㎡</span> |
| | | <span>{{info.area}}㎡</span> |
| | | </div> |
| | | <div class="xm_info_row" style="width: 25%; margin-top: 15px;"> |
| | | <span>计租面积</span> |
| | | <span>50㎡</span> |
| | | <span>{{info.rentArea}}㎡</span> |
| | | </div> |
| | | <div class="xm_info_row" style="width: 25%; margin-top: 15px;"> |
| | | <span>计费面积</span> |
| | | <span>45㎡</span> |
| | | <span>{{info.feeArea}}㎡</span> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | |
| | | <span>当前在租合同</span> |
| | | </div> |
| | | <div class="xm_table"> |
| | | <el-input v-model="input" style="width: 300px; margin-bottom: 15px;" placeholder="请输入合同编号"></el-input> |
| | | <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-button type="primary" style="margin-left: 15px;" @click="getTenantContract()">搜索</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" @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> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | prop="renterName" |
| | | label="客户名称"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="startDate" |
| | | label="开始日期"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="endDate" |
| | | label="结束日期"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="租赁单价"> |
| | | <template slot-scope="{row}"> |
| | | <div style="display: flex; align-items: center;"> |
| | | <span>{{row.zlFirstPrice || row.wyFirstPrice}}</span> |
| | | <span>{{row.zlFirstCircleStr || row.wyFirstCircleStr}}</span> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="租赁面积(㎡)"> |
| | | <template slot-scope="{row}"> |
| | | {{row.totalArea}}㎡ |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | prop="signDate" |
| | | label="签订日"> |
| | | </el-table-column> |
| | | <el-table-column |
| | |
| | | label="合同来源"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="合同状态"> |
| | | <template slot-scope="{row}"> |
| | | <span class="primaryColor" v-if="row.status === 0">待执行</span> |
| | | <span class="green" v-if="row.status === 1">正常执行中</span> |
| | | <span class="gary" v-if="row.status === 2">已到期</span> |
| | | <span class="gary" v-if="row.status === 3">退租结算中</span> |
| | | <span class="gary" v-if="row.status === 4">已退租</span> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="xm_table_f"> |
| | |
| | | <div class="xm_one1"> |
| | | <div class="xm_one_row"> |
| | | <span>待指派数量</span> |
| | | <span>15</span> |
| | | <span>{{numObj.waitAssignAmount || 0}}</span> |
| | | </div> |
| | | <div class="xm_one_row"> |
| | | <span>待处理数量</span> |
| | | <span>15</span> |
| | | <span>{{numObj.waitDealAmount || 0}}</span> |
| | | </div> |
| | | <div class="xm_one_row"> |
| | | <span>本月工单数</span> |
| | | <span>15</span> |
| | | <span>{{numObj.monthAmount || 0}}</span> |
| | | </div> |
| | | <div class="xm_one_row"> |
| | | <span>累计工单数</span> |
| | | <span>15</span> |
| | | <span>{{numObj.amount || 0}}</span> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | <el-card style="margin-top: 20px;"> |
| | | <div class="xm_table"> |
| | | <div class="xm_table_search"> |
| | | <el-select v-model="value" style="width: 300px; margin-right: 15px;" placeholder="位置类型"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | <el-select v-model="value" style="width: 300px;" placeholder="工单分类"> |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | <div> |
| | | <el-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.status" style="width: 150px; margin-right: 15px;" placeholder="工单状态"> |
| | | <el-option label="启用" :value="0"></el-option> |
| | | <el-option label="禁用" :value="1"></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> |
| | | </div> |
| | | <el-table |
| | | :data="tableData" |
| | | border |
| | | style="width: 100%"> |
| | | :data="tableData" |
| | | border |
| | | v-loading="loading" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | prop="date" |
| | | label="工单分类"> |
| | | prop="categoryName" |
| | | label="工单分类"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="报修区域"> |
| | | 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="address" |
| | | label="上报人"> |
| | | prop="creatorName" |
| | | label="上报人"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="上报时间"> |
| | | prop="createDate" |
| | | label="上报时间"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="处理人"> |
| | | prop="dealUserName" |
| | | label="处理人"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="工单状态"> |
| | | 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 |
| | | prop="address" |
| | | label="操作"> |
| | | 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"> |
| | | @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> |
| | |
| | | <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: 200px; 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 |
| | | style="width: 100%"> |
| | | :data="tableData" |
| | | border |
| | | v-loading="loading" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | prop="date" |
| | | label="工单分类"> |
| | | prop="code" |
| | | label="设备编码"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="报修区域"> |
| | | prop="name" |
| | | 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="操作"> |
| | | label="设备状态"> |
| | | <template slot-scope="{row}"> |
| | | <span v-if="row.status === 0">正常</span> |
| | | <span v-if="row.status === 1">损坏</span> |
| | | <span v-if="row.status === 2">报废</span> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="xm_table_f"> |
| | | <el-pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="page" |
| | | :page-sizes="[10, 20, 30, 40]" |
| | | :page-size="pageTotal" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="total"> |
| | | @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> |
| | |
| | | <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-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"> |
| | | 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> |
| | | <el-button type="primary" @click="getPropertyLists">查询</el-button> |
| | | <el-button @click="clear">清空</el-button> |
| | | </div> |
| | | <el-button type="primary">新增</el-button> |
| | | <el-button type="primary" @click="$refs.newMaterial.open('新建物料')">新增</el-button> |
| | | </div> |
| | | <el-table |
| | | :data="tableData" |
| | | border |
| | | style="width: 100%"> |
| | | :data="tableData" |
| | | border |
| | | v-loading="loading" |
| | | style="width: 100%"> |
| | | <el-table-column |
| | | prop="date" |
| | | label="资产编码"> |
| | | prop="code" |
| | | label="资产编码"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="资产名称"> |
| | | prop="name" |
| | | label="资产名称"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="条码"> |
| | | prop="qrcode" |
| | | label="条码"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="品牌"> |
| | | prop="brand" |
| | | label="品牌"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="规格型号"> |
| | | prop="attr" |
| | | label="规格型号"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="单位"> |
| | | prop="unitName" |
| | | label="单位"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="库存数量"> |
| | | 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"> |
| | | @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-tabs> |
| | | </div> |
| | | </div> |
| | | <!-- 合同详情 --> |
| | | <ContractDetail ref="ContractDetailRef" /> |
| | | <!-- 工单详情 --> |
| | | <Detail v-if="showDetail" ref="DetailRef" @close="showDetail = false" /> |
| | | <!-- 新建工单 --> |
| | | <OperaYwWorkorderWindow ref="operaYwWorkorderWindow" @success="getFetchList" /> |
| | | <!-- 新建设备 --> |
| | | <Edit v-if="showEdit1" ref="EditRef" @success="getDevicePage" @close="showEdit1 = false" /> |
| | | <!-- 新建资产 --> |
| | | <newMaterial ref="newMaterial" @success="getPropertyLists" /> |
| | | </GlobalWindow> |
| | | </template> |
| | | |
| | | <script> |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import newMaterial from '../../stock/components/newMaterial' |
| | | import * as echarts from 'echarts'; |
| | | import { detailById } from '@/api/project/ywRoom' |
| | | import { fetchList as TenantContract } from '@/api/contract' |
| | | import { getDataVO, fetchList } from '@/api/workorder/ywWorkorder' |
| | | import ContractDetail from '../../contract/components/contractDetail' |
| | | import { fetchList as getCateList } from '@/api/business/category.js' |
| | | import { fetchList as getPropertyList } from '@/api/ywMaterial' |
| | | import { getDeviceStatus, getDeviceCateData, fetchList as devicePage } from '@/api/Inspection/device' |
| | | import Detail from '../../workorder/components/detail' |
| | | import OperaYwWorkorderWindow from '../../workorder/components/OperaYwWorkorderWindow' |
| | | import Edit from '../../operation/components/deviceEdit' |
| | | export default { |
| | | name: "houseDetails", |
| | | extends: BaseOpera, |
| | | components: { GlobalWindow }, |
| | | components: { GlobalWindow, ContractDetail, Detail, OperaYwWorkorderWindow, Edit, newMaterial }, |
| | | data() { |
| | | return { |
| | | info: {}, |
| | | houseId: '', |
| | | propsName: '', |
| | | activeName: 'houseinfo', |
| | | total: 0, |
| | | pageTotal: 10, |
| | | page: 1, |
| | | tableData: [] |
| | | numObj: {}, |
| | | tableData: [], |
| | | loading: false, |
| | | form: { |
| | | code: '', |
| | | areaIds: [], |
| | | cateId: '', |
| | | status: '', |
| | | name: '' |
| | | }, |
| | | cateList: [], |
| | | categaryList: [], |
| | | deviceList: [], |
| | | showDetail: false, |
| | | showEdit1: false |
| | | } |
| | | }, |
| | | methods: { |
| | | open (title, target) { |
| | | open (title, id) { |
| | | this.title = title |
| | | this.visible = true |
| | | this.houseId = id |
| | | detailById(id) |
| | | .then(res => { |
| | | this.info = res |
| | | this.visible = true |
| | | }) |
| | | }, |
| | | handleEdit(row) { |
| | | this.showEdit1 = true |
| | | this.$nextTick(() => { |
| | | this.reand() |
| | | this.reand1() |
| | | this.$refs.EditRef.isShowModal = true |
| | | }) |
| | | }, |
| | | handleDetail(row) { |
| | | this.showDetail = true |
| | | this.$nextTick(() => { |
| | | this.$refs.DetailRef.visible = true |
| | | this.$refs.DetailRef.id = row.id |
| | | this.$refs.DetailRef.getDetail() |
| | | }) |
| | | }, |
| | | // 获取设备状态 |
| | | getDevice() { |
| | | getDeviceStatus({ roomId: this.houseId }) |
| | | .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({ |
| | | roomId: this.houseId |
| | | }).then(res => { |
| | | this.categaryList = res |
| | | this.$nextTick(() => { |
| | | this.reand1() |
| | | }) |
| | | }) |
| | | }, |
| | | // 获取设备分页 |
| | | getDevicePage() { |
| | | this.loading = true |
| | | devicePage({ |
| | | capacity: this.pageTotal, |
| | | page: this.page, |
| | | model: { |
| | | roomId: this.houseId, |
| | | status: this.form.status, |
| | | name: this.form.name |
| | | } |
| | | }).then(res => { |
| | | this.tableData = res.records |
| | | this.total = res.total |
| | | }).finally(() => { |
| | | this.loading = false |
| | | }) |
| | | }, |
| | | // 获取资产列表 |
| | | getPropertyLists() { |
| | | this.loading = true |
| | | getPropertyList({ |
| | | capacity: this.pageTotal, |
| | | page: this.page, |
| | | model: { |
| | | roomId: this.houseId, |
| | | name: this.form.name |
| | | } |
| | | }).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 || [] |
| | | }) |
| | | }, |
| | | changeSel(e) { |
| | | if (e && e.length == 2) { |
| | | this.$set(this.form, 'cateId', e[1]) |
| | | } else { |
| | | this.$set(this.form, 'cateId', '') |
| | | } |
| | | }, |
| | | clear() { |
| | | this.page = 1 |
| | | this.form.status = '' |
| | | this.form.areaIds = [] |
| | | this.form.cateId = '' |
| | | this.form.name = '' |
| | | if (this.propsName === 'project') { |
| | | this.getTenantContract() |
| | | } else if (this.propsName === 'second') { |
| | | this.getFetchList() |
| | | } else if (this.propsName === 'third') { |
| | | this.getDevicePage() |
| | | } else if (this.propsName === 'fourth') { |
| | | this.getPropertyLists() |
| | | } |
| | | }, |
| | | // 获取工单数 |
| | | getDataVOs() { |
| | | getDataVO({ |
| | | queryId: this.houseId, |
| | | queryType: 3 |
| | | }).then(res => { |
| | | this.numObj = res |
| | | }) |
| | | }, |
| | | // 获取工单列表 |
| | | getFetchList() { |
| | | this.loading = true |
| | | fetchList({ |
| | | capacity: 10, |
| | | page: 1, |
| | | model: { |
| | | roomId: this.houseId, |
| | | status: this.form.status, |
| | | cateId: this.form.cateId |
| | | } |
| | | }).then(res => { |
| | | this.tableData = res.records |
| | | this.total = res.total |
| | | }).finally(() => { |
| | | this.loading = false |
| | | }) |
| | | }, |
| | | // 获取合同分页 |
| | | getTenantContract() { |
| | | this.loading = true |
| | | TenantContract({ |
| | | capacity: this.pageTotal, |
| | | page: this.page, |
| | | model: { |
| | | roomIds: [this.houseId], |
| | | code: this.form.code |
| | | } |
| | | }).then(res => { |
| | | this.tableData = res.records |
| | | this.total = res.total |
| | | }).finally(() => { |
| | | this.loading = false |
| | | }) |
| | | }, |
| | | reand() { |
| | |
| | | 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 |
| | | } |
| | | ] |
| | | }; |
| | |
| | | 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], |
| | |
| | | } |
| | | totalData.push(sum); |
| | | } |
| | | const grid = { |
| | | left: 100, |
| | | right: 100, |
| | | top: 50, |
| | | bottom: 50 |
| | | }; |
| | | const series = [ |
| | | 'Direct', |
| | | 'Mail Ad', |
| | |
| | | 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); |
| | | }, |
| | | handleClick(tab, event) { |
| | | console.log(tab, event); |
| | | handleClick(tab) { |
| | | this.page = 1 |
| | | this.pageTotal = 10 |
| | | this.tableData = [] |
| | | this.total = 0 |
| | | this.form.code = '' |
| | | this.form.areaIds = [] |
| | | this.form.cateId = '' |
| | | this.form.status = '' |
| | | this.form.name = '' |
| | | this.propsName = tab._props.name |
| | | if (tab._props.name === 'project') { |
| | | this.getTenantContract() |
| | | } else if (tab._props.name === 'second') { |
| | | this.getDataVOs() |
| | | this.getCate() |
| | | this.getFetchList() |
| | | } else if (tab._props.name === 'third') { |
| | | this.getDevice() |
| | | this.getDeviceCateDatas() |
| | | this.getDevicePage() |
| | | } else if (this.propsName === 'fourth') { |
| | | this.getPropertyLists() |
| | | } |
| | | }, |
| | | handleCurrentChange(page) { |
| | | this.page = page |
| | | if (this.propsName === 'project') { |
| | | this.getTenantContract() |
| | | } else if (this.propsName === 'second') { |
| | | this.getFetchList() |
| | | } else if (tab._props.name === 'third') { |
| | | this.getDevicePage() |
| | | } else if (this.propsName === 'fourth') { |
| | | this.getPropertyLists() |
| | | } |
| | | }, |
| | | handleSizeChange(pageTotal) { |
| | | this.pageTotal = pageTotal |
| | | }, |
| | | if (this.propsName === 'project') { |
| | | this.getTenantContract() |
| | | } else if (this.propsName === 'second') { |
| | | this.getFetchList() |
| | | } else if (tab._props.name === 'third') { |
| | | this.getDevicePage() |
| | | } else if (this.propsName === 'fourth') { |
| | | this.getPropertyLists() |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | width: 100%; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | color: black; |
| | | background: #ffffff; |
| | | span { |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | color: black; |
| | | background: #ffffff; |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | .right_cate { |
| | | width: 100%; |