<template>
|
<div class="bajgxt-home">
|
<div class="head-title">
|
<span>保安监管系统可视化平台</span>
|
<img src="../../../public/img/bajgxt/linkimg.png"
|
@click.stop="goSystemHome"
|
title="进入系统" />
|
</div>
|
<div class="content">
|
<div class="left">
|
<div class="left1">
|
<div class="title-pane">
|
<img src="../../../public/img/bajgxt/icon1.png" />
|
<span>业务对象统计--单位</span>
|
</div>
|
<div id="left1Echart"></div>
|
</div>
|
<div class="left2">
|
<div class="title-pane1">
|
<img src="../../../public/img/bajgxt/icon1.png" />
|
<span>保安员持证情况</span>
|
</div>
|
<div id="left2Echart"></div>
|
</div>
|
</div>
|
<div class="middle">
|
<div class="mapimg">
|
<!-- <div></div> -->
|
<div class="mapBtn"
|
@click="getTableData('car')">
|
<img src="../../../public/img/bajgxt/car.png"
|
alt="" />
|
<div class="text">
|
<span>押运车辆</span>
|
<span>700</span>
|
</div>
|
</div>
|
<div class="mapBtn"
|
@click="getTableData('peo')">
|
<img src="../../../public/img/bajgxt/peo.png"
|
alt="" />
|
<div class="text">
|
<span>保安员</span>
|
<span>700</span>
|
</div>
|
</div>
|
<div class="mapBtn"
|
@click="getTableData('gun')">
|
<img src="../../../public/img/bajgxt/gun.png"
|
alt="" />
|
<div class="text">
|
<span>枪支</span>
|
<span>700</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>
|
<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>
|
</div>
|
</div>
|
<div class="right">
|
<div class="right1">
|
<div class="title-pane1">
|
<img src="../../../public/img/bajgxt/icon2.png" />
|
<span>保安员预警统计</span>
|
<el-select v-model="value1">
|
<el-option v-for="item in options1"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</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 v-model="value2"
|
placeholder="请选择">
|
<el-option v-for="item in options2"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</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-pane1">
|
<img src="../../../public/img/bajgxt/icon3.png" />
|
<span>分局预警占比情况</span>
|
</div>
|
<div id="right3Echart"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import "ol/ol.css";
|
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 GeoJSON from "ol/format/GeoJSON";
|
import axios from "../../router/axios";
|
import { securityTotal, holderNum, securityPer } from "../../api/index/index";
|
export default {
|
data () {
|
return {
|
map: null,
|
curTableType: "car",
|
tableData: [],
|
value1: "1",
|
options1: [
|
{
|
value: "1",
|
label: "南昌市"
|
},
|
{
|
value: "2",
|
label: "赣州市"
|
}
|
],
|
value2: "1",
|
options2: [
|
{
|
value: "1",
|
label: "南昌市"
|
},
|
{
|
value: "2",
|
label: "赣州市"
|
}
|
]
|
};
|
},
|
methods: {
|
initEchart () {
|
securityTotal().then(res => {
|
if (res.data.code == 200) {
|
let securityData = res.data.data;
|
let left1Echart = echarts.init(
|
document.getElementById("left1Echart")
|
);
|
left1Echart.setOption(optionJs.left1Data(securityData));
|
} else {
|
this.$message.error(res.msg);
|
}
|
});
|
|
holderNum().then(res => {
|
if (res.data.code === 200) {
|
let data = res.data.data;
|
let left2Echart = echarts.init(
|
document.getElementById("left2Echart")
|
);
|
left2Echart.setOption(optionJs.left2Data(data));
|
} else {
|
this.$message.error(res.msg);
|
}
|
});
|
// securityPer().then(res => {
|
// if (res.data.code === 200) {
|
// let data = res.data.data;
|
let data = [];
|
let right1Echart = echarts.init(document.getElementById("right1Echart"));
|
right1Echart.setOption(optionJs.right1Data(data));
|
// }
|
// });
|
|
let right2Echart = echarts.init(document.getElementById("right2Echart"));
|
right2Echart.setOption(optionJs.right2Data(data));
|
let right3Echart = echarts.init(document.getElementById("right3Echart"));
|
right3Echart.setOption(optionJs.right3Data(data));
|
},
|
|
getTableData (type) {
|
this.curTableType = type;
|
if (type === "car") {
|
this.tableData = [
|
{
|
carNum: "111111111111",
|
location: "红谷滩",
|
company: "公司",
|
linkman: "小李",
|
tel: "13999999999"
|
},
|
{
|
carNum: "111111111111",
|
location: "红谷滩",
|
company: "公司",
|
linkman: "小李",
|
tel: "13999999999"
|
},
|
{
|
carNum: "111111111111",
|
location: "红谷滩",
|
company: "公司",
|
linkman: "小李",
|
tel: "13999999999"
|
},
|
{
|
carNum: "111111111111",
|
location: "红谷滩",
|
company: "公司",
|
linkman: "小李",
|
tel: "13999999999"
|
},
|
{
|
carNum: "111111111111",
|
location: "红谷滩",
|
company: "公司",
|
linkman: "小李",
|
tel: "13999999999"
|
}
|
];
|
} else if (type === "peo") {
|
this.tableData = [
|
{
|
name: "小张",
|
location: "红谷滩",
|
company: "公司",
|
tel: "13999999999",
|
bz: "zzz"
|
},
|
{
|
name: "小张",
|
location: "红谷滩",
|
company: "公司",
|
tel: "13999999999",
|
bz: "zzz"
|
},
|
{
|
name: "小张",
|
location: "红谷滩",
|
company: "公司",
|
tel: "13999999999",
|
bz: "zzz"
|
},
|
{
|
name: "小张",
|
location: "红谷滩",
|
company: "公司",
|
tel: "13999999999",
|
bz: "zzz"
|
},
|
{
|
name: "小张",
|
location: "红谷滩",
|
company: "公司",
|
tel: "13999999999",
|
bz: "zzz"
|
},
|
{
|
name: "小张",
|
location: "红谷滩",
|
company: "公司",
|
tel: "13999999999",
|
bz: "zzz"
|
}
|
];
|
} else if (type === "gun") {
|
this.tableData = [
|
{
|
number: "Q1111",
|
location: "红谷滩",
|
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"
|
},
|
{
|
number: "Q1111",
|
location: "红谷滩",
|
company: "公司",
|
linkman: "张强",
|
tel: "13999999999"
|
},
|
{
|
number: "Q1111",
|
location: "红谷滩",
|
company: "公司",
|
linkman: "张强",
|
tel: "13999999999"
|
}
|
];
|
}
|
},
|
|
initMap () {
|
this.map = new Map({
|
target: "map", // 对应页面里 id 为 map 的元素
|
layers: [
|
// 图层
|
new Tile({
|
source: new OSM() // 图层数据源
|
})
|
],
|
view: new View({
|
// 地图视图
|
projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
|
center: [115.892151, 28.676493], //坐标 厦门
|
// minZoom: 10, // 地图缩放最小级别
|
zoom: 11 //地图缩放级别
|
})
|
});
|
var image = new Circle({
|
radius: 5,
|
fill: new Fill({
|
color: "rgba(255, 0, 0, 1)"
|
}),
|
stroke: new Stroke({ color: "red", width: 1 })
|
});
|
|
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);
|
});
|
// 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);
|
},
|
|
goSystemHome () {
|
this.$router.push({ path: '/register/index' });
|
}
|
},
|
mounted () {
|
this.initEchart();
|
this.getTableData("car");
|
this.initMap();
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@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;
|
}
|
</style>
|
