武装押运相关想改

shuishen

2021-07-23 331700e7e3bc4d67ceba73a21355ce675b902046

武装押运相关想改

 src/api/map/car.js

New file
@@ -0,0 +1,25 @@
import request from '@/router/axios';

export const getCarList = (param) => {
  return request({
    url: '/api/car/page',
    method: 'get',
    params: param
  })
}

export const getPosition = (param) => {
  return request({
    url: '/api/liveLocation/detail',
    method: 'get',
    params: param
  })
}

export const getTrack = (param) => {
  return request({
    url: '/api/liveLocation/getLocusInfoList',
    method: 'get',
    params: param
  })
}

 src/api/map/gun.js

New file
@@ -0,0 +1,25 @@
import request from '@/router/axios';

export const getGunList = (param) => {
  return request({
    url: '/api/gun/page',
    method: 'get',
    params: param
  })
}

export const getPosition = (param) => {
  return request({
    url: '/api/liveLocation/detail',
    method: 'get',
    params: param
  })
}

export const getTrack = (param) => {
  return request({
    url: '/api/liveLocation/getLocusInfoList',
    method: 'get',
    params: param
  })
}

 src/api/map/people.js

New file
@@ -0,0 +1,26 @@
import request from '@/router/axios';

export const getPeopleList = (param) => {
  return request({
    url: '/api/blade-user/page-security',
    method: 'get',
    params: param
  })
}

export const getPosition = (param) => {
  return request({
    url: '/api/liveLocation/detail',
    method: 'get',
    params: param
  })
}

export const getTrack = (param) => {
  return request({
    url: '/api/liveLocation/getLocusInfoList',
    method: 'get',
    params: param
  })
}


 src/assets/img/start.png

 src/components/map/main.vue

@@ -7,7 +7,7 @@
 * @LastEditTime: 2021-04-24 11:59:43
-->
<template>
    <div id="map"
    <div id="track_map"
         style="height: 100%"></div>
</template>
<script>
@@ -52,6 +52,8 @@
import LineString from 'ol/geom/LineString.js'
import { Icon, Style, Fill, Stroke } from 'ol/style.js'

import start from '@/assets/img/start.png'

