Merge remote-tracking branch 'origin/master'

zengh

2021-11-25 0a87e789f7f1b2a41673b046c1bc238f86083d70

Merge remote-tracking branch 'origin/master'

 package-lock.json

@@ -5391,6 +5391,31 @@
      "resolved": "https://registry.nlark.com/d3-array/download/d3-array-1.2.4.tgz",
      "integrity": "sha1-Y1zk1e6nWfb2BYY9vPww7cc39x8="
    },
    "d3-dsv": {
      "version": "3.0.1",
      "resolved": "https://registry.nlark.com/d3-dsv/download/d3-dsv-3.0.1.tgz",
      "integrity": "sha1-xjr5ePTWoNCEpSpnOSK+IWB4m3M=",
      "requires": {
        "commander": "7",
        "iconv-lite": "0.6",
        "rw": "1"
      },
      "dependencies": {
        "commander": {
          "version": "7.2.0",
          "resolved": "https://registry.npmmirror.com/commander/download/commander-7.2.0.tgz?cache=0&sync_timestamp=1634886357672&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcommander%2Fdownload%2Fcommander-7.2.0.tgz",
          "integrity": "sha1-o2y1fQtQHOEI5NIFWaFQo5HZerc="
        },
        "iconv-lite": {
          "version": "0.6.3",
          "resolved": "https://registry.nlark.com/iconv-lite/download/iconv-lite-0.6.3.tgz",
          "integrity": "sha1-pS+AvzjaGVLrXGgXkHGYcaGnJQE=",
          "requires": {
            "safer-buffer": ">= 2.1.2 < 3.0.0"
          }
        }
      }
    },
    "d3-geo": {
      "version": "1.7.1",
      "resolved": "https://registry.nlark.com/d3-geo/download/d3-geo-1.7.1.tgz",
@@ -6133,6 +6158,11 @@
        "is-date-object": "^1.0.1",
        "is-symbol": "^1.0.2"
      }
    },
    "es6-promise": {
      "version": "4.2.8",
      "resolved": "https://registry.npm.taobao.org/es6-promise/download/es6-promise-4.2.8.tgz",
      "integrity": "sha1-TrIVlMlyvEBVPSduUQU5FD21Pgo="
    },
    "escalade": {
      "version": "3.1.1",
@@ -6933,6 +6963,15 @@
      "requires": {
        "inherits": "^2.0.3",
        "readable-stream": "^2.3.6"
      }
    },
    "flv.js": {
      "version": "1.6.2",
      "resolved": "https://registry.nlark.com/flv.js/download/flv.js-1.6.2.tgz",
      "integrity": "sha1-+jNA/j9+4B05d/eHau5muENuWSI=",
      "requires": {
        "es6-promise": "^4.2.8",
        "webworkify-webpack": "^2.1.5"
      }
    },
    "follow-redirects": {
@@ -14439,6 +14478,11 @@
      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
      "dev": true
    },
    "webworkify-webpack": {
      "version": "2.1.5",
      "resolved": "https://registry.npm.taobao.org/webworkify-webpack/download/webworkify-webpack-2.1.5.tgz",
      "integrity": "sha1-v0M2YkwGJsvoXPH/3hV/eqkLHRw="
    },
    "which": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",

 package.json

@@ -17,9 +17,11 @@
    "babel-polyfill": "^6.26.0",
    "classlist-polyfill": "^1.2.0",
    "crypto-js": "^4.0.0",
    "d3-dsv": "^3.0.1",
    "echarts": "^5.1.2",
    "element-ui": "^2.15.1",
    "file-saver": "^2.0.5",
    "flv.js": "^1.6.2",
    "js-base64": "^2.5.1",
    "js-cookie": "^2.2.0",
    "js-md5": "^0.7.3",

 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

