增加阵地管理页面

guanqb

2024-03-13 c323b0a7e46bcda255ec650d0e6f6a1a054291f9

增加阵地管理页面

 src/api/site/index.js

@@ -8,7 +8,7 @@
 *
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
 */
import request from "@/router/axios.js";
import request from "@/router/axios.js"

/**
 * 获取九小场所字典表
@@ -17,11 +17,24 @@
 * @returns
 */
export const getNineTypeTree = () => {
  return request({
    url: "/api/blade-system/dict-biz/tree?code=nineType",
    method: "get",
  });
};
    return request({
        url: "/api/blade-system/dict-biz/tree?code=nineType",
        method: "get",
    })
}

/**
 * 获取阵地字典表
 * @param {*} page 页数
 * @param {*} count 每页数量
 * @returns
 */
export const getFrontTypeTree = () => {
    return request({
        url: "/api/blade-system/dict-biz/tree?code=frontType",
        method: "get",
    })
}

/**
 * 获取九小场所列表
@@ -30,15 +43,32 @@
 * @returns
 */
export const getNinePage = (params) => {
  return request({
    url: "/api/blade-place/place/ninePage",
    method: "get",
    params: {
      ...params,
      isNine: 1,
    },
  });
};
    return request({
        url: "/api/blade-place/place/ninePage",
        method: "get",
        params: {
            ...params,
            isNine: 1,
        },
    })
}

/**
 * 获取阵地列表
 * @param {*} page 页数
 * @param {*} count 每页数量
 * @returns
 */
export const getFrontPage = (params) => {
    return request({
        url: "/api/blade-place/place/ninePage",
        method: "get",
        params: {
            ...params,
            isFront: 1,
        },
    })
}

/**
 * 获取九小场所检查列表
@@ -47,33 +77,46 @@
 * @returns
 */
export const getPlaceCheckPage = (params) => {
  return request({
    url: "/api/blade-placeCheck/placeCheck/page",
    method: "get",
    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,
  });
};
    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,
  });
};
    return request({
        url: "/api/blade-placePractitioner/placePractitioner/page",
        method: "get",
        params,
    })
}

/**
 * 获取交易登记列表
 * @returns
 */
export const getTaskLabelReportingEventPage = (params) => {
    return request({
        url: "/api/blade-taskLabelReportingEvent/taskLabelReportingEvent/page",
        method: "get",
        params,
    })
}


 src/components/pomDialog/components/detail.vue

New file
@@ -0,0 +1,149 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-01-17 16:04:08
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-02-19 16:34:09
 * @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="all-box">
            <div class="item-box">
                <div class="label">场所名称：</div>
                <div class="value">{{ rowDetail.placeName }}</div>
            </div>
            <div class="item-box">
                <div class="label">场所地址：</div>
                <div class="value">{{ rowDetail.location }}</div>
            </div>
            <div class="item-box">
                <div class="label">阵地类型：</div>
                <div class="value">{{ rowDetail.frontName }}</div>
            </div>
            <div class="item-box">
                <div class="label">场所负责人：</div>
                <div class="value">{{ rowDetail.principal }}</div>
            </div>
            <div class="item-box">
                <div class="label">联系方式：</div>
                <div class="value">{{ rowDetail.principalPhone }}</div>
            </div>
            <div class="item-box">
                <div class="label">交易对象：</div>
                <div class="value">{{ rowDetail.transactionObject }}</div>
            </div>
            <div class="item-box">
                <div class="label">交易对象电话：</div>
                <div class="value">{{ rowDetail.transactionObjectTel }}</div>
            </div>
            <div class="item-box">
                <div class="label">身份证号：</div>
                <div class="value">{{ rowDetail.idCard }}</div>
            </div>
            <div class="item-box">
                <div class="label">交易数量：</div>
                <div class="value">{{ rowDetail.goodsNums }}</div>
            </div>
            <div class="item-box">
                <div class="label">交易金额：</div>
                <div class="value">{{ rowDetail.transactionMoney }}</div>
            </div>
            <div class="item-box">
                <div class="label">交易过程：</div>
                <div class="value">{{ rowDetail.transactionProcess }}</div>
            </div>
            <div class="item-box">
                <div class="label">发生时间：</div>
                <div class="value">{{ rowDetail.createTime }}</div>
            </div>
            <div class="item-box">
                <div class="label">物品图片：</div>
                <div class="value">
                    <el-image style="width: 100px; height: 100px" :src="rowDetail.goodsImageUrls"
                        :preview-src-list="rowDetail.goodsImageUrls">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i> 暂无图片
                        </div>
                    </el-image>
                </div>
            </div>
            <div class="item-box">
                <div class="label">身份证照片：</div>
                <div class="value"> <el-image style="width: 100px; height: 100px" :src="rowDetail.goodsImageUrls"
                        :preview-src-list="rowDetail.goodsImageUrls">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i> 暂无图片
                        </div>
                    </el-image></div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    data () {
        return {
            popupShow: false,
            rowDetail: {}
        }
    },

    methods: {
        // 打开弹窗初始化数据
        initOpen (row) {
            this.popupShow = true
            this.rowDetail = row
        },

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


    },
}
</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;
}