export default {
    name: 'Map',
    data () {
@@ -72,10 +74,15 @@
                zIndex: 22,
                source: new VectorSource()
            }),
            startPoint: new VectorLayer({ // 图标图层
                zIndex: 22,
                source: new VectorSource()
            }),
            ol2d: null,
        }
    },
    mounted () {
        const ol2d = new OlMap({
        this.ol2d = new OlMap({
            layers: [
                new OlLayerTile({
                    zIndex: 4,
@@ -97,20 +104,20 @@
            controls: defaults().extend([
                new FullScreen(),
                new ScaleLine(),
                new MousePosition(),
                // new MousePosition(),
                new Rotate(),
                new Attribution()
            ]),
            target: 'map',
            target: 'track_map',
            view: new OlView({
                center: [0, 0],
                zoom: 2,
                projection: 'EPSG:4326'
            })
        })
        window.ol2d = ol2d
        window.ol2d = this.ol2d

        var view = ol2d.getView()
        var view = this.ol2d.getView()

        view.setCenter([115.85883507433789, 28.708432053474827])

@@ -119,17 +126,19 @@
        const ol3d = new OLCesium({ map: window.ol2d })
        window.ol3d = ol3d

        ol2d.addLayer(this.gunAddlayer)
        ol2d.addLayer(this.peopleAddlayer)
        ol2d.addLayer(this.carAddlayer)
        ol2d.addLayer(this.peopleLineAddlayer)
        this.addLines()
        this.ol2d.addLayer(this.gunAddlayer)
        this.ol2d.addLayer(this.peopleAddlayer)
        this.ol2d.addLayer(this.carAddlayer)
        this.ol2d.addLayer(this.peopleLineAddlayer)
        this.ol2d.addLayer(this.startPoint)
    },
    methods: {
        init3D (val) {
            window.ol3d.setEnabled(val)
        },
        addEntitys (item, icon, scale, name, type) {
            this[type].getSource().clear()

            const iconFeature = new Feature({
                geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
                name: name,
@@ -165,20 +174,15 @@
            iconFeature.setStyle(iconStyle)

            this[type].getSource().addFeature(iconFeature)

            this.flyTo(Number(item.LGTD), Number(item.LTTD), 18)
        },

        addLines () {

        addLines (arr) {
            this.addEntity(arr[0][0], arr[0][1])
            this.peopleLineAddlayer.getSource().clear()
            // 点坐标
            var lineCoords = [
              [115.87471898408013, 28.720924466928977],
              [115.87471898408013, 28.724163802651635],
              [115.87401037939081, 28.72456871961697],
              [115.87147964835748, 28.7246699488583],
              [115.86925260504815, 28.7246699488583],
              [115.86621572780817, 28.7246699488583],
              [115.8635837675335, 28.72578347051296]
              ];// 线里点的集合
            var lineCoords = arr;// 线里点的集合

            // 要素
            // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
@@ -202,6 +206,65 @@

            this.peopleLineAddlayer.getSource().addFeature(feature_LineString)

            this.flyTo(arr[Math.ceil(arr.length / 2)][0], arr[Math.ceil(arr.length / 2)][1], 15)
        },

        addEntity (LGTD, LTTD) {
            this.startPoint.getSource().clear()

            const iconFeature = new Feature({
                geometry: new Point([LGTD, LTTD]),
                name: '起始点',
            })

            const iconStyle = new Style({
                // text: new Text({ // 字体, 未成功, 浪费许多时间
                //   font: 'Normal ' + 12 + 'px ' + 'iconfont',
                //   text: "\e645",
                //   fill: new Fill({ color: "green" }),
                // }),

                image: new Icon({
                    anchor: [0.5, 170],              //锚点
                    anchorOrigin: 'top-left',       //锚点源
                    anchorXUnits: 'fraction',       //锚点X值单位
                    anchorYUnits: 'pixels',         //锚点Y值单位
                    offsetOrigin: 'top-left',
                    scale: 0.2,
                    opacity: 1,
                    src: start
                    // src: require('../../assets/Mark.png')
                })

                // new CircleStyle({ // 普通样式
                //   radius: 6,
                //   fill: new Fill({
                //     color: 'rgba(200, 155, 155, 0.8)'
                //   }),
                //   stroke: new Stroke({
                //     color: 'black',
                //     width: 0.3,
                //   })
                // }),
            })

            iconFeature.setStyle(iconStyle)

            this.startPoint.getSource().addFeature(iconFeature)

        },

        clearLine () {
            this.peopleLineAddlayer.getSource().clear()
            this.startPoint.getSource().clear()
        },

        flyTo (lgtd, lttd, size) {
            var view = this.ol2d.getView()

            view.setCenter([lgtd, lttd])

            view.setZoom(size)
        }
    }
}

 src/styles/management.scss

@@ -26,6 +26,9 @@
      margin: 0;
      padding: 20px;
      height: calc(100% - 40px) !important;



    }
  }
}

 src/styles/map.scss

@@ -45,3 +45,10 @@
    font-size: 12px !important;
  }
}

.map-people-table {
  .el-table__body-wrapper {
    height: calc(100% - 48px) !important;
    overflow-y: auto !important;
  }
}

 src/views/map/carGps.vue

@@ -2,53 +2,362 @@
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-07-12 14:39:01
 * menu-name 押运车辆位置
 * @Last Modified time: 2021-07-23 11:20:50
 * menu-name 押运人员定位
 */
<template>
    <el-row class="morpheus-map-box">
        <el-col :span="24">
            <el-card>
                <div class="card-body">
                    <Map ref="modalForm" />
                    <div>
                        <Map ref="modalForm" />
                    </div>
                    <div>
                        <div class="data-table map-people-table"
                             v-show='!detailFlag'>
                            <el-table :data="tableData"
                                      style="width: 100%"
                                      v-loading="loading">
                                <el-table-column align="center"
                                                 prop="mode"
                                                 label="车辆型号"
                                                 width="136">
                                </el-table-column>

                                <el-table-column align="center"
                                                 prop="personInCharge"
                                                 label="责任人">
                                </el-table-column>

                                <el-table-column label="操作"
                                                 width="136"
                                                 align='center'>
                                    <template slot-scope="scope">
                                        <el-button @click="positionClick(scope.row)"
                                                   type="text"
                                                   size="small"
                                                   title='定位'>
                                            <i class='el-icon-location'></i>
                                        </el-button>
                                        <el-button @click="detailsClick(scope.row)"
                                                   type="text"
                                                   size="small"
                                                   title='轨迹'>
                                            <i class='el-icon-position'></i>
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div ref="tablePagination">
                                <el-pagination @size-change="handleSizeChange"
                                               @current-change="handleCurrentChange"
                                               background
                                               :page-sizes="[10, 30, 50, 100]"
                                               layout="sizes, prev, pager, next"
                                               :current-page="page.currentPage"
                                               :page-size="page.pageSize"
                                               :pager-count="3"
                                               :total="page.total">
                                </el-pagination>
                            </div>
                        </div>
                        <div class='track-box'
                             v-show='detailFlag'>
                            <div>
                                <el-button @click="goOut"
                                           type="text"
                                           size="small"
                                           title='轨迹'>
                                    <i class='el-icon-back'></i>
                                </el-button>

                                详细资料及轨迹查询
                            </div>
                            <ul>

                                <li>
                                    <div>车辆型号：</div>
                                    <div>{{ detailObj.mode }}</div>
                                </li>

                                <li>
                                    <div>责任人：</div>
                                    <div>{{ detailObj.personInCharge }}</div>
                                </li>

                                <li>
                                    <div>出场日期：</div>
                                    <div>{{ detailObj.dateForProduction }}</div>
                                </li>

                                <li>
                                    <div>厂商：</div>
                                    <div>{{ detailObj.brand }}</div>
                                </li>

                                <li>
                                    <div>选择时间：</div>
                                    <div>
                                        <el-date-picker v-model="trackTime"
                                                        type="datetimerange"
                                                        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>
            </el-card>
        </el-col>
    </el-row>
</template>


<script>
import carPng from '@/assets/img/car.png'

import {
    getCarList,
    getPosition,
    getTrack
} from '@/api/map/car'

import gunPng from '@/assets/img/gun.png'

export default {
    data () {
        return {

            tableData: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            detailFlag: false,
            loading: true,
            trackTime: [],
            detailObj: {}
        }
    },
    created () {
        this.getList()

    },
    mounted () {

        this.$refs.modalForm.addEntitys({
            LGTD: 115.870,
            LTTD: 28.680,
            name: '车辆位置'
        }, carPng, 0.5, 'carlayer', 'carAddlayer');

    },
    methods: {
        getList () {
            getCarList({ current: this.page.currentPage, size: this.page.pageSize }).then(res => {
                var data = res.data.data
                this.tableData = data.records
                this.page.total = data.total
                this.loading = false
            })
        },
        handleSizeChange (val) {
            this.page.pageSize = val
            this.loading = true
            this.getList()
        },
        handleCurrentChange (val) {
            this.page.currentPage = val
            this.loading = true
            this.getList()
        },

        positionClick (val) {
            getPosition({ type: 2, workerId: val.id }).then(result => {
                var res = result.data.data
                if (JSON.stringify(res) != "{}") {
                    this.$refs.modalForm.addEntitys({
                        LGTD: 115.860,
                        LTTD: 28.710,
                        name: '枪支位置'
                    }, gunPng, 0.8, 'gunlayer', 'gunAddlayer');
                }

            })
        },

        detailsClick (row) {
            this.detailFlag = true
            this.detailObj = {
                mode: row.mode,
                personInCharge: row.personInCharge,
                dateForProduction: row.dateForProduction,
                brand: row.brand,
                id: row.id
            }

        },

        lookTrack () {
            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())

            getTrack({ workerId: this.detailObj.id, type: 2, startTime: start, endTime: end }).then(res => {
                var result = res.data.data
                if (result.length > 1) {
                    let arr = []

                    result.forEach(item => {
                        arr.push([Number(item.longitude), Number(item.latitude)])
                    })

                    this.$refs.modalForm.addLines(arr);
                }
            })

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

        goOut () {
            this.detailFlag = !this.detailFlag
            this.$refs.modalForm.clearLine()
            this.trackTime = []
        }
    },
    destroyed () {

        window.ol2d.removeLayer(this.carAddlayer)
        window.ol2d.removeLayer(this.peopleAddlayer)

    },
}
</script>

<style lang="scss" scoped>
.card-body {
    display: flex;
    & > div:first-child {
        flex: 8;
    }

    & > div:last-child {
        position: relative;

        flex: 3;
        & > div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            & > .el-table {
                height: calc(100% - 34px);
            }
        }

        .track-box {
            & > div {
                position: relative;
                height: 42px;
                line-height: 42px;
                text-align: center;
                color: #fff;
                border-bottom: 1px solid #fff;
                .el-button {
                    padding: 0 !important;
                    position: absolute;
                    top: 4px;
                    left: 4px;
                    width: 42px;
                    height: 28px;
                    line-height: 28px;
                }
            }
            ul {
                margin: 0;
                padding: 0px;
            }
            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;
                }
            }
        }
    }
}
</style>

 src/views/map/gunGps.vue

