From 4b7bd629df45b7ad68c2ffb14861cec75dce8aea Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 14 Jul 2021 10:12:25 +0800
Subject: [PATCH] 首页部分逻辑处理
---
src/views/home/index.vue | 843 ++++++++++++++++++++++++++++----------------------------
src/mock/menu.js | 4
src/page/login/userlogin.vue | 2
3 files changed, 425 insertions(+), 424 deletions(-)
diff --git a/src/mock/menu.js b/src/mock/menu.js
index 62e4716..22d2bfd 100644
--- a/src/mock/menu.js
+++ b/src/mock/menu.js
@@ -1,8 +1,8 @@
import Mock from 'mockjs'
const top = [{
- label: "保安人员管理",
- path: "/register/index",
+ label: "首页",
+ path: "/wel",
icon: 'el-icon-menu',
meta: {
i18n: 'dashboard',
diff --git a/src/page/login/userlogin.vue b/src/page/login/userlogin.vue
index 9f369f9..c008e23 100644
--- a/src/page/login/userlogin.vue
+++ b/src/page/login/userlogin.vue
@@ -137,7 +137,7 @@
spinner: "el-icon-loading"
});
this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
- this.$router.push({path: this.tagWel.value});
+ this.$router.push({path: '/wel'});
loading.close();
}).catch(() => {
loading.close();
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 759be9f..3ed6435 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,158 +1,155 @@
<template>
- <div class="bajgxt-home">
- <div class="head-title">
- <span>保安监管系统可视化平台</span>
- <img src="../../../public/img/bajgxt/linkimg.png" title="进入系统" />
+ <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>
- <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>
@@ -172,285 +169,289 @@
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));
+ 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);
+ }
+ });
- 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"
- }
- ];
- }
+ 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' });
+ }
},
-
- 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);
+ mounted () {
+ this.initEchart();
+ this.getTableData("car");
+ this.initMap();
}
- },
- mounted() {
- this.initEchart();
- this.getTableData("car");
- this.initMap();
- }
};
</script>
<style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
/deep/ .el-select-dropdown {
- border: 1px solid #9199ab;
- background-color: #022c53;
+ border: 1px solid #9199ab;
+ background-color: #022c53;
}
/deep/ .el-select-dropdown__item.hover,
/deep/ .el-select-dropdown__item:hover {
- background-color: #03203e;
+ background-color: #03203e;
}
</style>
--
Gitblit v1.9.3