Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
50ab8b81 by “miaofang
Options

业务量统计

1 parent 5865588c
Expand all
Inline Side-by-side
Showing 9 changed files with 1326 additions and 10 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 <!--
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.kssj"
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>
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 >
43 <el-option
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>
52 </el-col>
53 <el-col :span="5" class="btnColRight">
54 <el-form-item>
55 <el-button
56 type="primary"
57 native-type="submit"
58 @click="handleSearch"
59 >查询</el-button
60 >
61 </el-form-item>
62 </el-col>
63 </el-row>
64 </el-form>
65 </div>
66 <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>
90 </div>
91 </div>
92 </div>
93 </template>
94 <script>
95 import * as echarts from "echarts";
96 import { mapGetters } from "vuex";
97 export default {
98 components: {},
99 computed: {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return {
104 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 };
107 },
108 mounted() {
109 // 创建一个 ECharts 实例
110 this.chart = echarts.init(this.$refs.chart);
111 // 在 ECharts 实例中配置图表
112 this.chart.setOption(this.getOption());
113 },
114 methods: {
115 getOption() {
116 return {
117
118 tooltip: {
119 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)",
121 },
122 series: [
123 {
124 name: "饼图名称",
125 type: "pie",
126 radius: ["20%", "70%"],
127 avoidLabelOverlap: false,
128 label: {
129 show: false,
130 position: "center",
131 },
132 emphasis: {
133 label: {
134 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 },
138 },
139 labelLine: {
140 show: false,
141 },
142 data: [
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 },
150 ],
151 };
152 },
153
154 handleSearch() {},
155 },
156 };
157 </script>
158 <style scoped lang="scss">
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 }
190 }
191 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.kssj"
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>
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 >
43 <el-option
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>
52 </el-col>
53 <el-col :span="5" class="btnColRight">
54 <el-form-item>
55 <el-button
56 type="primary"
57 native-type="submit"
58 @click="handleSearch"
59 >查询</el-button
60 >
61 </el-form-item>
62 </el-col>
63 </el-row>
64 </el-form>
65 </div>
66 <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>
90 </div>
91 </div>
92 </div>
93 </template>
94 <script>
95 import * as echarts from "echarts";
96 import { mapGetters } from "vuex";
97 export default {
98 components: {},
99 computed: {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return {
104 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 };
107 },
108 mounted() {
109 // 创建一个 ECharts 实例
110 this.chart = echarts.init(this.$refs.chart);
111 // 在 ECharts 实例中配置图表
112 this.chart.setOption(this.getOption());
113 },
114 methods: {
115 getOption() {
116 return {
117
118 tooltip: {
119 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)",
121 },
122 series: [
123 {
124 name: "饼图名称",
125 type: "pie",
126 radius: ["20%", "70%"],
127 avoidLabelOverlap: false,
128 label: {
129 show: false,
130 position: "center",
131 },
132 emphasis: {
133 label: {
134 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 },
138 },
139 labelLine: {
140 show: false,
141 },
142 data: [
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 },
150 ],
151 };
152 },
153
154 handleSearch() {},
155 },
156 };
157 </script>
158 <style scoped lang="scss">
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 }
190 }
191 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.kssj"
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>
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 >
43 <el-option
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>
52 </el-col>
53 <el-col :span="5" class="btnColRight">
54 <el-form-item>
55 <el-button
56 type="primary"
57 native-type="submit"
58 @click="handleSearch"
59 >查询</el-button
60 >
61 </el-form-item>
62 </el-col>
63 </el-row>
64 </el-form>
65 </div>
66 <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>
90 </div>
91 </div>
92 </div>
93 </template>
94 <script>
95 import * as echarts from "echarts";
96 import { mapGetters } from "vuex";
97 export default {
98 components: {},
99 computed: {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return {
104 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 };
107 },
108 mounted() {
109 // 创建一个 ECharts 实例
110 this.chart = echarts.init(this.$refs.chart);
111 // 在 ECharts 实例中配置图表
112 this.chart.setOption(this.getOption());
113 },
114 methods: {
115 getOption() {
116 return {
117
118 tooltip: {
119 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)",
121 },
122 series: [
123 {
124 name: "饼图名称",
125 type: "pie",
126 radius: ["20%", "70%"],
127 avoidLabelOverlap: false,
128 label: {
129 show: false,
130 position: "center",
131 },
132 emphasis: {
133 label: {
134 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 },
138 },
139 labelLine: {
140 show: false,
141 },
142 data: [
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 },
150 ],
151 };
152 },
153
154 handleSearch() {},
155 },
156 };
157 </script>
158 <style scoped lang="scss">
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 }
190 }
191 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.kssj"
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>
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 >
43 <el-option
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>
52 </el-col>
53 <el-col :span="5" class="btnColRight">
54 <el-form-item>
55 <el-button
56 type="primary"
57 native-type="submit"
58 @click="handleSearch"
59 >查询</el-button
60 >
61 </el-form-item>
62 </el-col>
63 </el-row>
64 </el-form>
65 </div>
66 <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>
90 </div>
91 </div>
92 </div>
93 </template>
94 <script>
95 import * as echarts from "echarts";
96 import { mapGetters } from "vuex";
97 export default {
98 components: {},
99 computed: {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return {
104 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 };
107 },
108 mounted() {
109 // 创建一个 ECharts 实例
110 this.chart = echarts.init(this.$refs.chart);
111 // 在 ECharts 实例中配置图表
112 this.chart.setOption(this.getOption());
113 },
114 methods: {
115 getOption() {
116 return {
117
118 tooltip: {
119 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)",
121 },
122 series: [
123 {
124 name: "饼图名称",
125 type: "pie",
126 radius: ["20%", "70%"],
127 avoidLabelOverlap: false,
128 label: {
129 show: false,
130 position: "center",
131 },
132 emphasis: {
133 label: {
134 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 },
138 },
139 labelLine: {
140 show: false,
141 },
142 data: [
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 },
150 ],
151 };
152 },
153
154 handleSearch() {},
155 },
156 };
157 </script>
158 <style scoped lang="scss">
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 }
190 }
191 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.kssj"
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>
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 >
43 <el-option
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>
52 </el-col>
53 <el-col :span="5" class="btnColRight">
54 <el-form-item>
55 <el-button
56 type="primary"
57 native-type="submit"
58 @click="handleSearch"
59 >查询</el-button
60 >
61 </el-form-item>
62 </el-col>
63 </el-row>
64 </el-form>
65 </div>
66 <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>
90 </div>
91 </div>
92 </div>
93 </template>
94 <script>
95 import * as echarts from "echarts";
96 import { mapGetters } from "vuex";
97 export default {
98 components: {},
99 computed: {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return {
104 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 };
107 },
108 mounted() {
109 // 创建一个 ECharts 实例
110 this.chart = echarts.init(this.$refs.chart);
111 // 在 ECharts 实例中配置图表
112 this.chart.setOption(this.getOption());
113 },
114 methods: {
115 getOption() {
116 return {
117
118 tooltip: {
119 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)",
121 },
122 series: [
123 {
124 name: "饼图名称",
125 type: "pie",
126 radius: ["20%", "70%"],
127 avoidLabelOverlap: false,
128 label: {
129 show: false,
130 position: "center",
131 },
132 emphasis: {
133 label: {
134 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 },
138 },
139 labelLine: {
140 show: false,
141 },
142 data: [
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 },
150 ],
151 };
152 },
153
154 handleSearch() {},
155 },
156 };
157 </script>
158 <style scoped lang="scss">
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 }
190 }
191 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-08-25 08:59:04
5 -->
6 <template>
7 <div class="djlx">
8 <div class="inquire">
9 <el-form :model="queryForm" ref="queryForm" label-width="100px">
10 <el-row>
11 <el-col :span="6">
12 <el-form-item label="开始时间" class="width100">
13 <el-date-picker
14 v-model="queryForm.kssj"
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>
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 >
43 <el-option
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>
52 </el-col>
53 <el-col :span="5" class="btnColRight">
54 <el-form-item>
55 <el-button
56 type="primary"
57 native-type="submit"
58 @click="handleSearch"
59 >查询</el-button
60 >
61 </el-form-item>
62 </el-col>
63 </el-row>
64 </el-form>
65 </div>
66 <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>
90 </div>
91 </div>
92 </div>
93 </template>
94 <script>
95 import * as echarts from "echarts";
96 import { mapGetters } from "vuex";
97 export default {
98 components: {},
99 computed: {
100 ...mapGetters(["dictData", "transfer"]),
101 },
102 data () {
103 return {
104 queryForm: {},
105 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
106 };
107 },
108 mounted() {
109 // 创建一个 ECharts 实例
110 this.chart = echarts.init(this.$refs.chart);
111 // 在 ECharts 实例中配置图表
112 this.chart.setOption(this.getOption());
113 },
114 methods: {
115 getOption() {
116 return {
117
118 tooltip: {
119 trigger: "item",
120 formatter: "{a} <br/>{b}: {c} ({d}%)",
121 },
122 series: [
123 {
124 name: "饼图名称",
125 type: "pie",
126 radius: ["20%", "70%"],
127 avoidLabelOverlap: false,
128 label: {
129 show: false,
130 position: "center",
131 },
132 emphasis: {
133 label: {
134 show: true,
135 fontSize: "30",
136 fontWeight: "bold",
137 },
138 },
139 labelLine: {
140 show: false,
141 },
142 data: [
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 },
150 ],
151 };
152 },
153
154 handleSearch() {},
155 },
156 };
157 </script>
158 <style scoped lang="scss">
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
188 }
189 }
190 }
191 </style>
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
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="yhjgba">
8 <el-empty description="正在开发"></el-empty> 8 <el-row :gutter="8">
9 <el-col :span="12">
10 <el-card
11 shadow="hover"
12 :body-style="{ padding: '0' }"
13 style="height: 270px"
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: 270px"
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: 270px"
40 >
41 <div slot="header" class="flexst">
42 <h5 class="title">根据收件人统计分析收件</h5>
43 </div>
44 <djlx/>
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: 270px"
53 >
54 <div slot="header" class="flexst">
55 <h5 class="title">收件日统计</h5>
56 </div>
57 <ul class="workbench flexst"></ul>
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: 270px"
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: 270px"
79 >
80 <div slot="header" class="flexst">
81 <h5 class="title">收件月统计</h5>
82 </div>
83 <ul class="workbench flexst"></ul>
84 </el-card>
85 </el-col>
86 </el-row>
9 </div> 87 </div>
10 </template> 88 </template>
11 <script> 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";
12 95
13 export default { 96 export default {
14 components: {}, 97 components: {djlx,zszl,qytj},
15 data () { 98 computed: {
99 ...mapGetters(["dictData", "transfer"]),
100 },
101 data() {
102 return {
103 queryForm: {},
104 tableList: [{ name: "111" }, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 23],
105 };
106 },
107 mounted() {
108 // 创建一个 ECharts 实例
109 this.chart = echarts.init(this.$refs.chart);
110 // 在 ECharts 实例中配置图表
111 this.chart.setOption(this.getOption());
112 },
113 methods: {
114 getOption() {
16 return { 115 return {
17 } 116
117 tooltip: {
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 };
151 },
152
153 handleSearch() {},
154 },
155 };
156 </script>
157 <style scoped lang="scss">
158 @import "~@/styles/mixin.scss";
159 /deep/.el-card__header {
160 padding: 8px 10px;
161 }
162
163 /deep/.el-card__body {
164 padding: 3px 10px 5px 10px;
165 overflow: hidden;
166 }
167 .yhjgba {
168 .el-col {
169 padding: 4px;
170 }
171 .inquire {
172 width: 100%;
173 height: 40px;
174 border: 1px solid rgb(184, 217, 243);
175 // background-color: rebeccapurple;
176 }
177 .concent {
178 width: 100%;
179 height: 300px;
180 display: flex;
181 .left {
182 width: 70%;
183 height: 200px;
184 }
185 .right {
186 width: 30%;
187 height: 200px;
18 } 188 }
19 } 189 }
20 </script>
21 <style scoped lang='scss'>
22 </style>
...\ No newline at end of file ...\ No newline at end of file
190 }
191 </style>
......