.all-box {
    display: flex;
    flex-wrap: wrap;

    .item-box {
        width: 50%;
        display: flex;
        // height: 40px;
        margin-bottom: 20px;


        .label {
            min-width: 120px;
            text-align: right;
            padding-right: 10px;
        }
    }
}
</style>

 src/components/pomDialog/index.vue

New file
@@ -0,0 +1,216 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-01-17 16:04:08
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-02-19 16:34:09
 * @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>

            <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>
            </div>

            <div class="flex-1  flex f-d-c tab-content-box" v-if="chooseTab == 2">
                <el-table :data="tradeTableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center' }">
                    <el-table-column prop="transactionObject" :show-overflow-tooltip="true"
                        label="交易对象"></el-table-column>
                    <el-table-column prop="transactionObjectTel" :show-overflow-tooltip="true"
                        label="交易对象电话"></el-table-column>
                    <el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号"></el-table-column>
                    <el-table-column prop="goodsNums" :show-overflow-tooltip="true" label="交易数量"></el-table-column>
                    <el-table-column prop="transactionMoney" :show-overflow-tooltip="true"
                        label="交易金额"></el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="viewRow(scope.row)" type="text" size="small">
                                <span style="color: #409eff !important;">查看详情</span>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <Detail ref="Detail" />
    </el-dialog>
</template>

<script>
import {
    getFrontTypeTree,
    getTaskLabelReportingEventPage
} from "@/api/site/index.js"
import Detail from './components/detail.vue'

