From d7fab6b5d91a5c49d84f7d21025cb6bc16b43bdf Mon Sep 17 00:00:00 2001
From: zpzgiser <45806316+zpzgiser@users.noreply.github.com>
Date: Mon, 19 Jul 2021 23:09:39 +0800
Subject: [PATCH] 更改颜色、文字、表格
---
src/views/securityUnitOperation/securityEchart.js | 151 +++++++++++----
src/router/views/index.js | 28 ++
src/views/home/indexEchart.js | 95 +++++----
src/views/securityUnitOperation/economicAnalysis.vue | 50 ++++
src/views/securityUnitOperation/economicTable.vue | 184 ++++++++++++-----
src/views/securityUnitOperation/operationAnalysis.vue | 53 ++++
src/views/securityUnitOperation/operationTable.vue | 3
7 files changed, 414 insertions(+), 150 deletions(-)
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 596f702..b814105 100644
--- a/src/router/views/index.js
+++ b/src/router/views/index.js
@@ -242,7 +242,7 @@
component: () =>
import ( /* webpackChunkName: "views" */ '@/views/management/idinformation')
}]
- }, {
+ },{
path: '/securityCompany',
redirect: '/securityCompany/index',
component: Layout,
@@ -272,5 +272,31 @@
component: () =>
import ( /* webpackChunkName: "views" */ '@/views/regulatoryInformation/index')
}]
+ }, {
+ 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',
+ component: Layout,
+ children: [{
+ path: 'index',
+ name: '公司经济情况智能分析详情表',
+ meta: {
+ i18n: 'index',
+ },
+ component: () =>
+ import ( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/economicTable')
+ }]
}
]
\ No newline at end of file
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index 317964f..ea83db0 100644
--- a/src/views/home/indexEchart.js
+++ b/src/views/home/indexEchart.js
@@ -19,15 +19,18 @@
}
},
color: [
- "#516b91",
- "#59c4e6",
- "#93b7e3",
- "#a5e7f0",
- "#cbb0e3",
+ "#91cc75",
+ "#fac858",
+ "#73c0de",
+ "#3ba272",
+ "#fc8452",
+ "#9a60b4",
+ "#3fb1e3",
"#6be6c1",
- "#a0a7e6",
- "#c4ebad",
- "#96dee8"
+ '#626c91',
+ '#a0a7e6',
+ '#c4ebad',
+ '#96dee8'
],
legend: {
data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"],
@@ -122,15 +125,18 @@
}
},
color: [
- "#516b91",
- "#59c4e6",
- "#93b7e3",
- "#a5e7f0",
- "#cbb0e3",
+ "#91cc75",
+ "#fac858",
+ "#73c0de",
+ "#3ba272",
+ "#fc8452",
+ "#9a60b4",
+ "#3fb1e3",
"#6be6c1",
- "#a0a7e6",
- "#c4ebad",
- "#96dee8"
+ '#626c91',
+ '#a0a7e6',
+ '#c4ebad',
+ '#96dee8'
],
legend: {
data: ["持证人数", "未持证人数"],
@@ -220,15 +226,18 @@
trigger: "axis"
},
color: [
- "#516b91",
- "#59c4e6",
- "#93b7e3",
- "#a5e7f0",
- "#cbb0e3",
+ "#91cc75",
+ "#fac858",
+ "#73c0de",
+ "#3ba272",
+ "#fc8452",
+ "#9a60b4",
+ "#3fb1e3",
"#6be6c1",
- "#a0a7e6",
- "#c4ebad",
- "#96dee8"
+ '#626c91',
+ '#a0a7e6',
+ '#c4ebad',
+ '#96dee8'
],
legend: {
@@ -282,15 +291,18 @@
trigger: "axis"
},
color: [
- "#516b91",
- "#59c4e6",
- "#93b7e3",
- "#a5e7f0",
- "#cbb0e3",
+ "#91cc75",
+ "#fac858",
+ "#73c0de",
+ "#3ba272",
+ "#fc8452",
+ "#9a60b4",
+ "#3fb1e3",
"#6be6c1",
- "#a0a7e6",
- "#c4ebad",
- "#96dee8"
+ '#626c91',
+ '#a0a7e6',
+ '#c4ebad',
+ '#96dee8'
],
legend: {
@@ -465,15 +477,18 @@
formatter: "{a}<br>{b}:{c}({d}%)"
},
color: [
- "#516b91",
- "#59c4e6",
- "#93b7e3",
- "#a5e7f0",
- "#cbb0e3",
+ "#91cc75",
+ "#fac858",
+ "#73c0de",
+ "#3ba272",
+ "#fc8452",
+ "#9a60b4",
+ "#3fb1e3",
"#6be6c1",
- "#a0a7e6",
- "#c4ebad",
- "#96dee8"
+ '#626c91',
+ '#a0a7e6',
+ '#c4ebad',
+ '#96dee8'
],
legend: {
diff --git a/src/views/securityUnitOperation/economicAnalysis.vue b/src/views/securityUnitOperation/economicAnalysis.vue
index fb0c77a..3d71dc7 100644
--- a/src/views/securityUnitOperation/economicAnalysis.vue
+++ b/src/views/securityUnitOperation/economicAnalysis.vue
@@ -6,7 +6,15 @@
<div class="rowTitle">
<img src="../../../public/img/bajgxt/u1618.png" />
<span>数据概览</span>
- <el-button @click="toEconomicTable">进入数据统计表</el-button>
+ <el-select class="select0" v-model="value0" placeholder="请选择">
+ <el-option
+ v-for="item in options0"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
<el-select class="select1" v-model="value1" placeholder="请选择">
<el-option
v-for="item in options1"
@@ -25,6 +33,7 @@
>
</el-option>
</el-select>
+ <el-button @click="toEconomicTable">进入数据统计表</el-button>
</div>
<div class="col-content">
@@ -85,6 +94,33 @@
return {
value1: "1",
value2: "1",
+ value0: "2012",
+ options0: [
+ {
+ value: "2012",
+ label: "2012年"
+ },
+ {
+ value: "2011",
+ label: "2011年"
+ },
+ {
+ value: "2010",
+ label: "2010年"
+ },
+ {
+ value: "2009",
+ label: "2009年"
+ },
+ {
+ value: "2008",
+ label: "2008年"
+ },
+ {
+ value: "2007",
+ label: "2007年"
+ }
+ ],
options1: [
{
value: "1",
@@ -138,7 +174,7 @@
middleEchart2.setOption(echartJs.economicPieOption(data));
},
toEconomicTable() {
- this.$router.push({ path: "/securityUnitOperation/economicTable" });
+ this.$router.push({ path: "/securityUnitOperation/economicTable" });
}
},
mounted() {
@@ -217,17 +253,21 @@
font-weight: 600;
margin-left: 11px;
}
+ .select0 {
+ position: absolute;
+ right: 443px;
+ }
.select1 {
position: absolute;
- right: 140px;
+ right: 302px;
}
.select2 {
position: absolute;
- right: 0px;
+ right: 159px;
}
.el-button {
position: absolute;
- right: 300px;
+ right: 0px;
}
/deep/ .el-input__inner {
width: 120px;
diff --git a/src/views/securityUnitOperation/economicTable.vue b/src/views/securityUnitOperation/economicTable.vue
index 27f04bd..5ca4f7a 100644
--- a/src/views/securityUnitOperation/economicTable.vue
+++ b/src/views/securityUnitOperation/economicTable.vue
@@ -1,50 +1,59 @@
<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"
+ <basic-container>
+ <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-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-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>
+ <avue-crud
+ :option="tableOption"
+ :data="tableData"
+ :page.sync="tablePage"
+ :permission="permissionList"
+ :before-open="beforeOpen"
+ >
+ </avue-crud>
+ <!-- <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">
@@ -61,18 +70,24 @@
<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>
+ </el-table> -->
+ <el-pagination
+ background
+ layout="prev, pager, next"
+ :total="tableData.length"
+ >
+ </el-pagination>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ </basic-container>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
+ name: "公司经济情况智能分析详情表",
data() {
return {
pickerOptions: {
@@ -140,6 +155,63 @@
bz: ""
}
],
+ tablePage: {
+ pageSize: 10,
+ currentPage: 1,
+ total: 0
+ },
+ tableOption: {
+ lazy: true,
+ tip: false,
+ simplePage: true,
+ searchShow: true,
+ searchMenuSpan: 6,
+ dialogWidth: "60%",
+ tree: true,
+ border: true,
+ index: true,
+ selection: true,
+ viewBtn: false,
+ editBtn: false,
+ addBtn: false,
+ delBtn: false,
+ menuWidth: 150,
+ dialogClickModal: false,
+ column: [
+ {
+ label: "公司名称",
+ prop: "company"
+ },
+ {
+ label: "所属分局",
+ prop: "subOffice"
+ },
+ {
+ label: "时间",
+ prop: "time"
+ },
+ {
+ label: "社保缴纳人数",
+ prop: "sbjnrs"
+ },
+ {
+ label: "社保缴纳总额（万）",
+ prop: "sbjnze"
+ },
+ {
+ label: "公司派遣人数",
+ prop: "gspqrs"
+ },
+ {
+ label: "社保缴纳人数占比（%）",
+ prop: "sbjnrszb"
+ },
+ {
+ label: "备注",
+ prop: "bz"
+ }
+ ]
+ },
typeValue: "0",
typeOptions: [
{
@@ -220,8 +292,8 @@
.el-row:first-child {
height: 100px;
margin-bottom: 20px;
- background: rgba(255, 255, 255, 0.1);
- box-shadow: 0px 0px 1px #fff;
+ // background: rgba(255, 255, 255, 0.1);
+ // box-shadow: 0px 0px 1px #fff;
.el-col {
padding: 20px;
.el-date-editor {
@@ -242,8 +314,8 @@
}
.el-row:nth-child(2) {
height: calc(100% - 120px);
- background: rgba(255, 255, 255, 0.1);
- box-shadow: 0px 0px 1px #fff;
+ // background: rgba(255, 255, 255, 0.1);
+ // box-shadow: 0px 0px 1px #fff;
}
.el-col {
height: 100%;
diff --git a/src/views/securityUnitOperation/operationAnalysis.vue b/src/views/securityUnitOperation/operationAnalysis.vue
index 03c50a3..caeadcb 100644
--- a/src/views/securityUnitOperation/operationAnalysis.vue
+++ b/src/views/securityUnitOperation/operationAnalysis.vue
@@ -6,7 +6,16 @@
<div class="rowTitle">
<img src="../../../public/img/bajgxt/u1618.png" />
<span>数据概览</span>
- <el-button @click="toOperationTable">进入数据统计表</el-button>
+
+ <el-select class="select0" v-model="value0" placeholder="请选择">
+ <el-option
+ v-for="item in options0"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
<el-select class="select1" v-model="value1" placeholder="请选择">
<el-option
v-for="item in options1"
@@ -25,6 +34,7 @@
>
</el-option>
</el-select>
+ <el-button @click="toOperationTable">进入数据统计表</el-button>
</div>
<div class="col-content">
@@ -51,7 +61,7 @@
<div class="box-card">
<span>服务客户</span>
<span>56</span>
- <span>较上月增加34人</span>
+ <span>较上月增加34家</span>
</div>
<div class="box-card">
<span>缴纳社保</span>
@@ -70,7 +80,7 @@
<el-row :gutter="20">
<el-col :span="16">
<div class="rowContent">
- <span class="span-title">公司保安类数据对比</span>
+ <span class="span-title">保安类数据统计</span>
<div id="middleEchart1"></div>
</div>
</el-col>
@@ -100,6 +110,33 @@
return {
value1: "1",
value2: "1",
+ value0: "2012",
+ options0: [
+ {
+ value: "2012",
+ label: "2012年"
+ },
+ {
+ value: "2011",
+ label: "2011年"
+ },
+ {
+ value: "2010",
+ label: "2010年"
+ },
+ {
+ value: "2009",
+ label: "2009年"
+ },
+ {
+ value: "2008",
+ label: "2008年"
+ },
+ {
+ value: "2007",
+ label: "2007年"
+ }
+ ],
options1: [
{
value: "1",
@@ -232,17 +269,21 @@
font-weight: 600;
margin-left: 11px;
}
+ .select0 {
+ position: absolute;
+ right: 443px;
+ }
.select1 {
position: absolute;
- right: 140px;
+ right: 302px;
}
.select2 {
position: absolute;
- right: 0px;
+ right: 159px;
}
.el-button {
position: absolute;
- right: 300px;
+ right: 0px;
}
/deep/ .el-input__inner {
width: 120px;
diff --git a/src/views/securityUnitOperation/operationTable.vue b/src/views/securityUnitOperation/operationTable.vue
index 4698328..e1d1ad3 100644
--- a/src/views/securityUnitOperation/operationTable.vue
+++ b/src/views/securityUnitOperation/operationTable.vue
@@ -24,7 +24,7 @@
>
</el-option>
</el-select>
- <span>分局：</span>
+ <span>所属辖区：</span>
<el-select v-model="subofficeValue" placeholder="请选择">
<el-option
v-for="item in subofficeOptions"
@@ -82,6 +82,7 @@
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
+ name: "公司运营情况智能分析详情表",
data() {
return {
pickerOptions: {
diff --git a/src/views/securityUnitOperation/securityEchart.js b/src/views/securityUnitOperation/securityEchart.js
index 972689d..6c6298d 100644
--- a/src/views/securityUnitOperation/securityEchart.js
+++ b/src/views/securityUnitOperation/securityEchart.js
@@ -6,6 +6,21 @@
// color: "#fff"
// }
// },
+ color: [
+ "#73c0de",
+
+ "#fac858",
+ "#91cc75",
+ "#3ba272",
+ "#fc8452",
+ "#9a60b4",
+ "#3fb1e3",
+ "#6be6c1",
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
+ ],
grid: {
top: "10%",
left: "3%",
@@ -45,6 +60,7 @@
]
},
yAxis: {
+ name: "（%）",
type: "value",
axisLabel: {
color: "#fff"
@@ -53,7 +69,7 @@
series: [
{
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],
+ data: [10, 30, 20, 50, 10, 40, 32, 13, 21, 12, 25, 11],
type: "line",
smooth: true,
areaStyle: {}
@@ -80,23 +96,38 @@
"持证保安数",
"过考保安数",
"缴纳社保保安数",
- "缴纳社保数"
+ "保安派遣"
],
bottom: "0%",
textStyle: {
color: "#fff"
}
},
+ color: [
+ "#73c0de",
+
+ "#fac858",
+ "#91cc75",
+ "#3ba272",
+ "#fc8452",
+ "#9a60b4",
+ "#3fb1e3",
+ "#6be6c1",
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
+ ],
grid: {
top: "10%",
- left: "5%",
- right: "4%",
+ left: "3%",
+ right: "2%",
bottom: "15%",
containLabel: true
},
xAxis: {
type: "category",
- boundaryGap: false,
+ boundaryGap: true,
axisLabel: {
color: "#fff"
},
@@ -124,38 +155,38 @@
series: [
{
name: "总保安数",
- type: "line",
- stack: "总量",
+ type: "bar",
+ barWidth: 9,
data: [120, 132, 101, 134, 90, 230, 210, 214, 123, 22, 132, 321]
},
{
name: "正常保安数",
- type: "line",
- stack: "总量",
+ type: "bar",
+ barWidth: 9,
data: [220, 182, 191, 234, 290, 330, 310, 111, 222, 132, 143, 123]
},
{
name: "持证保安数",
- type: "line",
- stack: "总量",
+ type: "bar",
+ barWidth: 9,
data: [150, 232, 201, 154, 190, 330, 410, 132, 111, 222, 132, 43]
},
{
name: "过考保安数",
- type: "line",
- stack: "总量",
+ type: "bar",
+ barWidth: 9,
data: [320, 332, 301, 334, 390, 330, 320, 233, 123, 432, 122, 11]
},
{
name: "缴纳社保保安数",
- type: "line",
- stack: "总量",
+ type: "bar",
+ barWidth: 9,
data: [120, 132, 101, 134, 120, 130, 132, 222, 111, 123, 341, 123]
},
{
- name: "缴纳社保数",
- type: "line",
- stack: "总量",
+ name: "保安派遣",
+ type: "bar",
+ barWidth: 9,
data: [120, 132, 101, 134, 1210, 130, 120, 22, 123, 33, 21, 13]
}
]
@@ -183,24 +214,34 @@
color: "#fff"
}
},
+ color: [
+ "#73c0de",
+
+ "#fac858",
+ "#91cc75",
+ "#3ba272",
+ "#fc8452",
+ "#9a60b4",
+ "#3fb1e3",
+ "#6be6c1",
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
+ ],
grid: {
top: "10%",
- left: "12%",
- right: "4%",
- bottom: "15%",
- containLabel: true
+ left: "10%",
+ right: "2%",
+ bottom: "22%",
+ containLabel: false
},
xAxis: {
- type: "value",
- boundaryGap: [0, 0.01],
- axisLabel: {
- color: "#fff"
- }
- },
- yAxis: {
type: "category",
+ boundaryGap: true,
axisLabel: {
- color: "#fff"
+ color: "#fff",
+ interval: 0
},
data: [
"一月",
@@ -217,6 +258,13 @@
"十二月"
]
},
+ yAxis: {
+ type: "value",
+
+ axisLabel: {
+ color: "#fff"
+ }
+ },
series: [
{
name: "客户数",
@@ -230,25 +278,31 @@
function economicMiddle(data) {
let option = {
- // title: {
- // text: "公司保安类数据对比",
- // textStyle: {
- // color: "#fff"
- // }
- // },
tooltip: {
trigger: "axis"
},
legend: {
- data: [
- "缴纳社保人数",
- '公司派遣人数'
- ],
+ data: ["缴纳社保人数", "公司派遣人数"],
bottom: "0%",
textStyle: {
color: "#fff"
}
},
+ color: [
+ "#73c0de",
+
+ "#fac858",
+ "#91cc75",
+ "#3ba272",
+ "#fc8452",
+ "#9a60b4",
+ "#3fb1e3",
+ "#6be6c1",
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
+ ],
grid: {
top: "10%",
left: "5%",
@@ -295,7 +349,7 @@
type: "line",
stack: "总量",
data: [220, 182, 191, 234, 290, 330, 310, 111, 222, 132, 143, 123]
- },
+ }
]
};
return option;
@@ -336,6 +390,21 @@
color: "#fff"
}
},
+ color: [
+ "#73c0de",
+
+ "#fac858",
+ "#91cc75",
+ "#3ba272",
+ "#fc8452",
+ "#9a60b4",
+ "#3fb1e3",
+ "#6be6c1",
+ "#626c91",
+ "#a0a7e6",
+ "#c4ebad",
+ "#96dee8"
+ ],
series: [
{
name: "人员分布",
--
Gitblit v1.9.3