@@ -2,53 +2,374 @@
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-07-12 15:11:51
 * menu-name 枪支实时定位
 * @Last Modified time: 2021-07-23 11:20:51
 * menu-name 押运人员定位
 */
<template>
    <el-row class="morpheus-map-box">
        <el-col :span="24">
            <el-card>
                <div class="card-body">
                    <Map ref="modalForm" />
                    <div>
                        <Map ref="modalForm" />
                    </div>
                    <div>
                        <div class="data-table map-people-table"
                             v-show='!detailFlag'>
                            <el-table :data="tableData"
                                      style="width: 100%"
                                      v-loading="loading">
                                <el-table-column align="center"
                                                 prop="gunMode"
                                                 label="枪支类型"
                                                 width="136">
                                </el-table-column>

                                <el-table-column align="center"
                                                 prop="personInCharge"
                                                 label="责任人">
                                </el-table-column>

                                <el-table-column label="操作"
                                                 width="136"
                                                 align='center'>
                                    <template slot-scope="scope">
                                        <el-button @click="positionClick(scope.row)"
                                                   type="text"
                                                   size="small"
                                                   title='定位'>
                                            <i class='el-icon-location'></i>
                                        </el-button>
                                        <el-button @click="detailsClick(scope.row)"
                                                   type="text"
                                                   size="small"
                                                   title='轨迹'>
                                            <i class='el-icon-position'></i>
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div ref="tablePagination">
                                <el-pagination @size-change="handleSizeChange"
                                               @current-change="handleCurrentChange"
                                               background
                                               :page-sizes="[10, 30, 50, 100]"
                                               layout="sizes, prev, pager, next"
                                               :current-page="page.currentPage"
                                               :page-size="page.pageSize"
                                               :pager-count="3"
                                               :total="page.total">
                                </el-pagination>
                            </div>
                        </div>
                        <div class='track-box'
                             v-show='detailFlag'>
                            <div>
                                <el-button @click="goOut"
                                           type="text"
                                           size="small"
                                           title='轨迹'>
                                    <i class='el-icon-back'></i>
                                </el-button>

                                详细资料及轨迹查询
                            </div>
                            <ul>

                                <li>
                                    <div>枪支类型：</div>
                                    <div>{{ detailObj.gunMode }}</div>
                                </li>

                                <li>
                                    <div>责任人：</div>
                                    <div>{{ detailObj.personInCharge }}</div>
                                </li>

                                <li>
                                    <div>发证日期：</div>
                                    <div>{{ detailObj.issueTime }}</div>
                                </li>

                                <li>
                                    <div>有效日期：</div>
                                    <div>{{ detailObj.validTime }}</div>
                                </li>

                                <li>
                                    <div>发证单位：</div>
                                    <div>{{ detailObj.issueUnit }}</div>
                                </li>

                                <li>
                                    <div>用枪编号：</div>
                                    <div>{{ detailObj.cardNumber }}</div>
                                </li>

                                <li>
                                    <div>选择时间：</div>
                                    <div>
                                        <el-date-picker v-model="trackTime"
                                                        type="datetimerange"
                                                        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>
            </el-card>
        </el-col>
    </el-row>
