九小场所页面搭建及接口对接+详情相关，扫码应用调整

shuishen

2024-02-06 ab149d3cc91f5ec44236e076fdc2b9f863a0b6a4

九小场所页面搭建及接口对接+详情相关，扫码应用调整

 public/img/icon/site.png

 src/api/site/index.js

New file
@@ -0,0 +1,79 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-11-15 15:10:41
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-02-05 19:14:48
 * @FilePath: \srs-police-affairs\src\api\site\index.js
 * @Description:
 *
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
 */
import request from "@/router/axios.js";

/**
 * 获取九小场所字典表
 * @param {*} page 页数
 * @param {*} count 每页数量
 * @returns
 */
export const getNineTypeTree = () => {
  return request({
    url: "/api/blade-system/dict-biz/dictionary?code=nineType",
    method: "get",
  });
};

/**
 * 获取九小场所列表
 * @param {*} page 页数
 * @param {*} count 每页数量
 * @returns
 */
export const getNinePage = (params) => {
  return request({
    url: "/api/blade-place/place/ninePage",
    method: "get",
    params: {
      ...params,
      isNine: 1,
    },
  });
};

/**
 * 获取九小场所检查列表
 * @param {*} page 页数
 * @param {*} count 每页数量
 * @returns
 */
export const getPlaceCheckPage = (params) => {
  return request({
    url: "/api/blade-placeCheck/placeCheck/page",
    method: "get",
    params,
  });
};

/**
 * 获取九小场所检查详情
 * @returns
 */
export const getPlaceCheckInfo = (params) => {
  return request({
    url: "/api/blade-placeCheck/placeCheck/getPlaceCheckInfo",
    method: "get",
    params,
  });
};

/**
 * 获取九小场所从业人员
 * @returns
 */
export const getPlacePractitionerPage = (params) => {
  return request({
    url: "/api/blade-placePractitioner/placePractitioner/page",
    method: "get",
    params,
  });
};

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-01-31 10:43:28
 * @LastEditTime: 2024-02-05 09:35:31
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -1028,7 +1028,7 @@
                // pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), Number(alt)), params.url)
                pointElement = new global.DC.Billboard(new global.DC.Position(Number(params.lng), Number(params.lat), 0), params.url)
                pointElement.setStyle(params.setStyle)
                pointElement.size = [32, 32]
                pointElement.size = params.size || [32, 32]
                pointElement.style = "clustering"
                pointElement.attrParams = params
                layersObjcect[layerName].addOverlay(pointElement)

 src/components/siteDialog/index.vue

