Merge branch 'master' of http://192.168.0.105:10010/r/zhba_regulatory

liuyg

2021-07-20 eed39ea913dddfe6572f37de8c7de3f1523b6816

 src/views/home/index.vue

@@ -1,23 +1,21 @@
<template>
  <div class="bajgxt-home">
    <div class="head-title">
      <span>保安监管系统可视化平台</span>
      <!-- <img src="../../../public/img/bajgxt/linkimg.png"
                 @click.stop="goSystemHome"
                 title="进入系统" /> -->
      <span @click.stop="goSystemHome">进入系统</span>
      <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>
            <span>各辖区单位统计情况</span>
          </div>
          <div id="left1Echart"></div>
        </div>
        <div class="left2">
          <div class="title-pane1">
          <div class="title-pane2">
            <img src="../../../public/img/bajgxt/icon1.png" />
            <span>保安员持证情况</span>
          </div>
@@ -56,52 +54,43 @@
          <div class="leftbottom"></div>
          <div class="righttop"></div>
          <div class="rightbottom"></div>
          <el-table :data="tableData" stripe>
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column
              v-if="curTableType === 'car'"
              prop="carNum"
              label="押运车辆车牌号"
              width="180"
            >
            </el-table-column>
            <el-table-column
              v-if="curTableType === 'peo'"
              prop="name"
              label="押运人员名称"
              width="180"
            >
            </el-table-column>
            <el-table-column
              v-if="curTableType === 'gun'"
              prop="number"
              label="枪支编号"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="location" label="实时位置">
            </el-table-column>
            <el-table-column prop="company" label="所属公司"> </el-table-column>
            <el-table-column
              v-if="curTableType === 'car'"
              prop="linkman"
              label="联系人"
            >
            </el-table-column>
            <el-table-column
              v-if="curTableType === 'gun'"
              prop="linkman"
              label="负责人"
            >
            </el-table-column>
            <el-table-column prop="tel" label="联系电话"> </el-table-column>
            <el-table-column
              v-if="curTableType === 'peo'"
              prop="bz"
              label="备注"
            >
            </el-table-column>
          <el-table :data="tableData" stripe ref="indexTable">
            <template v-if="curTableType === 'car'">
              <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 === 'peo'">
              <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 === 'gun'">
              <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>
@@ -124,14 +113,16 @@
            <div class="card-list">
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u256.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
              <span>45</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>76</span>
              <span>资格审查</span>
              <span>资格审查异常</span>
            </div>
          </div>
          <!-- <div class="card-text"> -->
@@ -158,12 +149,14 @@
            <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>21</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>26</span>
              <span>未持证</span>
            </div>
@@ -175,7 +168,7 @@
          <!-- <div id="right2Echart"></div> -->
        </div>
        <div class="right3">
          <div class="title-pane1">
          <div class="title-pane2">
            <img src="../../../public/img/bajgxt/icon3.png" />
            <span>分局预警占比情况</span>
          </div>
@@ -191,17 +184,24 @@
import * as echarts from "echarts";
import optionJs from "./indexEchart";
import TileLayer from "ol/layer/Tile";
import { transform } from "ol/proj";
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 { Fill, Stroke, Circle, Style } from "ol/style";

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 } from "../../api/index/index";

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