</template>


<script>

import {
    getGunList,
    getPosition,
    getTrack
} from '@/api/map/gun'

import gunPng from '@/assets/img/gun.png'

export default {
    data () {
        return {

            tableData: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            detailFlag: false,
            loading: true,
            trackTime: [],
            detailObj: {}
        }
    },
    created () {
        this.getList()

    },
    mounted () {

        this.$refs.modalForm.addEntitys({
            LGTD: 115.860,
            LTTD: 28.710,
            name: '枪支位置'
        }, gunPng, 0.8, 'gunlayer', 'gunAddlayer');

    },
    methods: {
        getList () {
            getGunList({ current: this.page.currentPage, size: this.page.pageSize }).then(res => {
                var data = res.data.data
                this.tableData = data.records
                this.page.total = data.total
                this.loading = false
            })
        },
        handleSizeChange (val) {
            this.page.pageSize = val
            this.loading = true
            this.getList()
        },
        handleCurrentChange (val) {
            this.page.currentPage = val
            this.loading = true
            this.getList()
        },

        positionClick (val) {
            getPosition({ type: 3, workerId: val.id }).then(result => {
                var res = result.data.data
                if (JSON.stringify(res) != "{}") {
                    this.$refs.modalForm.addEntitys({
                        LGTD: 115.860,
                        LTTD: 28.710,
                        name: '枪支位置'
                    }, gunPng, 0.8, 'gunlayer', 'gunAddlayer');
                }

            })
        },

        detailsClick (row) {
            this.detailFlag = true
            this.detailObj = {
                gunMode: row.gunMode,
                personInCharge: row.personInCharge,
                issueTime: row.issueTime,
                validTime: row.validTime,
                issueUnit: row.issueUnit,
                cardNumber: row.cardNumber,
                id: row.id
            }

        },

        lookTrack () {
            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())

            getTrack({ workerId: this.detailObj.id, type: 3, startTime: start, endTime: end }).then(res => {
                var result = res.data.data
                if (result.length > 1) {
                    let arr = []

                    result.forEach(item => {
                        arr.push([Number(item.longitude), Number(item.latitude)])
                    })

                    this.$refs.modalForm.addLines(arr);
                }
            })

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

        goOut () {
            this.detailFlag = !this.detailFlag
            this.$refs.modalForm.clearLine()
            this.trackTime = []
        }
    },
    destroyed () {

        window.ol2d.removeLayer(this.gunAddlayer)
        window.ol2d.removeLayer(this.peopleAddlayer)

    },
}
</script>

