safecheck-client 3.0.33-33 → 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.
@@ -1,499 +1,508 @@
1
- <template lang="html">
2
- <div class="div-4">
3
- <div :style="{height:headheight,background:'#eaeff4'}">
4
- <div class="div-2">
5
- <div class="form-group">
6
- <label v-show="full_screen" class="control-label">安检类型</label>
7
- <v-select id="c_plan_year" :value.sync="plan_type" v-show="full_screen"
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
-
18
- <div class="flex-row" style="height: 90%;">
19
- <div class="span">
20
- <div class="form-inline" v-if="echartsshow" style="height: auto;margin-bottom: 5%;margin-top: 5%">
21
- <div class="form-group">
22
- <label for="startDate">年份:</label>
23
- <v-select id="c_plan_year" :value.sync="year"
24
- :value-single="true"
25
- :options='c_year_list' close-on-select clear-button> </v-select>
26
- </div>
27
- <div class="form-group">
28
- <label class="control-label">安检类型</label>
29
- <v-select id="c_plan_year" :value.sync="plan_type"
30
- :value-single="true"
31
- :options='plan_types' close-on-select clear-button> </v-select>
32
- </div>
33
- </div>
34
- <div id="safedetail"></div>
35
- </div>
36
- <!--调用子组件绘图查表-->
37
- <div v-show="echartsshow">
38
- <h4 align="center" v-if="plan_type == ''">安检完成率一览表(按分公司)</h4>
39
- <h4 align="center" v-if="plan_type == 'false'">年度安检完成率一览表(按分公司)</h4>
40
- <h4 align="center" v-if="plan_type == 'true'">首次通气安检完成率一览表(按分公司)</h4>
41
- <criteria-paged :model="model" v-ref:crip >
42
- <data-grid :model="model" partial='list' id="datagridstyle1" v-ref:grid1 classname="table table-bordered table table-hover">
43
- <template partial='head'>
44
- <tr>
45
- <th><nobr>分公司</nobr></th>
46
- <th><nobr>计划量</nobr></th>
47
- <th><nobr>安检量</nobr></th>
48
- <th><nobr>完成率</nobr></th>
49
- </tr>
50
- </template>
51
- <template partial='body' >
52
- <tr class="tr-1">
53
- <td class="td-1" style="text-align: center;">
54
- {{row.f_subcompany}}
55
- </td>
56
- <td class="td-1" style="text-align: center;">
57
- {{row.zongliang}}
58
- </td>
59
- <td class="td-1" style="text-align: center;">
60
- {{row.yijian}}
61
- </td>
62
- <td class="td-1" style="text-align: center;">
63
- {{row.checkrate}}
64
- </td>
65
- </tr>
66
- </template>
67
- <template partial='foot'>
68
- <tr>
69
- <td colspan="1" style="text-align: right">合计:</td>
70
- <td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.zongliang}}</nobr></td>
71
- <td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.yijian}}</nobr></td>
72
- <td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.checkrate}}</nobr></td>
73
- </tr>
74
- </template>
75
- </data-grid>
76
- </criteria-paged>
77
-
78
- </div>
79
- </div>
80
- </div>
81
- </div>
82
- </template>
83
-
84
- <script>
85
- import * as Util from '../../Util'
86
- import co from 'co'
87
- import echarts from 'echarts'
88
- import {HttpResetClass } from 'vue-client'
89
- import {PagedList} from 'vue-client'
90
-
91
-
92
- let getData = function * (self) {
93
- let load = new HttpResetClass()
94
- self.set()
95
- load.load('POST','rs/sql/CheckComplete', {data: {year:self.year,orgid:self.orgid,plan_type:self.plan_type}},
96
- {resolveMsg: null, rejectMsg: null})
97
- .then((res) => {
98
- let legendname = []
99
- let zongliangArray = []
100
- let yijianArray = []
101
- let scaledata = []
102
- self.count.zongliang = 0
103
- self.count.yijian = 0
104
- self.count.checkrate = '0.00%'
105
- for (var i = 0; i < res.data.length; i++) {
106
- legendname[i] = res.data[i].f_subcompany
107
- zongliangArray[i] = res.data[i].zongliang
108
- yijianArray[i] = res.data[i].yijian
109
- self.count.zongliang += res.data[i].zongliang
110
- self.count.yijian += res.data[i].yijian
111
-
112
- var scale=( res.data[i].yijian/ res.data[i].zongliang).toFixed(4)
113
- scaledata.push(scale)
114
- }
115
- self.count.checkrate = (100*self.count.yijian/ self.count.zongliang).toFixed(0)+'%'
116
- //掉绘图
117
- self.set(scaledata,legendname,zongliangArray,yijianArray)
118
- self.settable()
119
- })
120
- }
121
- export default {
122
- title: '用户数量分布',
123
- data () {
124
- let options = []
125
- let ye = (new Date()).getFullYear()
126
- for(let i = ye - 5 ; i <= ye; i++ )
127
- {
128
- options.push({label: i + '', value: i + ''})
129
- }
130
- return {
131
- full_screen: true,//控制全屏按键显示状态
132
- show_all: false,//控制返回按键显示状态
133
- //控制图表的显示状态
134
- echartsshow: false,
135
- detailshows: true,
136
-
137
- //控制图表的style
138
- barheight: '88.37%',
139
- headheight: '11.61%',
140
- styledate: {
141
- echartsheight: '95%',
142
- echartsfloat: 'none',
143
- },
144
- c_year_list: options,
145
- f:this.$login.f,
146
- chosenOrg: {
147
- id: 0
148
- },
149
- count:{
150
- zongliang:0,
151
- yijian:0,
152
- checkrate:'0.00%',
153
- },
154
- model:new PagedList(),
155
- orgid: `('${this.$login.f.orgid}')`,
156
- startDate:(new Date()).getFullYear()+'-01-01',
157
- endDate: Util.toStandardDateString(),
158
- year:(new Date()).getFullYear(),
159
- xc: '',
160
- plan_types:[{label:'全部',value:''},{label:'年度安检单',value:'false'},{label:'首次通气单',value:'true'}],
161
- plan_type:''
162
- }
163
- },
164
- props:{
165
- f_filialeids:{
166
- type:String
167
- }
168
- },
169
- methods: {
170
- barrdios() {//全屏按键事件
171
- console.log("全屏显示事件")
172
- this.barshow = true
173
- this.detailshows = false
174
- this.echartsshow = true
175
- this.show_all = true
176
- this.full_screen = false
177
- this.buttonshow = true
178
- this.showdetail = false
179
- this.styledate.echartsfloat = 'left'
180
- this.styledate.echartsheight = '65%'
181
- this.echartswidth = '50%'
182
- this.headheight = '8%'
183
- this.$parent.echarts = '3'
184
- this.$emit('echarts-changed')
185
- this.newecharts = true
186
- this.searchdata()
187
- console.log(this.$parent.echarts, '主图状态')
188
- },
189
- showall() {//返回按键事件
190
- //修改显示状态
191
- this.barshow = false
192
- this.detailshows = true
193
- this.echartsshow = false
194
- this.buttonshow = false
195
- this.newecharts = false
196
- this.show_all = false
197
- this.full_screen = true
198
- this.showdetail = false
199
- this.styledate.echartsheight = '95%'
200
- this.echartswidth = '95%'
201
- this.$parent.echarts = -1
202
- this.headheight = '11.61%'
203
- this.$emit('echarts-changed', this.echarts)
204
- },
205
- settable() {
206
- this.model= new PagedList('rs/sql/CheckComplete',20, {year:'this.year',orgid:'this.orgid',plan_type:'this.plan_type'})
207
- this.model.year = this.year
208
- this.model.orgid = this.orgid
209
- this.model.plan_type = this.plan_type
210
- this.model.search('1=1')
211
- },
212
- set(scaledata,legendname,zongliangArray,yijianArray) {
213
- let serieData = [{ //绘图数据
214
- name: '计划量',
215
- type: "bar",
216
- barWidth: '15%',
217
- barGap: "0",
218
- itemStyle: {
219
- normal: {
220
- barBorderRadius: 15,
221
- borderColor: '#acf3ed',
222
- color: '#fff',
223
- label: {
224
- show: true,
225
- textStyle: {
226
- color: "#4a7cae"
227
- },
228
- position: "top",
229
- formatter: function (p) {
230
- return p.value > 0 ? (p.value) : '';
231
- }
232
- }
233
- }
234
- },
235
- data: zongliangArray,
236
- },
237
- { //绘图数据
238
- name: '入户量',
239
- type: "bar",
240
- barWidth: '15%',
241
- barGap: "-100%",
242
- itemStyle: {
243
- normal: {
244
- barBorderRadius: 11,
245
- color: '',
246
- label: {
247
- show: true,
248
- textStyle: {
249
- color: "#fccb05"
250
- },
251
- position: "insideTop",
252
- formatter: function (p) {
253
- return p.value > 0 ? (p.value) : '';
254
- }
255
- }
256
- }
257
- },
258
- data: yijianArray,
259
- }]
260
-
261
- this.xc = echarts.init(document.getElementById('safedetail'))
262
- let text = ''
263
- if(this.plan_type == ''){
264
- text = '居民安检计划及完成率'
265
- }
266
- if(this.plan_type == 'false'){
267
- text = '居民年度安检计划及完成率'
268
- }
269
- if(this.plan_type == 'true'){
270
- text = '居民首次通气安检计划及完成率'
271
- }
272
- this.xc.setOption({
273
- title : {
274
- text: text,
275
- x: 'left'
276
- },
277
- color: ['#3398DB'],
278
- tooltip: {
279
- trigger: 'axis',
280
- axisPointer: { // 坐标轴指示器,坐标轴触发有效
281
- type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
282
- },
283
-
284
- extraCssText: 'width: auto;height: auto;'
285
- },
286
- dataZoom: [{
287
- type: 'inside',
288
- show: true,
289
- xAxisIndex: [0],
290
- left: '9%',
291
- bottom: -5,
292
- start: 2,
293
- end: 90 //初始化滚动条
294
- }],
295
- grid: {
296
- left: '10%',
297
- right: '10%',
298
- bottom: '8%',
299
- containLabel: true
300
- },
301
- legend: {
302
- data: ['计划量', '入户量'],
303
- right: 10,
304
- top: 12,
305
- textStyle: {
306
- color: "black"
307
- },
308
- itemWidth: 12,
309
- itemHeight: 10,
310
- // itemGap: 35
311
- },
312
- xAxis: [
313
- {
314
- name: "分公司",
315
- type: 'category',
316
- axisTick: {
317
- alignWithLabel: true
318
- },
319
- nameTextStyle: {color: "#6f8ba8"},
320
- axisLabel: {
321
- show: true,
322
- textStyle: {color: "#6f8ba8"},
323
- formatter:function (value) {
324
- var l=0
325
- for(l;l<legendname.length;l++){
326
- if(legendname[l]==value){
327
- break
328
- }
329
- }
330
- var h=eval(scaledata[l]+'*100').toString()
331
- var index=h.indexOf('.')
332
-
333
- var s=h.substring(0,index+2)
334
- console.log("h:"+h)
335
- console.log("index:"+index)
336
- console.log("s:"+s)
337
- return value +' \n '+(Math.round(s))+'%'
338
- }
339
- },
340
- data: legendname
341
- }
342
- ],
343
- yAxis: [{
344
- type: "value",
345
- name: "数量",
346
- nameTextStyle: {color: "#6f8ba8"},
347
- splitLine: {show: true,lineStyle:{type:'dashed',color:'#e1e1e1'}},
348
- axisTick: {show: true},
349
- axisLine: {show: true,lineStyle :{color:'#999999'}},
350
- axisLabel: {show: true, textStyle: {color: "#6f8ba8"}}
351
- }],
352
- series: serieData
353
- }
354
-
355
- , true)
356
- },
357
- searchdata () {
358
- let getGen =getData(this)
359
- co(getGen)
360
- }
361
- },
362
- ready () {
363
- // this.orgid = `('${this.$login.f.orgid}')`
364
- this.year =(new Date()).getFullYear()
365
- // this.searchdata()
366
- },
367
- watch: {
368
- 'year' (val) {
369
- console.log("我是watch")
370
- this.searchdata()
371
- },
372
- 'plan_type' (val) {
373
- console.log("我是plan_type")
374
- this.searchdata()
375
- },
376
- 'f_filialeids'(){
377
- console.log('status改变了')
378
- this.orgid = this.f_filialeids
379
- this.searchdata()
380
- }
381
- }
382
-
383
- }
384
- </script>
385
- <style scoped>
386
- .div-1 {
387
- height: 85%;
388
- width: 10%;
389
- margin-left: 5%;
390
- float: left;
391
- margin-top: 1%;
392
- }
393
-
394
- .div-2 {
395
- float: right;
396
- width: 80%;
397
- height: 55.56%;
398
- margin-right: 1%;
399
- margin-top: 0.5%;
400
- }
401
-
402
- .div-3 {
403
- float: left;
404
- margin-left: 2%;
405
- padding-top: 2%;
406
- width: 96%;
407
- height: 99%;
408
- }
409
-
410
- .div-4 {
411
- background-color: #fafafa;
412
- }
413
-
414
- table {
415
- height: 100%;
416
- width: 100%;
417
- font-size: 12px
418
- }
419
-
420
- tr {
421
- height: 25%;
422
- width: 100%
423
- }
424
-
425
- td {
426
- width: 11%;
427
- font-size: 12px;
428
- color: #666666;
429
- }
430
-
431
- .td-1 {
432
- width: 16%;
433
- color: #90addf;
434
- font-size: 12px
435
- }
436
-
437
- .td-2 {
438
- width: 15%;
439
- color: #90addf;
440
- font-size: 12px
441
- }
442
-
443
- span {
444
- color: #90addf;
445
- font-size: 12px
446
- }
447
-
448
- .span-1 {
449
- color: #999999;
450
- font-size: 12px
451
- }
452
-
453
- .p-1 {
454
- font-size: 15px;
455
- height: 99%;
456
- width: 99%;
457
- font-weight: bold;
458
- color: #333333;
459
- }
460
-
461
- button {
462
- width: 10%;
463
- margin-top: 0%;
464
- margin-left: 2%;
465
- float: right;
466
- background-color: #73ca73;
467
- border-radius: 4px;
468
- border: 1px solid #73ca73;
469
- color: #ffffff;
470
- font-size: 15px;
471
- height: 120%;
472
- }
473
-
474
- .but-1 {
475
- width: 17%;
476
- float: right;
477
- border-radius: 4px;
478
- font-size: 12px;
479
- height: 130%;
480
- }
481
-
482
- .but-2 {
483
- background-color: #88b5e2;
484
- border: #88b5e2;
485
- width: 6%;
486
- }
487
-
488
- img {
489
- width: 5px;
490
- height: 18px;
491
- }
492
-
493
- .img-1 {
494
- height: 12px;
495
- width: auto;
496
- }
497
-
498
- </style>
499
-
1
+ <template lang="html">
2
+ <div class="div-4">
3
+ <div :style="{height:headheight,background:'#eaeff4'}">
4
+ <div class="div-2">
5
+ <div class="form-group">
6
+ <label v-show="full_screen" class="control-label">安检类型</label>
7
+ <v-select id="c_plan_year" :value.sync="plan_type" v-show="full_screen"
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
+
18
+ <div class="flex-row" style="height: 90%;">
19
+ <div class="span">
20
+ <div class="form-inline" v-if="echartsshow" style="height: auto;margin-bottom: 5%;margin-top: 5%">
21
+ <div class="form-group">
22
+ <label for="startDate">年份:</label>
23
+ <v-select id="c_plan_year" :value.sync="year"
24
+ :value-single="true"
25
+ :options='c_year_list' close-on-select clear-button> </v-select>
26
+ </div>
27
+ <div class="form-group">
28
+ <label class="control-label">安检类型</label>
29
+ <v-select id="c_plan_year" :value.sync="plan_type"
30
+ :value-single="true"
31
+ :options='plan_types' close-on-select clear-button> </v-select>
32
+ </div>
33
+ </div>
34
+ <div id="safedetail"></div>
35
+ </div>
36
+ <!--调用子组件绘图查表-->
37
+ <div v-show="echartsshow">
38
+ <h4 align="center" v-if="plan_type == ''">安检完成率一览表(按分公司)</h4>
39
+ <h4 align="center" v-if="plan_type == 'false'">年度安检完成率一览表(按分公司)</h4>
40
+ <h4 align="center" v-if="plan_type == 'true'">首次通气安检完成率一览表(按分公司)</h4>
41
+ <criteria-paged :model="model" v-ref:crip >
42
+ <data-grid :model="model" partial='list' id="datagridstyle1" v-ref:grid1 classname="table table-bordered table table-hover">
43
+ <template partial='head'>
44
+ <tr>
45
+ <th><nobr>分公司</nobr></th>
46
+ <th><nobr>计划量</nobr></th>
47
+ <th><nobr>安检量</nobr></th>
48
+ <th><nobr>完成率</nobr></th>
49
+ </tr>
50
+ </template>
51
+ <template partial='body' >
52
+ <tr class="tr-1">
53
+ <td class="td-1" style="text-align: center;">
54
+ {{row.f_subcompany}}
55
+ </td>
56
+ <td class="td-1" style="text-align: center;">
57
+ {{row.zongliang}}
58
+ </td>
59
+ <td class="td-1" style="text-align: center;">
60
+ {{row.yijian}}
61
+ </td>
62
+ <td class="td-1" style="text-align: center;">
63
+ {{row.checkrate}}
64
+ </td>
65
+ </tr>
66
+ </template>
67
+ <template partial='foot'>
68
+ <tr>
69
+ <td colspan="1" style="text-align: right">合计:</td>
70
+ <td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.zongliang}}</nobr></td>
71
+ <td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.yijian}}</nobr></td>
72
+ <td style="text-align: center"><nobr>{{$parent.$parent.$parent.count.checkrate}}</nobr></td>
73
+ </tr>
74
+ </template>
75
+ </data-grid>
76
+ </criteria-paged>
77
+
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </template>
83
+
84
+ <script>
85
+ import * as Util from '../../Util'
86
+ import co from 'co'
87
+ import echarts from 'echarts'
88
+ import {HttpResetClass } from 'vue-client'
89
+ import {PagedList} from 'vue-client'
90
+
91
+
92
+ let getData = function * (self) {
93
+ let load = new HttpResetClass()
94
+ self.set()
95
+ load.load('POST','rs/sql/CheckComplete', {data: {year:self.year,orgid:self.orgid,plan_type:self.plan_type,f_safecheck_type:self.f_safecheck_type}},
96
+ {resolveMsg: null, rejectMsg: null})
97
+ .then((res) => {
98
+ let legendname = []
99
+ let zongliangArray = []
100
+ let yijianArray = []
101
+ let scaledata = []
102
+ self.count.zongliang = 0
103
+ self.count.yijian = 0
104
+ self.count.checkrate = '0.00%'
105
+ for (var i = 0; i < res.data.length; i++) {
106
+ legendname[i] = res.data[i].f_subcompany
107
+ zongliangArray[i] = res.data[i].zongliang
108
+ yijianArray[i] = res.data[i].yijian
109
+ self.count.zongliang += res.data[i].zongliang
110
+ self.count.yijian += res.data[i].yijian
111
+
112
+ var scale=( res.data[i].yijian/ res.data[i].zongliang).toFixed(4)
113
+ scaledata.push(scale)
114
+ }
115
+ self.count.checkrate = (100*self.count.yijian/ self.count.zongliang).toFixed(0)+'%'
116
+ //掉绘图
117
+ self.set(scaledata,legendname,zongliangArray,yijianArray)
118
+ self.settable()
119
+ })
120
+ }
121
+ export default {
122
+ title: '用户数量分布',
123
+ data () {
124
+ let options = []
125
+ let ye = (new Date()).getFullYear()
126
+ for(let i = ye - 5 ; i <= ye; i++ )
127
+ {
128
+ options.push({label: i + '', value: i + ''})
129
+ }
130
+ return {
131
+ full_screen: true,//控制全屏按键显示状态
132
+ show_all: false,//控制返回按键显示状态
133
+ //控制图表的显示状态
134
+ echartsshow: false,
135
+ detailshows: true,
136
+
137
+ //控制图表的style
138
+ barheight: '88.37%',
139
+ headheight: '11.61%',
140
+ styledate: {
141
+ echartsheight: '95%',
142
+ echartsfloat: 'none',
143
+ },
144
+ c_year_list: options,
145
+ f:this.$login.f,
146
+ chosenOrg: {
147
+ id: 0
148
+ },
149
+ count:{
150
+ zongliang:0,
151
+ yijian:0,
152
+ checkrate:'0.00%',
153
+ },
154
+ model:new PagedList(),
155
+ orgid: `('${this.$login.f.orgid}')`,
156
+ startDate:(new Date()).getFullYear()+'-01-01',
157
+ endDate: Util.toStandardDateString(),
158
+ year:(new Date()).getFullYear(),
159
+ xc: '',
160
+ plan_types:[{label:'全部',value:''},{label:'年度安检单',value:'false'},{label:'首次通气单',value:'true'}],
161
+ plan_type:'',
162
+ f_safecheck_type:''
163
+ }
164
+ },
165
+ props:{
166
+ f_filialeids:{
167
+ type:String
168
+ }
169
+ },
170
+ methods: {
171
+ barrdios() {//全屏按键事件
172
+ console.log("全屏显示事件")
173
+ this.barshow = true
174
+ this.detailshows = false
175
+ this.echartsshow = true
176
+ this.show_all = true
177
+ this.full_screen = false
178
+ this.buttonshow = true
179
+ this.showdetail = false
180
+ this.styledate.echartsfloat = 'left'
181
+ this.styledate.echartsheight = '65%'
182
+ this.echartswidth = '50%'
183
+ this.headheight = '8%'
184
+ this.$parent.echarts = '3'
185
+ this.$emit('echarts-changed')
186
+ this.newecharts = true
187
+ this.searchdata()
188
+ console.log(this.$parent.echarts, '主图状态')
189
+ },
190
+ showall() {//返回按键事件
191
+ //修改显示状态
192
+ this.barshow = false
193
+ this.detailshows = true
194
+ this.echartsshow = false
195
+ this.buttonshow = false
196
+ this.newecharts = false
197
+ this.show_all = false
198
+ this.full_screen = true
199
+ this.showdetail = false
200
+ this.styledate.echartsheight = '95%'
201
+ this.echartswidth = '95%'
202
+ this.$parent.echarts = -1
203
+ this.headheight = '11.61%'
204
+ this.$emit('echarts-changed', this.echarts)
205
+ },
206
+ settable() {
207
+ this.model= new PagedList('rs/sql/CheckComplete',20, {year:'this.year',orgid:'this.orgid',plan_type:'this.plan_type',f_safecheck_type: 'this.f_safecheck_type'})
208
+ this.model.year = this.year
209
+ this.model.orgid = this.orgid
210
+ this.model.plan_type = this.plan_type
211
+ this.model.f_safecheck_type = this.f_safecheck_type
212
+ this.model.search('1=1')
213
+ },
214
+ set(scaledata,legendname,zongliangArray,yijianArray) {
215
+ let serieData = [{ //绘图数据
216
+ name: '计划量',
217
+ type: "bar",
218
+ barWidth: '15%',
219
+ barGap: "0",
220
+ itemStyle: {
221
+ normal: {
222
+ barBorderRadius: 15,
223
+ borderColor: '#acf3ed',
224
+ color: '#fff',
225
+ label: {
226
+ show: true,
227
+ textStyle: {
228
+ color: "#4a7cae"
229
+ },
230
+ position: "top",
231
+ formatter: function (p) {
232
+ return p.value > 0 ? (p.value) : '';
233
+ }
234
+ }
235
+ }
236
+ },
237
+ data: zongliangArray,
238
+ },
239
+ { //绘图数据
240
+ name: '入户量',
241
+ type: "bar",
242
+ barWidth: '15%',
243
+ barGap: "-100%",
244
+ itemStyle: {
245
+ normal: {
246
+ barBorderRadius: 11,
247
+ color: '',
248
+ label: {
249
+ show: true,
250
+ textStyle: {
251
+ color: "#fccb05"
252
+ },
253
+ position: "insideTop",
254
+ formatter: function (p) {
255
+ return p.value > 0 ? (p.value) : '';
256
+ }
257
+ }
258
+ }
259
+ },
260
+ data: yijianArray,
261
+ }]
262
+
263
+ this.xc = echarts.init(document.getElementById('safedetail'))
264
+ let text = ''
265
+ if(this.plan_type == ''){
266
+ text = '居民安检计划及完成率'
267
+ }
268
+ if(this.plan_type == 'false'){
269
+ text = '居民年度安检计划及完成率'
270
+ }
271
+ if(this.plan_type == 'true'){
272
+ text = '居民首次通气安检计划及完成率'
273
+ }
274
+ this.xc.setOption({
275
+ title : {
276
+ text: text,
277
+ x: 'left'
278
+ },
279
+ color: ['#3398DB'],
280
+ tooltip: {
281
+ trigger: 'axis',
282
+ axisPointer: { // 坐标轴指示器,坐标轴触发有效
283
+ type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
284
+ },
285
+
286
+ extraCssText: 'width: auto;height: auto;'
287
+ },
288
+ dataZoom: [{
289
+ type: 'inside',
290
+ show: true,
291
+ xAxisIndex: [0],
292
+ left: '9%',
293
+ bottom: -5,
294
+ start: 2,
295
+ end: 90 //初始化滚动条
296
+ }],
297
+ grid: {
298
+ left: '10%',
299
+ right: '10%',
300
+ bottom: '8%',
301
+ containLabel: true
302
+ },
303
+ legend: {
304
+ data: ['计划量', '入户量'],
305
+ right: 10,
306
+ top: 12,
307
+ textStyle: {
308
+ color: "black"
309
+ },
310
+ itemWidth: 12,
311
+ itemHeight: 10,
312
+ // itemGap: 35
313
+ },
314
+ xAxis: [
315
+ {
316
+ name: "分公司",
317
+ type: 'category',
318
+ axisTick: {
319
+ alignWithLabel: true
320
+ },
321
+ nameTextStyle: {color: "#6f8ba8"},
322
+ axisLabel: {
323
+ show: true,
324
+ textStyle: {color: "#6f8ba8"},
325
+ formatter:function (value) {
326
+ var l=0
327
+ for(l;l<legendname.length;l++){
328
+ if(legendname[l]==value){
329
+ break
330
+ }
331
+ }
332
+ var h=eval(scaledata[l]+'*100').toString()
333
+ var index=h.indexOf('.')
334
+
335
+ var s=h.substring(0,index+2)
336
+ console.log("h:"+h)
337
+ console.log("index:"+index)
338
+ console.log("s:"+s)
339
+ return value +' \n '+(Math.round(s))+'%'
340
+ }
341
+ },
342
+ data: legendname
343
+ }
344
+ ],
345
+ yAxis: [{
346
+ type: "value",
347
+ name: "数量",
348
+ nameTextStyle: {color: "#6f8ba8"},
349
+ splitLine: {show: true,lineStyle:{type:'dashed',color:'#e1e1e1'}},
350
+ axisTick: {show: true},
351
+ axisLine: {show: true,lineStyle :{color:'#999999'}},
352
+ axisLabel: {show: true, textStyle: {color: "#6f8ba8"}}
353
+ }],
354
+ series: serieData
355
+ }
356
+
357
+ , true)
358
+ },
359
+ searchdata () {
360
+ let getGen =getData(this)
361
+ co(getGen)
362
+ }
363
+ },
364
+ ready () {
365
+ // this.orgid = `('${this.$login.f.orgid}')`
366
+ this.year =(new Date()).getFullYear()
367
+ // this.searchdata()
368
+ },
369
+ watch: {
370
+ 'year' (val) {
371
+ console.log("我是watch")
372
+ this.searchdata()
373
+ },
374
+ 'plan_type' (val) {
375
+ this.f_safecheck_type = ''
376
+ if (this.plan_type == 'false') {
377
+ this.f_safecheck_type = '年度普检'
378
+ }
379
+ if (this.plan_type == 'true') {
380
+ this.f_safecheck_type = '首次通气'
381
+ }
382
+ console.log("我是plan_type")
383
+ this.searchdata()
384
+ },
385
+ 'f_filialeids'(){
386
+ console.log('status改变了')
387
+ this.orgid = this.f_filialeids
388
+ this.searchdata()
389
+ }
390
+ }
391
+
392
+ }
393
+ </script>
394
+ <style scoped>
395
+ .div-1 {
396
+ height: 85%;
397
+ width: 10%;
398
+ margin-left: 5%;
399
+ float: left;
400
+ margin-top: 1%;
401
+ }
402
+
403
+ .div-2 {
404
+ float: right;
405
+ width: 80%;
406
+ height: 55.56%;
407
+ margin-right: 1%;
408
+ margin-top: 0.5%;
409
+ }
410
+
411
+ .div-3 {
412
+ float: left;
413
+ margin-left: 2%;
414
+ padding-top: 2%;
415
+ width: 96%;
416
+ height: 99%;
417
+ }
418
+
419
+ .div-4 {
420
+ background-color: #fafafa;
421
+ }
422
+
423
+ table {
424
+ height: 100%;
425
+ width: 100%;
426
+ font-size: 12px
427
+ }
428
+
429
+ tr {
430
+ height: 25%;
431
+ width: 100%
432
+ }
433
+
434
+ td {
435
+ width: 11%;
436
+ font-size: 12px;
437
+ color: #666666;
438
+ }
439
+
440
+ .td-1 {
441
+ width: 16%;
442
+ color: #90addf;
443
+ font-size: 12px
444
+ }
445
+
446
+ .td-2 {
447
+ width: 15%;
448
+ color: #90addf;
449
+ font-size: 12px
450
+ }
451
+
452
+ span {
453
+ color: #90addf;
454
+ font-size: 12px
455
+ }
456
+
457
+ .span-1 {
458
+ color: #999999;
459
+ font-size: 12px
460
+ }
461
+
462
+ .p-1 {
463
+ font-size: 15px;
464
+ height: 99%;
465
+ width: 99%;
466
+ font-weight: bold;
467
+ color: #333333;
468
+ }
469
+
470
+ button {
471
+ width: 10%;
472
+ margin-top: 0%;
473
+ margin-left: 2%;
474
+ float: right;
475
+ background-color: #73ca73;
476
+ border-radius: 4px;
477
+ border: 1px solid #73ca73;
478
+ color: #ffffff;
479
+ font-size: 15px;
480
+ height: 120%;
481
+ }
482
+
483
+ .but-1 {
484
+ width: 17%;
485
+ float: right;
486
+ border-radius: 4px;
487
+ font-size: 12px;
488
+ height: 130%;
489
+ }
490
+
491
+ .but-2 {
492
+ background-color: #88b5e2;
493
+ border: #88b5e2;
494
+ width: 6%;
495
+ }
496
+
497
+ img {
498
+ width: 5px;
499
+ height: 18px;
500
+ }
501
+
502
+ .img-1 {
503
+ height: 12px;
504
+ width: auto;
505
+ }
506
+
507
+ </style>
508
+