From c4beaaabb7848d033a5bc7367df8047c9e4704e2 Mon Sep 17 00:00:00 2001
From: zhengpz <11@qq.com>
Date: Fri, 23 Jul 2021 00:41:27 +0800
Subject: [PATCH] 首页接口对接
---
src/views/home/index.vue | 396 +++++++++++++++++++++-----------------------------------
1 files changed, 150 insertions(+), 246 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a67d8a6..00562b5 100644
--- a/src/views/home/index.vue
+++ b/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>
--
Gitblit v1.9.3