取消表格滚动条

zhengpz

2021-11-24 3a4e92acaa231be90348ebf2ff79956b47f884c5

取消表格滚动条

 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/home/index.scss

@@ -238,12 +238,12 @@
    }
  }
  .middle {
    .el-table {
      width: calc(100% - 40px);
      height: calc(100% - 65px);
      margin: 0px 20px 15px;
      top: 50px;
    }
    // .el-table {
    //   width: calc(100% - 40px);
    //   height: calc(100% - 65px);
    //   margin: 0px 20px 15px;
    //   top: 50px;
    // }
    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
      background: #031d4b !important;
    }
@@ -405,10 +405,10 @@
  .mapBtn:nth-child(3) {
    margin-top: 160px;
  }
  /deep/ .el-table__body-wrapper {
    overflow: auto;
    height: calc(100% - 50px);
  }
  // /deep/ .el-table__body-wrapper {
  //   overflow: auto;
  //   height: calc(100% - 50px);
  // }
}
.left2-btn {
  height: 21px;
@@ -694,3 +694,30 @@
    height: 77%;
  }
}
.bottom-table{
  width: calc(100% - 40px);
  height: 100%;
  margin: 0px 20px 15px;
  top: 50px;
  .el-table{
    width: 100%;
    height: calc(100% - 65px);
    top: 50px;
    overflow-y: auto;
  }
}
::-webkit-scrollbar{
  display: none;
}
.dialog-table{
  top: 0px !important;
  margin: 0px !important;
  width: 100% !important;
  height: calc(100% - 50px) !important;
  overflow: auto;
  .el-table{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
}

 src/views/home/index.vue

@@ -115,119 +115,121 @@
          <div class="leftbottom"></div>
          <div class="righttop"></div>
          <div class="rightbottom"></div>
          <el-table :data="tableData" stripe ref="indexTable">
            <template v-if="curTableType === 2">
              <el-table-column
                :key="curTableType"
                type="index"
                label="序号"
                width="50"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                prop="carNum"
                label="押运车辆车牌号"
                width="180"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="location"
                label="实时位置"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="company"
                label="所属公司"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="linkman"
                label="联系人"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="tel"
                label="联系电话"
              ></el-table-column>
            </template>
            <template v-if="curTableType === 1">
              <el-table-column
                :key="curTableType"
                type="index"
                label="序号"
                width="50"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="name"
                label="押运人员名称"
                width="180"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="location"
                label="实时位置"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="company"
                label="所属公司"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="tel"
                label="联系电话"
              ></el-table-column>
              <!-- <el-table-column :key="curTableType" prop="bz" label="备注">
          <div class="bottom-table">
            <el-table :data="tableData" stripe ref="indexTable">
              <template v-if="curTableType === 2">
                <el-table-column
                  :key="curTableType"
                  type="index"
                  label="序号"
                  width="50"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  prop="carNum"
                  label="押运车辆车牌号"
                  width="180"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  show-overflow-tooltip
                  prop="location"
                  label="实时位置"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  show-overflow-tooltip
                  prop="company"
                  label="所属公司"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  show-overflow-tooltip
                  prop="linkman"
                  label="联系人"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  show-overflow-tooltip
                  prop="tel"
                  label="联系电话"
                ></el-table-column>
              </template>
              <template v-if="curTableType === 1">
                <el-table-column
                  :key="curTableType"
                  type="index"
                  label="序号"
                  width="50"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  show-overflow-tooltip
                  prop="name"
                  label="押运人员名称"
                  width="180"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  show-overflow-tooltip
                  prop="location"
                  label="实时位置"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  show-overflow-tooltip
                  prop="company"
                  label="所属公司"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  show-overflow-tooltip
                  prop="tel"
                  label="联系电话"
                ></el-table-column>
                <!-- <el-table-column :key="curTableType" prop="bz" label="备注">
              </el-table-column>-->
            </template>
            <template v-if="curTableType === 3">
              <el-table-column
                :key="curTableType"
                type="index"
                label="序号"
                width="50"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="number"
                label="枪支编号"
                width="180"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="location"
                label="实时位置"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="company"
                label="所属公司"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="linkman"
                label="负责人"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                prop="tel"
                label="联系电话"
              ></el-table-column>
            </template>
          </el-table>
              </template>
              <template v-if="curTableType === 3">
                <el-table-column
                  :key="curTableType"
                  type="index"
                  label="序号"
                  width="50"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  show-overflow-tooltip
                  prop="number"
                  label="枪支编号"
                  width="180"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  show-overflow-tooltip
                  prop="location"
                  label="实时位置"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  show-overflow-tooltip
                  prop="company"
                  label="所属公司"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  show-overflow-tooltip
                  prop="linkman"
                  label="负责人"
                ></el-table-column>
                <el-table-column
                  :key="curTableType"
                  prop="tel"
                  label="联系电话"
                ></el-table-column>
              </template>
            </el-table>
          </div>
        </div>
      </div>
      <div class="right">
@@ -393,318 +395,321 @@
      element-loading-text="数据加载中"
      :visible.sync="dialogTableVisible"
    >
      <el-table :data="gridData.data">
        <template v-if="gridData.type === 'zg' || gridData.type === 'xs'">
          <el-table-column
            label="序号"
            width="50"
            :key="gridData.type"
            type="index"
          >
          </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="realName"
            label="保安姓名"
            :show-overflow-tooltip="true"
            width="100"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="deptName"
            label="保安公司"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="sex"
            label="性别"
            :formatter="sexFormatter"
            :show-overflow-tooltip="true"
            width="100"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cardid"
            label="身份证号"
            :show-overflow-tooltip="true"
            width="180"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="age"
            label="年龄"
            :show-overflow-tooltip="true"
            width="100"
          ></el-table-column>
          <!-- <el-table-column
      <div class="dialog-table">
        <el-table :data="gridData.data">
          <template v-if="gridData.type === 'zg' || gridData.type === 'xs'">
            <el-table-column
              label="序号"
              width="50"
              :key="gridData.type"
              type="index"
            >
            </el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="realName"
              label="保安姓名"
              :show-overflow-tooltip="true"
              width="100"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="deptName"
              label="保安公司"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="sex"
              label="性别"
              :formatter="sexFormatter"
              :show-overflow-tooltip="true"
              width="100"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="cardid"
              label="身份证号"
              :show-overflow-tooltip="true"
              width="180"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="age"
              label="年龄"
              :show-overflow-tooltip="true"
              width="100"
            ></el-table-column>
            <!-- <el-table-column
          prop="birthday"
          label="出生日期"
          :show-overflow-tooltip="true"
        ></el-table-column> -->
          <el-table-column
            :key="gridData.type"
            prop="securitynumber"
            label="保安员证编号"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="phone"
            label="联系方式"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            v-if="gridData.type === 'zg'"
            :key="gridData.type"
            prop="examinationType"
            label="审查状态"
            :formatter="examinationFormatter"
            :show-overflow-tooltip="true"
            width="100"
          ></el-table-column>
          <el-table-column
            v-if="gridData.type === 'zg'"
            :key="gridData.type"
            prop="examinationMx"
            label="审查明细"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            v-if="gridData.type === 'xs'"
            :key="gridData.type"
            prop="score"
            label="现实表现情况"
            :show-overflow-tooltip="true"
            width="150"
            :formatter="scoreFormatter"
          ></el-table-column>
        </template>
        <template v-if="gridData.type === 'wg'">
          <el-table-column
            label="序号"
            width="50"
            :key="gridData.type"
            type="index"
          >
          </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="enterpriseName"
            label="公司名称"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="znum"
            label="保安员数量"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cznum"
            label="持证保安"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="czl"
            label="持证率"
            :show-overflow-tooltip="true"
            width="150"
          >
          </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="sbnum"
            label="缴纳社保人数"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="sbl"
            label="缴纳社保比例"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
        </template>
        <template v-if="gridData.type === 'jy'">
          <el-table-column
            label="序号"
            width="50"
            :key="gridData.type"
            type="index"
          >
          </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="enterpriseName"
            label="公司名称"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="znum"
            label="保安员数量"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cznum"
            label="持证保安"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="painum"
            label="派遣人数"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="fwnum"
            label="服务对象数量"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="pql"
            label="派遣率"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="pjpqrs"
            label="平均派遣人数"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
        </template>
        <template v-if="gridData.type === 'ym'">
          <el-table-column
            label="序号"
            width="50"
            :key="gridData.type"
            type="index"
          >
          </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="enterpriseName"
            label="公司名称"
            :show-overflow-tooltip="true"
            width="450"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="znum"
            label="保安员数量"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="cznum"
            label="持证保安"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="painum"
            label="派遣人数"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="fwnum"
            label="服务对象数量"
            :show-overflow-tooltip="true"
          ></el-table-column
          >gridData
        </template>
        <template v-if="gridData.type === 'jg'">
          <el-table-column
            label="序号"
            width="50"
            :key="gridData.type"
            type="index"
          >
          </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="enterpriseName"
            label="公司名称"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="punishtype"
            label="处罚类别"
            :formatter="punishType"
            :show-overflow-tooltip="true"
            width="150"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="punishreason"
            label="处罚原因"
            :show-overflow-tooltip="true"
            width="200"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="penalty"
            label="处罚单位"
            :show-overflow-tooltip="true"
            width="200"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="punishtime"
            label="处罚时间"
            :show-overflow-tooltip="true"
            width="100"
          ></el-table-column>
        </template>
        <template v-if="gridData.type === 'ywdx_gs'">
          <el-table-column
            label="序号"
            width="50"
            :key="gridData.type"
            type="index"
          >
          </el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="enterprisename"
            label="保安公司名称"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="stats"
            label="保安公司类型"
            :formatter="companyFormatter"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="jurisdictionName"
            label="所属辖区"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </template>
      </el-table>
            <el-table-column
              :key="gridData.type"
              prop="securitynumber"
              label="保安员证编号"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="phone"
              label="联系方式"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              v-if="gridData.type === 'zg'"
              :key="gridData.type"
              prop="examinationType"
              label="审查状态"
              :formatter="examinationFormatter"
              :show-overflow-tooltip="true"
              width="100"
            ></el-table-column>
            <el-table-column
              v-if="gridData.type === 'zg'"
              :key="gridData.type"
              prop="examinationMx"
              label="审查明细"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              v-if="gridData.type === 'xs'"
              :key="gridData.type"
              prop="score"
              label="现实表现情况"
              :show-overflow-tooltip="true"
              width="150"
              :formatter="scoreFormatter"
            ></el-table-column>
          </template>
          <template v-if="gridData.type === 'wg'">
            <el-table-column
              label="序号"
              width="50"
              :key="gridData.type"
              type="index"
            >
            </el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="enterpriseName"
              label="公司名称"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="znum"
              label="保安员数量"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="cznum"
              label="持证保安"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="czl"
              label="持证率"
              :show-overflow-tooltip="true"
              width="150"
            >
            </el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="sbnum"
              label="缴纳社保人数"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="sbl"
              label="缴纳社保比例"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
          </template>
          <template v-if="gridData.type === 'jy'">
            <el-table-column
              label="序号"
              width="50"
              :key="gridData.type"
              type="index"
            >
            </el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="enterpriseName"
              label="公司名称"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="znum"
              label="保安员数量"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="cznum"
              label="持证保安"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="painum"
              label="派遣人数"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="fwnum"
              label="服务对象数量"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="pql"
              label="派遣率"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="pjpqrs"
              label="平均派遣人数"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
          </template>
          <template v-if="gridData.type === 'ym'">
            <el-table-column
              label="序号"
              width="50"
              :key="gridData.type"
              type="index"
            >
            </el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="enterpriseName"
              label="公司名称"
              :show-overflow-tooltip="true"
              width="450"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="znum"
              label="保安员数量"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="cznum"
              label="持证保安"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="painum"
              label="派遣人数"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="fwnum"
              label="服务对象数量"
              :show-overflow-tooltip="true"
            ></el-table-column
            >gridData
          </template>
          <template v-if="gridData.type === 'jg'">
            <el-table-column
              label="序号"
              width="50"
              :key="gridData.type"
              type="index"
            >
            </el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="enterpriseName"
              label="公司名称"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="punishtype"
              label="处罚类别"
              :formatter="punishType"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="punishreason"
              label="处罚原因"
              :show-overflow-tooltip="true"
              width="200"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="penalty"
              label="处罚单位"
              :show-overflow-tooltip="true"
              width="200"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="punishtime"
              label="处罚时间"
              :show-overflow-tooltip="true"
              width="100"
            ></el-table-column>
          </template>
          <template v-if="gridData.type === 'ywdx_gs'">
            <el-table-column
              label="序号"
              width="50"
              :key="gridData.type"
              type="index"
            >
            </el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="enterprisename"
              label="保安公司名称"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="stats"
              label="保安公司类型"
              :formatter="companyFormatter"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              :key="gridData.type"
              prop="jurisdictionName"
              label="所属辖区"
              :show-overflow-tooltip="true"
            ></el-table-column>
          </template>
        </el-table>
      </div>

      <el-pagination
        @current-change="changePage"
        @size-change="changePage"
@@ -881,7 +886,7 @@
      }
    },
    scoreFormatter(row) {
      if (row.score === '3') {
      if (row.score === "3") {
        return "差";
      }
    },

 src/views/home/index_1280_1024.scss

@@ -238,12 +238,12 @@
    }
  }
  .middle {
    .el-table {
      width: calc(100% - 40px);
      height: calc(100% - 65px);
      margin: 0px 20px 15px;
      top: 50px;
    }
    // .el-table {
    //   width: calc(100% - 40px);
    //   height: calc(100% - 65px);
    //   margin: 0px 20px 15px;
    //   top: 50px;
    // }
    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
      background: #031d4b !important;
    }