export default {
  data() {
    return {
@@ -209,25 +209,53 @@
      curTableType: "car",
      tableData: [],
      value1: "1",
      carVectorLayer: null,
      peoVectorLayer: null,
      gunVectorLayer: null,

      options1: [
        {
          value: "1",
          label: "南昌市"
          label: "南昌市公安局"
        },
        {
          value: "2",
          label: "赣州市"
          label: "东湖分局"
        },
        {
          value: "3",
          label: "西湖分局"
        },
        {
          value: "4",
          label: "青云谱分局"
        },
        {
          value: "5",
          label: "青山湖分局"
        }
      ],
      value2: "1",
      options2: [
        {
          value: "1",
          label: "南昌市"
          label: "南昌市公安局"
        },
        {
          value: "2",
          label: "赣州市"
          label: "东湖分局"
        },
        {
          value: "3",
          label: "西湖分局"
        },
        {
          value: "4",
          label: "青云谱分局"
        },
        {
          value: "5",
          label: "青山湖分局"
        }
      ]
    };
@@ -273,197 +301,258 @@
    },

    getTableData(type) {
      this.carVectorLayer.getSource().clear();
      this.peoVectorLayer.getSource().clear();
      this.gunVectorLayer.getSource().clear();
      this.curTableType = type;
      let curLayer = null;
      let imgUrl = null;
      let geoData = [];
      if (type === "car") {
        curLayer = this.carVectorLayer;
        imgUrl = car;
        geoData = [
          [115.838082,28.716823],
          [115.91627,28.794341],
          [115.821984,28.658519],
          [115.870277,28.633159],
          [115.960539,28.678295],
          [115.981811,28.611852],
          [115.924894,28.738615],
          [115.876745,28.656364],
          [115.845412,28.652814],
          [115.940992,28.660548]
        ];
        this.tableData = [
          {
            carNum: "111111111111",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
            carNum: "赣A2A232",
            location: "南昌市红谷滩区清远路与瑞金路交叉路口往北约90米",
            company: "江西省卫民保安服务有限公司",
            linkman: "李琳",
            tel: "18928374611"
          },
          {
            carNum: "111111111111",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
            carNum: "赣BA6232",
            location: "顺外路1007",
            company: "南昌市公安局保安护卫公司",
            linkman: "王琦",
            tel: "13932743923"
          },
          {
            carNum: "111111111111",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
            carNum: "赣A2B297",
            location: "南昌市高新区绿地玫瑰城南昌高新区101智慧大厦二楼",
            company: "江西高创保安服务技术有限公司",
            linkman: "李梦",
            tel: "13214561324"
          },
          {
            carNum: "111111111111",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
            carNum: "赣B2E775",
            location: "江西省南昌市红谷滩区会展路莱蒙都会写字楼5A栋1110室",
            company: "江西海豹保安服务有限公司南昌分公司",
            linkman: "张强",
            tel: "13372889288"
          },
          {
            carNum: "111111111111",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
            carNum: "赣BF9252",
            location: "南昌市西湖区广场南路恒茂国际华城西南侧约90米",
            company: "南昌县神州保安分公司长运中队",
            linkman: "赵青",
            tel: "18937281746"
          }
        ];
      } else if (type === "peo") {
        curLayer = this.peoVectorLayer;
        imgUrl = peo;
        geoData = [
          [115.8835,28.622126],
          [115.861222,28.61477],
          [115.861653,28.640514],
          [115.917133,28.611852],
          [115.923888,28.602593],
          [115.89658,28.59828],
          [115.863091,28.597645],
          [115.979224,28.666379],
          [115.958239,28.610584],
          [115.867115,28.631638]
        ];
        this.tableData = [
          {
            name: "小张",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
            name: "张青",
            location: "江西省南昌市南昌县向阳路807号",
            company: "南昌市赣洪保安服务有限公司",
            tel: "19876223615",
            bz: ""
          },
          {
            name: "小张",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
            name: "王桂林",
            location: "南昌市南昌县斗南路莲塘四小西南侧约150米",
            company: "江西天网保安公司",
            tel: "18723982376",
            bz: ""
          },
          {
            name: "小张",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
            name: "王蒙",
            location: "丰和南大道2111号世茂新城A-12地块商业4-8号商业楼401室",
            company: "南昌赛夫保安服务有限公司",
            tel: "18909872345",
            bz: ""
          },
          {
            name: "小张",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
            name: "李嘉",
            location: "新建大道463",
            company: "新建区公安局保安服务公司",
            tel: "13315276390",
            bz: ""
          },
          {
            name: "小张",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
            name: "李林",
            location: "江西省南昌市青云谱区洪都南大道东50米凯旋国际大厦",
            company: "江西蓝盾保安服务有限公司",
            tel: "19108372654",
            bz: ""
          },
          {
            name: "小张",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
            name: "张国庆",
            location: "江西省南昌市红谷滩区金融大街君成商厦1单元三楼",
            company: "华远卫士保安公司",
            tel: "13187234523",
            bz: ""
          }
        ];
      } else if (type === "gun") {
        curLayer = this.gunVectorLayer;
        imgUrl = gun;
        geoData = [
          [115.867115,28.631638],
          [115.867115,28.631638],
          [115.879548,28.713338],
          [115.904844,28.700032],
          [115.845628,28.679373],
          [115.831973,28.690654],
          [115.814726,28.660611],
          [115.868912,28.638168],
          [115.762121,28.632589],
          [115.78483,28.58794],
          [115.812139,28.655159]
        ];
        this.tableData = [
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            number: "Q1311",
            location: "红谷滩新区唐宁街b座",
            company: "鹏盛保安服务有限公司",
            linkman: "张强",
            tel: "13782143412"
          },
          {
            number: "Q2111",
            location: "子安路89号银田大厦",
            company: "江西安泰保安服务有限公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q2141",
            location: "南昌市进贤县人民大道(豪景壹品)",
            company: "江西省天网保安服务有限公司进贤分公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1321",
            location: "站前西路176号公交公司",
            company: "顺安保安服务有限公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            location: "南昌市西湖区八一大道长运大厦东侧约60米",
            company: "江西长运股份有限公司保安大队",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            number: "Q1331",
            location: "南昌市西湖区三眼井街南昌市第十八中学北侧约150米",
            company: "杭州振杰保安服务(江西分公司)",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            linkman: "张强",
            tel: "13999999999"
            tel: "13789233124"
          }
        ];
      }

      let features = [];
      let style = new Style({
        image: new Icon({
          src: imgUrl,
          opacity: 1,
          scale: 0.5
        })
      });
      geoData.forEach(item => {
        let carFeature = new Feature({
          geometry: new Point(item)
        });
        carFeature.setStyle(style);
        features.push(carFeature);
      });
      curLayer.getSource().addFeatures(features);
      let extent = curLayer.getSource().getExtent();
      this.map.getView().fit(extent, this.map.getSize());
      this.$nextTick(() => {
        this.$refs.indexTable.doLayout();
      });
    },

    initMap() {
      this.map = new Map({
        target: "map", // 对应页面里 id 为 map 的元素
        target: "map",
        layers: [
          // 图层
          // new Tile({
          //   source: new OSM()
          // })
          new Tile({
            source: new OSM() // 图层数据源
            zIndex: 4,
            title: "影像",
            source: new XYZ({
              url:
                "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 行政区划
            })
          }),
          new Tile({
            zIndex: 5,
            title: "道路+中文注记",
            source: new XYZ({
              url:
                "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 注记
            })
          })
        ],
        view: new View({
          // 地图视图
          projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
          center: [115.892151, 28.676493], //坐标 厦门
          // minZoom: 10, // 地图缩放最小级别
          zoom: 11 //地图缩放级别
          projection: "EPSG:4326",
          center: [115.892151, 28.676493],
          zoom: 11
        })
      });
      var image = new Circle({
        radius: 5,
        fill: new Fill({
          color: "rgba(255, 0, 0, 1)"
        }),
        stroke: new Stroke({ color: "red", width: 1 })
      this.carVectorLayer = new VectorLayer({
        zIndex: 99,
        source: new VectorSource()
      });

      var styles = {
        Point: new Style({
          image: image
        })
      };
      axios.get("./nc.json").then(res => {
        let data = res.data.features;
        let vectorSource = new VectorSource({
          features: new GeoJSON().readFeatures(data)
        });
        let vectorLayer = new VectorLayer({
          source: vectorSource,
          style: styles
        });
        this.map.addLayer(vectorLayer);
      this.peoVectorLayer = new VectorLayer({
        zIndex: 99,
        source: new VectorSource()
      });
      // var center = new transform(
      //   [104.06667, 30.66667],
      //   "EPSG:4326",
      //   "EPSG:3857"
      // );
      // this.map = new Map({
      //   view: new View({
      //     center: center,
      //     zoom: 4
      //   }),
      //   target: "map"
      // });
      // var offlineMapLayer = new TileLayer({
      //   source: new XYZ({
      //     url: "./offlineMapTiles/{z}/{x}/{y}.png"
      //   })
      // });
      // this.map.addLayer(offlineMapLayer);

      this.gunVectorLayer = new VectorLayer({
        zIndex: 99,
        source: new VectorSource()
      });
      this.map.addLayer(this.carVectorLayer);
      this.map.addLayer(this.peoVectorLayer);
      this.map.addLayer(this.gunVectorLayer);

      this.getTableData("car");
    },

    goSystemHome() {
@@ -472,7 +561,7 @@
  },
  mounted() {
    this.initEchart();
    this.getTableData("car");
    // this.getTableData("car");
    this.initMap();
  }
};