From e9cc2a95249cd4a1a86d5ce331f0bb7efbff97a6 Mon Sep 17 00:00:00 2001
From: zpzgiser <45806316+zpzgiser@users.noreply.github.com>
Date: Tue, 13 Jul 2021 20:43:12 +0800
Subject: [PATCH] 首页
---
src/views/wel/index.vue | 320 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 314 insertions(+), 6 deletions(-)
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index e789ddb..b4a8619 100644
--- a/src/views/wel/index.vue
+++ b/src/views/wel/index.vue
@@ -1,15 +1,323 @@
<template>
- <el-card>
- 首页
- </el-card>
+ <div class="bajgxt-home">
+ <div class="head-title">
+ <span>保安监管系统可视化平台</span>
+ <img src="../../../public/img/bajgxt/linkimg.png" 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">
+ <img src="../../../public/img/bajgxt/car.png" alt="" />
+ <div class="text">
+ <span>押运车辆</span>
+ <span>700</span>
+ </div>
+ </div>
+ <div class="mapBtn">
+ <img src="../../../public/img/bajgxt/peo.png" alt="" />
+ <div class="text">
+ <span>保安员</span>
+ <span>700</span>
+ </div>
+ </div>
+ <div class="mapBtn">
+ <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 prop="carNum" 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 prop="linkman" label="联系人"> </el-table-column>
+ <el-table-column prop="tel" 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,
+ 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"
+ }
+ ],
+ 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));
+ },
+
+ 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);
+ });
+
+ // debugger;
+ // 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);
+ }
+ },
+ mounted() {
+ this.initEchart();
+ this.initMap();
+ }
+};
</script>
-<style>
-
+<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>
--
Gitblit v1.9.3