@@ -408,10 +408,10 @@
  .mapBtn:nth-child(3) {
    margin-top: 160px;
  }
  /deep/ .el-table__body-wrapper {
    overflow: auto;
    height: calc(100% - 50px);
  }
  // /deep/ .el-table__body-wrapper {
  //   overflow: auto;
  //   height: calc(100% - 50px);
  // }
}
.left2-btn {
  height: 19px;
@@ -663,17 +663,17 @@
  /deep/.dialog {
    z-index: 10000000 !important;
    .el-table {
      top: 0px !important;
      margin: 0px !important;
      width: 100% !important;
      height: calc(100% - 50px) !important;
      // top: 0px !important;
      // margin: 0px !important;
      // width: 100% !important;
      // height: calc(100% - 50px) !important;
      .el-table__header {
        background-color: #2d5cc8 !important;
      }
      .el-table__body-wrapper {
        height: calc(100% - 50px);
        overflow-x: hidden;
        overflow-y: auto;
        // overflow-x: hidden;
        // overflow-y: auto;
      }
    }
    .el-pagination {
@@ -697,3 +697,30 @@
    height: 77%;
  }
}
.bottom-table{
  width: calc(100% - 40px);
  height: 100%;
  margin: 0px 20px 15px;
  top: 50px;
  .el-table{
    width: 100%;
    height: calc(100% - 65px);
    top: 50px;
    overflow-y: auto;
  }
}
::-webkit-scrollbar{
  display: none;
}
.dialog-table{
  top: 0px !important;
  margin: 0px !important;
  width: 100% !important;
  height: calc(100% - 50px) !important;
  overflow: auto;
  .el-table{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
}

 src/views/home/index_1600_900.scss

@@ -238,12 +238,12 @@
    }
  }
  .middle {
    .el-table {
      width: calc(100% - 40px);
      height: calc(100% - 65px);
      margin: 0px 20px 15px;
      top: 50px;
    }
    // .el-table {
    //   width: calc(100% - 40px);
    //   height: calc(100% - 65px);
    //   margin: 0px 20px 15px;
    //   top: 50px;
    // }
    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
      background: #031d4b !important;
    }
