首页调整及layout调整

shuishen

2023-02-22 c3995f61902204c60cd02cf48aed6a1ff64699d2

首页调整及layout调整

 public/img/icon/user-back.png

 public/img/icon/user-quit.png

 public/static/config.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-02-21 14:16:56
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-21 16:27:46
 * @LastEditTime: 2023-02-22 11:23:04
 * @FilePath: \srs-police-affairs\public\static\config.js
 * @Description: 
 * 
@@ -37,8 +37,8 @@
    VUE_APP_INTRANET_TILEURL: 'http://10.141.11.11:80/mxapi',

    // 后台管理跳转地址
    VUE_APP_OUTER_NET_HTURL: 'http://192.168.0.109:1888',
    VUE_APP_INTRANET_HTURL: 'http://10.141.11.11:8081',
    VUE_APP_OUTER_NET_HTURL: 'http://192.168.0.199:1888/',
    VUE_APP_INTRANET_HTURL: 'http://10.141.11.11:8081/',

    // 栅格地图的
    VUE_APP_MAP_YX: 'http://10.141.11.11:80/ysapi',

 src/components/map/components/map.vue

New file
@@ -0,0 +1,52 @@
<template>
    <div></div>
</template>

<script>
let viewer = undefined

function generatePosition (num) {
    var list = []
    for (var i = 0; i < num; i++) {
        var lng = 120.38105869 + Math.random() * 0.5
        var lat = 31.10115627 + Math.random() * 0.5
        list.push(new global.DC.Position(lng, lat))
    }
    return list
}

function initViewer () {
    viewer = new global.DC.Viewer('viewer-container')
    let baselayer = global.DC.ImageryLayerFactory.createAmapImageryLayer()
    viewer.addBaseLayer(baselayer)
    let layer = new global.DC.ClusterLayer('layer')

    viewer.addLayer(layer)
    let positions = generatePosition(10000)
    positions.forEach(item => {
        let billboard = new global.DC.Billboard(item, 'examples/images/icon/camera.png')
        billboard.attrParams = {
            name: '中国' + Math.random(),
            alt: 2000
        }
        layer.addOverlay(billboard)
    })

    viewer.on(global.DC.MouseEventType.CLICK, (e) => {
        console.log(e)

        e.target.id.length > 0 && e.target.id.forEach(item => {
            console.log(layer.getOverlay(item.overlayId), 'id99999999999')
        })
    })
    viewer.flyTo(layer)
}
global.DC.ready(initViewer)

export default {

}
</script>

<style>
</style>

 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: 2023-02-21 16:27:22
 * @LastEditTime: 2023-02-22 09:53:06
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -226,12 +226,6 @@
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )

            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: '/sryx/{z}/{x}/{y}.png',
                })
            )


 src/router/page/index.js

@@ -17,6 +17,8 @@
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 login = () => import('../../views/login/index.vue')

const routes = [
@@ -56,7 +58,7 @@
                component: house
            },
            {
                path: 'police',
                path: 'policeresouce',
                meta: {
                    title: '警力资源'
                },
@@ -91,6 +93,13 @@
                    title: '安保活动'
                },
                component: activity
            },
            {
                path: 'policeinfor',
                meta: {
                    title: '警情信息'
                },
                component: policeInfor
            }

        ]

 src/styles/icon/index.scss

@@ -29,4 +29,26 @@
    content: "替";
    font-size: countSizeVh(16);
    visibility: hidden;
}

.el-icon-user-back {
    background: url(/img/icon/user-back.png) center no-repeat;
    background-size: countSizeVh(16) countSizeVh(16);
}

.el-icon-user-back:before {
    content: "替";
    font-size: countSizeVh(16);
    visibility: hidden;
}

.el-icon-user-quit {
    background: url(/img/icon/user-quit.png) center no-repeat;
    background-size: countSizeVh(16) countSizeVh(16);
}

.el-icon-user-quit:before {
    content: "替";
    font-size: countSizeVh(16);
    visibility: hidden;
}

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-21 16:52:21
 * @LastEditTime: 2023-02-22 11:34:22
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -907,7 +907,6 @@
                        })
                    })
                }

            })
        },