export default {
    name: 'PomDialogPopup',

    components: { Detail },
    data () {
        return {
            searchDate: '',
            popupShow: false,
            businessId: '',
            chooseTab: 1,
            tradeTableData: [],
            loading: false,
            businessDetailData: {},
            pages: {
                current: 1,
                size: 22,
                total: 0,
                count: 0,
            },
            refreshNum: 1,
            typeOptions: []
        }
    },

    created () {
        this.getFrontTypeTree()
    },

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

            this.pages.current = 1
            this.getTaskLabelReportingEventPage()
        },

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

        getTaskLabelReportingEventPage () {
            this.flag = false

            getTaskLabelReportingEventPage({
                placeId: this.businessDetailData.id,
                current: 1,
                size: 9999,
            }).then(res => {
                const data = res.data.data
                data.records.forEach(element => {
                    element.goodsImageUrls = this.getImgUrls(element.goodsImageUrls)
                    element.imageUrls = this.getImgUrls(element.imageUrls)
                    this.typeOptions.forEach(item => {
                        if (item.key == element.frontType) {
                            element.frontName = item.title
                        }
                    })
                })
                this.tradeTableData = data.records
                this.flag = true

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

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

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

        // 查看详情
        viewRow (row) {
            this.$refs.Detail.initOpen(row)
        },

        // 获取阵地字典
        getFrontTypeTree () {
            getFrontTypeTree().then(res => {
                this.typeOptions = res.data.data
            })
        },

        // 图片转换
        getImgUrls (imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },
    },
}
</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

@@ -5,140 +5,148 @@
 * @Last Modified time: 2022-07-29 09:15:23
 */

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
import Vue from "vue"
import VueRouter from "vue-router"
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");
const video = () => import("../../views/video/index.vue");
const videoList = () => import("../../views/video/list.vue");
const videoRegion = () => import("../../views/video/region.vue");
const activity = () => import("../../views/activity/index.vue");
const policeInfor = () => import("../../views/policeInfor/index.vue");
const scanOrCode = () => import("../../views/scanOrCode/index.vue");
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")
const video = () => import("../../views/video/index.vue")
const videoList = () => import("../../views/video/list.vue")
const videoRegion = () => import("../../views/video/region.vue")
const activity = () => import("../../views/activity/index.vue")
const policeInfor = () => import("../../views/policeInfor/index.vue")
const scanOrCode = () => import("../../views/scanOrCode/index.vue")
const positionManage = () => import("../../views/positionManage/index.vue")
const intelligentSearch = () =>
  import("../../views/intelligentSearch/index.vue");
    import("../../views/intelligentSearch/index.vue")

const login = () => import("../../views/login/index.vue");
const login = () => import("../../views/login/index.vue")

const routes = [
  {
    path: "/login",
    name: "login",
    component: (resolve) => require(["../../views/login/index.vue"], resolve),
    meta: {
      title: "登录页",
      isAuth: false,
    {
        path: "/login",
        name: "login",
        component: (resolve) => require(["../../views/login/index.vue"], resolve),
        meta: {
            title: "登录页",
            isAuth: false,
        },
    },
  },
  {
    path: "/",
    redirect: "/layout",
  },
  {
    path: "/layout",
    redirect: "/layout/home",
    meta: {
      title: "导航菜单",
    {
        path: "/",
        redirect: "/layout",
    },
    component: layout,
    children: [
      {
        path: "site",
    {
        path: "/layout",
        redirect: "/layout/home",
        meta: {
          title: "九小场所",
            title: "导航菜单",
        },
        component: site,
      },
      {
        path: "home",
        meta: {
          title: "首页",
        },
        component: home,
      },
      {
        path: "house",
        meta: {
          title: "社区感知",
        },
        component: house,
      },
      {
        path: "policeresouce",
        meta: {
          title: "警力资源",
        },
        component: police,
      },

      {
        path: "video",
        meta: {
          title: "视频监控",
        },
        component: video,
        component: layout,
        children: [
          {
            path: "list",
            meta: {
              title: "列表查询",
            {
                path: "site",
                meta: {
                    title: "九小场所",
                },
                component: site,
            },
            component: videoList,
          },
          {
            path: "region",
            meta: {
              title: "空间查询",
            {
                path: "home",
                meta: {
                    title: "首页",
                },
                component: home,
            },
            component: videoRegion,
          },
            {
                path: "house",
                meta: {
                    title: "社区感知",
                },
                component: house,
            },
            {
                path: "policeresouce",
                meta: {
                    title: "警力资源",
                },
                component: police,
            },

            {
                path: "video",
                meta: {
                    title: "视频监控",
                },
                component: video,
                children: [
                    {
                        path: "list",
                        meta: {
                            title: "列表查询",
                        },
                        component: videoList,
                    },
                    {
                        path: "region",
                        meta: {
                            title: "空间查询",
                        },
                        component: videoRegion,
                    },
                ],
            },
            {
                path: "activity",
                meta: {
                    title: "电子沙盘",
                },
                component: activity,
            },
            {
                path: "policeinfor",
                meta: {
                    title: "警情信息",
                },
                component: policeInfor,
            },
            {
                path: "scanOrCode",
                meta: {
                    title: "扫码应用",
                },
                component: scanOrCode,
            },
            {
                path: "intelligentSearch",
                meta: {
                    title: "智能搜索",
                },
                component: intelligentSearch,
            },
            {
                path: "positionManage",
                meta: {
                    title: "阵地管理",
                },
                component: positionManage,
            },
        ],
      },
      {
        path: "activity",
        meta: {
          title: "电子沙盘",
        },
        component: activity,
      },
      {
        path: "policeinfor",
        meta: {
          title: "警情信息",
        },
        component: policeInfor,
      },
      {
        path: "scanOrCode",
        meta: {
          title: "扫码应用",
        },
        component: scanOrCode,
      },
      {
        path: "intelligentSearch",
        meta: {
          title: "智能搜索",
        },
        component: intelligentSearch,
      },
    ],
  },
  // {
  //     path: '*',
  //     redirect: '/404',
  //     isAuth: false
  // }
];
    },
    // {
    //     path: '*',
    //     redirect: '/404',
    //     isAuth: false
    // }
]

const router = new VueRouter({
  base: process.env.BASE_URL,
  routes,
});
    base: process.env.BASE_URL,
    routes,
})

export default router;
export default router

 src/views/layout/index.vue

@@ -18,8 +18,8 @@
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
                                subItem.menuName
                            }}
                        subItem.menuName
                    }}
                        </div>
                    </div>
                </div>
