重置

shuishen

2021-11-17 7f4f36e2594827091c5000d79a32d4ff21dd1123

重置

 src/views/commandQuery/taskDistribution.vue

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

        <el-dialog class="see-location"
                   title="位置查看"
                   :visible.sync="seeLocationFlag"
                   :modal-append-to-body="false"
                   width="width">
            <Map ref="locationForm" />
        </el-dialog>

        <el-dialog class="see-track"
                   title="轨迹查看"
                   :visible.sync="seeTrackFlag"
                   :modal-append-to-body="false"
                   width="width">

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

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

<script>
// import {
//   getList,
//   getDetail,
//   adddata,
//   update,
//   remove,
// } from "@/api/regulatoryInformation/regulatoryInformation";
import { mapGetters } from "vuex";
// import { datasing } from "./dataqualificationExamination";
// import { getList } from "@/api/qualificationExamination/qualificationExamination";
import { getLisperetaskDistribution } from "@/api/commandQuery/commandQuery";
import { getDirectiveLiveLocationVoList, getDirectiveLocusInfoList } from "@/api/map/people";
import peoplePng from "/img/mapicon/people.png";

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

            selectionList: [],

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

                searchShowBtn: false,

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

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

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

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

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

        seeLocation (row) {

            this.seeLocationFlag = true

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

                }
            });
        },

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

        lookTrack () {
            if (this.trackTime.length == 0) {
                this.$message({ message: "请选择开始时间", duration: 2000 });
                return;
            }
            const startTime = new Date(this.trackTime[0]);
            const start =
                startTime.getFullYear() +
                "-" +
                this.disposeTime(startTime.getMonth() + 1) +
                "-" +
                this.disposeTime(startTime.getDate()) +
                " " +
                this.disposeTime(startTime.getHours()) +
                ":" +
                this.disposeTime(startTime.getMinutes()) +
                ":" +
                this.disposeTime(startTime.getSeconds());
            if (this.trackTime.length == 1) {
                this.$message({ message: "请选择结束时间", duration: 2000 });
                return;
            }
            const endTime = new Date(this.trackTime[1]);
            const end =
                endTime.getFullYear() +
                "-" +
                this.disposeTime(endTime.getMonth() + 1) +
                "-" +
                this.disposeTime(endTime.getDate()) +
                " " +
                this.disposeTime(endTime.getHours()) +
                ":" +
                this.disposeTime(endTime.getMinutes()) +
                ":" +
                this.disposeTime(endTime.getSeconds());

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

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

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

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

<style>
</style>

 src/views/home/index.vue

@@ -1,1449 +0,0 @@
<template>
  <div class="bajgxt-home">
    <div class="head-title">
      <span>智慧保安监管模块</span>
    </div>
    <span class="sub-title" @click.stop="goSystemHome">进入系统</span>
    <div class="content">
      <div class="left">
        <div class="left1">
          <!-- <img src="../../../public/img/bajgxt/line.jpg" /> -->
          <div class="title-pane">
            <img src="../../../public/img/bajgxt/icon1.png" />
            <span>各辖区单位统计情况</span>
          </div>
          <div class="leftEchartTitle">
            <div class="block1"></div>
            <span>自招保安单位</span>
            <span>{{ leftData.zz }}</span>
            <span>个</span>
          </div>
          <div class="leftEchartTitle leftEchartTitle2">
            <div class="block1"></div>
            <span>保安培训学校</span>
            <span>{{ leftData.px }}</span>
            <span>个</span>
          </div>
          <div class="leftEchartTitle leftEchartTitle3">
            <div class="block1"></div>
            <span>本市保安公司</span>
            <span>{{ leftData.fw }}</span>
            <span>个</span>
          </div>
          <!-- <div class="leftEchartTitle leftEchartTitle4">
            <div class="block1"></div>
            <span>武装守押公司</span>
            <span>{{ leftData.wz }}</span>
            <span>个</span>
          </div> -->
          <div class="leftEchartTitle leftEchartTitle4">
            <div class="block1"></div>
            <span>分公司</span>
            <span>{{ leftData.kqy }}</span>
            <span>个</span>
          </div>
          <div id="left1Echart" v-loading="left1loading"></div>
        </div>
        <div class="left2">
          <div class="title-pane2">
            <img src="../../../public/img/bajgxt/icon1.png" />
            <span>保安员持证情况</span>
            <span
              class="left2-btn btn1"
              :class="[left2EchartType === 0 ? 'bayHover' : '']"
              @click="getHolderNum(0)"
              >辖区统计</span
            >
            <span
              class="left2-btn btn2"
              :class="[left2EchartType === 1 ? 'bayHover' : '']"
              @click="getHolderNum(1)"
              >男女结构</span
            >
          </div>

          <div v-if="left2EchartType === 1" class="leftEchartTitle xbNan">
            <div class="block1"></div>
            <span>男</span>
            <span>{{ leftData.nan }}</span>
            <span>人</span>
          </div>
          <div v-if="left2EchartType === 1" class="leftEchartTitle xbNv">
            <div class="block1"></div>
            <span>女</span>
            <span>{{ leftData.nv }}</span>
            <span>人</span>
          </div>
          <div id="left2Echart" v-loading="left2loading"></div>
        </div>
      </div>
      <div class="middle" v-loading="middleloading">
        <div class="mapimg">
          <!-- <div class="textBox">
            <transition name="slide">
              <p class="text" :key="text.id">{{ text.val }}</p>
            </transition>
          </div> -->

          <!-- <div></div> -->
          <div class="mapBtn" @click="setMapData(2)">
            <img src="../../../public/img/bajgxt/car.png" alt />
            <div class="text">
              <span>押运车辆</span>
              <span>{{ carNum }}</span>
            </div>
          </div>
          <div class="mapBtn" @click="setMapData(1)">
            <img src="../../../public/img/bajgxt/peo.png" alt />
            <div class="text">
              <span>保安员</span>
              <span>{{ peoNum }}</span>
            </div>
          </div>
          <div class="mapBtn" @click="setMapData(3)">
            <img src="../../../public/img/bajgxt/gun.png" alt />
            <div class="text">
              <span>枪支</span>
              <span>{{ gunNum }}</span>
            </div>
          </div>
          <div id="map"></div>
        </div>
        <div class="table">
          <div class="table-title">武装押运实时定位</div>
          <div class="lefttop"></div>
          <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="备注">
              </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>
        </div>
      </div>
      <div class="right">
        <div class="right1">
          <div class="title-pane1">
            <img src="../../../public/img/bajgxt/icon2.png" />
            <span>保安员预警统计</span>

            <avue-input-tree
              default-expand-all
              v-model="value1"
              placeholder="南昌市公安局"
              type="tree"
              :dic="options1"
              :props="props"
              @change="handleNodeClick1"
            ></avue-input-tree>
          </div>
          <div class="right-content" v-loading="right1loading">
            <span
              class="left2-btn date"
              :class="[poorPerformanceType === 1 ? 'bayHover' : '']"
              @click="getPoorPerformance(1)"
              >当日</span
            >
            <span
              class="left2-btn mounce"
              :class="[poorPerformanceType === 2 ? 'bayHover' : '']"
              @click="getPoorPerformance(2)"
              >当月</span
            >
            <span
              class="left2-btn all"
              :class="[poorPerformanceType === 3 ? 'bayHover' : '']"
              @click="getPoorPerformance(3)"
              >全部</span
            >
            <div class="card-list" style="margin-top: 21px">
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u256.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
              <span>{{ rightData.poorPerformance }}</span>
              <span>现实表现差</span>
            </div>
            <div class="card-list">
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u230.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
              <span class="showDialog" @click="shoeDialog('zg')">{{
                rightData.qualification
              }}</span>
              <span class="showDialog" @click="shoeDialog('zg')"
                >资格审查异常</span
              >
            </div>
          </div>
          <!-- <div class="card-text"> -->
          <!-- <span>现实表现差</span><span>902,432</span><span>起</span
          ><span>审查情况</span><span>22222</span><span>起</span>-->
          <!-- </div> -->
          <!-- <div id="right1Echart"></div> -->
        </div>
        <div class="right2">
          <div class="title-pane1">
            <img src="../../../public/img/bajgxt/icon2.png" />
            <span>保安公司预警统计</span>

            <!-- <el-select
              ref="treeForm2"
              v-model="node2.title"
              placeholder="请选择"
            >
              <el-option style="height: auto" :value="node2">
                <el-tree
                  :data="options2"
                  default-expand-all
                  node-key="id"
                  @node-click="handleNodeClick2"
                  :props="props"
                >
                </el-tree>
              </el-option>
            </el-select> -->
            <avue-input-tree
              default-expand-all
              v-model="value2"
              placeholder="请选择内容"
              type="tree"
              :dic="options2"
              :props="props"
              @change="handleNodeClick2"
            ></avue-input-tree>
          </div>
          <div class="right-content" v-loading="right2loading">
            <div class="rightData rightData1" @click="shoeDialog('wg')">
              <img src="../../../public/img/bajgxt/u231.png" alt />
              <div class="text">
                <span>违规经营</span>
                <span>{{ rightData.wgNum }}个</span>
              </div>
            </div>
            <div class="rightData rightData2" @click="shoeDialog('jy')">
              <img src="../../../public/img/bajgxt/u232.png" alt />
              <div class="text">
                <span>经营不善</span>
                <span>{{ rightData.materialNum }}个</span>
              </div>
            </div>
            <div class="rightData rightData3" @click="shoeDialog('ym')">
              <img src="../../../public/img/bajgxt/u233.png" alt />
              <div class="text">
                <span>有名无实</span>
                <span>{{ rightData.ymwsNum }}个</span>
              </div>
            </div>
            <div class="rightData rightData4" @click="shoeDialog('jg')">
              <img src="../../../public/img/bajgxt/111.png" alt />
              <div class="text">
                <span>监管处罚</span>
                <span>{{ rightData.punishNum }}个</span>
              </div>
            </div>
            <!-- <div class="card-list">
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u235.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
              <span>{{ rightData.socialSecurity }}</span>
              <span>未缴纳社保</span>
            </div>
            <div class="card-list">
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u251.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
              <span>{{ rightData.noholder }}</span>
              <span>未持证</span>
            </div> -->
          </div>
          <!-- <div class="card-text"> -->
          <!-- <span>未缴纳社保情况</span><span>902,432</span><span>起</span
          ><span>未持证情况</span><span>22222</span><span>起</span>-->
          <!-- </div> -->
          <!-- <div id="right2Echart"></div> -->
        </div>
        <div class="right3">
          <div class="title-pane2">
            <img src="../../../public/img/bajgxt/icon3.png" />
            <span>分局预警占比情况</span>
          </div>
          <div id="right3Echart" v-loading="right3loading"></div>
        </div>
      </div>
    </div>

    <!-- 弹框表格 -->
    <el-dialog
      class="dialog"
      :title="gridData.title"
      v-loading="dialogloading"
      element-loading-text="数据加载中"
      :visible.sync="dialogTableVisible"
    >
      <el-table :data="gridData.data">
        <template v-if="gridData.type === 'zg'">
          <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
            :key="gridData.type"
            prop="examinationType"
            label="审查状态"
            :formatter="examinationFormatter"
            :show-overflow-tooltip="true"
            width="100"
          ></el-table-column>
          <el-table-column
            :key="gridData.type"
            prop="examinationMx"
            label="审查明细"
            :show-overflow-tooltip="true"
            width="150"
          ></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-pagination
        @current-change="changePage"
        @size-change="changePage"
        :current-page.sync="gridData.current"
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="gridData.total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import "./echarts-auto-tooltip";
// import "ol/ol.css";
import * as echarts from "echarts";
import optionJs from "./indexEchart";
// import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
// import { Map, View } from "ol";
// import { Tile, Group } from "ol/layer";
// import { OSM, TileJSON } from "ol/source";
// import VectorLayer from "ol/layer/Vector";
// import VectorSource from "ol/source/Vector";

// import Feature from "ol/Feature.js";
// import Point from "ol/geom/Point.js";
// import { Fill, Stroke, Circle, Style, Icon } from "ol/style";
// import GeoJSON from "ol/format/GeoJSON";
// import axios from "../../router/axios";
import {
  securityTotal,
  holderNum,
  securityPer,
  getLiveLocationVoList,
  lazyTreeJu,
  noholderNum,
  noSocialSecurity,
  selectFj,
  selectBx,
  selectExtype,
  seCountUg,
  seCountI,
  selectExtypeUser,
  qualificationPages,
  selectCf,
  selectCl,
  selectYs,
  selectJy,
  selectWg,
  punishList,
  lazyTrees,
  getSecurityUnitInfoPage
} from "../../api/index/index";

import car from "/img/mapicon/car.png";
import peo from "/img/mapicon/people.png";
import gun from "/img/mapicon/gun.png";

import website from "@/config/website";

export default {
  data() {
    return {
      map: null,
      curTableType: 2,
      tableData: [],
      value1: "",
      carVectorLayer: null,
      peoVectorLayer: null,
      gunVectorLayer: null,

      options1: [],
      value2: "",
      options2: [],
      rightData: {
        poorPerformance: 0,
        qualification: 0,
        materialNum: 0,
        punishNum: 0,
        wgNum: 0,
        ymwsNum: 0
      },
      carNum: 0,
      peoNum: 0,
      gunNum: 0,
      mapData: null,
      echarts: {
        left1Echart: null,
        left2Echart: null,
        mapEchart: null,
        right3Echart: null
      },
      left1loading: true,
      left2loading: true,
      middleloading: true,
      right1loading: true,
      right2loading: true,
      right3loading: true,
      textArr: [],
      number: 0,
      leftData: {
        zz: 0,
        px: 0,
        fw: 0,
        wz: 0,
        kqy: 0,
        nan: 0,
        nv: 0
      },
      left2EchartType: 0,
      poorPerformanceType: 3,
      dialogTableVisible: false,
      gridData: {
        data: [],
        total: 0,
        current: 1,
        type: "zg",
        title: "资格异常人员清单"
      },
      dialogTable: {
        wgTable: [],
        jyTable: [],
        ymTable: []
      },
      props: {
        children: "children",
        label: "title",
        value: "id"
      },
      // props2: {
      //   children: "children",
      //   label: "enterpriseName",
      //   value: "departmentid"
      // },
      node1: {}, //选中的记录
      node2: {},
      params: null
    };
  },
  computed: {
    text() {
      return {
        id: this.number,
        val: this.textArr[this.number]
      };
    }
  },
  methods: {
    //点击节点
    handleNodeClick1(data) {
      this.value1 = data;
      this.right1loading = true;
      this.getPoorPerformance(3);
    },
    //点击节点
    handleNodeClick2(data) {
      this.value2 = data;
      this.peoWarning();
    },
    sexFormatter(row, column) {
      if (row.sex === 1) {
        return "男";
      } else if (row.sex === 2) {
        return "女";
      }
    },
    examinationFormatter(row) {
      if (row.examinationType === "1") {
        return "异常";
      } else if (row.examinationType === "0") {
        return "正常";
      }
    },
    punishType(row) {
      if (row.punishtype === "0") {
        return "警告";
      } else if (row.punishtype === "1") {
        return "罚款";
      } else if (row.punishtype === "2") {
        return "没收违法所得";
      } else if (row.punishtype === "3") {
        return "没收非法财物";
      } else if (row.punishtype === "4") {
        return "责令停止施工";
      } else if (row.punishtype === "5") {
        return "责令停止使用";
      } else if (row.punishtype === "6") {
        return "责令停止违法行为";
      } else if (row.punishtype === "7") {
        return "责令停业";
      }
    },
    shoeDialog1(type) {
      this.gridData.data = [];
      this.gridData.total = 0;
      this.gridData.current = 1;
      this.gridData.type = type;
      this.showDialogTable(type);
    },
    showDialogTable(type) {
      let param = this.params;
      this.dialogTableVisible = true;
      this.dialogloading = true;
      if (type === "ywdx_gs") {
        this.gridData.title = param.name + "保安公司统计";
        if (param.name) {
          let arr = this.options1[0].children.filter(
            a => a.title === param.name
          );
          if (arr[0] && arr[0].id) {
            getSecurityUnitInfoPage({
              jurisdiction: arr[0].id,
              current: this.gridData.current,
              size: 10
            }).then(res => {
              if (res.data.code === 200) {
                this.gridData.data = res.data.data.records;
                this.gridData.total = res.data.data.total;
              }
              this.dialogloading = false;
            });
          }
        }
      }
    },
    // 左侧表的接口返回数据
    initEchart() {
      securityTotal().then(res => {
        if (res.data.code == 200) {
          let securityData = res.data.data;
          if (!this.echarts.left1Echart) {
            this.echarts.left1Echart = echarts.init(
              document.getElementById("left1Echart")
            );
          }
          this.echarts.left1Echart.setOption(optionJs.left1Data(securityData));
          this.echarts.left1Echart.on("click", params => {
            this.params = params;
            this.shoeDialog1("ywdx_gs");
          });
        } else {
          this.$message.error(res.msg);
        }
        this.left1loading = false;
      });
      seCountI({ jurisdiction: "", deptid: "" }).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data;
          data.forEach(item => {
            if (item.stats === "0") {
              this.leftData.zz = item.num;
            }
            if (item.stats === "1") {
              this.leftData.px = item.num;
            }
            if (item.stats === "2") {
              this.leftData.fw = item.num;
            }
            if (item.stats === "3") {
              this.leftData.wz = item.num;
            }
            if (item.stats === "4") {
              this.leftData.kqy = item.num;
            }
          });
        } else {
          this.$message.error(res.msg);
        }
      });
      selectFj().then(res => {
        // debugger;
        if (res.data.code === 200) {
          if (!this.echarts.right3Echart) {
            this.echarts.right3Echart = echarts.init(
              document.getElementById("right3Echart")
            );
          }
          this.echarts.right3Echart.setOption(
            optionJs.right3Data(res.data.data)
          );
        } else {
          this.$message.error(res.msg);
        }
        this.right3loading = false;
      });
    },

    getHolderNum(type) {
      this.left2EchartType = type;
      this.left2loading = true;
      if (this.echarts.left2Echart) {
        this.echarts.left2Echart.clear();
      }
      if (type === 0) {
        holderNum().then(res => {
          if (res.data.code === 200) {
            let data = res.data.data;
            this.echarts.left2Echart = echarts.init(
              document.getElementById("left2Echart")
            );
            this.echarts.left2Echart.setOption(optionJs.left2Data(data), true);
          } else {
            this.$message.error(res.msg);
          }
          this.left2loading = false;
        });
      } else {
        seCountUg({ jurisdiction: "", deptid: "" }).then(res => {
          if (res.data.code === 200) {
            this.echarts.left2Echart = echarts.init(
              document.getElementById("left2Echart")
            );
            this.echarts.left2Echart.setOption(
              optionJs.left3Data(res.data.data, true)
            );
            this.leftData.nan = res.data.data[0].mnum;
            this.leftData.nv = res.data.data[0].gnum;
          }
          this.left2loading = false;
        });
      }
    },
    initMapEchart(data, type) {
      if (!this.echarts.mapEchart) {
        this.echarts.mapEchart = echarts.init(document.getElementById("map"));
      }
      this.echarts.mapEchart.setOption(optionJs.middleData(data, type));
      echartAutoTools.loopShowTooltip(
        this.echarts.mapEchart,
        optionJs.middleData(data, type),
        { loopSeries: true }
      );
    },
    setMapData(type) {
      this.middleloading = true;
      this.curTableType = type;
      this.tableData = this.mapData[type]["table"];
      this.initMapEchart(this.mapData[type], type);
      this.middleloading = false;
      this.textArr = [];
      if (type === 2) {
        this.tableData.forEach(item => {
          let obj =
            "押运车辆车牌号" +
            item.carNum +
            ",当前位置" +
            item.location +
            ",所属公司" +
            item.company +
            ",联系人" +
            item.linkman +
            ",联系电话" +
            item.tel;
          this.textArr.push(obj);
        });
      } else if (type === 1) {
        this.tableData.forEach(item => {
          let obj =
            "押运人员" +
            item.name +
            ",当前位置" +
            item.location +
            ",所属公司" +
            item.linkman +
            ",联系电话" +
            item.tel;
          this.textArr.push(obj);
        });
      } else if (type === 3) {
        this.tableData.forEach(item => {
          let obj =
            "枪支编号" +
            item.number +
            ",当前位置" +
            item.location +
            ",所属公司" +
            item.company +
            ",负责人" +
            item.linkman +
            ",联系电话" +
            item.tel;
          this.textArr.push(obj);
        });
      }
    },
    // 获取表格及地图上的数据
    getTableData(type) {
      let middleData = {
        1: {
          table: [],
          geoData: []
        },
        2: {
          table: [],
          geoData: []
        },
        3: {
          table: [],
          geoData: []
        }
      };
      getLiveLocationVoList({ type: type }).then(res => {
        if (res.data.code === 200) {
          let allData = res.data.data;
          allData.forEach(m => {
            let obj = {
              location: m.location,
              name: m.name,
              number: m.number,
              linkman: m.linkman,
              company: m.company,
              tel: m.tel,
              carNum: m.carNum
            };

            // let geoObj = {
            //   name: type,
            //   value: [Number(m.longitude), Number(m.latitude)],
            // };
            middleData[m.type]["geoData"].push([
              Number(m.longitude),
              Number(m.latitude)
            ]);
            middleData[m.type]["table"].push(obj);
          });
          this.carNum = middleData[2]["table"].length;
          this.peoNum = middleData[1]["table"].length;
          this.gunNum = middleData[3]["table"].length;
          this.mapData = middleData;
          this.setMapData(2);
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 获取辖区列表
    getOfficeData() {
      lazyTrees().then(res => {
        if (res.data.code === 200) {
          this.options1 = res.data.data;
          this.options2 = res.data.data;
          this.value1 = this.options1[0].value || "";
          this.value2 = this.options2[0].value || "";
          this.node1 = this.options1[0];
          this.node2 = this.options1[0];
          // 获取完辖区列表之后再获取具体数据
          this.peoWarning();
          // this.getQualification();
          this.getPoorPerformance(3);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 资格审查异常名单
    shoeDialog(type) {
      this.gridData.title = "";
      this.gridData.type = type;
      this.gridData.current = 1;
      this.gridData.total = 0;
      this.dialogTableVisible = true;
      if (type === "zg") {
        this.gridData.title = "资格异常人员清单";
        this.getQualificationPages(1);
      } else if (type === "wg") {
        this.gridData.title =
          "违规经营公司清单（持证人数低于50%、缴纳社保人数低于50%）";
        this.getWgTable();
      } else if (type === "jy") {
        this.gridData.title = "经营不善公司清单（服务对象数量为0）";
        this.getJyTable();
      } else if (type === "ym") {
        this.gridData.title = "有名无实公司清单（保安员数量为0）";
        this.getYmTable();
      } else if (type === "jg") {
        this.gridData.title = "受监管处罚公司清单（保安公司存在被处罚记录）";
        this.getPunishList(1);
      }
    },
    getWgTable() {
      this.dialogTable.wgTable.forEach(item => {
        let czl = 0;
        if (Number(item.cznum) !== 0 && Number(item.znum) !== 0) {
          czl =
            ((Number(item.cznum) / Number(item.znum)) * 100).toFixed(2) + "%";
        }
        item["czl"] = czl;
        let sbl = 0;
        if (Number(item.sbnum) !== 0 && Number(item.znum) !== 0) {
          czl =
            ((Number(item.sbnum) / Number(item.znum)) * 100).toFixed(2) + "%";
        }
        item["sbl"] = sbl;
      });
      this.gridData.data = this.dialogTable.wgTable.slice(0, 10);
      this.gridData.total = this.dialogTable.wgTable.length;
    },
    getJyTable() {
      this.dialogTable.jyTable.forEach(item => {
        let pql = 0;
        if (Number(item.painum) !== 0 && Number(item.znum) !== 0) {
          pql =
            ((Number(item.painum) / Number(item.znum)) * 100).toFixed(2) + "%";
        }
        item["pql"] = pql;
        let pjpqrs = 0;
        if (Number(item.painum) !== 0 && Number(item.fwnum) !== 0) {
          pjpqrs =
            ((Number(item.painum) / Number(item.fwnum)) * 100).toFixed(2) + "%";
        }
        item["pjpqrs"] = pjpqrs;
      });
      this.gridData.data = this.dialogTable.jyTable.slice(0, 10);
      this.gridData.total = this.dialogTable.jyTable.length;
    },
    getYmTable() {
      this.gridData.data = this.dialogTable.ymTable.slice(0, 10);
      this.gridData.total = this.dialogTable.ymTable.length;
    },
    getPunishList(page) {
      this.gridData.current = page;
      this.dialogloading = true;
      this.gridData.data = [];
      let params = {
        current: this.gridData.current,
        size: 10,
        jurisdiction: this.value2
      };
      punishList(params).then(res => {
        if (res.data.code === 200) {
          this.gridData.data = res.data.data.records;
          this.gridData.total = res.data.data.total;
        }
        this.dialogloading = false;
      });
    },
    changePage(page) {
      if (this.gridData.type === "zg") {
        this.getQualificationPages(page);
      } else if (this.gridData.type === "wg") {
        this.gridData.data = this.dialogTable.wgTable.slice(
          10 * (page - 1),
          10 * page
        );
      } else if (this.gridData.type === "jy") {
        this.gridData.data = this.dialogTable.jyTable.slice(
          10 * (page - 1),
          10 * page
        );
      } else if (this.gridData.type === "ym") {
        this.gridData.data = this.dialogTable.jyTable.slice(
          10 * (page - 1),
          10 * page
        );
      } else if (this.gridData.type === "jg") {
        this.getPunishList(page);
      } else if (this.gridData.type === "ywdx_gs") {
        this.showDialogTable(this.gridData.type);
      }
    },
    getQualificationPages(page) {
      this.gridData.current = page;
      this.dialogloading = true;
      this.gridData.data = [];
      let params = {
        current: this.gridData.current,
        size: 10,
        examinationType: 1,
        jurisdiction: this.value1
      };
      qualificationPages(params).then(res => {
        if (res.data.code === 200) {
          this.gridData.data = res.data.data.records;
          this.gridData.total = res.data.data.total;
        }
        this.dialogloading = false;
      });
    },
    // 公司受处罚数量
    getPunishNum() {
      // selectCf({ jurisdiction: this.value2 }).then(res => {
      //   if (res.data.code === 200) {
      //     this.rightData.punishNum = res.data.data.count;
      //   } else {
      //     this.$message.error(res.msg);
      //   }
      //   this.right2loading = false;
      // });
      let params = {
        current: this.gridData.current,
        size: 10,
        jurisdiction: this.value2
      };
      punishList(params).then(res => {
        if (res.data.code === 200) {
          this.gridData.data = res.data.data.records;
          this.gridData.total = res.data.data.total;
          this.rightData.punishNum = res.data.data.total;
        }
        this.dialogloading = false;
      });
    },
    // 经营不善
    getMaterial() {
      selectJy({ jurisdiction: this.value2 }).then(res => {
        if (res.data.code === 200) {
          this.rightData.materialNum = res.data.data.count;
          this.dialogTable.jyTable = res.data.data.List;
        } else {
          this.$message.error(res.msg);
        }
        this.right2loading = false;
      });
    },
    // 有名无实
    getselectYs() {
      selectYs({ jurisdiction: this.value2 }).then(res => {
        if (res.data.code === 200) {
          this.rightData.ymwsNum = res.data.data.count;
          this.dialogTable.ymTable = res.data.data.List;
        } else {
          this.$message.error(res.msg);
        }
        this.right2loading = false;
      });
    },
    // 违规经营
    getselectWg() {
      selectWg({ jurisdiction: this.value2 }).then(res => {
        if (res.data.code === 200) {
          this.rightData.wgNum = res.data.data.count;
          this.dialogTable.wgTable = res.data.data.list;
        } else {
          this.$message.error(res.msg);
        }
        this.right2loading = false;
      });
    },
    // 现实表现差
    getPoorPerformance(type) {
      this.right1loading = true;
      this.poorPerformanceType = type;
      this.rightData.poorPerformance = 0;
      this.rightData.qualification = 0;

      // if (type === 1) {
      //   this.rightData.poorPerformance = 2;
      //   this.rightData.qualification = 3;
      //   this.right1loading = false;
      // } else if (type === 2) {
      //   this.rightData.poorPerformance = 11;
      //   this.rightData.qualification = 14;
      //   this.right1loading = false;
      // } else if (type === 3) {
      // this.rightData.poorPerformance = 32;
      // this.rightData.qualification = 45;
      selectBx({
        jurisdiction: this.value1,
        type: this.poorPerformanceType
      }).then(res => {
        if (res.data.code === 200) {
          this.rightData.poorPerformance = res.data.data[0].count;
        } else {
          this.$message.error(res.msg);
        }
        this.right1loading = false;
      });
      selectExtype({
        jurisdiction: this.value1,
        type: this.poorPerformanceType
      }).then(res => {
        if (res.data.code === 200) {
          this.rightData.qualification = res.data.data[0].count;
        } else {
          this.$message.error(res.msg);
        }
      });
      // selectExtypeUser().then(res => {
      //   if (res.status === 200) {
      //     this.rightData.qualification = res.data;
      //   } else {
      //     this.$message.error(res.msg);
      //   }
      // });
      // }
      // this.right1loading = false;
    },
    peoWarning() {
      this.rightData.materialNum = 0;
      this.rightData.punishNum = 0;
      this.rightData.wgNum = 0;
      this.rightData.ymwsNum = 0;
      this.right2loading = true;
      this.getPunishNum();
      this.getMaterial();
      this.getselectWg();
      this.getselectYs();
    },

    companyWarning() {
      this.right1loading = true;
      this.getPoorPerformance(3);
      // this.getQualification();
    },

    goSystemHome() {
      // this.$router.push({ path: "/register/index" });
      // this.$router.push({ path: "/securityGuardManagement/register" });
      this.$router.push({ path: website.fistPage.value });
    }
  },
  mounted() {
    this.initEchart();
    this.getHolderNum(0);
    // this.getPoorPerformance(3);
    // this.getTableData("car");
    // this.initMap();
    this.getTableData(0);
    // this.initMapEchart();
    this.getOfficeData();
  }
};
</script>

<style lang="scss" scoped>
// 适配分辨率1280*1024
@media screen and (max-width: 1280px) {
  @import "./index_1280_1024.scss";
}
// 适配分辨率1600*900
@media screen and (min-width: 1281px) and (max-width: 1600px) {
  @import "./index_1600_900.scss";
}
// 适配分辨率1920*1080
@media screen and (min-width: 1601px) {
  @import "./index.scss";
}

// @import "./index.scss";
/deep/ .el-select-dropdown {
  border: 1px solid #9199ab;
  background-color: #022c53;
}
/deep/ .el-select-dropdown__item.hover,
/deep/ .el-select-dropdown__item:hover {
  background-color: #03203e;
}
/deep/ .el-loading-mask {
  background-color: transparent !important;
}
/deep/ .el-table .cell {
  text-align: center;
}
</style>

 src/views/home/indexEchart.js

@@ -1,769 +0,0 @@
import * as echarts from "echarts";
import nc from "../../../public/nc.json";
function left1Data(allData) {
  let nameArr = [];
  let data1 = [];
  let data2 = [];
  let data3 = [];
  let data4 = [];
  let data5 = [];
  // let legend = ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"];
  allData.forEach(item => {
    nameArr.push(item.name);
    data1.push(item.server.confess || 0);
    data2.push(item.server.staff || 0);
    data3.push(item.server.security || 0);
    data4.push(item.server.armed || 0);
    data5.push(item.server.region || 0);
  });
  nameArr.reverse();
  data1.reverse();
  data2.reverse();
  data3.reverse();
  data4.reverse();
  data5.reverse();
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    color: [
      "#2ec7c9",
      "#b6a2de",
      "#5ab1ef",
      "#ffb980",

      // "#fac858",
      // "#73c0de",
      // "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    // legend: {
    //   data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"],
    //   bottom: "1%",
    //   itemWidth: 20,
    //   textStyle: {
    //     color: "#fff"
    //   },
    //   // formatter: function (legend1) {
    //   //   return legend1;
    //   // }
    // },
    grid: {
      top: "5%",
      left: "5%",
      right: "10%",
      bottom: "5%",
      containLabel: true
    },
    xAxis: {
      type: "value",
      axisLabel: {
        color: "#fff"
      },
      axisLine: {
        show: true
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: "category",
      axisLabel: {
        color: "#fff"
      },
      data: nameArr
    },
    series: [
      {
        name: "自招保安单位",
        type: "bar",
        stack: "total",
        barWidth: 17,
        emphasis: {
          focus: "series"
        },
        data: data1
      },
      {
        name: "保安培训学校",
        type: "bar",
        stack: "total",
        emphasis: {
          focus: "series"
        },
        data: data2
      },
      {
        name: "本市保安公司",
        type: "bar",
        stack: "total",
        emphasis: {
          focus: "series"
        },
        data: data3
      },
      {
        name: "武装守押公司",
        type: "bar",
        stack: "total",
        emphasis: {
          focus: "series"
        },
        data: data4
      },
      {
        name: "分公司",
        type: "bar",
        stack: "total",
        emphasis: {
          focus: "series"
        },
        data: data5
      }
    ]
  };
  return option;
}
function left2Data(allData) {
  let nameArr = [];
  let data1 = [];
  let data2 = [];
  allData.forEach(item => {
    nameArr.push(item.name);
    data1.push(item.cz);
    data2.push(item.wcz);
  });
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    color: [
      "#3fb1e3",
      "#0dad7b",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    legend: {
      data: ["持证人数", "未持证人数"],
      bottom: "1%",
      left: "13%",
      itemWidth: 20,
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      top: "10%",
      left: "5%",
      right: "6%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#fff",
        rotate: 40,
      },
      data: nameArr
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff"
      },
      boundaryGap: [0, 0.01],
      axisLine: {
        show: true
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: "持证人数",
        type: "bar",
        // barWidth:30,
        barWidth: 15,
        stack: "total",
        emphasis: {
          focus: "series"
        },
        data: data1
      },
      {
        name: "未持证人数",
        type: "bar",
        stack: "total",
        emphasis: {
          focus: "series"
        },
        data: data2
      }
    ]
  };
  return option;
}

function left3Data(allData) {
  let data = [
    { value: allData[0].mnum ? Number(allData[0].mnum) : 0, name: "男" },
    { value: allData[0].gnum ? Number(allData[0].gnum) : 0, name: "女" }
  ];
  let option = {
    tooltip: {
      trigger: "item",
      formatter: "{a}<br>{b}:{c}({d}%)",
      axisPointer: {
        type: "shadow"
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    color: ["#008DEC", "#886EFF"],
    // legend: {
    //   right: "8%",
    //   bottom: "10%",
    //   itemHeight: 10,
    //   show: true,
    //   selectedMode: false,
    //   textStyle: {
    //     color: "#fff"
    //   },
    //   data: ['男', '女'],
    //   orient: "vertical"
    // },
    grid: {
      top: "10%",
      left: "5%",
      right: "30%",
      bottom: "4%",
      containLabel: true
    },
    series: [
      {
        name: "性别比例",
        type: "pie",
        center: ["33%", "50%"],
        radius: "70%",
        data: data,
        label: {
          color: "#fff"
        }
      }
    ]
  };
  return option;
}

function right1Data(allData) {
  // let yueData = [
  //   "一月",
  //   "二月",
  //   "三月",
  //   "四月",
  //   "五月",
  //   "六月",
  //   "七月",
  //   "八月",
  //   "九月",
  //   "十月",
  //   "十一月",
  //   "十二月"
  // ];
  // let nameArr = [];
  // allData.forEach(a => {
  //   yueData.forEach(b => {
  //    console.log('a',a)
  //     // if(a){}
  //   });
  // });
  let option = {
    tooltip: {
      trigger: "axis"
    },
    color: [
      "#91cc75",
      "#fac858",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],

    legend: {
      data: ["现实表现差", "审查情况"],
      bottom: "5%",
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: "5%",
      right: "6%",
      bottom: "22%",
      top: "5%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        color: "#fff"
      },
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
    },
    yAxis: {
      axisLabel: {
        color: "#fff"
      },
      type: "value"
    },
    series: [
      {
        name: "现实表现差",
        type: "line",
        stack: "总量",
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: "审查情况",
        type: "line",
        stack: "总量",
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
  };
  return option;
}
function right2Data(allData) {
  let option = {
    tooltip: {
      trigger: "axis"
    },
    color: [
      "#91cc75",
      "#fac858",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],

    legend: {
      data: ["未缴纳社保情况", "未持证情况"],
      bottom: "5%",
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: "5%",
      right: "6%",
      bottom: "22%",
      top: "5%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        color: "#fff"
      },
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff"
      }
    },
    series: [
      {
        name: "未缴纳社保情况",
        type: "line",
        stack: "总量",
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: "未持证情况",
        type: "line",
        stack: "总量",
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
  };
  return option;
}

function right3Data(allData) {
  let data = [];
  let legendData = [];
  let datas = allData.sort((a, b) => {
    return b.Count - a.Count;
  });
  datas.forEach(item => {
    let obj = {
      name: item.jurname,
      value: item.Count
    };
    legendData.push(item.jurname);
    // sumValue += Number(item.Count)
    data.push(obj);
  });
  let option = {
    tooltip: {
      show: true,
      trigger: "item",
      formatter: "{a}<br>{b}:{c}({d}%)",
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    legend: {
      type: "scroll",
      right: "5%",
      top: "5%",
      itemHeight: 10,
      show: true,
      itemGap: 8,
      selectedMode: false,
      textStyle: {
        color: "#fff",
        fontSize: 9
      },
      data: legendData,
      orient: "vertical"
    },
    color: [
      "#91cc75",
      "#fac858",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    series: [
      {
        name: "分局预警占比",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["35%", "55%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center"
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: "12",
        //     fontWeight: "bold"
        //   }
        // },
        labelLine: {
          show: false
        },
        data: data
      }
      // {
      //     name: '面积模式',
      //     type: 'pie',
      //     radius: [20, 140],
      //     center: ['75%', '50%'],
      //     roseType: 'area',
      //     itemStyle: {
      //         borderRadius: 5
      //     },
      //     data: [
      //         {value: 30, name: 'rose 1'},
      //         {value: 28, name: 'rose 2'},
      //         {value: 26, name: 'rose 3'},
      //         {value: 24, name: 'rose 4'},
      //         {value: 22, name: 'rose 5'},
      //         {value: 20, name: 'rose 6'},
      //         {value: 18, name: 'rose 7'},
      //         {value: 16, name: 'rose 8'}
      //     ]
      // }
    ]
  };
  return option;
}
function middleData(allData, type) {
  var ncMap = nc;
  // var convertData = function (allData) {
  //   var res = [];
  //   for (var i = 0; i < data.length; i++) {
  //     var geoCoord = geoCoordMap[data[i].name];
  //     if (geoCoord) {
  //       res.push({
  //         name: data[i].name,
  //         value: geoCoord.concat(data[i].value)
  //       });
  //     }
  //   }
  //   return res;
  // };
  let name = "";
  let label = "";
  let symbolUrl = "";
  let geoData = [];
  allData["table"].forEach((item, i) => {
    let obj = {};
    if (type === 1) {
      name = "保安员名称";
      label =
        "押运人员：" +
        item.name +
        "<br />当前位置：" +
        item.location +
        "<br />所属公司：" +
        item.linkman +
        "<br />联系电话：" +
        item.tel;
      symbolUrl = require("/img/mapicon/people.png");
      obj = {
        name: label,
        value: allData["geoData"][i]
      };
    } else if (type === 2) {
      name = "押运车辆";
      label =
        "押运车辆车牌号：" +
        item.carNum +
        "<br />当前位置：" +
        item.location +
        "<br />所属公司：" +
        item.company +
        "<br />联系人：" +
        item.linkman +
        "<br />联系电话：" +
        item.tel;
      symbolUrl = require("/img/mapicon/car.png");
      obj = {
        name: label,
        value: allData["geoData"][i]
      };
    } else if (type === 3) {
      name = "枪支";
      label =
        "枪支编号：" +
        item.number +
        "<br />当前位置：" +
        item.location +
        "<br />所属公司：" +
        item.company +
        "<br />负责人：" +
        item.linkman +
        "<br />联系电话：" +
        item.tel;
      symbolUrl = require("/img/mapicon/gun.png");
      obj = {
        name: label,
        value: allData["geoData"][i]
      };
    }
    geoData.push(obj);
  });

  echarts.registerMap("ncMap", ncMap);
  // echarts.registerMap('chinaMapOutline', chinaMapOutline);
  let option = {
    // backgroundColor: '#181F4E',
    // tooltip: {
    //   trigger: 'item',
    // },
    tooltip: {
      trigger: "item",
      formatter: function(params) {
        if (typeof params.value[1] == "undefined") {
          return params.name;
        } else {
          return params.name;
        }
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      borderColor: "gray", //设置边框颜色
      extraCssText: "box-shadow: 0 0 3px rgba(    211,211,211, 0.5);",
      textStyle: {
        color: "#fff" //设置文字颜色
      }
    },
    geo: {
      // silent: true,
      map: "ncMap",
      show: true,
      zoom: 1.04,
      top: "8%",
      label: {
        show: false,
        color: "#fff",
        emphasis: {
          textStyle: {
            color: "#fff"
          }
        }
      },

      roam: true,
      itemStyle: {
        areaColor: "rgba(0,255,255,.02)",
        borderColor: "#00ffff",
        borderWidth: 1.5,
        shadowColor: "#00ffff",
        shadowOffsetX: 0,
        shadowOffsetY: 4,
        shadowBlur: 10
      },
      emphasis: {
        itemStyle: {
          color: "transparent", //悬浮背景
          textStyle: {
            color: "#fff"
          }
        }
      }
    },
    series: [
      {
        map: "ncMap",
        // silent: true,
        type: "map",
        geoIndex: 0,
        // aspectScale: 0.75, //长宽比
        zoom: 1.14,
        label: {
          show: false,
          color: "#fff"
        },
        emphasis: {
          label: {
            color: "#fff"
          }
        },
        top: "10%",
        roam: true,
        itemStyle: {
          areaColor: "rgba(0,255,255,.02)",
          borderColor: "#00ffff",
          borderWidth: 1.5,
          shadowColor: "#00ffff",
          shadowOffsetX: 0,
          shadowOffsetY: 4,
          shadowBlur: 10
        },
        emphasis: {
          itemStyle: {
            areaColor: "transparent", //悬浮背景
            textStyle: {
              color: "#fff"
            }
          }
        }
      },
      {
        name: name,
        type: "scatter",
        coordinateSystem: "geo",
        // roam: false,
        symbol: "image://" + symbolUrl,
        symbolSize: [30, 30],
        label: {
          show: false,
          color: "#fff",
          fontSize: 9
        },
        itemStyle: {
          color: "#FF0000" //标志颜色
        },
        data: geoData,
        showEffectOn: "render",
        rippleEffect: {
          brushType: "stroke"
        },
        hoverAnimation: true,
        emphasis: {
          scale: true
        },
        zlevel: 1
      }
    ]
  };
  return option;
}
export default {
  left1Data,
  left2Data,
  left3Data,
  right1Data,
  right2Data,
  right3Data,
  middleData
};

 src/views/map/carGps.vue

@@ -1,422 +0,0 @@
/*
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-11-15 15:52:47
 * 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 "/img/mapicon/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/gunGps.vue

@@ -1,384 +0,0 @@
/*
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-11-15 15:52:52
 * menu-name 押运人员定位
 */
<template>
  <el-row class="morpheus-map-box">
    <el-col :span="24">
      <el-card>
        <div class="card-body">
          <div>
            <Map ref="modalForm" />
          </div>
          <div>
            <div class="data-table map-people-table" v-show="!detailFlag">
              <el-table
                :data="tableData"
                style="width: 100%"
                v-loading="loading"
              >
                <el-table-column
                  align="center"
                  prop="gunMode"
                  label="枪支类型"
                  width="136"
                >
                </el-table-column>

                <el-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.gunMode }}</div>
                </li>

                <li>
                  <div>责任人：</div>
                  <div>{{ detailObj.personInCharge }}</div>
                </li>

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

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

                <li>
                  <div>发证单位：</div>
                  <div>{{ detailObj.issueUnit }}</div>
                </li>

                <li>
                  <div>用枪编号：</div>
                  <div>{{ detailObj.cardNumber }}</div>
                </li>

                <li>
                  <div>选择时间：</div>
                  <div class="datetime">
                    <el-date-picker
                      v-model="trackTime"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      size="mini"
                      :editable="false"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </div>
                </li>

                <li>
                  <el-button type="text" @click="lookTrack">
                    查看轨迹
                  </el-button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

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

import gunPng from "/img/mapicon/gun.png";

export default {
  data() {
    return {
      tableData: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      detailFlag: false,
      loading: true,
      trackTime: [],
      detailObj: {},
    };
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    getList() {
      getGunList({
        current: this.page.currentPage,
        size: this.page.pageSize,
      }).then((res) => {
        var data = res.data.data;
        this.tableData = data.records;
        this.page.total = data.total;
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.loading = true;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.loading = true;
      this.getList();
    },

    positionClick(val) {
      getPosition({ type: 3, workerId: val.id }).then((result) => {
        var res = result.data.data;
        if (JSON.stringify(res) != "{}") {
          this.$refs.modalForm.addEntitys(
            {
              LGTD: 115.86,
              LTTD: 28.71,
              name: "枪支位置",
            },
            gunPng,
            0.8,
            "gunlayer",
            "gunAddlayer"
          );
        }
      });
    },

    detailsClick(row) {
      this.detailFlag = true;
      this.detailObj = {
        gunMode: row.gunMode,
        personInCharge: row.personInCharge,
        issueTime: row.issueTime,
        validTime: row.validTime,
        issueUnit: row.issueUnit,
        cardNumber: row.cardNumber,
        id: row.id,
      };
    },

    lookTrack() {
      if (this.trackTime.length == 0) {
        this.$message({ message: "请选择开始时间", duration: 2000 });
        return;
      }
      const startTime = new Date(this.trackTime[0]);
      const start =
        startTime.getFullYear() +
        "-" +
        this.disposeTime(startTime.getMonth() + 1) +
        "-" +
        this.disposeTime(startTime.getDate()) +
        " " +
        this.disposeTime(startTime.getHours()) +
        ":" +
        this.disposeTime(startTime.getMinutes()) +
        ":" +
        this.disposeTime(startTime.getSeconds());
      if (this.trackTime.length == 1) {
        this.$message({ message: "请选择结束时间", duration: 2000 });
        return;
      }
      const endTime = new Date(this.trackTime[1]);
      const end =
        endTime.getFullYear() +
        "-" +
        this.disposeTime(endTime.getMonth() + 1) +
        "-" +
        this.disposeTime(endTime.getDate()) +
        " " +
        this.disposeTime(endTime.getHours()) +
        ":" +
        this.disposeTime(endTime.getMinutes()) +
        ":" +
        this.disposeTime(endTime.getSeconds());

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

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

          this.$refs.modalForm.addLines(arr);
        }
      });
    },
    // 处理时间补零操作
    disposeTime(s) {
      return s < 10 ? "0" + s : s;
    },

    goOut() {
      this.detailFlag = !this.detailFlag;
      this.$refs.modalForm.clearLine();
      this.trackTime = [];
    },
  },
  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/peopleGps.vue

@@ -1,381 +0,0 @@
/*
 * @Author: Morpheus
 * @Date: 2021-07-05 16:31:54
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-11-15 15:52:56
 * menu-name 押运人员定位
 */
<template>
    <el-row class="morpheus-map-box">
        <el-col :span="24">
            <el-card>
                <div class="card-body">
                    <div>
                        <Map ref="modalForm" />
                    </div>
                    <div>
                        <div class="data-table map-people-table"
                             v-show="!detailFlag">
                            <el-table :data="tableData"
                                      style="width: 100%"
                                      v-loading="loading">

                                <el-table-column align="center"
                                                 prop="mapInd"
                                                 label="序号"
                                                 width="54">
                                </el-table-column>

                                <el-table-column align="center"
                                                 prop="realName"
                                                 label="姓名"
                                                 width="82">
                                </el-table-column>

                                <el-table-column align="center"
                                                 prop="deptName"
                                                 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
                                               layout="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.name }}</div>
                                </li>

                                <li>
                                    <div>所属公司：</div>
                                    <div>{{ detailObj.deptName }}</div>
                                </li>

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

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

                                <li>
                                    <div>选择时间：</div>
                                    <div class="datetime">
                                        <el-date-picker v-model="trackTime"
                                                        type="datetimerange"
                                                        range-separator="至"
                                                        start-placeholder="开始日期"
                                                        size="mini"
                                                        :editable="false"
                                                        end-placeholder="结束日期">
                                        </el-date-picker>
                                    </div>
                                </li>

                                <li>
                                    <el-button type="text"
                                               @click="lookTrack">
                                        查看轨迹
                                    </el-button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

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

import peoplePng from "/img/mapicon/people.png";

export default {
    data () {
        return {
            tableData: [],
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            detailFlag: false,
            loading: true,
            trackTime: [],
            detailObj: {},
        };
    },
    created () { },
    mounted () {
        this.getList();
    },
    methods: {
        getList () {
            getPeopleList({
                current: this.page.currentPage,
                size: this.page.pageSize,
            }).then((res) => {
                var data = res.data.data;

                data.records.forEach((item, index) => {
                    if (data.current > 1) {
                        item.mapInd = (data.current - 1) * 10 + index + 1
                    } else {
                        item.mapInd = index + 1
                    }
                })
                this.tableData = data.records;
                this.page.total = data.total;
                this.loading = false;
            });
        },
        handleSizeChange (val) {
            this.page.pageSize = val;
            this.loading = true;
            this.getList();
        },
        handleCurrentChange (val) {
            this.page.currentPage = val;
            this.loading = true;
            this.getList();
        },

        positionClick (val) {
            getPosition({ type: 1, workerId: val.id }).then((result) => {
                var res = result.data.data;
                if (JSON.stringify(res) != "{}") {
                    this.$refs.modalForm.addEntitys(
                        {
                            LGTD: res.longitude,
                            LTTD: res.latitude,
                            name: "人员位置",
                        },
                        peoplePng,
                        0.5,
                        "peoplelayer",
                        "peopleAddlayer"
                    );
                }
            });
        },

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

        lookTrack () {
            if (this.trackTime.length == 0) {
                this.$message({ message: "请选择开始时间", duration: 2000 });
                return;
            }
            const startTime = new Date(this.trackTime[0]);
            const start =
                startTime.getFullYear() +
                "-" +
                this.disposeTime(startTime.getMonth() + 1) +
                "-" +
                this.disposeTime(startTime.getDate()) +
                " " +
                this.disposeTime(startTime.getHours()) +
                ":" +
                this.disposeTime(startTime.getMinutes()) +
                ":" +
                this.disposeTime(startTime.getSeconds());
            if (this.trackTime.length == 1) {
                this.$message({ message: "请选择结束时间", duration: 2000 });
                return;
            }
            const endTime = new Date(this.trackTime[1]);
            const end =
                endTime.getFullYear() +
                "-" +
                this.disposeTime(endTime.getMonth() + 1) +
                "-" +
                this.disposeTime(endTime.getDate()) +
                " " +
                this.disposeTime(endTime.getHours()) +
                ":" +
                this.disposeTime(endTime.getMinutes()) +
                ":" +
                this.disposeTime(endTime.getSeconds());

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

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

                    this.$refs.modalForm.addLines(arr);
                }
            });
        },
        // 处理时间补零操作
        disposeTime (s) {
            return s < 10 ? "0" + s : s;
        },

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

<style lang="scss" scoped>
.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;
                }
            }
        }
    }
}

.el-range-editor--mini .el-range-input {
    background-color: #004ca7 !important;
    color: #fff !important;
}
</style>