kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

目录代码整合

Browse Source
This commit is contained in:
aixianling
2022-05-10 20:02:37 +08:00
parent 71049f7f65
commit 036ee91533
324 changed files with 4 additions and 8321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

766
packages/work/AppDispatchManagement/components/statistics.vue Normal file
View File

@@ -0,0 +1,766 @@
<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>