From fd61a737e45cc7075b1d008524f1883dcea15aad Mon Sep 17 00:00:00 2001
From: zpzgiser <45806316+zpzgiser@users.noreply.github.com>
Date: Sun, 18 Jul 2021 00:20:07 +0800
Subject: [PATCH] 首页文字更改，保安单位经营情况四个页面
---
src/views/home/index.scss | 17
src/views/securityUnitOperation/securityEchart.js | 189 ++++++
public/img/bajgxt/u1618.png | 0
src/views/home/index.vue | 298 +++++++----
public/img/bajgxt/u1.png | 0
src/views/home/indexEchart.js | 29 +
src/views/securityUnitOperation/economicAnalysis.vue | 245 +++++++++
src/views/securityUnitOperation/economicTable.vue | 286 +++++++++++
src/views/securityUnitOperation/operationAnalysis.vue | 113 +++-
src/views/securityUnitOperation/operationTable.vue | 304 ++++++++++-
10 files changed, 1,266 insertions(+), 215 deletions(-)
diff --git a/public/img/bajgxt/u1.png b/public/img/bajgxt/u1.png
new file mode 100644
index 0000000..3a94eb7
--- /dev/null
+++ b/public/img/bajgxt/u1.png
Binary files differ
diff --git a/public/img/bajgxt/u1618.png b/public/img/bajgxt/u1618.png
new file mode 100644
index 0000000..2dca504
--- /dev/null
+++ b/public/img/bajgxt/u1618.png
Binary files differ
diff --git a/src/views/home/index.scss b/src/views/home/index.scss
index 64302d2..6ec1710 100644
--- a/src/views/home/index.scss
+++ b/src/views/home/index.scss
@@ -241,6 +241,7 @@
}
/deep/ .el-table .cell {
color: #fff;
+ text-align: center;
}
/deep/ .el-table td,
.el-table th.is-leaf {
@@ -258,7 +259,7 @@
border-radius: 2px;
}
/deep/ .el-input {
- width: 94px;
+ width: 138px;
}
/deep/ .el-select {
line-height: 55px;
@@ -305,12 +306,13 @@
width: 100%;
}
.card-list {
- margin: 20px 60px;
+ margin: 20px 60px 20px 90px;
display: flex;
height: 55px;
line-height: 55px;
img:first-child {
height: 55px;
+ z-index: 22;
}
img:nth-child(2) {
position: absolute;
@@ -318,19 +320,24 @@
width: 35px;
height: 35px;
margin-top: 9px;
+ z-index: 22;
}
- span:nth-child(3) {
+ img:nth-child(3) {
+ margin-left: -20px;
+ }
+ span:nth-child(4) {
color: red;
font-size: 30px;
display: block;
width: 71px;
- margin: 0px 20px;
+ margin-left: -74px;
}
- span:nth-child(4) {
+ span:nth-child(5) {
color: #7ff3f4;
font-size: 18px;
display: block;
width: 129px;
+ margin-left: 30px;
}
}
.mapBtn,
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 083b542..4a10cbd 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,7 +1,7 @@
<template>
<div class="bajgxt-home">
<div class="head-title">
- <span>保安监管系统可视化平台</span>
+ <span>智慧保安监管模块</span>
<!-- <img src="../../../public/img/bajgxt/linkimg.png"
@click.stop="goSystemHome"
title="进入系统" /> -->
@@ -10,9 +10,10 @@
<div class="content">
<div class="left">
<div class="left1">
+ <!-- <img src="../../../public/img/bajgxt/line.jpg" /> -->
<div class="title-pane">
<img src="../../../public/img/bajgxt/icon1.png" />
- <span>业务对象统计--单位</span>
+ <span>各辖区单位情况统计</span>
</div>
<div id="left1Echart"></div>
</div>
@@ -56,52 +57,43 @@
<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 :data="tableData" stripe ref="indexTable">
+ <template v-if="curTableType === 'car'">
+ <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>
+ </template>
+ <template v-if="curTableType === 'peo'">
+ <el-table-column type="index" label="序号" width="50">
+ </el-table-column>
+ <el-table-column prop="name" 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="tel" label="联系电话"> </el-table-column>
+ <el-table-column prop="bz" label="备注"> </el-table-column>
+ </template>
+ <template v-if="curTableType === 'gun'">
+ <el-table-column type="index" label="序号" width="50">
+ </el-table-column>
+ <el-table-column 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 prop="linkman" label="负责人"> </el-table-column>
+ <el-table-column prop="tel" label="联系电话"> </el-table-column>
+ </template>
</el-table>
</div>
</div>
@@ -124,14 +116,16 @@
<div class="card-list">
<img src="../../../public/img/bajgxt/u4.png" />
<img src="../../../public/img/bajgxt/u256.png" />
+ <img src="../../../public/img/bajgxt/u1.png" />
<span>45</span>
<span>现实表现差</span>
</div>
<div class="card-list">
<img src="../../../public/img/bajgxt/u4.png" />
<img src="../../../public/img/bajgxt/u230.png" />
+ <img src="../../../public/img/bajgxt/u1.png" />
<span>76</span>
- <span>资格审查</span>
+ <span>资格审查异常</span>
</div>
</div>
<!-- <div class="card-text"> -->
@@ -158,12 +152,14 @@
<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" />
<span>21</span>
<span>未缴纳社保</span>
</div>
<div class="card-list">
<img src="../../../public/img/bajgxt/u4.png" />
<img src="../../../public/img/bajgxt/u251.png" />
+ <img src="../../../public/img/bajgxt/u1.png" />
<span>26</span>
<span>未持证</span>
</div>
@@ -191,17 +187,24 @@
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 Feature from "ol/Feature.js";
+import Point from "ol/geom/Point.js";
+import { Fill, Stroke, Circle, Style, Icon } from "ol/style";
import GeoJSON from "ol/format/GeoJSON";
import axios from "../../router/axios";
import { securityTotal, holderNum, securityPer } from "../../api/index/index";
+
+import car from "@/assets/img/car.png";
+import peo from "@/assets/img/people.png";
+import gun from "@/assets/img/gun.png";
+
export default {
data() {
return {
@@ -209,25 +212,53 @@
curTableType: "car",
tableData: [],
value1: "1",
+ carVectorLayer: null,
+ peoVectorLayer: null,
+ gunVectorLayer: null,
+
options1: [
{
value: "1",
- label: "南昌市"
+ label: "南昌市公安局"
},
{
value: "2",
- label: "赣州市"
+ label: "东湖分局"
+ },
+ {
+ value: "3",
+ label: "西湖分局"
+ },
+ {
+ value: "4",
+ label: "青云谱分局"
+ },
+ {
+ value: "5",
+ label: "青山湖分局"
}
],
value2: "1",
options2: [
{
value: "1",
- label: "南昌市"
+ label: "南昌市公安局"
},
{
value: "2",
- label: "赣州市"
+ label: "东湖分局"
+ },
+ {
+ value: "3",
+ label: "西湖分局"
+ },
+ {
+ value: "4",
+ label: "青云谱分局"
+ },
+ {
+ value: "5",
+ label: "青山湖分局"
}
]
};
@@ -273,8 +304,28 @@
},
getTableData(type) {
+ this.carVectorLayer.getSource().clear();
+ this.peoVectorLayer.getSource().clear();
+ this.gunVectorLayer.getSource().clear();
this.curTableType = type;
+ let curLayer = null;
+ let imgUrl = null;
+ let geoData = [];
if (type === "car") {
+ curLayer = this.carVectorLayer;
+ imgUrl = car;
+ geoData = [
+ [115.759941, 28.89309],
+ [115.757056, 28.895082],
+ [115.755648, 28.897737],
+ [115.75487, 28.904896],
+ [115.750814, 28.910861],
+ [115.742915, 28.916431],
+ [115.740537, 28.918827],
+ [115.738363, 28.928465],
+ [115.734182, 28.930418],
+ [115.729585, 28.93114]
+ ];
this.tableData = [
{
carNum: "111111111111",
@@ -313,6 +364,20 @@
}
];
} else if (type === "peo") {
+ curLayer = this.peoVectorLayer;
+ imgUrl = peo;
+ geoData = [
+ [115.726802, 28.929966],
+ [115.726306, 28.920866],
+ [115.723726, 28.917826],
+ [115.719647, 28.916816],
+ [115.714486, 28.91849],
+ [115.708041, 28.921607],
+ [115.700649, 28.920751],
+ [115.69488, 28.922982],
+ [115.683128, 28.924531],
+ [115.678677, 28.923011]
+ ];
this.tableData = [
{
name: "小张",
@@ -358,6 +423,21 @@
}
];
} else if (type === "gun") {
+ curLayer = this.gunVectorLayer;
+ imgUrl = gun;
+ geoData = [
+ [115.67702, 28.923656],
+ [115.674372, 28.927773],
+ [115.666361, 28.928937],
+ [115.663882, 28.93339],
+ [115.664626, 28.936632],
+ [115.671646, 28.940989],
+ [115.674091, 28.941672],
+ [115.678384, 28.940729],
+ [115.681877, 28.943114],
+ [115.682857, 28.946865],
+ [115.680694, 28.948442]
+ ];
this.tableData = [
{
number: "Q1111",
@@ -403,67 +483,79 @@
}
];
}
+
+ let features = [];
+ let style = new Style({
+ image: new Icon({
+ src: imgUrl,
+ opacity: 1,
+ scale: 0.5
+ })
+ });
+ geoData.forEach(item => {
+ let carFeature = new Feature({
+ geometry: new Point(item)
+ });
+ carFeature.setStyle(style);
+ features.push(carFeature);
+ });
+ curLayer.getSource().addFeatures(features);
+ let extent = curLayer.getSource().getExtent();
+ this.map.getView().fit(extent, this.map.getSize());
+ this.$nextTick(() => {
+ this.$refs.indexTable.doLayout();
+ });
},
initMap() {
this.map = new Map({
- target: "map", // 对应页面里 id 为 map 的元素
+ target: "map",
layers: [
- // 图层
+ // new Tile({
+ // source: new OSM()
+ // })
new Tile({
- source: new OSM() // 图层数据源
+ zIndex: 4,
+ title: "影像",
+ source: new XYZ({
+ 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" // 注记
+ })
})
],
view: new View({
- // 地图视图
- projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
- center: [115.892151, 28.676493], //坐标 厦门
- // minZoom: 10, // 地图缩放最小级别
- zoom: 11 //地图缩放级别
+ projection: "EPSG:4326",
+ center: [115.892151, 28.676493],
+ zoom: 11
})
});
- var image = new Circle({
- radius: 5,
- fill: new Fill({
- color: "rgba(255, 0, 0, 1)"
- }),
- stroke: new Stroke({ color: "red", width: 1 })
+ this.carVectorLayer = new VectorLayer({
+ zIndex: 99,
+ source: new VectorSource()
});
- 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);
+ this.peoVectorLayer = new VectorLayer({
+ zIndex: 99,
+ source: new VectorSource()
});
- // 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);
+
+ this.gunVectorLayer = new VectorLayer({
+ zIndex: 99,
+ source: new VectorSource()
+ });
+ this.map.addLayer(this.carVectorLayer);
+ this.map.addLayer(this.peoVectorLayer);
+ this.map.addLayer(this.gunVectorLayer);
+
+ this.getTableData("car");
},
goSystemHome() {
@@ -472,7 +564,7 @@
},
mounted() {
this.initEchart();
- this.getTableData("car");
+ // this.getTableData("car");
this.initMap();
}
};
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index 321e9fe..38c400c 100644
--- a/src/views/home/indexEchart.js
+++ b/src/views/home/indexEchart.js
@@ -362,6 +362,34 @@
{
name: "西湖区",
value: 200
+ },
+ {
+ name: "东湖区",
+ value: 250
+ },
+ {
+ name: "经开区",
+ value: 281
+ },
+ {
+ name: "青云谱区",
+ value: 320
+ },
+ {
+ name: "高新区",
+ value: 231
+ },
+ {
+ name: "湾里区",
+ value: 210
+ },
+ {
+ name: "进贤县",
+ value: 187
+ },
+ {
+ name: "青山湖区",
+ value: 190
}
];
// let arrName = getArrayValue(data, "name");
@@ -503,7 +531,6 @@
};
return option;
}
-
export default {
left1Data,
left2Data,
diff --git a/src/views/securityUnitOperation/economicAnalysis.vue b/src/views/securityUnitOperation/economicAnalysis.vue
index 8e8da32..3c72c2b 100644
--- a/src/views/securityUnitOperation/economicAnalysis.vue
+++ b/src/views/securityUnitOperation/economicAnalysis.vue
@@ -1,7 +1,238 @@
-/*
- * @Author: mikey.zhaopeng
- * @Date: 2021-07-17 00:19:50
- * @Last Modified by: mikey.zhaopeng
- * @Last Modified time: 2021-07-17 00:20:31
- * @description:公司经济情况智能分析详情
- */
\ No newline at end of file
+<template>
+ <div class="page1">
+ <el-row>
+ <el-col :span="24">
+ <div class="rowContent first-menu">
+ <div class="rowTitle">
+ <img src="../../../public/img/bajgxt/u1618.png" />
+ <span>数据概览</span>
+ <el-button>进入数据统计表</el-button>
+ <el-select class="select1" v-model="value1" placeholder="请选择">
+ <el-option
+ v-for="item in options1"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ <el-select class="select2" 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="col-content">
+ <div class="box-card">
+ <span>社保缴纳人数</span>
+ <span>11291</span>
+ <span>较上月增加12人</span>
+ </div>
+ <div class="box-card">
+ <span>社保缴纳总额(万)</span>
+ <span>410</span>
+ <span>较上月增加15万</span>
+ </div>
+ <div class="box-card">
+ <span>公司派遣人数</span>
+ <span>1121</span>
+ <span>较上月增加13人</span>
+ </div>
+ <div class="box-card">
+ <span>社保缴纳人数占比</span>
+ <span>85%</span>
+ <span>较上月上涨2%</span>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="16">
+ <div class="rowContent">
+ <span class="span-title">社保缴纳</span>
+ <div id="middleEchart1"></div>
+ </div>
+ </el-col>
+ <el-col :span="8">
+ <div class="rowContent">
+ <span class="span-title">派遣人员占比</span>
+ <div id="middleEchart2"></div>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="24">
+ <div class="rowContent">
+ <span class="span-title">公司经济运转趋势</span>
+ <div id="bottomEchart"></div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import echartJs from "./securityEchart.js";
+export default {
+ data() {
+ return {
+ value1: "1",
+ value2: "1",
+ 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: "江西中业兴达保安服务有限公司"
+ }
+ ]
+ };
+ },
+ 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));
+ let middleEchart2 = echarts.init(
+ document.getElementById("middleEchart2")
+ );
+ middleEchart2.setOption(echartJs.economicPieOption(data));
+ }
+ },
+ mounted() {
+ this.setEchart();
+ }
+};
+</script>
+<style lang="scss" scoped>
+.page1 {
+ height: 100%;
+ width: 100%;
+}
+#bottomEchart,
+#middleEchart1,
+#middleEchart2 {
+ height: calc(100% - 40px);
+ width: 100%;
+}
+.el-row:first-child {
+ height: calc(40% - 80px);
+ margin-bottom: 20px;
+}
+.el-row:nth-child(2) {
+ margin-bottom: 20px;
+}
+.el-row:nth-child(2),
+.el-row:nth-child(3) {
+ height: 30%;
+}
+.el-col {
+ height: 100%;
+}
+.rowContent {
+ padding: 5px 20px 0px 10px;
+ height: calc(100% - 5px);
+ width: calc(100% - 30px);
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0px 0px 1px #fff;
+ .span-title {
+ color: #fff;
+ font-size: 17px;
+ margin-left: 35px;
+ font-weight: 600;
+ }
+}
+.box-card {
+ width: 150px;
+ background: #00aaf1;
+ height: 135px;
+ text-align: center;
+ margin-right: 66px;
+ box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
+ line-height: 40px;
+}
+.box-card span {
+ display: block;
+ width: 100%;
+ color: #fff;
+}
+.box-card span:nth-child(2) {
+ color: #06ffff;
+ font-size: 34px;
+}
+.rowTitle {
+ height: 40px;
+ display: flex;
+ line-height: 40px;
+ img {
+ width: 30px;
+ height: 30px;
+ margin-top: 5px;
+ }
+ span {
+ color: #fff;
+ font-size: 17px;
+ font-weight: 600;
+ margin-left: 11px;
+ }
+ .select1 {
+ position: absolute;
+ right: 140px;
+ }
+ .select2 {
+ position: absolute;
+ right: 0px;
+ }
+ .el-button {
+ position: absolute;
+ right: 300px;
+ }
+ /deep/ .el-input__inner {
+ width: 120px;
+ }
+}
+.col-content {
+ display: flex;
+ margin-top: 15px;
+ margin-left: 36px;
+}
+</style>
diff --git a/src/views/securityUnitOperation/economicTable.vue b/src/views/securityUnitOperation/economicTable.vue
index 5012b55..27f04bd 100644
--- a/src/views/securityUnitOperation/economicTable.vue
+++ b/src/views/securityUnitOperation/economicTable.vue
@@ -1,7 +1,279 @@
-/*
- * @Author: mikey.zhaopeng
- * @Date: 2021-07-17 00:19:50
- * @Last Modified by: mikey.zhaopeng
- * @Last Modified time: 2021-07-17 00:20:33
- * @description:公司经济情况智能分析统计
- */
+<template>
+ <div class="operation-table">
+ <el-row>
+ <el-col>
+ <span>时间范围：</span>
+ <el-date-picker
+ v-model="value2"
+ type="daterange"
+ align="right"
+ unlink-panels
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ :picker-options="pickerOptions"
+ >
+ </el-date-picker>
+ <span>类别：</span>
+ <el-select v-model="typeValue" placeholder="请选择">
+ <el-option
+ v-for="item in typeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ <span>分局：</span>
+ <el-select v-model="subofficeValue" placeholder="请选择">
+ <el-option
+ v-for="item in subofficeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ <span>公司名称：</span>
+ <el-input v-model="companyName"></el-input>
+ <el-button>查询</el-button>
+ <el-button>重置</el-button>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col>
+ <div class="table">
+ <el-button @click="downExcel">下载</el-button>
+ <el-table id="table" :data="tableData" style="width: 100%">
+ <el-table-column type="index" label="序号" width="50">
+ </el-table-column>
+ <el-table-column prop="company" label="公司名称" width="180">
+ </el-table-column>
+ <el-table-column prop="subOffice" label="所属分局" width="180">
+ </el-table-column>
+ <el-table-column prop="time" label="时间"> </el-table-column>
+ <el-table-column prop="sbjnrs" label="社保缴纳人数">
+ </el-table-column>
+ <el-table-column prop="sbjnze" label="社保缴纳总额（万）">
+ </el-table-column>
+ <el-table-column prop="gspqrs" label="公司派遣人数">
+ </el-table-column>
+ <el-table-column prop="sbjnrszb" label="社保缴纳人数占比（%）">
+ </el-table-column>
+ <el-table-column prop="bz" label="备注"> </el-table-column>
+ </el-table>
+ <el-pagination background layout="prev, pager, next" :total="tableData.length">
+ </el-pagination>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+<script>
+import FileSaver from "file-saver";
+import XLSX from "xlsx";
+export default {
+ data() {
+ return {
+ pickerOptions: {
+ shortcuts: [
+ {
+ text: "最近一周",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+ picker.$emit("pick", [start, end]);
+ }
+ },
+ {
+ text: "最近一个月",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+ picker.$emit("pick", [start, end]);
+ }
+ },
+ {
+ text: "最近三个月",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+ picker.$emit("pick", [start, end]);
+ }
+ }
+ ]
+ },
+ value1: "",
+ value2: "",
+ tableData: [
+ {
+ company: "江西省永安保安服务有限公司",
+ subOffice: "南昌市公安局",
+ time: "2021年6月",
+ sbjnrs: "12200",
+ sbjnze: "400",
+ gspqrs: "110",
+ sbjnrszb: "10",
+ bz: ""
+ },
+ {
+ company: "南昌市赣水保安服务有限公司",
+ subOffice: "东湖分局",
+ time: "2021年6月",
+ sbjnrs: "12200",
+ sbjnze: "400",
+ gspqrs: "110",
+ sbjnrszb: "10",
+ bz: ""
+ },
+ {
+ company: "江西中业兴达保安服务有限公司",
+ subOffice: "西湖分局",
+ time: "2021年6月",
+ sbjnrs: "12200",
+ sbjnze: "400",
+ gspqrs: "110",
+ sbjnrszb: "10",
+ bz: ""
+ }
+ ],
+ typeValue: "0",
+ typeOptions: [
+ {
+ value: "0",
+ label: "全部"
+ },
+ {
+ value: "1",
+ label: "社保缴纳人数"
+ },
+ {
+ value: "2",
+ label: "社保缴纳总额"
+ },
+ {
+ value: "3",
+ label: "公司派遣人数"
+ },
+ {
+ value: "4",
+ label: "社保缴纳人数占比"
+ }
+ ],
+ subofficeValue: "0",
+ subofficeOptions: [
+ {
+ value: "0",
+ label: "南昌市公安局"
+ },
+ {
+ value: "2",
+ label: "东湖分局"
+ },
+ {
+ value: "3",
+ label: "西湖分局"
+ },
+ {
+ value: "4",
+ label: "青云谱分局"
+ },
+ {
+ value: "5",
+ label: "青山湖分局"
+ }
+ ],
+ companyName: ""
+ };
+ },
+ methods: {
+ downExcel() {
+ let et = XLSX.utils.table_to_book(document.getElementById("table"));
+ let etout = XLSX.write(et, {
+ bookType: "xlsx",
+ bookSST: true,
+ type: "array"
+ });
+ try {
+ FileSaver.saveAs(
+ new Blob([etout], {
+ type: "application/octet-stream"
+ }),
+ `表.xlsx`
+ ); //导出的文件名
+ } catch (e) {
+ console.log(e, etout);
+ }
+ return etout;
+ }
+ },
+ mounted() {}
+};
+</script>
+<style lang="scss" scoped>
+.operation-table {
+ height: 100%;
+ width: 100%;
+ .el-row:first-child {
+ height: 100px;
+ margin-bottom: 20px;
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0px 0px 1px #fff;
+ .el-col {
+ padding: 20px;
+ .el-date-editor {
+ margin-right: 20px;
+ }
+ .el-select {
+ width: 115px;
+ margin-right: 20px;
+ }
+ .el-input {
+ width: 115px;
+ margin-right: 20px;
+ }
+ .el-button {
+ width: 70px !important;
+ }
+ }
+ }
+ .el-row:nth-child(2) {
+ height: calc(100% - 120px);
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0px 0px 1px #fff;
+ }
+ .el-col {
+ height: 100%;
+ span {
+ color: #fff;
+ }
+ }
+}
+.table {
+ padding: 20px;
+ height: calc(100% - 40px);
+ width: calc(100% - 40px);
+ .el-button {
+ width: 55px;
+ height: 30px;
+ padding: 0px;
+ margin-left: calc(100% - 55px);
+ }
+}
+/deep/ .el-table {
+ width: 100%;
+ height: calc(100% - 100px);
+ margin: 10px 0px;
+ .cell {
+ color: #fff;
+ text-align: center;
+ }
+}
+.el-pagination {
+ height: 40px;
+ float: right;
+}
+</style>
diff --git a/src/views/securityUnitOperation/operationAnalysis.vue b/src/views/securityUnitOperation/operationAnalysis.vue
index 8e8743e..8dde9fb 100644
--- a/src/views/securityUnitOperation/operationAnalysis.vue
+++ b/src/views/securityUnitOperation/operationAnalysis.vue
@@ -4,6 +4,7 @@
<el-col :span="24">
<div class="rowContent first-menu">
<div class="rowTitle">
+ <img src="../../../public/img/bajgxt/u1618.png" />
<span>数据概览</span>
<el-button>进入数据统计表</el-button>
<el-select class="select1" v-model="value1" placeholder="请选择">
@@ -26,41 +27,41 @@
</el-select>
</div>
- <div style="display: flex ;margin-top: 15px;">
+ <div class="col-content">
<div class="box-card">
<span>总保安数</span>
- <span>500</span>
- <span>较上月上涨2%</span>
+ <span>23708</span>
+ <span>较上月增加123人</span>
</div>
<div class="box-card">
<span>正常保安员</span>
- <span>500</span>
- <span>较上月上涨2%</span>
+ <span>22176</span>
+ <span>较上月增加13人</span>
</div>
<div class="box-card">
<span>持证保安员</span>
- <span>500</span>
- <span>较上月上涨2%</span>
+ <span>21003</span>
+ <span>较上月增加31人</span>
</div>
<div class="box-card">
<span>过考保安员</span>
- <span>500</span>
- <span>较上月上涨2%</span>
+ <span>21003</span>
+ <span>较上月增加31人</span>
</div>
<div class="box-card">
<span>服务客户</span>
- <span>500</span>
- <span>较上月上涨2%</span>
+ <span>56</span>
+ <span>较上月增加34人</span>
</div>
<div class="box-card">
<span>缴纳社保</span>
- <span>500</span>
- <span>较上月上涨2%</span>
+ <span>23708</span>
+ <span>较上月增加3人</span>
</div>
<div class="box-card">
<span>保安派遣</span>
- <span>500</span>
- <span>较上月上涨2%</span>
+ <span>12720</span>
+ <span>较上月增加31人</span>
</div>
</div>
</div>
@@ -68,15 +69,22 @@
</el-row>
<el-row :gutter="20">
<el-col :span="16">
- <div class="rowContent" id="middleEchart1"></div>
+ <div class="rowContent">
+ <span class="span-title">公司保安类数据对比</span>
+ <div id="middleEchart1"></div>
+ </div>
</el-col>
<el-col :span="8">
- <div class="rowContent" id="middleEchart2"></div>
+ <div class="rowContent">
+ <span class="span-title">服务客户</span>
+ <div id="middleEchart2"></div>
+ </div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="rowContent">
+ <span class="span-title">公司运营趋势</span>
<div id="bottomEchart"></div>
</div>
</el-col>
@@ -95,13 +103,37 @@
options1: [
{
value: "1",
- label: "南昌市"
+ label: "南昌市公安局"
+ },
+ {
+ value: "2",
+ label: "东湖分局"
+ },
+ {
+ value: "3",
+ label: "西湖分局"
+ },
+ {
+ value: "4",
+ label: "青云谱分局"
+ },
+ {
+ value: "5",
+ label: "青山湖分局"
}
],
options2: [
{
value: "1",
- label: "保安公司"
+ label: "江西省永安保安服务有限公司"
+ },
+ {
+ value: "2",
+ label: "南昌市赣水保安服务有限公司"
+ },
+ {
+ value: "3",
+ label: "江西中业兴达保安服务有限公司"
}
]
};
@@ -130,22 +162,12 @@
.page1 {
height: 100%;
width: 100%;
- /* background: #003688; */
}
#bottomEchart,
#middleEchart1,
#middleEchart2 {
- height: 100%;
+ height: calc(100% - 40px);
width: 100%;
-}
-.rowContent {
- height: 20%;
- background: rgba(255, 255, 255, 0.1);
- box-shadow: 0px 0px 1px #fff;
-}
-.first-menu {
- padding: 5px 20px 20px 20px;
- height: calc(100% - 25px) !important;
}
.el-row:first-child {
height: calc(40% - 80px);
@@ -158,9 +180,21 @@
.el-row:nth-child(3) {
height: 30%;
}
-.el-col,
-.rowContent {
+.el-col {
height: 100%;
+}
+.rowContent {
+ padding: 5px 20px 0px 10px;
+ height: calc(100% - 5px);
+ width: calc(100% - 30px);
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0px 0px 1px #fff;
+ .span-title {
+ color: #fff;
+ font-size: 17px;
+ margin-left: 35px;
+ font-weight: 600;
+ }
}
.box-card {
width: 150px;
@@ -183,11 +217,17 @@
.rowTitle {
height: 40px;
display: flex;
+ line-height: 40px;
+ img {
+ width: 30px;
+ height: 30px;
+ margin-top: 5px;
+ }
span {
color: #fff;
- font-size: 25px;
+ font-size: 17px;
font-weight: 600;
- margin-right: 20px;
+ margin-left: 11px;
}
.select1 {
position: absolute;
@@ -205,4 +245,9 @@
width: 120px;
}
}
+.col-content {
+ display: flex;
+ margin-top: 15px;
+ margin-left: 36px;
+}
</style>
diff --git a/src/views/securityUnitOperation/operationTable.vue b/src/views/securityUnitOperation/operationTable.vue
index a88aa2e..4698328 100644
--- a/src/views/securityUnitOperation/operationTable.vue
+++ b/src/views/securityUnitOperation/operationTable.vue
@@ -1,17 +1,81 @@
<template>
- <div class="table1">
- <div class="about">
- <el-button @click="downExcel">下载</el-button>
- <el-table id="table" :data="tableData" stripe style="width: 100%">
- <el-table-column prop="date" label="日期" width="180">
- </el-table-column>
- <el-table-column prop="name" label="姓名" width="180">
- </el-table-column>
- <el-table-column prop="address" label="地址"> </el-table-column>
- </el-table>
- <el-pagination background layout="prev, pager, next" :total="1000">
- </el-pagination>
- </div>
+ <div class="operation-table">
+ <el-row>
+ <el-col>
+ <span>时间范围：</span>
+ <el-date-picker
+ v-model="value2"
+ type="daterange"
+ align="right"
+ unlink-panels
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ :picker-options="pickerOptions"
+ >
+ </el-date-picker>
+ <span>类别：</span>
+ <el-select v-model="typeValue" placeholder="请选择">
+ <el-option
+ v-for="item in typeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ <span>分局：</span>
+ <el-select v-model="subofficeValue" placeholder="请选择">
+ <el-option
+ v-for="item in subofficeOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ <span>公司名称：</span>
+ <el-input v-model="companyName"></el-input>
+ <el-button>查询</el-button>
+ <el-button>重置</el-button>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col>
+ <div class="table">
+ <el-button @click="downExcel">下载</el-button>
+ <el-table id="table" :data="tableData" style="width: 100%">
+ <el-table-column type="index" label="序号" width="50">
+ </el-table-column>
+ <el-table-column prop="company" label="公司名称" width="180">
+ </el-table-column>
+ <el-table-column prop="subOffice" label="所属分局" width="180">
+ </el-table-column>
+ <el-table-column prop="time" label="时间"> </el-table-column>
+ <el-table-column prop="totalSec" label="总保安人数">
+ </el-table-column>
+ <el-table-column prop="normalSec" label="正常保安数">
+ </el-table-column>
+ <el-table-column prop="holderSec" label="持证保安数">
+ </el-table-column>
+ <el-table-column prop="sendSec" label="保安派遣数">
+ </el-table-column>
+ <el-table-column prop="passSec" label="过考保安数">
+ </el-table-column>
+ <el-table-column prop="unit" label="服务单位数"> </el-table-column>
+ <el-table-column prop="socialSec" label="缴纳社保保安数">
+ </el-table-column>
+ <el-table-column prop="bz" label="备注"> </el-table-column>
+ </el-table>
+ <el-pagination
+ background
+ layout="prev, pager, next"
+ :total="tableData.length"
+ >
+ </el-pagination>
+ </div>
+ </el-col>
+ </el-row>
</div>
</template>
<script>
@@ -20,28 +84,139 @@
export default {
data() {
return {
+ pickerOptions: {
+ shortcuts: [
+ {
+ text: "最近一周",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+ picker.$emit("pick", [start, end]);
+ }
+ },
+ {
+ text: "最近一个月",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+ picker.$emit("pick", [start, end]);
+ }
+ },
+ {
+ text: "最近三个月",
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+ picker.$emit("pick", [start, end]);
+ }
+ }
+ ]
+ },
+ value1: "",
+ value2: "",
tableData: [
{
- date: "2016-05-02",
- name: "王小虎",
- address: "上海市普陀区金沙江路 1518 弄",
+ company: "江西省永安保安服务有限公司",
+ subOffice: "南昌市公安局",
+ time: "2020年7月",
+ totalSec: "1200",
+ normalSec: "1150",
+ holderSec: "1160",
+ sendSec: "1000",
+ passSec: "1180",
+ unit: "50",
+ socialSec: "1180",
+ bz: ""
},
{
- date: "2016-05-04",
- name: "王小虎",
- address: "上海市普陀区金沙江路 1517 弄",
+ company: "南昌市赣水保安服务有限公司",
+ subOffice: "东湖分局",
+ time: "2020年7月",
+ totalSec: "1200",
+ normalSec: "1150",
+ holderSec: "1160",
+ sendSec: "1000",
+ passSec: "1180",
+ unit: "50",
+ socialSec: "1180",
+ bz: ""
},
{
- date: "2016-05-01",
- name: "王小虎",
- address: "上海市普陀区金沙江路 1519 弄",
- },
- {
- date: "2016-05-03",
- name: "王小虎",
- address: "上海市普陀区金沙江路 1516 弄",
- },
+ company: "江西中业兴达保安服务有限公司",
+ subOffice: "西湖分局",
+ time: "2020年7月",
+ totalSec: "1200",
+ normalSec: "1150",
+ holderSec: "1160",
+ sendSec: "1000",
+ passSec: "1180",
+ unit: "50",
+ socialSec: "1180",
+ bz: ""
+ }
],
+ typeValue: "0",
+ typeOptions: [
+ {
+ value: "0",
+ label: "全部"
+ },
+ {
+ value: "1",
+ label: "总保安人数"
+ },
+ {
+ value: "2",
+ label: "正常保安数"
+ },
+ {
+ value: "3",
+ label: "持证保安数"
+ },
+ {
+ value: "4",
+ label: "保安派遣数"
+ },
+ {
+ value: "5",
+ label: "过考保安数"
+ },
+ {
+ value: "6",
+ label: "服务单位数"
+ },
+ {
+ value: "7",
+ label: "缴纳社保保安数"
+ }
+ ],
+ subofficeValue: "0",
+ subofficeOptions: [
+ {
+ value: "0",
+ label: "南昌市公安局"
+ },
+ {
+ value: "2",
+ label: "东湖分局"
+ },
+ {
+ value: "3",
+ label: "西湖分局"
+ },
+ {
+ value: "4",
+ label: "青云谱分局"
+ },
+ {
+ value: "5",
+ label: "青山湖分局"
+ }
+ ],
+ companyName: ""
};
},
methods: {
@@ -50,12 +225,12 @@
let etout = XLSX.write(et, {
bookType: "xlsx",
bookSST: true,
- type: "array",
+ type: "array"
});
try {
FileSaver.saveAs(
new Blob([etout], {
- type: "application/octet-stream",
+ type: "application/octet-stream"
}),
`表.xlsx`
); //导出的文件名
@@ -63,15 +238,72 @@
console.log(e, etout);
}
return etout;
- },
+ }
},
- mounted() {},
+ mounted() {}
};
</script>
-<style>
-.table1 {
+<style lang="scss" scoped>
+.operation-table {
height: 100%;
- width: 1005;
- display: none;
+ width: 100%;
+ .el-row:first-child {
+ height: 100px;
+ margin-bottom: 20px;
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0px 0px 1px #fff;
+ .el-col {
+ padding: 20px;
+ .el-date-editor {
+ margin-right: 20px;
+ }
+ .el-select {
+ width: 115px;
+ margin-right: 20px;
+ }
+ .el-input {
+ width: 115px;
+ margin-right: 20px;
+ }
+ .el-button {
+ width: 70px !important;
+ }
+ }
+ }
+ .el-row:nth-child(2) {
+ height: calc(100% - 120px);
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0px 0px 1px #fff;
+ }
+ .el-col {
+ height: 100%;
+ span {
+ color: #fff;
+ }
+ }
+}
+.table {
+ padding: 20px;
+ height: calc(100% - 40px);
+ width: calc(100% - 40px);
+ .el-button {
+ width: 55px;
+ height: 30px;
+ padding: 0px;
+ margin-left: calc(100% - 55px);
+ }
+}
+/deep/ .el-table {
+ width: 100%;
+ height: calc(100% - 100px);
+ margin: 10px 0px;
+ .cell {
+ color: #fff;
+ text-align: center;
+ }
+}
+.el-pagination {
+ height: 40px;
+ float: right;
}
</style>
diff --git a/src/views/securityUnitOperation/securityEchart.js b/src/views/securityUnitOperation/securityEchart.js
index 1dfe7d4..972689d 100644
--- a/src/views/securityUnitOperation/securityEchart.js
+++ b/src/views/securityUnitOperation/securityEchart.js
@@ -1,10 +1,27 @@
function bottomOption(data) {
let option = {
- title: {
- text: "公司运营趋势",
+ // title: {
+ // text: "公司运营趋势",
+ // textStyle: {
+ // color: "#fff"
+ // }
+ // },
+ grid: {
+ top: "10%",
+ left: "3%",
+ right: "4%",
+ bottom: "15%",
+ containLabel: true
+ },
+ legend: {
+ data: ["趋势"],
+ bottom: "0%",
textStyle: {
color: "#fff"
}
+ },
+ tooltip: {
+ trigger: "item"
},
xAxis: {
type: "category",
@@ -35,7 +52,8 @@
},
series: [
{
- data: [820, 932, 901, 934, 1290, 1330, 1320, 132, 1111, 321, 342, 134],
+ name: "趋势",
+ data: [0.1, 0.3, 0.2, 0.5, 0.1,0.4, 0.32, 0.13, 0.21, 0.12, 0.25, 0.11],
type: "line",
smooth: true,
areaStyle: {}
@@ -46,12 +64,12 @@
}
function middleOption1(data) {
let option = {
- title: {
- text: "公司保安类数据对比",
- textStyle: {
- color: "#fff"
- }
- },
+ // title: {
+ // text: "公司保安类数据对比",
+ // textStyle: {
+ // color: "#fff"
+ // }
+ // },
tooltip: {
trigger: "axis"
},
@@ -64,13 +82,14 @@
"缴纳社保保安数",
"缴纳社保数"
],
- bottom: "2%",
+ bottom: "0%",
textStyle: {
color: "#fff"
}
},
grid: {
- left: "3%",
+ top: "10%",
+ left: "5%",
right: "4%",
bottom: "15%",
containLabel: true
@@ -145,12 +164,12 @@
}
function middleOption2(data) {
let option = {
- title: {
- text: "服务客户",
- textStyle: {
- color: "#fff"
- }
- },
+ // title: {
+ // text: "服务客户",
+ // textStyle: {
+ // color: "#fff"
+ // }
+ // },
tooltip: {
trigger: "axis",
axisPointer: {
@@ -159,15 +178,16 @@
},
legend: {
data: ["客户数"],
- bottom: "5%",
+ bottom: "0%",
textStyle: {
color: "#fff"
}
},
grid: {
- left: "3%",
+ top: "10%",
+ left: "12%",
right: "4%",
- bottom: "7%",
+ bottom: "15%",
containLabel: true
},
xAxis: {
@@ -199,9 +219,132 @@
},
series: [
{
- name: "2011年",
+ name: "客户数",
type: "bar",
data: [231, 123, 441, 123, 321, 333, 111, 221, 332, 442, 132, 51]
+ }
+ ]
+ };
+ return option;
+}
+
+function economicMiddle(data) {
+ let option = {
+ // title: {
+ // text: "公司保安类数据对比",
+ // textStyle: {
+ // color: "#fff"
+ // }
+ // },
+ tooltip: {
+ trigger: "axis"
+ },
+ legend: {
+ data: [
+ "缴纳社保人数",
+ '公司派遣人数'
+ ],
+ bottom: "0%",
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ grid: {
+ top: "10%",
+ left: "5%",
+ right: "4%",
+ bottom: "15%",
+ containLabel: true
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ axisLabel: {
+ color: "#fff"
+ },
+ data: [
+ "一月",
+ "二月",
+ "三月",
+ "四月",
+ "五月",
+ "六月",
+ "七月",
+ "八月",
+ "九月",
+ "十月",
+ "十一月",
+ "十二月"
+ ]
+ },
+ yAxis: {
+ type: "value",
+ axisLabel: {
+ color: "#fff"
+ }
+ },
+ series: [
+ {
+ name: "缴纳社保人数",
+ type: "line",
+ stack: "总量",
+ data: [120, 132, 101, 134, 90, 230, 210, 214, 123, 22, 132, 321]
+ },
+ {
+ name: "公司派遣人数",
+ type: "line",
+ stack: "总量",
+ data: [220, 182, 191, 234, 290, 330, 310, 111, 222, 132, 143, 123]
+ },
+ ]
+ };
+ return option;
+}
+function economicPieOption() {
+ let title = "总";
+ let total = "111";
+ let option = {
+ title: [
+ {
+ text: "{name|" + title + "}\n{val|" + total + "}",
+ top: "center",
+ left: "center",
+ textStyle: {
+ rich: {
+ name: {
+ fontSize: 14,
+ fontWeight: "normal",
+ color: "#fff",
+ padding: [10, 0]
+ },
+ val: {
+ fontSize: 20,
+ fontWeight: "bold",
+ color: "#fff"
+ }
+ }
+ }
+ }
+ ],
+ tooltip: {
+ trigger: "item"
+ },
+ legend: {
+ bottom: "0%",
+ left: "center",
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ series: [
+ {
+ name: "人员分布",
+ type: "pie",
+ radius: ["40%", "70%"],
+ data: [
+ { value: 1048, name: "已派遣人数" },
+ { value: 735, name: "未派遣人" }
+ ]
}
]
};
@@ -211,5 +354,7 @@
export default {
bottomOption,
middleOption1,
- middleOption2
+ middleOption2,
+ economicMiddle,
+ economicPieOption
};
--
Gitblit v1.9.3