@@ -2130,6 +2129,8 @@
    },

    destroyed () {
        this.destroyFlag = false

        this.clearPolygonLayer()

        // cylinderLayer != null && cylinderLayer != undefined && cylinderLayer != '' && cylinderLayer.remove()

 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: 2023-02-20 16:11:36
 * @LastEditTime: 2023-02-22 11:29:39
 * @FilePath: \srs-police-affairs\src\views\layout\index.vue
 * @Description: 
 * 
@@ -73,8 +73,13 @@
                    <div class="triangle"></div>
                    <div class="userName">用户名：{{ currentUserInfo.user_name }}</div>
                    <div class="userBtn">
                        <div class="back-system" v-if="userBackSystem" @click="goToBack">
                            <i class="el-icon-user-back"></i>
                            运维管理
                        </div>
                        <div class="edit" @click="goTOLogout">
                            <img src="../../../public/img/bg/editLogin.webp" alt />
                            <i class="el-icon-user-quit"></i>
                            退出登录
                        </div>
                    </div>
                </div>
@@ -159,7 +164,7 @@
                },
                {
                    menuName: '警力资源',
                    path: '/layout/police'
                    path: '/layout/policeresouce'

                }
            ],
@@ -182,6 +187,10 @@
                {
                    menuName: '安保活动',
                    path: '/layout/activity'
                },
                {
                    menuName: '警情信息',
                    path: '/layout/policeinfor'
                }
            ],

@@ -201,7 +210,9 @@
            //刷新token锁
            refreshLock: false,
            //刷新token的时间
            refreshTime: ""
            refreshTime: "",

            userBackSystem: false,
        }
    },

@@ -210,11 +221,7 @@
        this.init()

        if (JSON.parse(getUserInfo()).dept_id == '1123598813738675201') {
            this.menuRightList.push({
                menuName: '运维管理',
                openExternal: true,
                path: HTUrl
            })
            this.userBackSystem = true
        }

        //实时检测刷新token
@@ -255,6 +262,15 @@
                this.$router.push({ path: "/login" })
            })
        },

        /**
         * @description: 跳转运维管理平台
         * @return {*}
         */
        goToBack () {
            var path = HTUrl + "?token=" + getToken()
            window.open(path)
        },
        /**
         * @description: 路由跳转的事件
         *                  通过给父元素绑定事件-子元素触发，并传入参数
@@ -262,16 +278,6 @@
         * @return {*} 没有返回值
         */
        goToPath (params) {
            if (params.openExternal) {
                // 跳过登录方式
                var path = params.path + "?token=" + getToken()
                //账户名密码模拟登录方式
                // var path = params.path + '?securitySupervisionSystem={"tokenMY":"987654321S","data":{"rese":"admin","sap":"admin","dip":"000000"}}'
                // console.log(path,5555)
                window.open(path)
                return
            }

            if (params.children && params.children.length > 0) return

            if (params.path) {
@@ -535,8 +541,7 @@
            }

            .userDetail {
                width: 180px;
                height: 92px;
                width: 160px;
                position: absolute;
                top: 64px;
                right: 4px;
@@ -558,38 +563,34 @@
                }

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

                .userBtn {
                    margin-bottom: 4px;
                    width: 100%;
                    height: 50px;
                    position: absolute;
                    bottom: 0px;
                    display: flex;
                    justify-content: space-around;
                    padding-top: 4px;
                    flex-direction: column;
                    align-items: center;
                    font-size: 16px;
                    font-weight: normal;

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

                        img {
                            width: 76px;
                            height: 20px;
                        }
                    }
                }
            }

 src/views/policeInfor/index.vue

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

