Merge remote-tracking branch 'origin/2.0.1' into 2.0.1

renkang

2025-01-09 62e8b7d51ecb749c3f38452af88c703ac86db9cd

Merge remote-tracking branch 'origin/2.0.1' into 2.0.1

 admin/.env.test

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

# ä»»åº·
VUE_APP_API_URL  = 'http://192.168.0.137:10010/'
# VUE_APP_API_URL  = 'http://192.168.0.137:10010/'

# èå§
# VUE_APP_API_URL  = 'http://192.168.0.108:10010/'

# æµ‹è¯•æœåŠ¡
# VUE_APP_API_URL  = 'https://dmtest.ahapp.net/gateway_interface'
VUE_APP_API_URL  = 'https://dmtest.ahapp.net/gateway_interface'

 admin/src/views/contract/components/contractDetail.vue

@@ -16,7 +16,11 @@
          <el-tag type="info" v-if="info.status === 3">退租结算中</el-tag>
          <el-tag type="info" v-if="info.status === 4">已退租</el-tag>
        </div>
        <el-button plain type="danger" v-if="[0, 1, 2].includes(info.status)" @click="refund">退租</el-button>
        <div>
          <el-button type="primary" @click="$refs.pendingBills.open('待处理账单')">查看待处理账单</el-button>
          <el-button @click="$refs.terminationAgreement.open('退租协议')">查看退租协议</el-button>
          <el-button plain type="danger" v-if="[0, 1, 2].includes(info.status)" @click="refund">退租</el-button>
        </div>
      </div>
      <div class="remark" v-if="info">{{info.remark}}</div>
      <div class="remark" v-if="info && info.status === 3">{{info.btRemark}}</div>
@@ -319,6 +323,10 @@
    </div>
    <!--  é€€ç§Ÿ  -->
    <TerminateLease ref="terminateLease" @success="getData" />
    <!--  å¾…处理账单  -->
    <PendingBills ref="pendingBills" />
    <!--  é€€ç§Ÿåè®®  -->
    <TerminationAgreement ref="terminationAgreement" />
  </GlobalWindow>
</template>

