Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/zhba_regulatory

shuishen

2021-07-23 4e6dd4f6d63ed5e563603927eed742ec923b25da

Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/zhba_regulatory

 src/styles/element-ui.scss

@@ -405,10 +405,13 @@
//所有表格 边框
.el-card,
.el-tabs__content,
.ol-viewport {
.track-box {
  border: 1px solid transparent !important;
  box-shadow: 3px 3px 15px -2px rgb(0, 0, 0) !important;
}
.ol-viewport {
  box-shadow: 0px 3px 15px -2px rgb(0, 0, 0) !important;
}
// 左侧树形 阴影

// .el-card.is-always-shadow {

 src/styles/map.scss

@@ -1,6 +1,6 @@
// 保安人员管理相关样式
#avue-view {
  &>.morpheus-map-box {
  & > .morpheus-map-box {
    position: absolute;
    top: 40px;
    left: 0px;
@@ -10,10 +10,10 @@
  }
}

.morpheus-map-box>.el-col {
.morpheus-map-box > .el-col {
  height: 100%;

  &>.el-card {
  & > .el-card {
    position: relative;
    height: 100%;

@@ -54,3 +54,19 @@
    overflow-y: auto !important;
  }
}

.track-box {
  .datetime {
    input {
      background: #004ca7 !important;
      &::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #fff !important;
      }
    }
  }
}

.el-date-editor .el-range-separator {
  color: #fff !important;
}

 src/views/map/carGps.vue

@@ -6,358 +6,367 @@
 * menu-name 押运人员定位
 */
<template>
    <el-row class="morpheus-map-box">
        <el-col :span="24">
            <el-card>
                <div class="card-body">
                    <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-row class="morpheus-map-box">
    <el-col :span="24">
      <el-card>
        <div class="card-body">
          <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
                  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>
                <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>
                详细资料及轨迹查询
              </div>
              <ul>
                <li>
                  <div>车辆型号：</div>
                  <div>{{ detailObj.mode }}</div>
                </li>

                                <li>
                                    <div>车辆型号：</div>
                                    <div>{{ detailObj.mode }}</div>
                                </li>
                <li>
                  <div>责任人：</div>
                  <div>{{ detailObj.personInCharge }}</div>
                </li>

                                <li>
                                    <div>责任人：</div>
                                    <div>{{ detailObj.personInCharge }}</div>
                                </li>
                <li>
                  <div>出场日期：</div>
                  <div>{{ detailObj.dateForProduction }}</div>
                </li>

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

                                <li>
                                    <div>厂商：</div>
                                    <div>{{ detailObj.brand }}</div>
                                </li>
                <li>
                  <div>选择时间：</div>
                  <div class="datetime">
                    <el-date-picker
                      v-model="trackTime"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      size="mini"
                      :editable="false"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </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>
                <li>
                  <el-button type="text" @click="lookTrack">
                    查看轨迹
                  </el-button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getCarList, getPosition, getTrack } from "@/api/map/car";

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

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

export default {
    data () {
        return {
            tableData: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
  data() {
    return {
      tableData: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      detailFlag: false,
      loading: true,
      trackTime: [],
      detailObj: {},
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  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.86,
              LTTD: 28.71,
              name: "枪支位置",
            },
            detailFlag: false,
            loading: true,
            trackTime: [],
            detailObj: {}
            gunPng,
            0.8,
            "gunlayer",
            "gunAddlayer"
          );
        }
      });
    },
    created () {
        this.getList()

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

    },
    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()
        },
    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());

        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');
                }
      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)]);
          });

        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 = []
          this.$refs.modalForm.addLines(arr);
        }
      });
    },
    destroyed () {

        window.ol2d.removeLayer(this.peopleAddlayer)

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

    goOut() {
      this.detailFlag = !this.detailFlag;
      this.$refs.modalForm.clearLine();
      this.trackTime = [];
    },
  },
  destroyed() {
    window.ol2d.removeLayer(this.peopleAddlayer);
  },
};
</script>