<template>
    <div class="police-page container">
        <div v-show="boxShow" class="container-content">
            <div class="switch-box" v-show="!detailFlag">
                资源类别：
                <el-select
                    v-model="typeValue"
                    @change="navClick"
                    placeholder="请选择"
                    class="type-select-css"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        class="option-css"
                    ></el-option>
                </el-select>
            </div>

            <div class="list-show" v-if="!detailFlag">
                <div class="search-box">
                    资源名称：
                    <input
                        v-model="searchValue"
                        @input="searchChange"
                        type="text"
                        placeholder="请输入…"
                    />
                </div>

                <div class="list" ref="tableBox">
                    <el-table
                        :data="equimentTableData"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', borderColor: '#324e75' }"
                        :cell-style="{ 'text-align': 'center', borderColor: '#324e75', cursor: 'pointer' }"
                        :height="currentTableHeight"
                    >
                        <el-table-column
                            prop="newName"
                            :show-overflow-tooltip="true"
                            label="名称"
                            :min-width="typeValue == 0 ? '56%' : '68%'"
                        ></el-table-column>
                        <el-table-column
                            prop="status"
                            label="状态"
                            :min-width="typeValue == 0 ? '14%' : '14%'"
                        >
                            <template slot-scope="scope">
                                <div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            align="center"
                            :min-width="typeValue == 0 ? '30%' : '18%'"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button
                                    v-show="navType == 0"
                                    @click="equipmentTrack(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                                <el-button
                                    @click="play(scope.row)"
                                    type="text"
                                    size="small"
                                    title="播放视频"
                                >
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

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

            <div class="track-box" v-show="detailFlag">
                <div class="track-box-info">
                    <div class="back-btn" @click="goBack" title="轨迹">详细资料及轨迹查询</div>
                    <ul>
                        <li>
                            <div>通道编号：</div>
                            <div>{{ currentSelectEquipment.channelId ? currentSelectEquipment.channelId : '' }}</div>
                        </li>

                        <li>
                            <div>设备编号：</div>
                            <div>{{ currentSelectEquipment.deviceId ? currentSelectEquipment.deviceId : '' }}</div>
                        </li>

                        <li>
                            <div>通道名称：</div>
                            <div>{{ currentSelectEquipment.name ? currentSelectEquipment.name : '' }}</div>
                        </li>

                        <li>
                            <div>状态：</div>
                            <div>
                                {{
                                currentSelectEquipment.status ? (currentSelectEquipment.status == 0 ? '离线' : '在线') :
                                ''
                                }}
                            </div>
                        </li>

                        <li>
                            <div>选择时间：</div>
                            <div class="datetime">
                                <el-date-picker
                                    v-model="trackTime"
                                    type="daterange"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    size="mini"
                                    :editable="false"
                                    end-placeholder="结束日期"
                                ></el-date-picker>
                            </div>
                        </li>

                        <li>
                            <el-button type="text" @click="lookTrack">查看轨迹</el-button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="search-content">
            <input
                v-model="searchExtensivelyValue"
                @input="searchExtensivelyChange"
                @focus="searchExtensivelyFocus"
                type="text"
                placeholder="请输入搜索条件"
            />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />
            </div>
            <button @click="searchExtensivelyClick" class="el-icon-search"></button>
        </div>

        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div
                    @click="searchExtensivelyVlaClick(item)"
                    v-for="(item, index) in searchExtensivelyArray"
                    :key="index"
                >{{ item.name }}</div>
            </div>
        </div>

        <el-dialog
            :title="dialogTitle"
            :modal="false"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                id="videoElement"
                style="object-fit: fill"
            ></video>
        </el-dialog>
    </div>
</template>

<script>
import { getHistoricalTrack } from '@/api/police/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'
import { getDevices } from '@/api/video/index.js'
import flvjs from 'flv.js'
import { getEquipmentPaging } from '@/api/home/index.js'

let tc = null
let track = null

