767 lines
18 KiB
Vue
767 lines
18 KiB
Vue
<template>
|
|
<section class="statistics tabs-init el-tabs__content_f3f6f9">
|
|
<div style="margin-top: 16px;height: 270px;">
|
|
<div class="left">
|
|
<div class="item-left mar-b16">
|
|
<div class="item-left-title">公文总数</div>
|
|
<div class="item-left-num" style="color:#4B87FE;">{{totalOfficialDocumentStatistics}}</div>
|
|
</div>
|
|
<div class="item-left">
|
|
<div class="item-left-title">本月新增</div>
|
|
<div class="item-left-num" style="color:#2EA222;">{{newMonthonStatistics}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="chart-content" style="padding-right:0;">
|
|
<div class="chart-line">
|
|
<div class="chart-title">近12个月公文登记情况</div>
|
|
<div v-if="lineChartData.length"
|
|
class="chart-info"
|
|
style="
|
|
width: 100%;
|
|
height: 206px;
|
|
padding: 16px 16px 20px 0;
|
|
box-sizing: border-box;
|
|
"
|
|
id="chartLine"
|
|
></div>
|
|
<ai-empty v-else style="height: 148px;"></ai-empty>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-content">
|
|
<div class="chart-line" style="margin-right: 16px;">
|
|
<div class="chart-title">阅示类型统计</div>
|
|
<div style="overflow:hidden;">
|
|
<div
|
|
class="chart-info"
|
|
style="
|
|
width: 288px;
|
|
height: 288px;
|
|
padding: 16px 0 0 16px;
|
|
box-sizing: border-box;
|
|
float:left;
|
|
"
|
|
id="readType"
|
|
></div>
|
|
<div class="list-type mar-t102">
|
|
<div class="item" v-for="(item, index) in readTypeList" :key="index">
|
|
<div class="type-title">
|
|
<span class="item-color-bg" :style="{'backgroundColor': item.bgColor}"></span>{{item.title}}
|
|
</div>
|
|
<div class="num">{{item.num}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-line">
|
|
<div class="chart-title">公文类型统计</div>
|
|
<div style="overflow:hidden;">
|
|
<div
|
|
class="chart-info"
|
|
style="
|
|
width: 288px;
|
|
height: 288px;
|
|
padding: 16px 0 0 16px;
|
|
box-sizing: border-box;
|
|
float:left;
|
|
"
|
|
id="docType"
|
|
></div>
|
|
<div class="list-type mar-t60">
|
|
<div class="item" v-for="(item, index) in docTypeList" :key="index">
|
|
<div class="type-title">
|
|
<span class="item-color-bg" :style="{'backgroundColor': item.bgColor}"></span>{{item.title}}
|
|
</div>
|
|
<div class="num">{{item.num}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
import charts from "echarts";
|
|
|
|
export default {
|
|
name: "statistics",
|
|
props: {
|
|
instance: Function,
|
|
dict: Object,
|
|
permissions: Function,
|
|
},
|
|
data() {
|
|
return {
|
|
readTypeList: [
|
|
{
|
|
title: '传阅',
|
|
num: '0',
|
|
bgColor: '#4B87FE'
|
|
},
|
|
{
|
|
title: '批示',
|
|
num: '0',
|
|
bgColor: '#FFAA44'
|
|
}
|
|
],
|
|
docTypeList: [
|
|
{
|
|
title: '决议',
|
|
num: '0',
|
|
bgColor: '#FF4466'
|
|
},
|
|
{
|
|
title: '决定',
|
|
num: '0',
|
|
bgColor: '#FFAA44'
|
|
},
|
|
{
|
|
title: '通知',
|
|
num: '0',
|
|
bgColor: '#4B87FE'
|
|
},
|
|
{
|
|
title: '通告',
|
|
num: '0',
|
|
bgColor: '#45A3FF'
|
|
},
|
|
{
|
|
title: '函',
|
|
num: '0',
|
|
bgColor: '#2EA222'
|
|
},
|
|
{
|
|
title: '其它',
|
|
num: '0',
|
|
bgColor: '#B244FF'
|
|
},
|
|
],
|
|
lineChartTitle: [],
|
|
lineChartData: [],
|
|
totalOfficialDocumentStatistics: 0,
|
|
newMonthonStatistics: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(["user"]),
|
|
},
|
|
mounted() {
|
|
this.getInfo()
|
|
},
|
|
methods: {
|
|
getInfo() {
|
|
this.instance.post(`/app/appofficialsenddeliverinfo/getStatistics`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.newMonthonStatistics = res.data.newMonthonStatistics || 0
|
|
this.totalOfficialDocumentStatistics = res.data.totalOfficialSendStatistics || 0
|
|
if(res.data.officialRegistrationStatistics && res.data.officialRegistrationStatistics.length) {
|
|
res.data.officialRegistrationStatistics.map(item => {
|
|
this.lineChartTitle.push(item.name)
|
|
this.lineChartData.push(item.v1)
|
|
})
|
|
this.$nextTick(() => {
|
|
this.setLineChart()
|
|
})
|
|
|
|
}
|
|
if(res.data.readTheTypeStatistics && res.data.readTheTypeStatistics.length) {
|
|
res.data.readTheTypeStatistics.map(item => {
|
|
if(item.name == 0){
|
|
this.readTypeList[1].num = item.v1 || 0
|
|
}
|
|
if(item.name == 1){
|
|
this.readTypeList[0].num = item.v1 || 0
|
|
}
|
|
})
|
|
this.setReadChart()
|
|
}
|
|
if(res.data.officialSendTypeStatistics && res.data.officialSendTypeStatistics.length) {
|
|
res.data.officialSendTypeStatistics.map(item => {
|
|
if(item.name == 0){
|
|
this.docTypeList[0].num = item.v1
|
|
}
|
|
if(item.name == 1){
|
|
this.docTypeList[1].num = item.v1
|
|
}
|
|
if(item.name == 3){
|
|
this.docTypeList[2].num = item.v1
|
|
}
|
|
if(item.name == 2){
|
|
this.docTypeList[3].num = item.v1
|
|
}
|
|
if(item.name == 4){
|
|
this.docTypeList[4].num = item.v1
|
|
}
|
|
if(item.name == 5){
|
|
this.docTypeList[5].num = item.v1
|
|
}
|
|
})
|
|
this.setDocChart()
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
setLineChart() {
|
|
var chartLine = charts.init(document.getElementById("chartLine"));
|
|
var option = {
|
|
title: {
|
|
text: "",
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
grid: {
|
|
top: "10%",
|
|
left: "2%",
|
|
right: "2%",
|
|
bottom: "2%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: this.lineChartTitle,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "line",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#26f",
|
|
},
|
|
},
|
|
data: this.lineChartData,
|
|
},
|
|
],
|
|
};
|
|
chartLine.setOption(option);
|
|
},
|
|
setReadChart() {
|
|
var chart = charts.init(document.getElementById("readType"));
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b}: {c} ({d}%)",
|
|
},
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
radius: ["50%", "80%"],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: '{d}%',
|
|
fontSize: '14',
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{
|
|
value: this.readTypeList[0].num,
|
|
name: '传阅',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#4B87FE'
|
|
}
|
|
},
|
|
},
|
|
{
|
|
value: this.readTypeList[1].num,
|
|
name: '批示',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#FFAA44'
|
|
}
|
|
},
|
|
}
|
|
],
|
|
},
|
|
],
|
|
};
|
|
chart.setOption(option);
|
|
},
|
|
setDocChart() {
|
|
var chart = charts.init(document.getElementById("docType"));
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b}: {c} ({d}%)",
|
|
},
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
radius: ["50%", "80%"],
|
|
avoidLabelOverlap: false,
|
|
label: {
|
|
show: true,
|
|
position: 'inside',
|
|
formatter: '{d}%',
|
|
fontSize: '14',
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '14',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{
|
|
value: this.docTypeList[0].num,
|
|
name: '决议',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#FF4466'
|
|
}
|
|
},
|
|
},
|
|
{
|
|
value: this.docTypeList[1].num,
|
|
name: '决定',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#FFAA44'
|
|
}
|
|
},
|
|
},
|
|
{
|
|
value: this.docTypeList[2].num,
|
|
name: '通知',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#4B87FE'
|
|
}
|
|
},
|
|
},
|
|
{
|
|
value: this.docTypeList[3].num,
|
|
name: '通告',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#45A3FF'
|
|
}
|
|
},
|
|
},
|
|
{
|
|
value: this.docTypeList[4].num,
|
|
name: '函',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#2EA222'
|
|
}
|
|
},
|
|
},
|
|
{
|
|
value: this.docTypeList[5].num,
|
|
name: '其它',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#B244FF'
|
|
}
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
chart.setOption(option);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.statistics {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #f3f6f9;
|
|
// overflow: hidden;
|
|
.left{
|
|
width: 29%;
|
|
float: left;
|
|
margin-left: 16px;
|
|
.item-left{
|
|
padding: 0 20px;
|
|
width: 100%;
|
|
height: 120px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.02);
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
.item-left-title{
|
|
color: #333;
|
|
font-size: 16px;
|
|
padding: 20px 0 16px 0;
|
|
}
|
|
.item-left-num{
|
|
font-size: 32px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
width: calc(70% - 20px);
|
|
float: left;
|
|
}
|
|
.mar-t102{
|
|
margin-top: 102px;
|
|
}
|
|
.mar-t60{
|
|
margin-top: 60px;
|
|
}
|
|
.list-type{
|
|
width:calc(100% - 360px);
|
|
float:right;
|
|
margin-left: 20px;
|
|
font-size: 14px;
|
|
padding-right: 40px;
|
|
.item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 20px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.type-title{
|
|
color: #666;
|
|
.item-color-bg{
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: #4B87FE;
|
|
border-radius: 1px;
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
.num{
|
|
color: #333;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.chart-content {
|
|
width: 100%;
|
|
// height: 336px;
|
|
border-radius: 4px;
|
|
padding: 0 16px 16px 16px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
.chart-line {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.02);
|
|
}
|
|
.chart-title {
|
|
line-height: 48px;
|
|
border-bottom: 1px solid #e6e8ee;
|
|
padding-left: 16px;
|
|
color: #333;
|
|
font-size: 16px;
|
|
}
|
|
div {
|
|
flex: 1;
|
|
}
|
|
}
|
|
.tab-row {
|
|
padding: 16px 16px 16px 16px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.tab-col {
|
|
height: 64px;
|
|
flex: 1;
|
|
background-color: #fff;
|
|
margin-right: 20px;
|
|
border-radius: 4px;
|
|
border: 1px solid rgba(216, 224, 232, 1);
|
|
overflow: hidden;
|
|
|
|
.tab-title {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
color: #333;
|
|
height: 14px;
|
|
line-height: 14px;
|
|
vertical-align: super;
|
|
}
|
|
|
|
.tab-num {
|
|
height: 24px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
line-height: 24px;
|
|
font-family: DINAlternate-Bold, serif;
|
|
float: right;
|
|
line-height: 64px;
|
|
padding-right: 16px;
|
|
}
|
|
}
|
|
|
|
.tab-col:nth-last-child(1) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.icon {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 20px 8px 0 16px;
|
|
}
|
|
|
|
.card-panel {
|
|
flex: 1;
|
|
background: #fff;
|
|
border: 1px solid #d8e0e8;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
padding: 12px 16px 0 16px;
|
|
|
|
b {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: rgba(51, 51, 51, 1);
|
|
line-height: 22px;
|
|
}
|
|
|
|
#ASBarChart {
|
|
height: 286px;
|
|
|
|
& + .no-data {
|
|
margin: 83px auto;
|
|
}
|
|
}
|
|
|
|
#PartyAgePieChart,
|
|
#PartyEduPieChart {
|
|
height: 264px;
|
|
|
|
& + .no-data {
|
|
margin: 72px auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.party_title {
|
|
height: 48px;
|
|
line-height: 48px;
|
|
background: #fff;
|
|
text-indent: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.party_content {
|
|
flex: 1;
|
|
display: flex;
|
|
padding: 16px;
|
|
|
|
.party_left {
|
|
width: 280px;
|
|
background: #eaedf1;
|
|
border: 1px solid #d8dce3;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.p {
|
|
height: 28px;
|
|
line-height: 28px;
|
|
background: #d9e0e9;
|
|
font-size: 12px;
|
|
color: #333;
|
|
text-indent: 16px;
|
|
}
|
|
|
|
.left_tree {
|
|
padding: 8px;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
.left_cont {
|
|
width: 95%;
|
|
position: absolute;
|
|
top: 38px;
|
|
margin-top: 8px;
|
|
height: calc(100% - 80px);
|
|
overflow-y: auto;
|
|
|
|
.el-tree {
|
|
background: #eaedf1;
|
|
}
|
|
|
|
.right_btn {
|
|
width: 96px;
|
|
background: #fff;
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
padding: 4px 0;
|
|
position: fixed;
|
|
z-index: 999;
|
|
|
|
li {
|
|
height: 28px;
|
|
line-height: 28px;
|
|
cursor: pointer;
|
|
text-indent: 12px;
|
|
}
|
|
|
|
li:hover {
|
|
background-color: #eff6ff;
|
|
color: #5088ff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn_img {
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: #f5f6f7;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
width: 100%;
|
|
display: flex;
|
|
text-align: center;
|
|
border-top: 1px solid #d8dce3;
|
|
border-radius: 0 0 4px 4px;
|
|
|
|
span {
|
|
flex: 1;
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.party_right {
|
|
flex: 1;
|
|
overflow: auto;
|
|
margin-left: 11px;
|
|
|
|
.total-panel {
|
|
margin-bottom: 21px;
|
|
|
|
li {
|
|
flex: 1;
|
|
margin-right: 32px;
|
|
display: flex;
|
|
background: #fff;
|
|
border: 1px solid #d8e0e8;
|
|
border-radius: 4px;
|
|
color: #333;
|
|
padding: 20px;
|
|
font-weight: bold;
|
|
height: 97px;
|
|
box-sizing: border-box;
|
|
|
|
.icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
p {
|
|
font-size: 14px;
|
|
color: rgba(51, 51, 51, 1);
|
|
line-height: 24px;
|
|
}
|
|
|
|
b {
|
|
font-size: 20px;
|
|
color: rgba(51, 51, 51, 1);
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.operation {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 64px;
|
|
line-height: 64px;
|
|
display: flex;
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f3f6f9;
|
|
box-shadow: inset 0px 1px 0px 0px #eeeeee;
|
|
|
|
button {
|
|
width: 92px;
|
|
height: 32px;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.delete-btn {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
.mask {
|
|
.content {
|
|
padding-bottom: 100px;
|
|
}
|
|
.el-table {
|
|
border: 1px solid #d8e0e8;
|
|
border-bottom: 0;
|
|
}
|
|
p {
|
|
line-height: 28px;
|
|
text-align: right;
|
|
cursor: pointer;
|
|
color: #5088ff;
|
|
width: 88px;
|
|
float: right;
|
|
padding-bottom: 8px;
|
|
}
|
|
}
|
|
.vc-input-120 {
|
|
width: 120px !important;
|
|
float: right;
|
|
padding-right: 16px;
|
|
|
|
.el-input__inner {
|
|
width: 120px !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|