地图相关修改

shuishen

2021-11-25 1eadecd1867daedc68598cdcc5d179f281c10153

地图相关修改

 src/api/map/car.js

@@ -23,3 +23,27 @@
    params: param
  })
}

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

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

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

 src/api/map/people.js

@@ -38,4 +38,20 @@
        method: 'get',
        params: param
    })
}
}

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

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

 src/views/commandQuery/taskDistribution.vue

@@ -1,93 +1,78 @@
/*
 * @Author: Morpheus
 * @Date: 2021-07-07 17:30:05
 * @Last Modified by: liu
 * @Last Modified time: 2021-09-15 16:53:45
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-11-25 14:54:40
 * menu-name 监管信息
 */
<template>
  <basic-container class="fontcolorfff">
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      v-model="form"
      ref="crud"
      @row-update="rowUpdates"
      @row-save="rowSave"
      @row-del="rowDel"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot-scope="{ type, size, row }" slot="menu">
        <el-button
          icon="el-icon-location-outline"
          :size="size"
          :type="type"
          @click.stop="seeLocation(row)"
          >位置查看</el-button
        >
        <el-button
          icon="el-icon-place"
          :size="size"
          :type="type"
          @click.stop="seeTrack(row)"
          >轨迹查看
        </el-button>
      </template>
    </avue-crud>
    <basic-container>
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   :page.sync="page"
                   :permission="permissionList"
                   v-model="form"
                   ref="crud"
                   @row-update="rowUpdates"
                   @row-save="rowSave"
                   @row-del="rowDel"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @selection-change="selectionChange"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @refresh-change="refreshChange"
                   @on-load="onLoad">
            <template slot-scope="{ type, size, row }"
                      slot="menu">
                <el-button icon="el-icon-location-outline"
                           :size="size"
                           :type="type"
                           @click.stop="seeLocation(row)">位置查看</el-button>
                <el-button icon="el-icon-place"
                           :size="size"
                           :type="type"
                           @click.stop="seeTrack(row)">轨迹查看
                </el-button>
            </template>
        </avue-crud>

    <el-dialog
      class="see-location"
      title="位置查看"
      :visible.sync="seeLocationFlag"
      :modal-append-to-body="false"
      width="width"
    >
      <!-- <div>
        基本信息
        <div><span>姓名：</span><span>123</span></div>
        <div><span>电话：</span><span>123</span></div>
        <div><span>所属公司：</span><span>123</span></div>
      </div> -->
      <Map ref="locationForm" />
    </el-dialog>
        <el-dialog class="see-location"
                   title="位置查看"
                   :visible.sync="seeLocationFlag"
                   :modal-append-to-body="false"
                   width="width">
            <Map v-if="seeLocationFlag" ref="locationForm" />
        </el-dialog>

    <el-dialog
      class="see-track"
      title="轨迹查看"
      :visible.sync="seeTrackFlag"
      :modal-append-to-body="false"
      width="width"
    >
      <div class="search">
        选择时间：<el-date-picker
          v-model="trackTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          size="mini"
          :editable="false"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button type="text" @click="lookTrack"> 查看轨迹 </el-button>
      </div>
        <el-dialog class="see-track"
                   title="轨迹查看"
                   :visible.sync="seeTrackFlag"
                   :modal-append-to-body="false"
                   width="width">

      <Map ref="tarckForm" />
    </el-dialog>
  </basic-container>
            <div class="search">
                选择时间：<el-date-picker v-model="trackTime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                size="mini"
                                :editable="false"
                                end-placeholder="结束日期">
                </el-date-picker>
                <el-button type="text"
                           @click="lookTrack">
                    查看轨迹
                </el-button>
            </div>

            <Map v-if="seeTrackFlag" ref="tarckForm" />
        </el-dialog>
    </basic-container>
</template>

<script>
import { getListSecurity } from "@/api/system/user";
// import {
//   getList,
//   getDetail,
@@ -99,409 +84,432 @@
// import { datasing } from "./dataqualificationExamination";
// import { getList } from "@/api/qualificationExamination/qualificationExamination";
import { getLisperetaskDistribution } from "@/api/commandQuery/commandQuery";
import {
  getDirectiveLiveLocationVoList,
  getDirectiveLocusInfoList,
} from "@/api/map/people";
import { getDirectiveLiveLocationVoList, getDirectiveLocusInfoList, getNewPeople, getNewTark } from "@/api/map/people";

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