@@ -326,12 +334,16 @@
import GlobalWindow from '@/components/common/GlobalWindow'
import BaseOpera from '@/components/base/BaseOpera'
import TerminateLease from './terminateLease'
import PendingBills from './pendingBills'
import TerminationAgreement from './terminationAgreement'
import { getById } from '@/api/contract'
import { fetchList } from '@/api/bill'
export default {
  components: {
    GlobalWindow,
    TerminateLease
    TerminateLease,
    PendingBills,
    TerminationAgreement
  },
  extends: BaseOpera,
  data() {

 admin/src/views/contract/components/pendingBills.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,137 @@
<template>
    <GlobalWindow
        width="100%"
        :title="title"
        :withFooter="false"
        :visible.sync="visible"
        :confirm-working="isWorking"
        @confirm="confirm">
        <div class="zd">
            <div class="zd_list">
                <div class="zd_list_row">
                    <span>待收款账单数</span>
                    <span>2</span>
                </div>
                <div class="zd_list_row">
                    <span>待收款金额</span>
                    <span>ï¿¥247.00</span>
                </div>
                <div class="zd_list_row">
                    <span>待付款账单数</span>
                    <span>3</span>
                </div>
                <div class="zd_list_row">
                    <span>待付款金额</span>
                    <span>ï¿¥247.00</span>
                </div>
            </div>
            <div class="zd_content">
                <div class="zd_content_label">
                    <span>账单</span>
                </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>
        </div>
    </GlobalWindow>
</template>

<script>
  import GlobalWindow from '@/components/common/GlobalWindow'
  import BaseOpera from '@/components/base/BaseOpera'
  export default {
    name: 'pendingBills',
    components: {
      GlobalWindow
    },
    extends: BaseOpera,
    data () {
      return {
        tableData: []
      }
    },
    methods: {
    
    }
  }
</script>

<style lang="scss" scoped>
    .zd {
        width: 100%;
        .zd_list {
            width: 100%;
            background: #f2f2f2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            padding: 20px;
            box-sizing: border-box;
            border-radius: 10px;
            .zd_list_row {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                span {
                    &:nth-child(1) {
                        font-size: 14px;
                        color: #333333;
                    }
                    &:nth-child(2) {
                        font-size: 20px;
                        color: #333333;
                        margin-top: 10px;
                    }
                }
            }
        }
        .zd_content {
            width: 100%;
            margin-top: 20px;
            .zd_content_label {
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                span {
                    font-weight: 500;
                    font-size: 18px;
                    color: #2080f7;
                }
            }
        }
    }
</style>

 admin/src/views/contract/components/terminationAgreement.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,118 @@
<template>
    <GlobalWindow
        :title="title"
        :visible.sync="visible"
        :withFooter="false"
        :confirm-working="isWorking"
        @close="close"
        @confirm="confirm">
        <div class="main">
            <div class="main_head">
                <span>租客：乒乓球俱乐部</span>
                <span>合同编号： 2024-04-001-202405-0019</span>
            </div>
            <div class="title">退租信息</div>
            <div class="list">
                <div class="item">
                    <div class="la">退租类型</div>
                    <div class="val">{{ info.code }}</div>
                </div>
                <div class="item">
                    <div class="la">退租日期</div>
                    <div class="val">{{ info.userName }}</div>
                </div>
                <div class="item">
                    <div class="la">经办人</div>
                    <div class="val">{{ info.creatorName }}</div>
                </div>
                <div class="item">
                    <div class="la">协议签订日期</div>
                    <div class="val">{{ info.totalArea }}㎡</div>
                </div>
                <div class="item">
                    <div class="la">退租原因</div>
                    <div class="val">{{ info.companyName }}</div>
                </div>
            </div>
            <div class="title">房源信息</div>
            <div class="list">
                <el-table :data="roomList" stripe>
                    <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip />
                    <el-table-column prop="buildingName" label="楼宇名称" show-overflow-tooltip />
                    <el-table-column prop="buildingName" label="楼层/房号" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="area" label="面积" show-overflow-tooltip></el-table-column>
                </el-table>
            </div>
        </div>
    </GlobalWindow>
</template>

<script>
  import GlobalWindow from '@/components/common/GlobalWindow'
  import BaseOpera from '@/components/base/BaseOpera'
  export default {
    name: "terminationAgreement",
    components: {
      GlobalWindow
    },
    extends: BaseOpera,
    data() {
      return {
        roomList: [],
        info: {}
      }
    },
    methods: {
    
    }
  }
</script>

<style lang="scss" scoped>
    @import '@/assets/style/variables.scss';
    
    .main {
        .main_head {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 0 0 30px 0;
            box-sizing: border-box;
            span {
                font-size: 15px;
                color: #333333;
                font-weight: 700;
                margin-bottom: 10px;
                &:last-child {
                    margin: 0 !important;
                }
            }
        }
        
        .title {
            font-weight: 500;
            font-size: 18px;
            color: $primary-color;
            margin-bottom: 15px;
        }
        
        .list {
            display: flex;
            flex-wrap: wrap;
            /*background: #F7F7F7;*/
            border-radius: 2px;
            /*padding: 15px 20px;*/
            margin-bottom: 20px;
            
            .item {
                width: 25%;
                margin-bottom: 16px;
                
                .la {
                    color: #7f7f7f;
                    margin-bottom: 10px;
                }
            }
        }
    }
</style>

 admin/src/views/finance/collectionSettings.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
<template>
    
</template>

<script>
  export default {
    name: 'collectionSettings'
  }
</script>


 admin/src/views/finance/components/call.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,60 @@
<template>
    <GlobalWindow
        :title="title"
        :visible.sync="visible"
        width="100%">
        <el-form :model="form" label-position="top" ref="paramRef" :rules="rules">
            <el-form-item label="通知方式" prop="title">
                <el-checkbox-group v-model="form.title">
                    <el-checkbox label="美食/餐厅线上活动" name="1"></el-checkbox>
                    <el-checkbox label="地推活动" name="2"></el-checkbox>
                    <el-checkbox label="线下主题活动" name="3"></el-checkbox>
                    <el-checkbox label="单纯品牌曝光" name="4"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="通知接收人" prop="companyId">
                <div style="display: flex; flex-direction: column;">
                    <div style="display: flex; align-items: center; margin-bottom: 20px;">
                        <span style="font-size: 14px; color: black; margin-right: 10px;">张三</span>
                        <el-select v-model="form.companyId" placeholder="请选择">
                            <el-option label="区域一" value="0"></el-option>
                            <el-option label="区域二" value="1"></el-option>
                        </el-select>
                    </div>
                    <div style="display: flex; align-items: center;">
                        <span style="font-size: 14px; color: black; margin-right: 10px;">XXXX公司</span>
                        <el-select v-model="form.companyId" placeholder="请选择">
                            <el-option label="区域一" value="0"></el-option>
                            <el-option label="区域二" value="1"></el-option>
                        </el-select>
                    </div>
                </div>
            </el-form-item>
        </el-form>
    </GlobalWindow>
</template>

<script>
  import GlobalWindow from '@/components/common/GlobalWindow'
  import BaseOpera from '@/components/base/BaseOpera'
  export default {
    name: "call",
    components: { GlobalWindow },
    extends: BaseOpera,
    data() {
      return {
        form: {
          title: '1',
          companyId: '0'
        },
        rules: {
          title: [{ required: true, message: '请输入' }],
          companyId: [{ required: true, message: '请选择' }],
        }
      }
    },
    methods: {
    
    }
  }
</script>

 admin/src/views/finance/overdueBills.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,233 @@
<template>
    <div class="main_app">
        <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clear" />
        <div class="df_sb mt20">
            <div class="tabs">
                <div class="tab" :class="{ active: billType === 0 }" @click="tabsClick(0)">逾期收款账单</div>
                <div class="tab" :class="{ active: billType === 1 }" @click="tabsClick(1)">逾期付款账单</div>
            </div>
            <div class="btns">
                <el-button @click="$refs.call.open('批量催缴')">批量催缴</el-button>
            </div>
        </div>
        <el-table v-loading="loading" :data="list" stripe>
            <el-table-column prop="customerName" label="客户名称" min-width="100" show-overflow-tooltip />
            <el-table-column label="房间" min-width="170" show-overflow-tooltip>
                <template slot-scope="{row}">
                    <div style="display: flex; flex-direction: column;" v-if="row.roomPathName">
                        <span v-for="(item, index) in row.roomPathName.split(';')" :key="index">{{item}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="contractCode" label="合同编号" min-width="100" show-overflow-tooltip />
            <el-table-column label="结清状态" min-width="100" show-overflow-tooltip>
                <template slot-scope="{row}">
                    <span v-if="row.payStatus === 0">待收款</span>
                    <span v-if="row.payStatus === 1">已结清</span>
                    <span v-if="row.payStatus === 2">部分结清</span>
                    <span v-if="row.payStatus === 3">待付款</span>
                    <span v-if="row.payStatus === 4">待退款</span>
                    <span v-if="row.payStatus === 5">已关闭</span>
                </template>
            </el-table-column>
            <el-table-column prop="totleFee" label="账单金额" min-width="100" show-overflow-tooltip />
            <el-table-column prop="receivableFee" :label="`应${billType === 0 ? '收' : '付'}金额`" min-width="100" show-overflow-tooltip />
            <el-table-column prop="actReceivableFee" :label="`实${billType === 0 ? '收' : '付'}金额`" min-width="100" show-overflow-tooltip />
            <el-table-column :label="`需收/付金额`" min-width="100" show-overflow-tooltip>
                <template slot-scope="{row}">
                    {{Math.abs(row.needReceivableFee)}}
                </template>
            </el-table-column>
            <el-table-column label="费用类型" min-width="100" show-overflow-tooltip>
                <template slot-scope="{row}">
                    <span v-if="row.costType === 0">租赁费</span>
                    <span v-if="row.costType === 1">物业费</span>
                    <span v-if="row.costType === 2">租赁押金</span>
                    <span v-if="row.costType === 3">物业押金</span>
                    <span v-if="row.costType === 4">水电费</span>
                    <span v-if="row.costType === 5">杂项费</span>
                    <span v-if="row.costType === 6">其它</span>
                    <span v-if="row.costType === 7">保证金</span>
                </template>
            </el-table-column>
            <el-table-column label="计费周期" min-width="200" show-overflow-tooltip>
                <template slot-scope="{row}">
                    {{ row.startDate }} ~ {{ row.endDate }}
                </template>
            </el-table-column>
            <el-table-column prop="planPayDate" :label="`应${billType === 0 ? '收' : '付'}日期`" min-width="100" show-overflow-tooltip />
            <el-table-column label="账单来源" min-width="100" show-overflow-tooltip>
                <template slot-scope="{row}">
                    <span v-if="row.type === 0">合同账单</span>
                    <span v-if="row.type === 1">自建账单</span>
                </template>
            </el-table-column>
            <el-table-column label="短信发送状态" min-width="100" fixed="right" show-overflow-tooltip>
                <template slot-scope="{row}">
                    <span v-if="row.status === 0">开启</span>
                    <span v-if="row.status === 1" style="color: red;">关闭</span>
                </template>
            </el-table-column>
            <el-table-column label="邮件发送状态" min-width="100" fixed="right" show-overflow-tooltip>
                <template slot-scope="{row}">
                    <span v-if="row.status === 0">开启</span>
                    <span v-if="row.status === 1" style="color: red;">关闭</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="120" fixed="right">
                <template slot-scope="{row}">
                    <el-button type="text" @click="handleDetail(row)" icon="el-icon-edit" v-permissions="['business:category:update']">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="mt20">
            <Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" />
        </div>
        <Edit ref="EditRef" @success="getList" />
        <Detail ref="DetailRef" @success="getList" />
        <BullEditFu ref="BullEditFu" @success="getList" />
        <Call ref="call" @success="getList" />
    </div>
</template>

<script>
  import Pagination from '@/components/common/Pagination'
  import QueryForm from '@/components/common/QueryForm'
  import Edit from './components/bullEdit.vue'
  import BullEditFu from './components/bullEditFu.vue'
  import Detail from './components/bullDetail.vue'
  import Call from './components/call.vue'
  import { fetchList } from '@/api/bill'
  export default {
    components: {
      Pagination,
      QueryForm,
      Edit,
      Detail,
      BullEditFu,
      Call
    },
    data () {
      return {
        loading: false,
        pagination: {
          pageSize: 10,
          page: 1,
          total: 0
        },
        billType: 0,
        filters: {
          status: 0
        },
        list: [],
        total: 0,
        queryFormConfig: {
          formItems: [
            {
              filed: 'customerName',
              type: 'input',
              label: '客户名称'
            },
            {
              filed: 'payStatus',
              type: 'select',
              label: '结清状态',
              options: [
                { value: 0, label: '待收款' },
                { value: 1, label: '已结清' },
                { value: 2, label: '部分结清' },
                { value: 3, label: '待付款' },
                { value: 4, label: '待退款' }
              ]
            },
            {
              filed: 'selDate',
              type: 'daterange',
              label: '应收/付日期'
            }
          ]
        }
      }
    },
    created () {
      this.getList()
    },
    methods: {
      addOpen () {
        if (this.billType === 0) {
          this.$refs.EditRef.open('创建收款账单')
        } else {
          this.$refs.BullEditFu.open('创建付款账单')
        }
      },
      getList (page) {
        const { pagination, filters } = this
        let form = JSON.parse(JSON.stringify(filters))
        if (form && form.selDate && form.selDate.length > 0) {
          form.planPayDateStart = form.payDate[0]
          form.planPayDateEnd = form.payDate[1]
        }
        this.loading = true
        fetchList({
          model: {
            ...filters,
            billType: this.billType
          },
          capacity: pagination.pageSize,
          page: page || pagination.page
        }).then(res => {
          this.loading = false
          this.list = res.records || []
          this.list.forEach(item => {
            item.statusName = item.status === 1 ? '损坏' : item.status === 2 ? '报废' : '正常'
          })
          this.pagination.total = res.total || 0
        }, () => {
          this.loading = false
        })
      },
      tabsClick (val) {
        this.billType = val
        this.getList()
      },
      handleDetail (row) {
        this.$refs.DetailRef.open('账单详情', row.id)
      },
      clear () {
        this.filters = {}
        this.pagination.pageSize = 10
        this.pagination.page = 1
        this.getList()
      },
      handleSizeChange (capacity) {
        this.pagination.pageSize = capacity
        this.getList()
      }
    }
  }
</script>

<style lang="scss" scoped>
    @import '@/assets/style/variables.scss';
    
    .tabs {
        display: flex;
        margin-bottom: 20px;
        justify-content: center;
        
        .tab {
            height: 58px;
            line-height: 58px;
            font-size: 16px;
            color: #666666;
            margin: 0 30px;
            cursor: pointer;
        }
        
        .active {
            font-weight: 500;
            color: $primary-color;
            border-bottom: 2px solid $primary-color;
        }
    }
</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,741 @@
<template>
    <GlobalWindow
        title="楼宇详情"
        :showConfirm="false"
        :visible.sync="visible"
        width="800px">
        <div class="right">
            <div class="right_head">项目名称</div>
            <div class="right_cate">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="房源信息" name="houseinfo">
                        <div class="xm">
                            <el-card style="margin-top: 20px;">
                                <div slot="header" class="clearfix">
                                    <span>房源信息</span>
                                </div>
                                <div class="xm_info">
                                    <div class="xm_info_row" style="width: 25%;">
                                        <span>所属项目</span>
                                        <span>XXXXXXXXXX</span>
                                    </div>
                                    <div class="xm_info_row" style="width: 25%;">
                                        <span>楼宇</span>
                                        <span>综合楼</span>
                                    </div>
                                    <div class="xm_info_row" style="width: 25%;">
                                        <span>楼层</span>
                                        <span>1</span>
                                    </div>
                                    <div class="xm_info_row" style="width: 25%;">
                                        <span>房号</span>
                                        <span>101活动室</span>
                                    </div>
                                    <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                        <span>房间编号</span>
                                        <span>101</span>
                                    </div>
                                    <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                        <span>是否招商</span>
                                        <span>否</span>
                                    </div>
                                    <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                        <span>建筑面积</span>
                                        <span>50㎡</span>
                                    </div>
                                    <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                        <span>计租面积</span>
                                        <span>50㎡</span>
                                    </div>
                                    <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                        <span>计费面积</span>
                                        <span>45㎡</span>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </el-tab-pane>
                    <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>
                                    <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-column
                                            prop="address"
                                            label="合同来源">
                                        </el-table-column>
                                        <el-table-column
                                            prop="address"
                                            label="合同状态">
                                        </el-table-column>
                                    </el-table>
                                    <div class="xm_table_f">
                                        <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="page"
                                            :page-sizes="[10, 20, 30, 40]"
                                            :page-size="pageTotal"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="total">
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="工单记录" name="second">
                        <div class="xm">
                            <el-card>
                                <div class="xm_one1">
                                    <div class="xm_one_row">
                                        <span>待指派数量</span>
                                        <span>15</span>
                                    </div>
                                    <div class="xm_one_row">
                                        <span>待处理数量</span>
                                        <span>15</span>
                                    </div>
                                    <div class="xm_one_row">
                                        <span>本月工单数</span>
                                        <span>15</span>
                                    </div>
                                    <div class="xm_one_row">
                                        <span>累计工单数</span>
                                        <span>15</span>
                                    </div>
                                </div>
                            </el-card>
                            <el-card style="margin-top: 20px;">
                                <div class="xm_table">
                                    <div class="xm_table_search">
                                        <el-select v-model="value" style="width: 300px; margin-right: 15px;" placeholder="位置类型">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                        <el-select v-model="value" style="width: 300px;" placeholder="工单分类">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <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">
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="设备信息" name="third">
                        <div class="xm">
                            <div class="xm_chat">
                                <el-card class="xm_chat_row">
                                    <div id="chat1"></div>
                                </el-card>
                                <el-card class="xm_chat_row">
                                    <div id="chat2"></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-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">
                                        </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">
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </GlobalWindow>
</template>

<script>
  import BaseOpera from '@/components/base/BaseOpera'
  import GlobalWindow from '@/components/common/GlobalWindow'
  import * as echarts from 'echarts';
  export default {
    name: "houseDetails",
    extends: BaseOpera,
    components: { GlobalWindow },
    data() {
      return {
        info: {},
        activeName: 'houseinfo',
        total: 0,
        pageTotal: 10,
        page: 1,
        tableData: []
      }
    },
    methods: {
      open (title, target) {
        this.title = title
        this.visible = true
        this.$nextTick(() => {
          this.reand()
          this.reand1()
        })
      },
      reand() {
        var chartDom = document.getElementById('chat1');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              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: '报废' }
              ]
            }
          ]
        };
        option && myChart.setOption(option);
      },
      reand1() {
        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]
            )
          };
        });
        option = {
          legend: {
            selectedMode: false
          },
          grid,
          yAxis: {
            type: 'value'
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          series
        };

        option && myChart.setOption(option);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleCurrentChange(page) {
        this.page = page
      },
      handleSizeChange(pageTotal) {
        this.pageTotal = pageTotal
      },
    }
  }
