Skip to content

bdc / bdcjg-web

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

style:监控统计样式修改完成

1 parent 7c233183
Inline Side-by-side
Showing 11 changed files with 711 additions and 709 deletions
...@@ -190,6 +190,21 @@ ...@@ -190,6 +190,21 @@
190 } 190 }
191 } 191 }
192 192
193 .complex-header {
194 .el-table--border th.el-table__cell {
195 border-bottom: 1px solid #458ACF !important;
196 }
197
198 .el-table--border .el-table__cell {
199 border-right: 1px solid #458ACF !important;
200 }
201
202 .el-table--group,
203 .el-table--border {
204 border: 1px solid #458ACF !important;
205 }
206 }
207
193 .el-pagination.is-background .btn-prev, 208 .el-pagination.is-background .btn-prev,
194 .el-pagination.is-background .btn-next { 209 .el-pagination.is-background .btn-next {
195 @extend .bgc; 210 @extend .bgc;
......
...@@ -4,19 +4,19 @@ ...@@ -4,19 +4,19 @@
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="form" :model="form" label-width="100px"> 6 <el-form ref="form" :model="form" label-width="100px">
7 <el-form-item> 7 <el-form-item v-if="BASE_API.THEME == 'jg'">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </el-form-item> 9 </el-form-item>
10 <el-row> 10 <el-row>
11 <el-col :span="4"> 11 <el-col :span="4">
12 <el-form-item label="开始日期" prop="startTime"> 12 <el-form-item label="开始日期" prop="startTime" class="d-flex">
13 <el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期" 13 <el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期"
14 :picker-options="pickerOptionsStart" v-model="form.startTime" 14 :picker-options="pickerOptionsStart" v-model="form.startTime"
15 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> 15 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
16 </el-form-item> 16 </el-form-item>
17 </el-col> 17 </el-col>
18 <el-col :span="4"> 18 <el-col :span="4">
19 <el-form-item label="结束日期" prop="endTime"> 19 <el-form-item label="结束日期" prop="endTime" class="d-flex">
20 <el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期" 20 <el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期"
21 :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss" 21 :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss"
22 @change="endTimeChange"></el-date-picker> 22 @change="endTimeChange"></el-date-picker>
...@@ -39,322 +39,322 @@ ...@@ -39,322 +39,322 @@
39 </div> 39 </div>
40 </template> 40 </template>
41 <script> 41 <script>
42 import { mapGetters } from "vuex"; 42 import { mapGetters } from "vuex";
43 import efficient from "@/api/efficient"; 43 import efficient from "@/api/efficient";
44 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation"; 44 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
45 export default { 45 export default {
46 name: "jktj", 46 name: "jktj",
47 data () { 47 data () {
48 return { 48 return {
49 // 开始日期限制 49 // 开始日期限制
50 pickerOptionsStart: { 50 pickerOptionsStart: {
51 disabledDate: (time) => { 51 disabledDate: (time) => {
52 if (this.form.endTime) { 52 if (this.form.endTime) {
53 return time.getTime() > new Date(this.form.endTime).getTime(); 53 return time.getTime() > new Date(this.form.endTime).getTime();
54 } 54 }
55 },
56 },
57 // 结束日期限制
58 pickerOptionsEnd: {
59 disabledDate: (time) => {
60 if (this.form.startTime) {
61 return time.getTime() < new Date(this.form.startTime).getTime();
62 }
63 },
64 }, 55 },
65 form: { 56 },
66 startTime: getFirstDayOfSeason(), 57 // 结束日期限制
67 endTime: timeFormat(new Date(), true), 58 pickerOptionsEnd: {
59 disabledDate: (time) => {
60 if (this.form.startTime) {
61 return time.getTime() < new Date(this.form.startTime).getTime();
62 }
68 }, 63 },
69 // 搜索表单 64 },
70 pieChartsData: [], 65 form: {
71 }; 66 startTime: getFirstDayOfSeason(),
67 endTime: timeFormat(new Date(), true),
68 },
69 // 搜索表单
70 pieChartsData: [],
71 };
72 },
73 created () { },
74 mounted () {
75 this.getProcessCounts();
76 },
77 computed: {
78 ...mapGetters(["dicData"]),
79 },
80 methods: {
81 endTimeChange (val) {
82 this.form.endTime = timeFormat(new Date(val), true);
72 }, 83 },
73 created () { }, 84 //查询各区县办件数量
74 mounted () { 85 async getProcessCounts () {
75 this.getProcessCounts(); 86 this.pieChartsData = [];
87 let { result: res } = await efficient.getProcessCounts(
88 this.form.startTime,
89 this.form.endTime
90 );
91 //获取图表配置项需要的数据
92 res.length > 0 &&
93 res.forEach((item) => {
94 this.pieChartsData.push({
95 //登记数量
96 value: item.counts,
97 //登记数量
98 name: item.recTypeName,
99 //登记类型代码
100 groupId: item.recType,
101 });
102 });
103 res.length &&
104 this.$nextTick(() => {
105 // 初始化图表
106 this.echartInit();
107 this.barChartInit(res[0].recType);
108 });
76 }, 109 },
77 computed: { 110 // 重置
78 ...mapGetters(["dicData"]), 111 resetForm () {
112 this.form = {
113 startTime: getFirstDayOfSeason(),
114 endTime: timeFormat(new Date(), true),
115 };
116 this.getProcessCounts();
79 }, 117 },
80 methods: { 118 //玫瑰图初始化
81 endTimeChange (val) { 119 echartInit () {
82 this.form.endTime = timeFormat(new Date(val), true); 120 let _this = this;
83 }, 121 // 基于准备好的dom，初始化echarts实例
84 //查询各区县办件数量 122 let myChart = this.$echarts.init(document.getElementById("myChart"));
85 async getProcessCounts () { 123 // 绘制图表
86 this.pieChartsData = []; 124 myChart.setOption({
87 let { result: res } = await efficient.getProcessCounts( 125 legend: {
88 this.form.startTime, 126 bottom: "2%",
89 this.form.endTime 127 left: "center",
90 ); 128 textStyle: {
91 //获取图表配置项需要的数据 129 color: "#fff",
92 res.length > 0 &&
93 res.forEach((item) => {
94 this.pieChartsData.push({
95 //登记数量
96 value: item.counts,
97 //登记数量
98 name: item.recTypeName,
99 //登记类型代码
100 groupId: item.recType,
101 });
102 });
103 res.length &&
104 this.$nextTick(() => {
105 // 初始化图表
106 this.echartInit();
107 this.barChartInit(res[0].recType);
108 });
109 },
110 // 重置
111 resetForm () {
112 this.form = {
113 startTime: getFirstDayOfSeason(),
114 endTime: timeFormat(new Date(), true),
115 };
116 this.getProcessCounts();
117 },
118 //玫瑰图初始化
119 echartInit () {
120 let _this = this;
121 // 基于准备好的dom，初始化echarts实例
122 let myChart = this.$echarts.init(document.getElementById("myChart"));
123 // 绘制图表
124 myChart.setOption({
125 legend: {
126 bottom: "2%",
127 left: "center",
128 textStyle: {
129 color: "#fff",
130 },
131 },
132 tooltip: {
133 trigger: "item",
134 formatter: "{b} : {c}",
135 }, 130 },
136 label: { 131 },
137 color: 'inherit', 132 tooltip: {
138 }, 133 trigger: "item",
139 series: [ 134 formatter: "{b} : {c}",
140 { 135 },
141 name: "各业务类型办理数量", 136 label: {
142 type: "pie", 137 color: 'inherit',
143 radius: [0, 250], 138 },
144 center: ["50%", "45%"], 139 series: [
145 roseType: "area", 140 {
146 itemStyle: { 141 name: "各业务类型办理数量",
147 borderRadius: 8, 142 type: "pie",
148 }, 143 radius: [0, 250],
149 data: this.pieChartsData, 144 center: ["50%", "45%"],
145 roseType: "area",
146 itemStyle: {
147 borderRadius: 8,
150 }, 148 },
151 ], 149 data: this.pieChartsData,
152 }); 150 },
153 //添加点击事件 151 ],
154 myChart.on("click", function (param) { 152 });
155 _this.barChartInit(param.data.groupId); 153 //添加点击事件
156 }); 154 myChart.on("click", function (param) {
157 //默认选中第一个 155 _this.barChartInit(param.data.groupId);
158 let index = 1; 156 });
159 myChart.dispatchAction({ 157 //默认选中第一个
160 type: "highlight", 158 let index = 1;
161 seriesIndex: 0, 159 myChart.dispatchAction({
162 dataIndex: 0, 160 type: "highlight",
163 }); 161 seriesIndex: 0,
164 myChart.on("mouseover", function (e) { 162 dataIndex: 0,
165 if (e.dataIndex != index) { 163 });
166 myChart.dispatchAction({ 164 myChart.on("mouseover", function (e) {
167 type: "downplay", 165 if (e.dataIndex != index) {
168 seriesIndex: 0,
169 dataIndex: index,
170 });
171 }
172 });
173 myChart.on("mouseout", function (e) {
174 index = e.dataIndex;
175 myChart.dispatchAction({ 166 myChart.dispatchAction({
176 type: "highlight", 167 type: "downplay",
177 seriesIndex: 0, 168 seriesIndex: 0,
178 dataIndex: e.dataIndex, 169 dataIndex: index,
179 }); 170 });
171 }
172 });
173 myChart.on("mouseout", function (e) {
174 index = e.dataIndex;
175 myChart.dispatchAction({
176 type: "highlight",
177 seriesIndex: 0,
178 dataIndex: e.dataIndex,
180 }); 179 });
181 }, 180 });
182 //柱图初始化 181 },
183 async barChartInit (recType) { 182 //柱图初始化
184 //请求recType对应业务的各区县数据 183 async barChartInit (recType) {
185 let { result: res } = await efficient.getProcessDays( 184 //请求recType对应业务的各区县数据
186 recType, 185 let { result: res } = await efficient.getProcessDays(
187 this.form.startTime, 186 recType,
188 this.form.endTime 187 this.form.startTime,
189 ); 188 this.form.endTime
190 //行政区数组 189 );
191 let xzqArr = []; 190 //行政区数组
192 this.dicData["A20"].forEach((item) => { 191 let xzqArr = [];
193 xzqArr.push(item.DNAME); 192 this.dicData["A20"].forEach((item) => {
194 let tempArr = res.filter((i) => { 193 xzqArr.push(item.DNAME);
195 return i.qxdm == item.DCODE; 194 let tempArr = res.filter((i) => {
196 }); 195 return i.qxdm == item.DCODE;
197 if (tempArr.length) {
198 item.avgDay = tempArr[0].avgDay;
199 item.maxDay = tempArr[0].maxDay;
200 item.minDay = tempArr[0].minDay;
201 } else {
202 item.avgDay = 0;
203 item.maxDay = 0;
204 item.minDay = 0;
205 }
206 }); 196 });
207 //补全无数据行政区后的结果数组 197 if (tempArr.length) {
208 let dealArr = [...this.dicData["A20"]]; 198 item.avgDay = tempArr[0].avgDay;
209 let myChartBar = this.$echarts.init( 199 item.maxDay = tempArr[0].maxDay;
210 document.getElementById("myChart-bar") 200 item.minDay = tempArr[0].minDay;
211 ); 201 } else {
212 myChartBar.setOption({ 202 item.avgDay = 0;
213 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"], 203 item.maxDay = 0;
214 tooltip: { 204 item.minDay = 0;
205 }
206 });
207 //补全无数据行政区后的结果数组
208 let dealArr = [...this.dicData["A20"]];
209 let myChartBar = this.$echarts.init(
210 document.getElementById("myChart-bar")
211 );
212 myChartBar.setOption({
213 color: ["#00bdb1", "#ff6e6e", "#3f99ff", "#ffaf48"],
214 tooltip: {
215 show: true,
216 trigger: "axis",
217 textStyle: {
218 fontSize: 16, // 字体大小
219 },
220 extraCssText: "width:220px;height:160px;", // 背景色
221 },
222 grid: {
223 top: 120,
224 },
225 legend: {
226 data: ["最短用时", "平均用时", "最长用时"],
227 top: 20,
228 textStyle: {
215 show: true, 229 show: true,
216 trigger: "axis", 230 color: "#fff",
217 textStyle: { 231 fontSize: "16",
218 fontSize: 16, // 字体大小
219 },
220 extraCssText: "width:220px;height:160px;", // 背景色
221 }, 232 },
222 grid: { 233 },
223 top: 120, 234 xAxis: [
235 {
236 type: "category",
237 data: xzqArr,
238 axisLabel: {
239 interval: 0,
240 textStyle: {
241 show: true,
242 color: "#fff",
243 fontSize: "16",
244 },
245 },
224 }, 246 },
225 legend: { 247 ],
226 data: ["最短用时", "平均用时", "最长用时"], 248 yAxis: [
227 top: 20, 249 {
228 textStyle: { 250 type: "value",
229 show: true, 251 name: "单位：天",
252 nameTextStyle: {
230 color: "#fff", 253 color: "#fff",
231 fontSize: "16", 254 fontSize: "16",
232 }, 255 },
233 }, 256 axisLabel: {
234 xAxis: [ 257 textStyle: {
235 { 258 show: true,
236 type: "category",
237 data: xzqArr,
238 axisLabel: {
239 interval: 0,
240 textStyle: {
241 show: true,
242 color: "#fff",
243 fontSize: "16",
244 },
245 },
246 },
247 ],
248 yAxis: [
249 {
250 type: "value",
251 name: "单位：天",
252 nameTextStyle: {
253 color: "#fff", 259 color: "#fff",
254 fontSize: "16", 260 fontSize: "16",
255 }, 261 },
256 axisLabel: {
257 textStyle: {
258 show: true,
259 color: "#fff",
260 fontSize: "16",
261 },
262 },
263 }, 262 },
264 ],
265 label: {
266 color: 'inherit',
267 }, 263 },
268 series: [ 264 ],
269 { 265 label: {
270 type: "bar", 266 color: 'inherit',
271 //显示数值 267 },
272 itemStyle: { 268 series: [
273 normal: { 269 {
274 label: { 270 type: "bar",
275 show: true, //开启显示 271 //显示数值
276 position: "top", //在上方显示 272 itemStyle: {
273 normal: {
274 label: {
275 show: true, //开启显示
276 position: "top", //在上方显示
277 277
278 },
279 }, 278 },
280 }, 279 },
281 barMaxWidth: "60",
282 name: "最短用时",
283 data: dealArr.map((item) => item.minDay),
284 }, 280 },
285 { 281 barMaxWidth: "60",
286 type: "bar", 282 name: "最短用时",
287 //显示数值 283 data: dealArr.map((item) => item.minDay),
288 itemStyle: { 284 },
289 normal: { 285 {
290 label: { 286 type: "bar",
291 show: true, //开启显示 287 //显示数值
292 position: "top", //在上方显示 288 itemStyle: {
289 normal: {
290 label: {
291 show: true, //开启显示
292 position: "top", //在上方显示
293 293
294 },
295 }, 294 },
296 }, 295 },
297 barMaxWidth: "60",
298 name: "平均用时",
299 data: dealArr.map((item) => item.avgDay),
300 }, 296 },
301 { 297 barMaxWidth: "60",
302 type: "bar", 298 name: "平均用时",
303 //显示数值 299 data: dealArr.map((item) => item.avgDay),
304 itemStyle: { 300 },
305 normal: { 301 {
306 label: { 302 type: "bar",
307 show: true, //开启显示 303 //显示数值
308 position: "top", //在上方显示 304 itemStyle: {
305 normal: {
306 label: {
307 show: true, //开启显示
308 position: "top", //在上方显示
309 309
310 },
311 }, 310 },
312 }, 311 },
313 barMaxWidth: "60",
314 name: "最长用时",
315 data: dealArr.map((item) => item.maxDay),
316 }, 312 },
317 ], 313 barMaxWidth: "60",
318 }); 314 name: "最长用时",
319 }, 315 data: dealArr.map((item) => item.maxDay),
316 },
317 ],
318 });
320 }, 319 },
321 }; 320 },
321 };
322 </script> 322 </script>
323 <style scoped lang="scss"> 323 <style scoped lang="scss">
324 .jktjDetail { 324 .jktjDetail {
325 height: 100%; 325 height: 100%;
326 display: flex; 326 display: flex;
327 flex-direction: column; 327 flex-direction: column;
328
329 .rows {
330 margin-left: 100px;
331 }
332 328
333 .center { 329 .rows {
334 line-height: 50vh; 330 margin-left: 100px;
335 text-align: center; 331 }
336 }
337 332
338 .echarts-box { 333 .center {
339 display: flex; 334 line-height: 50vh;
340 justify-content: center; 335 text-align: center;
336 }
341 337
342 .chart { 338 .echarts-box {
343 width: 40%; 339 display: flex;
344 height: 100%; 340 justify-content: center;
345 float: left;
346 }
347 341
348 .chart-bar { 342 .chart {
349 width: 60%; 343 width: 40%;
350 } 344 height: 100%;
345 float: left;
351 } 346 }
352 347
353 .form-clues-content { 348 .chart-bar {
354 flex: 1; 349 width: 60%;
355 height: 100%;
356 color: #b6b5b5;
357 } 350 }
358 } 351 }
352
353 .form-clues-content {
354 flex: 1;
355 height: 100%;
356 color: #b6b5b5;
357 }
358 }
359 </style> 359 </style>
360 360
......
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
3 <div class="jktjDetail form-clues"> 3 <div class="jktjDetail form-clues">
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="form" :model="form" label-width="100px"> 6 <el-form ref="form" :model="form" label-width="80px">
7 <el-form-item> 7 <el-form-item v-if="BASE_API.THEME=='jg'">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </el-form-item> 9 </el-form-item>
10 <el-row> 10 <el-row>
11 <el-col :span="4"> 11 <el-col :span="4">
12 <el-form-item label="行政区"> 12 <el-form-item label="行政区" class="d-flex">
13 <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区"> 13 <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区">
14 <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> 14 <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
15 </el-option> 15 </el-option>
...@@ -17,14 +17,14 @@ ...@@ -17,14 +17,14 @@
17 </el-form-item> 17 </el-form-item>
18 </el-col> 18 </el-col>
19 <el-col :span="4"> 19 <el-col :span="4">
20 <el-form-item label="开始日期" prop="startTime"> 20 <el-form-item label="开始日期" prop="startTime" class="d-flex">
21 <el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期" 21 <el-date-picker type="date" :clearable="false" class="width100" placeholder="开始日期"
22 :picker-options="pickerOptionsStart" v-model="form.startTime" 22 :picker-options="pickerOptionsStart" v-model="form.startTime"
23 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> 23 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
24 </el-form-item> 24 </el-form-item>
25 </el-col> 25 </el-col>
26 <el-col :span="4"> 26 <el-col :span="4">
27 <el-form-item label="结束日期" prop="endTime"> 27 <el-form-item label="结束日期" prop="endTime" class="d-flex">
28 <el-date-picker type="date" :clearable="false" class="width100" placeholder="结束日期" 28 <el-date-picker type="date" :clearable="false" class="width100" placeholder="结束日期"
29 :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss" 29 :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss"
30 @change="endTimeChange"></el-date-picker> 30 @change="endTimeChange"></el-date-picker>
...@@ -47,274 +47,274 @@ ...@@ -47,274 +47,274 @@
47 </template> 47 </template>
48 48
49 <script> 49 <script>
50 import { mapGetters } from "vuex"; 50 import { mapGetters } from "vuex";
51 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation"; 51 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
52 import business from "@/api/business"; 52 import business from "@/api/business";
53 export default { 53 export default {
54 name: "jktj", 54 name: "jktj",
55 data () { 55 data () {
56 return { 56 return {
57 // 开始日期限制 57 // 开始日期限制
58 pickerOptionsStart: { 58 pickerOptionsStart: {
59 disabledDate: (time) => { 59 disabledDate: (time) => {
60 if (this.form.endTime) { 60 if (this.form.endTime) {
61 return time.getTime() > new Date(this.form.endTime).getTime(); 61 return time.getTime() > new Date(this.form.endTime).getTime();
62 } 62 }
63 },
64 },
65 // 结束日期限制
66 pickerOptionsEnd: {
67 disabledDate: (time) => {
68 if (this.form.startTime) {
69 return time.getTime() < new Date(this.form.startTime).getTime();
70 }
71 },
72 }, 63 },
73 recTypeArr: [], 64 },
74 chartData: [], 65 // 结束日期限制
75 // 搜索表单 66 pickerOptionsEnd: {
76 form: { 67 disabledDate: (time) => {
77 startTime: getFirstDayOfSeason(), 68 if (this.form.startTime) {
78 endTime: timeFormat(new Date(), true), 69 return time.getTime() < new Date(this.form.startTime).getTime();
79 qxdm: "", 70 }
80 }, 71 },
81 interval: 50
82 };
83 },
84 mounted () {
85 // 查询成功率
86 this.getSuucessRate();
87 },
88 computed: {
89 ...mapGetters(["dicData"]),
90 },
91 methods: {
92 endTimeChange (val) {
93 this.form.endTime = timeFormat(new Date(val), true)
94 }, 72 },
95 async getSuucessRate () { 73 recTypeArr: [],
96 this.recTypeArr = []; 74 chartData: [],
97 this.chartData = []; 75 // 搜索表单
98 let { result: res } = await business.getSuucessRate( 76 form: {
99 this.form.startTime, 77 startTime: getFirstDayOfSeason(),
100 this.form.endTime, 78 endTime: timeFormat(new Date(), true),
101 this.form.qxdm 79 qxdm: "",
102 ); 80 },
103 this.chartData = res; 81 interval: 50
82 };
83 },
84 mounted () {
85 // 查询成功率
86 this.getSuucessRate();
87 },
88 computed: {
89 ...mapGetters(["dicData"]),
90 },
91 methods: {
92 endTimeChange (val) {
93 this.form.endTime = timeFormat(new Date(val), true)
94 },
95 async getSuucessRate () {
96 this.recTypeArr = [];
97 this.chartData = [];
98 let { result: res } = await business.getSuucessRate(
99 this.form.startTime,
100 this.form.endTime,
101 this.form.qxdm
102 );
103 this.chartData = res;
104 104
105 let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure })) 105 let maxData = Math.max.apply(Math, this.chartData.map(item => { return item.failure }))
106 this.interval = Math.ceil(maxData / 10) 106 this.interval = Math.ceil(maxData / 10)
107 //行政区代码过滤 107 //行政区代码过滤
108 res.length > 0 && 108 res.length > 0 &&
109 res.forEach((item) => { 109 res.forEach((item) => {
110 this.recTypeArr.push(item.recTypeName); 110 this.recTypeArr.push(item.recTypeName);
111 });
112 this.$nextTick(() => {
113 // 初始化图表
114 this.chartData.length && this.echartInit();
115 }); 111 });
116 }, 112 this.$nextTick(() => {
117 // 重置 113 // 初始化图表
118 resetForm () { 114 this.chartData.length && this.echartInit();
119 this.form = { 115 });
120 startTime: getFirstDayOfSeason(), 116 },
121 endTime: timeFormat(new Date(), true), 117 // 重置
122 qxdm: "", 118 resetForm () {
123 }; 119 this.form = {
124 this.getSuucessRate(); 120 startTime: getFirstDayOfSeason(),
125 }, 121 endTime: timeFormat(new Date(), true),
126 echartInit () { 122 qxdm: "",
127 let _this = this; 123 };
128 // 基于准备好的dom，初始化echarts实例 124 this.getSuucessRate();
129 let myChart = this.$echarts.init(document.getElementById("myChart")); 125 },
130 // 绘制图表 126 echartInit () {
131 myChart.setOption({ 127 let _this = this;
132 color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"], 128 // 基于准备好的dom，初始化echarts实例
133 tooltip: { 129 let myChart = this.$echarts.init(document.getElementById("myChart"));
134 trigger: "axis", 130 // 绘制图表
135 formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%', 131 myChart.setOption({
136 axisPointer: { 132 color: ["#13E5FF", "#C99E68", "#E873B2", "#ffaf48"],
137 type: "cross", 133 tooltip: {
138 crossStyle: { 134 trigger: "axis",
139 color: "#fff", 135 formatter: '{b}<br/>{a0}：{c0}个<br/>{a1}：{c1}个<br/>{a2}：{c2}%',
140 }, 136 axisPointer: {
141 }, 137 type: "cross",
142 }, 138 crossStyle: {
143 legend: {
144 data: ["成功", "失败", "成功率"],
145 top: '16',
146 textStyle: {
147 show: true,
148 color: "#fff", 139 color: "#fff",
149 fontSize: "16",
150 }, 140 },
151 }, 141 },
152 label: { 142 },
153 color: 'inherit', 143 legend: {
144 data: ["成功", "失败", "成功率"],
145 top: '16',
146 textStyle: {
147 show: true,
148 color: "#fff",
149 fontSize: "16",
154 }, 150 },
155 xAxis: [ 151 },
156 { 152 label: {
157 type: "category", 153 color: 'inherit',
158 data: _this.recTypeArr, 154 },
159 axisPointer: { 155 xAxis: [
160 type: "shadow", 156 {
157 type: "category",
158 data: _this.recTypeArr,
159 axisPointer: {
160 type: "shadow",
161 },
162 axisLabel: {
163 textStyle: {
164 show: true,
165 color: "#fff",
166 fontSize: "16",
161 }, 167 },
162 axisLabel: { 168 formatter: function (val) {
163 textStyle: { 169 let c = document.createElement("canvas");
164 show: true, 170 const ctx = c.getContext("2d");
165 color: "#fff", 171 const arr = val.split("");
166 fontSize: "16", 172 arr
167 }, 173 .map((item) => ctx.measureText(item).width)
168 formatter: function (val) { 174 .reduce((pre, next, index) => {
169 let c = document.createElement("canvas"); 175 const nLen = pre + next;
170 const ctx = c.getContext("2d"); 176 if (nLen > 40) {
171 const arr = val.split(""); 177 arr[index - 1] += "...";
172 arr 178 return next;
173 .map((item) => ctx.measureText(item).width) 179 } else {
174 .reduce((pre, next, index) => { 180 return nLen;
175 const nLen = pre + next; 181 }
176 if (nLen > 40) {
177 arr[index - 1] += "...";
178 return next;
179 } else {
180 return nLen;
181 }
182 });
183 c = null;
184 let ind = arr.findIndex((i) => {
185 return i.indexOf("...") > -1;
186 }); 182 });
187 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr; 183 c = null;
188 return newArr.join(""); 184 let ind = arr.findIndex((i) => {
189 }, 185 return i.indexOf("...") > -1;
186 });
187 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
188 return newArr.join("");
190 }, 189 },
191 }, 190 },
192 ], 191 },
193 yAxis: [ 192 ],
194 { 193 yAxis: [
195 type: "value", 194 {
196 name: "数量/个", 195 type: "value",
197 nameTextStyle: { 196 name: "数量/个",
197 nameTextStyle: {
198 color: "#fff",
199 fontSize: "16",
200 },
201 // interval: this.interval,
202 axisLabel: {
203 formatter: "{value}",
204 textStyle: {
205 show: true,
198 color: "#fff", 206 color: "#fff",
199 fontSize: "16", 207 fontSize: "16",
200 }, 208 },
201 // interval: this.interval,
202 axisLabel: {
203 formatter: "{value}",
204 textStyle: {
205 show: true,
206 color: "#fff",
207 fontSize: "16",
208 },
209 },
210 }, 209 },
211 { 210 },
212 type: "value", 211 {
213 name: "成功率", 212 type: "value",
214 nameTextStyle: { 213 name: "成功率",
214 nameTextStyle: {
215 color: "#fff",
216 fontSize: "16",
217 },
218 splitNumber: 2,
219 axisLabel: {
220 formatter: "{value} %",
221 textStyle: {
222 show: true,
215 color: "#fff", 223 color: "#fff",
216 fontSize: "16", 224 fontSize: "16",
217 }, 225 },
218 splitNumber: 2,
219 axisLabel: {
220 formatter: "{value} %",
221 textStyle: {
222 show: true,
223 color: "#fff",
224 fontSize: "16",
225 },
226 },
227 }, 226 },
228 ], 227 },
229 series: [ 228 ],
230 { 229 series: [
231 name: "成功", 230 {
232 type: "bar", 231 name: "成功",
233 //显示数值 232 type: "bar",
234 itemStyle: { 233 //显示数值
235 normal: { 234 itemStyle: {
236 label: { 235 normal: {
237 show: true, //开启显示 236 label: {
238 position: "top", //在上方显示 237 show: true, //开启显示
239 }, 238 position: "top", //在上方显示
240 }, 239 },
241 }, 240 },
242 barMaxWidth: '60',
243 data: this.chartData.map((item) => {
244 return item.success;
245 }),
246 }, 241 },
247 { 242 barMaxWidth: '60',
248 name: "失败", 243 data: this.chartData.map((item) => {
249 type: "bar", 244 return item.success;
250 //显示数值 245 }),
251 itemStyle: { 246 },
252 normal: { 247 {
253 label: { 248 name: "失败",
254 show: true, //开启显示 249 type: "bar",
255 position: "top", //在上方显示 250 //显示数值
256 }, 251 itemStyle: {
252 normal: {
253 label: {
254 show: true, //开启显示
255 position: "top", //在上方显示
257 }, 256 },
258 }, 257 },
259 barMaxWidth: '60',
260 data: this.chartData.map((item) => {
261 return item.failure;
262 }),
263 }, 258 },
264 { 259 barMaxWidth: '60',
265 name: "成功率", 260 data: this.chartData.map((item) => {
266 //显示数值 261 return item.failure;
267 itemStyle: { 262 }),
268 normal: { 263 },
269 label: { 264 {
270 show: true, //开启显示 265 name: "成功率",
271 position: "top", //在上方显示 266 //显示数值
272 }, 267 itemStyle: {
268 normal: {
269 label: {
270 show: true, //开启显示
271 position: "top", //在上方显示
273 }, 272 },
274 }, 273 },
275 type: "line",
276 barMaxWidth: '60',
277 yAxisIndex: 1,
278 data: this.chartData.map((item) => {
279 return item.rate;
280 }),
281 }, 274 },
282 ], 275 type: "line",
283 }); 276 barMaxWidth: '60',
284 }, 277 yAxisIndex: 1,
278 data: this.chartData.map((item) => {
279 return item.rate;
280 }),
281 },
282 ],
283 });
285 }, 284 },
286 }; 285 },
286 };
287 </script> 287 </script>
288 <style scoped lang="scss"> 288 <style scoped lang="scss">
289 .jktjDetail { 289 .jktjDetail {
290 height: 100%; 290 height: 100%;
291 display: flex; 291 display: flex;
292 flex-direction: column; 292 flex-direction: column;
293
294 .rows {
295 margin-left: 100px;
296 }
297 293
298 .center { 294 .rows {
299 line-height: 50vh; 295 margin-left: 100px;
300 text-align: center; 296 }
301 color: #b6b5b5;
302 }
303 297
304 .echarts-box { 298 .center {
305 display: flex; 299 line-height: 50vh;
306 justify-content: center; 300 text-align: center;
307 height: 500px; 301 color: #b6b5b5;
302 }
308 303
309 .chart { 304 .echarts-box {
310 width: 100%; 305 display: flex;
311 height: 100%; 306 justify-content: center;
312 } 307 height: 500px;
313 }
314 308
315 .form-clues-content { 309 .chart {
316 flex: 1; 310 width: 100%;
317 height: 100%; 311 height: 100%;
318 } 312 }
319 } 313 }
314
315 .form-clues-content {
316 flex: 1;
317 height: 100%;
318 }
319 }
320 </style> 320 </style>
......
...@@ -4,12 +4,12 @@ ...@@ -4,12 +4,12 @@
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="form" :model="form" label-width="100px"> 6 <el-form ref="form" :model="form" label-width="100px">
7 <el-form-item> 7 <el-form-item v-if="BASE_API.THEME == 'jg'">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </el-form-item> 9 </el-form-item>
10 <el-row> 10 <el-row>
11 <el-col :span="4"> 11 <el-col :span="4">
12 <el-form-item label="行政区"> 12 <el-form-item label="行政区" class="d-flex">
13 <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区"> 13 <el-select v-model="form.qxdm" class="width100" clearable placeholder="行政区">
14 <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE"> 14 <el-option v-for="item in dicData['A20']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
15 </el-option> 15 </el-option>
...@@ -17,14 +17,14 @@ ...@@ -17,14 +17,14 @@
17 </el-form-item> 17 </el-form-item>
18 </el-col> 18 </el-col>
19 <el-col :span="4"> 19 <el-col :span="4">
20 <el-form-item label="开始日期"> 20 <el-form-item label="开始日期" class="d-flex">
21 <el-date-picker class="width100" :clearable="false" type="date" placeholder="开始日期" 21 <el-date-picker class="width100" :clearable="false" type="date" placeholder="开始日期"
22 :picker-options="pickerOptionsStart" v-model="form.startTime" 22 :picker-options="pickerOptionsStart" v-model="form.startTime"
23 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> 23 value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
24 </el-form-item> 24 </el-form-item>
25 </el-col> 25 </el-col>
26 <el-col :span="4"> 26 <el-col :span="4">
27 <el-form-item label="结束日期"> 27 <el-form-item label="结束日期" class="d-flex">
28 <el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期" 28 <el-date-picker class="width100" :clearable="false" type="date" placeholder="结束日期"
29 :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss" 29 :picker-options="pickerOptionsEnd" v-model="form.endTime" value-format="yyyy-MM-dd HH:mm:ss"
30 @change="endTimeChange"></el-date-picker> 30 @change="endTimeChange"></el-date-picker>
...@@ -47,202 +47,202 @@ ...@@ -47,202 +47,202 @@
47 </template> 47 </template>
48 48
49 <script> 49 <script>
50 import { mapGetters } from "vuex"; 50 import { mapGetters } from "vuex";
51 import efficient from "@/api/efficient"; 51 import efficient from "@/api/efficient";
52 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation"; 52 import { getFirstDayOfSeason, timeFormat } from "@/utils/operation";
53 export default { 53 export default {
54 name: "jktj", 54 name: "jktj",
55 data () { 55 data () {
56 return { 56 return {
57 // 开始日期限制 57 // 开始日期限制
58 pickerOptionsStart: { 58 pickerOptionsStart: {
59 disabledDate: (time) => { 59 disabledDate: (time) => {
60 if (this.form.endTime) { 60 if (this.form.endTime) {
61 return time.getTime() > new Date(this.form.endTime).getTime(); 61 return time.getTime() > new Date(this.form.endTime).getTime();
62 } 62 }
63 },
64 },
65 // 结束日期限制
66 pickerOptionsEnd: {
67 disabledDate: (time) => {
68 if (this.form.startTime) {
69 return time.getTime() < new Date(this.form.startTime).getTime();
70 }
71 },
72 }, 63 },
73 // 搜索表单 64 },
74 valueTime: "", 65 // 结束日期限制
75 // 搜索表单 66 pickerOptionsEnd: {
76 form: { 67 disabledDate: (time) => {
77 startTime: getFirstDayOfSeason(), 68 if (this.form.startTime) {
78 endTime: timeFormat(new Date(), true), 69 return time.getTime() < new Date(this.form.startTime).getTime();
79 qxdm: "", 70 }
80 }, 71 },
81 chartData: [] 72 },
82 }; 73 // 搜索表单
74 valueTime: "",
75 // 搜索表单
76 form: {
77 startTime: getFirstDayOfSeason(),
78 endTime: timeFormat(new Date(), true),
79 qxdm: "",
80 },
81 chartData: []
82 };
83 },
84 mounted () {
85 // 查询业务量
86 this.getProcessCounts();
87 },
88 computed: {
89 ...mapGetters(["dicData"]),
90 },
91 methods: {
92 endTimeChange (val) {
93 this.form.endTime = timeFormat(new Date(val), true)
83 }, 94 },
84 mounted () { 95 async getProcessCounts () {
85 // 查询业务量 96 this.chartData = [];
86 this.getProcessCounts(); 97 let { result: res } = await efficient.getProcessCounts(
98 this.form.startTime,
99 this.form.endTime,
100 this.form.qxdm
101 );
102 //获取图表配置项需要的数据
103 this.chartData = res;
104 this.$nextTick(() => {
105 // 初始化图表
106 this.chartData.length && this.echartInit(this.chartData)
107 });
108
87 }, 109 },
88 computed: { 110 // 重置
89 ...mapGetters(["dicData"]), 111 resetForm () {
112 this.form = {
113 startTime: getFirstDayOfSeason(),
114 endTime: timeFormat(new Date(), true),
115 qxdm: ""
116 };
117 this.getProcessCounts();
90 }, 118 },
91 methods: { 119 //图表渲染
92 endTimeChange (val) { 120 echartInit (chartArr) {
93 this.form.endTime = timeFormat(new Date(val), true) 121 // 基于准备好的dom，初始化echarts实例
94 }, 122 let myChart = this.$echarts.init(document.getElementById("myChart"));
95 async getProcessCounts () { 123 // 绘制图表
96 this.chartData = []; 124 myChart.setOption({
97 let { result: res } = await efficient.getProcessCounts( 125 color: ["#13E5FF"],
98 this.form.startTime, 126 tooltip: {
99 this.form.endTime, 127 show: true,
100 this.form.qxdm 128 trigger: "axis",
101 ); 129 textStyle: {
102 //获取图表配置项需要的数据 130 fontSize: 16, // 字体大小
103 this.chartData = res;
104 this.$nextTick(() => {
105 // 初始化图表
106 this.chartData.length && this.echartInit(this.chartData)
107 });
108
109 },
110 // 重置
111 resetForm () {
112 this.form = {
113 startTime: getFirstDayOfSeason(),
114 endTime: timeFormat(new Date(), true),
115 qxdm: ""
116 };
117 this.getProcessCounts();
118 },
119 //图表渲染
120 echartInit (chartArr) {
121 // 基于准备好的dom，初始化echarts实例
122 let myChart = this.$echarts.init(document.getElementById("myChart"));
123 // 绘制图表
124 myChart.setOption({
125 color: ["#13E5FF"],
126 tooltip: {
127 show: true,
128 trigger: "axis",
129 textStyle: {
130 fontSize: 16, // 字体大小
131 },
132 },
133 grid: {
134 top: 120,
135 bottom: 100,
136 },
137 label: {
138 color: 'inherit',
139 }, 131 },
140 xAxis: [ 132 },
141 { 133 grid: {
142 type: "category", 134 top: 120,
143 data: chartArr.map(item => item.recTypeName), 135 bottom: 100,
144 axisLabel: { 136 },
145 interval: 0, 137 label: {
146 rotate: 40, 138 color: 'inherit',
147 formatter: function (val) { 139 },
148 let c = document.createElement("canvas"); 140 xAxis: [
149 const ctx = c.getContext("2d"); 141 {
150 const arr = val.split(""); 142 type: "category",
151 arr 143 data: chartArr.map(item => item.recTypeName),
152 .map((item) => ctx.measureText(item).width) 144 axisLabel: {
153 .reduce((pre, next, index) => { 145 interval: 0,
154 const nLen = pre + next; 146 rotate: 40,
155 if (nLen > 60) { 147 formatter: function (val) {
156 arr[index - 1] += "..."; 148 let c = document.createElement("canvas");
157 return next; 149 const ctx = c.getContext("2d");
158 } else { 150 const arr = val.split("");
159 return nLen; 151 arr
160 } 152 .map((item) => ctx.measureText(item).width)
161 }); 153 .reduce((pre, next, index) => {
162 c = null; 154 const nLen = pre + next;
163 let ind = arr.findIndex((i) => { 155 if (nLen > 60) {
164 return i.indexOf("...") > -1; 156 arr[index - 1] += "...";
157 return next;
158 } else {
159 return nLen;
160 }
165 }); 161 });
166 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr; 162 c = null;
167 return newArr.join(""); 163 let ind = arr.findIndex((i) => {
168 }, 164 return i.indexOf("...") > -1;
169 textStyle: { 165 });
170 show: true, 166 let newArr = ind > 0 ? arr.splice(0, ind + 1) : arr;
171 color: "#fff", 167 return newArr.join("");
172 fontSize: "16",
173 },
174 }, 168 },
175 }, 169 textStyle: {
176 ], 170 show: true,
177 yAxis: [
178 {
179 type: "value",
180 name: "数量/个",
181 nameTextStyle: {
182 color: "#fff", 171 color: "#fff",
183 fontSize: "16", 172 fontSize: "16",
184 }, 173 },
185 axisLabel: { 174 },
186 textStyle: { 175 },
187 show: true, 176 ],
188 color: "#fff", 177 yAxis: [
189 fontSize: "16", 178 {
190 }, 179 type: "value",
180 name: "数量/个",
181 nameTextStyle: {
182 color: "#fff",
183 fontSize: "16",
184 },
185 axisLabel: {
186 textStyle: {
187 show: true,
188 color: "#fff",
189 fontSize: "16",
191 }, 190 },
192 }, 191 },
193 ], 192 },
193 ],
194 194
195 series: [ 195 series: [
196 { 196 {
197 type: "bar", 197 type: "bar",
198 //显示数值 198 //显示数值
199 itemStyle: { 199 itemStyle: {
200 normal: { 200 normal: {
201 label: { 201 label: {
202 show: true, //开启显示 202 show: true, //开启显示
203 position: "top", //在上方显示 203 position: "top", //在上方显示
204 },
205 }, 204 },
206 }, 205 },
207 barMaxWidth: '60',
208 data: chartArr.map(item => item.counts),
209 }, 206 },
210 ], 207 barMaxWidth: '60',
211 }); 208 data: chartArr.map(item => item.counts),
212 }, 209 },
210 ],
211 });
213 }, 212 },
214 }; 213 },
214 };
215 </script> 215 </script>
216 <style scoped lang="scss"> 216 <style scoped lang="scss">
217 .jktjDetail { 217 .jktjDetail {
218 height: 100%; 218 height: 100%;
219 display: flex; 219 display: flex;
220 flex-direction: column; 220 flex-direction: column;
221
222 .rows {
223 margin-left: 100px;
224 }
225 221
226 .center { 222 .rows {
227 line-height: 50vh; 223 margin-left: 100px;
228 text-align: center; 224 }
229 color: #b6b5b5;
230 }
231 225
232 .echarts-box { 226 .center {
233 display: flex; 227 line-height: 50vh;
234 justify-content: center; 228 text-align: center;
235 height: 500px; 229 color: #b6b5b5;
230 }
236 231
237 .chart { 232 .echarts-box {
238 width: 100%; 233 display: flex;
239 height: 100%; 234 justify-content: center;
240 } 235 height: 500px;
241 }
242 236
243 .form-clues-content { 237 .chart {
244 flex: 1; 238 width: 100%;
245 height: 100%; 239 height: 100%;
246 } 240 }
247 } 241 }
242
243 .form-clues-content {
244 flex: 1;
245 height: 100%;
246 }
247 }
248 </style> 248 </style>
......
1 /deep/.el-table--border th.el-table__cell {
2 border-bottom: 1px solid #458ACF !important;
3 }
4
5 /deep/.el-table--border .el-table__cell {
6 border-right: 1px solid #458ACF !important;
7 }
8
9 /deep/.el-table thead.is-group th.el-table__cell { 1 /deep/.el-table thead.is-group th.el-table__cell {
10 background-color: transparent !important; 2 background-color: transparent !important;
11 } 3 }
...@@ -17,9 +9,4 @@ ...@@ -17,9 +9,4 @@
17 9
18 .export-excel-wrapper { 10 .export-excel-wrapper {
19 display: inline-block; 11 display: inline-block;
20 }
21
22 /deep/.el-table--group,
23 .el-table--border {
24 border: 1px solid #458ACF !important;
25 } 12 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="ruleForm" :model="form" label-width="100px"> 6 <el-form ref="ruleForm" :model="form" label-width="100px">
7 <el-form-item> 7 <el-form-item v-if="BASE_API.THEME == 'jg'">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </el-form-item> 9 </el-form-item>
10 <el-row class="mb-5"> 10 <el-row class="mb-5">
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
32 </el-form> 32 </el-form>
33 </div> 33 </div>
34 <!-- 列表区域 --> 34 <!-- 列表区域 -->
35 <div class="from-clues-content"> 35 <div class="from-clues-content complex-header">
36 <lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="200" :pagination="false" 36 <lb-table ref="table" :header-cell-style="headerStyle1" :calcHeight="200" :pagination="false"
37 :column="tableData.columns" :data="tableData.data"> 37 :column="tableData.columns" :data="tableData.data">
38 </lb-table> 38 </lb-table>
...@@ -171,6 +171,7 @@ export default { ...@@ -171,6 +171,7 @@ export default {
171 </script> 171 </script>
172 <style scoped lang="scss"> 172 <style scoped lang="scss">
173 @import "../css/index.scss"; 173 @import "../css/index.scss";
174
174 /deep/th.el-table__cell { 175 /deep/th.el-table__cell {
175 height: 0 !important; 176 height: 0 !important;
176 } 177 }
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
4 <!-- 头部搜索 --> 4 <!-- 头部搜索 -->
5 <div class="from-clues-header"> 5 <div class="from-clues-header">
6 <el-form ref="ruleForm" :model="form" label-width="100px"> 6 <el-form ref="ruleForm" :model="form" label-width="100px">
7 <el-form-item> 7 <el-form-item v-if="BASE_API.THEME == 'jg'">
8 <Breadcrumb /> 8 <Breadcrumb />
9 </el-form-item> 9 </el-form-item>
10 <el-row class="mb-5"> 10 <el-row class="mb-5">
...@@ -33,10 +33,9 @@ ...@@ -33,10 +33,9 @@
33 </el-form> 33 </el-form>
34 </div> 34 </div>
35 <!-- 列表区域 --> 35 <!-- 列表区域 -->
36 <div class="from-clues-content"> 36 <div class="from-clues-content complex-header">
37 <lb-table ref="table" :pagination="false" :calcHeight="200" :column="tableData.columns" :data="tableData.data"> 37 <lb-table ref="table" :pagination="false" :calcHeight="200" :column="tableData.columns" :data="tableData.data">
38 </lb-table> 38 </lb-table>
39
40 <down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :pagination="false" 39 <down-lb-table ref="table" v-show="false" :id="'mytable'" :downExcel="true" :pagination="false"
41 :column="tableData.columns" :data="tableData.data" :downTitle="downTitle"> 40 :column="tableData.columns" :data="tableData.data" :downTitle="downTitle">
42 </down-lb-table> 41 </down-lb-table>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: yangwei 2 * @Author: yangwei
3 * @Date: 2023-02-17 16:32:50 3 * @Date: 2023-02-17 16:32:50
4 * @LastEditors: Please set LastEditors 4 * @LastEditors: Please set LastEditors
5 * @LastEditTime: 2023-03-15 10:42:21 5 * @LastEditTime: 2023-03-27 14:58:51
6 * @FilePath: \bdcjg-web\src\views\statistics\registerBookQuality\index.vue 6 * @FilePath: \bdcjg-web\src\views\statistics\registerBookQuality\index.vue
7 * @Description: 7 * @Description:
8 * 8 *
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
14 <!-- 头部搜索 --> 14 <!-- 头部搜索 -->
15 <div class="from-clues-header"> 15 <div class="from-clues-header">
16 <el-form ref="ruleForm" :model="form" label-width="100px"> 16 <el-form ref="ruleForm" :model="form" label-width="100px">
17 <el-form-item> 17 <el-form-item v-if="BASE_API.THEME == 'jg'">
18 <Breadcrumb /> 18 <Breadcrumb />
19 </el-form-item> 19 </el-form-item>
20 <el-row class="mb-5"> 20 <el-row class="mb-5">
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
42 </el-form> 42 </el-form>
43 </div> 43 </div>
44 <!-- 列表区域 --> 44 <!-- 列表区域 -->
45 <div class="from-clues-content"> 45 <div class="from-clues-content complex-header">
46 <lb-table ref="table" :pagination="false" :border="true" :calcHeight="200" :header-cell-style="headerStyle" 46 <lb-table ref="table" :pagination="false" :border="true" :calcHeight="200" :header-cell-style="headerStyle"
47 :column="tableData.columns" :data="tableData.data"> 47 :column="tableData.columns" :data="tableData.data">
48 </lb-table> 48 </lb-table>
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 <el-input v-model.trim="form.menuName" class="width100" clearable placeholder="菜单名称"></el-input> 11 <el-input v-model.trim="form.menuName" class="width100" clearable placeholder="菜单名称"></el-input>
12 </el-form-item> 12 </el-form-item>
13 </el-col> 13 </el-col>
14 <el-col :span="3" class="btnColRight"> 14 <el-col :span="20" class="btnColRight">
15 <btn nativeType="cx" @click="searchQuery">查询</btn> 15 <btn nativeType="cx" @click="searchQuery">查询</btn>
16 <btn nativeType="cx" @click="handleAdd()">新增菜单</btn> 16 <btn nativeType="cx" @click="handleAdd()">新增菜单</btn>
17 </el-col> 17 </el-col>
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
11 <el-input v-model.trim="form.rolesName" class="width100" clearable placeholder="角色名称"></el-input> 11 <el-input v-model.trim="form.rolesName" class="width100" clearable placeholder="角色名称"></el-input>
12 </el-form-item> 12 </el-form-item>
13 </el-col> 13 </el-col>
14 <el-col :span="3" class="btnColRight"> 14 <el-col :span="20" class="btnColRight">
15 <btn nativeType="cx" @click="searchQuery">查询</btn> 15 <btn nativeType="cx" @click="searchQuery">查询</btn>
16 <btn nativeType="cx" @click="handleAddEdit">增加角色</btn> 16 <btn nativeType="cx" @click="handleAddEdit">增加角色</btn>
17 </el-col> 17 </el-col>
......
1 <template> 1 <template>
2 <div class="timedTask from-clues"> 2 <div class="timedTask from-clues">
3 <div class="from-clues-header"> 3 <div class="from-clues-header">
4 <el-form ref="ruleForm" :model="form" label-width="100px"> 4 <el-form ref="ruleForm" :model="form" label-width="80px">
5 <el-form-item v-if="BASE_API.THEME == 'jg'"> 5 <el-form-item v-if="BASE_API.THEME == 'jg'">
6 <Breadcrumb /> 6 <Breadcrumb />
7 </el-form-item> 7 </el-form-item>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 </el-form-item> 22 </el-form-item>
23 </el-col> 23 </el-col>
24 <!-- 操作按钮 --> 24 <!-- 操作按钮 -->
25 <el-col :span="3" class="btnColRight"> 25 <el-col :span="12" class="btnColRight">
26 <btn nativeType="cx" @click="getTableList">查询</btn> 26 <btn nativeType="cx" @click="getTableList">查询</btn>
27 <btn nativeType="cx" @click="handleAdd">添加人员</btn> 27 <btn nativeType="cx" @click="handleAdd">添加人员</btn>
28 </el-col> 28 </el-col>
......