export default {
  data() {
    return {
      seeLocationFlag: false,
      seeTrackFlag: false,
      trackTime: [],
      rowData: null,
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
    data () {
        return {
            seeLocationFlag: false,
            seeTrackFlag: false,
            trackTime: [],
            rowData: null,
            form: {},
            query: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },

      selectionList: [],
            selectionList: [],

      option: {
        // 操作栏多余按钮去除
        delBtn: false,
        editBtn: false,
        addBtn: false,
        selection: true,
        menu: true,
            option: {
                // 操作栏多余按钮去除
                delBtn: false,
                editBtn: false,
                addBtn: false,
                selection: true,
                menu: true,

        searchShowBtn: false,
                searchShowBtn: false,

        align: "center",
        height: "auto",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        index: true,
        viewBtn: true,
        dialogClickModal: false,
                align: "center",
                height: "auto",
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                index: true,
                viewBtn: true,
                dialogClickModal: false,

        column: [
          //   {
          //     label: "类型",
          //     prop: "type",
          //     overHidden: true,
          //   },
          // {
          //   label: "deptId",
          //   prop: "deptId",
          //   overHidden: true,
          //   // labelWidth: 120,
          //   // searchLabelWidth: 120,
          //   searchSpan: 4,
          //   dicUrl:
          //     "/api/blade-system/dept/security_lazy-tree?parentId=1413470343230877697",
          //   props: {
          //     label: "title",
          //     value: "id",
          //   },
          //   // hide: true,
          //   search: true,
          //   // overHidden: true,
          //   type: "select",
          //   // rules: [
          //   //   {
          //   //     required: true,
          //   //     message: "请输入保安公司",
          //   //     trigger: "blur",
          //   //   },
          //   // ],
          // },
          {
            label: "发送指令人",
            prop: "sendName",
            search: true,
            searchLabelWidth: 90,
            searchSpan: 4,
            //     hide: true,
            //     editDisplay: false,
            //     addDisplay: false
          },
                column: [
                    //   {
                    //     label: "类型",
                    //     prop: "type",
                    //     overHidden: true,
                    //   },
                    // {
                    //   label: "deptId",
                    //   prop: "deptId",
                    //   overHidden: true,
                    //   // labelWidth: 120,
                    //   // searchLabelWidth: 120,
                    //   searchSpan: 4,
                    //   dicUrl:
                    //     "/api/blade-system/dept/security_lazy-tree?parentId=1413470343230877697",
                    //   props: {
                    //     label: "title",
                    //     value: "id",
                    //   },
                    //   // hide: true,
                    //   search: true,
                    //   // overHidden: true,
                    //   type: "select",
                    //   // rules: [
                    //   //   {
                    //   //     required: true,
                    //   //     message: "请输入保安公司",
                    //   //     trigger: "blur",
                    //   //   },
                    //   // ],
                    // },
                    {
                        label: "发送指令人",
                        prop: "sendName",
                        search: true,
                        searchLabelWidth: 90,
                        searchSpan: 4,
                        //     hide: true,
                        //     editDisplay: false,
                        //     addDisplay: false
                    },

          {
            label: "接收指令人",
            prop: "receiveName",
            // search: true,
            // searchSpan: 4,
            searchLabelWidth: 90,
          },
          {
            label: "发送指令时间",
            prop: "sendTime",
            type: "date",
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
          },
          {
            label: "指令内容",
            prop: "content",
            search: true,
            searchSpan: 4,
          },
          {
            label: "图片",
            prop: "url",
            dataType: "string",
            type: "img",
          },
        ],
      },
                    {
                        label: "接收指令人",
                        prop: "receiveName",
                        // search: true,
                        // searchSpan: 4,
                        searchLabelWidth: 90,
                    },
                    {
                        label: "发送指令时间",
                        prop: "sendTime",
                        type: "date",
                        format: "yyyy-MM-dd hh:mm:ss",
                        valueFormat: "yyyy-MM-dd hh:mm:ss",
                    },
                    {
                        label: "指令内容",
                        prop: "content",
                        search: true,
                        searchSpan: 4,
                    },
                    {
                        label: "图片",
                        prop: "url",
                        dataType: "string",
                        type: "img",
                    },
                ],
            },

      data: [
        // {
        //   deptid: "江西众泰保安公司",
        //   punishtype: 2,
        //   punishreason: "非法施工",
        //   punishresult: "没收全部非法所得财产，并罚款3W元",
        //   punishtime: "2021-01-01",
        //   punisnum: 110110110120,
        // },
      ],
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.post_add, false),
        viewBtn: this.vaildData(this.permission.post_view, false),
        delBtn: this.vaildData(this.permission.post_delete, false),
        editBtn: this.vaildData(this.permission.post_edit, false),
      };
            data: [
                // {
                //   deptid: "江西众泰保安公司",
                //   punishtype: 2,
                //   punishreason: "非法施工",
                //   punishresult: "没收全部非法所得财产，并罚款3W元",
                //   punishtime: "2021-01-01",
                //   punisnum: 110110110120,
                // },
            ],
        };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  mounted() {},
  methods: {
    rowSave(row, done, loading) {
      adddata(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
    computed: {
        ...mapGetters(["permission"]),
        permissionList () {
            return {
                addBtn: this.vaildData(this.permission.post_add, false),
                viewBtn: this.vaildData(this.permission.post_view, false),
                delBtn: this.vaildData(this.permission.post_delete, false),
                editBtn: this.vaildData(this.permission.post_edit, false),
            };
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowUpdates(row, index, done, loading) {
      // console.log(42342);
      update(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        ids () {
            let ids = [];
            this.selectionList.forEach((ele) => {
                ids.push(ele.id);
            });
            return ids.join(",");
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    // beforeOpen(done, type) {
    //   if (["edit", "view"].includes(type)) {
    //     getDetail(this.form.id).then((res) => {
    //       this.form = res.data.data;
    //     });
    //   }
    //   done();
    // },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      // this.loading = false;
      this.loading = true;
      getLisperetaskDistribution(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        // for (var k in this.data) {
        //   this.data[k]["url"] = "https://avuejs.com/images/logo-bg.jpg";
        // }
        console.log(this.data, "getLisperetaskDistribution");
        this.loading = false;

        //获取人员信息；
        // for (var k in this.data) {
        //   console.log(this.data[k].receiveDirectiveIds);
        // }
        //     var params = {
        //   id:
        // };
        // getListSecurity(1, 10, params).then((res) => {
        //   console.log(res.data.data, 5555555555);
        // });
        // this.selectionClear();
      });
    },
    // onLoad(page, params = {}) {
    //   // this.loading = false;
    //   this.loading = true;
    //   //   getListJSON().then((res) => {
    //   //   axios
    //   //     .get(
    //   //       "../../api/qualificationExamination/signQualificationExamination.json"
    //   //     )
    //   //     .then((res) => {
    //   // page.currentPage,
    //   // page.pageSize,
    //   // Object.assign(params, this.query)
    //   if (datasing) {
    //     var res = datasing;
    //     console.log(res, "signQualificationExamination");
    //     const data = res.data;
    //     // this.page.total = data.total;
    //     var d = data.records;
    //     for (var k in d) {
    //       d[k].examination_mx = "正常";
    //       d[k].examination_type = "正常";
    //       d[k]["carid"] = "370111198807051124";
    //       d[k]["certificate"] = "拥有";
    //       d[k]["reviewTime"] = "2021-02-21";
    //       d[k]["results"] = "通过";
    //       d[k]["onjob"] = "是";
    //     }
    //     this.data = d;
    //     this.loading = false;
    //   }
    //   // this.selectionClear();
    //   // });
    // },

    // 行单击
    handleRowClick(row) {
      // delete (row["name"]);
      var obj = row;
      obj["name"] = "保安公司详细资料";
      this.$router.push({
        path: `/securityCompany/index`,
        query: obj,
      });
    },

    seeLocation(row) {
      this.seeLocationFlag = true;

      getDirectiveLiveLocationVoList({
        type: 1,
        userIds: row.receiveDirectiveIds,
      }).then((result) => {
        var res = result.data.data;
        if (JSON.stringify(res) != "[]") {
          res.forEach((data) => {
            this.$refs.locationForm.addEntitys(
              {
                LGTD: data.longitude,
                LTTD: data.latitude,
                name: "人员位置",
              },
              peoplePng,
              0.5,
              "peoplelayer",
              "peopleAddlayer"
    methods: {
        rowSave (row, done, loading) {
            adddata(row).then(
                () => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done();
                },
                (error) => {
                    window.console.log(error);
                    loading();
                }
            );
          });
        }
      });
    },
        },
        rowUpdates (row, index, done, loading) {
            // console.log(42342);
            update(row).then(
                () => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done();
                },
                (error) => {
                    window.console.log(error);
                    loading();
                }
            );
        },
        rowDel (row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                });
        },
        // beforeOpen(done, type) {
        //   if (["edit", "view"].includes(type)) {
        //     getDetail(this.form.id).then((res) => {
        //       this.form = res.data.data;
        //     });
        //   }
        //   done();
        // },
        searchReset () {
            this.query = {};
            this.onLoad(this.page);
        },
        searchChange (params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        selectionChange (list) {
            this.selectionList = list;
        },
        selectionClear () {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        currentChange (currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange (pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange () {
            this.onLoad(this.page, this.query);
        },
        onLoad (page, params = {}) {
            // this.loading = false;
            this.loading = true;
            getLisperetaskDistribution(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.query)
            ).then((res) => {
                const data = res.data.data;
                this.page.total = data.total;
                this.data = data.records;
                // for (var k in this.data) {
                //   this.data[k]["url"] = "https://avuejs.com/images/logo-bg.jpg";
                // }
                console.log(this.data, "getLisperetaskDistribution");
                this.loading = false;
                // this.selectionClear();
            });
        },
        // onLoad(page, params = {}) {
        //   // this.loading = false;
        //   this.loading = true;
        //   //   getListJSON().then((res) => {
        //   //   axios
        //   //     .get(
        //   //       "../../api/qualificationExamination/signQualificationExamination.json"
        //   //     )
        //   //     .then((res) => {
        //   // page.currentPage,
        //   // page.pageSize,
        //   // Object.assign(params, this.query)
        //   if (datasing) {
        //     var res = datasing;
        //     console.log(res, "signQualificationExamination");
        //     const data = res.data;
        //     // this.page.total = data.total;
        //     var d = data.records;
        //     for (var k in d) {
        //       d[k].examination_mx = "正常";
        //       d[k].examination_type = "正常";
        //       d[k]["carid"] = "370111198807051124";
        //       d[k]["certificate"] = "拥有";
        //       d[k]["reviewTime"] = "2021-02-21";
        //       d[k]["results"] = "通过";
        //       d[k]["onjob"] = "是";
        //     }
        //     this.data = d;
        //     this.loading = false;
        //   }
        //   // this.selectionClear();
        //   // });
        // },

    seeTrack(row) {
      this.trackTime = [];
      this.rowData = "";
      this.rowData = row;
      this.seeTrackFlag = true;
    },
        // 行单击
        handleRowClick (row) {
            // delete (row["name"]);
            var obj = row;
            obj["name"] = "保安公司详细资料";
            this.$router.push({
                path: `/securityCompany/index`,
                query: obj,
            });
        },

    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());
        seeLocation (row) {

      getDirectiveLocusInfoList({
        userIds: this.rowData.receiveDirectiveIds,
        type: 1,
        startTime: start,
        endTime: end,
      }).then((res) => {
        var result = res.data.data;
        if (JSON.stringify(res) != "[]") {
          result.forEach((item) => {
            if (item.length > 1) {
              let arr = [];
            this.seeLocationFlag = true

              item.forEach((data) => {
                arr.push([Number(data.longitude), Number(data.latitude)]);
              });
            getDirectiveLiveLocationVoList({ type: 1, userIds: row.receiveDirectiveIds }).then((result) => {
                getNewPeople().then(res => {

              this.$refs.tarckForm.addLines(arr);
                    if (JSON.stringify(res.data) != "{}") {
                        var arr = res.data.sort(function (a, b) {
                            return a['date'] < b['date'] ? 1 : -1
                        })

                        this.$refs.locationForm.addEntitys(
                            {
                                LGTD: arr[0].gis_jd,
                                LTTD: arr[0].gis_wd,
                                name: "人员位置",
                            },
                            peoplePng,
                            0.5,
                            "peoplelayer",
                            "peopleAddlayer"
                        );
                    }
                })

                // var res = result.data.data;
                // if (JSON.stringify(res) != "[]") {
                //     res.forEach((data)=>{
                //         this.$refs.locationForm.addEntitys(
                //             {
                //                 LGTD: data.longitude,
                //                 LTTD: data.latitude,
                //                 name: "人员位置",
                //             },
                //             peoplePng,
                //             0.5,
                //             "peoplelayer",
                //             "peopleAddlayer"
                //         );
                //     })
                // }
            });
        },

        seeTrack (row) {
            this.trackTime = [];
            this.rowData = '';
            this.rowData = row;
            this.seeTrackFlag = true
        },

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

    // 处理时间补零操作
    disposeTime(s) {
      return s < 10 ? "0" + s : s;
            getDirectiveLocusInfoList({
                userIds: this.rowData.receiveDirectiveIds,
                type: 1,
                startTime: start,
                endTime: end,
            }).then((res) => {
                getNewTark().then(res => {

                    if (JSON.stringify(res.data.track) != "{}") {

                        if (res.data.track.length > 1) {
                            let arr = [];

                            res.data.track.forEach((item) => {
                                arr.push([Number(item.gis_jd), Number(item.gis_wd)]);
                            });

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

                    }

                })

                // var result = res.data.data;
                // if (JSON.stringify(res) != "[]") {
                //     result.forEach((item) => {
                //         if (item.length > 1) {
                //             let arr = [];

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

                //             this.$refs.tarckForm.addLines(arr);
                //         }
                //     })
                // }
            });
        },

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


 src/views/map/carGps copy.vue

New file
@@ -0,0 +1,422 @@
/*
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-11-17 09:20:19
 * menu-name 押运人员定位
 */
<template>
    <el-row class="morpheus-map-box">
        <el-col :span="24">
            <el-card>
                <div class="card-body">
                    <div>
                        <Map @childParameter="childParameter"
                             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 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-dialog title=""
                       :modal='false'
                       :visible.sync="dialogVisible"
                       :before-close="dialogBeforeClose"
                       :close-on-click-modal='false'
                       class="car-video-box">
                <iframe src="/carVideo/parent.html"
                        ref="videoIframe"
                        frameborder="0"></iframe>
            </el-dialog>
        </el-col>
    </el-row>
</template>

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

import carPng from "@/assets/img/car.png";

export default {
    data () {
        return {
            tableData: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            detailFlag: false,
            loading: true,
            trackTime: [],
            detailObj: {},
            dialogVisible: false,
            map: null,
        };
    },
    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: "枪支位置",
                        },
                        carPng,
                        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 = [];
        },

        childParameter (data) {
            this.map = data;
            this.$nextTick(function () {
                data.on('singleclick', this.realVideo)
            })

        },

        realVideo (e) {
            var that = this;
            // 在点击时获取像素区域
            var pixel = this.map.getEventPixel(e.originalEvent)

            this.map.forEachFeatureAtPixel(pixel, function (feature) {

                const cont = feature.values_.attributes

                if (cont != undefined) {
                    that.dialogVisible = true

                  setTimeout(() =>{
                    that.$refs.videoIframe.contentWindow.startVideo()
                  },3000);
                }
            })

        },

        dialogBeforeClose() {
          this.dialogVisible = false

          this.$refs.videoIframe.contentWindow.closeVideo()

        }

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

    & > 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/carGps.vue

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-09-03 16:20:17
 * @Last Modified time: 2021-11-25 15:24:53
 * menu-name 押运人员定位
 */
<template>
@@ -122,24 +122,38 @@
                </div>
            </el-card>

            <el-dialog title=""
            <el-dialog title="视频监控"
                       :modal='false'
                       :visible.sync="dialogVisible"
                       :before-close="dialogBeforeClose"
                       :close-on-click-modal='false'
                       @closed="videoClose"
                       class="car-video-box">
                <iframe src="/carVideo/parent.html"
                        ref="videoIframe"
                        frameborder="0"></iframe>
                <div class="container"
                     v-loading="videoLoading">
                    <video id="videoElementOne"
                           controls="controls"></video>
                    <video id="videoElementTwo"
                           controls="controls"></video>
                    <video id="videoElementThree"
                           controls="controls"></video>
                    <video id="videoElementFour"
                           controls="controls"></video>
                </div>
            </el-dialog>
        </el-col>
    </el-row>
</template>

<script>
import { getCarList, getPosition, getTrack } from "@/api/map/car";
import { getCarList, getPosition, getNewPosition, getTrack, getVideoSrc, getNewCarTark } from "@/api/map/car";
import axios from 'axios';

import carPng from "@/assets/img/car.png";

import flvjs from 'flv.js/dist/flv.min.js';

const d3 = require('d3-dsv');

export default {
    data () {
@@ -156,16 +170,13 @@
            detailObj: {},
            dialogVisible: false,
            map: null,
            videoLoading: true
        };
    },
    created () {
        this.getList();
    },
    mounted () {





    },
    methods: {
@@ -192,14 +203,17 @@
        },

        positionClick (val) {
            getPosition({ type: 2, workerId: val.id }).then((result) => {
            // console.log(val)

            getNewPosition({ imei: "861636056082414" }).then((result) => {
                var res = result.data.data;

                if (JSON.stringify(res) != "{}") {
                    this.$refs.modalForm.addEntitys(
                        {
                            LGTD: 115.86,
                            LTTD: 28.71,
                            name: "枪支位置",
                            LGTD: res.x,
                            LTTD: res.y,
                            name: "车辆位置",
                        },
                        carPng,
                        0.8,
@@ -239,6 +253,12 @@
                this.disposeTime(startTime.getMinutes()) +
                ":" +
                this.disposeTime(startTime.getSeconds());

            const startTWO =
                startTime.getFullYear() + '' +
                this.disposeTime(startTime.getMonth() + 1) + '' +
                this.disposeTime(startTime.getDate());

            if (this.trackTime.length == 1) {
                this.$message({ message: "请选择结束时间", duration: 2000 });
                return;
@@ -257,22 +277,48 @@
                ":" +
                this.disposeTime(endTime.getSeconds());

            const endTWO =
                endTime.getFullYear() + '' +
                this.disposeTime(endTime.getMonth() + 1) + '' +
                this.disposeTime(endTime.getDate());

            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)]);
                    });
                getNewCarTark({
                    beginTime: startTWO,
                    endTime: endTWO,
                    rectify: 0,
                    callbackId: 123
                }).then(res => {
                    axios.get('http://s16s652780.51mypc.cn/car/' + res.data.data).then(result => {
                        var ret = d3.csvParse(result.data)

                    this.$refs.modalForm.addLines(arr);
                }
                        let arr = [];
                        ret.forEach((item, index) => {
                            if (index < ret.length - 1) {
                                arr.push([Number(item.x), Number(item.y)]);
                            }

                        })

                        this.$refs.modalForm.addLines(arr);
                    })
                })
                // 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);
                // }
            });
        },
        // 处理时间补零操作
@@ -305,18 +351,101 @@

                if (cont != undefined) {
                    that.dialogVisible = true
                    var oneflag = false, twoflag = false, threefalse = false, fourfalse = false;
                    getVideoSrc({ camera: 0, action: 'start' }).then(res => {
                        oneflag = true;
                        if (twoflag == true && threefalse == true && fourfalse == true) {
                            that.videoLoading = false;
                        }
                        if (flvjs.isSupported()) {
                            var videoElement = document.getElementById('videoElementOne')
                            var flvPlayer = flvjs.createPlayer({
                                // isLive: true,
                                // hasAudio: false,
                                type: 'flv',
                                url: res.data.data.live_url
                            })
                            flvPlayer.attachMediaElement(videoElement)
                            flvPlayer.load()
                            flvPlayer.play()
                        }
                    })

                    that.$refs.videoIframe.contentWindow.startVideo()
                    getVideoSrc({ camera: 1, action: 'start' }).then(res => {
                        twoflag = true;
                        if (oneflag == true && threefalse == true && fourfalse == true) {
                            that.videoLoading = false;
                        }
                        if (flvjs.isSupported()) {
                            var videoElement = document.getElementById('videoElementTwo')
                            var flvPlayer = flvjs.createPlayer({
                                // isLive: true,
                                // hasAudio: false,
                                type: 'flv',
                                url: res.data.data.live_url
                            })
                            flvPlayer.attachMediaElement(videoElement)
                            flvPlayer.load()
                            flvPlayer.play()
                        }
                    })

                    getVideoSrc({ camera: 2, action: 'start' }).then(res => {
                        threefalse = true;
                        if (oneflag == true && twoflag == true && fourfalse == true) {
                            that.videoLoading = false;
                        }
                        if (flvjs.isSupported()) {
                            var videoElement = document.getElementById('videoElementThree')
                            var flvPlayer = flvjs.createPlayer({
                                // isLive: true,
                                // hasAudio: false,
                                type: 'flv',
                                url: res.data.data.live_url
                            })
                            flvPlayer.attachMediaElement(videoElement)
                            flvPlayer.load()
                            flvPlayer.play()
                        }
                    })

                    getVideoSrc({ camera: 4, action: 'start' }).then(res => {
                        fourfalse = true;
                        if (oneflag == true && twoflag == true && threefalse == true) {
                            that.videoLoading = false;
                        }
                        if (flvjs.isSupported()) {
                            var videoElement = document.getElementById('videoElementFour')
                            var flvPlayer = flvjs.createPlayer({
                                // isLive: true,
                                // hasAudio: false,
                                type: 'flv',
                                url: res.data.data.live_url
                            })
                            flvPlayer.attachMediaElement(videoElement)
                            flvPlayer.load()
                            flvPlayer.play()
                        }
                    })

                }
            })

        },

        dialogBeforeClose() {
          this.dialogVisible = false
        videoClose () {
            this.dialogVisible = false;
            getVideoSrc({ camera: 0, action: 'stop' })

          this.$refs.videoIframe.contentWindow.closeVideo()
            getVideoSrc({ camera: 1, action: 'stop' })

            getVideoSrc({ camera: 2, action: 'stop' })

            getVideoSrc({ camera: 4, action: 'stop' })
        },

        dialogBeforeClose () {
            this.dialogVisible = false
        }

    },
@@ -417,4 +546,48 @@
        }
    }
}

.car-video-box {
    .container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        video {
            flex: 1;
            width: 50%;
            height: 50%;
            object-fit: fill;
        }
        // #videoElementOne {
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     width: 50%;
        //     height: 50%;
        // }
        // #videoElementTwo {
        //     position: absolute;
        //     top: 0;
        //     right: 0;
        //     width: 50%;
        //     height: 50%;
        // }
        // #videoElementThree {
        //     position: absolute;
        //     bottom: 0;
        //     left: 0;
        //     width: 50%;
        //     height: 50%;
        // }
        // #videoElementFour {
        //     position: absolute;
        //     bottom: 0;
        //     right: 0;
        //     width: 50%;
        //     height: 50%;
        // }
    }
}
</style>

 src/views/map/gunGps.vue

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-07-23 11:20:51
 * @Last Modified time: 2021-11-17 09:21:20
 * menu-name 押运人员定位
 */
<template>

 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-23 14:54:47
 * @Last Modified time: 2021-11-25 13:48:23
 * menu-name 押运人员定位
 */
<template>
@@ -131,10 +131,9 @@
</template>

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

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

export default {
    data () {
        return {
@@ -150,7 +149,10 @@
            detailObj: {},
        };
    },
    created () { },
    created () {


    },
    mounted () {
        this.getList();
    },
@@ -187,20 +189,44 @@

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

                getNewPeople().then(res => {

                    if (JSON.stringify(res.data) != "{}") {
                        var arr = res.data.sort(function (a, b) {
                            return a['date'] < b['date'] ? 1 : -1
                        })

                        this.$refs.modalForm.addEntitys(
                            {
                                LGTD: arr[0].gis_jd,
                                LTTD: arr[0].gis_wd,
                                name: "人员位置",
                            },
                            peoplePng,
                            0.5,
                            "peoplelayer",
                            "peopleAddlayer"
                        );
                    }
                })


                // 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"
                //     );
                // }

            });
        },

@@ -256,17 +282,36 @@
                type: 1,
                startTime: start,
                endTime: end,
            }).then((res) => {
                var result = res.data.data;
                if (result.length > 1) {
                    let arr = [];
            }).then((result) => {

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

                    this.$refs.modalForm.addLines(arr);
                }
                    if (JSON.stringify(res.data.track) != "{}") {

                        if (res.data.track.length > 1) {
                            let arr = [];

                            res.data.track.forEach((item) => {
                                arr.push([Number(item.gis_jd), Number(item.gis_wd)]);
                            });

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

                    }

                })

                // 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);
                // }
            });
        },
        // 处理时间补零操作