New file
@@ -0,0 +1,357 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-01-17 16:04:08
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-02-06 11:35:14
 * @FilePath: \srs-police-affairs\src\components\siteDialog\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<template>
    <el-dialog class="syld-details-box site-dialog-popup business-detail-box" :title="'场所详情'" append-to-body
        :close-on-click-modal="false" :visible.sync="popupShow" center @close="popupClose">
        <div class="flex f-d-c" style="height: 100%;" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
            <div class="type-tab-box">
                <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 1 }" @click="tabClick(1)">
                    基本信息</div>
                <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 2 }" @click="tabClick(2)">
                    从业人员 </div>
                <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == 3 }" @click="tabClick(3)">
                    消防检查 </div>
            </div>

            <div class="flex-1 tab-content-box" v-if="chooseTab == 1">
                <div class="info-list">
                    <div class="info-item">
                        <div class="name">
                            场所名称：
                        </div>
                        <div class="value">
                            {{ businessDetailData.placeName }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            场所地址：
                        </div>
                        <div class="value">
                            {{ businessDetailData.location }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            负责人：
                        </div>
                        <div class="value">
                            {{ businessDetailData.principal }}
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            手机号码：
                        </div>
                        <div class="value">
                            {{ businessDetailData.principalPhone }}
                        </div>
                    </div>
                    <!-- <div class="info-item">
                        <div class="name">
                            所属社区：
                        </div>
                        <div class="value">
                            361102003027
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="name">
                            所属网格：
                        </div>
                        <div class="value">
                            第五网格
                        </div>
                    </div> -->
                </div>
            </div>

            <div class="flex-1  flex f-d-c tab-content-box" v-if="chooseTab == 2">
                <el-table :data="personTableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center' }">
                    <el-table-column prop="name" label="名称" width="180">
                    </el-table-column>
                    <el-table-column prop="telephone" label="手机号码" width="180">
                    </el-table-column>
                    <el-table-column prop="tempAddress" label="暂住地">
                    </el-table-column>
                </el-table>
            </div>

            <div class="flex-1 flex f-d-c tab-content-box" ref="TabContentBox" v-if="chooseTab == 3">
                <div v-show="examineListShow" class="flex-1 flex f-d-c examine-list">
                    <div class="search-box">
                        <div>
                            检查时间
                            <el-date-picker v-model="searchDate" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </div>
                        <el-button type="primary" icon="el-icon-search" @click="dateSearch">搜索</el-button>
                    </div>

                    <el-table :data="tableData" style="width: 100%" @row-click="clickExamine($event)"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="principal" :show-overflow-tooltip="true" label="场所负责人"></el-table-column>
                        <el-table-column prop="createTime" :show-overflow-tooltip="true" label="检查时间"></el-table-column>
                        <el-table-column prop="remark" :show-overflow-tooltip="true" label="备注"></el-table-column>
                    </el-table>

                    <div class="pages all-pagination-sty" ref="tablePagination" style="padding-top:-15px">
                        <el-pagination background layout="prev, pager, next" :page-size="pages.size" :total="pages.total"
                            :pager-count="4" :current-page="pages.current"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>

                <div v-show="!examineListShow" class="flex-1 flex f-d-c examine-details">
                    <div class="back-btn" @click="examineListShow = true">返回</div>

                    <div class="title">
                        <div class="icon">{{ refreshNum }}</div>
                        基础信息
                    </div>
                    <div class="basic-info">
                        <div class="info-item">
                            <div class="info-name">场所名称</div>
                            <div class="info-value">{{ examineDetails.placeName }}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-name">检查时间</div>
                            <div class="info-value">{{ examineDetails.createTime }}</div>
                        </div>
                    </div>
                    <div class="title">
                        <div class="icon"></div>
                        检查记录
                    </div>

                    <div class="question-list" v-for="(tItem, tIndex) in examineDetails.patrolGroupDTOList" :key='tIndex'>
                        <div class="question-type" @click="flodQL(tIndex)">
                            <div class="type-name">
                                {{ CNNum[tIndex] }}、{{ tItem.name }}
                            </div>
                            <div class="icon-box"><i class="el-icon-arrow-down" v-show="tItem.isShowQList"></i><i
                                    class="el-icon-arrow-up" v-show="!tItem.isShowQList"></i></div>
                        </div>

                        <div v-show="'patrolRecordVOList' in tItem && tItem.isShowQList" class="question-item"
                            v-for="(item, index) in tItem.patrolRecordVOList" :key='index'>
                            <div class="question-name">
                                <div class="key">{{ index + 1 }}、{{ item.itemsName }}</div>
                                <div class="value">
                                    <el-radio v-model="item.state" :label="0" disabled>存在</el-radio>
                                    <el-radio v-model="item.state" :label="1" disabled>不存在</el-radio>
                                </div>
                            </div>
                            <div class="yh-remark">
                                <div class="yh-remark-name">
                                    隐患描述
                                </div>
                                <div class="yh-remark-value">
                                    {{ item.remark }}
                                </div>
                            </div>
                            <div class="yh-remark">
                                <div class="yh-remark-name">
                                    整改后描述
                                </div>
                                <div class="yh-remark-value">
                                    {{ item.rectificationRemark }}
                                </div>
                            </div>
                        </div>

                        <div v-show="!('patrolRecordVOList' in tItem)">{{ tItem.remark }}</div>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import {
    getPlaceCheckPage,
    getPlaceCheckInfo,
    getPlacePractitionerPage
} from "@/api/site/index.js"

export default {
    name: 'SiteDialogPopup',

    data () {
        return {
            searchDate: '',

            popupShow: false,

            businessId: '',
            chooseTab: 1,

            tableData: [],
            personTableData: [],

            loading: false,
            businessDetailData: {},

            pages: {
                current: 1,
                size: 22,
                total: 0,
                count: 0,
            },

            examineListShow: true,
            examineDetails: {},
            refreshNum: 1,

            CNNum: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'],
        }
    },

    methods: {
        // 点击展开收缩
        flodQL (index) {
            this.examineDetails.patrolGroupDTOList[index].isShowQList = !this.examineDetails.patrolGroupDTOList[index].isShowQList
            this.refreshNum += 1
        },

        // 打开弹窗初始化数据
        initOpen (row) {
            this.searchDate = ''
            this.examineListShow = true
            this.businessDetailData = row
            this.chooseTab = 1
            this.popupShow = true

            this.pages.current = 1
            this.getPlaceCheckPage()
            this.getPlacePractitionerPage()
        },

        // 分页处理
        handleCurrentChange (current) {
            this.pages.current = current
            this.getPlaceCheckPage()
        },

        // 获取检查列表数据
        getPlaceCheckPage (params = {}) {
            this.loading = true
            this.checkFlag = false

            getPlaceCheckPage({
                houseCode: this.businessDetailData.houseCode,
                current: this.pages.current,
                size: this.pages.size,
                ...params
            }).then(res => {
                const data = res.data.data
                this.tableData = data.records
                this.pages.total = data.total
                this.checkFlag = true

                setTimeout(() => {
                    if (this.checkFlag && this.flag) this.loading = false
                }, 500)
            })
        },

        getPlacePractitionerPage () {
            this.flag = false

            getPlacePractitionerPage({
                placeId: this.businessDetailData.id,
                current: 1,
                size: 9999,
            }).then(res => {
                const data = res.data.data
                this.personTableData = data.records
                this.flag = true

                setTimeout(() => {
                    if (this.checkFlag && this.flag) this.loading = false
                }, 500)
            })
        },

        clickExamine (row) {
            getPlaceCheckInfo({ id: row.id }).then(res => {
                if (res.data.data == null) {
                    this.$message({ message: '暂无数据', type: 'warning', duration: 2000 })

                    return
                }

                this.examineDetails = res.data.data

                this.examineDetails.patrolGroupDTOList.push({
                    name: '其他隐患问题',
                    remark: this.examineDetails.remark
                })

                this.examineDetails.patrolGroupDTOList = res.data.data.patrolGroupDTOList.map(item => {
                    return {
                        ...item,
                        isShowQList: true
                    }
                })

                this.examineListShow = false
            })
        },

        // 关闭弹窗按钮
        popupClose () {
            this.popupShow = false
        },

        // tab切换
        tabClick (type) {
            this.chooseTab = type

            if (type == 3) {
                this.examineListShow = true
            }
        },

        dateSearch () {
            this.pages.current = 1

            this.getPlaceCheckPage({
                startTime: this.searchDate,
                endTime: this.searchDate
            })
        }
    },
}
</script>

<style lang="scss" scoped>
:deep(.el-image__error) {
    height: 120px;
}

.flex {
    display: flex;
}

.f-d-c {
    flex-direction: column;
}

.flex-1 {
    height: 0;
    flex: 1;
}
</style>

 src/router/page/index.js

@@ -10,6 +10,7 @@
Vue.use(VueRouter);

const layout = () => import("../../views/layout/index.vue");
const site = () => import("../../views/site/index.vue");
const home = () => import("../../views/home/index.vue");
const house = () => import("../../views/house/index.vue");
const police = () => import("../../views/police/index.vue");
@@ -47,6 +48,13 @@
    component: layout,
    children: [
      {
        path: "site",
        meta: {
          title: "九小场所",
        },
        component: site,
      },
      {
        path: "home",
        meta: {
          title: "首页",

 src/styles/media/index.scss

@@ -870,8 +870,6 @@
                                        .el-table__empty-text {
                                            font-size: countSizeVh(16);
                                        }


                                    }

                                    &>.come-out-content-long,
@@ -3247,4 +3245,289 @@
            }
        }
    }

    .site-page-home {
        .container-content {
            display: flex;
            flex-direction: column;
            height: 100%;

            .police-info {
                height: 0;
                flex: 1;
                display: flex;
                flex-direction: column;

                .el-table {
                    height: 0;
                    flex: 1;
                }
            }
        }
    }

    .site-dialog-popup {
        .el-dialog {
            width: countSizeVw(860, 1920);
            height: countSizeVh(500);

            .type-tab-box {
                height: countSizeVh(28);
                line-height: countSizeVh(28);
                display: flex;

                .tab-item {
                    padding: 0 10px;
                    cursor: pointer;
                }

                .tab-choose-item {
                    background-color: #3d5ad5;
                }
            }

            .tab-content-box {
                .info-list {
                    display: flex;
                    flex-wrap: wrap;
                    margin: countSizeVh(20) countSizeVw(20, 1920) 0;

                    .info-item {
                        display: flex;
                        margin-bottom: countSizeVh(20);
                        width: 50%;

                        .name {
                            min-width: countSizeVw(130, 1920);
                        }
                    }

                    .photo-list {
                        width: 100%;
                        height: countSizeVh(140);

                        .value {
                            display: flex;

                            div {
                                width: countSizeVw(130, 1920);
                                margin-right: countSizeVw(10, 1920);
                            }
                        }
                    }
                }
            }
        }

        .el-table {
            height: 0;
            flex: 1;

            .cell {
                height: countSizeVh(30);
                line-height: countSizeVh(30);
            }
        }

        .pages {
            margin-top: countSizeVh(14);
        }

        .search-box {
            margin: countSizeVh(10) 0;
            display: flex;
            padding-left: countSizeVh(10);
            height: countSizeVh(36);
            line-height: countSizeVh(36);

            &>div {
                height: countSizeVh(32);
                line-height: countSizeVh(32);
                margin-right: countSizeVw(10, 1920);

                input {
                    padding-right: 0;
                    min-width: countSizeVw(150, 1920);
                    height: countSizeVh(32);
                    font-size: countSizeVh(12);
                    text-indent: 1em;
                    color: #ffffff;
                    background-color: rgba(24, 79, 202, 0.6);
                    border: 1px solid rgb(0, 92, 169);
                    border-radius: countSizeVh(5);
                }

                input:focus {
                    outline: none;
                }

                input::-webkit-input-placeholder {
                    color: rgba(238, 238, 238, 0.7);
                }

                .el-input__icon {
                    height: countSizeVh(32);
                    line-height: countSizeVh(32);
                }
            }

            .el-button--primary {
                background-color: rgba(29, 92, 228, 0.6);
                border: countSizeVh(1) solid rgba(29, 92, 228, 0.6);
            }

            .el-button {
                padding: 0 countSizeVw(12, 1920);
                height: countSizeVh(32);
                line-height: countSizeVh(32);
                font-size: countSizeVh(16);
            }
        }

        .examine-details {
            overflow-y: auto;

            .back-btn {
                padding-left: countSizeVw(28, 1920);
                position: relative;
                height: countSizeVh(48);
                line-height: countSizeVh(48);
                text-align: left;
                color: #fff;
                cursor: pointer;
            }

            .back-btn::before {
                content: '\e6ea';
                font-family: element-icons;
                height: countSizeVh(48);
                line-height: countSizeVh(48);
                color: #fff;
                position: absolute;
                left: countSizeVw(8, 1920);
            }

            .back-btn:hover::before {
                color: #fff;
            }

            .title {
                margin: countSizeVw(10, 1920);
                height: countSizeVh(40);
                display: flex;
                align-items: center;

                .icon {
                    margin: 0 countSizeVw(10, 1920);
                    width: countSizeVw(4, 1920);
                    height: countSizeVh(18);
                    color: transparent;
                    background-color: #409dfe;
                }
            }

            .basic-info {
                padding: 0 countSizeVw(20, 1920);

                .info-item {
                    display: flex;
                    padding: countSizeVw(10, 1920);

                    .info-name {
                        width: countSizeVw(100, 1920);
                        display: flex;
                        align-items: center;
                    }

                    .info-value {
                        display: flex;
                        align-items: center;
                    }
                }
            }

            .question-list {
                padding: 0 countSizeVw(20, 1920);

                .question-type {
                    padding-right: countSizeVw(20, 1920);
                    height: countSizeVh(40);
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    justify-content: space-between;
                }

                .question-item {
                    margin-bottom: countSizeVh(20);
                    padding: 0 countSizeVw(10, 1920);

                    &>div {
                        margin-top: countSizeVh(10);
                    }

                    .question-name {
                        display: flex;

                        .key {
                            width: 80%;
                            word-break: break-all;
                        }

                        .value {
                            width: 20%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }

                    .yh-pic-box {
                        display: flex;
                        height: countSizeVh(100);

                        .yh-pic-name {
                            width: countSizeVw(100, 1920);
                            display: flex;
                            align-items: center;
                            justify-content: left;
                        }

                        .yh-pic-list {
                            width: 0;
                            flex: 1;
                            display: flex;
                        }
                    }

                    .yh-remark {
                        display: flex;

                        .yh-remark-name {
                            width: countSizeVw(100, 1920);
                            display: flex;
                            align-items: center;
                            justify-content: left;
                        }

                        .yh-remark-value {
                            word-break: break-all;
                        }
                    }
                }
            }
        }
    }

    .scan-or-code-page,
    .site-page-home {
        .time-select {
            .search-item-box {
                &>span {
                    width: countSizeVw(76, 1920);
                    text-align: left;
                }
            }
        }
    }
}

 src/views/layout/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-01-16 14:23:32
 * @LastEditTime: 2024-02-05 10:15:38
 * @FilePath: \srs-police-affairs\src\views\layout\index.vue
 * @Description: 
 * 
@@ -51,12 +51,16 @@
            <!-- 用户登录展示的 -->
            <div class="user-infor" @click="openUser">
                <div class="userIcon" :class="{ on: userOn == true }">
                    <i class="el-icon-user-solid"></i>
                    <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="goToPath(siteParams)">
                            <i class="el-icon-office-building"></i>
                            九小场所
                        </div>
                        <div class="back-system" v-if="permission.operation_manager" @click="goToBack">
                            <i class="el-icon-user-back"></i>
                            运维管理
@@ -175,6 +179,10 @@
                newPassword1: [{ required: true, message: "必填" }]
            },
            resetPsdPopupShow: false,
            siteParams: {
                menuName: '九小场所',
                path: '/layout/site'
            },
            menuLeftList: [
                {
                    menuName: '首页',
@@ -274,8 +282,10 @@

                if (this.currentUrl == '/layout/home') {
                    this.leftShow = false
                    this.isShouYe = true
                } else {
                    this.leftShow = true
                    this.isShouYe = false
                }
            },
            immediate: true
@@ -353,13 +363,6 @@
         * @return {*} 没有返回值
         */
        goToPath (params) {
            console.log(params, 215555)
            if (params.menuName == '首页') {
                this.isShouYe = true
            } else {
                this.isShouYe = false
            }

            if (params.path) {
                if (this.$route.path == params.path) return
                this.$router.push(params.path)

 src/views/scanOrCode/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-01-17 09:48:57
 * @LastEditTime: 2024-02-06 11:41:44
 * @FilePath: \srs-police-affairs\src\views\scanOrCode\index.vue
 * @Description: 辖区管理
 * 
@@ -10,7 +10,7 @@
-->

<template>
    <div class="police-page container">
    <div class="police-page container scan-or-code-page">
        <div v-show="boxShow" class="container-content" ref="containerContent">
            <div class="time-select" ref="timeSelect">

@@ -24,7 +24,13 @@
                </div>

                <div class="search-item-box">
                    <el-input size="small" :placeholder="placeholder" v-model="searchKey" clearable></el-input>
                    <span>关键字：</span>

                    <el-input style="flex: 1;" size="small" :placeholder="placeholder" v-model="searchKey"
                        clearable></el-input>
                </div>

                <div class="search-item-box" style="justify-content: center;">
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>

 src/views/site/index.vue

New file
@@ -0,0 +1,283 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-02-06 11:34:09
 * @FilePath: \srs-police-affairs\src\views\site\index.vue
 * @Description: 辖区管理
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->

<template>
    <div class="site-page-home police-page container">
        <div v-show="boxShow" class="container-content" ref="containerContent">

            <div class="time-select" ref="timeSelect">
                <div class="search-item-box">
                    <span>场所类型：</span>

                    <el-select clearable style="flex: 1;" size="small" v-model="typeValue" @change="typeChange"
                        placeholder="请选择场所类型">
                        <el-option v-for="item in typeOptions" :key="item.dictKey" :label="item.dictValue"
                            :value="item.dictKey"></el-option>
                    </el-select>
                </div>

                <div class="search-item-box">
                    <span>场所名称：</span>

                    <el-input style="flex: 1;" size="small" placeholder="请输入场所名称" v-model="placeName" @change="searchChange"
                        clearable></el-input>
                </div>

                <div class="search-item-box" style="justify-content: center;">
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
            </div>

            <div class="list police-info" ref="tableBox">
                <el-table :data="tableData" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <el-table-column prop="placeName" :show-overflow-tooltip="true" label="场所名称"></el-table-column>
                    <el-table-column prop="location" :show-overflow-tooltip="true" label="场所地址"></el-table-column>
                    <el-table-column prop="nineName" :show-overflow-tooltip="true" label="场所类型"></el-table-column>
                    <el-table-column width="80" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" title="定位" :disabled="positionDisabled(scope.row)"
                                @click="rowClick(scope.row)">
                                <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pages all-pagination-sty" ref="tablePagination">
                    <el-pagination background layout="prev, pager, next" :page-size="pages.size" :total="pages.total"
                        :pager-count="4" :current-page="pages.current"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>

        </div>

        <SiteDialogPopup ref="SiteDialogPopup"></SiteDialogPopup>
    </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import { getNineTypeTree, getNinePage } from "@/api/site/index.js"

let loading = null

export default {
    inject: ['userInfo'],

    data () {
        return {
            boxShow: false,

            placeName: '',
            typeValue: '',
            typeOptions: [],

            tableData: [],

            pages: {
                current: 1,
                size: 22,
                total: 0,
                count: 0,
            },
        }
    },

    created () {
        this.getNineTypeTree()
        this.getNinePage()
        const that = this

        that.$nextTick(() => {
            initMapPosition()
        })
    },

    mounted () {
        this.$parent.$parent.resize('400px', true)

        this.$nextTick(() => {
            this.$EventBus.$emit('closeMxTileset')
        })
    },

    computed: {
        positionColor () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return "#1AFA29"
                } else {
                    return "#ccc"
                }
            }
        },

        positionDisabled () {
            return (row) => {
                if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
                    return false
                } else {
                    return true
                }
            }
        },
    },

    methods: {
        getNineTypeTree () {
            getNineTypeTree().then(res => {
                this.typeOptions = res.data.data
            })
        },

        // 切换登记类型
        typeChange () {
            this.pages.current = 1
            this.getNinePage()
        },

        searchChange () {
            if (this.placeName.trim() == '') {
                this.pages.current = 1
                this.getNinePage()
            }
        },

        searchBtn () {
            this.pages.current = 1
            this.getNinePage()
        },

        // 分页处理
        handleCurrentChange (current) {
            this.pages.current = current
            this.getNinePage()
        },

        // 加载动画
        loading () {
            loading = this.$loading({
                lock: true,
                text: '拼命加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)'
            })
        },

        getNinePage () {
            this.loading()

            getNinePage({
                current: this.pages.current,
                size: this.pages.size,
                nineType: this.typeValue,
                placeName: this.placeName
            }).then(res => {
                const data = res.data.data

                this.tableData = data.records
                this.pages.total = data.total

                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        // 点击定位
        rowClick (row) {
            this.$EventBus.$emit('toPosition', {
                siteJd: row.lng,
                siteWd: row.lat,
                siteGd: 2000
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'scanLayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: row.lng,
                    lat: row.lat,
                    alt: 1,
                    size: [25.8, 32.4],
                    url: `/img/icon/site.png`
                },
            })

            this.$refs.SiteDialogPopup.initOpen(row)
        },

        // 清空按钮-清除图标图层
        clearRow () {
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'scanLayer',
                type: 'VectorLayer'
            })
            this.$store.commit('SET_DIALOGDETAILPOPUP', false)
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },
    },

    destroyed () {
        loading && loading.close()

        this.$parent.$parent.resize('0px')

        this.clearRow()
    }
}
</script>

<style scoped lang="scss">
.container {
    position: relative;
    width: 100%;
    height: 100%;

    &-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        color: #fff;
        background: $bg-color;
    }
}

.list {
    display: flex;
    flex-direction: column;

    .pages {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>