Merge branch 'dev'
Showing
25 changed files
with
2259 additions
and
100 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 | /** | ... | ... |
src/utils/sqs/adapter.js
0 → 100644
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 | ... | ... |
src/views/tjfx/bdcdjtjfx/components/djlx.vue
0 → 100644
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> |
src/views/tjfx/bdcdjtjfx/components/qytj.vue
0 → 100644
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> |
src/views/tjfx/bdcdjtjfx/components/sjr.vue
0 → 100644
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> |
src/views/tjfx/bdcdjtjfx/components/sjri.vue
0 → 100644
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> |
src/views/tjfx/bdcdjtjfx/components/zszl.vue
0 → 100644
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> |
src/views/tjfx/bdcdjtjfx/index.vue
0 → 100644
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> |
src/views/tjfx/cstj/index.vue
0 → 100644
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> |
src/views/tjfx/gzltj/index.vue
deleted
100644 → 0
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 |
src/views/tjfx/tjltj/index.vue
0 → 100644
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> |
src/views/tjfx/ywltj/index.vue
deleted
100644 → 0
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> | ... | ... |
This diff is collapsed.
Click to expand it.
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; | ... | ... |
-
Please register or sign in to post a comment