@@ -39,10 +39,19 @@
        params: param
    })
}
export const newPeople = (param) => {

export const getNewPeople = (param) => {
  return request({
      url: '/Escort/getgis.php?acc=7731',
      method: 'get',
      params: param
    url: '/api/car/Peo',
    method: 'get',
    params: param
  })
}

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

 src/router/axios.js

@@ -17,7 +17,7 @@
import 'nprogress/nprogress.css';

//默认超时时间
axios.defaults.timeout = 10000;
axios.defaults.timeout = 60000;
//返回其他状态码
axios.defaults.validateStatus = function (status) {
  return status >= 200 && status <= 500;

 src/views/commandQuery/taskDistribution.vue

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-07-07 17:30:05
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-11-17 09:21:36
 * @Last Modified time: 2021-11-25 14:54:40
 * menu-name 监管信息
 */
<template>
@@ -43,7 +43,7 @@
                   :visible.sync="seeLocationFlag"
                   :modal-append-to-body="false"
                   width="width">
            <Map ref="locationForm" />
            <Map v-if="seeLocationFlag" ref="locationForm" />
        </el-dialog>

        <el-dialog class="see-track"
@@ -67,7 +67,7 @@
                </el-button>
            </div>

            <Map ref="tarckForm" />
            <Map v-if="seeTrackFlag" ref="tarckForm" />
        </el-dialog>
    </basic-container>
</template>
@@ -84,7 +84,8 @@
// 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 {
@@ -380,13 +381,17 @@
            this.seeLocationFlag = true

            getDirectiveLiveLocationVoList({ type: 1, userIds: row.receiveDirectiveIds }).then((result) => {
                var res = result.data.data;
                if (JSON.stringify(res) != "[]") {
                    res.forEach((data)=>{
                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.locationForm.addEntitys(
                            {
                                LGTD: data.longitude,
                                LTTD: data.latitude,
                                LGTD: arr[0].gis_jd,
                                LTTD: arr[0].gis_wd,
                                name: "人员位置",
                            },
                            peoplePng,
@@ -394,9 +399,25 @@
                            "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"
                //         );
                //     })
                // }
            });
        },

@@ -449,20 +470,38 @@
                startTime: start,
                endTime: end,
            }).then((res) => {
                var result = res.data.data;
                if (JSON.stringify(res) != "[]") {
                    result.forEach((item) => {
                        if (item.length > 1) {
                getNewTark().then(res => {

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

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

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


 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-11-17 09:20:19
 * @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,20 +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()
                        }
                    })

                  setTimeout(() =>{
                    that.$refs.videoIframe.contentWindow.startVideo()
                  },3000);
                    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
        }

    },
@@ -419,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/peopleGps.vue

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-11-24 09:54:16
 * @Last Modified time: 2021-11-25 13:48:23
 * menu-name 押运人员定位
 */
<template>
@@ -131,8 +131,7 @@
</template>

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

import peoplePng from "@/assets/img/people.png";
export default {
@@ -148,14 +147,10 @@
            loading: true,
            trackTime: [],
            detailObj: {},
            newAxios: null
        };
    },
    created () {
        this.newAxios = axios.create({
            baseURL: 'http://s16s652780.51mypc.cn',
            timeout: 600000 // request timeout
        })


    },
    mounted () {
@@ -194,10 +189,8 @@

        positionClick (val) {
            getPosition({ type: 1, workerId: val.id }).then((result) => {
                this.newAxios({
                    url: '/Escort/getgis.php?acc=7731',
                    method: 'get'
                }).then(res => {

                getNewPeople().then(res => {

                    if (JSON.stringify(res.data) != "{}") {
                        var arr = res.data.sort(function (a, b) {
@@ -217,6 +210,8 @@
                        );
                    }
                })


                // var res = result.data.data;
                // if (JSON.stringify(res) != "{}") {
                //     this.$refs.modalForm.addEntitys(
@@ -289,10 +284,7 @@
                endTime: end,
            }).then((result) => {

                this.newAxios({
                    url: '/Escort/getgistrack.php?number=7730&acc=7731',
                    method: 'get'
                }).then(res => {
                getNewTark().then(res => {

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