<style lang="scss" scoped>
.card-body {
    display: flex;
    & > div:first-child {
        flex: 8;
    }

    & > div:last-child {
        position: relative;

        flex: 3;
        & > div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            & > .el-table {
                height: calc(100% - 34px);
            }
        }

        .track-box {
            & > div {
                position: relative;
                height: 42px;
                line-height: 42px;
                text-align: center;
                color: #fff;
                border-bottom: 1px solid #fff;
                .el-button {
                    padding: 0 !important;
                    position: absolute;
                    top: 4px;
                    left: 4px;
                    width: 42px;
                    height: 28px;
                    line-height: 28px;
                }
            }
            ul {
                margin: 0;
                padding: 0px;
            }
            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;
                }
            }
        }
    }
}
</style>

 src/views/map/peopleGps.vue

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-07-12 14:38:42
 * @Last Modified time: 2021-07-23 11:13:10
 * menu-name 押运人员定位
 */
<template>
@@ -10,7 +10,116 @@
        <el-col :span="24">
            <el-card>
                <div class="card-body">
                    <Map ref="modalForm" />
                    <div>
                        <Map ref="modalForm" />
                    </div>
                    <div>
                        <div class="data-table map-people-table"
                             v-show='!detailFlag'>
                            <el-table :data="tableData"
                                      style="width: 100%"
                                      v-loading="loading">
                                <el-table-column align="center"
                                                 prop="realName"
                                                 label="姓名"
                                                 width="136">
                                </el-table-column>

                                <el-table-column align="center"
                                                 prop="roleName"
                                                 label="所属角色">
                                </el-table-column>

                                <el-table-column label="操作"
                                                 width="136"
                                                 align='center'>
                                    <template slot-scope="scope">
                                        <el-button @click="positionClick(scope.row)"
                                                   type="text"
                                                   size="small"
                                                   title='定位'>
                                            <i class='el-icon-location'></i>
                                        </el-button>
                                        <el-button @click="detailsClick(scope.row)"
                                                   type="text"
                                                   size="small"
                                                   title='轨迹'>
                                            <i class='el-icon-position'></i>
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div ref="tablePagination">
                                <el-pagination @size-change="handleSizeChange"
                                               @current-change="handleCurrentChange"
                                               background
                                               :page-sizes="[10, 30, 50, 100]"
                                               layout="sizes, prev, pager, next"
                                               :current-page="page.currentPage"
                                               :page-size="page.pageSize"
                                               :pager-count="3"
                                               :total="page.total">
                                </el-pagination>
                            </div>
                        </div>
                        <div class='track-box'
                             v-show='detailFlag'>
                            <div>
                                <el-button @click="goOut"
                                           type="text"
                                           size="small"
                                           title='轨迹'>
                                    <i class='el-icon-back'></i>
                                </el-button>

                                详细资料及轨迹查询
                            </div>
                            <ul>

                                <li>
                                    <div>姓名：</div>
                                    <div>{{ detailObj.name }}</div>
                                </li>

                                <li>
                                    <div>所属角色：</div>
                                    <div>{{ detailObj.role }}</div>
                                </li>

                                <li>
                                    <div>联系电话：</div>
                                    <div>{{ detailObj.phone }}</div>
                                </li>

                                <li>
                                    <div>联系地址：</div>
                                    <div>{{ detailObj.address }}</div>
                                </li>

                                <li>
                                    <div>选择时间：</div>
                                    <div>
                                        <el-date-picker v-model="trackTime"
                                                        type="datetimerange"
                                                        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>
            </el-card>
        </el-col>