</script>

<style lang="scss" scoped>
    .right {
        width: 100%;
        display: flex;
        flex-direction: column;
        .right_head {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: bold;
            color: black;
            background: #ffffff;
        }
        .right_cate {
            width: 100%;
            padding: 0 20px 20px 20px;
            box-sizing: border-box;
            background: #ffffff;
            .xm {
                width: 100%;
                display: flex;
                flex-direction: column;
                .xm_house {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: self-end;
                    .xm_house_list {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        margin-top: 10px;
                        .xm_house_list_left {
                            flex-shrink: 0;
                            width: 100px;
                            display: flex;
                            margin-right: 20px;
                            flex-direction: column;
                            .xm_house_list_left_row {
                                width: 100px;
                                height: 100px;
                                background: rgba(242, 242, 242, 1);
                                padding: 20px 0;
                                box-sizing: border-box;
                                margin-bottom: 20px;
                                display: flex;
                                align-items: center;
                                flex-direction: column;
                                justify-content: space-between;
                                &:last-child {
                                    margin-bottom: 0;
                                }
                                span {
                                    &:nth-child(1) {
                                        font-size: 18px;
                                        color: #333333;
                                        font-weight: 400;
                                    }
                                    &:nth-child(2) {
                                        font-size: 12px;
                                        color: #929292;
                                    }
                                }
                            }
                        }
                        .xm_house_list_right {
                            width: calc(100% - 130px);
                            display: flex;
                            flex-direction: column;
                            .item {
                                width: calc(100% - 130px);
                                display: flex;
                                align-items: center;
                                margin-bottom: 20px;
                                &:last-child {
                                    margin-bottom: 0;
                                }
                                .xm_house_list_right_row {
                                    height: 100px;
                                    width: 300px;
                                    background: rgba(198, 224, 167, 0.34509803921568627);
                                    padding: 10px 0;
                                    box-sizing: border-box;
                                    display: flex;
                                    align-items: center;
                                    flex-direction: column;
                                    justify-content: space-between;
                                    span {
                                        font-size: 14px;
                                        color: #000000;
                                    }
                                    .xm_house_list_right_row_info {
                                        display: flex;
                                        flex-direction: column;
                                        span {
                                            &:nth-child(1) {
                                                color: #000000;
                                                font-size: 14px;
                                            }
                                            &:nth-child(2) {
                                                color: #A5A5A5;
                                                font-size: 12px;
                                                margin-top: 3px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .xm_house_tips {
                        display: flex;
                        align-items: center;
                        .xm_house_tips_row {
                            margin-left: 30px;
                            display: flex;
                            align-items: center;
                            .xm_house_tips_row_d {
                                width: 10px;
                                height: 10px;
                                background: orange;
                                margin-right: 5px;
                            }
                            span {
                                font-size: 16px;
                                color: black;
                            }
                        }
                    }
                }
                .xm_chat {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .xm_chat_row {
                        width: 49%;
                        height: 300px;
                        #chat1 {
                            width: 100%;
                            height: 260px;
                        }
                        #chat2 {
                            width: 100%;
                            height: 260px;
                        }
                    }
                }
                .xm_one {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .xm_one_row {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        span {
                            font-size: 16px;
                            color: black;
                            &:nth-child(2) {
                                font-weight: bold;
                                margin: 15px 0;
                            }
                            &:nth-child(3) {
                                color: #666666;
                            }
                        }
                    }
                }
                .xm_one1 {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .xm_one_row {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        span {
                            font-size: 16px;
                            color: black;
                            &:nth-child(2) {
                                font-size: 18px;
                                font-weight: bold;
                                margin-top: 15px;
                            }
                        }
                    }
                }
                .xm_table {
                    width: 100%;
                    .xm_table_search {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 15px;
                    }
                    .xm_table_f {
                        width: 100%;
                        text-align: right;
                    }
                }
                .xm_info {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    .xm_info_row {
                        display: flex;
                        flex-direction: column;
                        span {
                            font-size: 16px;
                            &:nth-child(1) {
                                color: #666666;
                            }
                            &:nth-child(2) {
                                color: #000000;
                                margin-top: 15px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>

 admin/src/views/project/housingList.vue

@@ -52,8 +52,9 @@
          </template>
        </el-table-column>
        <el-table-column v-if="containPermissions(['business:ywroom:update', 'business:ywroom:delete'])" label="操作"
          min-width="100" fixed="right">
          min-width="140" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text" @click="$refs.houseDetails.open('房源详情')">查看详情</el-button>
            <el-button type="text" @click="editClick(row)" icon="el-icon-edit"
              v-permissions="['business:ywroom:update']">编辑</el-button>
            <el-button type="text" @click="deleteById(row)" icon="el-icon-delete"
@@ -66,6 +67,8 @@
    </template>
    <!-- æ–°å»º/修改 -->
    <OperaYwRoomWindow ref="operaYwRoomWindow" @success="handlePageChange" />
    <!--  è¯¦æƒ…  -->
    <houseDetails ref="houseDetails" />
  </TableLayout>
</template>

@@ -74,12 +77,13 @@
import TableLayout from '@/layouts/TableLayout'
import Pagination from '@/components/common/Pagination'
import OperaYwRoomWindow from './components/OperaYwRoomWindow'
import houseDetails from './components/houseDetails'
import { getProjectList } from '@/api/project/ywProject'
import { getBuildList } from '@/api/project/ywBuilding'
export default {
  name: 'YwRoom',
  extends: BaseTable,
  components: { TableLayout, Pagination, OperaYwRoomWindow },
  components: { TableLayout, Pagination, OperaYwRoomWindow, houseDetails },
  data() {
    return {
      // æœç´¢

 admin/src/views/roomStatus/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1101 @@
<template>
    <div class="box">
        <div class="box_content">
            <div class="left">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
                <div style="width: 100%; height: 20px;"></div>
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </div>
            <div class="right">
                <div class="right_head">项目名称</div>
                <div class="right_cate">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="项目概况" name="first">
                            <div class="xm">
                                <el-card>
                                    <div class="xm_one">
                                        <div class="xm_one_row">
                                            <span>在租合同数</span>
                                            <span>4</span>
                                            <span>在租房源数：5</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>可招商面积</span>
                                            <span>50000㎡</span>
                                            <span>可招商房源数：15</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>在租实时均价</span>
                                            <span>145.75元/m²·天</span>
                                            <span>在租面积：900.00m²</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>出租率</span>
                                            <span>50.00%</span>
                                            <span>待租面积：700.00m²</span>
                                        </div>
                                    </div>
                                </el-card>
                                <el-card style="margin-top: 20px;">
                                    <div slot="header" class="clearfix">
                                        <span>项目信息</span>
                                    </div>
                                    <div class="xm_info">
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>项目名称</span>
                                            <span>XXXXXXXXXX</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>所属地区</span>
                                            <span>安徽省-合肥市-蜀山区</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 50%;">
                                            <span>详细地址</span>
                                            <span>Lorem ipsum dolor sit amet, consectetur</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 100%; margin-top: 15px;">
                                            <span>项目简介</span>
                                            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum</span>
                                        </div>
                                    </div>
                                </el-card>
                                <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>
                                        <el-table
                                            :data="tableData"
                                            border
                                            style="width: 100%">
                                            <el-table-column
                                                prop="date"
                                                label="合同编号">
                                            </el-table-column>
                                            <el-table-column
                                                prop="name"
                                                label="租客">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="租赁单价">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="租赁天数">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="租赁面积">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="房源">
                                            </el-table-column>
                                        </el-table>
                                        <div class="xm_table_f">
                                            <el-pagination
                                                @size-change="handleSizeChange"
                                                @current-change="handleCurrentChange"
                                                :current-page="page"
                                                :page-sizes="[10, 20, 30, 40]"
                                                :page-size="pageTotal"
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :total="total">
                                            </el-pagination>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="房源信息" name="houseinfo">
                            <div class="xm">
                                <el-card style="margin-top: 20px;">
                                    <div slot="header" class="clearfix">
                                        <span>房源信息</span>
                                    </div>
                                    <div class="xm_info">
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>所属项目</span>
                                            <span>XXXXXXXXXX</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>楼宇</span>
                                            <span>综合楼</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>楼层</span>
                                            <span>1</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>房号</span>
                                            <span>101活动室</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>房间编号</span>
                                            <span>101</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>是否招商</span>
                                            <span>否</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>建筑面积</span>
                                            <span>50㎡</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>计租面积</span>
                                            <span>50㎡</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>计费面积</span>
                                            <span>45㎡</span>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </el-tab-pane>
                        <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>
                                        <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-column
                                                prop="address"
                                                label="合同来源">
                                            </el-table-column>
                                            <el-table-column
                                                prop="address"
                                                label="合同状态">
                                            </el-table-column>
                                        </el-table>
                                        <div class="xm_table_f">
                                            <el-pagination
                                                @size-change="handleSizeChange"
                                                @current-change="handleCurrentChange"
                                                :current-page="page"
                                                :page-sizes="[10, 20, 30, 40]"
                                                :page-size="pageTotal"
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :total="total">
                                            </el-pagination>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="楼宇概况" name="louyu">
                            <div class="xm">
                                <el-card>
                                    <div class="xm_one">
                                        <div class="xm_one_row">
                                            <span>在租合同数</span>
                                            <span>4</span>
                                            <span>在租房源数：5</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>可招商面积</span>
                                            <span>50000㎡</span>
                                            <span>可招商房源数：15</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>在租实时均价</span>
                                            <span>145.75元/m²·天</span>
                                            <span>在租面积：900.00m²</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>出租率</span>
                                            <span>50.00%</span>
                                            <span>待租面积：700.00m²</span>
                                        </div>
                                    </div>
                                </el-card>
                                <el-card style="margin-top: 20px;">
                                    <div slot="header" class="clearfix">
                                        <span>楼宇信息</span>
                                    </div>
                                    <div class="xm_info">
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>所属项目</span>
                                            <span>阜宁文体中心</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>楼宇名称</span>
                                            <span>A座</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>楼宇编码</span>
                                            <span>A-</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%;">
                                            <span>详细地址</span>
                                            <span>阜宁文体中心西南角</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 100%; margin-top: 15px;">
                                            <span>详细地址</span>
                                            <span>阜宁文体中心西南角</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>建筑面积</span>
                                            <span>1000㎡</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>计租面积</span>
                                            <span>1000㎡</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 50%; margin-top: 15px;">
                                            <span>计费面积</span>
                                            <span>1000㎡</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>地上层数</span>
                                            <span>5</span>
                                        </div>
                                        <div class="xm_info_row" style="width: 25%; margin-top: 15px;">
                                            <span>地下层数</span>
                                            <span>2</span>
                                        </div>
                                    </div>
                                </el-card>
                                <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>
                                        <el-table
                                                :data="tableData"
                                                border
                                                style="width: 100%">
                                            <el-table-column
                                                    prop="date"
                                                    label="合同编号">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="name"
                                                    label="租客">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="address"
                                                    label="租赁单价">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="address"
                                                    label="租赁天数">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="address"
                                                    label="租赁面积">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="address"
                                                    label="房源">
                                            </el-table-column>
                                        </el-table>
                                        <div class="xm_table_f">
                                            <el-pagination
                                                    @size-change="handleSizeChange"
                                                    @current-change="handleCurrentChange"
                                                    :current-page="page"
                                                    :page-sizes="[10, 20, 30, 40]"
                                                    :page-size="pageTotal"
                                                    layout="total, sizes, prev, pager, next, jumper"
                                                    :total="total">
                                            </el-pagination>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="房态管理" name="house">
                            <div class="xm">
                                <div class="xm_house">
                                    <div class="xm_house_tips">
                                        <div class="xm_house_tips_row">
                                            <div class="xm_house_tips_row_d"></div>
                                            <span>已出租</span>
                                        </div>
                                        <div class="xm_house_tips_row">
                                            <div class="xm_house_tips_row_d"></div>
                                            <span>未出租</span>
                                        </div>
                                        <div class="xm_house_tips_row">
                                            <div class="xm_house_tips_row_d"></div>
                                            <span>90日内到期</span>
                                        </div>
                                    </div>
                                    <div class="xm_house_list">
                                        <div class="xm_house_list_left">
                                            <div class="xm_house_list_left_row">
                                                <span>1F</span>
                                                <span>600㎡</span>
                                            </div>
                                        </div>
                                        <div class="xm_house_list_right">
                                            <div class="item">
                                                <div class="xm_house_list_right_row">
                                                    <span>101（600㎡）</span>
                                                    <div class="xm_house_list_right_row_info">
                                                        <span>租客名称</span>
                                                        <span>2024-08-16到期</span>
                                                    </div>
                                                </div>
                                                <div class="xm_house_list_right_row">
                                                    <span>101（600㎡）</span>
                                                    <div class="xm_house_list_right_row_info">
                                                        <span>租客名称</span>
                                                        <span>2024-08-16到期</span>
                                                    </div>
                                                </div>
                                                <div class="xm_house_list_right_row">
                                                    <span>101（600㎡）</span>
                                                    <div class="xm_house_list_right_row_info">
                                                        <span>租客名称</span>
                                                        <span>2024-08-16到期</span>
                                                    </div>
                                                </div>
                                                <div class="xm_house_list_right_row">
                                                    <span>101（600㎡）</span>
                                                    <div class="xm_house_list_right_row_info">
                                                        <span>租客名称</span>
                                                        <span>2024-08-16到期</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="工单记录" name="second">
                            <div class="xm">
                                <el-card>
                                    <div class="xm_one1">
                                        <div class="xm_one_row">
                                            <span>待指派数量</span>
                                            <span>15</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>待处理数量</span>
                                            <span>15</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>本月工单数</span>
                                            <span>15</span>
                                        </div>
                                        <div class="xm_one_row">
                                            <span>累计工单数</span>
                                            <span>15</span>
                                        </div>
                                    </div>
                                </el-card>
                                <el-card style="margin-top: 20px;">
                                    <div class="xm_table">
                                        <div class="xm_table_search">
                                            <el-select v-model="value" style="width: 300px; margin-right: 15px;" placeholder="位置类型">
                                                <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                                </el-option>
                                            </el-select>
                                            <el-select v-model="value" style="width: 300px;" placeholder="工单分类">
                                                <el-option
                                                    v-for="item in options"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                        <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">
                                            </el-pagination>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="设备信息" name="third">
                            <div class="xm">
                                <div class="xm_chat">
                                    <el-card class="xm_chat_row">
                                        <div id="chat1"></div>
                                    </el-card>
                                    <el-card class="xm_chat_row">
                                        <div id="chat2"></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-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">
                                            </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">
                                            </el-pagination>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    name: 'index',
    data() {
      return {
        input: '',
        tableData: [],
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        activeName: 'first',
        total: 0,
        pageTotal: 10,
        page: 1,
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    },
    created () {
      this.$nextTick(() => {
        this.reand()
        this.reand1()
      })
    },
    methods: {
      reand() {
        var chartDom = document.getElementById('chat1');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              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: '报废' }
              ]
            }
          ]
        };
        option && myChart.setOption(option);
      },
      reand1() {
        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]
            )
          };
        });
        option = {
          legend: {
            selectedMode: false
          },
          grid,
          yAxis: {
            type: 'value'
          },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          series
        };

        option && myChart.setOption(option);
      },
      handleCurrentChange(page) {
        this.page = page
      },
      handleSizeChange(pageTotal) {
        this.pageTotal = pageTotal
      },
      handleNodeClick(data) {
        console.log(data);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }
</script>

<style lang="scss" scoped>
    .box {
        width: 100%;
        height: 100%;
        padding: 16px;
        box-sizing: border-box;
        .box_content {
            width: 100%;
            display: flex;
            align-items: start;
            justify-content: space-between;
            .left {
                width: 300px;
                padding: 20px;
                box-sizing: border-box;
                flex-shrink: 0;
                margin-right: 20px;
                display: flex;
                flex-direction: column;
                background: #ffffff;
            }
            .right {
                flex: 1;
                display: flex;
                flex-direction: column;
                .right_head {
                    width: 100%;
                    padding: 20px;
                    box-sizing: border-box;
                    font-size: 16px;
                    font-weight: bold;
                    color: black;
                    background: #ffffff;
                }
                .right_cate {
                    width: 100%;
                    padding: 0 20px 20px 20px;
                    box-sizing: border-box;
                    background: #ffffff;
                    .xm {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        .xm_house {
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            align-items: self-end;
                            .xm_house_list {
                                width: 100%;
                                display: flex;
                                align-items: center;
                                margin-top: 10px;
                                .xm_house_list_left {
                                    flex-shrink: 0;
                                    width: 100px;
                                    display: flex;
                                    margin-right: 20px;
                                    flex-direction: column;
                                    .xm_house_list_left_row {
                                        width: 100px;
                                        height: 100px;
                                        background: rgba(242, 242, 242, 1);
                                        padding: 20px 0;
                                        box-sizing: border-box;
                                        margin-bottom: 20px;
                                        display: flex;
                                        align-items: center;
                                        flex-direction: column;
                                        justify-content: space-between;
                                        &:last-child {
                                            margin-bottom: 0;
                                        }
                                        span {
                                            &:nth-child(1) {
                                                font-size: 18px;
                                                color: #333333;
                                                font-weight: 400;
                                            }
                                            &:nth-child(2) {
                                                font-size: 12px;
                                                color: #929292;
                                            }
                                        }
                                    }
                                }
                                .xm_house_list_right {
                                    width: calc(100% - 130px);
                                    display: flex;
                                    flex-direction: column;
                                    .item {
                                        width: calc(100% - 130px);
                                        display: flex;
                                        align-items: center;
                                        margin-bottom: 20px;
                                        &:last-child {
                                            margin-bottom: 0;
                                        }
                                        .xm_house_list_right_row {
                                            height: 100px;
                                            width: 300px;
                                            background: rgba(198, 224, 167, 0.34509803921568627);
                                            padding: 10px 0;
                                            box-sizing: border-box;
                                            display: flex;
                                            align-items: center;
                                            flex-direction: column;
                                            justify-content: space-between;
                                            span {
                                                font-size: 14px;
                                                color: #000000;
                                            }
                                            .xm_house_list_right_row_info {
                                                display: flex;
                                                flex-direction: column;
                                                span {
                                                    &:nth-child(1) {
                                                        color: #000000;
                                                        font-size: 14px;
                                                    }
                                                    &:nth-child(2) {
                                                        color: #A5A5A5;
                                                        font-size: 12px;
                                                        margin-top: 3px;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            .xm_house_tips {
                                display: flex;
                                align-items: center;
                                .xm_house_tips_row {
                                    margin-left: 30px;
                                    display: flex;
                                    align-items: center;
                                    .xm_house_tips_row_d {
                                        width: 10px;
                                        height: 10px;
                                        background: orange;
                                        margin-right: 5px;
                                    }
                                    span {
                                        font-size: 16px;
                                        color: black;
                                    }
                                }
                            }
                        }
                        .xm_chat {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .xm_chat_row {
                                width: 49%;
                                height: 300px;
                                #chat1 {
                                    width: 100%;
                                    height: 260px;
                                }
                                #chat2 {
                                    width: 100%;
                                    height: 260px;
                                }
                            }
                        }
                        .xm_one {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .xm_one_row {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                span {
                                    font-size: 16px;
                                    color: black;
                                    &:nth-child(2) {
                                        font-weight: bold;
                                        margin: 15px 0;
                                    }
                                    &:nth-child(3) {
                                        color: #666666;
                                    }
                                }
                            }
                        }
                        .xm_one1 {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .xm_one_row {
                                flex: 1;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                flex-direction: column;
                                span {
                                    font-size: 16px;
                                    color: black;
                                    &:nth-child(2) {
                                        font-size: 18px;
                                        font-weight: bold;
                                        margin-top: 15px;
                                    }
                                }
                            }
                        }
                        .xm_table {
                            width: 100%;
                            .xm_table_search {
                                width: 100%;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                margin-bottom: 15px;
                            }
                            .xm_table_f {
                                width: 100%;
                                text-align: right;
                            }
                        }
                        .xm_info {
                            width: 100%;
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            .xm_info_row {
                                display: flex;
                                flex-direction: column;
                                span {
                                    font-size: 16px;
                                    &:nth-child(1) {
                                        color: #666666;
                                    }
                                    &:nth-child(2) {
                                        color: #000000;
                                        margin-top: 15px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>

 admin/src/views/workorder/components/handleProblem.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,184 @@
<template>
    <GlobalWindow
        title="问题上报"
        :showConfirm="false"
        :visible.sync="visible"
        width="100%">
        <div class="wt">
            <div class="wt_head">
                <div class="wt_head_title">
                    é—®é¢˜è¯¦æƒ…
                    <el-tag style="margin-left: 10px;">转工单</el-tag>
                </div>
                <el-button>查看工单</el-button>
            </div>
            <div class="wt_content">
                <div class="wt_content_row" style="width: 25%;">
                    ä½ç½®ï¼š-
                </div>
                <div class="wt_content_row" style="width: 25%;">
                    ä¸ŠæŠ¥äººï¼šå¼ ä¸‰ä¸°
                </div>
                <div class="wt_content_row" style="width: 50%;">
                    ä¸ŠæŠ¥äººç”µè¯ï¼š180553847234
                </div>
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;">
                    ä¸ŠæŠ¥æ—¶é—´ï¼š2024-11-21 12:00:23
                </div>
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;">
                    é—®é¢˜æè¿°ï¼šè¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°
                </div>
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;">
                    <div class="wt_content_row_label">问题图片：</div>
                    <div class="wt_content_row_list">
                        <div class="wt_content_row_list_img">
                            <img src="" alt="" />
                        </div>
                    </div>
                </div>
            </div>
            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="处理方式" prop="resource">
                    <el-radio-group v-model="form.resource">
                        <el-radio :label="0">转工单</el-radio>
                        <el-radio :label="1">关闭问题</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div style="display: flex; align-items: center;">
                    <el-form-item label="位置类型" prop="region">
                        <el-select v-model="form.resource" placeholder="请选择位置类型">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="报修区域" prop="resource">
                        <el-select v-model="form.resource" placeholder="请选择报修区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div style="display: flex; align-items: center;">
                    <el-form-item label="工单分类" prop="resource">
                        <el-select v-model="form.resource" placeholder="请选择工单分类">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上门时间" prop="resource">
                        <el-date-picker v-model="form.resource" type="date" placeholder="选择上门时间"></el-date-picker>
                    </el-form-item>
                </div>
                <el-form-item label="描述" prop="resource">
                    <el-input
                        type="textarea"
                        :rows="5"
                        placeholder="请输入描述"
                        v-model="form.resource">
                    </el-input>
                </el-form-item>
                <el-form-item label="问题图片" prop="resource">
                    <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="关闭问题" prop="resource">
                    <el-input
                        type="textarea"
                        :rows="5"
                        placeholder="请输入关闭问题"
                        v-model="form.resource">
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
    </GlobalWindow>
</template>

<script>
  import BaseOpera from '@/components/base/BaseOpera'
  import GlobalWindow from '@/components/common/GlobalWindow'
  export default {
    name: "handleProblem",
    extends: BaseOpera,
    components: { GlobalWindow },
    data() {
      return {
        info: {},
        form: {
          resource: 0
        },
        rules: {
          resource: [
            { required: true, message: '请选择', trigger: 'change' }
          ]
        }
      }
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
    .wt {
        width: 100%;
        display: flex;
        flex-direction: column;
        .wt_head {
            width: 100%;
            padding: 20px 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .wt_head_title {
                display: flex;
                align-items: center;
                font-size: 16px;
                color: black;
                margin-right: 10px;
            }
        }
        .wt_content {
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .wt_content_row {
                font-size: 14px;
                color: rgb(51, 51, 51);
                display: flex;
                align-items: self-start;
                .wt_content_row_label {
                    flex-shrink: 0;
                    font-size: 14px;
                    color: rgb(51, 51, 51);
                }
                .wt_content_row_list {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    .wt_content_row_list_img {
                        width: 106px;
                        height: 93px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        overflow-x: hidden;
                        margin-right: 15px;
                        &:last-child {
                            margin: 0 !important;
                        }
                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
</style>

 admin/src/views/workorder/components/problemReportingDetails.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,139 @@
<template>
    <GlobalWindow
        title="问题上报详情"
        :showConfirm="false"
        :visible.sync="visible"
        width="100%">
        <div class="wt">
            <div class="wt_head">
                <div class="wt_head_title">
                    é—®é¢˜è¯¦æƒ…
                    <el-tag style="margin-left: 10px;">转工单</el-tag>
                </div>
                <el-button>查看工单</el-button>
            </div>
            <div class="wt_content">
                <div class="wt_content_row" style="width: 25%;">
                    ä½ç½®ï¼š-
                </div>
                <div class="wt_content_row" style="width: 25%;">
                    ä¸ŠæŠ¥äººï¼šå¼ ä¸‰ä¸°
                </div>
                <div class="wt_content_row" style="width: 50%;">
                    ä¸ŠæŠ¥äººç”µè¯ï¼š180553847234
                </div>
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;">
                    ä¸ŠæŠ¥æ—¶é—´ï¼š2024-11-21 12:00:23
                </div>
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;">
                    é—®é¢˜æè¿°ï¼šè¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°è¿™æ˜¯é—®é¢˜æè¿°
                </div>
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;">
                    <div class="wt_content_row_label">问题图片：</div>
                    <div class="wt_content_row_list">
                        <div class="wt_content_row_list_img">
                            <img src="" alt="" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="wt_head">
                <div class="wt_head_title">
                    å¤„理结果
                </div>
            </div>
            <div class="wt_content">
                <div class="wt_content_row" style="width: 100%;">
                    å¤„理人：张三-行政部
                </div>
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;">
                    å¤„理时间：2024-11-21 12:00:23
                </div>
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;">
                    å¤„理结果：转工单
                </div>
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;">
                    å…³é—­è¯´æ˜Žï¼šè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Žè¯´æ˜Ž
                </div>
            </div>
        </div>
    </GlobalWindow>
</template>

<script>
  import BaseOpera from '@/components/base/BaseOpera'
  import GlobalWindow from '@/components/common/GlobalWindow'
  export default {
    name: "problemReportingDetails",
    extends: BaseOpera,
    components: { GlobalWindow },
    data() {
      return {
        info: {}
      }
    },
    methods: {
    
    }
  }
</script>

<style lang="scss" scoped>
    .wt {
        width: 100%;
        display: flex;
        flex-direction: column;
        .wt_head {
            width: 100%;
            padding: 20px 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .wt_head_title {
                display: flex;
                align-items: center;
                font-size: 16px;
                color: black;
                margin-right: 10px;
            }
        }
        .wt_content {
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .wt_content_row {
                font-size: 14px;
                color: rgb(51, 51, 51);
                display: flex;
                align-items: self-start;
                .wt_content_row_label {
                    flex-shrink: 0;
                    font-size: 14px;
                    color: rgb(51, 51, 51);
                }
                .wt_content_row_list {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    .wt_content_row_list_img {
                        width: 106px;
                        height: 93px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        overflow-x: hidden;
                        margin-right: 15px;
                        &:last-child {
                            margin: 0 !important;
                        }
                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
</style>

 admin/src/views/workorder/problemReporting.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,105 @@
<template>
    <TableLayout :permissions="['business:ywworkorder:query']">
        <!-- æœç´¢è¡¨å• -->
        <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline>
            <el-form-item label="描述" prop="roomNum">
                <el-input v-model="searchForm.roomNum" placeholder="请输入描述" @keypress.enter.native="search"></el-input>
            </el-form-item>
            <el-form-item prop="areaType" label="处理状态">
                <el-select v-model="searchForm.areaType">
                    <el-option label="未处理" value="0"></el-option>
                    <el-option label="生成工单" value="1"></el-option>
                    <el-option label="关闭保修" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="上报时间">
                <el-date-picker
                    v-model="searchForm.selDate"
                    @change="changeSelDate"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    type="daterange"></el-date-picker>
            </el-form-item>
            <section>
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </section>
        </el-form>
        <!-- è¡¨æ ¼å’Œåˆ†é¡µ -->
        <template v-slot:table-wrap>
            <el-table v-loading="isWorking.search" :data="tableData.list" stripe>
                <el-table-column prop="areaType" label="描述" min-width="70px"></el-table-column>
                <el-table-column prop="areaType" label="位置" min-width="100px"></el-table-column>
                <el-table-column prop="categoryName" label="现场图片" min-width="100px"></el-table-column>
                <el-table-column prop="creatorName" label="上报人" min-width="80px"></el-table-column>
                <el-table-column prop="createDate" label="上报人电话" min-width="100px"></el-table-column>
                <el-table-column prop="dealUserName" label="上报时间" min-width="80px"></el-table-column>
                <el-table-column label="处理状态" min-width="70px">
                    <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="creatorName" label="处理人" min-width="80px"></el-table-column>
                <el-table-column
                    v-if="containPermissions(['business:ywworkorder:update'])"
                    label="操作"
                    width="130"
                    fixed="right">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="$refs.handleProblem.open()">处理</el-button>
                        <el-button type="text" @click="$refs.problemReportingDetails.open()">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination">
            </pagination>
        </template>
        <!--    è¯¦æƒ…    -->
        <problemReportingDetails ref="problemReportingDetails" />
        <!--    å¤„理    -->
        <handleProblem ref="handleProblem" @success="handlePageChange" />
    </TableLayout>
</template>

<script>
  import BaseTable from '@/components/base/BaseTable'
  import TableLayout from '@/layouts/TableLayout'
  import Pagination from '@/components/common/Pagination'
  import problemReportingDetails from './components/problemReportingDetails'
  import handleProblem from './components/handleProblem'
  export default {
    name: 'problemReporting',
    extends: BaseTable,
    components: { TableLayout, Pagination, problemReportingDetails, handleProblem },
    data() {
      return {
        // æœç´¢
        showDetail: false,
        searchForm: {
          selDate: [],
          areaIds: '',
          projectId: '',
          buildingId: '',
          cateId: '',
        },
        projectList: [],
        buildList: [],
        cateList: [],
      }
    },
    created() {
      this.config({
        module: '运维工单信息表',
        api: '/workorder/ywWorkorder',
        'field.id': 'id',
        'field.main': 'id'
      })
      this.search()
    },
    methods: {
    
    }
  }
</script>