用水数据、维修基金展示处理

shuishen

2026-01-05 e9748ebb3b42cc09c28ce8d78d472f83f0878f17

用水数据、维修基金展示处理

 src/api/dept/index.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-11-30 15:18:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-04-18 19:27:38
 * @LastEditTime: 2026-01-05 22:33:06
 * @FilePath: \srs-police-affairs\src\api\dept\index.js
 * @Description:
 *
@@ -45,11 +45,11 @@
 */
export const getResidentialQuartersInfo = (area_id, adcode) => {
    return request({
        url: '/sf3d/area/info',
        // url: '/data/getResidentialQuartersInfo.json',
        // url: '/sf3d/area/info',
        url: '/data/getResidentialQuartersInfo.json',
        method: 'get',
        authorization: false,
        requestBaseUrl: 'fengt',
        // requestBaseUrl: 'fengt',
        params: {
            area_id,
            adcode
@@ -66,11 +66,11 @@
export const getAoiByPt = (lng, lat, height, adcode, tolerance) => {
    return request({
        // url: '/sf3d/area/getAoiByPt',
        url: '/sf3d/area/stdgetAoiByPt',
        // url: '/data/getAoiByBgId.json',
        // url: '/sf3d/area/stdgetAoiByPt',
        url: '/data/getAoiByBgId.json',
        method: 'get',
        authorization: false,
        requestBaseUrl: 'fengt',
        // requestBaseUrl: 'fengt',
        params: {
            lng,
            lat,
@@ -106,11 +106,11 @@
export const getHouses = (build_id, adcode) => {
    return request({
        // url: '/sf3d/build/houses',
        url: '/sf3d/build/stdhouses',
        // url: '/data/huafu15d.json',
        // url: '/sf3d/build/stdhouses',
        url: '/data/huafu15d.json',
        method: 'get',
        authorization: false,
        requestBaseUrl: 'fengt',
        // requestBaseUrl: 'fengt',
        params: {
            build_id,
            adcode
@@ -126,8 +126,8 @@
 */
export const getSearchExtensively = (ak, region, query, ids) => {
    return request({
        url: '/zhs/bs/search',
        // url: '/data/jingzuo.json',
        // url: '/zhs/bs/search',
        url: '/data/jingzuo.json',
        method: 'get',
        requestBaseUrl: 'fengtDS',
        params: {
@@ -144,12 +144,12 @@
 * @param {*} adcode
 * @returns
 */
export const getSearchExtensivelyPage = (ak, region, query,page_num,page_size) => {
export const getSearchExtensivelyPage = (ak, region, query, page_num, page_size) => {
    return request({
        url: '/zhs/bs/search',
        // url: '/data/jingzuo.json',
        // url: '/zhs/bs/search',
        url: '/data/jingzuo.json',
        method: 'get',
        requestBaseUrl: 'fengtDS',
        // requestBaseUrl: 'fengtDS',
        params: {
            ak,
            region,
@@ -167,15 +167,15 @@
 */
export const getSearchExtensivelyBgAoiDeepdata = (ak, region, ids, infos) => {
    return request({
        url: '/zhs/bs/search',
        // url: '/zhs/bs/search',
        // url: '/data/汇成观邸.json',
        // url: '/data/search.json',
        // url: '/data/阳光小区独栋.json',
        url: '/data/阳光小区独栋.json',
        // url: '/data/search汇杰小区.json',
        // url: '/data/汪家园林家小区id详情搜.json',
        // url: '/data/search三江星座.json',
        method: 'get',
        requestBaseUrl: 'fengtDS',
        // requestBaseUrl: 'fengtDS',
        params: {
            ak,
            region,
@@ -192,13 +192,13 @@
 */
export const getSearchExtensivelyHousesdata = (ak, region, ids, infos) => {
    return request({
        url: '/zhs/bs/search',
        // url: '/data/汇成观邸-户室.json',
        // url: '/zhs/bs/search',
        url: '/data/汇成观邸-户室.json',
        // url: '/data/阳光小区独栋.json',
        // url: '/data/search汇杰小区1栋.json',
        // url: '/data/汪家园林家小区2号id详情搜.json',
        method: 'get',
        requestBaseUrl: 'fengtDS',
        // requestBaseUrl: 'fengtDS',
        params: {
            ak,
            region,

 src/api/dept/newIndex.js

@@ -7,21 +7,21 @@
 */

export const getPlacePractitionerPage = (type = 1, resBusId) => {
  let params = {
    resBusId
  }

  if (type != 1) {
    params = {
      buildId: resBusId
    let params = {
        resBusId
    }
  }

  return request({
    url: '/api/blade-placePractitioner/placePractitioner/page',
    method: 'get',
    params
  })
    if (type != 1) {
        params = {
            buildId: resBusId
        }
    }

    return request({
        url: '/api/blade-placePractitioner/placePractitioner/page',
        method: 'get',
        params
    })
}

/**
@@ -31,21 +31,21 @@
 */

export const getTaskLabelReportingEventPage = (type = 1, resBusId) => {
  let params = {
    resBusId
  }

  if (type != 1) {
    params = {
      buildId: resBusId
    let params = {
        resBusId
    }
  }

  return request({
    url: '/api/blade-taskLabelReportingEvent/taskLabelReportingEvent/page',
    method: 'get',
    params
  })
    if (type != 1) {
        params = {
            buildId: resBusId
        }
    }

    return request({
        url: '/api/blade-taskLabelReportingEvent/taskLabelReportingEvent/page',
        method: 'get',
        params
    })
}

/**
@@ -54,21 +54,21 @@
 * @returns 
 */
export const getTaskLabelAntiFraudPage = (type = 1, resBusId) => {
  let params = {
    resBusId
  }

  if (type != 1) {
    params = {
      buildId: resBusId
    let params = {
        resBusId
    }
  }

  return request({
    url: '/api/blade-backblastPubRecord/backblastPubRecord/page',
    method: 'get',
    params
  })
    if (type != 1) {
        params = {
            buildId: resBusId
        }
    }

    return request({
        url: '/api/blade-backblastPubRecord/backblastPubRecord/page',
        method: 'get',
        params
    })
}
/**
 * 反诈预警列表
@@ -76,21 +76,21 @@
 * @returns 
 */
export const getBackblastWarnHanRec = (type = 1, resBusId) => {
  let params = {
    resBusId
  }

  if (type != 1) {
    params = {
      buildId: resBusId
    let params = {
        resBusId
    }
  }

  return request({
    url: '/api/blade-backblastWarnHanRec/backblastWarnHanRec/page',
    method: 'get',
    params
  })
    if (type != 1) {
        params = {
            buildId: resBusId
        }
    }

    return request({
        url: '/api/blade-backblastWarnHanRec/backblastWarnHanRec/page',
        method: 'get',
        params
    })
}

/**
@@ -101,26 +101,26 @@
 * @returns 
 */
export const getPoliceAlarmRecordsPage = (type = 1, resBusId, size, current) => {
  let params = {
    resBusId
  }

  if (type != 1) {
    params = {
      buildId: resBusId
    let params = {
        resBusId
    }
  }


  return request({
    url: '/api/blade-policeAlarmRecords/policeAlarmRecords/page',
    method: 'get',
    params: {
      ...params,
      current,
      size
    if (type != 1) {
        params = {
            buildId: resBusId
        }
    }
  })


    return request({
        url: '/api/blade-policeAlarmRecords/policeAlarmRecords/page',
        method: 'get',
        params: {
            ...params,
            current,
            size
        }
    })
}
/**
 * 消防检查
@@ -131,25 +131,25 @@
 */

export const getPlaceCheckPage = (type = 1, resBusId, size, current) => {
  let params = {
    resBusId
  }

  if (type != 1) {
    params = {
      buildId: resBusId
    let params = {
        resBusId
    }
  }

  return request({
    url: '/api/blade-placeCheck/placeCheck/page',
    method: 'get',
    params: {
      ...params,
      current,
      size
    if (type != 1) {
        params = {
            buildId: resBusId
        }
    }
  })

    return request({
        url: '/api/blade-placeCheck/placeCheck/page',
        method: 'get',
        params: {
            ...params,
            current,
            size
        }
    })
}


@@ -162,26 +162,26 @@
 */

export const getTaskPlaceSelfCheckPage = (houseType = 1, type, resBusId, size, current) => {
  let params = {
    resBusId
  }

  if (houseType != 1) {
    params = {
      buildId: resBusId
    let params = {
        resBusId
    }
  }

  return request({
    url: '/api/blade-taskPlaceSelfCheck/taskPlaceSelfCheck/page',
    method: 'get',
    params: {
      type,
      ...params,
      current,
      size
    if (houseType != 1) {
        params = {
            buildId: resBusId
        }
    }
  })

    return request({
        url: '/api/blade-taskPlaceSelfCheck/taskPlaceSelfCheck/page',
        method: 'get',
        params: {
            type,
            ...params,
            current,
            size
        }
    })
}


@@ -193,26 +193,26 @@
 * @returns 
 */
export const getHouseRentalPage = (type = 1, resBusId, size, current) => {
  let params = {
    resBusId
  }

  if (type != 1) {
    params = {
      buildId: resBusId
    let params = {
        resBusId
    }
  }


  return request({
    url: '/api/blade-houseRental/houseRental/page',
    method: 'get',
    params: {
      ...params,
      current,
      size
    if (type != 1) {
        params = {
            buildId: resBusId
        }
    }
  })


    return request({
        url: '/api/blade-houseRental/houseRental/page',
        method: 'get',
        params: {
            ...params,
            current,
            size
        }
    })
}
/**
 *  居住证申请列表
@@ -222,26 +222,26 @@
 * @returns 
 */
export const geTaskResidencePermitApplyPage = (type = 1, reportType, resBusId, size, current) => {
  let params = {
    resBusId
  }

  if (type != 1) {
    params = {
      buildId: resBusId
    let params = {
        resBusId
    }
  }

  return request({
    url: '/api/blade-taskResidencePermitApply/taskResidencePermitApply/page',
    method: 'get',
    params: {
      reportType,
      ...params,
      current,
      size
    if (type != 1) {
        params = {
            buildId: resBusId
        }
    }
  })

    return request({
        url: '/api/blade-taskResidencePermitApply/taskResidencePermitApply/page',
        method: 'get',
        params: {
            reportType,
            ...params,
            current,
            size
        }
    })
}
/**
 * 租客列表
@@ -252,47 +252,47 @@
 * @returns 
 */
export const getTenantPage = (type = 1, relationship, resBusId, size, current) => {
  let params = {
    resBusId
  }

  if (type != 1) {
    params = {
      buildId: resBusId
    let params = {
        resBusId
    }
  }

  return request({
    url: '/api/blade-household/household/selectTenantPage',
    method: 'get',
    params: {
      relationship,
      ...params,
      current,
      size
    if (type != 1) {
        params = {
            buildId: resBusId
        }
    }
  })

    return request({
        url: '/api/blade-household/household/selectTenantPage',
        method: 'get',
        params: {
            relationship,
            ...params,
            current,
            size
        }
    })
}
export const getTaskNoFraudReporting = (type = 1, resBusId, size, current) => {
  let params = {
    resBusId
  }

  if (type != 1) {
    params = {
      buildId: resBusId
    let params = {
        resBusId
    }
  }

  return request({
    url: '/api/blade-taskNoFraudReporting/taskNoFraudReporting/page',
    method: 'get',
    params: {
      ...params,
      current,
      size
    if (type != 1) {
        params = {
            buildId: resBusId
        }
    }
  })

    return request({
        url: '/api/blade-taskNoFraudReporting/taskNoFraudReporting/page',
        method: 'get',
        params: {
            ...params,
            current,
            size
        }
    })
}
/**
 * 
@@ -300,13 +300,13 @@
 * @returns 
 */
export const getTaskNoFraudReportingInfo = (id) => {
  return request({
    url: '/api/blade-taskNoFraudReporting/taskNoFraudReporting/getInfo',
    method: 'get',
    params: {
      id
    }
  })
    return request({
        url: '/api/blade-taskNoFraudReporting/taskNoFraudReporting/getInfo',
        method: 'get',
        params: {
            id
        }
    })
}
/**
 * 
@@ -314,13 +314,13 @@
 * @returns 
 */
export const getHouseRentalDetail = (id) => {
  return request({
    url: '/api/blade-houseRental/houseRental/getDetail',
    method: 'get',
    params: {
      id
    }
  })
    return request({
        url: '/api/blade-houseRental/houseRental/getDetail',
        method: 'get',
        params: {
            id
        }
    })
}

/**
@@ -331,12 +331,60 @@
 */

export const getPatrolGroupTree = (type, childType) => {
  return request({
    url: '/api/patrol/patrolGroup/getPatrolGroupTree',
    method: 'get',
    params: {
      type,
      childType
    return request({
        url: '/api/patrol/patrolGroup/getPatrolGroupTree',
        method: 'get',
        params: {
            type,
            childType
        }
    })
}

/**
 * 自来水用户信息
 * @param {*} params
 * @returns
 */

export const getZlsYhxx = (type = 1, resBusId) => {
    let params = {
        resBusId
    }
  })

    if (type != 1) {
        params = {
            buildId: resBusId
        }
    }

    return request({
        url: '/api/zlsYhxx/zlsYhxx/page',
        method: 'get',
        // params
    })
}

/**
 * 维修基金信息
 * @param {*} params
 * @returns
 */

export const getWxjj = (type = 1, resBusId) => {
    let params = {
        resBusId
    }

    if (type != 1) {
        params = {
            buildId: resBusId
        }
    }

    return request({
        url: '/api/wxjj/wxjj/page',
        method: 'get',
        // params
    })
}

 src/styles/base/index.scss

@@ -156,7 +156,7 @@
    .el-dialog {
        display: flex;
        flex-direction: column;
        width: 920px;
        width: 1160px;

        .el-dialog__body {
            display: flex;

 src/styles/media/index.scss

Diff too large

 src/views/house/components/maintain.vue

New file
@@ -0,0 +1,280 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div class="list-box">
            <el-table
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
                element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText"
                :data="dataList.records" style="width: 100%" @cell-click="cellClick">
                <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
                <el-table-column align="center" prop="name" label="姓名" width="100"> </el-table-column>
                <el-table-column align="center" prop="gender" label="性别" width="70">
                    <template slot-scope="scope">
                        {{ scope.row.gender == 1 ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="ethnicity" label="民族" width="70"> </el-table-column>
                <el-table-column align="center" prop="idCard" label="身份证号码"> </el-table-column>
                <el-table-column align="center" prop="telephone" label="手机号"> </el-table-column>
                <el-table-column align="center" prop="location" show-overflow-tooltip label="现居住地"> </el-table-column>
                <el-table-column align="center" prop="name" label="岗位" width="80px"> </el-table-column>

            </el-table>
        </div>

        <!-- 详情页面 -->
        <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false"
            :append-to-body="true" :visible.sync="detailBox">
            <div class="detail-box">
                <!-- popelList[0]  详情页面 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等-->
                <div class="detail-title-box">
                    <div class="detail-title">从业人员详情</div>
                    <div class="close" @click="detailBox = false" title="关闭"></div>
                </div>

                <div class="detail-content-box">
                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">场所名称</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.placeName }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">场所负责人</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.principal }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">负责人电话</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.principalPhone }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">场所地址</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="">{{ row.location }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">姓名</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.name }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">性别</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.gender == 1 ? '男' : '女' }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">民族</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.ethnicity }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">身份证号码</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.idCard }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">手机号</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.telephone }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">现居住地</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.tempAddress }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">岗位</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.jobNature }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">入职时间</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.employmentTime }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">辞职时间</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.resignationTime }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">从业人员照片</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="mini-code">
                                <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.employerImg"
                                    :preview-src-list="[row.employerImg]">
                                    <div slot="error" class="image-slot"></div>
                                </el-image>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import {
    getWxjj
} from "@/api/dept/newIndex.js"
export default {
    name: 'tableFromPop',

    props: {
        hushiPeoTy: {
            type: String,
            default: ''
        },
        residentIdSave: {
            type: String,
            default: ''
        },
        residentDetailsType: {
            type: Number,
            default: 1
        },
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data () {
        //这里存放数据
        return {
            row: {},
            detailBox: false,
            residentLoading: false,
            residentNoDataText: '暂无数据',
            dataList: {
                total: 1,
                records: []

            },

        }
    },
    //监听属性 类似于data概念
    computed: {
    },
    //监控data中的数据变化
    watch: {
        residentIdSave (newVal, oldVal) {
            console.log('residentIdSave', newVal, oldVal)
            if (newVal) {
                this.init()
            }
        }
    },
    //方法集合
    methods: {
        init () {
            this.residentLoading = true
            getWxjj(this.residentDetailsType, this.residentIdSave).then((res) => {
                this.dataList.total = res.data.data.total
                this.dataList.records = res.data.data.records
                this.residentLoading = false
            }).catch((err) => {
                this.residentLoading = false
            })
        },
        cellClick (row, column, cell, event) {
            row.employerImg = this.getImgUrls(row.employerImg)
            this.row = row
            this.detailBox = !this.detailBox
            console.log('cellClick', row, column, cell, event)
        },
        // // 图片转换
        getImgUrls (imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    return 'http://10.141.11.11/jczzMedia/' + ele
                    // return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        console.log('tableFromPop created', this.residentIdSave)
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
        console.log('tableFromPop mounted', this.residentIdSave)
        this.init()
    },
    beforeCreate () { }, //生命周期 - 创建之前
    beforeMount () { }, //生命周期 - 挂载之前
    beforeUpdate () { }, //生命周期 - 更新之前
    updated () { }, //生命周期 - 更新之后
    beforeDestroy () { }, //生命周期 - 销毁之前
    destroyed () { }, //生命周期 - 销毁完成
    activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style scoped lang="scss">
.table-box-w {
    // position: relative;
    // background-color: rgba(228, 17, 17, 0.5);
}
</style>

 src/views/house/components/useWater.vue

New file
@@ -0,0 +1,280 @@
<!--  -->
<template>
    <div class="table-box-w">
        <div class="list-box">
            <el-table
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
                element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText"
                :data="dataList.records" style="width: 100%" @cell-click="cellClick">
                <!-- 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等。 -->
                <el-table-column align="center" prop="name" label="姓名" width="100"> </el-table-column>
                <el-table-column align="center" prop="gender" label="性别" width="70">
                    <template slot-scope="scope">
                        {{ scope.row.gender == 1 ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="ethnicity" label="民族" width="70"> </el-table-column>
                <el-table-column align="center" prop="idCard" label="身份证号码"> </el-table-column>
                <el-table-column align="center" prop="telephone" label="手机号"> </el-table-column>
                <el-table-column align="center" prop="location" show-overflow-tooltip label="现居住地"> </el-table-column>
                <el-table-column align="center" prop="name" label="岗位" width="80px"> </el-table-column>

            </el-table>
        </div>

        <!-- 详情页面 -->
        <el-dialog class="resident-details-box-details" :modal="false" :close-on-click-modal="false"
            :append-to-body="true" :visible.sync="detailBox">
            <div class="detail-box">
                <!-- popelList[0]  详情页面 包含了姓名、性别、民族、身份证号码、手机号、现居住地、岗位、从业人员照片等-->
                <div class="detail-title-box">
                    <div class="detail-title">从业人员详情</div>
                    <div class="close" @click="detailBox = false" title="关闭"></div>
                </div>

                <div class="detail-content-box">
                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">场所名称</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.placeName }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">场所负责人</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.principal }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">负责人电话</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.principalPhone }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">场所地址</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="">{{ row.location }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">姓名</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.name }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">性别</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.gender == 1 ? '男' : '女' }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">民族</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.ethnicity }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">身份证号码</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.idCard }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">手机号</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.telephone }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">现居住地</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.tempAddress }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">岗位</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.jobNature }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">入职时间</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.employmentTime }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">辞职时间</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="detail-row">{{ row.resignationTime }}</div>
                        </el-col>
                    </el-row>

                    <el-row class="">
                        <el-col :span="6">
                            <div class="detail-row">从业人员照片</div>
                        </el-col>
                        <el-col :span="18">
                            <div class="mini-code">
                                <el-image fit="contain" style="height: 100px;width: 100px;" :src="row.employerImg"
                                    :preview-src-list="[row.employerImg]">
                                    <div slot="error" class="image-slot"></div>
                                </el-image>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import {
    getZlsYhxx
} from "@/api/dept/newIndex.js"
export default {
    name: 'tableFromPop',

    props: {
        hushiPeoTy: {
            type: String,
            default: ''
        },
        residentIdSave: {
            type: String,
            default: ''
        },
        residentDetailsType: {
            type: Number,
            default: 1
        },
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data () {
        //这里存放数据
        return {
            row: {},
            detailBox: false,
            residentLoading: false,
            residentNoDataText: '暂无数据',
            dataList: {
                total: 1,
                records: []

            },

        }
    },
    //监听属性 类似于data概念
    computed: {
    },
    //监控data中的数据变化
    watch: {
        residentIdSave (newVal, oldVal) {
            console.log('residentIdSave', newVal, oldVal)
            if (newVal) {
                this.init()
            }
        }
    },
    //方法集合
    methods: {
        init () {
            this.residentLoading = true
            getZlsYhxx(this.residentDetailsType, this.residentIdSave).then((res) => {
                this.dataList.total = res.data.data.total
                this.dataList.records = res.data.data.records
                this.residentLoading = false
            }).catch((err) => {
                this.residentLoading = false
            })
        },
        cellClick (row, column, cell, event) {
            row.employerImg = this.getImgUrls(row.employerImg)
            this.row = row
            this.detailBox = !this.detailBox
            console.log('cellClick', row, column, cell, event)
        },
        // // 图片转换
        getImgUrls (imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    return 'http://10.141.11.11/jczzMedia/' + ele
                    // return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        console.log('tableFromPop created', this.residentIdSave)
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
        console.log('tableFromPop mounted', this.residentIdSave)
        this.init()
    },
    beforeCreate () { }, //生命周期 - 创建之前
    beforeMount () { }, //生命周期 - 挂载之前
    beforeUpdate () { }, //生命周期 - 更新之前
    updated () { }, //生命周期 - 更新之后
    beforeDestroy () { }, //生命周期 - 销毁之前
    destroyed () { }, //生命周期 - 销毁完成
    activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>


<style scoped lang="scss">
.table-box-w {
    // position: relative;
    // background-color: rgba(228, 17, 17, 0.5);
}
</style>

 src/views/house/index.vue

Diff too large

 src/views/layout/index.vue

@@ -2,89 +2,92 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-02-20 17:46:48
 * @LastEditTime: 2026-01-05 22:36:50
 * @FilePath: \srs-police-affairs\src\views\layout\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->
<template>
  <div class="wrapper">
    <div class="main-header">
      <div class="menu-list left">
        <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
          @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
          <span :class="{ on: showChange(item) }">{{ item.menuName }}</span>
    <div class="wrapper">
        <div class="main-header">
            <div class="menu-list left">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
                    <span :class="{ on: showChange(item) }">{{ item.menuName }}</span>

          <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
            <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click.stop="goToPath(subItem)">
              {{
                subItem.menuName
              }}
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex"
                            @click.stop="goToPath(subItem)">
                            {{
                                subItem.menuName
                            }}
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>

      <div class="title">
        <h3>信州公安警务作战一体化平台</h3>
      </div>
            <div class="title">
                <h3>信州公安警务作战一体化平台</h3>
            </div>

      <!-- 菜单导航 -->
      <div class="menu-list right">
        <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
          @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
          <span :class="{ on: showChange(item) }">
            {{
              item.menuName }}
          </span>
            <!-- 菜单导航 -->
            <div class="menu-list right">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                    <span :class="{ on: showChange(item) }">
                        {{
                            item.menuName }}
                    </span>

          <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
            <div :class="{ on: currentUrl.indexOf(subItem.path) != -1 }" v-for="(subItem, subIndex) in item.children"
              :key="subIndex" @click.stop="goToPath(subItem, 4)">
              {{
                subItem.menuName
              }}
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div :class="{ on: currentUrl.indexOf(subItem.path) != -1 }"
                            v-for="(subItem, subIndex) in item.children" :key="subIndex"
                            @click.stop="goToPath(subItem, 4)">
                            {{
                                subItem.menuName
                            }}
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户登录展示的 -->
      <div class="user-infor" @click="openUser">
        <div class="userIcon" :class="{ on: userOn == true }">
          <i class="el-icon-more"></i>
        </div>
        <div class="userDetail" v-if="isShowUserDetail">
          <div class="triangle"></div>
          <div class="userName">用户名：{{ currentUserInfo.user_name }}</div>
          <div class="userBtn">
            <div class="back-system" v-if="permission.operation_manager" @click="goToBack">
              <i class="el-icon-user-back"></i>
              运维管理
            <!-- 用户登录展示的 -->
            <div class="user-infor" @click="openUser">
                <div class="userIcon" :class="{ on: userOn == true }">
                    <i class="el-icon-more"></i>
                </div>
                <div class="userDetail" v-if="isShowUserDetail">
                    <div class="triangle"></div>
                    <div class="userName">用户名：{{ currentUserInfo.user_name }}</div>
                    <div class="userBtn">
                        <div class="back-system" v-if="permission.operation_manager" @click="goToBack">
                            <i class="el-icon-user-back"></i>
                            运维管理
                        </div>
                        <div class="back-system"
                            :style="{ color: currentUrl == '/layout/available' ? '#fcbd56' : '#fff' }"
                            @click="goToPage('/layout/available')">
                            <i class="el-icon-s-grid"></i>
                            可用资源
                        </div>
                        <div class="back-system" :style="{ color: currentUrl == '/layout/risk' ? '#fcbd56' : '#fff' }"
                            @click="goToPage('/layout/risk')">
                            <i class="el-icon-s-grid"></i>
                            风险隐患
                        </div>
                        <div class="edit" @click="resetPsd">
                            <i class="el-icon-edit"></i>
                            修改密码
                        </div>
                        <div class="edit" @click="goTOLogout">
                            <i class="el-icon-user-quit"></i>
                            退出登录
                        </div>
                    </div>
                </div>
            </div>
            <div class="back-system" :style="{ color: currentUrl == '/layout/available' ? '#fcbd56' : '#fff' }"
              @click="goToPage('/layout/available')">
              <i class="el-icon-s-grid"></i>
              可用资源
            </div>
            <div class="back-system" :style="{ color: currentUrl == '/layout/risk' ? '#fcbd56' : '#fff' }"
              @click="goToPage('/layout/risk')">
              <i class="el-icon-s-grid"></i>
              风险隐患
            </div>
            <div class="edit" @click="resetPsd">
              <i class="el-icon-edit"></i>
              修改密码
            </div>
            <div class="edit" @click="goTOLogout">
              <i class="el-icon-user-quit"></i>
              退出登录
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="userIcon" :class="{on: userOn == true}" @click="openUser">
            <!-- <div class="userIcon" :class="{on: userOn == true}" @click="openUser">
                <div class="userDetail" v-if="isShowUserDetail">
                    <div class="triangle"></div>
                    <div class="userName">用户名：{{userName}}</div>
@@ -97,68 +100,69 @@
                    </div>
                </div>
            </div>-->
    </div>

    <div class="main-container">
      <!-- 地图区域 -->
      <map-box ref="modalForm">
        <!-- 主体内容区域 -->
        <div slot="mainContent" class="main-content" id="MainContent"
          :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
          <router-view ref="target-name"></router-view>
        </div>

        <div slot="copyrightText">
          <div class="copyright-box" v-show="!this.$store.state.popupParams.isShowHomeContent">版权所有：信州分局
            <br />技术支持：户政大队/科信大队
          </div>
          <div :class="{ 'copyright-box-shouye': isShouYe, 'copyright-box': !isShouYe, }"
            v-show="this.$store.state.popupParams.isShowHomeContent">
            版权所有：信州分局
            <br />技术支持：户政大队/科信大队
          </div>
        </div>

        <el-button slot="showButton" v-show="leftShow" class="flexible-btn"
          :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
          :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
          @click="flexibelClick"></el-button>
        <div slot="resetPopup">
          <el-dialog title="修改密码" :visible.sync="resetPsdPopupShow" :modal="true" :before-close="resetBeforeClose"
            :modal-append-to-body="false" :close-on-click-modal="false" class="reset-popup-box">
            <div class="reset-popup-body">
              <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="原密码" prop="oldPassword">
                  <el-input v-model="form.oldPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model="form.newPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="newPassword1">
                  <el-input v-model="form.newPassword1" type="password"></el-input>
                </el-form-item>
                <div class="btn-box">
                  <el-button type="primary" @click="submitForm">提交</el-button>
                  <el-button @click="cancelSF">取消</el-button>
        <div class="main-container">
            <!-- 地图区域 -->
            <map-box ref="modalForm">
                <!-- 主体内容区域 -->
                <div slot="mainContent" class="main-content" id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
                    <router-view ref="target-name"></router-view>
                </div>
              </el-form>
            </div>
          </el-dialog>

                <div slot="copyrightText">
                    <div class="copyright-box" v-show="!this.$store.state.popupParams.isShowHomeContent">版权所有：信州分局
                        <br />技术支持：户政大队/科信大队
                    </div>
                    <div :class="{ 'copyright-box-shouye': isShouYe, 'copyright-box': !isShouYe, }"
                        v-show="this.$store.state.popupParams.isShowHomeContent">
                        版权所有：信州分局
                        <br />技术支持：户政大队/科信大队
                    </div>
                </div>

                <el-button slot="showButton" v-show="leftShow" class="flexible-btn"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                    @click="flexibelClick"></el-button>
                <div slot="resetPopup">
                    <el-dialog title="修改密码" :visible.sync="resetPsdPopupShow" :modal="true"
                        :before-close="resetBeforeClose" :modal-append-to-body="false" :close-on-click-modal="false"
                        class="reset-popup-box">
                        <div class="reset-popup-body">
                            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                                <el-form-item label="原密码" prop="oldPassword">
                                    <el-input v-model="form.oldPassword" type="password"></el-input>
                                </el-form-item>
                                <el-form-item label="新密码" prop="newPassword">
                                    <el-input v-model="form.newPassword" type="password"></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="newPassword1">
                                    <el-input v-model="form.newPassword1" type="password"></el-input>
                                </el-form-item>
                                <div class="btn-box">
                                    <el-button type="primary" @click="submitForm">提交</el-button>
                                    <el-button @click="cancelSF">取消</el-button>
                                </div>
                            </el-form>
                        </div>
                    </el-dialog>
                </div>
            </map-box>
        </div>
      </map-box>
    </div>
  </div>
</template>

<script>
let HTUrl = ''

if (process.env.NODE_ENV == 'development') {
  // 开发
  HTUrl = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_HTURL
    // 开发
    HTUrl = window.BASE_URL_CONFIG.VUE_APP_OUTER_NET_HTURL
} else {
  // 部署
  HTUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_HTURL
    // 部署
    HTUrl = window.BASE_URL_CONFIG.VUE_APP_INTRANET_HTURL
}


@@ -172,340 +176,340 @@
import { mapGetters } from "vuex"

export default {
  provide () {
    return {
      userInfo: JSON.parse(getUserInfo()),
    }
  },

  data () {
    return {
      form: {},
      rules: {
        oldPassword: [{ required: true, message: "必填" }],
        newPassword: [{ required: true, message: "必填" }],
        newPassword1: [{ required: true, message: "必填" }]
      },
      resetPsdPopupShow: false,
      menuLeftList: [
        {
          menuName: '首页',
          path: '/layout/home'
        },
        {
          menuName: '社区感知',
          path: '/layout/house'
        },
        {
          menuName: '警力资源',
          path: '/layout/policeresouce'

        },
        {
          menuName: '视频监控',
          path: '/layout/video/list',
          childrenFlag: false,
          children: [
            {
              menuName: '视频预览',
              path: '/layout/video/list'
            },
            {
              menuName: '视频巡逻',
              path: '/layout/video/region'
            }
          ]
        },
      ],
      menuRightList: [
        {
          menuName: '电子沙盘',
          path: '/layout/activity'
        },
        {
          menuName: '警情信息',
          path: '/layout/policeinfor'
        },
        {
          menuName: '扫码应用',
          path: '/layout/scanOrCode',
          childrenFlag: false,
          children: [
            {
              menuName: '群众上报',
              path: '/layout/scanOrCode'
            },
            {
              menuName: '九小场所',
              path: '/layout/site'
            },
            {
              menuName: '矛盾纠纷',
              path: '/layout/contradictionEventShow'
            },
            {
              menuName: '反诈宣防',
              path: '/layout/antiFraudShow'
            },
            {
              menuName: '租赁信息',
              path: '/layout/rentalInfo'
            },
            {
              menuName: '阵地管理',
              path: '/layout/positionManage'
            },
            {
              menuName: '从业人员',
              path: '/layout/practitionersManage'
            },
            {
              menuName: '扫码报警',
              path: '/layout/policeAlarmRecordsManage'
            },
            /* {
                menuName: '综合搜索',
                path: '/layout/comprehensiveSearch'
            }, */
          ]
        },
        {
          menuName: '智能搜索',
          path: '/layout/intelligentSearch'
    provide () {
        return {
            userInfo: JSON.parse(getUserInfo()),
        }
      ],

      show: true,

      leftShow: true,

      boxWidth: 0,

      currentUrl: '/layout/home',
      userOn: false,
      isShowUserDetail: false,
      user: {},

      currentUserInfo: JSON.parse(getUserInfo()),

      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: "",
      isShouYe: true,
    }
  },

  computed: {
    ...mapGetters(['permission']),

    showChange () {
      return (item) => {
        if ('children' in item && item.children.length) {
          return item.children.some(i => this.currentUrl == i.path)
        } else {
          return this.currentUrl.indexOf(item.path) != -1
        }
      }
    }
  },

  created () {
    this.currentUrl = this.$route.path
    this.init()

    //实时检测刷新token
    this.refreshToken()
  },

  watch: {
    $route: {
      handler (newPath, oldPath) {
        this.currentUrl = newPath.path

        this.$nextTick(() => {
          // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
          document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
          document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
          document.querySelector('.over-look-btn').classList.remove('shrink-btn')
          document.querySelector('.compass-btn').classList.remove('shrink-btn')
          document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
        })

        if (this.currentUrl == '/layout/home') {
          this.leftShow = false
          this.isShouYe = true
        } else {
          this.leftShow = true
          this.isShouYe = false
        }
      },
      immediate: true
    }
  },

  mounted () {
  },

  methods: {
    // 重置密码
    resetPsd () {
      this.resetPsdPopupShow = true
    },

    // 提交修改
    submitForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          updatePassword(md5(this.form.oldPassword), md5(this.form.newPassword), md5(this.form.newPassword1)).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "修改密码成功!"
              })
              this.resetBeforeClose()
    data () {
        return {
            form: {},
            rules: {
                oldPassword: [{ required: true, message: "必填" }],
                newPassword: [{ required: true, message: "必填" }],
                newPassword1: [{ required: true, message: "必填" }]
            },
            resetPsdPopupShow: false,
            menuLeftList: [
                {
                    menuName: '首页',
                    path: '/layout/home'
                },
                {
                    menuName: '社区感知',
                    path: '/layout/house'
                },
                {
                    menuName: '警力资源',
                    path: '/layout/policeresouce'

                },
                {
                    menuName: '视频监控',
                    path: '/layout/video/list',
                    childrenFlag: false,
                    children: [
                        {
                            menuName: '视频预览',
                            path: '/layout/video/list'
                        },
                        {
                            menuName: '视频巡逻',
                            path: '/layout/video/region'
                        }
                    ]
                },
            ],
            menuRightList: [
                {
                    menuName: '电子沙盘',
                    path: '/layout/activity'
                },
                {
                    menuName: '警情信息',
                    path: '/layout/policeinfor'
                },
                {
                    menuName: '扫码应用',
                    path: '/layout/scanOrCode',
                    childrenFlag: false,
                    children: [
                        {
                            menuName: '群众上报',
                            path: '/layout/scanOrCode'
                        },
                        {
                            menuName: '九小场所',
                            path: '/layout/site'
                        },
                        {
                            menuName: '矛盾纠纷',
                            path: '/layout/contradictionEventShow'
                        },
                        {
                            menuName: '反诈宣防',
                            path: '/layout/antiFraudShow'
                        },
                        {
                            menuName: '租赁信息',
                            path: '/layout/rentalInfo'
                        },
                        {
                            menuName: '阵地管理',
                            path: '/layout/positionManage'
                        },
                        {
                            menuName: '从业人员',
                            path: '/layout/practitionersManage'
                        },
                        {
                            menuName: '扫码报警',
                            path: '/layout/policeAlarmRecordsManage'
                        },
                        /* {
                            menuName: '综合搜索',
                            path: '/layout/comprehensiveSearch'
                        }, */
                    ]
                },
                {
                    menuName: '智能搜索',
                    path: '/layout/intelligentSearch'
                }
            ],

            show: true,

            leftShow: true,

            boxWidth: 0,

            currentUrl: '/layout/home',
            userOn: false,
            isShowUserDetail: false,
            user: {},

            currentUserInfo: JSON.parse(getUserInfo()),

            //刷新token锁
            refreshLock: false,
            //刷新token的时间
            refreshTime: "",
            isShouYe: true,
        }
    },

    computed: {
        ...mapGetters(['permission']),

        showChange () {
            return (item) => {
                if ('children' in item && item.children.length) {
                    return item.children.some(i => this.currentUrl == i.path)
                } else {
                    return this.currentUrl.indexOf(item.path) != -1
                }
            }
        }
    },

    created () {
        this.currentUrl = this.$route.path
        this.init()

        //实时检测刷新token
        this.refreshToken()
    },

    watch: {
        $route: {
            handler (newPath, oldPath) {
                this.currentUrl = newPath.path

                this.$nextTick(() => {
                    // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
                    document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                    document.querySelector('.over-look-btn').classList.remove('shrink-btn')
                    document.querySelector('.compass-btn').classList.remove('shrink-btn')
                    document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
                })

                if (this.currentUrl == '/layout/home') {
                    this.leftShow = false
                    this.isShouYe = true
                } else {
                    this.leftShow = true
                    this.isShouYe = false
                }
            },
            immediate: true
        }
    },

    mounted () {
    },

    methods: {
        // 重置密码
        resetPsd () {
            this.resetPsdPopupShow = true
        },

        // 提交修改
        submitForm () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    updatePassword(md5(this.form.oldPassword), md5(this.form.newPassword), md5(this.form.newPassword1)).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: "success",
                                message: "修改密码成功!"
                            })
                            this.resetBeforeClose()
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.msg
                            })
                        }
                    }, error => {
                        window.console.log(error)
                    })
                } else {
                    return false
                }
            })
        },

        // 取消提交
        cancelSF () {
            this.resetBeforeClose()
        },

        // 弹窗关闭事件
        resetBeforeClose () {
            this.$refs.form.resetFields()
            this.resetPsdPopupShow = false
        },

        init () {
            this.user = this.$store.state.user.userInfo
        },
        //登出
        goTOLogout () {
            this.$store.dispatch("LogOut").then(() => {
                this.$router.push({ path: "/login" })
            })
        },

        // 跳转页面
        goToPage (pagePath) {
            this.$router.push(pagePath)
        },

        /**
         * @description: 跳转运维管理平台
         * @return {*}
         */
        goToBack () {
            var path = HTUrl + "?token=" + getToken()
            window.open(path)
        },
        /**
         * @description: 路由跳转的事件
         *                  通过给父元素绑定事件-子元素触发，并传入参数
         * @param {*} e 子元素上绑定的的自定义属性
         * @return {*} 没有返回值
         */
        goToPath (params, key = 0) {
            console.log(params, key, 465)

            if (params.path) {
                if (this.$route.path == params.path) return
                this.$router.push(params.path)
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              })
                params.childrenFlag = !params.childrenFlag
            }
          }, error => {
            window.console.log(error)
          })
        } else {
          return false
        }
      })
    },
        },

    // 取消提交
    cancelSF () {
      this.resetBeforeClose()
    },
        flexibelClick () {
            this.show = !this.show

    // 弹窗关闭事件
    resetBeforeClose () {
      this.$refs.form.resetFields()
      this.resetPsdPopupShow = false
    },
            if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)

    init () {
      this.user = this.$store.state.user.userInfo
    },
    //登出
    goTOLogout () {
      this.$store.dispatch("LogOut").then(() => {
        this.$router.push({ path: "/login" })
      })
    },
            if (this.show) {
                // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
                document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                document.querySelector('.screen-full-btn').classList.add('shrink-btn')
                document.querySelector('.over-look-btn').classList.add('shrink-btn')
                document.querySelector('.compass-btn').classList.add('shrink-btn')
                document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
            } else {
                // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
                document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                document.querySelector('.over-look-btn').classList.remove('shrink-btn')
                document.querySelector('.compass-btn').classList.remove('shrink-btn')
                document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
            }
        },

    // 跳转页面
    goToPage (pagePath) {
      this.$router.push(pagePath)
    },
        resize (val, flag = false) {
            this.boxWidth = val

    /**
     * @description: 跳转运维管理平台
     * @return {*}
     */
    goToBack () {
      var path = HTUrl + "?token=" + getToken()
      window.open(path)
    },
    /**
     * @description: 路由跳转的事件
     *                  通过给父元素绑定事件-子元素触发，并传入参数
     * @param {*} e 子元素上绑定的的自定义属性
     * @return {*} 没有返回值
     */
    goToPath (params, key = 0) {
      console.log(params, key, 465)
            this.show = flag

      if (params.path) {
        if (this.$route.path == params.path) return
        this.$router.push(params.path)
      } else {
        params.childrenFlag = !params.childrenFlag
      }
    },
            if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)

    flexibelClick () {
      this.show = !this.show

      if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)

      if (this.show) {
        // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
        document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
        document.querySelector('.screen-full-btn').classList.add('shrink-btn')
        document.querySelector('.over-look-btn').classList.add('shrink-btn')
        document.querySelector('.compass-btn').classList.add('shrink-btn')
        document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
      } else {
        // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
        document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
        document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
        document.querySelector('.over-look-btn').classList.remove('shrink-btn')
        document.querySelector('.compass-btn').classList.remove('shrink-btn')
        document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
      }
    },

    resize (val, flag = false) {
      this.boxWidth = val

      this.show = flag

      if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)

      this.$nextTick(() => {
        if (this.show) {
          // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
          document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
          document.querySelector('.screen-full-btn').classList.add('shrink-btn')
          document.querySelector('.over-look-btn').classList.add('shrink-btn')
          document.querySelector('.compass-btn').classList.add('shrink-btn')
          document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
        } else {
          // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
          document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
          document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
          document.querySelector('.over-look-btn').classList.remove('shrink-btn')
          document.querySelector('.compass-btn').classList.remove('shrink-btn')
          document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
        }
      })
    },

    openUser () {
      this.userOn = !this.userOn
      this.isShowUserDetail = !this.isShowUserDetail
    },

    // 定时检测token
    refreshToken () {
      this.refreshTime = setInterval(() => {
        const token = getStore({
          name: "store-token",
          debug: true
        }) || {}
        const date = calcDate(token.datetime, new Date().getTime())
        if (validatenull(date)) return
        if (date.seconds >= 3000 && !this.refreshLock) {
          this.refreshLock = true
          this.$store
            .dispatch("refreshToken")
            .then(() => {
              this.refreshLock = false
            this.$nextTick(() => {
                if (this.show) {
                    // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
                    document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.add('shrink-btn')
                    document.querySelector('.over-look-btn').classList.add('shrink-btn')
                    document.querySelector('.compass-btn').classList.add('shrink-btn')
                    document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
                } else {
                    // if (document.querySelector('.dc-container .dc-zoom-controller') == null) return
                    document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                    document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
                    document.querySelector('.over-look-btn').classList.remove('shrink-btn')
                    document.querySelector('.compass-btn').classList.remove('shrink-btn')
                    document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
                }
            })
            .catch(() => {
              this.refreshLock = false
            })
        },

        openUser () {
            this.userOn = !this.userOn
            this.isShowUserDetail = !this.isShowUserDetail
        },

        // 定时检测token
        refreshToken () {
            this.refreshTime = setInterval(() => {
                const token = getStore({
                    name: "store-token",
                    debug: true
                }) || {}
                const date = calcDate(token.datetime, new Date().getTime())
                if (validatenull(date)) return
                if (date.seconds >= 3000 && !this.refreshLock) {
                    this.refreshLock = true
                    this.$store
                        .dispatch("refreshToken")
                        .then(() => {
                            this.refreshLock = false
                        })
                        .catch(() => {
                            this.refreshLock = false
                        })
                }
            }, 10000)
        }
      }, 10000)
    }
  }
}
</script>

@@ -513,325 +517,325 @@
$bg-blue: rgba(24, 33, 92, 0.9);

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;

  .main-header {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: left;
    font-size: 44px;
    font-weight: bold;
    color: #fff;
    z-index: 99;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(/img/box/title-bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      z-index: -1;
      opacity: 0.85;
    }

    .title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 450px;
      font-size: 24px;
      // text-align: center;
      overflow: hidden;
      letter-spacing: 6px;

      &>img {
        // width: 100%;
        height: 80%;
        margin: 0 10px 0 10px;
        // margin-top: -5px;
      }
    }

    .menu-list.left {
      margin-left: 58px;

      .nav-list {
        background: $menu-tab-bg-color;
        // border-radius: 10px 16px 10px 16px;
        transform: skew(61.5deg);

        &>span {
          transform: skew(-61.5deg);
        }
      }
    }

    .menu-list.right {
      margin-right: 58px;

      .nav-list {
        background: $menu-tab-bg-color;
        // border-radius: 16px 10px 16px 10px;
        transform: skew(-61.5deg);

        &>span {
          transform: skew(61.5deg);
        }
      }
    }

    .menu-list {
      display: flex;
      align-items: center;

      &>.nav-list {

        // color: rgba(32, 106, 181, 1);
        // border-bottom: 2px solid #409eff;
        &>span.on {
          color: rgba(252, 189, 86, 1);
        }
      }

      .nav-list {
        margin: 0 10px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 110px;
        height: 36px;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 0.5px;
        cursor: pointer;
      }

      .sub-nav-list {
        border-top: 14px solid transparent;
        position: absolute;
        top: 28px;
        width: 100%;
        cursor: default;
        z-index: 999;
        transform-origin: top;

        div {
          height: 36px;
          text-align: center;
          line-height: 36px;
          font-size: 16px;
          // background: $bg-blue;
          background: $table-body-tr-n-color;
          cursor: pointer;
          box-sizing: content-box;

          &.on {
            color: rgba(252, 189, 86, 1);
          }
        }

        div:first-child {
          padding-top: 10px;
        }

        div:last-child {
          padding-bottom: 10px;
        }

        div:hover {
          background: $table-body-tr-2n-color !important;
        }
      }

      &.left {
        .sub-nav-list {
          left: 12px;
          transform: skew(-61.5deg);
        }
      }

      &.right {
        .sub-nav-list {
          left: -12px;
          transform: skew(61.5deg);
        }
      }
    }

    .user-infor {
      position: absolute;
      top: 0;
      right: 0;
      width: 42px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 24px;
      cursor: pointer;

      .userIcon {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: $menu-tab-bg-color;
        box-shadow: inset 0 0 10px $menu-tab-shadow;
        border-radius: 50%;
      }

      .userIcon.on {
        color: rgba(252, 189, 86, 1);
      }

      .userDetail {
        width: 160px;
        position: absolute;
        top: 64px;
        right: 4px;
        background: $menu-tab-bg-color;
        border-radius: 8px;
        cursor: default;

        .triangle {
          position: absolute;
          top: -16px;
          right: 20px;
          width: 0px;
          height: 0px;
          border: 8px solid #000;
          border-top-color: transparent;
          border-bottom-color: rgba(3, 82, 102, 0.8);
          border-left-color: transparent;
          border-right-color: transparent;
        }

        .userName {
          margin-top: 4px;
          width: 100%;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          font-weight: 500;
          box-sizing: content-box;
          color: #fff;
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }

        .userBtn {
          margin-bottom: 4px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 16px;
          font-weight: normal;

          &>div {
            margin-top: 4px;
            width: 100px;
            height: 32px;
            line-height: 32px;
            background-color: rgba(159, 165, 255, 0.6);
            border-radius: 4px;
            cursor: pointer;
          }
        }
      }
    }
  }

  .main-container {
    position: relative;
    width: 100%;
    height: 100%;

    .main-content.spread {
      position: absolute;
      top: 60px;
      height: calc(100% - 60px);
      width: 400px;
      z-index: 99;
    .main-header {
        display: flex;
        justify-content: space-between;
        position: absolute;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: left;
        font-size: 44px;
        font-weight: bold;
        color: #fff;
        z-index: 99;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(/img/box/title-bg.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            z-index: -1;
            opacity: 0.85;
        }

        .title {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 450px;
            font-size: 24px;
            // text-align: center;
            overflow: hidden;
            letter-spacing: 6px;

            &>img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
                // margin-top: -5px;
            }
        }

        .menu-list.left {
            margin-left: 58px;

            .nav-list {
                background: $menu-tab-bg-color;
                // border-radius: 10px 16px 10px 16px;
                transform: skew(61.5deg);

                &>span {
                    transform: skew(-61.5deg);
                }
            }
        }

        .menu-list.right {
            margin-right: 58px;

            .nav-list {
                background: $menu-tab-bg-color;
                // border-radius: 16px 10px 16px 10px;
                transform: skew(-61.5deg);

                &>span {
                    transform: skew(61.5deg);
                }
            }
        }

        .menu-list {
            display: flex;
            align-items: center;

            &>.nav-list {

                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                &>span.on {
                    color: rgba(252, 189, 86, 1);
                }
            }

            .nav-list {
                margin: 0 10px;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 110px;
                height: 36px;
                font-size: 18px;
                font-weight: bold;
                letter-spacing: 0.5px;
                cursor: pointer;
            }

            .sub-nav-list {
                border-top: 14px solid transparent;
                position: absolute;
                top: 28px;
                width: 100%;
                cursor: default;
                z-index: 999;
                transform-origin: top;

                div {
                    height: 36px;
                    text-align: center;
                    line-height: 36px;
                    font-size: 16px;
                    // background: $bg-blue;
                    background: $table-body-tr-n-color;
                    cursor: pointer;
                    box-sizing: content-box;

                    &.on {
                        color: rgba(252, 189, 86, 1);
                    }
                }

                div:first-child {
                    padding-top: 10px;
                }

                div:last-child {
                    padding-bottom: 10px;
                }

                div:hover {
                    background: $table-body-tr-2n-color !important;
                }
            }

            &.left {
                .sub-nav-list {
                    left: 12px;
                    transform: skew(-61.5deg);
                }
            }

            &.right {
                .sub-nav-list {
                    left: -12px;
                    transform: skew(61.5deg);
                }
            }
        }

        .user-infor {
            position: absolute;
            top: 0;
            right: 0;
            width: 42px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 24px;
            cursor: pointer;

            .userIcon {
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                bottom: 0;
                margin: auto;
                width: 36px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                background: $menu-tab-bg-color;
                box-shadow: inset 0 0 10px $menu-tab-shadow;
                border-radius: 50%;
            }

            .userIcon.on {
                color: rgba(252, 189, 86, 1);
            }

            .userDetail {
                width: 160px;
                position: absolute;
                top: 64px;
                right: 4px;
                background: $menu-tab-bg-color;
                border-radius: 8px;
                cursor: default;

                .triangle {
                    position: absolute;
                    top: -16px;
                    right: 20px;
                    width: 0px;
                    height: 0px;
                    border: 8px solid #000;
                    border-top-color: transparent;
                    border-bottom-color: rgba(3, 82, 102, 0.8);
                    border-left-color: transparent;
                    border-right-color: transparent;
                }

                .userName {
                    margin-top: 4px;
                    width: 100%;
                    height: 32px;
                    line-height: 32px;
                    font-size: 14px;
                    font-weight: 500;
                    box-sizing: content-box;
                    color: #fff;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
                }

                .userBtn {
                    margin-bottom: 4px;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    font-size: 16px;
                    font-weight: normal;

                    &>div {
                        margin-top: 4px;
                        width: 100px;
                        height: 32px;
                        line-height: 32px;
                        background-color: rgba(159, 165, 255, 0.6);
                        border-radius: 4px;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .main-content.take-back {
      width: 0px;
    }
    .main-container {
        position: relative;
        width: 100%;
        height: 100%;

        .main-content.spread {
            position: absolute;
            top: 60px;
            height: calc(100% - 60px);
            width: 400px;
            z-index: 99;
        }

        .main-content.take-back {
            width: 0px;
        }


    .copyright-box {
      position: fixed;
      bottom: 1%;
      right: 1%;
      color: #fff;
      font-size: 14px;
      text-align: left;
      z-index: 9;
    }
        .copyright-box {
            position: fixed;
            bottom: 1%;
            right: 1%;
            color: #fff;
            font-size: 14px;
            text-align: left;
            z-index: 9;
        }

    .copyright-box-shouye {
      position: absolute;
      bottom: calc((100% - maxCountSizeVh(120)) / 3);
      right: calc(400 / 1920 * 100vw);
      color: #fff;
      font-size: 14px;
      text-align: left;
      z-index: 9;
        .copyright-box-shouye {
            position: absolute;
            bottom: calc((100% - maxCountSizeVh(120)) / 3);
            right: calc(400 / 1920 * 100vw);
            color: #fff;
            font-size: 14px;
            text-align: left;
            z-index: 9;
        }
    }
  }
}

.flexible-btn {
  padding: 0 2px;
  position: fixed;
  top: 50%;
  left: 0px;
  // z-index: 11;
  z-index: 99;
  width: 32px;
  height: 64px;
  color: #fff;
  background: $bg-color;
  border-color: $bg-color;
  text-align: center;
  line-height: 32px;
  border-radius: 0 5px 5px 0;
  white-space: inherit !important;
  box-shadow: 1px 0px 4px 1px $bg-color;
  transform: translate(0px, -50%);
    padding: 0 2px;
    position: fixed;
    top: 50%;
    left: 0px;
    // z-index: 11;
    z-index: 89;
    width: 32px;
    height: 64px;
    color: #fff;
    background: $bg-color;
    border-color: $bg-color;
    text-align: center;
    line-height: 32px;
    border-radius: 0 5px 5px 0;
    white-space: inherit !important;
    box-shadow: 1px 0px 4px 1px $bg-color;
    transform: translate(0px, -50%);

  i {
    font-size: 16px;
  }
    i {
        font-size: 16px;
    }
}

.flexible-btn.spread {
  left: 400px;
    left: 400px;
}

.flexible-btn.take-back {
  left: 0px;
    left: 0px;
}
</style>