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.scss | 121 ++++++
src/views/statisticalQueryManagement/businessStatistics.vue | 4
public/img/bajgxt/u215.png | 0
src/views/home/index.vue | 334 +++++++++++++++----
public/img/bajgxt/u233.png | 0
vue.config.js | 2
public/img/bajgxt/u231.png | 0
src/views/home/indexEchart.js | 400 +++++++++++++++++------
src/views/statisticalQueryManagement/businessStatisticsDetail.vue | 107 +++--
public/img/bajgxt/u232.png | 0
public/img/bajgxt/111.png | 0
11 files changed, 746 insertions(+), 222 deletions(-)
diff --git a/public/img/bajgxt/111.png b/public/img/bajgxt/111.png
new file mode 100644
index 0000000..08437d1
--- /dev/null
+++ b/public/img/bajgxt/111.png
Binary files differ
diff --git a/public/img/bajgxt/u215.png b/public/img/bajgxt/u215.png
new file mode 100644
index 0000000..11670c0
--- /dev/null
+++ b/public/img/bajgxt/u215.png
Binary files differ
diff --git a/public/img/bajgxt/u231.png b/public/img/bajgxt/u231.png
new file mode 100644
index 0000000..77e8b3f
--- /dev/null
+++ b/public/img/bajgxt/u231.png
Binary files differ
diff --git a/public/img/bajgxt/u232.png b/public/img/bajgxt/u232.png
new file mode 100644
index 0000000..9d7c506
--- /dev/null
+++ b/public/img/bajgxt/u232.png
Binary files differ
diff --git a/public/img/bajgxt/u233.png b/public/img/bajgxt/u233.png
new file mode 100644
index 0000000..2b2338d
--- /dev/null
+++ b/public/img/bajgxt/u233.png
Binary files differ
diff --git a/src/views/home/index.scss b/src/views/home/index.scss
index 09d868f..7f2f0d5 100644
--- a/src/views/home/index.scss
+++ b/src/views/home/index.scss
@@ -96,6 +96,7 @@
width: 100%;
background-size: 100% 100%;
margin-top: 25px;
+ position: relative;
#left2Echart {
@extend .echartClass;
}
@@ -330,11 +331,12 @@
}
}
.right-content {
- height: calc(100% - 41px);
- width: 100%;
+ height: calc(100% - 71px);
+ width: calc(100% - 30px);
+ padding: 15px;
}
.card-list {
- margin: 25px 60px 20px 90px;
+ margin: 15px 60px 10px 90px;
display: flex;
height: 55px;
line-height: 55px;
@@ -419,3 +421,116 @@
height: 100%;
}
}
+.left2-btn{
+ height: 21px;
+ width: 69px;
+ background-color: #2a3e9d;
+ font-size: 13px !important;
+ font-weight: 700;
+ color: #FFFF80 !important;
+ line-height: 21px !important;
+ border-radius: 10px;
+ text-align: center;
+ position: absolute;
+ cursor: pointer;
+}
+.left2-btn.btn1{
+ right: 100px;
+ margin-top: 22px;
+}
+.left2-btn.btn2{
+ right: 21px;
+ margin-top: 22px;
+}
+.left2-btn.date{
+ margin-left: 74px;
+}
+.left2-btn.mounce{
+ margin-left: 208px;
+}
+.left2-btn.all{
+ right: 100px;
+}
+
+.rightData{
+ position: relative;
+ color: #fff;
+ background: #010945;
+ border-radius: 11px;
+ height: 52px;
+ display: inline-flex;
+ width: 174px;
+ cursor: pointer;
+ font-weight: 700;
+ img {
+ margin: 12px;
+ height: 28px;
+ width: 30px;
+ }
+ .text {
+ width: 100px;
+ text-align: center;
+ // margin: 3px;
+ line-height: 25px;
+ span:nth-child(1) {
+ width: 100%;
+ display: block;
+ font-size: 14px;
+ }
+ span:nth-child(2) {
+ width: 100%;
+ display: block;
+ color: #00CCFF;
+ font-size: 15px;
+ }
+ }
+ }
+ .rightData1{
+ margin-left: 42px;
+ }
+ .rightData2{
+ margin-left: 58px;
+ }
+ .rightData3{
+ margin-top: 8px;
+ margin-left: 42px;
+ }
+ .rightData4{
+ margin-top: 8px;
+ margin-left: 58px;
+ }
+ .rightData5{
+ margin-top: 8px;
+ margin-left: 42px;
+ }
+
+ .textBox {
+ width: 70%;
+ height: 58px;
+ // margin: 0 auto;
+ overflow: hidden;
+ position: absolute;
+ text-align: left;
+ color: #09b560;
+ left: 20px;
+ top: 20px;
+ font-size: 15px;
+ .text {
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ }
+ .slide-enter-active, .slide-leave-active {
+ transition: all 0.5s linear;
+ }
+ .slide-enter{
+ transform: translateY(20px) scale(1);
+ opacity: 1;
+ }
+ .slide-leave-to {
+ transform: translateY(-20px) scale(0.8);
+ opacity: 0;
+ }
+ }
+
+
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>
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index c7b151f..c3e3cea 100644
--- a/src/views/home/indexEchart.js
+++ b/src/views/home/indexEchart.js
@@ -6,6 +6,7 @@
let data2 = [];
let data3 = [];
let data4 = [];
+ // let legend = ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"];
allData.forEach(item => {
nameArr.push(item.name);
data1.push(item.server.confess);
@@ -13,6 +14,30 @@
data3.push(item.server.security);
data4.push(item.server.armed);
});
+ function add(arr) {
+ let total = 0;
+ arr.forEach(i => {
+ total += Number(i)
+ })
+ return total
+ }
+ // let legend1 = ["自招保安单位" + add(data1), "保安培训公司", "保安服务公司", "武装守押公司"];
+ // let legendData = [{
+ // name: "自招保安单位",
+ // value: add(data1)
+ // },
+ // {
+ // name: "保安培训公司",
+ // value: add(data2)
+ // },
+ // {
+ // name: "保安服务公司",
+ // value: add(data3)
+ // },
+ // {
+ // name: "武装守押公司",
+ // value: add(data4)
+ // }];
let option = {
tooltip: {
trigger: "axis",
@@ -51,7 +76,10 @@
itemWidth: 20,
textStyle: {
color: "#fff"
- }
+ },
+ // formatter: function (legend1) {
+ // return legend1;
+ // }
},
grid: {
top: '5%',
@@ -219,6 +247,83 @@
return option;
}
+function left3Data(allData) {
+ let option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data: ['男', '女'],
+ bottom: "1%",
+ itemWidth: 20,
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ color: [
+ "#91cc75",
+ "#fac858",
+ "#73c0de",
+ ],
+ grid: {
+ top: '5%',
+ left: "5%",
+ right: "6%",
+ bottom: "15%",
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'value',
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ color: "#fff"
+ },
+ }
+ ],
+ yAxis: [
+
+ {
+ type: 'category',
+ data: ['红谷滩分局', '青山湖分局', '南昌市公安局东湖分局', '南昌市公安局西湖分局', '南昌市公安局青云谱分局', '南昌市公安局湾里分局', '南昌市公安局高新开发区分局'],
+
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ color: "#fff"
+ },
+ }
+ ],
+ series: [
+ {
+ name: '男',
+ type: 'bar',
+ stack: '性别',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name: '女',
+ type: 'bar',
+ stack: '性别',
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ ]
+ };
+ return option
+}
+
function right1Data(allData) {
// let yueData = [
// "一月",
@@ -373,7 +478,6 @@
function right3Data(allData) {
let data = [];
- let sumValue = 0;
let legendData = [];
let datas = allData.sort((a, b) => {
return b.Count - a.Count
@@ -384,14 +488,14 @@
value: item.Count
}
legendData.push(item.jurname)
- sumValue += Number(item.Count)
+ // sumValue += Number(item.Count)
data.push(obj)
})
// let arrName = getArrayValue(data, "name");
// let arrValue = getArrayValue(data, "value");
// let sumValue = 1000;
// let objData = array2obj(data, "name");
- let optionData = getData(data);
+ // let optionData = getData(data);
// function getArrayValue(array, key) {
// var key = key || "value";
@@ -412,59 +516,137 @@
// return resObj;
// }
- function getData(data) {
- var res = {
- series: [],
- yAxis: []
- };
- for (let i = 0; i < data.length; i++) {
- res.series.push({
- name: "分局预警占比",
- type: "pie",
- clockwise: true,
- z: 2,
- emphasis: {
- scale: false
- },
- // hoverAnimation: false,
- radius: [83 - i * 12 + '%', 78 - i * 12 + '%'],
- center: ["30%", "50%"],
- labelLine: {
- show: false
- },
- label: {
- show: false
- },
- data: [
- {
- value: data[i].value,
- name: data[i].name
- },
- {
- value: sumValue - data[i].value,
- name: "",
- itemStyle: {
- color: "rgba(0,0,0,0)",
- borderWidth: 0
- },
- tooltip: {
- show: false
- },
- label: {
- show: false
- },
- emphasis: {
- scale: false
- }
- // hoverAnimation: false
- }
- ]
- });
- res.yAxis.push(data[i].name);
- }
- return res;
- }
+ // function getData(data) {
+ // var res = {
+ // series: [],
+ // yAxis: []
+ // };
+ // for (let i = 0; i < data.length; i++) {
+ // res.series.push({
+ // name: "分局预警占比",
+ // type: "pie",
+ // clockwise: true,
+ // z: 2,
+ // emphasis: {
+ // scale: false
+ // },
+ // // hoverAnimation: false,
+ // radius: [83 - i * 12 + '%', 78 - i * 12 + '%'],
+ // center: ["30%", "50%"],
+ // labelLine: {
+ // show: false
+ // },
+ // label: {
+ // show: false
+ // },
+ // data: [
+ // {
+ // value: data[i].value,
+ // name: data[i].name
+ // },
+ // {
+ // value: sumValue - data[i].value,
+ // name: "",
+ // itemStyle: {
+ // color: "rgba(0,0,0,0)",
+ // borderWidth: 0
+ // },
+ // tooltip: {
+ // show: false
+ // },
+ // label: {
+ // show: false
+ // },
+ // emphasis: {
+ // scale: false
+ // }
+ // // hoverAnimation: false
+ // }
+ // ]
+ // });
+ // res.yAxis.push(data[i].name);
+ // }
+ // return res;
+ // }
+ // let option = {
+ // tooltip: {
+ // show: true,
+ // trigger: "item",
+ // formatter: "{a}<br>{b}:{c}({d}%)",
+ // backgroundColor: "#031952", //设置背景图片 rgba格式
+ // color: "#fff",
+ // borderWidth: "0", //边框宽度设置1
+ // // borderColor: "gray", //设置边框颜色
+ // textStyle: {
+ // color: "#fff" //设置文字颜色
+ // },
+ // },
+ // color: [
+ // "#91cc75",
+ // "#fac858",
+ // "#73c0de",
+ // "#3ba272",
+ // "#fc8452",
+ // "#9a60b4",
+ // "#3fb1e3",
+ // "#6be6c1",
+ // '#626c91',
+ // '#a0a7e6',
+ // '#c4ebad',
+ // '#96dee8'
+ // ],
+
+ // legend: {
+ // right: "2%",
+ // top: "3%",
+ // // icon: "circle",
+ // itemHeight: 10,
+ // show: true,
+ // data: legendData,
+ // selectedMode: false,
+ // textStyle: {
+ // color: "#fff"
+ // },
+ // orient: "vertical"
+ // },
+ // grid: {
+ // top: "5%",
+ // bottom: "50%",
+ // left: "30%",
+ // containLabel: false
+ // },
+ // yAxis: [
+ // {
+ // type: "category",
+ // inverse: true,
+ // z: 3,
+ // axisLine: {
+ // show: false
+ // },
+ // axisTick: {
+ // show: false
+ // },
+ // axisLabel: {
+ // interval: 0,
+ // inside: false,
+ // color: "#fff",
+ // fontSize: 8,
+ // // textStyle: {
+
+ // // },
+ // show: true
+ // },
+ // data: optionData.yAxis
+ // }
+ // ],
+ // xAxis: [
+ // {
+ // show: false
+ // }
+ // ],
+ // series: optionData.series
+ // };
let option = {
tooltip: {
show: true,
@@ -477,6 +659,18 @@
textStyle: {
color: "#fff" //设置文字颜色
},
+ },
+ legend: {
+ right: "2%",
+ top: "10%",
+ itemHeight: 10,
+ show: true,
+ selectedMode: false,
+ textStyle: {
+ color: "#fff"
+ },
+ data: legendData,
+ orient: "vertical"
},
color: [
"#91cc75",
@@ -492,56 +686,47 @@
'#c4ebad',
'#96dee8'
],
-
- legend: {
- right: "2%",
- top: "3%",
- // icon: "circle",
- itemHeight: 10,
- show: true,
- data: legendData,
- selectedMode: false,
- textStyle: {
- color: "#fff"
+ series: [
+ {
+ name: '分局预警占比',
+ type: 'pie',
+ radius: '70%',
+ center: ['30%', '50%'],
+ roseType: 'radius',
+ itemStyle: {
+ borderRadius: 0
+ },
+ label: {
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: false
+ }
+ },
+ data: data
},
- orient: "vertical"
- },
- grid: {
- top: "5%",
- bottom: "50%",
- left: "30%",
- containLabel: false
- },
- yAxis: [
- {
- type: "category",
- inverse: true,
- z: 3,
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- interval: 0,
- inside: false,
- color: "#fff",
- fontSize: 8,
- // textStyle: {
-
- // },
- show: true
- },
- data: optionData.yAxis
- }
- ],
- xAxis: [
- {
- show: false
- }
- ],
- series: optionData.series
+ // {
+ // name: '面积模式',
+ // type: 'pie',
+ // radius: [20, 140],
+ // center: ['75%', '50%'],
+ // roseType: 'area',
+ // itemStyle: {
+ // borderRadius: 5
+ // },
+ // data: [
+ // {value: 30, name: 'rose 1'},
+ // {value: 28, name: 'rose 2'},
+ // {value: 26, name: 'rose 3'},
+ // {value: 24, name: 'rose 4'},
+ // {value: 22, name: 'rose 5'},
+ // {value: 20, name: 'rose 6'},
+ // {value: 18, name: 'rose 7'},
+ // {value: 16, name: 'rose 8'}
+ // ]
+ // }
+ ]
};
return option;
}
@@ -623,8 +808,8 @@
// silent: true,
map: 'ncMap',
show: true,
- zoom: 1.14,
- top: '10%',
+ zoom: 1.04,
+ top: '8%',
label: {
show: false,
color: '#fff',
@@ -726,6 +911,7 @@
export default {
left1Data,
left2Data,
+ left3Data,
right1Data,
right2Data,
right3Data,
diff --git a/src/views/statisticalQueryManagement/businessStatistics.vue b/src/views/statisticalQueryManagement/businessStatistics.vue
index cc83b7c..2b3db34 100644
--- a/src/views/statisticalQueryManagement/businessStatistics.vue
+++ b/src/views/statisticalQueryManagement/businessStatistics.vue
@@ -7,6 +7,7 @@
:permission="permissionList"
:before-open="beforeOpen"
@date-change="dateChange"
+ @row-click="handleRowClick"
>
</avue-crud>
</basic-container>
@@ -141,6 +142,9 @@
},
},
methods: {
+ handleRowClick(row, event, column) {
+ this.$router.push({ path: "/statisticalQueryManagement/businessStatisticsDetail" });
+ },
dateChange() {},
// downExcel() {
// let et = XLSX.utils.table_to_book(document.getElementById("table"));
diff --git a/src/views/statisticalQueryManagement/businessStatisticsDetail.vue b/src/views/statisticalQueryManagement/businessStatisticsDetail.vue
index 9865444..7a19d18 100644
--- a/src/views/statisticalQueryManagement/businessStatisticsDetail.vue
+++ b/src/views/statisticalQueryManagement/businessStatisticsDetail.vue
@@ -12,8 +12,8 @@
</basic-container>
</template>
<script>
-import FileSaver from "file-saver";
-import XLSX from "xlsx";
+// import FileSaver from "file-saver";
+// import XLSX from "xlsx";
import { mapGetters } from "vuex";
export default {
name: "业务情况统计",
@@ -25,23 +25,32 @@
{
company: "江西省永安保安服务有限公司",
subOffice: "南昌市公安局",
+ timeStart:'2020-07-14',
+ timeEnd:'2021-06-30',
customerName: "南昌市幼儿园",
num: "7",
- status: "正在服务",
+ // status: "正在服务",
+ bz:'',
},
{
company: "南昌市赣水保安服务有限公司",
subOffice: "东湖分局",
+ timeStart:'2020-01-23',
+ timeEnd:'2020-12-31',
customerName: "南昌市第一人民医院",
num: "32",
- status: "已完成",
+ // status: "已完成",
+ bz:'',
},
{
company: "江西中业兴达保安服务有限公司",
subOffice: "西湖分局",
+ timeStart:'2020-03-16',
+ timeEnd:'2021-7-29',
customerName: "南昌市动物园",
num: "12",
- status: "未下单",
+ // status: "未下单",
+ bz:'',
},
],
tablePage: {
@@ -119,49 +128,67 @@
],
},
{
- label: "服务单位名称",
- prop: "customerName",
+ label: "服务开始时间",
+ prop: "timeStart",
display: false,
},
{
- label: "保安人数",
+ label: "服务到期时间",
+ prop: "timeEnd",
+ display: false,
+ },
+ {
+ label: "服务单位名称",
+ prop: "customerName",
+ searchLabelWidth: 110,
+ search: true,
+ searchSpan: 4,
+ display: false,
+ },
+ {
+ label: "保安派遣人数",
prop: "num",
display: false,
},
{
- label: "服务状态",
- prop: "status",
- searchSpan: 4,
- type: "select",
- props: {
- label: "label",
- value: "value",
- },
- // cascaderItem: ["city", "area"],
- // dicUrl:subofficeOptions,
- dicData: [
- {
- value: "0",
- label: "已完成",
- },
- {
- value: "2",
- label: "正在服务",
- },
- {
- value: "3",
- label: "未下单",
- },
- ],
- search: true,
- rules: [
- {
- required: true,
- message: "请选择服务状态",
- trigger: "blur",
- },
- ],
+ label: "备注",
+ prop: "bz",
+ display: false,
},
+ // {
+ // label: "服务状态",
+ // prop: "status",
+ // searchSpan: 4,
+ // type: "select",
+ // props: {
+ // label: "label",
+ // value: "value",
+ // },
+ // // cascaderItem: ["city", "area"],
+ // // dicUrl:subofficeOptions,
+ // dicData: [
+ // {
+ // value: "0",
+ // label: "已完成",
+ // },
+ // {
+ // value: "2",
+ // label: "正在服务",
+ // },
+ // {
+ // value: "3",
+ // label: "未下单",
+ // },
+ // ],
+ // search: true,
+ // rules: [
+ // {
+ // required: true,
+ // message: "请选择服务状态",
+ // trigger: "blur",
+ // },
+ // ],
+ // },
],
},
typeValue: "0",
diff --git a/vue.config.js b/vue.config.js
index dc6a794..7607b56 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -30,7 +30,7 @@
// target: 'http://192.168.0.109:1',
//远程演示服务地址,可用于直接启动项目
// target: 'http://2h3f861221.wicp.vip:58646',
- target: 'http://192.168.0.109:82',
+ target: 'http://s16s652780.51mypc.cn/api',
ws: true,
pathRewrite: {
'^/api': '/'
--
Gitblit v1.9.3