From e07b830d7c4b3e401f3ffaaa65986618a2a4b77d Mon Sep 17 00:00:00 2001
From: zhengpz <1838927346@qq.com>
Date: Fri, 13 Aug 2021 01:43:53 +0800
Subject: [PATCH] 改首页及统计明细表
---
src/views/home/index.vue | 334 +++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 263 insertions(+), 71 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2e9ef9c..28e4088 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -18,12 +18,24 @@
<div class="title-pane2">
<img src="../../../public/img/bajgxt/icon1.png" />
<span>保安员持证情况</span>
+ <span class="left2-btn btn1" @click="getHolderNum(0)"
+ >辖区统计</span
+ >
+ <span class="left2-btn btn2" @click="getHolderNum(1)"
+ >男女结构</span
+ >
</div>
<div id="left2Echart" v-loading="left2loading"></div>
</div>
</div>
<div class="middle" v-loading="middleloading">
<div class="mapimg">
+ <div class="textBox">
+ <transition name="slide">
+ <p class="text" :key="text.id">{{ text.val }}</p>
+ </transition>
+ </div>
+
<!-- <div></div> -->
<div class="mapBtn" @click="setMapData(2)">
<img src="../../../public/img/bajgxt/car.png" alt />
@@ -56,8 +68,18 @@
<div class="rightbottom"></div>
<el-table :data="tableData" stripe ref="indexTable">
<template v-if="curTableType === 2">
- <el-table-column :key="curTableType" type="index" label="序号" width="50"></el-table-column>
- <el-table-column :key="curTableType" prop="carNum" label="押运车辆车牌号" width="180"></el-table-column>
+ <el-table-column
+ :key="curTableType"
+ type="index"
+ label="序号"
+ width="50"
+ ></el-table-column>
+ <el-table-column
+ :key="curTableType"
+ prop="carNum"
+ label="押运车辆车牌号"
+ width="180"
+ ></el-table-column>
<el-table-column
:key="curTableType"
show-overflow-tooltip
@@ -70,11 +92,26 @@
prop="company"
label="所属公司"
></el-table-column>
- <el-table-column :key="curTableType" show-overflow-tooltip prop="linkman" label="联系人"></el-table-column>
- <el-table-column :key="curTableType" show-overflow-tooltip prop="tel" label="联系电话"></el-table-column>
+ <el-table-column
+ :key="curTableType"
+ show-overflow-tooltip
+ prop="linkman"
+ label="联系人"
+ ></el-table-column>
+ <el-table-column
+ :key="curTableType"
+ show-overflow-tooltip
+ prop="tel"
+ label="联系电话"
+ ></el-table-column>
</template>
<template v-if="curTableType === 1">
- <el-table-column :key="curTableType" type="index" label="序号" width="50"></el-table-column>
+ <el-table-column
+ :key="curTableType"
+ type="index"
+ label="序号"
+ width="50"
+ ></el-table-column>
<el-table-column
:key="curTableType"
show-overflow-tooltip
@@ -94,12 +131,22 @@
prop="company"
label="所属公司"
></el-table-column>
- <el-table-column :key="curTableType" show-overflow-tooltip prop="tel" label="联系电话"></el-table-column>
+ <el-table-column
+ :key="curTableType"
+ show-overflow-tooltip
+ prop="tel"
+ label="联系电话"
+ ></el-table-column>
<!-- <el-table-column :key="curTableType" prop="bz" label="备注">
</el-table-column>-->
</template>
<template v-if="curTableType === 3">
- <el-table-column :key="curTableType" type="index" label="序号" width="50"></el-table-column>
+ <el-table-column
+ :key="curTableType"
+ type="index"
+ label="序号"
+ width="50"
+ ></el-table-column>
<el-table-column
:key="curTableType"
show-overflow-tooltip
@@ -119,8 +166,17 @@
prop="company"
label="所属公司"
></el-table-column>
- <el-table-column :key="curTableType" show-overflow-tooltip prop="linkman" label="负责人"></el-table-column>
- <el-table-column :key="curTableType" prop="tel" label="联系电话"></el-table-column>
+ <el-table-column
+ :key="curTableType"
+ show-overflow-tooltip
+ prop="linkman"
+ label="负责人"
+ ></el-table-column>
+ <el-table-column
+ :key="curTableType"
+ prop="tel"
+ label="联系电话"
+ ></el-table-column>
</template>
</el-table>
</div>
@@ -140,7 +196,16 @@
</el-select>
</div>
<div class="right-content" v-loading="right1loading">
- <div class="card-list">
+ <span class="left2-btn date" @click="getPoorPerformance(0)"
+ >当日</span
+ >
+ <span class="left2-btn mounce" @click="getPoorPerformance(1)"
+ >当月</span
+ >
+ <span class="left2-btn all" @click="getPoorPerformance(2)"
+ >全部</span
+ >
+ <div class="card-list" style="margin-top: 38px">
<img src="../../../public/img/bajgxt/u4.png" />
<img src="../../../public/img/bajgxt/u256.png" />
<img src="../../../public/img/bajgxt/u1.png" />
@@ -165,7 +230,11 @@
<div class="title-pane1">
<img src="../../../public/img/bajgxt/icon2.png" />
<span>保安公司预警统计</span>
- <el-select v-model="value2" placeholder="请选择" @change="peoWarning">
+ <el-select
+ v-model="value2"
+ placeholder="请选择"
+ @change="peoWarning"
+ >
<el-option
v-for="item in options2"
:key="item.id"
@@ -175,7 +244,42 @@
</el-select>
</div>
<div class="right-content" v-loading="right2loading">
- <div class="card-list">
+ <div class="rightData rightData1">
+ <img src="../../../public/img/bajgxt/u215.png" alt />
+ <div class="text">
+ <span>信息更新频率</span>
+ <span>123次</span>
+ </div>
+ </div>
+ <div class="rightData rightData2">
+ <img src="../../../public/img/bajgxt/u231.png" alt />
+ <div class="text">
+ <span>数据未更新</span>
+ <span>45条</span>
+ </div>
+ </div>
+ <div class="rightData rightData3">
+ <img src="../../../public/img/bajgxt/u232.png" alt />
+ <div class="text">
+ <span>资质不全</span>
+ <span>23个</span>
+ </div>
+ </div>
+ <div class="rightData rightData4">
+ <img src="../../../public/img/bajgxt/u233.png" alt />
+ <div class="text">
+ <span>没开展业务</span>
+ <span>12个</span>
+ </div>
+ </div>
+ <div class="rightData rightData5">
+ <img src="../../../public/img/bajgxt/111.png" alt />
+ <div class="text">
+ <span>被公安查处</span>
+ <span>6个</span>
+ </div>
+ </div>
+ <!-- <div class="card-list">
<img src="../../../public/img/bajgxt/u4.png" />
<img src="../../../public/img/bajgxt/u235.png" />
<img src="../../../public/img/bajgxt/u1.png" />
@@ -188,7 +292,7 @@
<img src="../../../public/img/bajgxt/u1.png" />
<span>{{ rightData.noholder }}</span>
<span>未持证</span>
- </div>
+ </div> -->
</div>
<!-- <div class="card-text"> -->
<!-- <span>未缴纳社保情况</span><span>902,432</span><span>起</span
@@ -235,7 +339,7 @@
noSocialSecurity,
selectFj,
selectBx,
- selectExtype
+ selectExtype,
} from "../../api/index/index";
import car from "@/assets/img/car.png";
@@ -260,7 +364,7 @@
poorPerformance: 0,
qualification: 0,
socialSecurity: 0,
- noholder: 0
+ noholder: 0,
},
carNum: 0,
peoNum: 0,
@@ -270,20 +374,41 @@
left1Echart: null,
left2Echart: null,
mapEchart: null,
- right3Echart: null
+ right3Echart: null,
},
left1loading: true,
left2loading: true,
middleloading: true,
right1loading: true,
right2loading: true,
- right3loading: true
+ right3loading: true,
+ textArr: [],
+ number: 0,
};
},
+ computed: {
+ text() {
+ return {
+ id: this.number,
+ val: this.textArr[this.number],
+ };
+ },
+ },
methods: {
+ startMove() {
+ // eslint-disable-next-line
+ let timer = setTimeout(() => {
+ if (this.number === 2) {
+ this.number = 0;
+ } else {
+ this.number += 1;
+ }
+ this.startMove();
+ }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
+ },
// 左侧两个表的接口返回数据
initEchart() {
- securityTotal().then(res => {
+ securityTotal().then((res) => {
if (res.data.code == 200) {
let securityData = res.data.data;
if (!this.echarts.left1Echart) {
@@ -297,21 +422,6 @@
}
this.left1loading = false;
});
-
- holderNum().then(res => {
- if (res.data.code === 200) {
- let data = res.data.data;
- if (!this.echarts.left2Echart) {
- this.echarts.left2Echart = echarts.init(
- document.getElementById("left2Echart")
- );
- }
- this.echarts.left2Echart.setOption(optionJs.left2Data(data));
- } else {
- this.$message.error(res.msg);
- }
- this.left2loading = false;
- });
// securityPer().then(res => {
// if (res.data.code === 200) {
// let data = res.data.data;
@@ -322,19 +432,43 @@
// let right2Echart = echarts.init(document.getElementById("right2Echart"));
// right2Echart.setOption(optionJs.right2Data(data));
- selectFj().then(res => {
+ selectFj().then((res) => {
if (res.data.code === 200) {
if (!this.echarts.right3Echart) {
this.echarts.right3Echart = echarts.init(
document.getElementById("right3Echart")
);
}
- this.echarts.right3Echart.setOption(optionJs.right3Data(res.data.data));
+ this.echarts.right3Echart.setOption(
+ optionJs.right3Data(res.data.data)
+ );
} else {
this.$message.error(res.msg);
}
this.right3loading = false;
});
+ },
+
+ getHolderNum(type) {
+ if (type === 0) {
+ holderNum().then((res) => {
+ if (res.data.code === 200) {
+ let data = res.data.data;
+ if (!this.echarts.left2Echart) {
+ this.echarts.left2Echart = echarts.init(
+ document.getElementById("left2Echart")
+ );
+ }
+ this.echarts.left2Echart.setOption(optionJs.left2Data(data));
+ } else {
+ this.$message.error(res.msg);
+ }
+ this.left2loading = false;
+ });
+ } else {
+ let data = [];
+ this.echarts.left2Echart.setOption(optionJs.left3Data(data));
+ }
},
initMapEchart(data, type) {
if (!this.echarts.mapEchart) {
@@ -348,6 +482,51 @@
this.tableData = this.mapData[type]["table"];
this.initMapEchart(this.mapData[type], type);
this.middleloading = false;
+ this.textArr = [];
+ if (type === 2) {
+ this.tableData.forEach((item) => {
+ let obj =
+ "押运车辆车牌号" +
+ item.carNum +
+ ",当前位置" +
+ item.location +
+ ",所属公司" +
+ item.company +
+ ",联系人" +
+ item.linkman +
+ ",联系电话" +
+ item.tel;
+ this.textArr.push(obj);
+ });
+ } else if (type === 1) {
+ this.tableData.forEach((item) => {
+ let obj =
+ "押运人员" +
+ item.name +
+ ",当前位置" +
+ item.location +
+ ",所属公司" +
+ item.linkman +
+ ",联系电话" +
+ item.tel;
+ this.textArr.push(obj);
+ });
+ } else if (type === 3) {
+ this.tableData.forEach((item) => {
+ let obj =
+ "枪支编号" +
+ item.number +
+ ",当前位置" +
+ item.location +
+ ",所属公司" +
+ item.company +
+ ",负责人" +
+ item.linkman +
+ ",联系电话" +
+ item.tel;
+ this.textArr.push(obj);
+ });
+ }
// let curLayer = null;
// let imgUrl = null;
// this.carVectorLayer.getSource().clear();
@@ -395,21 +574,21 @@
let middleData = {
1: {
table: [],
- geoData: []
+ geoData: [],
},
2: {
table: [],
- geoData: []
+ geoData: [],
},
3: {
table: [],
- geoData: []
- }
+ geoData: [],
+ },
};
- getLiveLocationVoList({ type: type }).then(res => {
+ getLiveLocationVoList({ type: type }).then((res) => {
if (res.data.code === 200) {
let allData = res.data.data;
- allData.forEach(m => {
+ allData.forEach((m) => {
let obj = {
location: m.location,
name: m.name,
@@ -417,7 +596,7 @@
linkman: m.linkman,
company: m.company,
tel: m.tel,
- carNum: m.carNum
+ carNum: m.carNum,
};
// let geoObj = {
@@ -426,7 +605,7 @@
// };
middleData[m.type]["geoData"].push([
Number(m.longitude),
- Number(m.latitude)
+ Number(m.latitude),
]);
middleData[m.type]["table"].push(obj);
});
@@ -452,38 +631,36 @@
zIndex: 4,
title: "影像",
source: new XYZ({
- url:
- "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 行政区划
- })
+ url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
+ }),
}),
new Tile({
zIndex: 5,
title: "道路+中文注记",
source: new XYZ({
- url:
- "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 注记
- })
- })
+ url: "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
+ }),
+ }),
],
view: new View({
projection: "EPSG:4326",
center: [115.892151, 28.676493],
- zoom: 10
- })
+ zoom: 10,
+ }),
});
this.carVectorLayer = new VectorLayer({
zIndex: 99,
- source: new VectorSource()
+ source: new VectorSource(),
});
this.peoVectorLayer = new VectorLayer({
zIndex: 99,
- source: new VectorSource()
+ source: new VectorSource(),
});
this.gunVectorLayer = new VectorLayer({
zIndex: 99,
- source: new VectorSource()
+ source: new VectorSource(),
});
this.map.addLayer(this.carVectorLayer);
this.map.addLayer(this.peoVectorLayer);
@@ -493,7 +670,7 @@
},
// 获取辖区列表
getOfficeData() {
- lazyTreeJu().then(res => {
+ lazyTreeJu().then((res) => {
if (res.data.code === 200) {
this.options1 = res.data.data;
this.options2 = res.data.data;
@@ -511,7 +688,7 @@
},
// 未持证
getNoholderNum() {
- noholderNum({ jurisdiction: this.value2 }).then(res => {
+ noholderNum({ jurisdiction: this.value2 }).then((res) => {
if (res.data.code === 200) {
this.rightData.noholder = res.data.data[0].Count;
} else {
@@ -522,7 +699,7 @@
},
// 未缴纳社保
getNoSocialSecurity() {
- noSocialSecurity({ jurisdiction: this.value2 }).then(res => {
+ noSocialSecurity({ jurisdiction: this.value2 }).then((res) => {
if (res.data.code === 200) {
this.rightData.socialSecurity = res.data.data[0].Count;
} else {
@@ -532,19 +709,19 @@
});
},
// 现实表现差
- getPoorPerformance() {
- selectBx({ jurisdiction: this.value1 }).then(res => {
- if (res.data.code === 200) {
- this.rightData.poorPerformance = res.data.data[0].count;
- } else {
- this.$message.error(res.msg);
- }
- this.right1loading = false;
- });
- },
+ // getPoorPerformance() {
+ // selectBx({ jurisdiction: this.value1 }).then((res) => {
+ // if (res.data.code === 200) {
+ // this.rightData.poorPerformance = res.data.data[0].count;
+ // } else {
+ // this.$message.error(res.msg);
+ // }
+ // this.right1loading = false;
+ // });
+ // },
// 资格审查异常
getQualification() {
- selectExtype({ jurisdiction: this.value1 }).then(res => {
+ selectExtype({ jurisdiction: this.value1 }).then((res) => {
if (res.data.code === 200) {
this.rightData.qualification = res.data.data[0].count;
} else {
@@ -568,16 +745,31 @@
goSystemHome() {
// this.$router.push({ path: "/register/index" });
this.$router.push({ path: "/securityGuardManagement/register" });
- }
+ },
+ getPoorPerformance(type) {
+ if (type === 0) {
+ this.rightData.poorPerformance = 2;
+ this.rightData.qualification = 3;
+ } else if (type === 1) {
+ this.rightData.poorPerformance = 11;
+ this.rightData.qualification = 14;
+ } else if (type === 2) {
+ this.rightData.poorPerformance = 32;
+ this.rightData.qualification = 45;
+ }
+ },
},
mounted() {
+ this.startMove();
this.initEchart();
+ this.getHolderNum(0);
+ this.getPoorPerformance(0);
// this.getTableData("car");
// this.initMap();
this.getTableData(0);
// this.initMapEchart();
this.getOfficeData();
- }
+ },
};
</script>
--
Gitblit v1.9.3