开发更新

jiangping

2025-06-06 a2299a6d4a6f99e9c11132138f5d3e9ec68f03ea

 admin/src/views/project/components/houseDetails.vue

@@ -1,11 +1,16 @@
<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 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="houseinfo">
@@ -17,39 +22,40 @@
                                <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>
@@ -58,50 +64,67 @@
                    <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">
                                    <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)">{{row.code}}</el-button>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="name"
                                            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="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
                                            prop="address"
                                            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">
@@ -125,84 +148,94 @@
                                <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.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="addWorkOrder">新增工单</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>
@@ -213,143 +246,78 @@
                        <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;">
                                <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">
                                        </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="库存数量">
                                        </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>
@@ -359,34 +327,242 @@
                </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: '',
          dealStatus: ''
        },
        cateList: [],
        categaryList: [],
        deviceList: [],
        showDetail: false,
        showEdit1: false,
        amount: 0
      }
    },
    methods: {
      open (title, target) {
      open (title, id) {
        this.title = title
        this.visible = true
        this.activeName = 'houseinfo'
        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.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.showDetail = true
        this.$nextTick(() => {
          this.$refs.DetailRef.visible = true
          this.$refs.DetailRef.id = row.id
          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 })
            .then(res => {
              this.$nextTick(() => {
                this.deviceList = [
                  { value: res.workAmount || 0, name: '正常' },
                  { value: res.exceptionAmount || 0, name: '损坏' },
                  { value: res.errAmount || 0, name: '报废' }
                ]
                this.amount = res.amount
                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.dealStatus = ''
        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,
            dealStatus: this.form.dealStatus,
            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: {
            roomId: this.houseId,
            code: this.form.code
          }
        }).then(res => {
          this.tableData = res.records
          this.total = res.total
        }).finally(() => {
          this.loading = false
        })
      },
      reand() {
@@ -394,38 +570,23 @@
        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'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1048, name: '正常' },
                { value: 735, name: '异常' },
                { value: 580, name: '报废' }
              ]
              radius: ['50%', '80%'],
              data: this.deviceList
            }
          ]
        };
@@ -435,75 +596,117 @@
        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],
          [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 grid = {
          left: 100,
          right: 100,
          top: 50,
          bottom: 50
        };
        const series = [
          'Direct',
          'Mail Ad',
          'Affiliate Ad',
          'Video Ad',
          'Search Engine'
        ].map((name, sid) => {
          return {
            name,
            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.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)
        option = {
          legend: {
            selectedMode: false
          title: {
            text: '设备数量分类统计'
          },
          grid,
          yAxis: {
            type: 'value'
          grid: {
            left: 50,
            right: 50,
            top: 50,
            bottom: 50
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          tooltip: {
            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
            }
          },
          series
          xAxis: [
            {
              type: 'category',
              position: 'bottom',
              data: xAxisData
            }
          ],
          yAxis: [
            {
              type: 'value',
              data: Array.from({ length: 100 }, (_, i) => i + 1)
            }
          ],
          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.form.dealStatus = ''
        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 (this.propsName === '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.propsName === 'third') {
          this.getDevicePage()
        } else if (this.propsName === 'fourth') {
          this.getPropertyLists()
        }
      }
    }
  }
</script>
@@ -517,10 +720,13 @@
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: bold;
            color: black;
            background: #ffffff;
            .right_head_title {
                font-size: 16px;
                font-weight: bold;
                color: black;
                background: #ffffff;
                margin-right: 10px;
            }
        }
        .right_cate {
            width: 100%;
@@ -647,6 +853,28 @@
                    .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;