@@ -407,10 +407,10 @@
  .mapBtn:nth-child(3) {
    margin-top: 160px;
  }
  /deep/ .el-table__body-wrapper {
    overflow: auto;
    height: calc(100% - 50px);
  }
  // /deep/ .el-table__body-wrapper {
  //   overflow: auto;
  //   height: calc(100% - 50px);
  // }
}
.left2-btn {
  height: 21px;
@@ -662,17 +662,16 @@
  /deep/.dialog {
    z-index: 10000000 !important;
    .el-table {
      top: 0px !important;
      margin: 0px !important;
      width: 100% !important;
      height: calc(100% - 50px) !important;
      // top: 0px !important;
      // margin: 0px !important;
      // width: 100% !important;
      // height: calc(100% - 50px) !important;
      .el-table__header {
        background-color: #2d5cc8 !important;
      }
      .el-table__body-wrapper {
        height: calc(100% - 50px);
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
        overflow:hidden;
      }
    }
    .el-pagination {
@@ -696,3 +695,30 @@
    height: 77%;
  }
}
.bottom-table{
  width: calc(100% - 40px);
  height: 100%;
  margin: 0px 20px 15px;
  top: 50px;
  .el-table{
    width: 100%;
    height: calc(100% - 65px);
    top: 50px;
    overflow-y: auto;
  }
}
::-webkit-scrollbar{
  display: none;
}
.dialog-table{
  top: 0px !important;
  margin: 0px !important;
  width: 100% !important;
  height: calc(100% - 30px) !important;
  // overflow: auto;
  .el-table{
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}

 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) != "{}") {