@@ -35,14 +35,15 @@
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 || currentUrl.indexOf(item.pathT) != -1 }">
                        {{
                            item.menuName }}
                        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)">
                            v-for="(subItem, subIndex) in item.children" :key="subIndex"
                            @click.stop="goToPath(subItem)">
                            {{
                                subItem.menuName
                            }}
                        subItem.menuName
                    }}
                        </div>
                    </div>
                </div>
@@ -57,6 +58,10 @@
                    <div class="triangle"></div>
                    <div class="userName">用户名：{{ currentUserInfo.user_name }}</div>
                    <div class="userBtn">
                        <div class="back-system" @click="goToZD">
                            <i class="el-icon-s-grid"></i>
                            阵地管理
                        </div>
                        <div class="back-system" v-if="permission.operation_manager" @click="goToBack">
                            <i class="el-icon-user-back"></i>
                            运维管理
@@ -112,8 +117,9 @@
                    :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">
                    <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">
@@ -352,6 +358,11 @@
            })
        },

        // 跳转阵地
        goToZD () {
            this.$router.push('/layout/positionManage')
        },

        /**
         * @description: 跳转运维管理平台
         * @return {*}

 src/views/positionManage/index.vue

New file
@@ -0,0 +1,306 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-02-08 17:51:12
 * @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.key" :label="item.title"
                            :value="item.key"></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="frontName" :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>

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

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import { getFrontTypeTree, getFrontPage } 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.getFrontTypeTree()
        this.getFrontPage()
        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: {
        getFrontTypeTree () {
            getFrontTypeTree().then(res => {
                this.typeOptions = res.data.data
            })
        },

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

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

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

        resetSearch () {
            this.pages.current = 1
            this.typeValue = ''
            this.placeName = ''
            this.getFrontPage()
        },

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

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

        getFrontPage () {
            this.loading()

            getFrontPage({
                current: this.pages.current,
                size: this.pages.size,
                frontType: this.typeValue,
                isFront: 1,
                placeName: this.placeName
            }).then(res => {
                const data = res.data.data
                data.records.forEach(element => {
                    this.typeOptions.forEach(item => {
                        if (item.key == element.frontType) {
                            element.frontName = item.title
                        }
                    })
                })
                this.tableData = data.records
                this.pages.total = data.total

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

        // 点击定位
        rowClick (row) {
            let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[0]
            let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.lng, row.lat)[1]

            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 2000
            })

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

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

        siteClick (e) {
            this.$refs.PomDialogPopup.initOpen(e.overlay.attrParams)
        },

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

        // 大小重置
        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>