@@ -18,28 +127,143 @@
</template>

<script>
import {
    getPeopleList,
    getPosition,
    getTrack
} from '@/api/map/people'

import peoplePng from '@/assets/img/people.png'

export default {
    data () {
        return {

            tableData: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            detailFlag: false,
            loading: true,
            trackTime: [],
            detailObj: {}
        }
    },
    created () {

    },
    mounted () {
        this.getList()

        this.$refs.modalForm.addEntitys({
            LGTD: 115.870,
            LTTD: 28.720,
            name: '人员位置'
        }, peoplePng, 0.5, 'peoplelayer', 'peopleAddlayer');

    },
    methods: {
        getList () {
            getPeopleList({ current: this.page.currentPage, size: this.page.pageSize }).then(res => {
                var data = res.data.data
                this.tableData = data.records
                this.page.total = data.total
                this.loading = false
            })
        },
        handleSizeChange (val) {
            this.page.pageSize = val
            this.loading = true
            this.getList()
        },
        handleCurrentChange (val) {
            this.page.currentPage = val
            this.loading = true
            this.getList()
        },

        positionClick (val) {
            getPosition({ type: 1, workerId: val.id }).then(result => {
                var res = result.data.data
                if (JSON.stringify(res) != "{}") {
                    this.$refs.modalForm.addEntitys({
                        LGTD: res.longitude,
                        LTTD: res.latitude,
                        name: '人员位置'
                    }, peoplePng, 0.5, 'peoplelayer', 'peopleAddlayer');
                }

            })
        },

        detailsClick (row) {
            this.detailFlag = true
            this.detailObj = {
                name: row.realName,
                role: row.roleName,
                phone: row.phone,
                address: row.address,
                id: row.id
            }

        },

        lookTrack () {
            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())

            getTrack({ workerId: this.detailObj.id, type: 1, startTime: start, endTime: end }).then(res => {
                var result = res.data.data
                if (result.length > 1) {
                    let arr = []

                    result.forEach(item => {
                        arr.push([Number(item.longitude), Number(item.latitude)])
                    })

                    this.$refs.modalForm.addLines(arr);
                }
            })

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

        goOut () {
            this.detailFlag = !this.detailFlag
            this.$refs.modalForm.clearLine()
            this.trackTime = []
        }
    },
    destroyed () {

@@ -50,4 +274,90 @@
</script>

<style lang="scss" scoped>
.card-body {
    display: flex;
    & > div:first-child {
        flex: 8;
    }

    & > div:last-child {
        position: relative;

        flex: 3;
        & > div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            & > .el-table {
                height: calc(100% - 34px);
            }
        }

        .track-box {
            & > div {
                position: relative;
                height: 42px;
                line-height: 42px;
                text-align: center;
                color: #fff;
                border-bottom: 1px solid #fff;
                .el-button {
                    padding: 0 !important;
                    position: absolute;
                    top: 4px;
                    left: 4px;
                    width: 42px;
                    height: 28px;
                    line-height: 28px;
                }
            }
            ul {
                margin: 0;
                padding: 0px;
            }
            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;
                }
            }
        }
    }
}
</style>