From 88e9acc00c5e9efa9be636c6083ea634ae04e889 Mon Sep 17 00:00:00 2001
From: zhengpz <11@qq.com>
Date: Fri, 30 Jul 2021 22:53:36 +0800
Subject: [PATCH] 对接接口
---
src/api/securityUnitOperation/securityUnitOperation.js | 46 ++++
src/views/securityUnitOperation/securityEchart.js | 202 ++++++++++++++++++++--
src/router/views/index.js | 28 +-
src/views/home/indexEchart.js | 27 ++
src/views/securityUnitOperation/economicAnalysis.vue | 83 +++++++-
src/views/securityUnitOperation/operationAnalysis.vue | 153 ++++++++++------
6 files changed, 429 insertions(+), 110 deletions(-)
diff --git a/src/api/securityUnitOperation/securityUnitOperation.js b/src/api/securityUnitOperation/securityUnitOperation.js
index cb5a464..ae9605b 100644
--- a/src/api/securityUnitOperation/securityUnitOperation.js
+++ b/src/api/securityUnitOperation/securityUnitOperation.js
@@ -3,13 +3,55 @@
return request({
url: "/api/information/selectIn",
method: "post",
- params:params
+ params: params
});
};
export const selectPCount = (params) => {
return request({
url: "/api/information/selectPCount",
method: "post",
- params:params
+ params: params
+ });
+};
+export const selectTo = (params) => {
+ return request({
+ url: "/api/information/selectTo",
+ method: "post",
+ params: params
+ });
+};
+export const queryYearSoil = (params) => {
+ return request({
+ url: "/api/information/queryYearSoil",
+ method: "get",
+ params: params
+ });
+};
+export const queryYearAn = (params) => {
+ return request({
+ url: "/api/information/queryYearAn",
+ method: "get",
+ params: params
+ });
+};
+export const queryCounts = (params) => {
+ return request({
+ url: "/api/information/queryCounts",
+ method: "get",
+ params: params
+ });
+};
+export const queryYearKh = (params) => {
+ return request({
+ url: "/api/information/queryYearKh",
+ method: "get",
+ params: params
+ });
+};
+export const queryYearG = (params) => {
+ return request({
+ url: "/api/information/queryYearG",
+ method: "get",
+ params: params
});
};
\ No newline at end of file
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 1d9748c..51ab3b9 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -314,20 +314,20 @@
import( /* webpackChunkName: "views" */ '@/views/qualificationExamination/registrationTrainingQuery')
}]
},
- // { //报错 到不到vue文件
- // path: '/securityUnitOperation/operationTable',
- // redirect: '/securityUnitOperation/operationTable/index',
- // component: Layout,
- // children: [{
- // path: 'index',
- // name: '公司运营情况智能分析详情表',
- // meta: {
- // i18n: 'index',
- // },
- // component: () =>
- // import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/operationTable')
- // }]
- // },
+ { //报错 到不到vue文件
+ path: '/securityUnitOperation/operationTable',
+ redirect: '/securityUnitOperation/operationTable/index',
+ component: Layout,
+ children: [{
+ path: 'index',
+ name: '公司运营情况智能分析详情表',
+ meta: {
+ i18n: 'index',
+ },
+ component: () =>
+ import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/operationTable')
+ }]
+ },
{
path: '/securityUnitOperation/economicTable',
redirect: '/securityUnitOperation/economicTable/index',
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index 1eaf550..3d08623 100644
--- a/src/views/home/indexEchart.js
+++ b/src/views/home/indexEchart.js
@@ -18,7 +18,14 @@
trigger: "axis",
axisPointer: {
type: "shadow"
- }
+ },
+ backgroundColor: "#031952", //设置背景图片 rgba格式
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ },
},
color: [
'#2ec7c9',
@@ -128,7 +135,14 @@
trigger: "axis",
axisPointer: {
type: "shadow"
- }
+ },
+ backgroundColor: "#031952", //设置背景图片 rgba格式
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ },
},
color: [
"#3fb1e3",
@@ -449,7 +463,14 @@
tooltip: {
show: true,
trigger: "item",
- formatter: "{a}<br>{b}:{c}({d}%)"
+ formatter: "{a}<br>{b}:{c}({d}%)",
+ backgroundColor: "#031952", //设置背景图片 rgba格式
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ },
},
color: [
"#91cc75",
diff --git a/src/views/securityUnitOperation/economicAnalysis.vue b/src/views/securityUnitOperation/economicAnalysis.vue
index 7b5e9d3..23c01cc 100644
--- a/src/views/securityUnitOperation/economicAnalysis.vue
+++ b/src/views/securityUnitOperation/economicAnalysis.vue
@@ -49,13 +49,13 @@
<div class="col-content">
<div class="box-card">
<span>社保缴纳人数</span>
- <span>11291</span>
- <span>较上月增加12人</span>
+ <span>{{ socialSecurity.num }}</span>
+ <span>较上月增加{{ socialSecurity.addNum }}人</span>
</div>
<div class="box-card">
- <span>社保缴纳总额(万)</span>
- <span>410</span>
- <span>较上月增加15万</span>
+ <span>社保缴纳总额(元)</span>
+ <span>{{ socialSecurity.money }}</span>
+ <span>较上月增加{{ socialSecurity.addMoney }}元</span>
</div>
<div class="box-card">
<span>公司派遣人数</span>
@@ -103,6 +103,9 @@
import {
getCompanys,
selectPCount,
+ selectTo,
+ queryYearSoil,
+ queryYearAn,
} from "../../api/securityUnitOperation/securityUnitOperation";
export default {
data() {
@@ -138,18 +141,15 @@
],
options1: [],
options2: [],
+ socialSecurity: {
+ num: 0,
+ addNum: 0,
+ money: 0,
+ addMoney: 0,
+ },
};
},
methods: {
- setEchart() {
- let data = [];
- let bottomEchart = echarts.init(document.getElementById("bottomEchart"));
- bottomEchart.setOption(echartJs.bottomOption(data));
- let middleEchart1 = echarts.init(
- document.getElementById("middleEchart1")
- );
- middleEchart1.setOption(echartJs.economicMiddle(data));
- },
toEconomicTable() {
this.$router.push({ path: "/securityUnitOperation/economicTable" });
},
@@ -188,16 +188,67 @@
if (res.data.code === 200) {
this.options2 = res.data.data;
this.value2 = this.options2[0] ? this.options2[0].departmentid : "";
- this.pieChange();
+ this.changeCompanys();
+ }
+ });
+ },
+ getSocialSecurity() {
+ let params = {
+ jurisdiction: this.value1,
+ deptid: this.value2,
+ };
+ selectTo(params).then((res) => {
+ if (res.data.code === 200) {
+ let data = res.data.data[0];
+ this.socialSecurity.num = data.thismouth;
+ this.socialSecurity.addNum = data.thismouth - data.lastmonth;
+ this.socialSecurity.money = data.thisamount;
+ this.socialSecurity.addMoney = data.thisamount - data.lastamount;
+ } else {
+ this.$message.error(res.msg);
+ }
+ });
+ },
+ getQueryYearSoil() {
+ let params = {
+ jurisdiction: this.value1,
+ deptid: this.value2,
+ };
+ queryYearSoil(params).then((res) => {
+ if (res.data.code === 200) {
+ let middleEchart1 = echarts.init(
+ document.getElementById("middleEchart1")
+ );
+ middleEchart1.setOption(echartJs.economicMiddle(res.data.data));
+ } else {
+ this.$message.error(res.msg);
+ }
+ });
+ },
+ getQueryYearAn() {
+ let params = {
+ jurisdiction: this.value1,
+ deptid: this.value2,
+ };
+ queryYearAn(params).then((res) => {
+ if (res.data.code === 200) {
+ let bottomEchart = echarts.init(
+ document.getElementById("bottomEchart")
+ );
+ bottomEchart.setOption(echartJs.bottomOption(res.data.data));
+ } else {
+ this.$message.error(res.msg);
}
});
},
changeCompanys() {
this.pieChange();
+ this.getSocialSecurity();
+ this.getQueryYearSoil();
+ this.getQueryYearAn();
},
},
mounted() {
- this.setEchart();
this.getFenju();
},
};
diff --git a/src/views/securityUnitOperation/operationAnalysis.vue b/src/views/securityUnitOperation/operationAnalysis.vue
index 9f4f237..927641f 100644
--- a/src/views/securityUnitOperation/operationAnalysis.vue
+++ b/src/views/securityUnitOperation/operationAnalysis.vue
@@ -16,21 +16,31 @@
>
</el-option>
</el-select>
- <el-select class="select1" v-model="value1" placeholder="请选择">
+ <el-select
+ class="select1"
+ v-model="value1"
+ placeholder="请选择"
+ @change="fenjuChange"
+ >
<el-option
v-for="item in options1"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ :key="item.id"
+ :label="item.title"
+ :value="item.id"
>
</el-option>
</el-select>
- <el-select class="select2" v-model="value2" placeholder="请选择">
+ <el-select
+ class="select2"
+ v-model="value2"
+ placeholder="请选择"
+ @change="changeCompanys"
+ >
<el-option
v-for="item in options2"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ :key="item.departmentid"
+ :label="item.enterpriseName"
+ :value="item.departmentid"
>
</el-option>
</el-select>
@@ -105,11 +115,18 @@
<script>
import * as echarts from "echarts";
import echartJs from "./securityEchart.js";
+import { lazyTreeJu } from "../../api/index/index";
+import {
+ queryCounts,
+ getCompanys,
+ queryYearKh,
+ queryYearG,
+} from "../../api/securityUnitOperation/securityUnitOperation";
export default {
data() {
return {
- value1: "1",
- value2: "1",
+ value1: "",
+ value2: "",
value0: "2012",
options0: [
{
@@ -137,64 +154,90 @@
label: "2007年",
},
],
- options1: [
- {
- value: "1",
- label: "南昌市公安局",
- },
- {
- value: "2",
- label: "东湖分局",
- },
- {
- value: "3",
- label: "西湖分局",
- },
- {
- value: "4",
- label: "青云谱分局",
- },
- {
- value: "5",
- label: "青山湖分局",
- },
- ],
- options2: [
- {
- value: "1",
- label: "江西省永安保安服务有限公司",
- },
- {
- value: "2",
- label: "南昌市赣水保安服务有限公司",
- },
- {
- value: "3",
- label: "江西中业兴达保安服务有限公司",
- },
- ],
+ options1: [],
+ options2: [],
};
},
methods: {
setEchart() {
let data = [];
let bottomEchart = echarts.init(document.getElementById("bottomEchart"));
- bottomEchart.setOption(echartJs.bottomOption(data));
- let middleEchart1 = echarts.init(
- document.getElementById("middleEchart1")
- );
- middleEchart1.setOption(echartJs.middleOption1(data));
- let middleEchart2 = echarts.init(
- document.getElementById("middleEchart2")
- );
- middleEchart2.setOption(echartJs.middleOption2(data));
+ bottomEchart.setOption(echartJs.bottomOption1(data));
},
toOperationTable() {
this.$router.push({ path: "/securityUnitOperation/operationTable" });
},
+ getFenju() {
+ lazyTreeJu().then((res) => {
+ if (res.data.code === 200) {
+ this.options1 = res.data.data;
+ this.value1 = this.options1[0] ? this.options1[0].id : "";
+ this.getCompanys();
+ } else {
+ this.$message.error(res.msg);
+ }
+ });
+ },
+ fenjuChange() {
+ this.getCompanys();
+ },
+ getCompanys() {
+ getCompanys({ jurisdiction: this.value1 }).then((res) => {
+ if (res.data.code === 200) {
+ this.options2 = res.data.data;
+ this.value2 = this.options2[0] ? this.options2[0].departmentid : "";
+ this.changeCompanys();
+ }
+ });
+ },
+ getQueryCounts() {
+ let params = {
+ jurisdiction: this.value1,
+ deptid: this.value2,
+ };
+ queryCounts(params).then((res) => {
+ if (res.data.code === 200) {
+ debugger;
+ }
+ });
+ },
+ getQueryYearKh() {
+ let params = {
+ jurisdiction: this.value1,
+ deptid: this.value2,
+ };
+ queryYearKh(params).then((res) => {
+ if (res.data.code === 200) {
+ let middleEchart2 = echarts.init(
+ document.getElementById("middleEchart2")
+ );
+ middleEchart2.setOption(echartJs.middleOption2(res.data.data));
+ }
+ });
+ },
+ getQueryYearG() {
+ let params = {
+ jurisdiction: this.value1,
+ deptid: this.value2,
+ };
+ queryYearG().then((res) => {
+ if (res.data.code === 200) {
+ let middleEchart1 = echarts.init(
+ document.getElementById("middleEchart1")
+ );
+ middleEchart1.setOption(echartJs.middleOption1(res.data.data));
+ }
+ });
+ },
+ changeCompanys() {
+ // this.getQueryCounts();
+ this.getQueryYearKh();
+ this.getQueryYearG();
+ },
},
mounted() {
this.setEchart();
+ this.getFenju();
},
};
</script>
diff --git a/src/views/securityUnitOperation/securityEchart.js b/src/views/securityUnitOperation/securityEchart.js
index 88a6505..971c5e6 100644
--- a/src/views/securityUnitOperation/securityEchart.js
+++ b/src/views/securityUnitOperation/securityEchart.js
@@ -1,4 +1,8 @@
-function bottomOption(data) {
+function bottomOption(alldata) {
+ let data = [];
+ for (var i in alldata) {
+ data.push(alldata[i])
+ }
let option = {
// title: {
// text: "公司运营趋势",
@@ -36,7 +40,14 @@
}
},
tooltip: {
- trigger: "item"
+ trigger: "item",
+ backgroundColor: "#031952",
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ },
},
xAxis: {
type: "category",
@@ -60,7 +71,7 @@
]
},
yAxis: {
- name: "（%）",
+ name: "（元）",
type: "value",
axisLabel: {
color: "#fff"
@@ -69,7 +80,7 @@
series: [
{
name: "趋势",
- data: [10, 30, 20, 50, 10, 40, 32, 13, 21, 12, 25, 11],
+ data: data,
type: "line",
smooth: true,
areaStyle: {}
@@ -78,7 +89,120 @@
};
return option;
}
-function middleOption1(data) {
+function bottomOption1(alldata) {
+
+ let option = {
+ // title: {
+ // text: "公司运营趋势",
+ // textStyle: {
+ // color: "#fff"
+ // }
+ // },
+ color: [
+ "#73c0de",
+
+ "#fac858",
+ "#91cc75",
+ "#3ba272",
+ "#fc8452",
+ "#9a60b4",
+ "#3fb1e3",
+ "#6be6c1",
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
+ ],
+ grid: {
+ top: "10%",
+ left: "3%",
+ right: "4%",
+ bottom: "15%",
+ containLabel: true
+ },
+ legend: {
+ data: ["趋势"],
+ bottom: "0%",
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ tooltip: {
+ trigger: "item",
+ backgroundColor: "#031952",
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ },
+ },
+ xAxis: {
+ type: "category",
+ axisLabel: {
+ color: "#fff"
+ },
+ boundaryGap: false,
+ data: [
+ "一月",
+ "二月",
+ "三月",
+ "四月",
+ "五月",
+ "六月",
+ "七月",
+ "八月",
+ "九月",
+ "十月",
+ "十一月",
+ "十二月"
+ ]
+ },
+ yAxis: {
+ name: "（元）",
+ type: "value",
+ axisLabel: {
+ color: "#fff"
+ }
+ },
+ series: [
+ {
+ name: "趋势",
+ data: [10,20,14,15,16,17,24,15,3,7,11,23],
+ type: "line",
+ smooth: true,
+ areaStyle: {}
+ }
+ ]
+ };
+ return option;
+}
+function middleOption1(alldata) {
+ let baoan = [];
+ let zc = [];
+ let chiz = [];
+ let sheb = [];
+ let paiq = [];
+ alldata.forEach(item => {
+ for (var i in item) {
+ for (var j in item[i]) {
+ if (i === 'baoan') {
+ baoan.push(item[i][j])
+ } else if (i === 'zc') {
+ zc.push(item[i][j])
+ }
+ else if (i === 'chiz') {
+ chiz.push(item[i][j])
+ }
+ else if (i === 'sheb') {
+ sheb.push(item[i][j])
+ }
+ else if (i === 'paiq') {
+ paiq.push(item[i][j])
+ }
+ }
+ }
+ })
let option = {
// title: {
// text: "公司保安类数据对比",
@@ -87,7 +211,14 @@
// }
// },
tooltip: {
- trigger: "axis"
+ trigger: "axis",
+ backgroundColor: "#031952",
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ },
},
legend: {
data: [
@@ -157,43 +288,47 @@
name: "总保安数",
type: "bar",
barWidth: 9,
- data: [120, 132, 101, 134, 90, 230, 210, 214, 123, 22, 132, 321]
+ data: baoan
},
{
name: "正常保安数",
type: "bar",
barWidth: 9,
- data: [220, 182, 191, 234, 290, 330, 310, 111, 222, 132, 143, 123]
+ data: zc
},
{
name: "持证保安数",
type: "bar",
barWidth: 9,
- data: [150, 232, 201, 154, 190, 330, 410, 132, 111, 222, 132, 43]
+ data: chiz
},
{
name: "过考保安数",
type: "bar",
barWidth: 9,
- data: [320, 332, 301, 334, 390, 330, 320, 233, 123, 432, 122, 11]
+ data: []
},
{
name: "缴纳社保保安数",
type: "bar",
barWidth: 9,
- data: [120, 132, 101, 134, 120, 130, 132, 222, 111, 123, 341, 123]
+ data: sheb
},
{
name: "保安派遣",
type: "bar",
barWidth: 9,
- data: [120, 132, 101, 134, 1210, 130, 120, 22, 123, 33, 21, 13]
+ data: paiq
}
]
};
return option;
}
-function middleOption2(data) {
+function middleOption2(alldata) {
+ let data = [];
+ for (var i in alldata) {
+ data.push(alldata[i])
+ }
let option = {
// title: {
// text: "服务客户",
@@ -205,7 +340,14 @@
trigger: "axis",
axisPointer: {
type: "shadow"
- }
+ },
+ backgroundColor: "#031952",
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ },
},
legend: {
data: ["客户数"],
@@ -269,7 +411,7 @@
{
name: "客户数",
type: "bar",
- data: [231, 123, 441, 123, 321, 333, 111, 221, 332, 442, 132, 51]
+ data: data
}
]
};
@@ -277,9 +419,20 @@
}
function economicMiddle(data) {
+ let data1 = [];
+ for (var a in data) {
+ data1.push(data[a])
+ }
let option = {
tooltip: {
- trigger: "axis"
+ trigger: "axis",
+ backgroundColor: "#031952",
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ },
},
legend: {
data: ["缴纳社保人数", "公司派遣人数"],
@@ -342,7 +495,7 @@
name: "缴纳社保人数",
type: "line",
stack: "总量",
- data: [120, 132, 101, 134, 90, 230, 210, 214, 123, 22, 132, 321]
+ data: data1
},
{
name: "公司派遣人数",
@@ -382,14 +535,22 @@
}
],
tooltip: {
- trigger: "item"
+ trigger: "item",
+ backgroundColor: "#031952",
+ color: "#fff",
+ borderWidth: "0", //边框宽度设置1
+ // borderColor: "gray", //设置边框颜色
+ textStyle: {
+ color: "#fff" //设置文字颜色
+ },
},
legend: {
bottom: "0%",
- left: "center",
+ right: "5%",
textStyle: {
color: "#fff"
- }
+ },
+ orient: "vertical"
},
color: [
"#73c0de",
@@ -423,6 +584,7 @@
export default {
bottomOption,
+ bottomOption1,
middleOption1,
middleOption2,
economicMiddle,
--
Gitblit v1.9.3