export default {
    inject: ['userInfo'],

    data () {
        return {
            navType: 0,
            dialogTitle: '',
            dialogVisible: false,
            searchValue: '',
            currentTableHeight: 0,
            detailFlag: false,
            trackTime: [],
            options: [
                {
                    value: '0',
                    label: '警车'
                },
                {
                    value: '1',
                    label: '摄像头'
                }
                // , {
                //     value: '3',
                //     label: '电台'
                // }, {
                //     value: '4',
                //     label: '执法记录仪'
                // }
            ],
            typeValue: '0',
            boxShow: true,
            searchExtensivelyValue: '',
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
            flvPlayer: null,

            equimentTableData: [],
            equimentPage: {
                total: 0,
                pageSize: 25,
                count: 0,
                currentPage: 1
            },

            currentSelectEquipment: {}
        }
    },
    created () {
        window.addEventListener('resize', this.setTableHeight)
    },
    mounted () {
        this.$parent.$parent.resize('400px', true)

        this.navClick()

        tc = new global.DC.TrackController(global.viewer)

        this.$nextTick(() => {
            this.setTableHeight()
        })
    },
    methods: {
        // 搜索框改变事件
        searchChange () {
            this.detailFlag = false

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
                type: 'VectorLayer'
            })

            this.equimentPage.currentPage = 1

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'carLayers',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'policeMonitoringLayers',
                type: 'VectorLayer'
            })

            this.getEquipmentPaging({ type: this.navType })
        },
        // 设备分页处理
        handleCurrentChange (currentPage) {
            this.equimentPage.currentPage = currentPage

            this.getEquipmentPaging({ type: this.navType })
        },

        // 获取设备分页数据
        getEquipmentPaging (params) {
            getEquipmentPaging({ page: this.equimentPage.currentPage, count: this.equimentPage.pageSize, ...params, query: this.searchValue, dwbh: this.userInfo.dept_id }).then(res => {
                this.equimentTableData = []
                this.equimentPage.count = 0

                if (res.data.data.list.length > 0) {
                    this.equimentTableData = res.data.data.list.map(item => {
                        let newName = ''
                        if (params.type == 0) {
                            newName = item.name.replace('上饶-', '')
                        } else {
                            if (item.name.charAt(7) == '-') {
                                newName = item.name.slice(8)
                            } else {
                                newName = item.name.slice(7)
                            }
                        }

                        return { ...item, newName: newName, lng: item.longitude, lat: item.latitude, alt: 100 }
                    })

                    this.equimentTableData.forEach(item => {
                        if (this.navType == 0) {
                            this.$EventBus.$emit('layerPointAdd', {
                                layerName: 'carLayers',
                                type: 'billboard',
                                params: {
                                    ...item,
                                    url: '/img/icon/car.png'
                                },
                                incident: this.siteClick
                            })
                        } else if (this.navType == 1) {
                            this.$EventBus.$emit('layerPointAdd', {
                                layerName: 'policeMonitoringLayers',
                                type: 'billboard',
                                params: {
                                    ...item,
                                    url: '/img/icon/camera.png'
                                },
                                incident: this.siteClick
                            })
                        }
                    })

                    this.equimentPage.count = res.data.data.pages
                } else {
                    this.equimentTableData = []

                    this.equimentPage.total = 0
                }
            })
        },

        // 类别切换
        navClick (type) {
            if (type && type == this.navType) return
            this.detailFlag = false

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
                type: 'VectorLayer'
            })

            if (type) {
                this.navType = type
            }

            this.searchValue = ''

            this.equimentPage.currentPage = 1

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'carLayers',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'policeMonitoringLayers',
                type: 'VectorLayer'
            })

            this.getEquipmentPaging({ type: this.navType })
        },

        // 表格行点击查看定位
        rowClick (row) {
            if (row.lng == 0 || row.lat == 0) {
                this.$message.error('暂无位置信息！')

                return
            }
            this.$EventBus.$emit('toPosition', {
                layerName: 'carLayers',
                siteJd: row.lng,
                siteWd: row.lat
            })
        },

        // 表格行点击查看轨迹
        equipmentTrack (row) {
            this.detailFlag = true

            this.currentSelectEquipment = row
        },

        async play (row) {
            if (this.flvPlayer != null) {
                this.flvPlayer.pause()
                this.flvPlayer.unload()
                this.flvPlayer.detachMediaElement()
                this.flvPlayer.destroy()
                this.flvPlayer = null
            }

            this.dialogTitle = row.name
            let flvUrl = ''

            await this.getDevices(row.channelId).then(res => {
                flvUrl = res
            })

            if (typeof flvUrl === 'object') {
                this.$message.error(flvUrl.msg)

                return
            }

            this.dialogVisible = true

            if (flvjs.isSupported()) {
                this.$nextTick(() => {
                    var videoElement = document.getElementById('videoElement')
                    this.flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        isLive: true,
                        hasAudio: false,
                        url: flvUrl
                    })
                    this.flvPlayer.attachMediaElement(videoElement)
                    this.flvPlayer.load()
                    this.flvPlayer.play()
                })
            }
        },

        async getDevices (channelId) {
            let flvAddress = ''
            await getDevices(channelId).then(res => {
                if ('data' in res.data) {
                    flvAddress = res.data.data.flv
                } else {
                    flvAddress = res.data
                }
            })
            return flvAddress
        },

        siteClick (e) {
            this.play(e.overlay.attrParams)
        },

        dialogBeforeClose () {
            this.$refs.videoElement.pause()
            this.dialogVisible = false
        },

        // 轨迹返回
        goBack () {
            this.detailFlag = !this.detailFlag
            this.trackTime = []

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
                type: 'VectorLayer'
            })

            tc.pause()

            tc.removeTrack(track)
        },

        // 查看轨迹
        async lookTrack () {
            global.viewer.scene.globe.depthTestAgainstTerrain = false

            if (this.trackTime.length == 0) {
                this.$message({ message: '请选择开始时间', duration: 2000 })
                return
            }
            const startTime = new Date(this.trackTime[0])
            const start = startTime.getFullYear() + '-' + this.disposeTime(startTime.getMonth() + 1) + '-' + this.disposeTime(startTime.getDate()) + ' ' + this.disposeTime(startTime.getHours()) + ':' + this.disposeTime(startTime.getMinutes()) + ':' + this.disposeTime(startTime.getSeconds())
            if (this.trackTime.length == 1) {
                this.$message({ message: '请选择结束时间', duration: 2000 })
                return
            }
            const endTime = new Date(this.trackTime[1])
            const end = endTime.getFullYear() + '-' + this.disposeTime(endTime.getMonth() + 1) + '-' + this.disposeTime(endTime.getDate()) + ' ' + this.disposeTime(endTime.getHours()) + ':' + this.disposeTime(endTime.getMinutes()) + ':' + this.disposeTime(endTime.getSeconds())

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
                type: 'VectorLayer'
            })

            let positionsArr = []
            await this.getHistoricalTrack({ start: start, end: end, channelId: this.currentSelectEquipment.channelId }).then(res => {
                positionsArr = res
            })

            if (positionsArr.length == 0) {
                this.$message({
                    message: '该设备暂无轨迹数据',
                    type: 'warning'
                })

                return
            }

            let positionStr = ''
            positionsArr.forEach(item => {
                positionStr = positionStr + item.longitude + ',' + item.latitude + ';'
            })

            this.$EventBus.$emit('layerPolylineAdd', {
                layerName: 'polylineLayer',
                positions: positionStr,
                material: new global.DC.PolylineImageTrailMaterialProperty({
                    color: global.DC.Color.GREEN,
                    speed: 10,
                    image: '/img/icon/arrow.png',
                    repeat: { x: 10, y: 1 }
                }),
                width: 6
            })

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'polylineLayer',
                type: 'billboard',
                params: {
                    lng: positionsArr[0].longitude,
                    lat: positionsArr[0].latitude,
                    alt: 0,
                    url: '/img/icon/orgin.png'
                }
            })

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'polylineLayer',
                type: 'billboard',
                params: {
                    lng: positionsArr[positionsArr.length - 1].longitude,
                    lat: positionsArr[positionsArr.length - 1].latitude,
                    alt: 0,
                    url: '/img/icon/end.png'
                }
            })

            track = new global.DC.Track(positionStr, 5000)

            track.setModel('/model/qiche.gltf', {
                scale: 1
            })

            tc.addTrack(track)

            this.$EventBus.$emit('toPosition', {
                siteJd: 114.928669,
                siteWd: 25.850383,
                siteGd: 500,
                siteHeading: 0,
                sitePitch: -90
            })

            tc.play()
        },

        // 处理时间补零操作
        disposeTime (s) {
            return s < 10 ? '0' + s : s
        },

        setTableHeight () {
            this.currentTableHeight = this.$refs.tableBox.offsetHeight - this.$refs.tablePagination.offsetHeight
        },

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

        async getHistoricalTrack (params) {
            let positionArr = []

            await getHistoricalTrack(params).then(res => {
                positionArr = res.data.data
            })
            return positionArr
        },

        // 大搜
        getSearchExtensively (ak, region, query) {
            getSearchExtensively(ak, region, query).then(res => {
                this.searchExtensivelyArray = res.data.result
            })
        },

        searchExtensivelyClick () {
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            this.searchExtensivelyValBoxShow = false
            if (this.searchExtensivelyArray.length > 0) {
                this.$EventBus.$emit('toPosition', {
                    siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
                    siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
                    siteGd: 200
                })
                this.searchExtensivelyValue = this.searchExtensivelyArray[0].name
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'searchLayer',
                    type: 'VectorLayer'
                })
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'searchLayer',
                    type: 'label',
                    params: {
                        lng: `${this.searchExtensivelyArray[0].location.lng}`,
                        lat: `${this.searchExtensivelyArray[0].location.lat}`,
                        alt: 0,
                        text: this.searchExtensivelyArray[0].name
                    }
                })
            }
        },

        searchExtensivelyChange () {
            if (this.searchExtensivelyValue == '') {
                this.searchExtensivelyValBoxShow = false
                this.isShowClearBtn = false
                this.searchExtensivelyArray = []
            } else {
                this.searchExtensivelyValBoxShow = true
                this.isShowClearBtn = true
                this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            }
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
        },

        searchExtensivelyVlaClick (item) {
            this.searchExtensivelyValBoxShow = false
            this.searchExtensivelyValue = item.name
            this.$EventBus.$emit('toPosition', {
                siteJd: `${item.location.lng}`,
                siteWd: `${item.location.lat}`,
                siteGd: 200
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: 'label',
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 0,
                    text: item.name
                }
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: 'billboard',
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 0,
                    url: '/img/icon/location.png'
                }
            })
        },

        searchExtensivelyFocus () {
            this.searchExtensivelyValBoxShow = true
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
        },

        clearSearchValue () {
            this.searchExtensivelyValue = ''
            this.searchExtensivelyChange()
        }
    },

    destroyed () {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'carLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'policeMonitoringLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'polylineLayer',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'searchLayer',
            type: 'VectorLayer'
        })

        tc.pause()

        tc.removeTrack(track)

        window.removeEventListener('resize', this.setTableHeight)

        this.$parent.$parent.resize('0px')
    }
}
</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;

        .switch-box {
            padding: 6px;
            // background: blue;
            display: flex;
            align-items: center;
            justify-content: space-around;

            & > div {
                flex: 1;
            }
        }

        .list-show {
            position: relative;
            height: calc(100% - 50px);

            .search-box {
                padding: 6px;
                padding-top: 0;
                height: 46px;
                display: flex;
                align-items: center;

                input {
                    flex: 1;
                    height: 100%;
                    font-size: 18px;
                    text-indent: 1em;
                    color: #ffffff;
                    background-color: rgba(24, 79, 202, 0.6);
                    // border: 1px solid rgb(0, 92, 169);
                    border: 1px solid rgb(24, 79, 202);
                }

                input:focus {
                    outline: none;
                }

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

            .list {
                height: calc(100% - 48px);
                display: flex;
                flex-direction: column;

                .pages {
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .state-box {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    margin: 0 auto;
                    border-radius: 50%;
                    background-color: #adadad;
                }

                .online {
                    background-color: #4ccc7d;
                }
            }

            :deep(.el-table td.el-table__cell div) {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        .track-box {
            height: calc(100% - 50px);

            .back-btn {
                position: relative;
                height: 42px;
                line-height: 42px;
                text-align: center;
                color: #fff;
                border-bottom: 1px solid #fff;
                cursor: pointer;
            }

            .back-btn::before {
                content: '\e6ea';
                font-family: element-icons;
                height: 28px;
                line-height: 28px;
                color: #fff;
                position: absolute;
                top: 4px;
                left: 8px;
            }

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

            ul {
                margin: 0;
                padding: 0;
            }

            li {
                margin: 0;
                padding: 0 4px;
                list-style: none;
                height: 42px;
                line-height: 42px;
                display: flex;
                color: #fff;
                border-bottom: 1px solid #fff;

                & > div {
                    text-align: center;
                }

                & > div:first-child {
                    flex: 2;
                }

                & > div:last-child {
                    flex: 6;

                    & > div {
                        width: 100% !important;
                    }
                }
            }

            li:last-child {
                text-align: center;
                position: relative;

                .el-button {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    padding: 0 !important;
                    width: 68px;
                    height: 32px;
                    line-height: 32px;
                }
            }
        }
    }

    .search-content {
        position: absolute;
        position: fixed;
        z-index: 99;
        left: 760px;
        top: 40px;
        width: 460px;
        height: 36px;

        input {
            flex: 1;
            width: 400px;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: rgba(24, 79, 202, 0.75);
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
            vertical-align: top;
        }

        input:focus {
            outline: none;
        }

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

        .clear {
            position: absolute;
            top: 0;
            right: 70px;
            cursor: pointer;

            img {
                width: 16px;
                height: 16px;
                margin-top: 10px;
            }
        }

        button {
            font-size: 24px;
            font-weight: 700;
            width: 60px;
            height: 100%;
            background-color: $table-body-tr-n-color;
            color: #fff;
            border: 1px solid rgb(0, 92, 169);
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }

        button:active {
            background-color: $table-body-tr-2n-color;
            border: 1px solid rgb(0, 92, 169);
        }
    }

    .searchExtensively-val-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 760px;
        width: 380px;
        max-height: 160px;
        text-align: left;
        color: #fff;
        background: $el-dialog-bg-color;
        z-index: 1111;
        border-radius: 10px;
        overflow: hidden;

        & > div {
            height: 100%;
            overflow-y: auto;

            div {
                padding: 0 10px;
                line-height: 36px;
                cursor: pointer;
            }
        }
    }
}
</style>