|
@@ -1,27 +1,583 @@
|
|
|
<template>
|
|
|
- <div >
|
|
|
+ <div class="flex2">
|
|
|
+
|
|
|
+ <div style="margin-top: 8px;width: 100%; background: white;padding: 13px;" >
|
|
|
+ <div class="flex">
|
|
|
+ <div class="t1">工作台</div>
|
|
|
+ <div class="flex" style="align-items: center;width: 95%;justify-content: center;">
|
|
|
+ <div class="search-header-box-search">
|
|
|
+ <input type="search"
|
|
|
+ class="search-header-box-searchinput"
|
|
|
+ id='oneSearchText' v-model='searchContent' placeholder="请输入来文机关/日期/摘要内容/附件名称">
|
|
|
+ <el-button type="primary" @click="searchFrom" size="small" style="font-size: large;height: 50px;width: 19%;border-radius: 26px;" >一键搜</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex" >
|
|
|
+ <div class="m3">
|
|
|
+ <el-card>
|
|
|
+ <div class="t1">系统流程图</div>
|
|
|
+ <el-image class="im1" src="public/img/home1.jpg" :fit="fit" />
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="m7">
|
|
|
+ <div class="t1">快捷导航</div>
|
|
|
+
|
|
|
+ <div class="flex">
|
|
|
+ <el-card class="card" :body-style="{ padding: '15px'}" @click="tab1">
|
|
|
+ <el-image class="im2" src="public/img/bt1.jpg" :fit="fit" />
|
|
|
+ <div class="t2">文件传阅</div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="card" style="margin-left: 20px;" :body-style="{ padding: '15px'}" @click="tab2" >
|
|
|
+ <el-image class="im2" src="public/img/bt2.jpg" :fit="fit" />
|
|
|
+ <div class="t2">用印审批</div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex">
|
|
|
+
|
|
|
+ <el-card class="card2" :body-style="{ padding: '15px 20px 15px 20px '}">
|
|
|
+
|
|
|
+ <div class="flex2">
|
|
|
+ <div class="t1">
|
|
|
+ 待办
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="tt1">
|
|
|
+ {{tcol1}}
|
|
|
+ </div>
|
|
|
+ <div class="flex2">
|
|
|
+ <div class="flex" @click="dbgw">
|
|
|
+ <div class="tt11">
|
|
|
+ 文件传阅
|
|
|
+ </div>
|
|
|
+ <div class="tt12">
|
|
|
+ {{tcol2}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex" @click="dbyz">
|
|
|
+ <div class="tt11">
|
|
|
+ 用印审批
|
|
|
+ </div>
|
|
|
+ <div class="tt12">
|
|
|
+ {{tcol3}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="card2" style="margin-left: 18px;" :body-style="{ padding: '15px 20px 15px 20px'}">
|
|
|
+
|
|
|
+ <div class="flex2">
|
|
|
+ <div class="t1">
|
|
|
+ 已办
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="tt2">
|
|
|
+ {{tcol4}}
|
|
|
+ </div>
|
|
|
+ <div class="flex2">
|
|
|
+ <div class="flex" @click="ybgw">
|
|
|
+ <div class="tt11">
|
|
|
+ 文件传阅
|
|
|
+ </div>
|
|
|
+ <div class="tt12">
|
|
|
+ {{tcol5}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex" @click="ybyz">
|
|
|
+ <div class="tt11">
|
|
|
+ 用印审批
|
|
|
+ </div>
|
|
|
+ <div class="tt12">
|
|
|
+ {{tcol6}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="card2" style="margin-left: 18px;" :body-style="{ padding: '15px 20px 15px 20px'}">
|
|
|
+
|
|
|
+ <div class="flex2">
|
|
|
+ <div class="t1">
|
|
|
+ 已归档
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="tt3">
|
|
|
+ {{tcol7}}
|
|
|
+ </div>
|
|
|
+ <div class="flex2">
|
|
|
+ <div class="flex" @click="gdgw">
|
|
|
+ <div class="tt11">
|
|
|
+ 文件传阅
|
|
|
+ </div>
|
|
|
+ <div class="tt12">
|
|
|
+ {{tcol8}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex" @click="gdyz">
|
|
|
+ <div class="tt11">
|
|
|
+ 用印审批
|
|
|
+ </div>
|
|
|
+ <div class="tt12">
|
|
|
+ {{tcol9}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="t1" style="margin-top: 10px;">数据分析</div>
|
|
|
+
|
|
|
+ <el-card class="card" >
|
|
|
+ <div class="flex">
|
|
|
+ <div class="flex2" style="width: 30%;">
|
|
|
+ <div class="t1">
|
|
|
+ 待办文件类型分析
|
|
|
+ </div>
|
|
|
+ <div style="height:270px; width: 100%;" id="tx1" >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex2" style="width: 30%;">
|
|
|
+ <div class="t1">
|
|
|
+ 已办文件类型分析
|
|
|
+ </div>
|
|
|
+ <div style="height:270px; width: 100%;" id="tx2">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex2" style="width: 30%;">
|
|
|
+ <div class="t1">
|
|
|
+ 已归档文件类型分析
|
|
|
+ </div>
|
|
|
+ <div style="height:270px; width: 100%;" id="tx3">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
+import WorkService from '@/api/workbench/WorkService'
|
|
|
export default {
|
|
|
name: "dashboard",
|
|
|
components: {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ loading: false,
|
|
|
+ showsearch: false,
|
|
|
pageLoading: true,
|
|
|
+ searchContent:"",
|
|
|
+ tcol1:0,
|
|
|
+ tcol2:0,
|
|
|
+ tcol3:0,
|
|
|
+ tcol4:0,
|
|
|
+ tcol5:0,
|
|
|
+ tcol6:0,
|
|
|
+ tcol7:0,
|
|
|
+ tcol8:0,
|
|
|
+ tcol9:0,
|
|
|
};
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ this.getStatistics()
|
|
|
+ },
|
|
|
methods: {
|
|
|
onMounted() {
|
|
|
this.pageLoading = false;
|
|
|
},
|
|
|
+
|
|
|
+ getStatistics(){
|
|
|
+ WorkService.getStatistics().then((data ) => {
|
|
|
+ this.tcol1=data.db;
|
|
|
+ this.tcol2=data.gw_db;
|
|
|
+ this.tcol3=data.yz_db;
|
|
|
+ this.tcol4=data.yb;
|
|
|
+ this.tcol5=data.gw_yb;
|
|
|
+ this.tcol6=data.yz_yb;
|
|
|
+ this.tcol7=data.gdcount;
|
|
|
+ this.tcol8=data.gw_gd;
|
|
|
+ this.tcol9=data.yz_gd;
|
|
|
+
|
|
|
+ this.line_fun1("文件传阅","用印审批",this.tcol2,this.tcol3)
|
|
|
+ this.line_fun2("文件传阅","用印审批",this.tcol5,this.tcol6)
|
|
|
+ this.line_fun3("文件传阅","用印审批",this.tcol8,this.tcol9)
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ searchFrom() {
|
|
|
+ this.searchContent = document.getElementById('oneSearchText').value
|
|
|
+ this.$router.push({
|
|
|
+ path: '/dashboard/search',
|
|
|
+ query: {
|
|
|
+ searchContent: this.searchContent
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ tab1() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/circulation2/GwCirculationCard2List',
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ tab2() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/yzcirculation/YzCirculationCardList',
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ dbgw() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/circulation2/GwCirculationCard2List',
|
|
|
+ query: {
|
|
|
+ state: 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ dbyz() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/yzcirculation/YzCirculationCardList',
|
|
|
+ query: {
|
|
|
+ state: 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ ybgw() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/circulation2/GwCirculationCard2List',
|
|
|
+ query: {
|
|
|
+ state: 4
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ybyz() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/yzcirculation/YzCirculationCardList',
|
|
|
+ query: {
|
|
|
+ state: 4
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ gdgw() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/circulation2/GwCirculationCard2List',
|
|
|
+ query: {
|
|
|
+ state: 3
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ gdyz() {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/yzcirculation/YzCirculationCardList',
|
|
|
+ query: {
|
|
|
+ state: 3
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ line_fun1 (name1,name2,value1,value2) {
|
|
|
+
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('tx1'))
|
|
|
+
|
|
|
+ const gaugeData = [
|
|
|
+ {
|
|
|
+ value: value1,
|
|
|
+ name: name1,
|
|
|
+ title: {
|
|
|
+ offsetCenter: [0, -45]
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ offsetCenter: ['0%', '-20%']
|
|
|
+ },itemStyle: {
|
|
|
+ color: "#77AFF4"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: value2,
|
|
|
+ name: name2,
|
|
|
+ title: {
|
|
|
+ offsetCenter: [0, 15]
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ valueAnimation: true,
|
|
|
+ offsetCenter: ['0%', '40%']
|
|
|
+ },itemStyle: {
|
|
|
+ color: "#F9974F"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ const option = {
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'gauge',
|
|
|
+ startAngle: 90,
|
|
|
+ endAngle: -270,
|
|
|
+ pointer: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ progress: {
|
|
|
+ show: true,
|
|
|
+ overlap: false,
|
|
|
+ roundCap: true,
|
|
|
+ clip: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 20
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ distance: 0,
|
|
|
+ length: 10
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ distance: 50
|
|
|
+ },
|
|
|
+ data: gaugeData,
|
|
|
+ title: {
|
|
|
+ fontSize: 15
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ width: 30,
|
|
|
+ height: 14,
|
|
|
+ fontSize: 14,
|
|
|
+ color: 'inherit',
|
|
|
+
|
|
|
+ formatter: '{value}'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ myChart.setOption(option)
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ line_fun2 (name1,name2,value1,value2) {
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('tx2'))
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['30%', '53%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ padAngle: 20,
|
|
|
+ roseType: 'area',
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 4
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ scaleSize: 12,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 20,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: value2, name: name2 ,itemStyle: {
|
|
|
+ color: "#138DB6"
|
|
|
+ }},
|
|
|
+ { value: value1, name: name1,itemStyle: {
|
|
|
+ color: "#12B5B0" }}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ myChart.setOption(option)
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ line_fun3 (name1,name2,value1,value2) {
|
|
|
+ var myChart = this.$echarts.init(document.getElementById('tx3'))
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '88%',
|
|
|
+ left: 'right',
|
|
|
+
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['0', '50%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ padAngle: 30,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 1
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ scaleSize: 15,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 22,
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: value2, name: name2 ,itemStyle: {
|
|
|
+ color: "#F2A80C"
|
|
|
+ }},
|
|
|
+ { value: value1, name: name1,itemStyle: {
|
|
|
+ color: "#66D1F5" }}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ myChart.setOption(option)
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style></style>
|
|
|
+<style>
|
|
|
+ .flex {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .flex2 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+.m3{
|
|
|
+ width: 30%;
|
|
|
+ padding: 10px;
|
|
|
+ min-height: 88%;
|
|
|
+}
|
|
|
+
|
|
|
+.m7{
|
|
|
+ width: 70%;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.t1{
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.t2{
|
|
|
+ font-size: 17px;
|
|
|
+
|
|
|
+}
|
|
|
+.tt1{
|
|
|
+ padding-top: 6px;
|
|
|
+ font-size: 42px;
|
|
|
+ min-width: 86px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #ffaa00;
|
|
|
+}
|
|
|
+.tt11{
|
|
|
+ font-size: 15px;
|
|
|
+ padding-top: 7px;
|
|
|
+ padding-bottom: 2px;
|
|
|
+}
|
|
|
+.tt12{
|
|
|
+ margin-left: 25px;
|
|
|
+ margin-right: 15px;
|
|
|
+ font-size: 20px;
|
|
|
+ padding-top: 2px;
|
|
|
+ color: #ffaa00;
|
|
|
+ padding-bottom: 4px;
|
|
|
+}
|
|
|
+.tt2{
|
|
|
+ padding-top: 6px;
|
|
|
+ font-size: 42px;
|
|
|
+ min-width: 110px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #0173ff;
|
|
|
+}
|
|
|
+.tt3{
|
|
|
+ padding-top: 6px;
|
|
|
+ font-size: 42px;
|
|
|
+ min-width: 110px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #55ff7f;
|
|
|
+}
|
|
|
+.im1{
|
|
|
+ padding-top: 30px;
|
|
|
+ padding-bottom: 60px;
|
|
|
+}
|
|
|
+.im2{
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+
|
|
|
+}
|
|
|
+.card{
|
|
|
+ text-align: center;margin-top: 8px;padding: 2px;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+.card2{
|
|
|
+ margin-top: 15px;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-header-box-search {
|
|
|
+ width: 48%;
|
|
|
+ height: 50px;
|
|
|
+ margin-left: 1%;
|
|
|
+ border-radius: 26px;
|
|
|
+ padding-left: 28px;
|
|
|
+ border-color: rgba(0, 0, 0, 0);
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ align-self: center;
|
|
|
+}
|
|
|
+.search-header-box-searchinput{
|
|
|
+ font-size: large;
|
|
|
+ border: aliceblue;
|
|
|
+ width: 81%;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|