Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
19499817 by renchao@pashanhoo.com
Options

Merge branch 'dev'

2 parents 78262da4 2d9b694d
Inline Side-by-side
Showing 25 changed files with 2381 additions and 162 deletions
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
17 "bpmn-js-token-simulation": "^0.10.0", 17 "bpmn-js-token-simulation": "^0.10.0",
18 "core-js": "^3.6.5", 18 "core-js": "^3.6.5",
19 "diagram-js": "^6.8.2", 19 "diagram-js": "^6.8.2",
20 "echarts": "^5.4.3",
20 "js-cookie": "2.2.0", 21 "js-cookie": "2.2.0",
21 "lodash": "^4.17.21", 22 "lodash": "^4.17.21",
22 "mxdraw": "^0.1.157", 23 "mxdraw": "^0.1.157",
......
1 { 1 {
2 "TITLE": "不动产登记系统", 2 "TITLE": "不动产登记系统",
3 "SERVERAPI": "/bdcdj", 3 "SERVERAPI": "/bdcdj",
4 "IDCARDURL": "http://127.0.0.1:33088/function=get_idcard&readnew=0" 4 "IDCARDURL": "http://127.0.0.1:33088/function=get_idcard&readnew=0",
5 "adapter": "dysqs-630222"
5 } 6 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -294,16 +294,22 @@ export const asyncRoutes = [ ...@@ -294,16 +294,22 @@ export const asyncRoutes = [
294 name: 'tjfx', 294 name: 'tjfx',
295 children: [ 295 children: [
296 { 296 {
297 path: 'ywltj', 297 path: 'bdcdjtjfx',
298 component: () => import('@/views/tjfx/ywltj/index.vue'), 298 component: () => import('@/views/tjfx/bdcdjtjfx/index.vue'),
299 name: 'qyxxba', 299 name: 'bdcdjtjfx',
300 meta: { title: '业务量统计' } 300 meta: { title: '不动产登记统计分析' }
301 },
302 {
303 path: 'tjltj',
304 component: () => import('@/views/tjfx/tjltj/index.vue'),
305 name: 'tjltj',
306 meta: { title: '退件率统计' }
301 }, 307 },
302 { 308 {
303 path: 'gzltj', 309 path: 'cstj',
304 component: () => import('@/views/tjfx/gzltj/index.vue'), 310 component: () => import('@/views/tjfx/cstj/index.vue'),
305 name: 'gzltj', 311 name: 'cstj',
306 meta: { title: '工作量统计' } 312 meta: { title: '超时统计' }
307 } 313 }
308 ] 314 ]
309 }, 315 },
......
1 /* 1 /*
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-11-16 13:58:50 4 * @LastEditTime: 2023-11-22 13:42:26
5 */ 5 */
6 import { mapGetters } from 'vuex' 6 import { mapGetters } from 'vuex'
7 import { defaultParameters } from "../../views/ywbl/ywsq/javascript/publicDefaultPar"; 7 import { defaultParameters } from "../../views/ywbl/ywsq/javascript/publicDefaultPar";
...@@ -19,7 +19,7 @@ export default { ...@@ -19,7 +19,7 @@ export default {
19 }, 19 },
20 mounted () { 20 mounted () {
21 window.addEventListener('keydown', this.handkeyCode, true)//开启监听键盘按下事件 21 window.addEventListener('keydown', this.handkeyCode, true)//开启监听键盘按下事件
22 // this.handleSearch() 22 this.handleSearch()
23 }, 23 },
24 methods: { 24 methods: {
25 /** 25 /**
......
1 /*
2 * @Description: 申请书
3 * @Autor: renchao
4 * @LastEditTime: 2023-11-20 15:42:45
5 */
6 import Vue from 'vue'
7 // 创建不同的适配器策略
8 const strategies = {
9 dysqs: function (data) {
10 return data.name;
11 },
12 default: function (data) {
13 return data;
14 }
15 };
16
17 // 创建适配器函数，并使用策略模式进行数据处理
18 export default function adapter (data) {
19 const type = Vue.prototype.BASE_API.adapter;
20 const selectedStrategy = strategies[type] || strategies['default'];
21
22 return selectedStrategy(data);
23 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,7 +4,7 @@ import cookies from './util.cookies' ...@@ -4,7 +4,7 @@ import cookies from './util.cookies'
4 * @param {*} paraName 4 * @param {*} paraName
5 * @author: renchao 5 * @author: renchao
6 */ 6 */
7 export function getUrlParam (paraName) { 7 export function getUrlParam(paraName) {
8 let url = document.location.toString(); 8 let url = document.location.toString();
9 let arrObj = url.split('?'); 9 let arrObj = url.split('?');
10 10
...@@ -31,7 +31,7 @@ export function getUrlParam (paraName) { ...@@ -31,7 +31,7 @@ export function getUrlParam (paraName) {
31 * @param {*} token 31 * @param {*} token
32 * @author: renchao 32 * @author: renchao
33 */ 33 */
34 export function setToken (token) { 34 export function setToken(token) {
35 if (token === undefined) { 35 if (token === undefined) {
36 if (process.env.NODE_ENV === 'development') { 36 if (process.env.NODE_ENV === 'development') {
37 sessionStorage.removeItem('token') 37 sessionStorage.removeItem('token')
...@@ -50,7 +50,7 @@ export function setToken (token) { ...@@ -50,7 +50,7 @@ export function setToken (token) {
50 * @description: getToken 50 * @description: getToken
51 * @author: renchao 51 * @author: renchao
52 */ 52 */
53 export function getToken () { 53 export function getToken() {
54 if (process.env.NODE_ENV === 'development') { 54 if (process.env.NODE_ENV === 'development') {
55 return sessionStorage.getItem('token') 55 return sessionStorage.getItem('token')
56 } 56 }
...@@ -63,7 +63,7 @@ export function getToken () { ...@@ -63,7 +63,7 @@ export function getToken () {
63 * @param {*} type 63 * @param {*} type
64 * @author: renchao 64 * @author: renchao
65 */ 65 */
66 export function getNewDate (type = 1) { 66 export function getNewDate(type = 1) {
67 const now = new Date(); 67 const now = new Date();
68 const year = now.getFullYear(); 68 const year = now.getFullYear();
69 const month = String(now.getMonth() + 1).padStart(2, '0'); 69 const month = String(now.getMonth() + 1).padStart(2, '0');
...@@ -78,7 +78,7 @@ export function getNewDate (type = 1) { ...@@ -78,7 +78,7 @@ export function getNewDate (type = 1) {
78 } 78 }
79 } 79 }
80 80
81 export function getNewDatesh () { 81 export function getNewDatesh() {
82 const now = new Date(); 82 const now = new Date();
83 const year = now.getFullYear(); 83 const year = now.getFullYear();
84 const month = String(now.getMonth() + 1).padStart(2, '0'); 84 const month = String(now.getMonth() + 1).padStart(2, '0');
...@@ -88,3 +88,31 @@ export function getNewDatesh () { ...@@ -88,3 +88,31 @@ export function getNewDatesh () {
88 const seconds = String(now.getSeconds()).padStart(2, '0'); 88 const seconds = String(now.getSeconds()).padStart(2, '0');
89 return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` 89 return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
90 } 90 }
91
92 // 近一个月时间
93 export function getdatamonth() {
94 var tempDate = new Date();
95 var year = tempDate.getFullYear();
96 var month = tempDate.getMonth();
97 var arr = []
98 arr.push(
99 formatDate(new Date(year, month, 1)),
100 formatDate(tempDate)
101 );
102 return arr
103 }
104 // 格式化日期
105 export function formatDate(date) {
106 var year = date.getFullYear();
107 var month = changeNum(date.getMonth() + 1);
108 var day = changeNum(date.getDate());
109 return `${year}-${month}-${day}`;
110 }
111 // 数字转换
112 export function changeNum(num) {
113 if (num >= 10) {
114 return num;
115 } else {
116 return "0" + num;
117 }
118 }
......
1 <template> 1 <template>
2 <div class="jtfccx-edit">
3 <div class="jtfccx-edit-con"> 2 <div class="jtfccx-edit-con">
4 <b class="title"></b> 3 <b class="title"></b>
5 <b class="title">房屋状况</b> 4 <b class="title">房屋状况</b>
...@@ -31,17 +30,16 @@ ...@@ -31,17 +30,16 @@
31 :pagination="false"> 30 :pagination="false">
32 </lb-table> 31 </lb-table>
33 </div> 32 </div>
34 </div>
35 </template> 33 </template>
36 34
37 <script> 35 <script>
38 import { datas, sendThis } from "./infodata"; 36 import { datas, sendThis } from "./infodata";
39 import { getFwmxInfo } from "@/api/jtfc.js"; 37 import { getFwmxInfo } from "@/api/jtfc.js";
40 export default { 38 export default {
41 props: { 39 props: {
42 formData: { 40 formData: {
43 type: Object, 41 type: Object,
44 default: () => {}, 42 default: () => { },
45 }, 43 },
46 }, 44 },
47 data () { 45 data () {
...@@ -69,7 +67,7 @@ export default { ...@@ -69,7 +67,7 @@ export default {
69 }; 67 };
70 }, 68 },
71 mounted () { 69 mounted () {
72 if(this.formData){ 70 if (this.formData) {
73 this.getDetailInfo() 71 this.getDetailInfo()
74 } 72 }
75 }, 73 },
...@@ -79,14 +77,14 @@ export default { ...@@ -79,14 +77,14 @@ export default {
79 * @param {*} data 77 * @param {*} data
80 * @author: renchao 78 * @author: renchao
81 */ 79 */
82 setResult(data){ 80 setResult (data) {
83 this.resultData = data 81 this.resultData = data
84 }, 82 },
85 /** 83 /**
86 * @description: getDetailInfo 84 * @description: getDetailInfo
87 * @author: renchao 85 * @author: renchao
88 */ 86 */
89 getDetailInfo(){ 87 getDetailInfo () {
90 this.$startLoading(); 88 this.$startLoading();
91 getFwmxInfo({ sqcxBsm: this.formData.bsmSqcx }).then((res) => { 89 getFwmxInfo({ sqcxBsm: this.formData.bsmSqcx }).then((res) => {
92 this.$endLoading(); 90 this.$endLoading();
...@@ -96,19 +94,22 @@ export default { ...@@ -96,19 +94,22 @@ export default {
96 }) 94 })
97 } 95 }
98 } 96 }
99 }; 97 };
100 </script> 98 </script>
101 <style scoped lang="scss"> 99 <style scoped lang="scss">
102 @import "~@/styles/mixin.scss"; 100 @import "~@/styles/mixin.scss";
103 101 .jtfccx-edit-con {
104 .table1 { 102 max-height: 85vh;
103 overflow-y: scroll;
104 }
105 .table1 {
105 border-spacing: 0; 106 border-spacing: 0;
106 border-collapse: collapse; 107 border-collapse: collapse;
107 width: 100%; 108 width: 100%;
108 } 109 }
109 110
110 .table1 td { 111 .table1 td {
111 border: 1px solid #acbed1; 112 border: 1px solid #acbed1;
112 height: 30px; 113 height: 30px;
113 } 114 }
114 </style> 115 </style>
......
...@@ -345,7 +345,6 @@ ...@@ -345,7 +345,6 @@
345 dyjlList: [], 345 dyjlList: [],
346 } 346 }
347 }, 347 },
348 //加载详细信息
349 /** 348 /**
350 * @description: 加载详细信息 349 * @description: 加载详细信息
351 * @author: renchao 350 * @author: renchao
...@@ -416,7 +415,6 @@ ...@@ -416,7 +415,6 @@
416 } 415 }
417 }) 416 })
418 }, 417 },
419 //添加申请人
420 /** 418 /**
421 * @description: 添加申请人 419 * @description: 添加申请人
422 * @author: renchao 420 * @author: renchao
...@@ -440,14 +438,12 @@ ...@@ -440,14 +438,12 @@
440 * @author: renchao 438 * @author: renchao
441 */ 439 */
442 remove (index, row, type) { 440 remove (index, row, type) {
443 console.log(type, 'type');
444 if (type == "sqr") { 441 if (type == "sqr") {
445 this.form.sqrList.splice(index, 1); 442 this.form.sqrList.splice(index, 1);
446 } else { 443 } else {
447 this.form.qlrList.splice(index, 1); 444 this.form.qlrList.splice(index, 1);
448 } 445 }
449 }, 446 },
450 //电话号码校验
451 /** 447 /**
452 * @description: 电话号码校验 448 * @description: 电话号码校验
453 * @param {*} row 449 * @param {*} row
...@@ -463,7 +459,6 @@ ...@@ -463,7 +459,6 @@
463 return true; 459 return true;
464 } 460 }
465 }, 461 },
466 //打印
467 /** 462 /**
468 * @description: 打印 463 * @description: 打印
469 * @author: renchao 464 * @author: renchao
...@@ -479,7 +474,6 @@ ...@@ -479,7 +474,6 @@
479 } 474 }
480 }); 475 });
481 }, 476 },
482 //打开打印预览
483 /** 477 /**
484 * @description: 打开打印预览 478 * @description: 打开打印预览
485 * @author: renchao 479 * @author: renchao
......
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
104 * @author: renchao 104 * @author: renchao
105 */ 105 */
106 handleAdd () { 106 handleAdd () {
107 this.$popupDialog("家庭房产查询", "sqcx/jtfc/components/addjtfc", { 107 this.$popupDialog("登记情况", "sqcx/jtfc/components/addjtfc", {
108 sqcxBsm: '' 108 sqcxBsm: ''
109 }, '80%') 109 }, '80%')
110 }, 110 },
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
114 * @author: renchao 114 * @author: renchao
115 */ 115 */
116 handleViewClick (row) { 116 handleViewClick (row) {
117 this.$popupDialog("家庭房产查询", "sqcx/jtfc/components/addjtfc", { 117 this.$popupDialog("登记情况", "sqcx/jtfc/components/addjtfc", {
118 sqcxBsm: row.bsmSqcx 118 sqcxBsm: row.bsmSqcx
119 }, '80%') 119 }, '80%')
120 } 120 }
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-09-01 08:20:51 4 * @LastEditTime: 2023-11-21 16:30:43
5 --> 5 -->
6 <template> 6 <template>
7 <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules"> 7 <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
...@@ -67,7 +67,8 @@ ...@@ -67,7 +67,8 @@
67 tmpname: '', 67 tmpname: '',
68 tmpfont: '', 68 tmpfont: '',
69 tmpfontsize: '', 69 tmpfontsize: '',
70 tmpcontent: '' 70 tmpcontent: '', //模板1
71 tmpcontent2: '', //模板2
71 }, 72 },
72 rules: { 73 rules: {
73 tmpno: [ 74 tmpno: [
...@@ -83,7 +84,6 @@ ...@@ -83,7 +84,6 @@
83 if (JSON.stringify(this.formData) != "{}") this.getDetailInfo(this.formData) 84 if (JSON.stringify(this.formData) != "{}") this.getDetailInfo(this.formData)
84 }, 85 },
85 methods: { 86 methods: {
86 //表单提交
87 /** 87 /**
88 * @description: 表单提交 88 * @description: 表单提交
89 * @author: renchao 89 * @author: renchao
...@@ -104,7 +104,6 @@ ...@@ -104,7 +104,6 @@
104 } 104 }
105 }); 105 });
106 }, 106 },
107 //新增
108 /** 107 /**
109 * @description: 新增 108 * @description: 新增
110 * @author: renchao 109 * @author: renchao
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row :gutter="24">
11 <el-col :span="12">
12 <el-form-item label="收件时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.sj"
15 type="daterange"
16 class="width100"
17 range-separator="至"
18 :clearable="false"
19 value-format="yyyy-MM-dd"
20 start-placeholder="开始日期"
21 end-placeholder="结束日期"
22 >
23 </el-date-picker>
24 </el-form-item>
25 </el-col>
26 <el-col :span="7">
27 <el-form-item label="区域" class="width100">
28 <el-select
29 v-model="queryForm.qy"
30 class="width100"
31 clearable
32 placeholder="请选择区域"
33 >
34 <el-option
35 v-for="item in dictData['A20']"
36 :key="item.dcode"
37 :label="item.dname"
38 :value="item.dcode"
39 >
40 </el-option>
41 </el-select>
42 </el-form-item>
43 </el-col>
44 <el-col :span="4" class="btnColRight">
45 <el-form-item>
46 <el-button
47 type="primary"
48 native-type="submit"
49 @click="handleSearch"
50 >查询</el-button
51 >
52 </el-form-item>
53 </el-col>
54 </el-row>
55 </el-form>
56 </div>
57 <div class="concent">
58 <div class="left">
59 <el-table
60 class="tableBox"
61 height="187"
62 stripe
63 :data="tableList"
64 show-summary
65 size="mini"
66 border
67 header-cell-class-name="table-header-gray"
68 >
69 <el-table-column
70 label="登记类型"
71 prop="name"
72 minWidth="100"
73 align="center" />
74 <el-table-column
75 label="收件数量"
76 prop="value"
77 minWidth="120"
78 align="center"
79 /></el-table>
80 </div>
81 <div class="right">
82 <div ref="chart" style="width: 100%; height: 200px"></div>
83 </div>
84 </div>
85 </div>
86 </template>
87 <script>
88 import * as echarts from "echarts";
89 import { mapGetters } from "vuex";
90 import { getdatamonth } from "@/utils/util";
91 export default {
92 components: {},
93 computed: {
94 ...mapGetters(["dictData", "transfer"]),
95 },
96 data() {
97 return {
98 queryForm: {
99 sj: [],
100 },
101 tableList: [
102 { name: "首次登记", value: "2" },
103 { name: "变更登记", value: "12" },
104 { name: "抵押登记", value: "23" },
105 { name: "转移登记", value: "33" },
106 { name: "预告登记", value: "13" },
107 { name: "注销登记", value: "3" },
108 { name: "查封登记", value: "4" },
109 { name: "其他登记", value: "26" },
110 ],
111 };
112 },
113 mounted() {
114 this.setdata();
115 // 创建一个 ECharts 实例
116 this.chart = echarts.init(this.$refs.chart);
117 // 在 ECharts 实例中配置图表
118 this.chart.setOption(this.getOption());
119 },
120 methods: {
121 getOption() {
122 return {
123 title: {
124 text: "登记类型统计",
125 x: "center",
126 textStyle: {
127 //主标题文本设置
128 fontSize: 12, //大小
129 },
130 },
131 tooltip: {
132 trigger: "item",
133 formatter: "{a} <br/>{b} : {c}个 ({d}%)",
134 },
135 grid: {
136 top: "4%",
137 left: "2%",
138 right: "3%",
139 bottom: "20%",
140 containLabel: true,
141 },
142 series: [
143 {
144 name: "统计分析图",
145 type: "pie",
146 radius: "70%",
147 center: ["50%", "100%"],
148 data: this.tableList,
149 itemStyle: {
150 emphasis: {
151 shadowBlur: 10,
152 shadowOffsetX: 0,
153 shadowColor: "rgba(0, 0, 0, 0.5)",
154 },
155 },
156 label: {
157 normal: {
158 formatter: "{c}/个",
159 position: "inside", //让文字显示在饼状图里面
160 textStyle: {
161 fontSize: 10,
162 color: "#fff",
163 },
164 },
165 },
166 center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
167 },
168 ],
169 };
170 },
171 setdata() {
172 this.queryForm.sj = getdatamonth();
173 console.log("this.queryForm", this.queryForm);
174 },
175
176 handleSearch() {
177 console.log(" this.queryForm", this.queryForm);
178 },
179 },
180 };
181 </script>
182 <style scoped lang="scss">
183 /deep/.el-card__header {
184 padding: 8px 10px;
185 }
186
187 /deep/.el-card__body {
188 padding: 3px 10px 5px 10px;
189 overflow: hidden;
190 }
191 .djlx {
192 .el-col {
193 padding: 4px;
194 margin-right: 4px;
195 }
196 .inquire {
197 width: 100%;
198 height: 40px;
199 background-color: #f4f7fd;
200 /deep/ .el-form {
201 .el-form-item--small.el-form-item {
202 margin-bottom: 5px;
203 }
204 }
205 }
206
207 .concent {
208 width: 100%;
209 height: 300px;
210 display: flex;
211 //调整表头高度
212 /deep/.el-table__header {
213 height: 22px !important;
214 background-color: salmon;
215 }
216 .left {
217 width: 70%;
218 height: 200px;
219 }
220 .right {
221 width: 30%;
222 height: 300px;
223 }
224 }
225
226 /deep/.el-table th {
227 height: 36px !important;
228 font-size: 14px;
229 color: #4a4a4a;
230 }
231
232 }
233 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row :gutter="20">
11 <el-col :span="12">
12 <el-form-item label="收件时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.sj"
15 type="daterange"
16 class="width100"
17 range-separator="至"
18 :clearable="false"
19 value-format="yyyy-MM-dd"
20 start-placeholder="开始日期"
21 end-placeholder="结束日期"
22 >
23 </el-date-picker>
24 </el-form-item>
25 </el-col>
26 <el-col :span="11" class="btnColRight">
27 <el-form-item>
28 <el-button
29 type="primary"
30 native-type="submit"
31 @click="handleSearch"
32 >查询</el-button
33 >
34 </el-form-item>
35 </el-col>
36 </el-row>
37 </el-form>
38 </div>
39 <div class="concent">
40 <div class="left">
41 <el-table
42 height="187"
43 stripe
44 :data="tableList"
45 show-summary
46 size="mini"
47 border
48 header-cell-class-name="table-header-gray"
49 >
50 <el-table-column
51 label="区域"
52 prop="name"
53 minWidth="100"
54 align="center" />
55 <el-table-column
56 label="收件数量"
57 prop="value"
58 minWidth="120"
59 align="center"
60 /></el-table>
61 </div>
62 <div class="right">
63 <div ref="chart" style="width: 100%; height: 200px"></div>
64 </div>
65 </div>
66 </div>
67 </template>
68 <script>
69 import * as echarts from "echarts";
70 import { getdatamonth } from "@/utils/util";
71 export default {
72 components: {},
73 data() {
74 return {
75 queryForm: {},
76 tableList: [
77 { name: "浐灞", value: "2" },
78 { name: "长安", value: "12" },
79 { name: "莲湖", value: "23" },
80 { name: "高新", value: "33" },
81 { name: "高新", value: "33" },
82 ],
83 };
84 },
85 mounted() {
86 this.setdata();
87 // 创建一个 ECharts 实例
88 this.chart = echarts.init(this.$refs.chart);
89 // 在 ECharts 实例中配置图表
90 this.chart.setOption(this.getOption());
91 },
92 methods: {
93 getOption() {
94 return {
95 title: {
96 text: "区域统计分析",
97 x: "center",
98 textStyle: {
99 //主标题文本设置
100 fontSize: 12, //大小
101 },
102 },
103 tooltip: {
104 trigger: "item",
105 formatter: "{a} <br/>{b} : {c}个 ({d}%)",
106 },
107 grid: {
108 top: "4%",
109 left: "2%",
110 right: "3%",
111 bottom: "20%",
112 containLabel: true,
113 },
114 series: [
115 {
116 name: "统计分析图",
117 type: "pie",
118 radius: "70%",
119 center: ["50%", "100%"],
120 data: this.tableList,
121 itemStyle: {
122 emphasis: {
123 shadowBlur: 10,
124 shadowOffsetX: 0,
125 shadowColor: "rgba(0, 0, 0, 0.5)",
126 },
127 },
128 label: {
129 normal: {
130 formatter: "{c}/个",
131 position: "inside", //让文字显示在饼状图里面
132 textStyle: {
133 fontSize: 10,
134 color: "#fff",
135 },
136 },
137 },
138 center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
139 },
140 ],
141 };
142 },
143 setdata() {
144 this.queryForm.sj = getdatamonth();
145 console.log("this.queryForm", this.queryForm);
146 },
147 handleSearch() {
148 console.log(" this.queryForm", this.queryForm);
149 },
150 },
151 };
152 </script>
153 <style scoped lang="scss">
154 /deep/.el-card__header {
155 padding: 8px 10px;
156 }
157
158 /deep/.el-card__body {
159 padding: 3px 10px 5px 10px;
160 overflow: hidden;
161 }
162 .yhjgba {
163 .el-col {
164 padding: 4px;
165 margin-right: 4px;
166 }
167 .inquire {
168 width: 100%;
169 height: 40px;
170 background-color: #f4f7fd;
171 /deep/ .el-form {
172 .el-form-item--small.el-form-item {
173 margin-bottom: 5px;
174 }
175 }
176 }
177
178 .concent {
179 width: 100%;
180 height: 300px;
181 display: flex;
182 /deep/.el-table th {
183 height: 36px !important;
184 font-size: 14px;
185 color: #4a4a4a;
186 }
187 .left {
188 width: 70%;
189 height: 200px;
190 }
191 .right {
192 width: 30%;
193 height: 300px;
194 }
195 }
196 }
197 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row :gutter="24">
11 <el-col :span="12">
12 <el-form-item label="收件时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.sj"
15 type="daterange"
16 class="width100"
17 range-separator="至"
18 :clearable="false"
19 value-format="yyyy-MM-dd"
20 start-placeholder="开始日期"
21 end-placeholder="结束日期"
22 >
23 </el-date-picker>
24 </el-form-item>
25 </el-col>
26 <el-col :span="7">
27 <el-form-item label="区域" class="width100">
28 <el-select
29 v-model="queryForm.qy"
30 class="width100"
31 clearable
32 placeholder="请选择区域"
33 >
34 <el-option
35 v-for="item in dictData['A20']"
36 :key="item.dcode"
37 :label="item.dname"
38 :value="item.dcode"
39 >
40 </el-option>
41 </el-select>
42 </el-form-item>
43 </el-col>
44 <el-col :span="4" class="btnColRight">
45 <el-form-item>
46 <el-button
47 type="primary"
48 native-type="submit"
49 @click="handleSearch"
50 >查询</el-button
51 >
52 </el-form-item>
53 </el-col>
54 </el-row>
55 </el-form>
56 </div>
57 <div class="concent">
58 <div class="left">
59 <el-table
60 height="187"
61 stripe
62 show-summary
63 :data="tableList"
64 size="mini"
65 border
66 header-cell-class-name="table-header-gray"
67 >
68 <el-table-column
69 label="收件人"
70 prop="name"
71 minWidth="100"
72 align="center" />
73 <el-table-column
74 label="收件数量"
75 prop="value"
76 minWidth="120"
77 align="center"
78 /></el-table>
79 </div>
80 <div class="right">
81 <div ref="chart" style="width: 100%; height: 200px"></div>
82 </div>
83 </div>
84 </div>
85 </template>
86 <script>
87 import * as echarts from "echarts";
88 import { mapGetters } from "vuex";
89 import { getdatamonth } from "@/utils/util";
90 export default {
91 components: {},
92 computed: {
93 ...mapGetters(["dictData", "transfer"]),
94 },
95 data() {
96 return {
97 queryForm: {},
98 tableList: [
99 { name: "小红", value: "2" },
100 { name: "小张", value: "12" },
101 { name: "小王", value: "23" },
102 ],
103 };
104 },
105 mounted() {
106 this.setdata();
107 // 创建一个 ECharts 实例
108 this.chart = echarts.init(this.$refs.chart);
109 // 在 ECharts 实例中配置图表
110 this.chart.setOption(this.getOption());
111 },
112 methods: {
113 getOption() {
114 return {
115 title: {
116 text: "登记类型统计",
117 x: "center",
118 textStyle: {
119 //主标题文本设置
120 fontSize: 12, //大小
121 },
122 },
123 tooltip: {
124 trigger: "item",
125 formatter: "{a} <br/>{b} : {c}个 ({d}%)",
126 },
127 grid: {
128 top: "4%",
129 left: "2%",
130 right: "3%",
131 bottom: "20%",
132 containLabel: true,
133 },
134 series: [
135 {
136 name: "统计分析图",
137 type: "pie",
138 radius: "70%",
139 center: ["50%", "100%"],
140 data: this.tableList,
141 itemStyle: {
142 emphasis: {
143 shadowBlur: 10,
144 shadowOffsetX: 0,
145 shadowColor: "rgba(0, 0, 0, 0.5)",
146 },
147 },
148 label: {
149 normal: {
150 formatter: "{c}/个",
151 position: "inside", //让文字显示在饼状图里面
152 textStyle: {
153 fontSize: 10,
154 color: "#fff",
155 },
156 },
157 },
158 center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
159 },
160 ],
161 };
162 },
163 setdata() {
164 this.queryForm.sj = getdatamonth();
165 console.log("this.queryForm", this.queryForm);
166 },
167 handleSearch() {
168 console.log(" this.queryForm", this.queryForm);
169 },
170 },
171 };
172 </script>
173 <style scoped lang="scss">
174 /deep/.el-card__header {
175 padding: 8px 10px;
176 }
177
178 /deep/.el-card__body {
179 padding: 3px 10px 5px 10px;
180 overflow: hidden;
181 }
182 .yhjgba {
183 .el-col {
184 padding: 4px;
185 margin-right: 4px;
186 }
187 .inquire {
188 width: 100%;
189 height: 40px;
190 background-color: #f4f7fd;
191 /deep/ .el-form {
192 .el-form-item--small.el-form-item {
193 margin-bottom: 5px;
194 }
195 }
196 }
197
198 .concent {
199 width: 100%;
200 height: 300px;
201 display: flex;
202 /deep/.el-table th {
203 height: 36px !important;
204 font-size: 14px;
205 color: #4a4a4a;
206 }
207 .left {
208 width: 70%;
209 height: 200px;
210 }
211 .right {
212 width: 30%;
213 height: 300px;
214 }
215 }
216 }
217 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="统计时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.monthValue"
15 class="width100"
16 type="month"
17 placeholder="选择月"
18 >
19 </el-date-picker>
20 </el-form-item>
21 </el-col>
22 <el-col :span="6">
23 <el-form-item label="区域" class="width100">
24 <el-select
25 v-model="queryForm.qy"
26 class="width100"
27 clearable
28 placeholder="请选择权利类型"
29 >
30 <el-option
31 v-for="item in dictData['A20']"
32 :key="item.dcode"
33 :label="item.dname"
34 :value="item.dcode"
35 >
36 </el-option>
37 </el-select>
38 </el-form-item>
39 </el-col>
40 <el-col :span="11" class="btnColRight">
41 <el-form-item>
42 <el-button
43 type="primary"
44 native-type="submit"
45 @click="handleSearch"
46 >查询</el-button
47 >
48 </el-form-item>
49 </el-col>
50 </el-row>
51 </el-form>
52 </div>
53 <div class="concent">
54 <div ref="chart" style="width: 100%; height: 200px"></div>
55 </div>
56 </div>
57 </template>
58 <script>
59 import * as echarts from "echarts";
60 import { mapGetters } from "vuex";
61 export default {
62 components: {},
63 computed: {
64 ...mapGetters(["dictData", "transfer"]),
65 },
66 data() {
67 return {
68 queryForm: {
69 monthValue:""
70 },
71 datas: [12, 23, 15, 28, 37, 11, 13, 32, 34, 56, 12, 15],
72 datatime: [
73 "1日",
74 "2日",
75 "4日",
76 "5日",
77 "7日",
78 "10日",
79 "14日",
80 "15日",
81 "17日",
82 "19日",
83 "20日",
84 "21日",
85 ],
86
87 };
88 },
89 created() {
90 // 默认当月
91 var nowDate = new Date();
92 var date = {
93 year: nowDate.getFullYear(),
94 month: nowDate.getMonth() + 1,
95 day: nowDate.getDate()
96 };
97 const dayDate =
98 date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
99 var date = new Date();
100 this.$set(this.queryForm, "monthValue", dayDate.toString());
101 console.log("this.queryForm",this.queryForm);
102 },
103 mounted() {
104 // 创建一个 ECharts 实例
105 this.chart = echarts.init(this.$refs.chart);
106 // 在 ECharts 实例中配置图表
107 this.chart.setOption(this.getOption());
108 },
109 methods: {
110 getOption() {
111 return {
112 title: {
113 text: "2023年11月收件情况 ", // 主标题名称
114
115 textStyle: {
116 //主标题文本设置
117 fontSize: 18, //大小
118 },
119
120 itemGap: 3, //主副标题间距
121 x: "center", //主副标题的水平位置
122 y: "top", //主副标题的垂直位置
123 },
124 legend: {
125 data: ["转诊量"],
126 top: "6%",
127 right: "4%",
128 textStyle: {
129 color: "#747474",
130 },
131 },
132 tooltip: {
133 // trigger: "item", //默认效果
134 //柱状图加阴影
135 trigger: "axis",
136 axisPointer: {
137 type: "shadow",
138 label: {
139 show: true,
140 },
141 },
142 },
143 grid: {
144 top: "20%",
145 left: "2%",
146 right: "3%",
147 bottom: "20%",
148 containLabel: true,
149 },
150 xAxis: {
151 type: "category",
152 data: this.datatime,
153 },
154 yAxis: {
155 type: "value",
156 },
157 series: [
158 {
159 data: this.datas,
160 type: "bar",
161 barWidth: 15,
162 showBackground: true,
163 backgroundStyle: {
164 color: "rgba(220, 220, 220, 0.8)",
165 },
166 },
167 ],
168 };
169 },
170
171 handleSearch() {},
172 },
173 };
174 </script>
175 <style scoped lang="scss">
176 /deep/.el-card__header {
177 padding: 8px 10px;
178 }
179
180 /deep/.el-card__body {
181 padding: 3px 10px 5px 10px;
182 overflow: hidden;
183 }
184 .yhjgba {
185 .el-col {
186 padding: 4px;
187 margin-right: 4px;
188 }
189 .inquire {
190 width: 100%;
191 height: 40px;
192 background-color: #f4f7fd;
193 /deep/ .el-form {
194 .el-form-item--small.el-form-item {
195 margin-bottom: 5px;
196 }
197 }
198 }
199 .concent {
200 width: 100%;
201 height: 300px;
202 display: flex;
203 }
204 }
205 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="统计年份" class="width100">
13 <el-date-picker
14 class="width100"
15 v-model="queryForm.sj"
16 type="year"
17 placeholder="选择年"
18 >
19 </el-date-picker>
20 </el-form-item>
21 </el-col>
22 <el-col :span="6">
23 <el-form-item label="区域" class="width100">
24 <el-select
25 v-model="queryForm.qy"
26 class="width100"
27 clearable
28 placeholder="请选择权利类型"
29 >
30 <el-option
31 v-for="item in dictData['A20']"
32 :key="item.dcode"
33 :label="item.dname"
34 :value="item.dcode"
35 >
36 </el-option>
37 </el-select>
38 </el-form-item>
39 </el-col>
40 <el-col :span="11" class="btnColRight">
41 <el-form-item>
42 <el-button
43 type="primary"
44 native-type="submit"
45 @click="handleSearch"
46 >查询</el-button
47 >
48 </el-form-item>
49 </el-col>
50 </el-row>
51 </el-form>
52 </div>
53 <div class="concent">
54 <div ref="chart" style="width: 100%; height: 200px"></div>
55 </div>
56 </div>
57 </template>
58 <script>
59 import * as echarts from "echarts";
60 import { mapGetters } from "vuex";
61
62 export default {
63 components: {},
64 computed: {
65 ...mapGetters(["dictData", "transfer"]),
66 },
67 data() {
68 return {
69 queryForm: {
70 sj:""
71 },
72 };
73 },
74 created() {
75 var tempDate = new Date();
76 var year = tempDate.getFullYear();
77 console.log("year", year);
78 // 默认当月
79
80 this.$set(this.queryForm, "sj", year.toString());
81 console.log("this.queryForm",this.queryForm);
82 },
83 mounted() {
84 // 创建一个 ECharts 实例
85 this.chart = echarts.init(this.$refs.chart);
86 // 在 ECharts 实例中配置图表
87 this.chart.setOption(this.getOption());
88 },
89 methods: {
90 getOption() {
91 return {
92 xAxis: {
93 type: "category",
94 data: [
95 "1月",
96 "2月",
97 "3月",
98 "4月",
99 "5月",
100 "6月",
101 "7月",
102 "8月",
103 "9月",
104 "10月",
105 "11月",
106 "12月",
107 ],
108 },
109 yAxis: {
110 type: "value",
111 },
112 title: {
113 text: "2023年收件情况 ", // 主标题名称
114
115 textStyle: {
116 //主标题文本设置
117 fontSize: 18, //大小
118 },
119
120 itemGap: 3, //主副标题间距
121 x: "center", //主副标题的水平位置
122 y: "top", //主副标题的垂直位置
123 },
124 legend: {
125 data: ["转诊量"],
126 top: "6%",
127 right: "4%",
128 textStyle: {
129 color: "#747474",
130 },
131 },
132 tooltip: {
133 // trigger: "item", //默认效果
134 //柱状图加阴影
135 trigger: "axis",
136 axisPointer: {
137 type: "shadow",
138 label: {
139 show: true,
140 },
141 },
142 },
143 grid: {
144 top: "20%",
145 left: "2%",
146 right: "3%",
147 bottom: "20%",
148 containLabel: true,
149 },
150 series: [
151 {
152 data: [38, 42, 50, 157, 40, 45, 60, 140, 36, 47, 54, 143],
153 barWidth: 40,
154 type: "bar",
155 },
156 ],
157 };
158 },
159
160 handleSearch() {},
161 },
162 };
163 </script>
164 <style scoped lang="scss">
165 /deep/.el-card__header {
166 padding: 8px 10px;
167 }
168
169 /deep/.el-card__body {
170 padding: 3px 10px 5px 10px;
171 overflow: hidden;
172 }
173 .yhjgba {
174 .el-col {
175 padding: 4px;
176 margin-right: 4px;
177 }
178 .inquire {
179 width: 100%;
180 height: 40px;
181 background-color: #f4f7fd;
182 /deep/ .el-form {
183 .el-form-item--small.el-form-item {
184 margin-bottom: 5px;
185 }
186 }
187 }
188 .concent {
189 width: 100%;
190 height: 300px;
191 display: flex;
192 }
193 }
194 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row :gutter="20">
11 <el-col :span="12">
12 <el-form-item label="缮证日期" class="width100">
13 <el-date-picker
14 v-model="queryForm.sj"
15 type="daterange"
16 class="width100"
17 range-separator="至"
18 :clearable="false"
19 value-format="yyyy-MM-dd"
20 start-placeholder="开始日期"
21 end-placeholder="结束日期"
22 >
23 </el-date-picker>
24 </el-form-item>
25 </el-col>
26 <el-col :span="7">
27 <el-form-item label="区域" class="width100">
28 <el-select
29 v-model="queryForm.qy"
30 class="width100"
31 clearable
32 placeholder="请选择区域"
33 >
34 <el-option
35 v-for="item in dictData['A20']"
36 :key="item.dcode"
37 :label="item.dname"
38 :value="item.dcode"
39 >
40 </el-option>
41 </el-select>
42 </el-form-item>
43 </el-col>
44 <el-col :span="4" class="btnColRight">
45 <el-form-item>
46 <el-button
47 type="primary"
48 native-type="submit"
49 @click="handleSearch"
50 >查询</el-button
51 >
52 </el-form-item>
53 </el-col>
54 </el-row>
55 </el-form>
56 </div>
57 <div class="concent">
58 <div class="left">
59 <el-table
60 height="187"
61 stripe
62 :data="tableList"
63 show-summary
64 size="mini"
65 border
66 header-cell-class-name="table-header-gray"
67 >
68 <el-table-column
69 label="证书种类"
70 prop="name"
71 minWidth="100"
72 align="center" />
73 <el-table-column
74 label="收件数量"
75 prop="value"
76 minWidth="120"
77 align="center"
78 /></el-table>
79 </div>
80 <div class="right">
81 <div ref="chart" style="width: 100%; height: 200px"></div>
82 </div>
83 </div>
84 </div>
85 </template>
86 <script>
87 import * as echarts from "echarts";
88 import { mapGetters } from "vuex";
89 import { getdatamonth } from "@/utils/util";
90 export default {
91 components: {},
92 computed: {
93 ...mapGetters(["dictData", "transfer"]),
94 },
95 data() {
96 return {
97 queryForm: {},
98 tableList: [
99 { name: "单一版不动产权证书", value: "459" },
100 { name: "不动产登记证明", value: "164" },
101
102 ],
103 };
104 },
105 mounted() {
106 this.setdata();
107 // 创建一个 ECharts 实例
108 this.chart = echarts.init(this.$refs.chart);
109 // 在 ECharts 实例中配置图表
110 this.chart.setOption(this.getOption());
111 },
112 methods: {
113 getOption() {
114 return {
115 title: {
116 text: "证书种类统计分析发证",
117 x: "center",
118 textStyle: {
119 //主标题文本设置
120 fontSize: 12, //大小
121 },
122 },
123 tooltip: {
124 trigger: "item",
125 formatter: "{a} <br/>{b} : {c}个 ({d}%)",
126 },
127 grid: {
128 top: "4%",
129 left: "2%",
130 right: "3%",
131 bottom: "20%",
132 containLabel: true,
133 },
134 series: [
135 {
136 name: "统计分析图",
137 type: "pie",
138 radius: "70%",
139 center: ["50%", "100%"],
140 data: this.tableList,
141 itemStyle: {
142 emphasis: {
143 shadowBlur: 10,
144 shadowOffsetX: 0,
145 shadowColor: "rgba(0, 0, 0, 0.5)",
146 },
147 },
148 label: {
149 normal: {
150 formatter: "{c}/个",
151 position: "inside", //让文字显示在饼状图里面
152 textStyle: {
153 fontSize: 10,
154 color: "#fff",
155 },
156 },
157 },
158 center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
159 },
160 ],
161 };
162 },
163 setdata() {
164 this.queryForm.sj = getdatamonth();
165 console.log("this.queryForm", this.queryForm);
166 },
167 handleSearch() {
168 console.log(" this.queryForm", this.queryForm);
169 },
170 },
171 };
172 </script>
173 <style scoped lang="scss">
174 /deep/.el-card__header {
175 padding: 8px 10px;
176 }
177
178 /deep/.el-card__body {
179 padding: 3px 10px 5px 10px;
180 overflow: hidden;
181 }
182 .yhjgba {
183 .el-col {
184 padding: 4px;
185 margin-right: 4px;
186 }
187 .inquire {
188 width: 100%;
189 height: 40px;
190 background-color: #f4f7fd;
191 /deep/ .el-form {
192 .el-form-item--small.el-form-item {
193 margin-bottom: 5px;
194 }
195 }
196 }
197
198 .concent {
199 width: 100%;
200 height: 300px;
201 display: flex;
202 //调整表头高度
203 /deep/.el-table th {
204 height: 36px !important;
205 font-size: 14px;
206 color: #4a4a4a;
207 }
208 .left {
209 width: 70%;
210 height: 200px;
211 }
212 .right {
213 width: 30%;
214 height: 300px;
215 }
216 }
217 }
218 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="yhjgba">
8 <el-row :gutter="8">
9 <el-col :span="12">
10 <el-card
11 shadow="hover"
12 :body-style="{ padding: '0' }"
13 style="height: 260px"
14 >
15 <div slot="header" class="flexst">
16 <h5 class="title">根据登记类型统计分析收件</h5>
17 </div>
18 <djlx/>
19 </el-card>
20 </el-col>
21 <el-col :span="12">
22 <el-card
23 shadow="hover"
24 :body-style="{ padding: '0' }"
25 style="height: 260px"
26 >
27 <div slot="header" class="flexst">
28 <h5 class="title">根据证书种类统计分析发证情况</h5>
29 </div>
30 <zszl/>
31 </el-card>
32 </el-col>
33 </el-row>
34 <el-row :gutter="8" class="marginTop10">
35 <el-col :span="12">
36 <el-card
37 shadow="hover"
38 :body-style="{ padding: '0' }"
39 style="height: 260px"
40 >
41 <div slot="header" class="flexst">
42 <h5 class="title">根据收件人统计分析收件</h5>
43 </div>
44 <psjr/>
45 </el-card>
46 </el-col>
47
48 <el-col :span="12">
49 <el-card
50 shadow="hover"
51 :body-style="{ padding: '0' }"
52 style="height: 260px"
53 >
54 <div slot="header" class="flexst">
55 <h5 class="title">收件日统计</h5>
56 </div>
57 <sjri/>
58 </el-card>
59 </el-col>
60 </el-row>
61 <el-row :gutter="8" class="marginTop10">
62 <el-col :span="12">
63 <el-card
64 shadow="hover"
65 :body-style="{ padding: '0' }"
66 style="height: 260px"
67 >
68 <div slot="header" class="flexst">
69 <h5 class="title">根据区域统计分析收件</h5>
70 </div>
71 <qytj/>
72 </el-card>
73 </el-col>
74 <el-col :span="12">
75 <el-card
76 shadow="hover"
77 :body-style="{ padding: '0' }"
78 style="height: 260px"
79 >
80 <div slot="header" class="flexst">
81 <h5 class="title">收件月统计</h5>
82 </div>
83 <sjyue/>
84 </el-card>
85 </el-col>
86 </el-row>
87 </div>
88 </template>
89 <script>
90 import * as echarts from "echarts";
91 import { mapGetters } from "vuex";
92 import djlx from "./components/djlx.vue";
93 import zszl from "./components/zszl.vue";
94 import qytj from "./components/qytj.vue";
95 import sjri from "./components/sjri.vue";
96 import sjyue from "./components/sjyue.vue";
97 import psjr from "./components/sjr.vue";
98
99 export default {
100 components: {djlx,zszl,qytj,sjri,sjyue,psjr},
101 computed: {
102 ...mapGetters(["dictData", "transfer"]),
103 },
104 data() {
105 return {
106 queryForm: {},
107 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
108 };
109 },
110 mounted() {
111
112 },
113 methods: {
114 getOption() {
115 return {
116
117
118 };
119 },
120
121 handleSearch() {},
122 },
123 };
124 </script>
125 <style scoped lang="scss">
126 /deep/.el-card__header {
127 padding: 8px 10px;
128 }
129
130 /deep/.el-card__body {
131 padding: 3px 10px 5px 10px;
132 overflow: hidden;
133 }
134 .yhjgba {
135 .el-col {
136 padding: 4px;
137 }
138 .inquire {
139 width: 100%;
140 height: 40px;
141 border: 1px solid rgb(184, 217, 243);
142 // background-color: rebeccapurple;
143 }
144 .concent {
145 width: 100%;
146 height: 300px;
147 display: flex;
148 .left {
149 width: 70%;
150 height: 200px;
151 }
152 .right {
153 width: 30%;
154 height: 200px;
155 }
156 }
157 }
158 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="tjltj">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="19">
12 <div class="rowAc">
13 <div
14 v-for="(item, index) in dateQuickSelection"
15 :key="index"
16 class="rowAc dateQuickItem"
17 @click="chooseDateQuick(index)"
18 >
19 {{ item.name }}
20 </div>
21 <el-date-picker
22 v-model="dateRange"
23 type="daterange"
24 value-format="yyyy-MM-dd"
25 end-placeholder="结束日期"
26 start-placeholder="开始日期"
27 :clearable="false"
28 range-separator="-"
29 class="dataRangePicker"
30 @change="chooseDateRange"
31 ></el-date-picker>
32 </div>
33 </el-col>
34
35 <el-col :span="5" class="btnColRight">
36 <el-form-item>
37 <el-button
38 type="primary"
39 native-type="submit"
40 @click="handleSearch"
41 >查询</el-button
42 >
43 <el-button type="primary" native-type="submit" @click="derive"
44 >导出</el-button
45 >
46 </el-form-item>
47 </el-col>
48 </el-row>
49 </el-form>
50 </div>
51 <div ref="chart" style="width: 100%; height: 92%"></div>
52 </div>
53 </template>
54 <script>
55 import * as echarts from "echarts";
56 export default {
57 components: {},
58 data() {
59 return {
60 dateQuickSelection: [
61 // 日期快捷选择列表
62 { code: "1", name: "今日" },
63 { code: "2", name: "昨日" },
64 { code: "3", name: "本周" },
65 { code: "4", name: "上周" },
66 { code: "5", name: "本月" },
67 { code: "6", name: "上月" },
68 { code: "7", name: "今年" },
69 { code: "8", name: "去年" },
70 ],
71 chooseIndex: 0, // 日期快捷选择项索引
72 dateRange: [], // 自定义列表 - 日期范围
73 queryForm: {},
74 data1: [12, 10, 15, 12, 15, 19, 15],
75 data2: [1, 2, 2, 3, 2, 3, 2],
76 data3: [],
77 xAxisData: [
78 "赵龙龙",
79 "刘龙龙",
80 "田龙龙",
81 "任龙龙",
82 "孙龙龙",
83 "李龙龙",
84 "周龙龙",
85 ],
86 };
87 },
88 mounted() {
89 this.setdata();
90 // 创建一个 ECharts 实例
91 this.chart = echarts.init(this.$refs.chart);
92 // 在 ECharts 实例中配置图表
93 this.chart.setOption(this.getOption());
94 this.chooseDateQuick(0);
95
96 },
97 methods: {
98 setdata() {
99 for (let i = 0; i < this.data1.length; i++) {
100 let sum = (this.data2[i] / this.data1[i]) * 100;
101 this.data3.push(Number(sum).toFixed(0));
102 }
103 },
104 // 导出
105 derive() {},
106 // 查询
107 handleSearch() {
108 console.log("dateRange", this.dateRange);
109 },
110 getOption() {
111 return {
112 title: {
113 text: "收件与超时统计情况 ", // 主标题名称
114
115 textStyle: {
116 //主标题文本设置
117 fontSize: 26, //大小
118 },
119
120 itemGap: 3, //主副标题间距
121 x: "center", //主副标题的水平位置
122 y: "top", //主副标题的垂直位置
123 },
124 tooltip: {
125 trigger: "item",
126 textStyle: {
127 fontSize: 14,
128 lineHeight: 22,
129 },
130 // 如果需要自定义 tooltip样式，需要使用formatter
131 formatter: (params) => {
132 console.log("paramsssssssssssssssssss", params);
133 return `<div font-size: 14px;line-height: 24px>
134 ${params.seriesName}
135 <br>
136 <span font-size: 16px; font-weight: 600;"> ${params.name}: ${
137 Number(params.value).toFixed(2) + "%"
138 } </span>
139
140
141 </div>`;
142 },
143 },
144
145 legend: {
146 data: ["办件数", "超时数", "超时时间"],
147 bottom: "3%",
148 itemWidth: 20,
149 itemHeight: 20,
150 //文字样式
151 textStyle: {
152 fontSize: 17, //设置文字大小
153 },
154 },
155 grid: [{ right: "3%", top: "10%", bottom: "15%", left: "3%" }],
156 color: ["#94ae0a", "#115fa6", "#a61120"],
157 xAxis: {
158 data: this.xAxisData,
159 axisLabel: {
160 // 轴文字
161 fontSize: 18,
162 },
163 },
164 yAxis: {
165 axisLabel: {
166 // 轴文字
167 fontSize: 18,
168 },
169 },
170 series: [
171 {
172 name: "办件数",
173 type: "bar",
174 data: this.data1,
175 label: {
176 normal: {
177 show: true,
178 fontSize: 13,
179 position: "top",
180 },
181 },
182 },
183 {
184 name: "超时数",
185 type: "bar",
186 data: this.data2,
187 label: {
188 normal: {
189 show: true,
190 fontSize: 13,
191 position: "top",
192 },
193 },
194 },
195 {
196 name: "超时时间",
197 type: "bar",
198 data: this.data3,
199 label: {
200 normal: {
201 show: true,
202 fontSize: 13,
203 position: "top",
204 },
205 },
206 },
207 ],
208 };
209 },
210 // 日期快捷选择事件
211 chooseDateQuick(index) {
212 this.chooseIndex = index;
213 var tempCode = this.dateQuickSelection.find(
214 (ele) => this.chooseIndex === Number(ele.code) - 1
215 ).code;
216 var tempDate = new Date();
217 var year = tempDate.getFullYear();
218 var month = tempDate.getMonth();
219 var day = tempDate.getDate();
220 var week = tempDate.getDay();
221 this.dateRange = [];
222 if (tempCode === "1") {
223 // 今日
224 this.dateRange.push(
225 this.formatDate(tempDate),
226 this.formatDate(tempDate)
227 );
228 } else if (tempCode === "2") {
229 // 昨日
230 this.dateRange.push(
231 this.jumpNumDay(tempDate, -1, "-"),
232 this.jumpNumDay(tempDate, -1, "-")
233 );
234 } else if (tempCode === "3") {
235 // 本周
236 this.dateRange.push(
237 this.formatDate(new Date(year, month, day - week + 1)),
238 this.formatDate(tempDate)
239 );
240 } else if (tempCode === "4") {
241 // 上周
242 this.dateRange.push(
243 this.formatDate(new Date(year, month, day - week - 6)),
244 this.formatDate(new Date(year, month, day - week))
245 );
246 } else if (tempCode === "5") {
247 // 本月
248 this.dateRange.push(
249 this.formatDate(new Date(year, month, 1)),
250 this.formatDate(tempDate)
251 );
252 } else if (tempCode === "6") {
253 // 上月
254 this.dateRange.push(
255 this.formatDate(new Date(year, month - 1, 1)),
256 this.formatDate(new Date(year, month, 0))
257 );
258 } else if (tempCode === "7") {
259 // 今年
260 this.dateRange.push(
261 this.formatDate(new Date(year, 0, 1)),
262 this.formatDate(tempDate)
263 );
264 } else if (tempCode === "8") {
265 // 去年
266 this.dateRange.push(
267 this.formatDate(new Date(year - 1, 0, 1)),
268 this.formatDate(new Date(year - 1, 11, 31))
269 );
270 }
271 },
272 // 日期范围选择器事件
273 chooseDateRange() {
274 this.chooseIndex = null;
275 },
276 // 数字转换
277 changeNum(num) {
278 if (num >= 10) {
279 return num;
280 } else {
281 return "0" + num;
282 }
283 },
284 // 格式化日期
285 formatDate(date) {
286 var year = date.getFullYear();
287 var month = this.changeNum(date.getMonth() + 1);
288 var day = this.changeNum(date.getDate());
289 return `${year}-${month}-${day}`;
290 },
291 // 某日期向前/向后num天
292 jumpNumDay(date, num, linkStr = '-') {
293 date = new Date(date.getTime() + (num * 24 * 60 * 60 * 1000))
294 return date.getFullYear() + linkStr + this.changeNum(date.getMonth() + 1) + linkStr + this.changeNum(date.getDate())
295 },
296 },
297 };
298 </script>
299 <style scoped lang="scss">
300 .tjltj {
301 width: 100%;
302 height: 100%;
303 .inquire {
304 width: 100%;
305 height: 40px;
306 padding-top: 3px;
307 background-color: #ffffff;
308 margin-bottom: 10px;
309
310
311 }
312 .rowAc {
313 margin-left: 10px;
314 display: flex;
315 justify-content: flex-start;
316 align-items: center;
317 }
318 .dateQuickItem {
319 padding: 1px 8px;
320 margin-right: 16px;
321 color: #3c4353;
322 font-size: 14px;
323 line-height: 22px;
324 font-weight: 400;
325 border: 1px solid #dcdee0;
326 border-radius: 16px;
327 background: #ffffff;
328 cursor: pointer;
329 box-sizing: border-box;
330 }
331 .dateQuickItem:hover,
332 .dateQuickItem.active {
333 color: #1b58f4;
334 border: 1px solid #1b58f4;
335 }
336 .dateQuickItem.disabled {
337 color: #c8c9cc;
338 border: 1px solid #dcdee0;
339 background: #f7f8f9;
340 cursor: not-allowed; // 禁止鼠标事件
341 }
342 .dataRangePicker {
343 width: 240px !important;
344 height: 32px !important;
345 }
346 .dataRangePicker.el-date-editor .el-range-separator {
347 line-height: 24px;
348 }
349 .dataRangePicker.el-date-editor .el-range__icon {
350 margin-left: 0px;
351 line-height: 24px;
352 }
353 .dataRangePicker.el-date-editor .el-range-input {
354 width: 95px;
355 }
356 }
357 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class='yhjgba'>
8 <el-empty description="正在开发"></el-empty>
9 </div>
10 </template>
11 <script>
12
13 export default {
14 components: {},
15 data () {
16 return {
17 }
18 }
19 }
20 </script>
21 <style scoped lang='scss'>
22 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="tjltj">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="19">
12 <div class="rowAc">
13 <div
14 v-for="(item, index) in dateQuickSelection"
15 :key="index"
16 class="rowAc dateQuickItem"
17 @click="chooseDateQuick(index)"
18 >
19 {{ item.name }}
20 </div>
21 <el-date-picker
22 v-model="dateRange"
23 type="daterange"
24 value-format="yyyy-MM-dd"
25 end-placeholder="结束日期"
26 start-placeholder="开始日期"
27 :clearable="false"
28 range-separator="-"
29 class="dataRangePicker"
30 @change="chooseDateRange"
31 ></el-date-picker>
32 </div>
33 </el-col>
34
35 <el-col :span="5" class="btnColRight">
36 <el-form-item>
37 <el-button
38 type="primary"
39 native-type="submit"
40 @click="handleSearch"
41 >查询</el-button
42 >
43 <el-button type="primary" native-type="submit" @click="derive"
44 >导出</el-button
45 >
46 </el-form-item>
47 </el-col>
48 </el-row>
49 </el-form>
50 </div>
51 <div ref="chart" style="width: 100%; height: 92%"></div>
52 </div>
53 </template>
54 <script>
55 import * as echarts from "echarts";
56 export default {
57 components: {},
58 data() {
59 return {
60 dateQuickSelection: [
61 // 日期快捷选择列表
62 { code: "1", name: "今日" },
63 { code: "2", name: "昨日" },
64 { code: "3", name: "本周" },
65 { code: "4", name: "上周" },
66 { code: "5", name: "本月" },
67 { code: "6", name: "上月" },
68 { code: "7", name: "今年" },
69 { code: "8", name: "去年" },
70 ],
71 chooseIndex: 0, // 日期快捷选择项索引
72 dateRange: [], // 自定义列表 - 日期范围
73 queryForm: {},
74 data1: [23, 45, 23, 11, 15, 19, 35],
75 data2: [1, 4, 1, 3, 2, 3, 4],
76 data3: [],
77 xAxisData: [
78 "赵红红",
79 "刘红红",
80 "田红红",
81 "任红红",
82 "孙红红",
83 "李红红",
84 "周红红",
85 ],
86 };
87 },
88 mounted() {
89 this.setdata();
90 // 创建一个 ECharts 实例
91 this.chart = echarts.init(this.$refs.chart);
92 // 在 ECharts 实例中配置图表
93 this.chart.setOption(this.getOption());
94 this.chooseDateQuick(0);
95
96 },
97 methods: {
98 setdata() {
99 for (let i = 0; i < this.data1.length; i++) {
100 let sum = (this.data2[i] / this.data1[i]) * 100;
101 this.data3.push(Number(sum).toFixed(0));
102 }
103 },
104 // 导出
105 derive() {},
106 // 查询
107 handleSearch() {
108 console.log("dateRange", this.dateRange);
109 },
110 getOption() {
111 return {
112 title: {
113 text: "收件与退件统计情况 ", // 主标题名称
114
115 textStyle: {
116 //主标题文本设置
117 fontSize: 26, //大小
118 },
119
120 itemGap: 3, //主副标题间距
121 x: "center", //主副标题的水平位置
122 y: "top", //主副标题的垂直位置
123 },
124 tooltip: {
125 trigger: "item",
126 textStyle: {
127 fontSize: 14,
128 lineHeight: 22,
129 },
130 // 如果需要自定义 tooltip样式，需要使用formatter
131 formatter: (params) => {
132 return `<div font-size: 14px;line-height: 24px>
133 ${params.seriesName}
134 <br>
135 <span font-size: 16px; font-weight: 600;"> ${params.name}: ${
136 Number(params.value).toFixed(2) + "%"
137 } </span>
138
139
140 </div>`;
141 },
142 },
143
144 legend: {
145 data: ["收件", "退件", "退件率"],
146 bottom: "3%",
147 itemWidth: 20,
148 itemHeight: 20,
149 //文字样式
150 textStyle: {
151 fontSize: 17, //设置文字大小
152 },
153 },
154 grid: [{ right: "3%", top: "10%", bottom: "15%", left: "3%" }],
155 color: ["#94ae0a", "#115fa6", "#a61120"],
156 xAxis: {
157 data: this.xAxisData,
158 axisLabel: {
159 // 轴文字
160 fontSize: 18,
161 },
162 },
163 yAxis: {
164 axisLabel: {
165 // 轴文字
166 fontSize: 18,
167 },
168 },
169 series: [
170 {
171 name: "收件",
172 type: "bar",
173 data: this.data1,
174 label: {
175 normal: {
176 show: true,
177 fontSize: 13,
178 position: "top",
179 },
180 },
181 },
182 {
183 name: "退件",
184 type: "bar",
185 data: this.data2,
186 label: {
187 normal: {
188 show: true,
189 fontSize: 13,
190 position: "top",
191 },
192 },
193 },
194 {
195 name: "退件率",
196 type: "bar",
197 data: this.data3,
198 label: {
199 normal: {
200 show: true,
201 fontSize: 13,
202 position: "top",
203 },
204 },
205 },
206 ],
207 };
208 },
209 // 日期快捷选择事件
210 chooseDateQuick(index) {
211 this.chooseIndex = index;
212 var tempCode = this.dateQuickSelection.find(
213 (ele) => this.chooseIndex === Number(ele.code) - 1
214 ).code;
215 var tempDate = new Date();
216 var year = tempDate.getFullYear();
217 var month = tempDate.getMonth();
218 var day = tempDate.getDate();
219 var week = tempDate.getDay();
220 this.dateRange = [];
221 if (tempCode === "1") {
222 // 今日
223 this.dateRange.push(
224 this.formatDate(tempDate),
225 this.formatDate(tempDate)
226 );
227 } else if (tempCode === "2") {
228 // 昨日
229 this.dateRange.push(
230 this.jumpNumDay(tempDate, -1, "-"),
231 this.jumpNumDay(tempDate, -1, "-")
232 );
233 } else if (tempCode === "3") {
234 // 本周
235 this.dateRange.push(
236 this.formatDate(new Date(year, month, day - week + 1)),
237 this.formatDate(tempDate)
238 );
239 } else if (tempCode === "4") {
240 // 上周
241 this.dateRange.push(
242 this.formatDate(new Date(year, month, day - week - 6)),
243 this.formatDate(new Date(year, month, day - week))
244 );
245 } else if (tempCode === "5") {
246 // 本月
247 this.dateRange.push(
248 this.formatDate(new Date(year, month, 1)),
249 this.formatDate(tempDate)
250 );
251 } else if (tempCode === "6") {
252 // 上月
253 this.dateRange.push(
254 this.formatDate(new Date(year, month - 1, 1)),
255 this.formatDate(new Date(year, month, 0))
256 );
257 } else if (tempCode === "7") {
258 // 今年
259 this.dateRange.push(
260 this.formatDate(new Date(year, 0, 1)),
261 this.formatDate(tempDate)
262 );
263 } else if (tempCode === "8") {
264 // 去年
265 this.dateRange.push(
266 this.formatDate(new Date(year - 1, 0, 1)),
267 this.formatDate(new Date(year - 1, 11, 31))
268 );
269 }
270 },
271 // 日期范围选择器事件
272 chooseDateRange() {
273 this.chooseIndex = null;
274 },
275 // 数字转换
276 changeNum(num) {
277 if (num >= 10) {
278 return num;
279 } else {
280 return "0" + num;
281 }
282 },
283 // 格式化日期
284 formatDate(date) {
285 var year = date.getFullYear();
286 var month = this.changeNum(date.getMonth() + 1);
287 var day = this.changeNum(date.getDate());
288 return `${year}-${month}-${day}`;
289 },
290 // 某日期向前/向后num天
291 jumpNumDay(date, num, linkStr = '-') {
292 date = new Date(date.getTime() + (num * 24 * 60 * 60 * 1000))
293 return date.getFullYear() + linkStr + this.changeNum(date.getMonth() + 1) + linkStr + this.changeNum(date.getDate())
294 },
295 },
296 };
297 </script>
298 <style scoped lang="scss">
299 .tjltj {
300 width: 100%;
301 height: 100%;
302 .inquire {
303 width: 100%;
304 height: 40px;
305 padding-top: 3px;
306 background-color: #ffffff;
307 margin-bottom: 10px;
308 }
309 .rowAc {
310 margin-left: 10px;
311 display: flex;
312 justify-content: flex-start;
313 align-items: center;
314 }
315 .dateQuickItem {
316 padding: 1px 8px;
317 margin-right: 16px;
318 color: #3c4353;
319 font-size: 14px;
320 line-height: 22px;
321 font-weight: 400;
322 border: 1px solid #dcdee0;
323 border-radius: 16px;
324 background: #ffffff;
325 cursor: pointer;
326 box-sizing: border-box;
327 }
328 .dateQuickItem:hover,
329 .dateQuickItem.active {
330 color: #1b58f4;
331 border: 1px solid #1b58f4;
332 }
333 .dateQuickItem.disabled {
334 color: #c8c9cc;
335 border: 1px solid #dcdee0;
336 background: #f7f8f9;
337 cursor: not-allowed; // 禁止鼠标事件
338 }
339 .dataRangePicker {
340 width: 240px !important;
341 height: 32px !important;
342 }
343 .dataRangePicker.el-date-editor .el-range-separator {
344 line-height: 24px;
345 }
346 .dataRangePicker.el-date-editor .el-range__icon {
347 margin-left: 0px;
348 line-height: 24px;
349 }
350 .dataRangePicker.el-date-editor .el-range-input {
351 width: 95px;
352 }
353 }
354 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class='yhjgba'>
8 <el-empty description="正在开发"></el-empty>
9 </div>
10 </template>
11 <script>
12
13 export default {
14 components: {},
15 data () {
16 return {
17 }
18 }
19 }
20 </script>
21 <style scoped lang='scss'>
22 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
12 </el-tab-pane> 12 </el-tab-pane>
13 </el-tabs> 13 </el-tabs>
14 <el-empty description="暂无数据" v-if="headTabBdcqz.length == 0 && noData"></el-empty> 14 <el-empty description="暂无数据" v-if="headTabBdcqz.length == 0 && noData"></el-empty>
15 <div v-else>
15 <div style="height:540px"> 16 <div style="height:540px">
16 <el-form class="zs" :model="bdcqz" v-if="this.bdcqz.bdcqzlx==1" ref="ruleForm" label-width="100px"> 17 <el-form class="zs" :model="bdcqz" v-if="this.bdcqz.bdcqzlx==1" ref="ruleForm" label-width="100px">
17 <el-row> 18 <el-row>
...@@ -156,6 +157,7 @@ ...@@ -156,6 +157,7 @@
156 <el-button type="primary" @click="handleSubmit">保存</el-button> 157 <el-button type="primary" @click="handleSubmit">保存</el-button>
157 </div> 158 </div>
158 </div> 159 </div>
160 </div>
159 </template> 161 </template>
160 162
161 <script> 163 <script>
......
...@@ -10,7 +10,8 @@ ...@@ -10,7 +10,8 @@
10 v-show="!isLoading" 10 v-show="!isLoading"
11 ref="processCanvas" 11 ref="processCanvas"
12 class="process-canvas" 12 class="process-canvas"
13 style="height: 280px" /> 13 style="height: 280px"
14 />
14 <!-- 自定义箭头样式，用于成功状态下流程连线箭头 --> 15 <!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
15 <defs ref="customSuccessDefs"> 16 <defs ref="customSuccessDefs">
16 <marker 17 <marker
...@@ -20,7 +21,8 @@ ...@@ -20,7 +21,8 @@
20 ref-y="10" 21 ref-y="10"
21 marker-width="10" 22 marker-width="10"
22 marker-height="10" 23 marker-height="10"
23 orient="auto"> 24 orient="auto"
25 >
24 <path 26 <path
25 class="success-arrow" 27 class="success-arrow"
26 d="M 1 5 L 11 10 L 1 15 Z" 28 d="M 1 5 L 11 10 L 1 15 Z"
...@@ -28,7 +30,8 @@ ...@@ -28,7 +30,8 @@
28 stroke-width: 1px; 30 stroke-width: 1px;
29 stroke-linecap: round; 31 stroke-linecap: round;
30 stroke-dasharray: 10000, 1; 32 stroke-dasharray: 10000, 1;
31 " /> 33 "
34 />
32 </marker> 35 </marker>
33 <marker 36 <marker
34 id="conditional-flow-marker-white-success" 37 id="conditional-flow-marker-white-success"
...@@ -37,7 +40,8 @@ ...@@ -37,7 +40,8 @@
37 ref-y="10" 40 ref-y="10"
38 marker-width="10" 41 marker-width="10"
39 marker-height="10" 42 marker-height="10"
40 orient="auto"> 43 orient="auto"
44 >
41 <path 45 <path
42 class="success-conditional" 46 class="success-conditional"
43 d="M 0 10 L 8 6 L 16 10 L 8 14 Z" 47 d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
...@@ -45,7 +49,8 @@ ...@@ -45,7 +49,8 @@
45 stroke-width: 1px; 49 stroke-width: 1px;
46 stroke-linecap: round; 50 stroke-linecap: round;
47 stroke-dasharray: 10000, 1; 51 stroke-dasharray: 10000, 1;
48 " /> 52 "
53 />
49 </marker> 54 </marker>
50 </defs> 55 </defs>
51 <!-- 自定义箭头样式，用于失败状态下流程连线箭头 --> 56 <!-- 自定义箭头样式，用于失败状态下流程连线箭头 -->
...@@ -57,7 +62,8 @@ ...@@ -57,7 +62,8 @@
57 ref-y="10" 62 ref-y="10"
58 marker-width="10" 63 marker-width="10"
59 marker-height="10" 64 marker-height="10"
60 orient="auto"> 65 orient="auto"
66 >
61 <path 67 <path
62 class="fail-arrow" 68 class="fail-arrow"
63 d="M 1 5 L 11 10 L 1 15 Z" 69 d="M 1 5 L 11 10 L 1 15 Z"
...@@ -65,7 +71,8 @@ ...@@ -65,7 +71,8 @@
65 stroke-width: 1px; 71 stroke-width: 1px;
66 stroke-linecap: round; 72 stroke-linecap: round;
67 stroke-dasharray: 10000, 1; 73 stroke-dasharray: 10000, 1;
68 " /> 74 "
75 />
69 </marker> 76 </marker>
70 <marker 77 <marker
71 id="conditional-flow-marker-white-fail" 78 id="conditional-flow-marker-white-fail"
...@@ -74,7 +81,8 @@ ...@@ -74,7 +81,8 @@
74 ref-y="10" 81 ref-y="10"
75 marker-width="10" 82 marker-width="10"
76 marker-height="10" 83 marker-height="10"
77 orient="auto"> 84 orient="auto"
85 >
78 <path 86 <path
79 class="fail-conditional" 87 class="fail-conditional"
80 d="M 0 10 L 8 6 L 16 10 L 8 14 Z" 88 d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
...@@ -82,7 +90,8 @@ ...@@ -82,7 +90,8 @@
82 stroke-width: 1px; 90 stroke-width: 1px;
83 stroke-linecap: round; 91 stroke-linecap: round;
84 stroke-dasharray: 10000, 1; 92 stroke-dasharray: 10000, 1;
85 " /> 93 "
94 />
86 </marker> 95 </marker>
87 </defs> 96 </defs>
88 97
...@@ -95,7 +104,8 @@ ...@@ -95,7 +104,8 @@
95 :plain="true" 104 :plain="true"
96 :disabled="defaultZoom <= 0.3" 105 :disabled="defaultZoom <= 0.3"
97 icon="el-icon-zoom-out" 106 icon="el-icon-zoom-out"
98 @click="processZoomOut()" /> 107 @click="processZoomOut()"
108 />
99 <el-button size="medium" type="default" style="width: 90px">{{ 109 <el-button size="medium" type="default" style="width: 90px">{{
100 Math.floor(this.defaultZoom * 10 * 10) + "%" 110 Math.floor(this.defaultZoom * 10 * 10) + "%"
101 }}</el-button> 111 }}</el-button>
...@@ -105,12 +115,14 @@ ...@@ -105,12 +115,14 @@
105 :plain="true" 115 :plain="true"
106 :disabled="defaultZoom >= 3.9" 116 :disabled="defaultZoom >= 3.9"
107 icon="el-icon-zoom-in" 117 icon="el-icon-zoom-in"
108 @click="processZoomIn()" /> 118 @click="processZoomIn()"
119 />
109 <el-button 120 <el-button
110 size="medium" 121 size="medium"
111 type="default" 122 type="default"
112 icon="el-icon-c-scale-to-original" 123 icon="el-icon-c-scale-to-original"
113 @click="processReZoom()" /> 124 @click="processReZoom()"
125 />
114 <slot /> 126 <slot />
115 </el-button-group> 127 </el-button-group>
116 </el-row> 128 </el-row>
...@@ -123,55 +135,51 @@ ...@@ -123,55 +135,51 @@
123 v-for="item in selectOptions" 135 v-for="item in selectOptions"
124 :key="item.value" 136 :key="item.value"
125 :label="item.label" 137 :label="item.label"
126 :value="item.value"> 138 :value="item.value"
139 >
127 </el-option> 140 </el-option>
128 </el-select> 141 </el-select>
142 <div class="cutline">
143 <p class="cutlines">图例</p>
144 <div v-for="item in cutlinelist" :key="item.value" class="concent" :style="{ backgroundColor: item.backgroundColor,borderColor:item.color }">
145 {{item.value}}
146 </div>
147 </div>
129 <el-table 148 <el-table
130 height="190" 149 height="190"
131 :data="taskCommentList" 150 :data="taskCommentList"
132 size="mini" 151 size="mini"
133 border 152 border
134 header-cell-class-name="table-header-gray"> 153 header-cell-class-name="table-header-gray"
154 >
135 <el-table-column 155 <el-table-column
136 label="序号" 156 label="序号"
137 header-align="center" 157 header-align="center"
138 align="center" 158 align="center"
139 type="index" 159 type="index"
140 width="55px" /> 160 width="55px"
141 <el-table-column label="流程状态" header-align="center" align="center"> 161 />
142 <template slot-scope="scope">
143 <div v-if="scope.row.endTime">已完结</div>
144 <div v-else>正在办理</div>
145 </template>
146 </el-table-column>
147 <el-table-column
148 label="环节状态"
149 prop="name"
150 minWidth="100"
151 align="center" />
152 <el-table-column
153 label="办理人"
154 prop="agent"
155 minWidth="120"
156 align="center" />
157 <el-table-column 162 <el-table-column
158 label="转入时间" 163 label="转入时间"
159 prop="createTime" 164 prop="createTime"
160 :formatter="formatDate" 165 :formatter="formatDate"
161 width="160" 166 width="160"
162 align="center" /> 167 align="center"
168 />
163 <el-table-column 169 <el-table-column
164 label="认领时间" 170 label="认领时间"
165 prop="claimTime" 171 prop="claimTime"
166 :formatter="formatDate" 172 :formatter="formatDate"
167 width="160" 173 width="160"
168 align="center" /> 174 align="center"
175 />
169 <el-table-column 176 <el-table-column
170 label="转出时间" 177 label="转出时间"
171 prop="endTime" 178 prop="endTime"
172 :formatter="formatDate" 179 :formatter="formatDate"
173 width="160" 180 width="160"
174 align="center" /> 181 align="center"
182 />
175 <el-table-column label="操作方式" prop="controls" align="center" /> 183 <el-table-column label="操作方式" prop="controls" align="center" />
176 <el-table-column label="意见" prop="idea" align="center" /> 184 <el-table-column label="意见" prop="idea" align="center" />
177 </el-table> 185 </el-table>
...@@ -179,17 +187,17 @@ ...@@ -179,17 +187,17 @@
179 </div> 187 </div>
180 </template> 188 </template>
181 <script> 189 <script>
182 import "@/styles/package/theme/index.scss"; 190 import "@/styles/package/theme/index.scss";
183 import BpmnViewer from "bpmn-js/lib/Viewer"; 191 import BpmnViewer from "bpmn-js/lib/Viewer";
184 import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas"; 192 import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
185 export default { 193 export default {
186 props: { 194 props: {
187 formData: { 195 formData: {
188 type: Object, 196 type: Object,
189 default: {}, 197 default: {},
190 }, 198 },
191 }, 199 },
192 data () { 200 data() {
193 return { 201 return {
194 dlgTitle: undefined, 202 dlgTitle: undefined,
195 defaultZoom: 1, 203 defaultZoom: 1,
...@@ -208,9 +216,36 @@ ...@@ -208,9 +216,36 @@
208 // 下拉 216 // 下拉
209 selectValue: "", 217 selectValue: "",
210 selectOptions: [], 218 selectOptions: [],
219 cutlinelist:[
220 {
221 value: "完成节点",
222 color: "#4eb819",
223 backgroundColor :"rgba(78, 184, 25,0.2)"
224 },
225 {
226 value: "当前节点",
227 color: "#409EFF",
228 backgroundColor :"rgba(64, 158, 255,0.2)"
229 },
230 {
231 value: "挂起节点",
232 color: "#E6A23C",
233 backgroundColor :"rgba(230, 162, 60,0.2)"
234 },
235 {
236 value: "阻塞节点",
237 color: "#F56C6C",
238 backgroundColor :"rgb(245, 108, 108,0.2)"
239 },
240 {
241 value: "未激活节点",
242 color: "#000000",
243 backgroundColor :"none",
244 }
245 ],
211 }; 246 };
212 }, 247 },
213 created () { 248 created() {
214 this.$nextTick(() => { 249 this.$nextTick(() => {
215 // 获取流程记录 250 // 获取流程记录
216 this.getCommentList(); 251 this.getCommentList();
...@@ -218,7 +253,7 @@ ...@@ -218,7 +253,7 @@
218 this.importXML(this.formData.xml); 253 this.importXML(this.formData.xml);
219 }); 254 });
220 }, 255 },
221 destroyed () { 256 destroyed() {
222 this.clearViewer(); 257 this.clearViewer();
223 }, 258 },
224 methods: { 259 methods: {
...@@ -228,7 +263,7 @@ ...@@ -228,7 +263,7 @@
228 * @param {*} column 263 * @param {*} column
229 * @author: renchao 264 * @author: renchao
230 */ 265 */
231 formatDate (row, column) { 266 formatDate(row, column) {
232 let data = row[column.property]; 267 let data = row[column.property];
233 if (data == null) { 268 if (data == null) {
234 return null; 269 return null;
...@@ -252,7 +287,7 @@ ...@@ -252,7 +287,7 @@
252 * @description: processReZoom 287 * @description: processReZoom
253 * @author: renchao 288 * @author: renchao
254 */ 289 */
255 processReZoom () { 290 processReZoom() {
256 this.defaultZoom = 1; 291 this.defaultZoom = 1;
257 this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto"); 292 this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
258 }, 293 },
...@@ -261,7 +296,7 @@ ...@@ -261,7 +296,7 @@
261 * @param {*} zoomStep 296 * @param {*} zoomStep
262 * @author: renchao 297 * @author: renchao
263 */ 298 */
264 processZoomIn (zoomStep = 0.1) { 299 processZoomIn(zoomStep = 0.1) {
265 const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100; 300 const newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
266 if (newZoom > 4) { 301 if (newZoom > 4) {
267 throw new Error( 302 throw new Error(
...@@ -276,7 +311,7 @@ ...@@ -276,7 +311,7 @@
276 * @param {*} zoomStep 311 * @param {*} zoomStep
277 * @author: renchao 312 * @author: renchao
278 */ 313 */
279 processZoomOut (zoomStep = 0.1) { 314 processZoomOut(zoomStep = 0.1) {
280 const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100; 315 const newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
281 if (newZoom < 0.2) { 316 if (newZoom < 0.2) {
282 throw new Error( 317 throw new Error(
...@@ -291,7 +326,7 @@ ...@@ -291,7 +326,7 @@
291 * @param {*} type 326 * @param {*} type
292 * @author: renchao 327 * @author: renchao
293 */ 328 */
294 getOperationTagType (type) { 329 getOperationTagType(type) {
295 return "success"; 330 return "success";
296 }, 331 },
297 // 流程图预览清空 332 // 流程图预览清空
...@@ -300,7 +335,7 @@ ...@@ -300,7 +335,7 @@
300 * @param {*} e 335 * @param {*} e
301 * @author: renchao 336 * @author: renchao
302 */ 337 */
303 clearViewer (a) { 338 clearViewer(a) {
304 if (this.$refs.processCanvas) { 339 if (this.$refs.processCanvas) {
305 this.$refs.processCanvas.innerHTML = ""; 340 this.$refs.processCanvas.innerHTML = "";
306 } 341 }
...@@ -314,7 +349,7 @@ ...@@ -314,7 +349,7 @@
314 * @description: 添加自定义箭头 349 * @description: 添加自定义箭头
315 * @author: renchao 350 * @author: renchao
316 */ 351 */
317 addCustomDefs () { 352 addCustomDefs() {
318 const canvas = this.bpmnViewer.get("canvas"); 353 const canvas = this.bpmnViewer.get("canvas");
319 const svg = canvas._svg; 354 const svg = canvas._svg;
320 const customSuccessDefs = this.$refs.customSuccessDefs; 355 const customSuccessDefs = this.$refs.customSuccessDefs;
...@@ -328,7 +363,7 @@ ...@@ -328,7 +363,7 @@
328 * @param {*} element 363 * @param {*} element
329 * @author: renchao 364 * @author: renchao
330 */ 365 */
331 onSelectElement (element) { 366 onSelectElement(element) {
332 this.selectTaskId = undefined; 367 this.selectTaskId = undefined;
333 this.dlgTitle = undefined; 368 this.dlgTitle = undefined;
334 let allfinishedTaskSet = [ 369 let allfinishedTaskSet = [
...@@ -358,7 +393,7 @@ ...@@ -358,7 +393,7 @@
358 * @param {*} val 393 * @param {*} val
359 * @author: renchao 394 * @author: renchao
360 */ 395 */
361 handleSelect (val) { 396 handleSelect(val) {
362 this.taskCommentList = (this.taskList || []).filter((item) => { 397 this.taskCommentList = (this.taskList || []).filter((item) => {
363 return item.taskDefinitionKey === val; 398 return item.taskDefinitionKey === val;
364 }); 399 });
...@@ -372,7 +407,7 @@ ...@@ -372,7 +407,7 @@
372 * @param {*} xml 407 * @param {*} xml
373 * @author: renchao 408 * @author: renchao
374 */ 409 */
375 async importXML (xml) { 410 async importXML(xml) {
376 let xmlData = this.$x2js.xml2js(xml).definitions.process; 411 let xmlData = this.$x2js.xml2js(xml).definitions.process;
377 this.selectOptions = xmlData.userTask.map((item) => { 412 this.selectOptions = xmlData.userTask.map((item) => {
378 return { value: item._id, label: item._name }; 413 return { value: item._id, label: item._name };
...@@ -427,7 +462,7 @@ ...@@ -427,7 +462,7 @@
427 * @description: 获取流程记录 462 * @description: 获取流程记录
428 * @author: renchao 463 * @author: renchao
429 */ 464 */
430 getCommentList () { 465 getCommentList() {
431 this.formData.allCommentList.forEach(async (item, index) => { 466 this.formData.allCommentList.forEach(async (item, index) => {
432 // item.comments.forEach(element => { 467 // item.comments.forEach(element => {
433 // if(element.type=="COMPLETE"){ 468 // if(element.type=="COMPLETE"){
...@@ -488,7 +523,7 @@ ...@@ -488,7 +523,7 @@
488 // this.taskList =this.formData.allCommentList; 523 // this.taskList =this.formData.allCommentList;
489 // 处理数据之后赋值 524 // 处理数据之后赋值
490 this.taskCommentList = this.taskList; 525 this.taskCommentList = this.taskList;
491 this.taskCommentList=this.taskCommentList.sort(this.sortDownDate) 526 this.taskCommentList = this.taskCommentList.sort(this.sortDownDate);
492 }, 527 },
493 /** 528 /**
494 * 时间排序函数 529 * 时间排序函数
...@@ -507,7 +542,7 @@ ...@@ -507,7 +542,7 @@
507 * @param {*} processNodeInfo 542 * @param {*} processNodeInfo
508 * @author: renchao 543 * @author: renchao
509 */ 544 */
510 setProcessStatus (processNodeInfo) { 545 setProcessStatus(processNodeInfo) {
511 this.processNodeInfo = processNodeInfo; 546 this.processNodeInfo = processNodeInfo;
512 if ( 547 if (
513 this.isLoading || 548 this.isLoading ||
...@@ -556,10 +591,10 @@ ...@@ -556,10 +591,10 @@
556 } 591 }
557 }, 592 },
558 }, 593 },
559 }; 594 };
560 </script> 595 </script>
561 <style scoped lang="scss"> 596 <style scoped lang="scss">
562 .information-list { 597 .information-list {
563 height: 220px; 598 height: 220px;
564 margin-top: 10px; 599 margin-top: 10px;
565 600
...@@ -567,12 +602,37 @@ ...@@ -567,12 +602,37 @@
567 font-size: 16px; 602 font-size: 16px;
568 line-height: 24px; 603 line-height: 24px;
569 } 604 }
570 } 605 }
571 /deep/.bjs-powered-by { 606 /deep/.bjs-powered-by {
572 display: none; 607 display: none;
608 }
609 // /deep/.information-list {
610 // height: 170px;
611 // overflow: visible;
612 // }
613 .cutline {
614
615 float: right;
616 width: 30%;
617 height: 30px;
618 display: flex;
619 margin-right: 30px;
620 justify-content: space-between;
621 .cutlines{
622 line-height: 30px;
623 font-weight: 600;
624 margin-right: 50px;
573 } 625 }
574 // /deep/.information-list { 626 .concent{
575 // height: 170px; 627 line-height: 30px;
576 // overflow: visible; 628 line-height: 14px;
577 // } 629 text-align: center;
630 align-items: center;
631 margin: auto;
632 padding: 3px;
633 border-radius: 4px;
634 border:1px solid #fff;
635 }
636
637 }
578 </style> 638 </style>
......
1 /* 1 /*
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-11-15 11:29:32 4 * @LastEditTime: 2023-11-22 13:18:47
5 */ 5 */
6 import Vue from 'vue'
6 import { getPrintTemplateByCode } from "@/api/print"; 7 import { getPrintTemplateByCode } from "@/api/print";
7 import { uploadUndo } from "@/api/clxx"; 8 import { uploadUndo } from "@/api/clxx";
8 import { getLodop } from "@/utils/LodopFuncs" 9 import { getLodop } from "@/utils/LodopFuncs";
10 import adapter from "@/utils/sqs/adapter";
9 import { 11 import {
10 stepExpandInfo, 12 stepExpandInfo,
11 record, 13 record,
...@@ -133,24 +135,37 @@ export default { ...@@ -133,24 +135,37 @@ export default {
133 break; 135 break;
134 case "B6": 136 case "B6":
135 //根据编号获取对应信息 137 //根据编号获取对应信息
136 getPrintTemplateByCode({ tmpno: 'dysqs' }).then(res => { 138 getPrintTemplateByCode({ tmpno: Vue.prototype.BASE_API.adapter }).then(res => {
137 if (res.code == 200) { 139 if (res.code === 200) {
140 getPrintTemplateByCode({ tmpno: Vue.prototype.BASE_API.adapter + '-2' }).then(res1 => {
138 getPrintApplicationForm(this.currentSelectProps.bsmSldy).then(infoRes => { 141 getPrintApplicationForm(this.currentSelectProps.bsmSldy).then(infoRes => {
139 if (infoRes.code == 200) { 142 if (infoRes.code === 200) {
140 //打开模板设计
141 let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM')); 143 let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
142 LODOP.ADD_PRINT_DATA("ProgramData", res.result.tmpcontent); //装载模板 144
143 //todo 调取后端接口获取数据 循环set 145 // 装载第一个模板并设置数据
146 LODOP.ADD_PRINT_DATA("ProgramData", res.result.tmpcontent);
144 for (let key in infoRes.result) { 147 for (let key in infoRes.result) {
145 LODOP.SET_PRINT_STYLEA(key, "CONTENT", infoRes.result[key]); 148 LODOP.SET_PRINT_STYLEA(key, "CONTENT", infoRes.result[key]);
146 } 149 }
150
151 // 手动分页
152 LODOP.NewPage();
153
154 // 装载第二个模板并设置数据
155 LODOP.ADD_PRINT_DATA("ProgramData", res1.result.tmpcontent);
156 for (let key in res1.result) {
157 LODOP.SET_PRINT_STYLEA(key, "CONTENT", res1.result[key]);
158 }
159
160 // 进行预览
147 LODOP.PREVIEW(); 161 LODOP.PREVIEW();
148 } else { 162 } else {
149 this.$message.error(infoRes.message) 163 this.$message.error(infoRes.message);
150 } 164 }
151 }) 165 });
166 });
152 } else { 167 } else {
153 this.$message.error(res.message) 168 this.$message.error(res.message);
154 } 169 }
155 }) 170 })
156 break; 171 break;
......
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-10-18 15:46:39 4 * @LastEditTime: 2023-11-22 13:43:27
5 --> 5 -->
6 <template> 6 <template>
7 <div class="container"> 7 <div class="container">
......