枪支定位

shuishen

2021-12-01 bc6677eb827ad5d2413a21a893d1b8f60d2efd3a

枪支定位

 src/views/map/gunGps.vue

@@ -2,383 +2,414 @@
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-11-17 09:21:20
 * @Last Modified time: 2021-12-01 10:52:09
 * 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>
                <li>
                  <div>枪支类型：</div>
                  <div>{{ detailObj.gunMode }}</div>
                </li>
                                详细资料及轨迹查询
                            </div>
                            <ul>
                                <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 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>
                  <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, 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() {},
  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: "枪支位置",
    data () {
        return {
            tableData: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            gunPng,
            0.8,
            "gunlayer",
            "gunAddlayer"
          );
        }
      });
            detailFlag: false,
            loading: true,
            trackTime: [],
            detailObj: {},
        };
    },

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

    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) {
            var timestamp = Date.parse(new Date());

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

          result.forEach((item) => {
            arr.push([Number(item.longitude), Number(item.latitude)]);
          });
            const start =
                (serverDate.getFullYear() - 5) +
                "-" +
                this.disposeTime(serverDate.getMonth() + 1) +
                "-" +
                this.disposeTime(serverDate.getDate()) +
                " " +
                this.disposeTime(serverDate.getHours()) +
                ":" +
                this.disposeTime(serverDate.getMinutes()) +
                ":" +
                this.disposeTime(serverDate.getSeconds());

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

            const end =
                serverDate.getFullYear() +
                "-" +
                this.disposeTime(serverDate.getMonth() + 1) +
                "-" +
                this.disposeTime(serverDate.getDate()) +
                " " +
                this.disposeTime(serverDate.getHours()) +
                ":" +
                this.disposeTime(serverDate.getMinutes()) +
                ":" +
                this.disposeTime(serverDate.getSeconds());

            getTrack({
                workerId: val.id,
                type: 3,
                startTime: start,
                endTime: end,
            }).then((result) => {
                var res = result.data.data;
                if (JSON.stringify(res) != "{}") {
                    this.$refs.modalForm.addEntitys(
                        {
                            LGTD: Number(res[0].longitude),
                            LTTD: Number(res[0].latitude),
                            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 = [];
        },
    },
    // 处理时间补零操作
    disposeTime(s) {
      return s < 10 ? "0" + s : s;
    destroyed () {
        window.ol2d.removeLayer(this.peopleAddlayer);
    },

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

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

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

      & > .el-table {
        height: calc(100% - 34px);
      }
    display: flex;
    & > div:first-child {
        flex: 8;
    }

    .track-box {
      & > div {
    & > div:last-child {
        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;

        flex: 3;
        & > div {
          text-align: center;
        }
        & > div:first-child {
          flex: 2;
        }
        & > div:last-child {
          flex: 6;
          & > div {
            width: 100% !important;
          }
        }
      }
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

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