首页接口对接

zhengpz

2021-07-23 c4beaaabb7848d033a5bc7367df8047c9e4704e2

首页接口对接

 src/api/index/index.js

@@ -14,10 +14,38 @@
};

export const securityPer = () => {
    return request({
      url: "/api/performance/queryYearPer",
      method: "get"
    });
  };
  return request({
    url: "/api/performance/queryYearPer",
    method: "get"
  });
};
export const getLiveLocationVoList = (params) => {
  return request({
    url: "/api/liveLocation/getLiveLocationVoList",
    method: "get",
    params: params
  });
};
export const lazyTreeJu = () => {
  return request({
    url: "/api/information/lazyTreeJu",
    method: "post"
  });
};
export const noholderNum = (params) => {
  return request({
    url: "/api/information/selectInCount",
    method: "post",
    params: params
  });
};
export const noSocialSecurity = (params) => {
  return request({
    url: "/api/information/selectCs",
    method: "post",
    params: params
  });
};




 src/views/home/index.scss

@@ -371,7 +371,7 @@
    position: absolute;
    z-index: 99;
    color: #fff;
    background: #4162a2;
    background: #014e84;
    margin-top: 38px;
    margin-left: calc(100% - 140px);
    border-radius: 11px;
@@ -402,7 +402,7 @@
      }
    }
    &:hover {
      box-shadow: 0px 0px 10px #568df3;
      box-shadow: 0px 0px 10px #7ff3f4;
    }
  }
  .mapBtn:nth-child(2) {

 src/views/home/index.vue

@@ -25,25 +25,25 @@
      <div class="middle">
        <div class="mapimg">
          <!-- <div></div> -->
          <div class="mapBtn" @click="getTableData('car')">
          <div class="mapBtn" @click="setMapData(2)">
            <img src="../../../public/img/bajgxt/car.png" alt="" />
            <div class="text">
              <span>押运车辆</span>
              <span>700</span>
              <span>{{ carNum }}</span>
            </div>
          </div>
          <div class="mapBtn" @click="getTableData('peo')">
          <div class="mapBtn" @click="setMapData(1)">
            <img src="../../../public/img/bajgxt/peo.png" alt="" />
            <div class="text">
              <span>保安员</span>
              <span>700</span>
              <span>{{ peoNum }}</span>
            </div>
          </div>
          <div class="mapBtn" @click="getTableData('gun')">
          <div class="mapBtn" @click="setMapData(3)">
            <img src="../../../public/img/bajgxt/gun.png" alt="" />
            <div class="text">
              <span>枪支</span>
              <span>700</span>
              <span>{{ gunNum }}</span>
            </div>
          </div>
          <div id="map"></div>
@@ -55,7 +55,7 @@
          <div class="righttop"></div>
          <div class="rightbottom"></div>
          <el-table :data="tableData" stripe ref="indexTable">
            <template v-if="curTableType === 'car'">
            <template v-if="curTableType === 2">
              <el-table-column
                :key="curTableType"
                type="index"
@@ -99,7 +99,7 @@
              >
              </el-table-column>
            </template>
            <template v-if="curTableType === 'peo'">
            <template v-if="curTableType === 1">
              <el-table-column
                :key="curTableType"
                type="index"
@@ -136,10 +136,10 @@
                label="联系电话"
              >
              </el-table-column>
              <el-table-column :key="curTableType" prop="bz" label="备注">
              </el-table-column>
              <!-- <el-table-column :key="curTableType" prop="bz" label="备注">
              </el-table-column> -->
            </template>
            <template v-if="curTableType === 'gun'">
            <template v-if="curTableType === 3">
              <el-table-column
                :key="curTableType"
                type="index"
@@ -190,8 +190,8 @@
            <el-select v-model="value1">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :key="item.id"
                :label="item.title"
                :value="item.value"
              >
              </el-option>
@@ -202,14 +202,14 @@
              <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>{{ 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>76</span>
              <span>{{ rightData.qualification }}</span>
              <span>资格审查异常</span>
            </div>
          </div>
@@ -223,11 +223,15 @@
          <div class="title-pane1">
            <img src="../../../public/img/bajgxt/icon2.png" />
            <span>保安公司预警统计</span>
            <el-select v-model="value2" placeholder="请选择">
            <el-select
              v-model="value2"
              placeholder="请选择"
              @change="warningChange"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :key="item.id"
                :label="item.title"
                :value="item.value"
              >
              </el-option>
@@ -238,14 +242,14 @@
              <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>{{ 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>26</span>
              <span>{{ rightData.noholder }}</span>
              <span>未持证</span>
            </div>
          </div>
@@ -284,7 +288,15 @@
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 {
  securityTotal,
  holderNum,
  securityPer,
  getLiveLocationVoList,
  lazyTreeJu,
  noholderNum,
  noSocialSecurity,
} from "../../api/index/index";

import car from "@/assets/img/car.png";
import peo from "@/assets/img/people.png";
@@ -296,59 +308,28 @@
      map: null,
      curTableType: "car",
      tableData: [],
      value1: "1",
      value1: "",
      carVectorLayer: null,
      peoVectorLayer: null,
      gunVectorLayer: null,

      options1: [
        {
          value: "1",
          label: "南昌市公安局",
        },
        {
          value: "2",
          label: "东湖分局",
        },
        {
          value: "3",
          label: "西湖分局",
        },
        {
          value: "4",
          label: "青云谱分局",
        },
        {
          value: "5",
          label: "青山湖分局",
        },
      ],
      value2: "1",
      options2: [
        {
          value: "1",
          label: "南昌市公安局",
        },
        {
          value: "2",
          label: "东湖分局",
        },
        {
          value: "3",
          label: "西湖分局",
        },
        {
          value: "4",
          label: "青云谱分局",
        },
        {
          value: "5",
          label: "青山湖分局",
        },
      ],
      options1: [],
      value2: "",
      options2: [],
      rightData: {
        poorPerformance: 0,
        qualification: 0,
        socialSecurity: 0,
        noholder: 0,
      },
      carNum: 0,
      peoNum: 0,
      gunNum: 0,
      mapData:null
    };
  },
  methods: {
    // 左侧两个表的接口返回数据
    initEchart() {
      securityTotal().then((res) => {
        if (res.data.code == 200) {
@@ -387,188 +368,24 @@
      let right3Echart = echarts.init(document.getElementById("right3Echart"));
      right3Echart.setOption(optionJs.right3Data(data));
    },

    getTableData(type) {
      this.carVectorLayer.getSource().clear();
      this.peoVectorLayer.getSource().clear();
      this.gunVectorLayer.getSource().clear();
    setMapData(type) {
      this.tableData = this.mapData[type]["table"];
      this.curTableType = type;
      let curLayer = null;
      let imgUrl = null;
      let geoData = [];
      if (type === "car") {
      this.carVectorLayer.getSource().clear();
      this.peoVectorLayer.getSource().clear();
      this.gunVectorLayer.getSource().clear();
      if (type === 2) {
        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: "赣A2A232",
            location: "南昌市红谷滩区清远路与瑞金路交叉路口往北约90米",
            company: "江西省卫民保安服务有限公司",
            linkman: "李琳",
            tel: "18928374611",
          },
          {
            carNum: "赣BA6232",
            location: "顺外路1007",
            company: "南昌市公安局保安护卫公司",
            linkman: "王琦",
            tel: "13932743923",
          },
          {
            carNum: "赣A2B297",
            location: "南昌市高新区绿地玫瑰城南昌高新区101智慧大厦二楼",
            company: "江西高创保安服务技术有限公司",
            linkman: "李梦",
            tel: "13214561324",
          },
          {
            carNum: "赣B2E775",
            location: "江西省南昌市红谷滩区会展路莱蒙都会写字楼5A栋1110室",
            company: "江西海豹保安服务有限公司南昌分公司",
            linkman: "张强",
            tel: "13372889288",
          },
          {
            carNum: "赣BF9252",
            location: "南昌市西湖区广场南路恒茂国际华城西南侧约90米",
            company: "南昌县神州保安分公司长运中队",
            linkman: "赵青",
            tel: "18937281746",
          },
        ];
      } else if (type === "peo") {
      } else if (type === 1) {
        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: "江西省南昌市南昌县向阳路807号",
            company: "南昌市赣洪保安服务有限公司",
            tel: "19876223615",
            bz: "",
          },
          {
            name: "王桂林",
            location: "南昌市南昌县斗南路莲塘四小西南侧约150米",
            company: "江西天网保安公司",
            tel: "18723982376",
            bz: "",
          },
          {
            name: "王蒙",
            location: "丰和南大道2111号世茂新城A-12地块商业4-8号商业楼401室",
            company: "南昌赛夫保安服务有限公司",
            tel: "18909872345",
            bz: "",
          },
          {
            name: "李嘉",
            location: "新建大道463",
            company: "新建区公安局保安服务公司",
            tel: "13315276390",
            bz: "",
          },
          {
            name: "李林",
            location: "江西省南昌市青云谱区洪都南大道东50米凯旋国际大厦",
            company: "江西蓝盾保安服务有限公司",
            tel: "19108372654",
            bz: "",
          },
          {
            name: "张国庆",
            location: "江西省南昌市红谷滩区金融大街君成商厦1单元三楼",
            company: "华远卫士保安公司",
            tel: "13187234523",
            bz: "",
          },
        ];
      } else if (type === "gun") {
      } else if (type === 3) {
        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: "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: "南昌市西湖区八一大道长运大厦东侧约60米",
            company: "江西长运股份有限公司保安大队",
            linkman: "张强",
            tel: "13999999999",
          },
          {
            number: "Q1331",
            location: "南昌市西湖区三眼井街南昌市第十八中学北侧约150米",
            company: "杭州振杰保安服务(江西分公司)",
            linkman: "张强",
            tel: "13789233124",
          },
        ];
      }

      let features = [];
      let style = new Style({
        image: new Icon({
@@ -577,7 +394,7 @@
          scale: 0.5,
        }),
      });
      geoData.forEach((item) => {
      this.mapData[type]["geoData"].forEach((item) => {
        let carFeature = new Feature({
          geometry: new Point(item),
        });
@@ -585,10 +402,60 @@
        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();
      if (this.mapData[type]["geoData"].length > 1) {
        let extent = curLayer.getSource().getExtent();
        this.map.getView().fit(extent, this.map.getSize());
        this.$nextTick(() => {
          this.$refs.indexTable.doLayout();
        });
      } else {
        this.map.getView().setCenter(this.mapData[type]["geoData"][0]);
        this.map.getView().setZoom(11);
      }
    },
    // 获取表格及地图上的数据
    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,
            };
            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);
        }
      });
    },

@@ -617,7 +484,7 @@
        view: new View({
          projection: "EPSG:4326",
          center: [115.892151, 28.676493],
          zoom: 11,
          zoom: 10,
        }),
      });
      this.carVectorLayer = new VectorLayer({
@@ -638,7 +505,43 @@
      this.map.addLayer(this.peoVectorLayer);
      this.map.addLayer(this.gunVectorLayer);

      this.getTableData("car");
      this.getTableData(0);
    },
    // 获取辖区列表
    getOfficeData() {
      lazyTreeJu().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.getNoholderNum();
          this.getNoSocialSecurity();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 未持证
    getNoholderNum() {
      noholderNum({ jurisdiction: this.value2 }).then((res) => {
        if (res.data.code === 200) {
          this.rightData.noholder = res.data.data[0].Count;
        }
      });
    },
    // 未缴纳社保
    getNoSocialSecurity() {
      noSocialSecurity({ jurisdiction: this.value2 }).then((res) => {
        if (res.data.code === 200) {
          this.rightData.socialSecurity = res.data.data[0].Count;
        }
      });
    },
    warningChange() {
      this.getNoholderNum();
      this.getNoSocialSecurity();
    },

    goSystemHome() {
@@ -650,6 +553,7 @@
    this.initEchart();
    // this.getTableData("car");
    this.initMap();
    this.getOfficeData();
  },
};
</script>

 src/views/home/indexEchart.js

@@ -19,10 +19,14 @@
      }
    },
    color: [
      "#91cc75",
      "#fac858",
      "#73c0de",
      "#3ba272",
      '#2ec7c9',
      '#b6a2de',
      '#5ab1ef',
      '#ffb980',

      // "#fac858",
      // "#73c0de",
      // "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
@@ -41,6 +45,7 @@
      }
    },
    grid: {
      top:'5%',
      left: "5%",
      right: "6%",
      bottom: "10%",
@@ -70,8 +75,7 @@
        name: "自招保安单位",
        type: "bar",
        stack: "total",
        barMinWidth: 20,
        barMaxWidth: 40,
        barWidth: 20,
        emphasis: {
          focus: "series"
        },
@@ -125,8 +129,8 @@
      }
    },
    color: [
      "#91cc75",
      "#fac858",
      "#3fb1e3",
      "#0dad7b",
      "#73c0de",
      "#3ba272",
      "#fc8452",
@@ -147,6 +151,7 @@
      }
    },
    grid: {
      top:'5%',
      left: "5%",
      right: "6%",
      bottom: "15%",
@@ -177,8 +182,7 @@
        name: "持证人数",
        type: "bar",
        // barWidth:30,
        barMinWidth: 20,
        barMaxWidth: 40,
        barWidth: 20,
        stack: "total",
        emphasis: {
          focus: "series"