<style lang="scss" scoped>
.data-table {
  border: 1px solid transparent !important;
  box-shadow: 3px 3px 15px -2px rgb(0, 0, 0) !important;
}
.card-body {
    display: flex;
    & > div:first-child {
        flex: 8;
  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);
      }
    }

    & > div:last-child {
    .track-box {
      & > div {
        position: relative;

        flex: 3;
        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 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

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

        .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;
                }
            }
        & > 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

@@ -6,370 +6,379 @@
 * menu-name 押运人员定位
 */
<template>
    <el-row class="morpheus-map-box">
        <el-col :span="24">
            <el-card>
                <div class="card-body">
                    <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-row class="morpheus-map-box">
    <el-col :span="24">
      <el-card>
        <div class="card-body">
          <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
                  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>
                <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>
                详细资料及轨迹查询
              </div>
              <ul>
                <li>
                  <div>枪支类型：</div>
                  <div>{{ detailObj.gunMode }}</div>
                </li>

                                <li>
                                    <div>枪支类型：</div>
                                    <div>{{ detailObj.gunMode }}</div>
                                </li>
                <li>
                  <div>责任人：</div>
                  <div>{{ detailObj.personInCharge }}</div>
                </li>

                                <li>
                                    <div>责任人：</div>
                                    <div>{{ detailObj.personInCharge }}</div>
                                </li>
                <li>
                  <div>发证日期：</div>
                  <div>{{ detailObj.issueTime }}</div>
                </li>

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

                                <li>
                                    <div>有效日期：</div>
                                    <div>{{ detailObj.validTime }}</div>
                                </li>
                <li>
                  <div>发证单位：</div>
                  <div>{{ detailObj.issueUnit }}</div>
                </li>

                                <li>
                                    <div>发证单位：</div>
                                    <div>{{ detailObj.issueUnit }}</div>
                                </li>
                <li>
                  <div>用枪编号：</div>
                  <div>{{ detailObj.cardNumber }}</div>
                </li>

                                <li>
                                    <div>用枪编号：</div>
                                    <div>{{ detailObj.cardNumber }}</div>
                                </li>
                <li>
                  <div>选择时间：</div>
                  <div class="datetime">
                    <el-date-picker
                      v-model="trackTime"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      size="mini"
                      :editable="false"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </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>
                <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 {
    getGunList,
    getPosition,
    getTrack
} from '@/api/map/gun'

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

export default {
    data () {
        return {
            tableData: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
  data() {
    return {
      tableData: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      detailFlag: false,
      loading: true,
      trackTime: [],
      detailObj: {},
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  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.86,
              LTTD: 28.71,
              name: "枪支位置",
            },
            detailFlag: false,
            loading: true,
            trackTime: [],
            detailObj: {}
            gunPng,
            0.8,
            "gunlayer",
            "gunAddlayer"
          );
        }
      });
    },
    created () {
        this.getList()

    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,
      };
    },
    mounted () {

    },
    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()
        },
    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());

        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');
                }
      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)]);
          });

        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 = []
          this.$refs.modalForm.addLines(arr);
        }
      });
    },
    destroyed () {

        window.ol2d.removeLayer(this.peopleAddlayer)

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

    goOut() {
      this.detailFlag = !this.detailFlag;
      this.$refs.modalForm.clearLine();
      this.trackTime = [];
    },
  },
  destroyed() {
    window.ol2d.removeLayer(this.peopleAddlayer);
  },
};
</script>

<style lang="scss" scoped>
.data-table {
  border: 1px solid transparent !important;
  box-shadow: 3px 3px 15px -2px rgb(0, 0, 0) !important;
}
.card-body {
    display: flex;
    & > div:first-child {
        flex: 8;
  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);
      }
    }

    & > div:last-child {
    .track-box {
      & > div {
        position: relative;

        flex: 3;
        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 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

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

        .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;
                }
            }
        & > 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

@@ -6,358 +6,372 @@
 * menu-name 押运人员定位
 */
<template>
    <el-row class="morpheus-map-box">
        <el-col :span="24">
            <el-card>
                <div class="card-body">
                    <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-row class="morpheus-map-box">
    <el-col :span="24">
      <el-card>
        <div class="card-body">
          <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
                  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>
                <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>
                详细资料及轨迹查询
              </div>
              <ul>
                <li>
                  <div>姓名：</div>
                  <div>{{ detailObj.name }}</div>
                </li>

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

                                <li>
                                    <div>所属角色：</div>
                                    <div>{{ detailObj.role }}</div>
                                </li>
                <li>
                  <div>联系电话：</div>
                  <div>{{ detailObj.phone }}</div>
                </li>

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

                                <li>
                                    <div>联系地址：</div>
                                    <div>{{ detailObj.address }}</div>
                                </li>
                <li>
                  <div>选择时间：</div>
                  <div class="datetime">
                    <el-date-picker
                      v-model="trackTime"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      size="mini"
                      :editable="false"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </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>
                <li>
                  <el-button type="text" @click="lookTrack">
                    查看轨迹
                  </el-button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

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

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

export default {
    data () {
        return {
            tableData: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
  data() {
    return {
      tableData: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      detailFlag: false,
      loading: true,
      trackTime: [],
      detailObj: {},
    };
  },
  created() {},
  mounted() {
    this.getList();
  },
  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: "人员位置",
            },
            detailFlag: false,
            loading: true,
            trackTime: [],
            detailObj: {}
            peoplePng,
            0.5,
            "peoplelayer",
            "peopleAddlayer"
          );
        }
      });
    },
    created () {

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

    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());

    },
    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()
        },
      getTrack({
        workerId: this.detailObj.id,
        type: 1,
        startTime: start,
        endTime: end,
      }).then((res) => {
        var result = res.data.data;
        if (result.length > 1) {
          let arr = [];

        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');
                }
          result.forEach((item) => {
            arr.push([Number(item.longitude), Number(item.latitude)]);
          });

            })
        },

        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 = []
          this.$refs.modalForm.addLines(arr);
        }
      });
    },
    destroyed () {

        window.ol2d.removeLayer(this.peopleAddlayer)

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

    goOut() {
      this.detailFlag = !this.detailFlag;
      this.$refs.modalForm.clearLine();
      this.trackTime = [];
    },
  },
  destroyed() {
    window.ol2d.removeLayer(this.peopleAddlayer);
  },
};
</script>

<style lang="scss" scoped>
.card-body {
    display: flex;
    & > div:first-child {
        flex: 8;
  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);
      }
    }

    & > div:last-child {
    .track-box {
      & > div {
        position: relative;

        flex: 3;
        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 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

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

        .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;
                }
            }
        & > 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;
        }
      }
    }
  }
}

.el-range-editor--mini .el-range-input {
  background-color: #004ca7 !important;
  color: #fff !important;
}
.data-table {
  border: 1px solid transparent !important;
  box-shadow: 3px 3px 15px -2px rgb(0, 0, 0) !important;
}
</style>