Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
61cbd10e by “miaofang
Options

--no commit message

1 parent 0f180440
Inline Side-by-side
Showing 9 changed files with 1143 additions and 460 deletions
...@@ -7,41 +7,32 @@ ...@@ -7,41 +7,32 @@
7 <div class="djlx"> 7 <div class="djlx">
8 <div class="inquire"> 8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px"> 9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row> 10 <el-row :gutter="20">
11 <el-col :span="6"> 11 <el-col :span="12">
12 <el-form-item label="开始时间" class="width100"> 12 <el-form-item label="收件时间" class="width100">
13 <el-date-picker 13 <el-date-picker
14 v-model="queryForm.kssj" 14 v-model="queryForm.sj"
15 type="daterange"
15 class="width100" 16 class="width100"
16 type="date" 17 range-separator="至"
17 placeholder="选择日期" 18 :clearable="false"
18 value-format="yyyy-MM-dd HH:mm:ss" 19 value-format="yyyy-MM-dd"
19 format="yyyy-MM-dd" 20 start-placeholder="开始日期"
20 ></el-date-picker> 21 end-placeholder="结束日期"
21 </el-form-item> 22 >
22 </el-col> 23 </el-date-picker>
23 <el-col :span="6">
24 <el-form-item label="结束时间" class="width100">
25 <el-date-picker
26 v-model="queryForm.kssj"
27 class="width100"
28 type="date"
29 placeholder="选择日期"
30 value-format="yyyy-MM-dd HH:mm:ss"
31 format="yyyy-MM-dd"
32 ></el-date-picker>
33 </el-form-item> 24 </el-form-item>
34 </el-col> 25 </el-col>
35 <el-col :span="6"> 26 <el-col :span="7">
36 <el-form-item label="区域" class="width100"> 27 <el-form-item label="区域" class="width100">
37 <el-select 28 <el-select
38 v-model="queryForm.qy" 29 v-model="queryForm.qy"
39 class="width100" 30 class="width100"
40 clearable 31 clearable
41 placeholder="请选择权利类型" 32 placeholder="请选择区域"
42 > 33 >
43 <el-option 34 <el-option
44 v-for="item in dictData['A8']" 35 v-for="item in dictData['A20']"
45 :key="item.dcode" 36 :key="item.dcode"
46 :label="item.dname" 37 :label="item.dname"
47 :value="item.dcode" 38 :value="item.dcode"
...@@ -50,7 +41,7 @@ ...@@ -50,7 +41,7 @@
50 </el-select> 41 </el-select>
51 </el-form-item> 42 </el-form-item>
52 </el-col> 43 </el-col>
53 <el-col :span="5" class="btnColRight"> 44 <el-col :span="4" class="btnColRight">
54 <el-form-item> 45 <el-form-item>
55 <el-button 46 <el-button
56 type="primary" 47 type="primary"
...@@ -74,13 +65,13 @@ ...@@ -74,13 +65,13 @@
74 header-cell-class-name="table-header-gray" 65 header-cell-class-name="table-header-gray"
75 > 66 >
76 <el-table-column 67 <el-table-column
77 label="类型" 68 label="登记类型"
78 prop="name" 69 prop="name"
79 minWidth="100" 70 minWidth="100"
80 align="center" /> 71 align="center" />
81 <el-table-column 72 <el-table-column
82 label="数量" 73 label="收件数量"
83 prop="agent" 74 prop="value"
84 minWidth="120" 75 minWidth="120"
85 align="center" 76 align="center"
86 /></el-table> 77 /></el-table>
...@@ -94,15 +85,24 @@ ...@@ -94,15 +85,24 @@
94 <script> 85 <script>
95 import * as echarts from "echarts"; 86 import * as echarts from "echarts";
96 import { mapGetters } from "vuex"; 87 import { mapGetters } from "vuex";
97 export default { 88 export default {
98 components: {}, 89 components: {},
99 computed: { 90 computed: {
100 ...mapGetters(["dictData", "transfer"]), 91 ...mapGetters(["dictData", "transfer"]),
101 }, 92 },
102 data () { 93 data() {
103 return { 94 return {
104 queryForm: {}, 95 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23], 96 tableList: [
97 { name: "首次登记", value: "2" },
98 { name: "变更登记", value: "12" },
99 { name: "抵押登记", value: "23" },
100 { name: "转移登记", value: "33" },
101 { name: "预告登记", value: "13" },
102 { name: "注销登记", value: "3" },
103 { name: "查封登记", value: "4" },
104 { name: "其他登记", value: "26" },
105 ],
106 }; 106 };
107 }, 107 },
108 mounted() { 108 mounted() {
...@@ -114,44 +114,58 @@ import { mapGetters } from "vuex"; ...@@ -114,44 +114,58 @@ import { mapGetters } from "vuex";
114 methods: { 114 methods: {
115 getOption() { 115 getOption() {
116 return { 116 return {
117 117 title: {
118 text: "统计分析图",
119 x: "center",
120 textStyle: {
121 //主标题文本设置
122 fontSize: 12, //大小
123 },
124 },
118 tooltip: { 125 tooltip: {
119 trigger: "item", 126 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)", 127 formatter: "{a} <br/>{b} : {c}个 ({d}%)",
128 },
129 grid: {
130 top: "4%",
131 left: "2%",
132 right: "3%",
133 bottom: "20%",
134 containLabel: true,
121 }, 135 },
122 series: [ 136 series: [
123 { 137 {
124 name: "饼图名称", 138 name: "统计分析图",
125 type: "pie", 139 type: "pie",
126 radius: ["20%", "70%"], 140 radius: "70%",
127 avoidLabelOverlap: false, 141 center: ["50%", "100%"],
128 label: { 142 data: this.tableList,
129 show: false, 143 itemStyle: {
130 position: "center",
131 },
132 emphasis: { 144 emphasis: {
145 shadowBlur: 10,
146 shadowOffsetX: 0,
147 shadowColor: "rgba(0, 0, 0, 0.5)",
148 },
149 },
133 label: { 150 label: {
134 show: true, 151 normal: {
135 fontSize: "30", 152 formatter: "{c}/个",
136 fontWeight: "bold", 153 position: "inside", //让文字显示在饼状图里面
154 textStyle: {
155 fontSize: 10,
156 color: "#fff",
137 }, 157 },
138 }, 158 },
139 labelLine: {
140 show: false,
141 }, 159 },
142 data: [ 160 center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
143 { value: 335, name: "数据1" },
144 { value: 310, name: "数据2" },
145 { value: 234, name: "数据3" },
146 { value: 135, name: "数据4" },
147 { value: 1548, name: "数据5" },
148 ],
149 }, 161 },
150 ], 162 ],
151 }; 163 };
152 }, 164 },
153 165
154 handleSearch() {}, 166 handleSearch() {
167 console.log(" this.queryForm", this.queryForm);
168 },
155 }, 169 },
156 }; 170 };
157 </script> 171 </script>
...@@ -171,20 +185,30 @@ import { mapGetters } from "vuex"; ...@@ -171,20 +185,30 @@ import { mapGetters } from "vuex";
171 .inquire { 185 .inquire {
172 width: 100%; 186 width: 100%;
173 height: 40px; 187 height: 40px;
174 border: 1px solid rgb(184, 217, 243); 188 background-color: #f4f7fd;
175 // background-color: rebeccapurple; 189 /deep/ .el-form {
190 .el-form-item--small.el-form-item {
191 margin-bottom: 5px;
192 }
176 } 193 }
194 }
195
177 .concent { 196 .concent {
178 width: 100%; 197 width: 100%;
179 height: 300px; 198 height: 300px;
180 display: flex; 199 display: flex;
200 //调整表头高度
201 /deep/.el-table__header {
202 height: 22px!important;
203 background-color: salmon;
204 }
181 .left { 205 .left {
182 width: 70%; 206 width: 70%;
183 height: 200px; 207 height: 200px;
184 } 208 }
185 .right { 209 .right {
186 width: 30%; 210 width: 30%;
187 height: 200px; 211 height: 300px;
188 } 212 }
189 } 213 }
190 } 214 }
......
...@@ -7,50 +7,23 @@ ...@@ -7,50 +7,23 @@
7 <div class="djlx"> 7 <div class="djlx">
8 <div class="inquire"> 8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px"> 9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row> 10 <el-row :gutter="20">
11 <el-col :span="6"> 11 <el-col :span="12">
12 <el-form-item label="开始时间" class="width100"> 12 <el-form-item label="收件时间" class="width100">
13 <el-date-picker 13 <el-date-picker
14 v-model="queryForm.kssj" 14 v-model="queryForm.sj"
15 type="daterange"
15 class="width100" 16 class="width100"
16 type="date" 17 range-separator="至"
17 placeholder="选择日期" 18 :clearable="false"
18 value-format="yyyy-MM-dd HH:mm:ss" 19 value-format="yyyy-MM-dd"
19 format="yyyy-MM-dd" 20 start-placeholder="开始日期"
20 ></el-date-picker> 21 end-placeholder="结束日期"
21 </el-form-item>
22 </el-col>
23 <el-col :span="6">
24 <el-form-item label="结束时间" class="width100">
25 <el-date-picker
26 v-model="queryForm.kssj"
27 class="width100"
28 type="date"
29 placeholder="选择日期"
30 value-format="yyyy-MM-dd HH:mm:ss"
31 format="yyyy-MM-dd"
32 ></el-date-picker>
33 </el-form-item>
34 </el-col>
35 <el-col :span="6">
36 <el-form-item label="区域" class="width100">
37 <el-select
38 v-model="queryForm.qy"
39 class="width100"
40 clearable
41 placeholder="请选择权利类型"
42 > 22 >
43 <el-option 23 </el-date-picker>
44 v-for="item in dictData['A8']"
45 :key="item.dcode"
46 :label="item.dname"
47 :value="item.dcode"
48 >
49 </el-option>
50 </el-select>
51 </el-form-item> 24 </el-form-item>
52 </el-col> 25 </el-col>
53 <el-col :span="5" class="btnColRight"> 26 <el-col :span="4" class="btnColRight">
54 <el-form-item> 27 <el-form-item>
55 <el-button 28 <el-button
56 type="primary" 29 type="primary"
...@@ -74,13 +47,13 @@ ...@@ -74,13 +47,13 @@
74 header-cell-class-name="table-header-gray" 47 header-cell-class-name="table-header-gray"
75 > 48 >
76 <el-table-column 49 <el-table-column
77 label="类型" 50 label="区域"
78 prop="name" 51 prop="name"
79 minWidth="100" 52 minWidth="100"
80 align="center" /> 53 align="center" />
81 <el-table-column 54 <el-table-column
82 label="数量" 55 label="收件数量"
83 prop="agent" 56 prop="value"
84 minWidth="120" 57 minWidth="120"
85 align="center" 58 align="center"
86 /></el-table> 59 /></el-table>
...@@ -93,16 +66,21 @@ ...@@ -93,16 +66,21 @@
93 </template> 66 </template>
94 <script> 67 <script>
95 import * as echarts from "echarts"; 68 import * as echarts from "echarts";
96 import { mapGetters } from "vuex"; 69 export default {
97 export default {
98 components: {}, 70 components: {},
99 computed: { 71 data() {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return { 72 return {
104 queryForm: {}, 73 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23], 74 tableList: [
75 { name: "首次登记", value: "2" },
76 { name: "变更登记", value: "12" },
77 { name: "抵押登记", value: "23" },
78 { name: "转移登记", value: "33" },
79 { name: "预告登记", value: "13" },
80 { name: "注销登记", value: "3" },
81 { name: "查封登记", value: "4" },
82 { name: "其他登记", value: "26" },
83 ],
106 }; 84 };
107 }, 85 },
108 mounted() { 86 mounted() {
...@@ -114,44 +92,58 @@ import { mapGetters } from "vuex"; ...@@ -114,44 +92,58 @@ import { mapGetters } from "vuex";
114 methods: { 92 methods: {
115 getOption() { 93 getOption() {
116 return { 94 return {
117 95 title: {
96 text: "统计分析图",
97 x: "center",
98 textStyle: {
99 //主标题文本设置
100 fontSize: 12, //大小
101 },
102 },
118 tooltip: { 103 tooltip: {
119 trigger: "item", 104 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)", 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,
121 }, 113 },
122 series: [ 114 series: [
123 { 115 {
124 name: "饼图名称", 116 name: "统计分析图",
125 type: "pie", 117 type: "pie",
126 radius: ["20%", "70%"], 118 radius: "70%",
127 avoidLabelOverlap: false, 119 center: ["50%", "100%"],
128 label: { 120 data: this.tableList,
129 show: false, 121 itemStyle: {
130 position: "center",
131 },
132 emphasis: { 122 emphasis: {
123 shadowBlur: 10,
124 shadowOffsetX: 0,
125 shadowColor: "rgba(0, 0, 0, 0.5)",
126 },
127 },
133 label: { 128 label: {
134 show: true, 129 normal: {
135 fontSize: "30", 130 formatter: "{c}/个",
136 fontWeight: "bold", 131 position: "inside", //让文字显示在饼状图里面
132 textStyle: {
133 fontSize: 10,
134 color: "#fff",
137 }, 135 },
138 }, 136 },
139 labelLine: {
140 show: false,
141 }, 137 },
142 data: [ 138 center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
143 { value: 335, name: "数据1" },
144 { value: 310, name: "数据2" },
145 { value: 234, name: "数据3" },
146 { value: 135, name: "数据4" },
147 { value: 1548, name: "数据5" },
148 ],
149 }, 139 },
150 ], 140 ],
151 }; 141 };
152 }, 142 },
153 143
154 handleSearch() {}, 144 handleSearch() {
145 console.log(" this.queryForm", this.queryForm);
146 },
155 }, 147 },
156 }; 148 };
157 </script> 149 </script>
...@@ -171,20 +163,30 @@ import { mapGetters } from "vuex"; ...@@ -171,20 +163,30 @@ import { mapGetters } from "vuex";
171 .inquire { 163 .inquire {
172 width: 100%; 164 width: 100%;
173 height: 40px; 165 height: 40px;
174 border: 1px solid rgb(184, 217, 243); 166 background-color: #f4f7fd;
175 // background-color: rebeccapurple; 167 /deep/ .el-form {
168 .el-form-item--small.el-form-item {
169 margin-bottom: 5px;
176 } 170 }
171 }
172 }
173
177 .concent { 174 .concent {
178 width: 100%; 175 width: 100%;
179 height: 300px; 176 height: 300px;
180 display: flex; 177 display: flex;
178 //调整表头高度
179 /deep/.el-table__header {
180 height: 22px!important;
181 background-color: salmon;
182 }
181 .left { 183 .left {
182 width: 70%; 184 width: 70%;
183 height: 200px; 185 height: 200px;
184 } 186 }
185 .right { 187 .right {
186 width: 30%; 188 width: 30%;
187 height: 200px; 189 height: 300px;
188 } 190 }
189 } 191 }
190 } 192 }
......
...@@ -7,41 +7,32 @@ ...@@ -7,41 +7,32 @@
7 <div class="djlx"> 7 <div class="djlx">
8 <div class="inquire"> 8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px"> 9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row> 10 <el-row :gutter="20">
11 <el-col :span="6"> 11 <el-col :span="12">
12 <el-form-item label="开始时间" class="width100"> 12 <el-form-item label="收件时间" class="width100">
13 <el-date-picker 13 <el-date-picker
14 v-model="queryForm.kssj" 14 v-model="queryForm.sj"
15 type="daterange"
15 class="width100" 16 class="width100"
16 type="date" 17 range-separator="至"
17 placeholder="选择日期" 18 :clearable="false"
18 value-format="yyyy-MM-dd HH:mm:ss" 19 value-format="yyyy-MM-dd"
19 format="yyyy-MM-dd" 20 start-placeholder="开始日期"
20 ></el-date-picker> 21 end-placeholder="结束日期"
21 </el-form-item> 22 >
22 </el-col> 23 </el-date-picker>
23 <el-col :span="6">
24 <el-form-item label="结束时间" class="width100">
25 <el-date-picker
26 v-model="queryForm.kssj"
27 class="width100"
28 type="date"
29 placeholder="选择日期"
30 value-format="yyyy-MM-dd HH:mm:ss"
31 format="yyyy-MM-dd"
32 ></el-date-picker>
33 </el-form-item> 24 </el-form-item>
34 </el-col> 25 </el-col>
35 <el-col :span="6"> 26 <el-col :span="7">
36 <el-form-item label="区域" class="width100"> 27 <el-form-item label="区域" class="width100">
37 <el-select 28 <el-select
38 v-model="queryForm.qy" 29 v-model="queryForm.qy"
39 class="width100" 30 class="width100"
40 clearable 31 clearable
41 placeholder="请选择权利类型" 32 placeholder="请选择区域"
42 > 33 >
43 <el-option 34 <el-option
44 v-for="item in dictData['A8']" 35 v-for="item in dictData['A20']"
45 :key="item.dcode" 36 :key="item.dcode"
46 :label="item.dname" 37 :label="item.dname"
47 :value="item.dcode" 38 :value="item.dcode"
...@@ -50,7 +41,7 @@ ...@@ -50,7 +41,7 @@
50 </el-select> 41 </el-select>
51 </el-form-item> 42 </el-form-item>
52 </el-col> 43 </el-col>
53 <el-col :span="5" class="btnColRight"> 44 <el-col :span="4" class="btnColRight">
54 <el-form-item> 45 <el-form-item>
55 <el-button 46 <el-button
56 type="primary" 47 type="primary"
...@@ -74,13 +65,13 @@ ...@@ -74,13 +65,13 @@
74 header-cell-class-name="table-header-gray" 65 header-cell-class-name="table-header-gray"
75 > 66 >
76 <el-table-column 67 <el-table-column
77 label="类型" 68 label="收件人"
78 prop="name" 69 prop="name"
79 minWidth="100" 70 minWidth="100"
80 align="center" /> 71 align="center" />
81 <el-table-column 72 <el-table-column
82 label="数量" 73 label="收件数量"
83 prop="agent" 74 prop="value"
84 minWidth="120" 75 minWidth="120"
85 align="center" 76 align="center"
86 /></el-table> 77 /></el-table>
...@@ -94,15 +85,24 @@ ...@@ -94,15 +85,24 @@
94 <script> 85 <script>
95 import * as echarts from "echarts"; 86 import * as echarts from "echarts";
96 import { mapGetters } from "vuex"; 87 import { mapGetters } from "vuex";
97 export default { 88 export default {
98 components: {}, 89 components: {},
99 computed: { 90 computed: {
100 ...mapGetters(["dictData", "transfer"]), 91 ...mapGetters(["dictData", "transfer"]),
101 }, 92 },
102 data () { 93 data() {
103 return { 94 return {
104 queryForm: {}, 95 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23], 96 tableList: [
97 { name: "首次登记", value: "2" },
98 { name: "变更登记", value: "12" },
99 { name: "抵押登记", value: "23" },
100 { name: "转移登记", value: "33" },
101 { name: "预告登记", value: "13" },
102 { name: "注销登记", value: "3" },
103 { name: "查封登记", value: "4" },
104 { name: "其他登记", value: "26" },
105 ],
106 }; 106 };
107 }, 107 },
108 mounted() { 108 mounted() {
...@@ -114,44 +114,58 @@ import { mapGetters } from "vuex"; ...@@ -114,44 +114,58 @@ import { mapGetters } from "vuex";
114 methods: { 114 methods: {
115 getOption() { 115 getOption() {
116 return { 116 return {
117 117 title: {
118 text: "统计分析图",
119 x: "center",
120 textStyle: {
121 //主标题文本设置
122 fontSize: 12, //大小
123 },
124 },
118 tooltip: { 125 tooltip: {
119 trigger: "item", 126 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)", 127 formatter: "{a} <br/>{b} : {c}个 ({d}%)",
128 },
129 grid: {
130 top: "4%",
131 left: "2%",
132 right: "3%",
133 bottom: "20%",
134 containLabel: true,
121 }, 135 },
122 series: [ 136 series: [
123 { 137 {
124 name: "饼图名称", 138 name: "统计分析图",
125 type: "pie", 139 type: "pie",
126 radius: ["20%", "70%"], 140 radius: "70%",
127 avoidLabelOverlap: false, 141 center: ["50%", "100%"],
128 label: { 142 data: this.tableList,
129 show: false, 143 itemStyle: {
130 position: "center",
131 },
132 emphasis: { 144 emphasis: {
145 shadowBlur: 10,
146 shadowOffsetX: 0,
147 shadowColor: "rgba(0, 0, 0, 0.5)",
148 },
149 },
133 label: { 150 label: {
134 show: true, 151 normal: {
135 fontSize: "30", 152 formatter: "{c}/个",
136 fontWeight: "bold", 153 position: "inside", //让文字显示在饼状图里面
154 textStyle: {
155 fontSize: 10,
156 color: "#fff",
137 }, 157 },
138 }, 158 },
139 labelLine: {
140 show: false,
141 }, 159 },
142 data: [ 160 center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
143 { value: 335, name: "数据1" },
144 { value: 310, name: "数据2" },
145 { value: 234, name: "数据3" },
146 { value: 135, name: "数据4" },
147 { value: 1548, name: "数据5" },
148 ],
149 }, 161 },
150 ], 162 ],
151 }; 163 };
152 }, 164 },
153 165
154 handleSearch() {}, 166 handleSearch() {
167 console.log(" this.queryForm", this.queryForm);
168 },
155 }, 169 },
156 }; 170 };
157 </script> 171 </script>
...@@ -171,20 +185,30 @@ import { mapGetters } from "vuex"; ...@@ -171,20 +185,30 @@ import { mapGetters } from "vuex";
171 .inquire { 185 .inquire {
172 width: 100%; 186 width: 100%;
173 height: 40px; 187 height: 40px;
174 border: 1px solid rgb(184, 217, 243); 188 background-color: #f4f7fd;
175 // background-color: rebeccapurple; 189 /deep/ .el-form {
190 .el-form-item--small.el-form-item {
191 margin-bottom: 5px;
192 }
176 } 193 }
194 }
195
177 .concent { 196 .concent {
178 width: 100%; 197 width: 100%;
179 height: 300px; 198 height: 300px;
180 display: flex; 199 display: flex;
200 //调整表头高度
201 /deep/.el-table__header {
202 height: 22px!important;
203 background-color: salmon;
204 }
181 .left { 205 .left {
182 width: 70%; 206 width: 70%;
183 height: 200px; 207 height: 200px;
184 } 208 }
185 .right { 209 .right {
186 width: 30%; 210 width: 30%;
187 height: 200px; 211 height: 300px;
188 } 212 }
189 } 213 }
190 } 214 }
......
...@@ -9,27 +9,14 @@ ...@@ -9,27 +9,14 @@
9 <el-form :model="queryForm" ref="queryForm" label-width="100px"> 9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row> 10 <el-row>
11 <el-col :span="6"> 11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100"> 12 <el-form-item label="统计时间" class="width100">
13 <el-date-picker 13 <el-date-picker
14 v-model="queryForm.kssj" 14 v-model="queryForm.sj"
15 class="width100" 15 class="width100"
16 type="date" 16 type="month"
17 placeholder="选择日期" 17 placeholder="选择月"
18 value-format="yyyy-MM-dd HH:mm:ss" 18 >
19 format="yyyy-MM-dd" 19 </el-date-picker>
20 ></el-date-picker>
21 </el-form-item>
22 </el-col>
23 <el-col :span="6">
24 <el-form-item label="结束时间" class="width100">
25 <el-date-picker
26 v-model="queryForm.kssj"
27 class="width100"
28 type="date"
29 placeholder="选择日期"
30 value-format="yyyy-MM-dd HH:mm:ss"
31 format="yyyy-MM-dd"
32 ></el-date-picker>
33 </el-form-item> 20 </el-form-item>
34 </el-col> 21 </el-col>
35 <el-col :span="6"> 22 <el-col :span="6">
...@@ -41,7 +28,7 @@ ...@@ -41,7 +28,7 @@
41 placeholder="请选择权利类型" 28 placeholder="请选择权利类型"
42 > 29 >
43 <el-option 30 <el-option
44 v-for="item in dictData['A8']" 31 v-for="item in dictData['A20']"
45 :key="item.dcode" 32 :key="item.dcode"
46 :label="item.dname" 33 :label="item.dname"
47 :value="item.dcode" 34 :value="item.dcode"
...@@ -64,45 +51,36 @@ ...@@ -64,45 +51,36 @@
64 </el-form> 51 </el-form>
65 </div> 52 </div>
66 <div class="concent"> 53 <div class="concent">
67 <div class="left">
68 <el-table
69 height="187"
70 stripe
71 :data="tableList"
72 size="mini"
73 border
74 header-cell-class-name="table-header-gray"
75 >
76 <el-table-column
77 label="类型"
78 prop="name"
79 minWidth="100"
80 align="center" />
81 <el-table-column
82 label="数量"
83 prop="agent"
84 minWidth="120"
85 align="center"
86 /></el-table>
87 </div>
88 <div class="right">
89 <div ref="chart" style="width: 100%; height: 200px"></div> 54 <div ref="chart" style="width: 100%; height: 200px"></div>
90 </div> 55 </div>
91 </div> 56 </div>
92 </div>
93 </template> 57 </template>
94 <script> 58 <script>
95 import * as echarts from "echarts"; 59 import * as echarts from "echarts";
96 import { mapGetters } from "vuex"; 60 import { mapGetters } from "vuex";
97 export default { 61 export default {
98 components: {}, 62 components: {},
99 computed: { 63 computed: {
100 ...mapGetters(["dictData", "transfer"]), 64 ...mapGetters(["dictData", "transfer"]),
101 }, 65 },
102 data () { 66 data() {
103 return { 67 return {
104 queryForm: {}, 68 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23], 69 datas: [12, 23, 15, 28, 37, 11, 13, 32, 34, 56, 12, 15],
70 datatime: [
71 "1日",
72 "2日",
73 "4日",
74 "5日",
75 "7日",
76 "10日",
77 "14日",
78 "15日",
79 "17日",
80 "19日",
81 "20日",
82 "21日",
83 ],
106 }; 84 };
107 }, 85 },
108 mounted() { 86 mounted() {
...@@ -114,38 +92,60 @@ import { mapGetters } from "vuex"; ...@@ -114,38 +92,60 @@ import { mapGetters } from "vuex";
114 methods: { 92 methods: {
115 getOption() { 93 getOption() {
116 return { 94 return {
95 title: {
96 text: "2023年11月收件情况 ", // 主标题名称
117 97
118 tooltip: { 98 textStyle: {
119 trigger: "item", 99 //主标题文本设置
120 formatter: "{a} <br/>{b}: {c} ({d}%)", 100 fontSize: 18, //大小
121 }, 101 },
122 series: [ 102
123 { 103 itemGap: 3, //主副标题间距
124 name: "饼图名称", 104 x: "center", //主副标题的水平位置
125 type: "pie", 105 y: "top", //主副标题的垂直位置
126 radius: ["20%", "70%"], 106 },
127 avoidLabelOverlap: false, 107 legend: {
128 label: { 108 data: ["转诊量"],
129 show: false, 109 top: "6%",
130 position: "center", 110 right: "4%",
111 textStyle: {
112 color: "#747474",
131 }, 113 },
132 emphasis: { 114 },
115 tooltip: {
116 // trigger: "item", //默认效果
117 //柱状图加阴影
118 trigger: "axis",
119 axisPointer: {
120 type: "shadow",
133 label: { 121 label: {
134 show: true, 122 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 }, 123 },
138 }, 124 },
139 labelLine: {
140 show: false,
141 }, 125 },
142 data: [ 126 grid: {
143 { value: 335, name: "数据1" }, 127 top: "20%",
144 { value: 310, name: "数据2" }, 128 left: "2%",
145 { value: 234, name: "数据3" }, 129 right: "3%",
146 { value: 135, name: "数据4" }, 130 bottom: "20%",
147 { value: 1548, name: "数据5" }, 131 containLabel: true,
148 ], 132 },
133 xAxis: {
134 type: "category",
135 data: this.datatime,
136 },
137 yAxis: {
138 type: "value",
139 },
140 series: [
141 {
142 data: this.datas,
143 type: "bar",
144 barWidth: 15,
145 showBackground: true,
146 backgroundStyle: {
147 color: "rgba(220, 220, 220, 0.8)",
148 },
149 }, 149 },
150 ], 150 ],
151 }; 151 };
...@@ -178,14 +178,6 @@ import { mapGetters } from "vuex"; ...@@ -178,14 +178,6 @@ import { mapGetters } from "vuex";
178 width: 100%; 178 width: 100%;
179 height: 300px; 179 height: 300px;
180 display: flex; 180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 } 181 }
190 } 182 }
191 </style> 183 </style>
......
...@@ -9,27 +9,9 @@ ...@@ -9,27 +9,9 @@
9 <el-form :model="queryForm" ref="queryForm" label-width="100px"> 9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row> 10 <el-row>
11 <el-col :span="6"> 11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100"> 12 <el-form-item label="统计年份" class="width100">
13 <el-date-picker 13 <el-date-picker class="width100" v-model="queryForm.sj" type="year" placeholder="选择年">
14 v-model="queryForm.kssj" 14 </el-date-picker>
15 class="width100"
16 type="date"
17 placeholder="选择日期"
18 value-format="yyyy-MM-dd HH:mm:ss"
19 format="yyyy-MM-dd"
20 ></el-date-picker>
21 </el-form-item>
22 </el-col>
23 <el-col :span="6">
24 <el-form-item label="结束时间" class="width100">
25 <el-date-picker
26 v-model="queryForm.kssj"
27 class="width100"
28 type="date"
29 placeholder="选择日期"
30 value-format="yyyy-MM-dd HH:mm:ss"
31 format="yyyy-MM-dd"
32 ></el-date-picker>
33 </el-form-item> 15 </el-form-item>
34 </el-col> 16 </el-col>
35 <el-col :span="6"> 17 <el-col :span="6">
...@@ -41,7 +23,7 @@ ...@@ -41,7 +23,7 @@
41 placeholder="请选择权利类型" 23 placeholder="请选择权利类型"
42 > 24 >
43 <el-option 25 <el-option
44 v-for="item in dictData['A8']" 26 v-for="item in dictData['A20']"
45 :key="item.dcode" 27 :key="item.dcode"
46 :label="item.dname" 28 :label="item.dname"
47 :value="item.dcode" 29 :value="item.dcode"
...@@ -50,7 +32,7 @@ ...@@ -50,7 +32,7 @@
50 </el-select> 32 </el-select>
51 </el-form-item> 33 </el-form-item>
52 </el-col> 34 </el-col>
53 <el-col :span="5" class="btnColRight"> 35 <el-col :span="12" class="btnColRight">
54 <el-form-item> 36 <el-form-item>
55 <el-button 37 <el-button
56 type="primary" 38 type="primary"
...@@ -64,45 +46,21 @@ ...@@ -64,45 +46,21 @@
64 </el-form> 46 </el-form>
65 </div> 47 </div>
66 <div class="concent"> 48 <div class="concent">
67 <div class="left">
68 <el-table
69 height="187"
70 stripe
71 :data="tableList"
72 size="mini"
73 border
74 header-cell-class-name="table-header-gray"
75 >
76 <el-table-column
77 label="类型"
78 prop="name"
79 minWidth="100"
80 align="center" />
81 <el-table-column
82 label="数量"
83 prop="agent"
84 minWidth="120"
85 align="center"
86 /></el-table>
87 </div>
88 <div class="right">
89 <div ref="chart" style="width: 100%; height: 200px"></div> 49 <div ref="chart" style="width: 100%; height: 200px"></div>
90 </div> 50 </div>
91 </div> 51 </div>
92 </div>
93 </template> 52 </template>
94 <script> 53 <script>
95 import * as echarts from "echarts"; 54 import * as echarts from "echarts";
96 import { mapGetters } from "vuex"; 55 import { mapGetters } from "vuex";
97 export default { 56 export default {
98 components: {}, 57 components: {},
99 computed: { 58 computed: {
100 ...mapGetters(["dictData", "transfer"]), 59 ...mapGetters(["dictData", "transfer"]),
101 }, 60 },
102 data () { 61 data() {
103 return { 62 return {
104 queryForm: {}, 63 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 }; 64 };
107 }, 65 },
108 mounted() { 66 mounted() {
...@@ -114,38 +72,70 @@ import { mapGetters } from "vuex"; ...@@ -114,38 +72,70 @@ import { mapGetters } from "vuex";
114 methods: { 72 methods: {
115 getOption() { 73 getOption() {
116 return { 74 return {
75 xAxis: {
76 type: "category",
77 data: [
78 "1月",
79 "2月",
80 "3月",
81 "4月",
82 "5月",
83 "6月",
84 "7月",
85 "8月",
86 "9月",
87 "10月",
88 "11月",
89 "12月",
90 ],
91 },
92 yAxis: {
93 type: "value",
94 },
95 title: {
96 text: "2023年收件情况 ", // 主标题名称
117 97
118 tooltip: { 98 textStyle: {
119 trigger: "item", 99 //主标题文本设置
120 formatter: "{a} <br/>{b}: {c} ({d}%)", 100 fontSize: 18, //大小
121 }, 101 },
122 series: [ 102
123 { 103 itemGap: 3, //主副标题间距
124 name: "饼图名称", 104 x: "center", //主副标题的水平位置
125 type: "pie", 105 y: "top", //主副标题的垂直位置
126 radius: ["20%", "70%"], 106 },
127 avoidLabelOverlap: false, 107 legend: {
128 label: { 108 data: ["转诊量"],
129 show: false, 109 top: "6%",
130 position: "center", 110 right: "4%",
111 textStyle: {
112 color: "#747474",
131 }, 113 },
132 emphasis: { 114 },
115 tooltip: {
116 // trigger: "item", //默认效果
117 //柱状图加阴影
118 trigger: "axis",
119 axisPointer: {
120 type: "shadow",
133 label: { 121 label: {
134 show: true, 122 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 }, 123 },
138 }, 124 },
139 labelLine: {
140 show: false,
141 }, 125 },
142 data: [ 126 grid: {
143 { value: 335, name: "数据1" }, 127 top: "20%",
144 { value: 310, name: "数据2" }, 128 left: "2%",
145 { value: 234, name: "数据3" }, 129 right: "3%",
146 { value: 135, name: "数据4" }, 130 bottom: "20%",
147 { value: 1548, name: "数据5" }, 131 containLabel: true,
148 ], 132 },
133 series: [
134 {
135 name: "转诊量",
136 data: [38, 42, 50, 157, 40, 45, 60, 140, 36, 47, 54, 143],
137 barWidth: 40,
138 type: "bar",
149 }, 139 },
150 ], 140 ],
151 }; 141 };
...@@ -178,14 +168,6 @@ import { mapGetters } from "vuex"; ...@@ -178,14 +168,6 @@ import { mapGetters } from "vuex";
178 width: 100%; 168 width: 100%;
179 height: 300px; 169 height: 300px;
180 display: flex; 170 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 } 171 }
190 } 172 }
191 </style> 173 </style>
......
...@@ -7,41 +7,32 @@ ...@@ -7,41 +7,32 @@
7 <div class="djlx"> 7 <div class="djlx">
8 <div class="inquire"> 8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px"> 9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row> 10 <el-row :gutter="20">
11 <el-col :span="6"> 11 <el-col :span="12">
12 <el-form-item label="开始时间" class="width100"> 12 <el-form-item label="缮证日期" class="width100">
13 <el-date-picker 13 <el-date-picker
14 v-model="queryForm.kssj" 14 v-model="queryForm.sj"
15 type="daterange"
15 class="width100" 16 class="width100"
16 type="date" 17 range-separator="至"
17 placeholder="选择日期" 18 :clearable="false"
18 value-format="yyyy-MM-dd HH:mm:ss" 19 value-format="yyyy-MM-dd"
19 format="yyyy-MM-dd" 20 start-placeholder="开始日期"
20 ></el-date-picker> 21 end-placeholder="结束日期"
21 </el-form-item> 22 >
22 </el-col> 23 </el-date-picker>
23 <el-col :span="6">
24 <el-form-item label="结束时间" class="width100">
25 <el-date-picker
26 v-model="queryForm.kssj"
27 class="width100"
28 type="date"
29 placeholder="选择日期"
30 value-format="yyyy-MM-dd HH:mm:ss"
31 format="yyyy-MM-dd"
32 ></el-date-picker>
33 </el-form-item> 24 </el-form-item>
34 </el-col> 25 </el-col>
35 <el-col :span="6"> 26 <el-col :span="7">
36 <el-form-item label="区域" class="width100"> 27 <el-form-item label="区域" class="width100">
37 <el-select 28 <el-select
38 v-model="queryForm.qy" 29 v-model="queryForm.qy"
39 class="width100" 30 class="width100"
40 clearable 31 clearable
41 placeholder="请选择权利类型" 32 placeholder="请选择区域"
42 > 33 >
43 <el-option 34 <el-option
44 v-for="item in dictData['A8']" 35 v-for="item in dictData['A20']"
45 :key="item.dcode" 36 :key="item.dcode"
46 :label="item.dname" 37 :label="item.dname"
47 :value="item.dcode" 38 :value="item.dcode"
...@@ -50,7 +41,7 @@ ...@@ -50,7 +41,7 @@
50 </el-select> 41 </el-select>
51 </el-form-item> 42 </el-form-item>
52 </el-col> 43 </el-col>
53 <el-col :span="5" class="btnColRight"> 44 <el-col :span="4" class="btnColRight">
54 <el-form-item> 45 <el-form-item>
55 <el-button 46 <el-button
56 type="primary" 47 type="primary"
...@@ -74,13 +65,13 @@ ...@@ -74,13 +65,13 @@
74 header-cell-class-name="table-header-gray" 65 header-cell-class-name="table-header-gray"
75 > 66 >
76 <el-table-column 67 <el-table-column
77 label="类型" 68 label="证书种类"
78 prop="name" 69 prop="name"
79 minWidth="100" 70 minWidth="100"
80 align="center" /> 71 align="center" />
81 <el-table-column 72 <el-table-column
82 label="数量" 73 label="收件数量"
83 prop="agent" 74 prop="value"
84 minWidth="120" 75 minWidth="120"
85 align="center" 76 align="center"
86 /></el-table> 77 /></el-table>
...@@ -94,15 +85,24 @@ ...@@ -94,15 +85,24 @@
94 <script> 85 <script>
95 import * as echarts from "echarts"; 86 import * as echarts from "echarts";
96 import { mapGetters } from "vuex"; 87 import { mapGetters } from "vuex";
97 export default { 88 export default {
98 components: {}, 89 components: {},
99 computed: { 90 computed: {
100 ...mapGetters(["dictData", "transfer"]), 91 ...mapGetters(["dictData", "transfer"]),
101 }, 92 },
102 data () { 93 data() {
103 return { 94 return {
104 queryForm: {}, 95 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23], 96 tableList: [
97 { name: "首次登记", value: "2" },
98 { name: "变更登记", value: "12" },
99 { name: "抵押登记", value: "23" },
100 { name: "转移登记", value: "33" },
101 { name: "预告登记", value: "13" },
102 { name: "注销登记", value: "3" },
103 { name: "查封登记", value: "4" },
104 { name: "其他登记", value: "26" },
105 ],
106 }; 106 };
107 }, 107 },
108 mounted() { 108 mounted() {
...@@ -114,44 +114,58 @@ import { mapGetters } from "vuex"; ...@@ -114,44 +114,58 @@ import { mapGetters } from "vuex";
114 methods: { 114 methods: {
115 getOption() { 115 getOption() {
116 return { 116 return {
117 117 title: {
118 text: "统计分析图",
119 x: "center",
120 textStyle: {
121 //主标题文本设置
122 fontSize: 12, //大小
123 },
124 },
118 tooltip: { 125 tooltip: {
119 trigger: "item", 126 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)", 127 formatter: "{a} <br/>{b} : {c}个 ({d}%)",
128 },
129 grid: {
130 top: "4%",
131 left: "2%",
132 right: "3%",
133 bottom: "20%",
134 containLabel: true,
121 }, 135 },
122 series: [ 136 series: [
123 { 137 {
124 name: "饼图名称", 138 name: "统计分析图",
125 type: "pie", 139 type: "pie",
126 radius: ["20%", "70%"], 140 radius: "70%",
127 avoidLabelOverlap: false, 141 center: ["50%", "100%"],
128 label: { 142 data: this.tableList,
129 show: false, 143 itemStyle: {
130 position: "center",
131 },
132 emphasis: { 144 emphasis: {
145 shadowBlur: 10,
146 shadowOffsetX: 0,
147 shadowColor: "rgba(0, 0, 0, 0.5)",
148 },
149 },
133 label: { 150 label: {
134 show: true, 151 normal: {
135 fontSize: "30", 152 formatter: "{c}/个",
136 fontWeight: "bold", 153 position: "inside", //让文字显示在饼状图里面
154 textStyle: {
155 fontSize: 10,
156 color: "#fff",
137 }, 157 },
138 }, 158 },
139 labelLine: {
140 show: false,
141 }, 159 },
142 data: [ 160 center: ["50%", "50%"], // 这个属性调整图像的位置！！！！！
143 { value: 335, name: "数据1" },
144 { value: 310, name: "数据2" },
145 { value: 234, name: "数据3" },
146 { value: 135, name: "数据4" },
147 { value: 1548, name: "数据5" },
148 ],
149 }, 161 },
150 ], 162 ],
151 }; 163 };
152 }, 164 },
153 165
154 handleSearch() {}, 166 handleSearch() {
167 console.log(" this.queryForm", this.queryForm);
168 },
155 }, 169 },
156 }; 170 };
157 </script> 171 </script>
...@@ -171,20 +185,30 @@ import { mapGetters } from "vuex"; ...@@ -171,20 +185,30 @@ import { mapGetters } from "vuex";
171 .inquire { 185 .inquire {
172 width: 100%; 186 width: 100%;
173 height: 40px; 187 height: 40px;
174 border: 1px solid rgb(184, 217, 243); 188 background-color: #f4f7fd;
175 // background-color: rebeccapurple; 189 /deep/ .el-form {
190 .el-form-item--small.el-form-item {
191 margin-bottom: 5px;
192 }
176 } 193 }
194 }
195
177 .concent { 196 .concent {
178 width: 100%; 197 width: 100%;
179 height: 300px; 198 height: 300px;
180 display: flex; 199 display: flex;
200 //调整表头高度
201 /deep/.el-table__header {
202 height: 22px!important;
203 background-color: salmon;
204 }
181 .left { 205 .left {
182 width: 70%; 206 width: 70%;
183 height: 200px; 207 height: 200px;
184 } 208 }
185 .right { 209 .right {
186 width: 30%; 210 width: 30%;
187 height: 200px; 211 height: 300px;
188 } 212 }
189 } 213 }
190 } 214 }
......
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
10 <el-card 10 <el-card
11 shadow="hover" 11 shadow="hover"
12 :body-style="{ padding: '0' }" 12 :body-style="{ padding: '0' }"
13 style="height: 270px" 13 style="height: 260px"
14 > 14 >
15 <div slot="header" class="flexst"> 15 <div slot="header" class="flexst">
16 <h5 class="title">根据登记类型统计分析收件</h5> 16 <h5 class="title">根据登记类型统计分析收件</h5>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 <el-card 22 <el-card
23 shadow="hover" 23 shadow="hover"
24 :body-style="{ padding: '0' }" 24 :body-style="{ padding: '0' }"
25 style="height: 270px" 25 style="height: 260px"
26 > 26 >
27 <div slot="header" class="flexst"> 27 <div slot="header" class="flexst">
28 <h5 class="title">根据证书种类统计分析发证情况</h5> 28 <h5 class="title">根据证书种类统计分析发证情况</h5>
...@@ -36,12 +36,12 @@ ...@@ -36,12 +36,12 @@
36 <el-card 36 <el-card
37 shadow="hover" 37 shadow="hover"
38 :body-style="{ padding: '0' }" 38 :body-style="{ padding: '0' }"
39 style="height: 270px" 39 style="height: 260px"
40 > 40 >
41 <div slot="header" class="flexst"> 41 <div slot="header" class="flexst">
42 <h5 class="title">根据收件人统计分析收件</h5> 42 <h5 class="title">根据收件人统计分析收件</h5>
43 </div> 43 </div>
44 <djlx/> 44 <psjr/>
45 </el-card> 45 </el-card>
46 </el-col> 46 </el-col>
47 47
...@@ -49,12 +49,12 @@ ...@@ -49,12 +49,12 @@
49 <el-card 49 <el-card
50 shadow="hover" 50 shadow="hover"
51 :body-style="{ padding: '0' }" 51 :body-style="{ padding: '0' }"
52 style="height: 270px" 52 style="height: 260px"
53 > 53 >
54 <div slot="header" class="flexst"> 54 <div slot="header" class="flexst">
55 <h5 class="title">收件日统计</h5> 55 <h5 class="title">收件日统计</h5>
56 </div> 56 </div>
57 <ul class="workbench flexst"></ul> 57 <sjri/>
58 </el-card> 58 </el-card>
59 </el-col> 59 </el-col>
60 </el-row> 60 </el-row>
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
63 <el-card 63 <el-card
64 shadow="hover" 64 shadow="hover"
65 :body-style="{ padding: '0' }" 65 :body-style="{ padding: '0' }"
66 style="height: 270px" 66 style="height: 260px"
67 > 67 >
68 <div slot="header" class="flexst"> 68 <div slot="header" class="flexst">
69 <h5 class="title">根据区域统计分析收件</h5> 69 <h5 class="title">根据区域统计分析收件</h5>
...@@ -75,12 +75,12 @@ ...@@ -75,12 +75,12 @@
75 <el-card 75 <el-card
76 shadow="hover" 76 shadow="hover"
77 :body-style="{ padding: '0' }" 77 :body-style="{ padding: '0' }"
78 style="height: 270px" 78 style="height: 260px"
79 > 79 >
80 <div slot="header" class="flexst"> 80 <div slot="header" class="flexst">
81 <h5 class="title">收件月统计</h5> 81 <h5 class="title">收件月统计</h5>
82 </div> 82 </div>
83 <ul class="workbench flexst"></ul> 83 <sjyue/>
84 </el-card> 84 </el-card>
85 </el-col> 85 </el-col>
86 </el-row> 86 </el-row>
...@@ -92,9 +92,12 @@ import { mapGetters } from "vuex"; ...@@ -92,9 +92,12 @@ import { mapGetters } from "vuex";
92 import djlx from "./components/djlx.vue"; 92 import djlx from "./components/djlx.vue";
93 import zszl from "./components/zszl.vue"; 93 import zszl from "./components/zszl.vue";
94 import qytj from "./components/qytj.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";
95 98
96 export default { 99 export default {
97 components: {djlx,zszl,qytj}, 100 components: {djlx,zszl,qytj,sjri,sjyue,psjr},
98 computed: { 101 computed: {
99 ...mapGetters(["dictData", "transfer"]), 102 ...mapGetters(["dictData", "transfer"]),
100 }, 103 },
...@@ -105,48 +108,13 @@ export default { ...@@ -105,48 +108,13 @@ export default {
105 }; 108 };
106 }, 109 },
107 mounted() { 110 mounted() {
108 // 创建一个 ECharts 实例 111
109 this.chart = echarts.init(this.$refs.chart);
110 // 在 ECharts 实例中配置图表
111 this.chart.setOption(this.getOption());
112 }, 112 },
113 methods: { 113 methods: {
114 getOption() { 114 getOption() {
115 return { 115 return {
116 116
117 tooltip: { 117
118 trigger: "item",
119 formatter: "{a} <br/>{b}: {c} ({d}%)",
120 },
121 series: [
122 {
123 name: "饼图名称",
124 type: "pie",
125 radius: ["20%", "70%"],
126 avoidLabelOverlap: false,
127 label: {
128 show: false,
129 position: "center",
130 },
131 emphasis: {
132 label: {
133 show: true,
134 fontSize: "30",
135 fontWeight: "bold",
136 },
137 },
138 labelLine: {
139 show: false,
140 },
141 data: [
142 { value: 335, name: "数据1" },
143 { value: 310, name: "数据2" },
144 { value: 234, name: "数据3" },
145 { value: 135, name: "数据4" },
146 { value: 1548, name: "数据5" },
147 ],
148 },
149 ],
150 }; 118 };
151 }, 119 },
152 120
......
...@@ -4,19 +4,354 @@ ...@@ -4,19 +4,354 @@
4 * @LastEditTime: 2023-08-25 08:59:04 4 * @LastEditTime: 2023-08-25 08:59:04
5 --> 5 -->
6 <template> 6 <template>
7 <div class='yhjgba'> 7 <div class="tjltj">
8 <el-empty description="正在开发"></el-empty> 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>
9 </div> 52 </div>
10 </template> 53 </template>
11 <script> 54 <script>
12 55 import * as echarts from "echarts";
13 export default { 56 export default {
14 components: {}, 57 components: {},
15 data () { 58 data() {
16 return { 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));
17 } 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 );
18 } 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;
19 } 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 };
20 </script> 298 </script>
21 <style scoped lang='scss'> 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 }
22 </style> 357 </style>
......
...@@ -4,19 +4,351 @@ ...@@ -4,19 +4,351 @@
4 * @LastEditTime: 2023-08-25 08:59:04 4 * @LastEditTime: 2023-08-25 08:59:04
5 --> 5 -->
6 <template> 6 <template>
7 <div class='yhjgba'> 7 <div class="tjltj">
8 <el-empty description="正在开发"></el-empty> 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>
9 </div> 52 </div>
10 </template> 53 </template>
11 <script> 54 <script>
12 55 import * as echarts from "echarts";
13 export default { 56 export default {
14 components: {}, 57 components: {},
15 data () { 58 data() {
16 return { 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));
17 } 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 );
18 } 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;
19 } 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 };
20 </script> 297 </script>
21 <style scoped lang='scss'> 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 }
22 </style> 354 </style>
......