safecheck-client 3.0.33-34 → 3.0.33-35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/package.json +133 -133
  2. package/src/App.vue +31 -31
  3. package/src/filiale/hanzhong/pc/CheckHiddenDanger.vue +713 -703
  4. package/src/filiale/hanzhong/pc/CheckSafeDetail.vue +573 -563
  5. package/src/filiale/hanzhong/pc/CheckSafeStatus.vue +508 -499
  6. package/src/filiale/hanzhong/pc/CheckerSafeDetail.vue +595 -586
  7. package/src/main.js +33 -33
package/src/filiale/hanzhong/pc/CheckHiddenDanger.vue CHANGED
@@ -1,703 +1,713 @@
1
- <template lang="html">
2
- <div class="div-4">
3
- <div :style="{height:headheight,background:'#eaeff4'}" style="width:100%">
4
- <div class="div-2">
5
- <div class="form-group">
6
- <label v-show="full_screen" class="control-label">安检类型</label>
7
- <v-select v-show="full_screen" :value.sync="plan_type"
8
- :value-single="true"
9
- :options='plan_types' close-on-select clear-button> </v-select>
10
- <button class="but-1" @click="barrdios" v-show="full_screen"><img src='../../../assets/echarts6.png' class="img-1"/>&nbsp;全屏显示
11
- </button>
12
- <button @click="showall" v-show="show_all" class="but-2">返回</button>
13
- </div>
14
- </div>
15
- </div>
16
- <div v-bind:style="{height: barheight,width:'100%'}">
17
- <div class="flex-row" style="height: 90%;">
18
- <div class="span">
19
- <div class="form-inline" v-if="echartsshow" style="height: auto;margin-bottom: 5%;margin-top: 5%">
20
- <div class="form-group">
21
- <label for="startDate">开始日期:</label>
22
- <datepicker id="startDate" placeholder="开始日期"
23
- v-model="startDate"
24
- :value.sync="startDate"
25
- :disabled-days-of-Week="[]"
26
- :format="'yyyy-MM-dd'"
27
- :show-reset-button="reset">
28
- </datepicker>
29
- </div>
30
- <div class="form-group">
31
- <label for="endDate">截至日期:</label>
32
- <datepicker id="endDate" placeholder="结束日期"
33
- v-model="endDate"
34
- v-show="show_all"
35
- :value.sync="endDate"
36
- :disabled-days-of-Week="[]"
37
- :format="'yyyy-MM-dd'"
38
- :show-reset-button="reset">
39
- </datepicker>
40
- </div>
41
- <div class="form-group">
42
- <label class="control-label">安检类型</label>
43
- <v-select :value.sync="plan_type"
44
- :value-single="true"
45
- :options='plan_types' close-on-select clear-button> </v-select>
46
- </div>
47
- </div>
48
-
49
- <div id="hidden" style="width:45%;float:left;"></div>
50
- <div id="hiddenlevel" style="width: 45%;float:right;margin-left:-5px;"></div>
51
- </div>
52
-
53
- <!--调用子组件绘图查表-->
54
- <div v-show="echartsshow" style="overflow:scroll">
55
- <div class="div-3">
56
- <h4 v-if="plan_type == ''" align="center">隐患及整改率率一览表</h4>
57
- <h4 v-if="plan_type == 'false'" align="center">年度安检隐患及整改率率一览表</h4>
58
- <h4 v-if="plan_type == 'true'" align="center">首次通气隐患及整改率率一览表</h4>
59
- <criteria-paged :model="model1" v-ref:crip2 >
60
- <data-grid :model="model" partial='list' v-ref:grid2 classname="table table-bordered table table-hover">
61
- <template partial='head'>
62
- <tr>
63
- <th><nobr>分公司</nobr></th>
64
- <th><nobr>A</nobr></th>
65
- <th><nobr>B</nobr></th>
66
- <th><nobr>C</nobr></th>
67
- <th><nobr>A整改</nobr></th>
68
- <th><nobr>B整改</nobr></th>
69
- <th><nobr>C整改</nobr></th>
70
- </tr>
71
- </template>
72
- <template partial='body' >
73
- <tr class="tr-1">
74
- <td class="td-1" style="text-align: center;">
75
- {{row.f_subcompany}}
76
- </td>
77
- <td class="td-1" style="text-align: center;">
78
- {{row.a}}
79
- </td>
80
- <td class="td-1" style="text-align: center;">
81
- {{row.b}}
82
- </td>
83
- <td class="td-1" style="text-align: center;">
84
- {{row.c}}
85
- </td>
86
- <td class="td-1" style="text-align: center;">
87
- {{row.ac}}
88
- </td>
89
- <td class="td-1" style="text-align: center;">
90
- {{row.bc}}
91
- </td>
92
- <td class="td-1" style="text-align: center;">
93
- {{row.cc}}
94
- </td>
95
- </tr>
96
- </template>
97
- <template partial='foot'>
98
- <tr>
99
- <td colspan="1" style="text-align: right">合计：</td>
100
- <td style="text-align: center"><nobr>{{model.sums.a}}</nobr></td>
101
- <td style="text-align: center"><nobr>{{model.sums.b}}</nobr></td>
102
- <td style="text-align: center"><nobr>{{model.sums.c}}</nobr></td>
103
- <td style="text-align: center"><nobr>{{model.sums.ac}}</nobr></td>
104
- <td style="text-align: center"><nobr>{{model.sums.bc}}</nobr></td>
105
- <td style="text-align: center"><nobr>{{model.sums.cc}}</nobr></td>
106
- </tr>
107
- </template>
108
- </data-grid>
109
- </criteria-paged>
110
- </div>
111
-
112
- <div class="div-3" style="margin-top: 10%">
113
- <h4 align="center" v-if="plan_type == ''">安检状态一览表</h4>
114
- <h4 align="center" v-if="plan_type == 'false'">年度安检状态一览表</h4>
115
- <h4 align="center" v-if="plan_type == 'true'">首次通气安检状态一览表</h4>
116
- <criteria-paged :model="model" v-ref:crip >
117
- <data-grid :model="model" partial='list' id="datagridstyle1" v-ref:grid1 classname="table table-bordered table table-hover">
118
- <template partial='head'>
119
- <tr>
120
- <th><nobr>分公司</nobr></th>
121
- <th><nobr>入户</nobr></th>
122
- <th><nobr>入户(在用)</nobr></th>
123
- <th><nobr>入户(未用)</nobr></th>
124
- <th><nobr>到访不遇</nobr></th>
125
- <th><nobr>拒检</nobr></th>
126
- <th><nobr>小计</nobr></th>
127
- </tr>
128
- </template>
129
- <template partial='body' >
130
- <tr class="tr-1">
131
- <td class="td-1" style="text-align: center;">
132
- {{row.f_subcompany}}
133
- </td>
134
- <td class="td-1" style="text-align: center;">
135
- {{row.rh+row.wsy}}
136
- </td>
137
- <td class="td-1" style="text-align: center;">
138
- {{row.rh}}
139
- </td>
140
- <td class="td-1" style="text-align: center;">
141
- {{row.wsy}}
142
- </td>
143
- <td class="td-1" style="text-align: center;">
144
- {{row.dfby}}
145
- </td>
146
- <td class="td-1" style="text-align: center;">
147
- {{row.jj}}
148
- </td>
149
- <td class="td-1" style="text-align: center;">
150
- {{row.rh+row.dfby+row.jj+row.wsy}}
151
- </td>
152
- </tr>
153
- </template>
154
- <template partial='foot'>
155
- <tr>
156
- <td colspan="1" style="text-align: right">合计：</td>
157
- <td style="text-align: center"><nobr>{{model.sums.rh + model.sums.wsy}}</nobr></td>
158
- <td style="text-align: center"><nobr>{{model.sums.rh}}</nobr></td>
159
- <td style="text-align: center"><nobr>{{model.sums.wsy}}</nobr></td>
160
- <td style="text-align: center"><nobr>{{model.sums.dfby}}</nobr></td>
161
- <td style="text-align: center"><nobr>{{model.sums.jj}}</nobr></td>
162
- <td style="text-align: center"><nobr>{{model.sums.rh+model.sums.dfby+model.sums.jj+model.sums.wsy}}</nobr></td>
163
- </tr>
164
- </template>
165
- </data-grid>
166
- </criteria-paged>
167
- </div>
168
-
169
- </div>
170
-
171
- </div>
172
- </div>
173
- </div>
174
- </template>
175
-
176
- <script>
177
- import * as Util from '../../Util'
178
- import co from 'co'
179
- import echarts from 'echarts'
180
- import {HttpResetClass} from 'vue-client'
181
- import {PagedList} from 'vue-client'
182
-
183
- //后台查询数据
184
- let getData = function* (self) {
185
- let load = new HttpResetClass()
186
- load.load('POST', 'rs/sql/CheckStatusQuery', {data: {startDate:self.startDate,f_orgstr: self.orgid, endDate: self.endDate,plan_type:self.plan_type}},
187
- {resolveMsg: null, rejectMsg: null})
188
- .then((res) => {
189
- let echartData = res.data
190
-
191
- var legendname = []
192
- echartData.forEach(function (items) {
193
- legendname.push(items.name)
194
- })
195
-
196
- self.setSafe(echartData, legendname)
197
- self.setstatustable()
198
- })
199
-
200
- }
201
-
202
-
203
- let getData1 = function* (self) {
204
- let Http = new HttpResetClass()
205
- Http.load('POST','rs/sql/HiddenLevel', {data: {startDate:self.startDate,f_orgstr: self.orgid, endDate: self.endDate,plan_type:self.plan_type}},
206
- {resolveMsg: null, rejectMsg: null})
207
- .then((res) => {
208
- let legendname = [] //分类名,横坐标分类,隐患级别
209
- let metaDate = [] //二维数组 2*n 第一行为当前级别隐患总数,第二行为当前级别整改数
210
- let scaledata = [] //整改率
211
-
212
- let d1=[] // 隐患数
213
- let d2=[] //整改数
214
- //数据处理
215
- res.data.forEach(function (s) {
216
- legendname.push(s.name)
217
- d1.push(s.value)
218
- d2.push(s.change)
219
- var h=(s.change/s.value).toFixed(3)
220
- scaledata.push(h)
221
- })
222
- metaDate.push(d1)
223
- metaDate.push(d2)
224
- //掉绘图
225
- self.setBar(legendname,metaDate,scaledata)
226
- self.setleveltable()
227
- })
228
- }
229
-
230
- export default {
231
- name: "hidden-danger",
232
-
233
- data() {
234
- return {
235
- full_screen: true,//控制全屏按键显示状态
236
- show_all: false,//控制返回按键显示状态
237
- //控制图表的显示状态
238
- echartsshow: false,
239
- barshow: true,
240
- detailshows: true,
241
-
242
- //控制图表的style
243
- barheight: '88.37%',
244
- headheight: '11.61%',
245
- styledate: {
246
- echartsheight: '95%',
247
- echartsfloat: 'none',
248
- },
249
- echartswidth: '95%',
250
- barshowid: '1',
251
- model:new PagedList(),
252
- model1:new PagedList(),
253
- orgid: `('${this.$login.f.orgid}')`,
254
- f: this.$login.f,
255
- chosenOrg: {
256
- id: 0
257
- },
258
- startDate:(new Date()).getFullYear()+'-01-01',
259
- endDate: Util.toStandardDateString(),
260
- xc: '',
261
- plan_types:[{label:'全部',value:''},{label:'年度安检单',value:'false'},{label:'首次通气单',value:'true'}],
262
- plan_type:''
263
- }
264
- },
265
- props:{
266
- f_filialeids:{
267
- type:String
268
- }
269
- },
270
- methods: {
271
- barrdios() {//全屏按键事件
272
- console.log("全屏显示事件")
273
- this.barshow = true
274
- this.detailshows = false
275
- this.echartsshow = true
276
- this.show_all = true
277
- this.full_screen = false
278
- this.buttonshow = true
279
- this.showdetail = false
280
- this.styledate.echartsfloat = 'left'
281
- this.styledate.echartsheight = '65%'
282
- this.echartswidth = '50%'
283
- this.headheight = '8%'
284
- this.$parent.echarts = '4'
285
- this.$emit('echarts-changed')
286
- this.newecharts = true
287
-
288
- console.log(this.$parent.echarts, '主图状态')
289
- },
290
- showall() {//返回按键事件
291
- //修改显示状态
292
- this.barshow = false
293
- this.detailshows = true
294
- this.echartsshow = false
295
- this.buttonshow = false
296
- this.newecharts = false
297
- this.show_all = false
298
- this.full_screen = true
299
- this.showdetail = false
300
- this.styledate.echartsheight = '95%'
301
- this.echartswidth = '95%'
302
- this.$parent.echarts = -1
303
- this.headheight = '11.61%'
304
- this.$emit('echarts-changed', this.echarts)
305
- },
306
- setstatustable() {
307
- this.model = new PagedList('rs/sql/QueryCheckStatus', 20, {startDate: 'this.startDate',endDate: 'this.endDate', orgid: 'this.orgid',plan_type:'this.plan_type'},{rh:'',dfby:'',wsy:'',jj:''})
308
- this.model.startDate = this.startDate
309
- this.model.endDate = this.endDate
310
- this.model.orgid = this.orgid
311
- this.model.plan_type = this.plan_type
312
- this.model.search('1=1')
313
- },
314
- setleveltable() {
315
- this.model1 = new PagedList('rs/sql/QueryHiddenLevel', 20, {startDate: 'this.startDate',endDate: 'this.endDate', orgid: 'this.orgid',plan_type:'this.plan_type'},{a:'',b:'',c:'',ac:'',bc:'',cc:''})
316
- this.model1.startDate = this.startDate
317
- this.model1.endDate = this.endDate
318
- this.model1.orgid = this.orgid
319
- this.model1.plan_type = this.plan_type
320
- this.model1.search('1=1')
321
- },
322
- //隐患饼状图
323
- setSafe(echartData,legendname) {
324
- this.xc = echarts.init(document.getElementById('hidden'))
325
- var rich = {
326
- yellow: {
327
- color: "#ffc72b",
328
- fontSize: 12 * scale,
329
- padding: [5, 4],
330
- align: 'center'
331
- },
332
- total: {
333
- color: "#8ee6de",
334
- fontSize: 12 * scale,
335
- align: 'center',
336
- confine:true
337
- },
338
- white: {
339
- color: "#fff",
340
- align: 'center',
341
- fontSize: 12 * scale,
342
- padding: [11, 0, 11, 0]
343
- },
344
- blue: {
345
- color: '#6f8ba8',
346
- fontSize: 8 * scale,
347
- align: 'center',
348
- padding: [10, 0]
349
- },
350
- hr: {
351
- borderColor: '#ffffff',
352
- width: '100%',
353
- borderWidth: 0.5,
354
- height: 0,
355
- },
356
- }
357
- var scale = 0.8
358
- var total = 0; //安检总量
359
- echartData.forEach(function (value) {
360
- total = eval(total + '+' + value.value)
361
- });
362
- this.xc.setOption({
363
- title: [
364
- {
365
- text: '安检总量',
366
- x: '40%',
367
- y: '40%',
368
- textStyle: {
369
- color: '#6f8ba8',
370
- fontSize: 12 * scale,
371
- }
372
- },
373
- {
374
- text: total,
375
- x: '38%',
376
- y: '45%',
377
- padding: [15, 20],
378
- textStyle: {
379
- color: '#8ee6de',
380
- fontSize: 12 * scale,
381
- }
382
- }],
383
- legend: {
384
- orient: 'horizontal',
385
- icon: 'circle',
386
- x: 'right',
387
- right: 5,
388
- top: 20,
389
- itemWidth: 20 * scale,
390
- itemHeight: 10 * scale,
391
- textStyle: {
392
- fontSize: 12 * scale,
393
- padding: [0, 0, 0, 4],
394
- color: '#6f8ba8'
395
- },
396
- data: legendname
397
- },
398
- series: [{
399
- name: '安检总量',
400
- type: 'pie',
401
- radius: '40%',
402
- center: ['50%', '50%'],
403
- hoverAnimation: false,
404
- color: ['#8ee6de', '#fbd85f', '#9bb5eb','#38dcad'],
405
- label: {
406
- normal: {
407
- borderWidth: 20 * scale,
408
- borderRadius: 4,
409
- lineHeight:6,
410
- formatter: function (params, ticket, callback) {
411
- var total = 0; //隐患总数
412
- var percent = 0;
413
- echartData.forEach(function (value, index, array) {
414
- total += value.value;
415
- });
416
- percent = ((params.value / total) * 100).toFixed(1);
417
- return '{blue|' + params.name + '}\n{hr|}\n{total|' + params.value + '}{blue|\n\n}{yellow|' + percent + '%' + '}';
418
- },
419
- rich: rich,
420
- }
421
- },
422
- labelLine: {
423
- normal: {
424
- lineStyle: {
425
- formatter: function (params, ticket, callback) {
426
- var total = 0; //隐患总数
427
- var percent = 0; //用户占比
428
- echartData.forEach(function (value, index, array) {
429
- total += value.value;
430
- });
431
- percent = ((params.value / total) * 100).toFixed(1);
432
- return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
433
- },
434
- }
435
- }
436
- },
437
- data: echartData
438
- }]
439
- }, true)
440
- },
441
-
442
- setBar(legendname,metaDate,scaledata) {
443
- this.xc1 = echarts.init(document.getElementById('hiddenlevel'))
444
-
445
- let serieData = [{ //绘图数据
446
- name: '隐患总数',
447
- type: "bar",
448
- barWidth: '20%',
449
- barGap: "0",
450
- itemStyle: {
451
- normal: {
452
- barBorderRadius: 15,
453
- borderColor: '#00c0e9',
454
- color: '#fff',
455
- label: {
456
- show: true,
457
- textStyle: {
458
- color: "#4a7cae"
459
- },
460
- position: "top",
461
- formatter: function (p) {
462
- return p.value > 0 ? (p.value) : '';
463
- }
464
- }
465
- }
466
- },
467
- data: metaDate[0],
468
- },
469
- { //绘图数据
470
- name: '整改数',
471
- type: "bar",
472
- barWidth: '20%',
473
- barGap: "-100%",
474
- itemStyle: {
475
- normal: {
476
- barBorderRadius: 15,
477
- color: '#00c0e9',
478
- label: {
479
- show: true,
480
- textStyle: {
481
- color: "#4a7cae"
482
- },
483
- position: "insideTop",
484
- formatter: function (p) {
485
- return p.value > 0 ? (p.value) : '';
486
- }
487
- }
488
- }
489
- },
490
- data: metaDate[1],
491
- }]
492
-
493
-
494
- this.xc1.setOption({
495
- title: {
496
- text: '',
497
- x: '30%',
498
- textStyle: {color: "#333333", fontSize: "16", fontWeight: "normal"}
499
- },
500
- color: ['#3398DB'],
501
- tooltip: {
502
- trigger: 'axis',
503
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
504
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
505
- },
506
- formatter: function (params) {
507
- if (params[0].axisValue == '') {
508
- return ''
509
- }
510
- var result = ''
511
- params.forEach(function (item) {
512
- result += item.seriesName + " : " + item.value + "</br>";
513
- });
514
- var h=eval(scaledata[params[0].dataIndex]*100).toString()
515
-
516
- return result+"整改率:"+h+'%'
517
- },
518
- extraCssText: 'width: 60%;height: 30%;'
519
- },
520
- grid: {
521
- left: '2%',
522
- right: '20%',
523
- bottom: '8%',
524
- containLabel: true
525
- },
526
- xAxis: [
527
- {
528
- type: 'category',
529
- name: "隐患等级",
530
- nameTextStyle: {color: "#6f8ba8"},
531
- axisTick: {
532
- alignWithLabel: true
533
- },
534
- axisLine: {show: true,lineStyle :{color:'#999999'}},
535
- axisLabel: {show: true, textStyle: {color: "#6f8ba8"}},
536
- data: legendname
537
- }
538
- ],
539
- yAxis: [{
540
- type: "value",
541
- name: "数量",
542
- nameTextStyle: {color: "#6f8ba8"},
543
- splitLine: {show: true,lineStyle:{type:'dashed',color:'#e1e1e1'}},
544
- axisTick: {show: true},
545
- axisLine: {show: true,lineStyle :{color:'#999999'}},
546
- axisLabel: {show: true, textStyle: {color: "#6f8ba8"}}
547
- }],
548
- series: serieData
549
- }, true)
550
- },
551
- searchdata () {
552
- let getGen =getData(this)
553
- co(getGen)
554
- },
555
- searchdata1 () {
556
- let getGen =getData1(this)
557
- co(getGen)
558
- }
559
- },
560
- ready () {
561
- // this.orgid = `('${this.$login.f.orgid}')`
562
- // this.searchdata()
563
- // this.searchdata1()
564
- },
565
- watch: {
566
- 'startDate' (val) {
567
- console.log("我是watch")
568
- this.searchdata()
569
- this.searchdata1()
570
- },
571
- 'endDate' (val) {
572
- console.log("我是watch")
573
- this.searchdata()
574
- this.searchdata1()
575
- },
576
- 'plan_type' (val) {
577
- console.log("我是watch")
578
- this.searchdata()
579
- this.searchdata1()
580
- },
581
- 'f_filialeids'(){
582
- console.log('hidden改变了')
583
- this.orgid = this.f_filialeids
584
- this.searchdata()
585
- this.searchdata1()
586
- }
587
- }
588
- }
589
- </script>
590
- <style scoped>
591
- .div-1 {
592
- height: 85%;
593
- width: 10%;
594
- margin-left: 5%;
595
- float: left;
596
- margin-top: 1%;
597
- }
598
-
599
- .div-2 {
600
- float: right;
601
- width: 80%;
602
- height: 55.56%;
603
- margin-right: 1%;
604
- margin-top: 0.5%;
605
- }
606
-
607
- .div-3 {
608
- float: left;
609
- margin-left: 2%;
610
- padding-top: 2%;
611
- width: 96%;
612
- height: 99%;
613
- }
614
-
615
- .div-4 {
616
- background-color: #fafafa;
617
- }
618
-
619
- table {
620
- height: 100%;
621
- width: 100%;
622
- font-size: 12px
623
- }
624
-
625
- tr {
626
- height: 25%;
627
- width: 100%
628
- }
629
-
630
- td {
631
- width: 11%;
632
- font-size: 12px;
633
- color: #666666;
634
- }
635
-
636
- .td-1 {
637
- width: 16%;
638
- color: #90addf;
639
- font-size: 12px
640
- }
641
-
642
- .td-2 {
643
- width: 15%;
644
- color: #90addf;
645
- font-size: 12px
646
- }
647
-
648
- span {
649
- color: #90addf;
650
- font-size: 12px
651
- }
652
-
653
- .span-1 {
654
- color: #999999;
655
- font-size: 12px
656
- }
657
-
658
- .p-1 {
659
- font-size: 15px;
660
- height: 99%;
661
- width: 99%;
662
- font-weight: bold;
663
- color: #333333;
664
- }
665
-
666
- button {
667
- width: 10%;
668
- margin-top: 0%;
669
- margin-left: 2%;
670
- float: right;
671
- background-color: #73ca73;
672
- border-radius: 4px;
673
- border: 1px solid #73ca73;
674
- color: #ffffff;
675
- font-size: 15px;
676
- height: 120%;
677
- }
678
-
679
- .but-1 {
680
- width: 17%;
681
- float: right;
682
- border-radius: 4px;
683
- font-size: 12px;
684
- height: 130%;
685
- }
686
-
687
- .but-2 {
688
- background-color: #88b5e2;
689
- border: #88b5e2;
690
- width: 6%;
691
- }
692
-
693
- img {
694
- width: 5px;
695
- height: 18px;
696
- }
697
-
698
- .img-1 {
699
- height: 12px;
700
- width: auto;
701
- }
702
-
703
- </style>
1
+ <template lang="html">
2
+ <div class="div-4">
3
+ <div :style="{height:headheight,background:'#eaeff4'}" style="width:100%">
4
+ <div class="div-2">
5
+ <div class="form-group">
6
+ <label v-show="full_screen" class="control-label">安检类型</label>
7
+ <v-select v-show="full_screen" :value.sync="plan_type"
8
+ :value-single="true"
9
+ :options='plan_types' close-on-select clear-button> </v-select>
10
+ <button class="but-1" @click="barrdios" v-show="full_screen"><img src='../../../assets/echarts6.png' class="img-1"/>&nbsp;全屏显示
11
+ </button>
12
+ <button @click="showall" v-show="show_all" class="but-2">返回</button>
13
+ </div>
14
+ </div>
15
+ </div>
16
+ <div v-bind:style="{height: barheight,width:'100%'}">
17
+ <div class="flex-row" style="height: 90%;">
18
+ <div class="span">
19
+ <div class="form-inline" v-if="echartsshow" style="height: auto;margin-bottom: 5%;margin-top: 5%">
20
+ <div class="form-group">
21
+ <label for="startDate">开始日期:</label>
22
+ <datepicker id="startDate" placeholder="开始日期"
23
+ v-model="startDate"
24
+ :value.sync="startDate"
25
+ :disabled-days-of-Week="[]"
26
+ :format="'yyyy-MM-dd'"
27
+ :show-reset-button="reset">
28
+ </datepicker>
29
+ </div>
30
+ <div class="form-group">
31
+ <label for="endDate">截至日期:</label>
32
+ <datepicker id="endDate" placeholder="结束日期"
33
+ v-model="endDate"
34
+ v-show="show_all"
35
+ :value.sync="endDate"
36
+ :disabled-days-of-Week="[]"
37
+ :format="'yyyy-MM-dd'"
38
+ :show-reset-button="reset">
39
+ </datepicker>
40
+ </div>
41
+ <div class="form-group">
42
+ <label class="control-label">安检类型</label>
43
+ <v-select :value.sync="plan_type"
44
+ :value-single="true"
45
+ :options='plan_types' close-on-select clear-button> </v-select>
46
+ </div>
47
+ </div>
48
+
49
+ <div id="hidden" style="width:45%;float:left;"></div>
50
+ <div id="hiddenlevel" style="width: 45%;float:right;margin-left:-5px;"></div>
51
+ </div>
52
+
53
+ <!--调用子组件绘图查表-->
54
+ <div v-show="echartsshow" style="overflow:scroll">
55
+ <div class="div-3">
56
+ <h4 v-if="plan_type == ''" align="center">隐患及整改率率一览表</h4>
57
+ <h4 v-if="plan_type == 'false'" align="center">年度安检隐患及整改率率一览表</h4>
58
+ <h4 v-if="plan_type == 'true'" align="center">首次通气隐患及整改率率一览表</h4>
59
+ <criteria-paged :model="model1" v-ref:crip2 >
60
+ <data-grid :model="model" partial='list' v-ref:grid2 classname="table table-bordered table table-hover">
61
+ <template partial='head'>
62
+ <tr>
63
+ <th><nobr>分公司</nobr></th>
64
+ <th><nobr>A</nobr></th>
65
+ <th><nobr>B</nobr></th>
66
+ <th><nobr>C</nobr></th>
67
+ <th><nobr>A整改</nobr></th>
68
+ <th><nobr>B整改</nobr></th>
69
+ <th><nobr>C整改</nobr></th>
70
+ </tr>
71
+ </template>
72
+ <template partial='body' >
73
+ <tr class="tr-1">
74
+ <td class="td-1" style="text-align: center;">
75
+ {{row.f_subcompany}}
76
+ </td>
77
+ <td class="td-1" style="text-align: center;">
78
+ {{row.a}}
79
+ </td>
80
+ <td class="td-1" style="text-align: center;">
81
+ {{row.b}}
82
+ </td>
83
+ <td class="td-1" style="text-align: center;">
84
+ {{row.c}}
85
+ </td>
86
+ <td class="td-1" style="text-align: center;">
87
+ {{row.ac}}
88
+ </td>
89
+ <td class="td-1" style="text-align: center;">
90
+ {{row.bc}}
91
+ </td>
92
+ <td class="td-1" style="text-align: center;">
93
+ {{row.cc}}
94
+ </td>
95
+ </tr>
96
+ </template>
97
+ <template partial='foot'>
98
+ <tr>
99
+ <td colspan="1" style="text-align: right">合计：</td>
100
+ <td style="text-align: center"><nobr>{{model.sums.a}}</nobr></td>
101
+ <td style="text-align: center"><nobr>{{model.sums.b}}</nobr></td>
102
+ <td style="text-align: center"><nobr>{{model.sums.c}}</nobr></td>
103
+ <td style="text-align: center"><nobr>{{model.sums.ac}}</nobr></td>
104
+ <td style="text-align: center"><nobr>{{model.sums.bc}}</nobr></td>
105
+ <td style="text-align: center"><nobr>{{model.sums.cc}}</nobr></td>
106
+ </tr>
107
+ </template>
108
+ </data-grid>
109
+ </criteria-paged>
110
+ </div>
111
+
112
+ <div class="div-3" style="margin-top: 10%">
113
+ <h4 align="center" v-if="plan_type == ''">安检状态一览表</h4>
114
+ <h4 align="center" v-if="plan_type == 'false'">年度安检状态一览表</h4>
115
+ <h4 align="center" v-if="plan_type == 'true'">首次通气安检状态一览表</h4>
116
+ <criteria-paged :model="model" v-ref:crip >
117
+ <data-grid :model="model" partial='list' id="datagridstyle1" v-ref:grid1 classname="table table-bordered table table-hover">
118
+ <template partial='head'>
119
+ <tr>
120
+ <th><nobr>分公司</nobr></th>
121
+ <th><nobr>入户</nobr></th>
122
+ <th><nobr>入户(在用)</nobr></th>
123
+ <th><nobr>入户(未用)</nobr></th>
124
+ <th><nobr>到访不遇</nobr></th>
125
+ <th><nobr>拒检</nobr></th>
126
+ <th><nobr>小计</nobr></th>
127
+ </tr>
128
+ </template>
129
+ <template partial='body' >
130
+ <tr class="tr-1">
131
+ <td class="td-1" style="text-align: center;">
132
+ {{row.f_subcompany}}
133
+ </td>
134
+ <td class="td-1" style="text-align: center;">
135
+ {{row.rh+row.wsy}}
136
+ </td>
137
+ <td class="td-1" style="text-align: center;">
138
+ {{row.rh}}
139
+ </td>
140
+ <td class="td-1" style="text-align: center;">
141
+ {{row.wsy}}
142
+ </td>
143
+ <td class="td-1" style="text-align: center;">
144
+ {{row.dfby}}
145
+ </td>
146
+ <td class="td-1" style="text-align: center;">
147
+ {{row.jj}}
148
+ </td>
149
+ <td class="td-1" style="text-align: center;">
150
+ {{row.rh+row.dfby+row.jj+row.wsy}}
151
+ </td>
152
+ </tr>
153
+ </template>
154
+ <template partial='foot'>
155
+ <tr>
156
+ <td colspan="1" style="text-align: right">合计：</td>
157
+ <td style="text-align: center"><nobr>{{model.sums.rh + model.sums.wsy}}</nobr></td>
158
+ <td style="text-align: center"><nobr>{{model.sums.rh}}</nobr></td>
159
+ <td style="text-align: center"><nobr>{{model.sums.wsy}}</nobr></td>
160
+ <td style="text-align: center"><nobr>{{model.sums.dfby}}</nobr></td>
161
+ <td style="text-align: center"><nobr>{{model.sums.jj}}</nobr></td>
162
+ <td style="text-align: center"><nobr>{{model.sums.rh+model.sums.dfby+model.sums.jj+model.sums.wsy}}</nobr></td>
163
+ </tr>
164
+ </template>
165
+ </data-grid>
166
+ </criteria-paged>
167
+ </div>
168
+
169
+ </div>
170
+
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </template>
175
+
176
+ <script>
177
+ import * as Util from '../../Util'
178
+ import co from 'co'
179
+ import echarts from 'echarts'
180
+ import {HttpResetClass} from 'vue-client'
181
+ import {PagedList} from 'vue-client'
182
+
183
+ //后台查询数据
184
+ let getData = function* (self) {
185
+ let load = new HttpResetClass()
186
+ load.load('POST', 'rs/sql/CheckStatusQuery', {data: {startDate:self.startDate,f_orgstr: self.orgid, endDate: self.endDate,plan_type:self.plan_type,f_safecheck_type:self.f_safecheck_type}},
187
+ {resolveMsg: null, rejectMsg: null})
188
+ .then((res) => {
189
+ let echartData = res.data
190
+
191
+ var legendname = []
192
+ echartData.forEach(function (items) {
193
+ legendname.push(items.name)
194
+ })
195
+
196
+ self.setSafe(echartData, legendname)
197
+ self.setstatustable()
198
+ })
199
+
200
+ }
201
+
202
+
203
+ let getData1 = function* (self) {
204
+ let Http = new HttpResetClass()
205
+ Http.load('POST','rs/sql/HiddenLevel', {data: {startDate:self.startDate,f_orgstr: self.orgid, endDate: self.endDate,plan_type:self.plan_type,f_safecheck_type:self.f_safecheck_type}},
206
+ {resolveMsg: null, rejectMsg: null})
207
+ .then((res) => {
208
+ let legendname = [] //分类名,横坐标分类,隐患级别
209
+ let metaDate = [] //二维数组 2*n 第一行为当前级别隐患总数,第二行为当前级别整改数
210
+ let scaledata = [] //整改率
211
+
212
+ let d1=[] // 隐患数
213
+ let d2=[] //整改数
214
+ //数据处理
215
+ res.data.forEach(function (s) {
216
+ legendname.push(s.name)
217
+ d1.push(s.value)
218
+ d2.push(s.change)
219
+ var h=(s.change/s.value).toFixed(3)
220
+ scaledata.push(h)
221
+ })
222
+ metaDate.push(d1)
223
+ metaDate.push(d2)
224
+ //掉绘图
225
+ self.setBar(legendname,metaDate,scaledata)
226
+ self.setleveltable()
227
+ })
228
+ }
229
+
230
+ export default {
231
+ name: "hidden-danger",
232
+
233
+ data() {
234
+ return {
235
+ full_screen: true,//控制全屏按键显示状态
236
+ show_all: false,//控制返回按键显示状态
237
+ //控制图表的显示状态
238
+ echartsshow: false,
239
+ barshow: true,
240
+ detailshows: true,
241
+
242
+ //控制图表的style
243
+ barheight: '88.37%',
244
+ headheight: '11.61%',
245
+ styledate: {
246
+ echartsheight: '95%',
247
+ echartsfloat: 'none',
248
+ },
249
+ echartswidth: '95%',
250
+ barshowid: '1',
251
+ model:new PagedList(),
252
+ model1:new PagedList(),
253
+ orgid: `('${this.$login.f.orgid}')`,
254
+ f: this.$login.f,
255
+ chosenOrg: {
256
+ id: 0
257
+ },
258
+ startDate:(new Date()).getFullYear()+'-01-01',
259
+ endDate: Util.toStandardDateString(),
260
+ xc: '',
261
+ plan_types:[{label:'全部',value:''},{label:'年度安检单',value:'false'},{label:'首次通气单',value:'true'}],
262
+ plan_type:'',
263
+ f_safecheck_type:''
264
+ }
265
+ },
266
+ props:{
267
+ f_filialeids:{
268
+ type:String
269
+ }
270
+ },
271
+ methods: {
272
+ barrdios() {//全屏按键事件
273
+ console.log("全屏显示事件")
274
+ this.barshow = true
275
+ this.detailshows = false
276
+ this.echartsshow = true
277
+ this.show_all = true
278
+ this.full_screen = false
279
+ this.buttonshow = true
280
+ this.showdetail = false
281
+ this.styledate.echartsfloat = 'left'
282
+ this.styledate.echartsheight = '65%'
283
+ this.echartswidth = '50%'
284
+ this.headheight = '8%'
285
+ this.$parent.echarts = '4'
286
+ this.$emit('echarts-changed')
287
+ this.newecharts = true
288
+
289
+ console.log(this.$parent.echarts, '主图状态')
290
+ },
291
+ showall() {//返回按键事件
292
+ //修改显示状态
293
+ this.barshow = false
294
+ this.detailshows = true
295
+ this.echartsshow = false
296
+ this.buttonshow = false
297
+ this.newecharts = false
298
+ this.show_all = false
299
+ this.full_screen = true
300
+ this.showdetail = false
301
+ this.styledate.echartsheight = '95%'
302
+ this.echartswidth = '95%'
303
+ this.$parent.echarts = -1
304
+ this.headheight = '11.61%'
305
+ this.$emit('echarts-changed', this.echarts)
306
+ },
307
+ setstatustable() {
308
+ this.model = new PagedList('rs/sql/QueryCheckStatus', 20, {startDate: 'this.startDate',endDate: 'this.endDate', orgid: 'this.orgid',plan_type:'this.plan_type',f_safecheck_type: 'this.f_safecheck_type'},{rh:'',dfby:'',wsy:'',jj:''})
309
+ this.model.startDate = this.startDate
310
+ this.model.endDate = this.endDate
311
+ this.model.orgid = this.orgid
312
+ this.model.plan_type = this.plan_type
313
+ this.model.f_safecheck_type = this.f_safecheck_type
314
+ this.model.search('1=1')
315
+ },
316
+ setleveltable() {
317
+ this.model1 = new PagedList('rs/sql/QueryHiddenLevel', 20, {startDate: 'this.startDate',endDate: 'this.endDate', orgid: 'this.orgid',plan_type:'this.plan_type',f_safecheck_type: 'this.f_safecheck_type'},{a:'',b:'',c:'',ac:'',bc:'',cc:''})
318
+ this.model1.startDate = this.startDate
319
+ this.model1.endDate = this.endDate
320
+ this.model1.orgid = this.orgid
321
+ this.model1.plan_type = this.plan_type
322
+ this.model1.f_safecheck_type = this.f_safecheck_type
323
+ this.model1.search('1=1')
324
+ },
325
+ //隐患饼状图
326
+ setSafe(echartData,legendname) {
327
+ this.xc = echarts.init(document.getElementById('hidden'))
328
+ var rich = {
329
+ yellow: {
330
+ color: "#ffc72b",
331
+ fontSize: 12 * scale,
332
+ padding: [5, 4],
333
+ align: 'center'
334
+ },
335
+ total: {
336
+ color: "#8ee6de",
337
+ fontSize: 12 * scale,
338
+ align: 'center',
339
+ confine:true
340
+ },
341
+ white: {
342
+ color: "#fff",
343
+ align: 'center',
344
+ fontSize: 12 * scale,
345
+ padding: [11, 0, 11, 0]
346
+ },
347
+ blue: {
348
+ color: '#6f8ba8',
349
+ fontSize: 8 * scale,
350
+ align: 'center',
351
+ padding: [10, 0]
352
+ },
353
+ hr: {
354
+ borderColor: '#ffffff',
355
+ width: '100%',
356
+ borderWidth: 0.5,
357
+ height: 0,
358
+ },
359
+ }
360
+ var scale = 0.8
361
+ var total = 0; //安检总量
362
+ echartData.forEach(function (value) {
363
+ total = eval(total + '+' + value.value)
364
+ });
365
+ this.xc.setOption({
366
+ title: [
367
+ {
368
+ text: '安检总量',
369
+ x: '40%',
370
+ y: '40%',
371
+ textStyle: {
372
+ color: '#6f8ba8',
373
+ fontSize: 12 * scale,
374
+ }
375
+ },
376
+ {
377
+ text: total,
378
+ x: '38%',
379
+ y: '45%',
380
+ padding: [15, 20],
381
+ textStyle: {
382
+ color: '#8ee6de',
383
+ fontSize: 12 * scale,
384
+ }
385
+ }],
386
+ legend: {
387
+ orient: 'horizontal',
388
+ icon: 'circle',
389
+ x: 'right',
390
+ right: 5,
391
+ top: 20,
392
+ itemWidth: 20 * scale,
393
+ itemHeight: 10 * scale,
394
+ textStyle: {
395
+ fontSize: 12 * scale,
396
+ padding: [0, 0, 0, 4],
397
+ color: '#6f8ba8'
398
+ },
399
+ data: legendname
400
+ },
401
+ series: [{
402
+ name: '安检总量',
403
+ type: 'pie',
404
+ radius: '40%',
405
+ center: ['50%', '50%'],
406
+ hoverAnimation: false,
407
+ color: ['#8ee6de', '#fbd85f', '#9bb5eb','#38dcad'],
408
+ label: {
409
+ normal: {
410
+ borderWidth: 20 * scale,
411
+ borderRadius: 4,
412
+ lineHeight:6,
413
+ formatter: function (params, ticket, callback) {
414
+ var total = 0; //隐患总数
415
+ var percent = 0;
416
+ echartData.forEach(function (value, index, array) {
417
+ total += value.value;
418
+ });
419
+ percent = ((params.value / total) * 100).toFixed(1);
420
+ return '{blue|' + params.name + '}\n{hr|}\n{total|' + params.value + '}{blue|\n\n}{yellow|' + percent + '%' + '}';
421
+ },
422
+ rich: rich,
423
+ }
424
+ },
425
+ labelLine: {
426
+ normal: {
427
+ lineStyle: {
428
+ formatter: function (params, ticket, callback) {
429
+ var total = 0; //隐患总数
430
+ var percent = 0; //用户占比
431
+ echartData.forEach(function (value, index, array) {
432
+ total += value.value;
433
+ });
434
+ percent = ((params.value / total) * 100).toFixed(1);
435
+ return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
436
+ },
437
+ }
438
+ }
439
+ },
440
+ data: echartData
441
+ }]
442
+ }, true)
443
+ },
444
+
445
+ setBar(legendname,metaDate,scaledata) {
446
+ this.xc1 = echarts.init(document.getElementById('hiddenlevel'))
447
+
448
+ let serieData = [{ //绘图数据
449
+ name: '隐患总数',
450
+ type: "bar",
451
+ barWidth: '20%',
452
+ barGap: "0",
453
+ itemStyle: {
454
+ normal: {
455
+ barBorderRadius: 15,
456
+ borderColor: '#00c0e9',
457
+ color: '#fff',
458
+ label: {
459
+ show: true,
460
+ textStyle: {
461
+ color: "#4a7cae"
462
+ },
463
+ position: "top",
464
+ formatter: function (p) {
465
+ return p.value > 0 ? (p.value) : '';
466
+ }
467
+ }
468
+ }
469
+ },
470
+ data: metaDate[0],
471
+ },
472
+ { //绘图数据
473
+ name: '整改数',
474
+ type: "bar",
475
+ barWidth: '20%',
476
+ barGap: "-100%",
477
+ itemStyle: {
478
+ normal: {
479
+ barBorderRadius: 15,
480
+ color: '#00c0e9',
481
+ label: {
482
+ show: true,
483
+ textStyle: {
484
+ color: "#4a7cae"
485
+ },
486
+ position: "insideTop",
487
+ formatter: function (p) {
488
+ return p.value > 0 ? (p.value) : '';
489
+ }
490
+ }
491
+ }
492
+ },
493
+ data: metaDate[1],
494
+ }]
495
+
496
+
497
+ this.xc1.setOption({
498
+ title: {
499
+ text: '',
500
+ x: '30%',
501
+ textStyle: {color: "#333333", fontSize: "16", fontWeight: "normal"}
502
+ },
503
+ color: ['#3398DB'],
504
+ tooltip: {
505
+ trigger: 'axis',
506
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
507
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
508
+ },
509
+ formatter: function (params) {
510
+ if (params[0].axisValue == '') {
511
+ return ''
512
+ }
513
+ var result = ''
514
+ params.forEach(function (item) {
515
+ result += item.seriesName + " : " + item.value + "</br>";
516
+ });
517
+ var h=eval(scaledata[params[0].dataIndex]*100).toString()
518
+
519
+ return result+"整改率:"+h+'%'
520
+ },
521
+ extraCssText: 'width: 60%;height: 30%;'
522
+ },
523
+ grid: {
524
+ left: '2%',
525
+ right: '20%',
526
+ bottom: '8%',
527
+ containLabel: true
528
+ },
529
+ xAxis: [
530
+ {
531
+ type: 'category',
532
+ name: "隐患等级",
533
+ nameTextStyle: {color: "#6f8ba8"},
534
+ axisTick: {
535
+ alignWithLabel: true
536
+ },
537
+ axisLine: {show: true,lineStyle :{color:'#999999'}},
538
+ axisLabel: {show: true, textStyle: {color: "#6f8ba8"}},
539
+ data: legendname
540
+ }
541
+ ],
542
+ yAxis: [{
543
+ type: "value",
544
+ name: "数量",
545
+ nameTextStyle: {color: "#6f8ba8"},
546
+ splitLine: {show: true,lineStyle:{type:'dashed',color:'#e1e1e1'}},
547
+ axisTick: {show: true},
548
+ axisLine: {show: true,lineStyle :{color:'#999999'}},
549
+ axisLabel: {show: true, textStyle: {color: "#6f8ba8"}}
550
+ }],
551
+ series: serieData
552
+ }, true)
553
+ },
554
+ searchdata () {
555
+ let getGen =getData(this)
556
+ co(getGen)
557
+ },
558
+ searchdata1 () {
559
+ let getGen =getData1(this)
560
+ co(getGen)
561
+ }
562
+ },
563
+ ready () {
564
+ // this.orgid = `('${this.$login.f.orgid}')`
565
+ // this.searchdata()
566
+ // this.searchdata1()
567
+ },
568
+ watch: {
569
+ 'startDate' (val) {
570
+ console.log("我是watch")
571
+ this.searchdata()
572
+ this.searchdata1()
573
+ },
574
+ 'endDate' (val) {
575
+ console.log("我是watch")
576
+ this.searchdata()
577
+ this.searchdata1()
578
+ },
579
+ 'plan_type' (val) {
580
+ console.log("我是watch")
581
+ this.f_safecheck_type = ''
582
+ if (this.plan_type == 'false') {
583
+ this.f_safecheck_type = '年度普检'
584
+ }
585
+ if (this.plan_type == 'true') {
586
+ this.f_safecheck_type = '首次通气'
587
+ }
588
+ this.searchdata()
589
+ this.searchdata1()
590
+ },
591
+ 'f_filialeids'(){
592
+ console.log('hidden改变了')
593
+ this.orgid = this.f_filialeids
594
+ this.searchdata()
595
+ this.searchdata1()
596
+ }
597
+ }
598
+ }
599
+ </script>
600
+ <style scoped>
601
+ .div-1 {
602
+ height: 85%;
603
+ width: 10%;
604
+ margin-left: 5%;
605
+ float: left;
606
+ margin-top: 1%;
607
+ }
608
+
609
+ .div-2 {
610
+ float: right;
611
+ width: 80%;
612
+ height: 55.56%;
613
+ margin-right: 1%;
614
+ margin-top: 0.5%;
615
+ }
616
+
617
+ .div-3 {
618
+ float: left;
619
+ margin-left: 2%;
620
+ padding-top: 2%;
621
+ width: 96%;
622
+ height: 99%;
623
+ }
624
+
625
+ .div-4 {
626
+ background-color: #fafafa;
627
+ }
628
+
629
+ table {
630
+ height: 100%;
631
+ width: 100%;
632
+ font-size: 12px
633
+ }
634
+
635
+ tr {
636
+ height: 25%;
637
+ width: 100%
638
+ }
639
+
640
+ td {
641
+ width: 11%;
642
+ font-size: 12px;
643
+ color: #666666;
644
+ }
645
+
646
+ .td-1 {
647
+ width: 16%;
648
+ color: #90addf;
649
+ font-size: 12px
650
+ }
651
+
652
+ .td-2 {
653
+ width: 15%;
654
+ color: #90addf;
655
+ font-size: 12px
656
+ }
657
+
658
+ span {
659
+ color: #90addf;
660
+ font-size: 12px
661
+ }
662
+
663
+ .span-1 {
664
+ color: #999999;
665
+ font-size: 12px
666
+ }
667
+
668
+ .p-1 {
669
+ font-size: 15px;
670
+ height: 99%;
671
+ width: 99%;
672
+ font-weight: bold;
673
+ color: #333333;
674
+ }
675
+
676
+ button {
677
+ width: 10%;
678
+ margin-top: 0%;
679
+ margin-left: 2%;
680
+ float: right;
681
+ background-color: #73ca73;
682
+ border-radius: 4px;
683
+ border: 1px solid #73ca73;
684
+ color: #ffffff;
685
+ font-size: 15px;
686
+ height: 120%;
687
+ }
688
+
689
+ .but-1 {
690
+ width: 17%;
691
+ float: right;
692
+ border-radius: 4px;
693
+ font-size: 12px;
694
+ height: 130%;
695
+ }
696
+
697
+ .but-2 {
698
+ background-color: #88b5e2;
699
+ border: #88b5e2;
700
+ width: 6%;
701
+ }
702
+
703
+ img {
704
+ width: 5px;
705
+ height: 18px;
706
+ }
707
+
708
+ .img-1 {
709
+ height: 12px;
710
+ width: auto;
711
+ }
712
+
713
+ </style>