manage-client 3.1.13 → 3.1.15

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 (50) hide show
  1. package/build/dev-server.js +5 -9
  2. package/hs_err_pid20908.log +199 -0
  3. package/hs_err_pid29444.log +199 -0
  4. package/node_modules.7z +0 -0
  5. package/package.json +1 -1
  6. package/src/App.vue +29 -28
  7. package/src/components/SellReport/GasBaozhuangFee.vue +237 -237
  8. package/src/components/SellReport/ManageSellType.vue +284 -284
  9. package/src/components/SellReport/ManageUserCount.vue +347 -347
  10. package/src/components/SellReport/SellingTable.vue +220 -220
  11. package/src/components/SellReport/UserSellingGas.vue +251 -251
  12. package/src/components/daping/CallCenter.vue +366 -368
  13. package/src/components/daping/DataManagement.vue +703 -697
  14. package/src/components/daping/GMap.vue +636 -636
  15. package/src/components/daping/ManageMain.vue +255 -255
  16. package/src/components/sale/businessquery/AreaSellCount.vue +408 -0
  17. package/src/components/sale/businessquery/FMYGasQuery.vue +713 -713
  18. package/src/components/sale/businessquery/MonthGasQuery.vue +467 -467
  19. package/src/components/sale/businessquery/OtherChargeQuery.vue +619 -613
  20. package/src/components/sale/businessquery/YingShouMingXi.vue +525 -502
  21. package/src/components/sale/config/exportConfig.js +864 -864
  22. package/src/components/sale/filesquery/UserQuery.vue +905 -884
  23. package/src/components/webmeter/DrillData/LostContactAnalysisList.vue +633 -633
  24. package/src/components/webmeter/DrillData/LostContactEcharts.vue +177 -177
  25. package/src/components/webmeter/DrillData/UserGasAll.vue +596 -596
  26. package/src/components/webmeter/DrillData/UserGasEcharts.vue +210 -210
  27. package/src/components/webmeter/DrillData/UserGasEform.vue +227 -227
  28. package/src/components/webmeter/DrillData/UserLostContactAnalysis.vue +585 -585
  29. package/src/components/webmeter/instruction/NewQueryInstruct.vue +399 -399
  30. package/src/components/webmeter/newwebmeter/NewException/NewExceptionEcharsTotal.vue +899 -899
  31. package/src/components/webmeter/newwebmeter/NewException/TotalExceptionByMeter.vue +606 -606
  32. package/src/components/webmeter/newwebmeter/UserGasEchartsList.vue +252 -252
  33. package/src/components/webmeter/newwebmeter/UserGasList.vue +440 -440
  34. package/src/components/webmeter/newwebmeter/UserInstructList.vue +332 -332
  35. package/src/components/webmeter/newwebmeter/signAnalysisEcharts.vue +266 -266
  36. package/src/components/webmeter/newwebmeter/signAnalysisEform.vue +175 -175
  37. package/src/components/webmeter/newwebmeter/signAnalysisListMain.vue +387 -387
  38. package/src/filiale/alashan/SellingTable.vue +231 -0
  39. package/src/filiale/alashan/reportManage.js +10 -0
  40. package/src/filiale/jingzhou/ChargeQuery.vue +1243 -1243
  41. package/src/filiale/jingzhou/config/exportConfig.js +861 -861
  42. package/src/filiale/meihekou/UserGasEform.vue +267 -267
  43. package/src/filiale/meihekou/sale.js +26 -26
  44. package/src/filiale/rongchuang/SellingTable.vue +250 -250
  45. package/src/filiale/rongchuang/reportManage.js +11 -11
  46. package/src/filiale/zhoukou/CardHandplanQuery.vue +457 -457
  47. package/src/filiale/zhoukou/sale.js +11 -11
  48. package/src/main.js +6 -6
  49. package/src/reportManage.js +438 -438
  50. package/static/images/mainicon/jiezhang.png +0 -0
@@ -1,697 +1,703 @@
1
- <template>
2
-
3
-
4
- <div class="flex-row" style="height: 44%">
5
- <div id="top-left">
6
- <div class="flex">
7
-
8
- <div class="flex">
9
- <div class="flex-row" style="height: 15%">
10
- <p class="top-left-title">城市门站:</p>
11
- </div>
12
- <div class="flex" style="height: 90%">
13
-
14
- <table>
15
- <!-- <thead style="border:1px solid #227ad8;height: 25px;width:100%;padding-top: 2px;background-color: #002f45">-->
16
- <thead class="thead" style=" border: solid 1px #0093ff;">
17
- <tr>
18
- <th class="font-14-medium1 col-sm-2">城区</th>
19
- <th class="font-14-medium1 col-sm-3">进站压力</th>
20
- <th class="font-14-medium1 col-sm-3">出站压力</th>
21
- <th class="font-14-medium1 col-sm-3">瞬时流量</th>
22
- <th class="font-14-medium1 col-sm-3">累计流量</th>
23
- </tr>
24
-
25
- </thead>
26
- <tbody class="scroll-content" :style="{top}">
27
- <tr v-for="item in dane1"><td>{{item.f_name}}</td><td>{{item.f_input_pressure}}</td><td>{{item.f_output_pressure}}</td><td>{{item.f_instantaneous_flow}}</td><td>{{item.f_cumulative_flow}}</td></tr>
28
- </tbody>
29
- </table>
30
-
31
-
32
- </div>
33
- </div>
34
- <div class="flex" style="height: 30%">
35
- <p class="top-left-title" style="height: 5%">高中压调压站:</p>
36
- <div class="flex" style="height: 90%">
37
- <table>
38
- <!-- <thead style="border:1px solid #227ad8;height: 25px;width:100%;padding-top: 2px;background-color: #002f45">-->
39
- <thead class="thead" style=" border: solid 1px #0093ff;">
40
- <tr>
41
- <th class="font-14-medium1 col-sm-2">城区</th>
42
- <th class="font-14-medium1 col-sm-3">进站压力</th>
43
- <th class="font-14-medium1 col-sm-3">出站压力</th>
44
- <th class="font-14-medium1 col-sm-3">瞬时流量</th>
45
- <th class="font-14-medium1 col-sm-3">累计流量</th>
46
- </tr>
47
-
48
- </thead>
49
- <tbody class="scroll-content">
50
- <tr v-for="item in dane2"><td>{{item.f_name}}</td><td>{{item.f_input_pressure}}</td><td>{{item.f_output_pressure}}</td><td>{{item.f_instantaneous_flow}}</td><td>{{item.f_cumulative_flow}}</td></tr>
51
- </tbody>
52
- </table>
53
-
54
-
55
- </div>
56
- </div>
57
- <div class="flex">
58
- <p class="top-left-title" style="height: 5%">热源厂:</p>
59
- <div class="flex" style="height: 90%">
60
- <table>
61
- <!-- <thead style="border:1px solid #227ad8;height: 25px;width:100%;padding-top: 2px;background-color: #002f45">-->
62
- <thead class="thead" style=" border: solid 1px #0093ff;">
63
- <tr>
64
- <th class="font-14-medium1 col-sm-2">城区</th>
65
- <th class="font-14-medium1 col-sm-3">进站压力</th>
66
- <th class="font-14-medium1 col-sm-3">出站压力</th>
67
- <th class="font-14-medium1 col-sm-3">瞬时流量</th>
68
- <th class="font-14-medium1 col-sm-3">累计流量</th>
69
- </tr>
70
-
71
- </thead>
72
- <tbody class="scroll-content">
73
- <tr v-for="item in dane3"><td>{{item.f_name}}</td><td>{{item.f_input_pressure}}</td><td>{{item.f_output_pressure}}</td><td>{{item.f_instantaneous_flow}}</td><td>{{item.f_cumulative_flow}}</td></tr>
74
- </tbody>
75
- </table>
76
-
77
- <!--&lt;!&ndash; <div class="flex-row scada-title" style="background:rgba(1,44,69,1)" v-for="item in items">&ndash;&gt;-->
78
- <!--&lt;!&ndash; <span class="font-16 flex-1">{{item.ssn}}</span>&ndash;&gt;-->
79
- <!--&lt;!&ndash; <span class="font-16 flex-1">{{item.sbsjfl}}</span>&ndash;&gt;-->
80
- <!--&lt;!&ndash; <span class="font-16 flex-1">{{item.tb}}</span>&ndash;&gt;-->
81
- <!--&lt;!&ndash; </div>&ndash;&gt;-->
82
- <!-- <div class="flex-row" style="background:rgba(1,44,69,1)">-->
83
- <!-- <span class="font-16 col-sm-2">12312</span>-->
84
- <!-- <span class="font-16 col-sm-3">412412</span>-->
85
- <!-- <span class="font-16 col-sm-3">124124</span>-->
86
- <!-- <span class="font-16 col-sm-3">22222</span>-->
87
- <!-- <span class="font-16 col-sm-3">3333</span>-->
88
- <!-- </div>-->
89
- <!-- <div class="flex-row" style="background:rgba(1,44,69,1)">-->
90
- <!-- <span class="font-16 col-sm-2">111111</span>-->
91
- <!-- <span class="font-16 col-sm-3">222222</span>-->
92
- <!-- <span class="font-16 col-sm-3">333333</span>-->
93
- <!-- <span class="font-16 col-sm-3">444444444</span>-->
94
- <!-- <span class="font-16 col-sm-3">55555555555</span>-->
95
- <!-- </div>-->
96
- <!-- <div class="flex-row" style="background:rgba(1,44,69,1)">-->
97
- <!-- <span class="font-16 col-sm-2">111111</span>-->
98
- <!-- <span class="font-16 col-sm-3">222222</span>-->
99
- <!-- <span class="font-16 col-sm-3">333333</span>-->
100
- <!-- <span class="font-16 col-sm-3">444444444</span>-->
101
- <!-- <span class="font-16 col-sm-3">55555555555</span>-->
102
- <!-- </div>-->
103
-
104
-
105
- </div>
106
- </div>
107
- </div>
108
- </div>
109
- <div id="top-mid" >
110
- <gmap :point="point"> </gmap>
111
- </div>
112
- <div id="top-right" >
113
- <div class="flex" >
114
- <div class="background-content-img scade-box col-sm-12 col-md-12" style="height: 30%">
115
- <div class="flex-row" style="height: 3%;margin-top: 1%;margin-left: 5%">
116
- <p style="color:white;padding-left: 40%;
117
- margin-top: -1%;">换表数量</p>
118
- </div>
119
- <div class="flex-row">
120
- <div class="row col-sm-3" style="padding: 20px 0px 10px 30px;">
121
- <span class="font-14-medium1">上周物联网表</span>
122
- <p style="color:#00f6ff"><span class="scada-font-title">{{changeMeter.wlwnum}}</span></p>
123
-
124
- <!-- <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
125
- <!-- <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
126
- </div>
127
- <div class="row col-sm-3" style="padding: 20px 0px 10px 30px;">
128
- <span class="font-14-medium1">上周射频表</span>
129
- <p style="color:#f27c79"><span class="scada-font-title">{{changeMeter.spnum}}</span></p>
130
-
131
- <!-- <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
132
- <!-- <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
133
- </div>
134
- <div class="row col-sm-6" style="padding: 20px 0px 10px 30px;">
135
- <span class="font-14-medium1">全年累计换表数量(所有表型)</span>
136
- <p style="color:#d5a329"><span class="scada-font-title">{{changeMeter.totalnum}}</span></p>
137
-
138
- <!-- <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
139
- <!-- <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
140
- </div>
141
- </div>
142
-
143
-
144
- </div>
145
- <div class="background-content-img1 scade-box col-sm-12 col-md-12" style="height: 65%;margin-top: 4%">
146
- <div class="flex-row" style="height: 3%;margin-top: 1%;margin-left: 5%">
147
- <p style="color:white;padding-left: 40%;
148
- margin-top: -1%;">分户挂表</p>
149
- </div>
150
- <div class="flex">
151
- <div class="row" style="height: 45%">
152
- <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
153
- <span class="font-14-medium1">当月工单总数</span>
154
- <p style="color:#00f6ff"><span class="scada-font-title">{{ changeMeterByType.monthToatl }}</span></p>
155
-
156
-
157
- </div>
158
- <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
159
- <span class="font-14-medium1">安装大于10天</span>
160
- <p style="color:#f27c79"><span class="scada-font-title">{{ changeMeterByType.tenType }}</span></p>
161
-
162
- </div>
163
- <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
164
- <span class="font-14-medium1">不具备安装</span>
165
- <p style="color:#d5a329"><span class="scada-font-title">{{ changeMeterByType.dnh }}</span></p>
166
-
167
- <!-- <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
168
- <!-- <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
169
- </div>
170
- </div>
171
- <div class="row" style="height: 45%">
172
-
173
- <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
174
- <span class="font-14-medium1">未完工</span>
175
- <p style="color:#8969ff"><span class="scada-font-title">{{ changeMeterByType.unfinished }}</span></p>
176
-
177
- <!-- <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
178
- <!-- <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
179
- </div>
180
- <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
181
- </div>
182
- <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
183
- <span class="font-14-medium1">工商安检数量</span>
184
- <p style="color:#0a9aff"><span class="scada-font-title">{{ changeMeterByType.gstotal }}</span></p>
185
-
186
- </div>
187
- </div>
188
- </div>
189
-
190
-
191
- </div>
192
- </div>
193
-
194
- </div>
195
- </div>
196
- <div class="flex-row " style="height: 47%;margin-top: 1em;">
197
-
198
- <div class="flex background-left-bottom" style="height: 100%;width: 50%">
199
-
200
- <div class="flex-row" style="width: 100%;height:50%">
201
-
202
- <div style="width:35%;height:100%;">
203
- <sell-echarts class=""></sell-echarts>
204
- </div>
205
- <div style="width:65%;height:100%;">
206
- <bar-chart></bar-chart>
207
- </div>
208
- </div>
209
- <div class="flex-row" style="width: 100%;height:50%">
210
- <div id="pie-one" >
211
- <pie-sell></pie-sell>
212
- </div>
213
- <div style="width:65%;height: 100%">
214
- <ring-sell></ring-sell>
215
- </div>
216
- </div>
217
- </div>
218
- <div class="flex background-left-bottom" style="height: 100%;width: 48%;margin-left:1%">
219
- <qh-call-center></qh-call-center>
220
- </div>
221
- </div>
222
-
223
-
224
-
225
- </template>
226
-
227
- <script>
228
- import {HttpResetClass} from 'vue-client'
229
- export default {
230
- title: '数据展示',
231
- data() {
232
- return{
233
- sumnum:0,
234
- showChart1 : true,
235
- showChart2 : false,
236
- moveDistance:'15',
237
- viewHeight:'400px',
238
- point:{
239
- url:'getDapingStationMap',
240
- data:{}
241
- },
242
- dane1:[],
243
- dane2:[],
244
- dane3:[],
245
- datass:[
246
- {fen:'汉投',name:'SCA系统2',money:10,state:'在建',state1:'在建'},
247
- {fen:'汉投1',name:'SCA系统2',money:21,state:'在建',state1:'在建'},
248
- {fen:'汉投2',name:'SDA系统3',money:131,state:'在建',state1:'在建'},
249
- {fen:'汉投3',name:'SDA系统4',money:41,state:'在建',state1:'在建'},
250
- {fen:'汉投4',name:'SDA系统4',money:51,state:'在建',state1:'在建'},
251
- {fen:'汉投5',name:'SCA系统22',money:81,state:'在建',state1:'在建'},
252
- {fen:'汉投6',name:'SDA系统4',money:21,state:'在建',state1:'在建'},
253
- {fen:'汉投7',name:'SDA系统21',money:221,state:'在建',state1:'在建'}
254
-
255
- ],
256
- datas1:[],
257
- datas2:[],
258
- datas3:[],
259
- //焕表
260
- changeMeter :{},
261
- changeMeterByType :{},
262
- }
263
- },
264
- methods: {
265
- async resize() {
266
- console.log('穿过来的值')
267
- this.changeshow = !this.changeshow
268
- console.log(this.changeshow)
269
- let http = new HttpResetClass()
270
- await http.load('post', '/rs/sql/getRegulatorTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
271
- console.log('高中压调压站---------------')
272
- console.log(res)
273
- for (let i = 0; i < res.data.length; i++) {
274
- console.log(res.data[i])
275
- let info = {
276
- f_name : res.data[i].f_name,
277
- f_cumulative_flow : res.data[i].f_cumulative_flow,
278
- f_input_pressure : res.data[i].f_input_pressure,
279
- f_instantaneous_flow : res.data[i].f_instantaneous_flow,
280
- f_output_pressure : res.data[i].f_output_pressure
281
- }
282
- this.datas2.push(info)
283
- }
284
- })
285
- await http.load('post', '/rs/sql/getHeatStationTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
286
- console.log('热源厂---------------')
287
- console.log(res)
288
- for (let i = 0; i < res.data.length; i++) {
289
- console.log(res.data[i])
290
- let info = {
291
- f_name : res.data[i].f_name,
292
- f_cumulative_flow : res.data[i].f_cumulative_flow,
293
- f_input_pressure : res.data[i].f_input_pressure,
294
- f_instantaneous_flow : res.data[i].f_instantaneous_flow,
295
- f_output_pressure : res.data[i].f_output_pressure
296
- }
297
- this.datas3.push(info)
298
- }
299
- })
300
- await http.load('post', '/rs/sql/getCityStationTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
301
- console.log('城市门站---------------')
302
- console.log(res)
303
- for (let i = 0; i < res.data.length; i++) {
304
- console.log(res.data[i])
305
- let info = {
306
- f_name : res.data[i].f_name,
307
- f_cumulative_flow : res.data[i].f_cumulative_flow,
308
- f_input_pressure : res.data[i].f_input_pressure,
309
- f_instantaneous_flow : res.data[i].f_instantaneous_flow,
310
- f_output_pressure : res.data[i].f_output_pressure
311
- }
312
- this.datas1.push(info)
313
- }
314
- console.log('this.datas1===================')
315
- console.log(this.datas1)
316
- })
317
- //换表
318
- await http.load('post', '/rs/sql/getChangeMeter', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
319
- console.log('换表~~~~~~~~~~~~~~~~')
320
- let info ={
321
- wlwnum : res.data[0].wlwnum,
322
- spnum : res.data[0].spnum,
323
- totalnum : res.data[0].totalnum
324
- }
325
-
326
- this.changeMeter =info
327
- console.log(this.changeMeter)
328
- })
329
- //分户换表
330
- await http.load('post', '/rs/sql/getChangeMeterByType', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
331
- console.log('分户换表~~~~~~~~~~~~~~~~')
332
- console.log( res.data[0])
333
- let info ={
334
- monthToatl : res.data[0].monthtoatl,
335
- tenType : res.data[0].tentype,
336
- dnh : res.data[0].dnh,
337
- unfinished : res.data[0].unfinished,
338
- gstotal : res.data[0].gstotal,
339
- }
340
- this.changeMeterByType =info
341
- console.log(this.changeMeterByType)
342
- })
343
- var self=this
344
- var index=-1
345
-
346
-
347
- setInterval(()=>{
348
- self.dane1.splice(0,self.dane1.length)
349
- index=(index+1)%self.datas1.length
350
- var maxid=0
351
- if(index>self.datas1.length-9){
352
- maxid=self.datas1.length-1
353
- }else {
354
- maxid=index+8
355
- }
356
- var i=0
357
- self.datas1.forEach(function (s) {
358
- if(i>=index&&i<=maxid){
359
- self.dane1.push(s)
360
- }
361
- i++
362
- })
363
- var s=this.dane1.length
364
- if(this.dane1.length<9){
365
- for(var i =0;i<9-s;i++){
366
- this.dane1.push( {f_name:'',f_cumulative_flow:'',f_input_pressure:'',f_instantaneous_flow:'', f_output_pressure:''},)
367
- }
368
- }
369
- }, 3000)
370
-
371
- setInterval(()=>{
372
- self.dane2.splice(0,self.dane2.length)
373
- index=(index+1)%self.datas2.length
374
- var maxid=0
375
- if(index>self.datas2.length-9){
376
- maxid=self.datas2.length-1
377
- }else {
378
- maxid=index
379
- }
380
- var i=0
381
- self.datas2.forEach(function (s) {
382
- if(i>=index&&i<=maxid){
383
- self.dane2.push(s)
384
- }
385
- i++
386
- })
387
- var s=this.dane2.length
388
- if(this.dane2.length<9){
389
- for(var i =0;i<9-s;i++){
390
-
391
- this.dane2.push( {f_name:'',f_cumulative_flow:'',f_input_pressure:'',f_instantaneous_flow:'', f_output_pressure:''},)
392
- }
393
- }
394
- }, 2000)
395
- setInterval(()=>{
396
- self.dane3.splice(0,self.dane3.length)
397
- index=(index+1)%self.datas3.length
398
- var maxid=0
399
- if(index>self.datas3.length-9){
400
- maxid=self.datas3.length-1
401
- }else {
402
- maxid=index
403
- }
404
- var i=0
405
- self.datas3.forEach(function (s) {
406
- if(i>=index&&i<=maxid){
407
- self.dane3.push(s)
408
- }
409
- i++
410
- })
411
- var s=this.dane3.length
412
- if(this.dane3.length<9){
413
- for(var i =0;i<9-s;i++){
414
- this.dane3.push( {fen:'',name:'',money:'',state:''},)
415
- }
416
- }
417
- }, 2000)
418
-
419
- },
420
-
421
-
422
-
423
- showCharts(title) {
424
- this.$emit("showCharts", title)
425
- }
426
- },
427
- ready () {
428
- this.resize()
429
-
430
- },
431
-
432
- props: ['changeshow'],
433
- computed: {
434
- top() {
435
- console.log('ssss')
436
- return -this.activeIndex * this.moveDistance + "px"; //定义移动的单元高度
437
- },
438
- },
439
- }
440
- </script>
441
- <style scoped>
442
- @media screen and (max-width: 1920px) {
443
- .main {
444
- height: 100%;
445
- padding: 1em;
446
- flex: 1 1 auto;
447
- flex-direction: column;
448
- display: flex;
449
- }
450
- .top-left-title{
451
- color: #ffc21f;
452
- font-size: 13px;
453
- }
454
-
455
- table {
456
- /*设置相邻单元格的边框间的距离*/
457
- border-spacing: 0;
458
- /*表格设置合并边框模型*/
459
- border-collapse: collapse;
460
- text-align: center;
461
- /*background-color: red;*/
462
- }
463
- /*关键设置 tbody出现滚动条*/
464
- table tbody {
465
- display: block;
466
- height: 70px;
467
-
468
- }
469
-
470
-
471
-
472
-
473
- table thead,
474
- tbody tr {
475
- display: table;
476
- width: 100%;
477
- table-layout: fixed;
478
- border: 1px;
479
- background-color: #012C45;
480
- margin-top: 2px;
481
- }
482
- tbody tr td {
483
- text-align: left;
484
- color: #00F6FF;
485
- }
486
-
487
-
488
-
489
-
490
-
491
-
492
- /*关键设置 tbody出现滚动条*/
493
- #tableLast tbody {
494
- display: block;
495
- height: 45px;
496
-
497
- }
498
-
499
- #tableLast thead,
500
- #tbodyLast tr {
501
- display: table;
502
- width: 100%;
503
- table-layout: fixed;
504
- border: 1px;
505
- background-color: #012C45;
506
- margin-top: 4px;
507
- }
508
- #tbodyLast tr td {
509
- text-align: left;
510
- color: #00F6FF;
511
- }
512
-
513
-
514
-
515
- .font-14-medium1{
516
- color: #ffffff;
517
- line-height: 24px;
518
- font-size: 16px;
519
- font-family: font-pingfang-medium;
520
- }
521
- .scada-font-title {
522
- margin-right: 1em;
523
- font-family: tRends;
524
- font-size: 25px;
525
- font-weight: normal;
526
- font-stretch: normal;
527
- line-height: 30px;
528
- letter-spacing: 0px;
529
- }
530
- .font-14 {
531
- font-size: 14px;
532
- font-family: tRends;
533
- }
534
- #top-left {
535
- /*padding: 1em;*/
536
- width: 32%;
537
- height: 100%;
538
- }
539
-
540
- #top-mid {
541
- /*padding: 1em;*/
542
- width: 30%;
543
- height: 100%;
544
- }
545
-
546
- #top-right {
547
- width: 37%;
548
- height: 100%;
549
- }
550
-
551
- .title-font {
552
- font-family: HYk2gj;
553
- font-size: 40px;
554
- font-weight: normal;
555
- font-stretch: normal;
556
- line-height: 26px;
557
- letter-spacing: 2px;
558
- color: #ffffff;
559
- }
560
-
561
- .title-main {
562
- margin: 0 auto;
563
- }
564
-
565
- .flex-inline {
566
- display: inline-flex;
567
- justify-content: space-around;
568
- }
569
-
570
- #pie-one {
571
- height: 100%;
572
- width: 35%;
573
- }
574
-
575
- #weiruhu {
576
- font-family: tRends;
577
- font-size: 24px;
578
- font-weight: normal;
579
- font-stretch: normal;
580
- line-height: 35px;
581
- letter-spacing: 0px;
582
- color: #00f6ff;
583
- }
584
-
585
- #anjian {
586
- font-family: tRENDS;
587
- font-size: 24px;
588
- font-weight: normal;
589
- font-stretch: normal;
590
- line-height: 35px;
591
- letter-spacing: 0px;
592
- color: #ffc21f;
593
- }
594
-
595
- .qinhuamap {
596
- position: absolute;
597
- top: 2%;
598
- left: 35%;
599
- width: 28%;
600
- height: 57%;
601
- }
602
- .scroll-content {
603
- position: relative;
604
- transition: top 0.825s;
605
- }
606
-
607
- }
608
- @media screen and (max-width: 1440px) {
609
- .main {
610
- height: 100%;
611
- padding: 1em;
612
- flex: 1 1 auto;
613
- flex-direction: column;
614
- display: flex;
615
- }
616
-
617
- #top-left {
618
- /*padding: 1em;*/
619
- width: 32%;
620
- height: 100%;
621
- }
622
-
623
- #top-mid {
624
- /*padding: 1em;*/
625
- width: 30%;
626
- height: 100%;
627
- }
628
-
629
- #top-right {
630
- width: 37%;
631
- height: 100%;
632
- }
633
-
634
- .title-font {
635
- font-family: HYk2gj;
636
- font-size: 30px;
637
- font-weight: normal;
638
- font-stretch: normal;
639
- line-height: 22px;
640
- letter-spacing: 2px;
641
- color: #ffffff;
642
- }
643
-
644
- .title-main {
645
- margin: 0 auto;
646
- }
647
-
648
- .flex-inline {
649
- display: inline-flex;
650
- justify-content: space-around;
651
- }
652
-
653
- #pie-one {
654
- height: 100%;
655
- width: 35%;
656
- }
657
-
658
- #weiruhu {
659
- font-family: tRends;
660
- font-size: 18px;
661
- font-weight: normal;
662
- font-stretch: normal;
663
- line-height: 22px;
664
- letter-spacing: 0px;
665
- color: #00f6ff;
666
- }
667
-
668
- #anjian {
669
- font-family: tRENDS;
670
- font-size: 18px;
671
- font-weight: normal;
672
- font-stretch: normal;
673
- line-height: 22px;
674
- letter-spacing: 0px;
675
- color: #ffc21f;
676
- }
677
-
678
- .qinhuamap {
679
- position: absolute;
680
- top: 2%;
681
- left: 35%;
682
- width: 28%;
683
- height: 57%;
684
- }
685
- .font-14-medium{
686
- color: #ffffff !important;
687
- line-height: 18px;
688
- font-size: 12px;
689
- font-family: font-pingfang-medium;
690
- }
691
- .scroll-content {
692
- position: relative;
693
- transition: top 0.825s;
694
- }
695
- }
696
- </style>
697
-
1
+ <template>
2
+
3
+
4
+ <div class="flex-row" style="height: 44%">
5
+ <div id="top-left">
6
+ <div class="flex">
7
+
8
+ <div class="flex">
9
+ <div class="flex-row" style="height: 15%">
10
+ <p class="top-left-title">城市门站:</p>
11
+ </div>
12
+ <div class="flex call" style="height: 90%">
13
+ <table>
14
+ <!-- <thead style="border:1px solid #227ad8;height: 25px;width:100%;padding-top: 2px;background-color: #002f45">-->
15
+ <thead class="thead" style=" border: solid 1px #0093ff;">
16
+ <tr>
17
+ <th class="font-14-medium1 col-sm-2">城区</th>
18
+ <th class="font-14-medium1 col-sm-3">进站压力</th>
19
+ <th class="font-14-medium1 col-sm-3">出站压力</th>
20
+ <th class="font-14-medium1 col-sm-3">瞬时流量</th>
21
+ <!-- <th class="font-14-medium1 col-sm-3">累计流量</th>-->
22
+ </tr>
23
+
24
+ </thead>
25
+ <tbody >
26
+ <tr v-for="item in datas1" style="margin-top: 10px;">
27
+ <td>{{item.f_name}}</td>
28
+ <td>{{item.f_input_pressure}}</td>
29
+ <td>{{item.f_output_pressure}}</td>
30
+ <td>{{item.f_instantaneous_flow}}</td>
31
+ <!-- <td>{{item.f_cumulative_flow}}</td>-->
32
+ </tr>
33
+ </tbody>
34
+ </table>
35
+
36
+
37
+ </div>
38
+ </div>
39
+ <div class="flex" style="height: 30%">
40
+ <!-- <p class="top-left-title" style="height: 5%">高中压调压站:</p>-->
41
+ <!-- <div class="flex" style="height: 90%">-->
42
+ <!-- <table>-->
43
+ <!-- &lt;!&ndash; <thead style="border:1px solid #227ad8;height: 25px;width:100%;padding-top: 2px;background-color: #002f45">&ndash;&gt;-->
44
+ <!-- <thead class="thead" style=" border: solid 1px #0093ff;">-->
45
+ <!-- <tr>-->
46
+ <!-- <th class="font-14-medium1 col-sm-2">城区</th>-->
47
+ <!-- <th class="font-14-medium1 col-sm-3">进站压力</th>-->
48
+ <!-- <th class="font-14-medium1 col-sm-3">出站压力</th>-->
49
+ <!-- <th class="font-14-medium1 col-sm-3">瞬时流量</th>-->
50
+ <!-- <th class="font-14-medium1 col-sm-3">累计流量</th>-->
51
+ <!-- </tr>-->
52
+
53
+ <!-- </thead>-->
54
+ <!-- <tbody class="scroll-content">-->
55
+ <!-- <tr v-for="item in dane2"><td>{{item.f_name}}</td><td>{{item.f_input_pressure}}</td><td>{{item.f_output_pressure}}</td><td>{{item.f_instantaneous_flow}}</td><td>{{item.f_cumulative_flow}}</td></tr>-->
56
+ <!-- </tbody>-->
57
+ <!-- </table>-->
58
+
59
+
60
+ <!-- </div>-->
61
+ </div>
62
+ <div class="flex">
63
+ <!-- <p class="top-left-title" style="height: 5%">热源厂:</p>-->
64
+ <!-- <div class="flex" style="height: 90%">-->
65
+ <!-- <table>-->
66
+ <!-- &lt;!&ndash; <thead style="border:1px solid #227ad8;height: 25px;width:100%;padding-top: 2px;background-color: #002f45">&ndash;&gt;-->
67
+ <!-- <thead class="thead" style=" border: solid 1px #0093ff;">-->
68
+ <!-- <tr>-->
69
+ <!-- <th class="font-14-medium1 col-sm-2">城区</th>-->
70
+ <!-- <th class="font-14-medium1 col-sm-3">进站压力</th>-->
71
+ <!-- <th class="font-14-medium1 col-sm-3">出站压力</th>-->
72
+ <!-- <th class="font-14-medium1 col-sm-3">瞬时流量</th>-->
73
+ <!-- <th class="font-14-medium1 col-sm-3">累计流量</th>-->
74
+ <!-- </tr>-->
75
+
76
+ <!-- </thead>-->
77
+ <!-- <tbody class="scroll-content">-->
78
+ <!-- <tr v-for="item in dane3"><td>{{item.f_name}}</td><td>{{item.f_input_pressure}}</td><td>{{item.f_output_pressure}}</td><td>{{item.f_instantaneous_flow}}</td><td>{{item.f_cumulative_flow}}</td></tr>-->
79
+ <!-- </tbody>-->
80
+ <!-- </table>-->
81
+
82
+ <!-- &lt;!&ndash;&lt;!&ndash; <div class="flex-row scada-title" style="background:rgba(1,44,69,1)" v-for="item in items">&ndash;&gt;&ndash;&gt;-->
83
+ <!-- &lt;!&ndash;&lt;!&ndash; <span class="font-16 flex-1">{{item.ssn}}</span>&ndash;&gt;&ndash;&gt;-->
84
+ <!-- &lt;!&ndash;&lt;!&ndash; <span class="font-16 flex-1">{{item.sbsjfl}}</span>&ndash;&gt;&ndash;&gt;-->
85
+ <!-- &lt;!&ndash;&lt;!&ndash; <span class="font-16 flex-1">{{item.tb}}</span>&ndash;&gt;&ndash;&gt;-->
86
+ <!-- &lt;!&ndash;&lt;!&ndash; </div>&ndash;&gt;&ndash;&gt;-->
87
+ <!-- &lt;!&ndash; <div class="flex-row" style="background:rgba(1,44,69,1)">&ndash;&gt;-->
88
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-2">12312</span>&ndash;&gt;-->
89
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-3">412412</span>&ndash;&gt;-->
90
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-3">124124</span>&ndash;&gt;-->
91
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-3">22222</span>&ndash;&gt;-->
92
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-3">3333</span>&ndash;&gt;-->
93
+ <!-- &lt;!&ndash; </div>&ndash;&gt;-->
94
+ <!-- &lt;!&ndash; <div class="flex-row" style="background:rgba(1,44,69,1)">&ndash;&gt;-->
95
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-2">111111</span>&ndash;&gt;-->
96
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-3">222222</span>&ndash;&gt;-->
97
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-3">333333</span>&ndash;&gt;-->
98
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-3">444444444</span>&ndash;&gt;-->
99
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-3">55555555555</span>&ndash;&gt;-->
100
+ <!-- &lt;!&ndash; </div>&ndash;&gt;-->
101
+ <!-- &lt;!&ndash; <div class="flex-row" style="background:rgba(1,44,69,1)">&ndash;&gt;-->
102
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-2">111111</span>&ndash;&gt;-->
103
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-3">222222</span>&ndash;&gt;-->
104
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-3">333333</span>&ndash;&gt;-->
105
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-3">444444444</span>&ndash;&gt;-->
106
+ <!-- &lt;!&ndash; <span class="font-16 col-sm-3">55555555555</span>&ndash;&gt;-->
107
+ <!-- &lt;!&ndash; </div>&ndash;&gt;-->
108
+
109
+
110
+ <!-- </div>-->
111
+ </div>
112
+ </div>
113
+ </div>
114
+ <div id="top-mid" >
115
+ <qinhua-map class="qinhuamap" mode="1" idname="shanximap"></qinhua-map>
116
+ <!-- <gmap :point="point"> </gmap>-->
117
+ </div>
118
+ <div id="top-right" >
119
+ <div class="flex" >
120
+ <div class="background-content-img scade-box col-sm-12 col-md-12" style="height: 30%">
121
+ <div class="flex-row" style="height: 3%;margin-top: 1%;margin-left: 5%">
122
+ <p style="color:white;padding-left: 40%;
123
+ margin-top: -1%;">换表数量</p>
124
+ </div>
125
+ <div class="flex-row">
126
+ <div class="row col-sm-3" style="padding: 20px 0px 10px 30px;">
127
+ <span class="font-14-medium1">上周物联网表</span>
128
+ <p style="color:#00f6ff"><span class="scada-font-title">{{changeMeter.wlwnum}}</span></p>
129
+
130
+ <!-- <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
131
+ <!-- <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
132
+ </div>
133
+ <div class="row col-sm-3" style="padding: 20px 0px 10px 30px;">
134
+ <span class="font-14-medium1">上周射频表</span>
135
+ <p style="color:#f27c79"><span class="scada-font-title">{{changeMeter.spnum}}</span></p>
136
+
137
+ <!-- <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
138
+ <!-- <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
139
+ </div>
140
+ <div class="row col-sm-6" style="padding: 20px 0px 10px 30px;">
141
+ <span class="font-14-medium1">全年累计换表数量(所有表型)</span>
142
+ <p style="color:#d5a329"><span class="scada-font-title">{{changeMeter.totalnum}}</span></p>
143
+
144
+ <!-- <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
145
+ <!-- <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
146
+ </div>
147
+ </div>
148
+
149
+
150
+ </div>
151
+ <div class="background-content-img1 scade-box col-sm-12 col-md-12" style="height: 65%;margin-top: 4%">
152
+ <div class="flex-row" style="height: 3%;margin-top: 1%;margin-left: 5%">
153
+ <p style="color:white;padding-left: 40%;
154
+ margin-top: -1%;">分户挂表</p>
155
+ </div>
156
+ <div class="flex">
157
+ <div class="row" style="height: 45%">
158
+ <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
159
+ <span class="font-14-medium1">当月工单总数</span>
160
+ <p style="color:#00f6ff"><span class="scada-font-title">{{ changeMeterByType.monthToatl }}</span></p>
161
+
162
+
163
+ </div>
164
+ <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
165
+ <span class="font-14-medium1">安装大于10天</span>
166
+ <p style="color:#f27c79"><span class="scada-font-title">{{ changeMeterByType.tenType }}</span></p>
167
+
168
+ </div>
169
+ <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
170
+ <span class="font-14-medium1">不具备安装</span>
171
+ <p style="color:#d5a329"><span class="scada-font-title">{{ changeMeterByType.dnh }}</span></p>
172
+
173
+ <!-- <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
174
+ <!-- <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
175
+ </div>
176
+ </div>
177
+ <div class="row" style="height: 45%">
178
+
179
+ <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
180
+ <span class="font-14-medium1">未完工</span>
181
+ <p style="color:#8969ff"><span class="scada-font-title">{{ changeMeterByType.unfinished }}</span></p>
182
+
183
+ <!-- <p style="color:#ffc21f"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
184
+ <!-- <p style="color:#f27c79"><span class="scada-font-title">1152</span><span class="font-14">万</span></p>-->
185
+ </div>
186
+ <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
187
+ </div>
188
+ <div class="row col-sm-4" style="padding: 20px 0px 10px 30px;">
189
+ <span class="font-14-medium1">工商安检数量</span>
190
+ <p style="color:#0a9aff"><span class="scada-font-title">{{ changeMeterByType.gstotal }}</span></p>
191
+
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+
197
+ </div>
198
+ </div>
199
+
200
+ </div>
201
+ </div>
202
+ <div class="flex-row " style="height: 47%;margin-top: 1em;">
203
+
204
+ <div class="flex background-left-bottom" style="height: 100%;width: 50%">
205
+
206
+ <div class="flex-row" style="width: 100%;height:50%">
207
+
208
+ <div style="width:35%;height:100%;">
209
+ <sell-echarts class=""></sell-echarts>
210
+ </div>
211
+ <div style="width:65%;height:100%;">
212
+ <bar-chart></bar-chart>
213
+ </div>
214
+ </div>
215
+ <div class="flex-row" style="width: 100%;height:50%">
216
+ <div id="pie-one" >
217
+ <pie-sell></pie-sell>
218
+ </div>
219
+ <div style="width:65%;height: 100%">
220
+ <ring-sell></ring-sell>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ <div class="flex background-left-bottom" style="height: 100%;width: 48%;margin-left:1%">
225
+ <qh-call-center></qh-call-center>
226
+ </div>
227
+ </div>
228
+
229
+
230
+
231
+ </template>
232
+
233
+ <script>
234
+ import {HttpResetClass} from 'vue-client'
235
+ export default {
236
+ title: '数据展示',
237
+ data() {
238
+ return{
239
+ sumnum:0,
240
+ showChart1 : true,
241
+ showChart2 : false,
242
+ moveDistance:'15',
243
+ viewHeight:'400px',
244
+ point:{
245
+ url:'getDapingStationMap',
246
+ data:{}
247
+ },
248
+ dane1:[],
249
+ dane2:[],
250
+ dane3:[],
251
+ datass:[
252
+ {fen:'汉投',name:'SCA系统2',money:10,state:'在建',state1:'在建'},
253
+ {fen:'汉投1',name:'SCA系统2',money:21,state:'在建',state1:'在建'},
254
+ {fen:'汉投2',name:'SDA系统3',money:131,state:'在建',state1:'在建'},
255
+ {fen:'汉投3',name:'SDA系统4',money:41,state:'在建',state1:'在建'},
256
+ {fen:'汉投4',name:'SDA系统4',money:51,state:'在建',state1:'在建'},
257
+ {fen:'汉投5',name:'SCA系统22',money:81,state:'在建',state1:'在建'},
258
+ {fen:'汉投6',name:'SDA系统4',money:21,state:'在建',state1:'在建'},
259
+ {fen:'汉投7',name:'SDA系统21',money:221,state:'在建',state1:'在建'}
260
+
261
+ ],
262
+ datas1:[],
263
+ datas2:[],
264
+ datas3:[],
265
+ //焕表
266
+ changeMeter :{},
267
+ changeMeterByType :{},
268
+ }
269
+ },
270
+ methods: {
271
+ async resize() {
272
+ console.log('穿过来的值')
273
+ this.changeshow = !this.changeshow
274
+ console.log(this.changeshow)
275
+ let http = new HttpResetClass()
276
+ // await http.load('post', '/rs/sql/getRegulatorTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
277
+ // console.log('高中压调压站---------------')
278
+ // console.log(res)
279
+ // for (let i = 0; i < res.data.length; i++) {
280
+ // console.log(res.data[i])
281
+ // let info = {
282
+ // f_name : res.data[i].f_name,
283
+ // f_cumulative_flow : res.data[i].f_cumulative_flow,
284
+ // f_input_pressure : res.data[i].f_input_pressure,
285
+ // f_instantaneous_flow : res.data[i].f_instantaneous_flow,
286
+ // f_output_pressure : res.data[i].f_output_pressure
287
+ // }
288
+ // this.datas2.push(info)
289
+ // }
290
+ // })
291
+ // await http.load('post', '/rs/sql/getHeatStationTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
292
+ // console.log('热源厂---------------')
293
+ // console.log(res)
294
+ // for (let i = 0; i < res.data.length; i++) {
295
+ // console.log(res.data[i])
296
+ // let info = {
297
+ // f_name : res.data[i].f_name,
298
+ // f_cumulative_flow : res.data[i].f_cumulative_flow,
299
+ // f_input_pressure : res.data[i].f_input_pressure,
300
+ // f_instantaneous_flow : res.data[i].f_instantaneous_flow,
301
+ // f_output_pressure : res.data[i].f_output_pressure
302
+ // }
303
+ // this.datas3.push(info)
304
+ // }
305
+ // })
306
+ await http.load('post', '/rs/sql/getCityStationTable', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
307
+ console.log('城市门站---------------')
308
+ console.log(res)
309
+ for (let i = 0; i < res.data.length; i++) {
310
+ console.log(res.data[i])
311
+ let info = {
312
+ f_name : res.data[i].f_name,
313
+ f_cumulative_flow : res.data[i].f_cumulative_flow,
314
+ f_input_pressure : res.data[i].f_input_pressure,
315
+ f_instantaneous_flow : res.data[i].f_instantaneous_flow,
316
+ f_output_pressure : res.data[i].f_output_pressure
317
+ }
318
+ this.datas1.push(info)
319
+ }
320
+ console.log('this.datas1===================')
321
+ console.log(this.datas1)
322
+ })
323
+ //换表
324
+ await http.load('post', '/rs/sql/getChangeMeter', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
325
+ console.log('换表~~~~~~~~~~~~~~~~')
326
+ let info ={
327
+ wlwnum : res.data[0].wlwnum,
328
+ spnum : res.data[0].spnum,
329
+ totalnum : res.data[0].totalnum
330
+ }
331
+
332
+ this.changeMeter =info
333
+ console.log(this.changeMeter)
334
+ })
335
+ //分户换表
336
+ await http.load('post', '/rs/sql/getChangeMeterByType', {data:{}}, {rejectMsg: null, resolveMsg: null}).then((res)=>{
337
+ console.log('分户换表~~~~~~~~~~~~~~~~')
338
+ console.log( res.data[0])
339
+ let info ={
340
+ monthToatl : res.data[0].monthtoatl,
341
+ tenType : res.data[0].tentype,
342
+ dnh : res.data[0].dnh,
343
+ unfinished : res.data[0].unfinished,
344
+ gstotal : res.data[0].gstotal,
345
+ }
346
+ this.changeMeterByType =info
347
+ console.log(this.changeMeterByType)
348
+ })
349
+ var self=this
350
+ var index=-1
351
+
352
+
353
+ // setInterval(()=>{
354
+ // self.dane1.splice(0,self.dane1.length)
355
+ // index=(index+1)%self.datas1.length
356
+ // var maxid=0
357
+ // if(index>self.datas1.length-9){
358
+ // maxid=self.datas1.length-1
359
+ // }else {
360
+ // maxid=index+8
361
+ // }
362
+ // var i=0
363
+ // self.datas1.forEach(function (s) {
364
+ // if(i>=index&&i<=maxid){
365
+ // self.dane1.push(s)
366
+ // }
367
+ // i++
368
+ // })
369
+ // var s=this.dane1.length
370
+ // if(this.dane1.length<9){
371
+ // for(var i =0;i<9-s;i++){
372
+ // this.dane1.push( {f_name:'',f_cumulative_flow:'',f_input_pressure:'',f_instantaneous_flow:'', f_output_pressure:''},)
373
+ // }
374
+ // }
375
+ // }, 3000)
376
+
377
+ setInterval(()=>{
378
+ self.dane2.splice(0,self.dane2.length)
379
+ index=(index+1)%self.datas2.length
380
+ var maxid=0
381
+ if(index>self.datas2.length-9){
382
+ maxid=self.datas2.length-1
383
+ }else {
384
+ maxid=index
385
+ }
386
+ var i=0
387
+ self.datas2.forEach(function (s) {
388
+ if(i>=index&&i<=maxid){
389
+ self.dane2.push(s)
390
+ }
391
+ i++
392
+ })
393
+ var s=this.dane2.length
394
+ if(this.dane2.length<9){
395
+ for(var i =0;i<9-s;i++){
396
+
397
+ this.dane2.push( {f_name:'',f_cumulative_flow:'',f_input_pressure:'',f_instantaneous_flow:'', f_output_pressure:''},)
398
+ }
399
+ }
400
+ }, 2000)
401
+ setInterval(()=>{
402
+ self.dane3.splice(0,self.dane3.length)
403
+ index=(index+1)%self.datas3.length
404
+ var maxid=0
405
+ if(index>self.datas3.length-9){
406
+ maxid=self.datas3.length-1
407
+ }else {
408
+ maxid=index
409
+ }
410
+ var i=0
411
+ self.datas3.forEach(function (s) {
412
+ if(i>=index&&i<=maxid){
413
+ self.dane3.push(s)
414
+ }
415
+ i++
416
+ })
417
+ var s=this.dane3.length
418
+ if(this.dane3.length<9){
419
+ for(var i =0;i<9-s;i++){
420
+ this.dane3.push( {fen:'',name:'',money:'',state:''},)
421
+ }
422
+ }
423
+ }, 2000)
424
+
425
+ },
426
+
427
+
428
+
429
+ showCharts(title) {
430
+ this.$emit("showCharts", title)
431
+ }
432
+ },
433
+ ready () {
434
+ this.resize()
435
+
436
+ },
437
+
438
+ props: ['changeshow'],
439
+ computed: {
440
+ top() {
441
+ console.log('ssss')
442
+ return -this.activeIndex * this.moveDistance + "px"; //定义移动的单元高度
443
+ },
444
+ },
445
+ }
446
+ </script>
447
+ <style scoped>
448
+ @media screen and (max-width: 1920px) {
449
+ .main {
450
+ height: 100%;
451
+ padding: 1em;
452
+ flex: 1 1 auto;
453
+ flex-direction: column;
454
+ display: flex;
455
+ }
456
+ .top-left-title{
457
+ color: #ffc21f;
458
+ font-size: 13px;
459
+ }
460
+
461
+ table {
462
+ /*设置相邻单元格的边框间的距离*/
463
+ border-spacing: 0;
464
+ /*表格设置合并边框模型*/
465
+ border-collapse: collapse;
466
+ text-align: center;
467
+ /*background-color: red;*/
468
+ }
469
+ /*关键设置 tbody出现滚动条*/
470
+ table tbody {
471
+ display: block;
472
+ height: 70px;
473
+
474
+ }
475
+
476
+
477
+
478
+
479
+ table thead,
480
+ tbody tr {
481
+ display: table;
482
+ width: 100%;
483
+ table-layout: fixed;
484
+ border: 1px;
485
+ background-color: #012C45;
486
+ margin-top: 2px;
487
+ }
488
+ tbody tr td {
489
+ text-align: left;
490
+ color: #00F6FF;
491
+ }
492
+
493
+
494
+
495
+
496
+
497
+
498
+ /*关键设置 tbody出现滚动条*/
499
+ #tableLast tbody {
500
+ display: block;
501
+ height: 45px;
502
+
503
+ }
504
+
505
+ #tableLast thead,
506
+ #tbodyLast tr {
507
+ display: table;
508
+ width: 100%;
509
+ table-layout: fixed;
510
+ border: 1px;
511
+ background-color: #012C45;
512
+ margin-top: 4px;
513
+ }
514
+ #tbodyLast tr td {
515
+ text-align: left;
516
+ color: #00F6FF;
517
+ }
518
+
519
+
520
+
521
+ .font-14-medium1{
522
+ color: #ffffff;
523
+ line-height: 24px;
524
+ font-size: 16px;
525
+ font-family: font-pingfang-medium;
526
+ }
527
+ .scada-font-title {
528
+ margin-right: 1em;
529
+ font-family: tRends;
530
+ font-size: 25px;
531
+ font-weight: normal;
532
+ font-stretch: normal;
533
+ line-height: 30px;
534
+ letter-spacing: 0px;
535
+ }
536
+ .font-14 {
537
+ font-size: 14px;
538
+ font-family: tRends;
539
+ }
540
+ #top-left {
541
+ /*padding: 1em;*/
542
+ width: 32%;
543
+ height: 100%;
544
+ }
545
+
546
+ #top-mid {
547
+ /*padding: 1em;*/
548
+ width: 30%;
549
+ height: 100%;
550
+ }
551
+
552
+ #top-right {
553
+ width: 37%;
554
+ height: 100%;
555
+ }
556
+
557
+ .title-font {
558
+ font-family: HYk2gj;
559
+ font-size: 40px;
560
+ font-weight: normal;
561
+ font-stretch: normal;
562
+ line-height: 26px;
563
+ letter-spacing: 2px;
564
+ color: #ffffff;
565
+ }
566
+
567
+ .title-main {
568
+ margin: 0 auto;
569
+ }
570
+
571
+ .flex-inline {
572
+ display: inline-flex;
573
+ justify-content: space-around;
574
+ }
575
+
576
+ #pie-one {
577
+ height: 100%;
578
+ width: 35%;
579
+ }
580
+
581
+ #weiruhu {
582
+ font-family: tRends;
583
+ font-size: 24px;
584
+ font-weight: normal;
585
+ font-stretch: normal;
586
+ line-height: 35px;
587
+ letter-spacing: 0px;
588
+ color: #00f6ff;
589
+ }
590
+
591
+ #anjian {
592
+ font-family: tRENDS;
593
+ font-size: 24px;
594
+ font-weight: normal;
595
+ font-stretch: normal;
596
+ line-height: 35px;
597
+ letter-spacing: 0px;
598
+ color: #ffc21f;
599
+ }
600
+
601
+ .qinhuamap {
602
+ position: absolute;
603
+ top: 2%;
604
+ left: 35%;
605
+ width: 28%;
606
+ height: 57%;
607
+ }
608
+ .scroll-content {
609
+ position: relative;
610
+ transition: top 0.825s;
611
+ }
612
+
613
+ }
614
+ @media screen and (max-width: 1440px) {
615
+ .main {
616
+ height: 100%;
617
+ padding: 1em;
618
+ flex: 1 1 auto;
619
+ flex-direction: column;
620
+ display: flex;
621
+ }
622
+
623
+ #top-left {
624
+ /*padding: 1em;*/
625
+ width: 32%;
626
+ height: 100%;
627
+ }
628
+
629
+ #top-mid {
630
+ /*padding: 1em;*/
631
+ width: 30%;
632
+ height: 100%;
633
+ }
634
+
635
+ #top-right {
636
+ width: 37%;
637
+ height: 100%;
638
+ }
639
+
640
+ .title-font {
641
+ font-family: HYk2gj;
642
+ font-size: 30px;
643
+ font-weight: normal;
644
+ font-stretch: normal;
645
+ line-height: 22px;
646
+ letter-spacing: 2px;
647
+ color: #ffffff;
648
+ }
649
+
650
+ .title-main {
651
+ margin: 0 auto;
652
+ }
653
+
654
+ .flex-inline {
655
+ display: inline-flex;
656
+ justify-content: space-around;
657
+ }
658
+
659
+ #pie-one {
660
+ height: 100%;
661
+ width: 35%;
662
+ }
663
+
664
+ #weiruhu {
665
+ font-family: tRends;
666
+ font-size: 18px;
667
+ font-weight: normal;
668
+ font-stretch: normal;
669
+ line-height: 22px;
670
+ letter-spacing: 0px;
671
+ color: #00f6ff;
672
+ }
673
+
674
+ #anjian {
675
+ font-family: tRENDS;
676
+ font-size: 18px;
677
+ font-weight: normal;
678
+ font-stretch: normal;
679
+ line-height: 22px;
680
+ letter-spacing: 0px;
681
+ color: #ffc21f;
682
+ }
683
+
684
+ .qinhuamap {
685
+ position: absolute;
686
+ top: 2%;
687
+ left: 35%;
688
+ width: 28%;
689
+ height: 57%;
690
+ }
691
+ .font-14-medium{
692
+ color: #ffffff !important;
693
+ line-height: 18px;
694
+ font-size: 12px;
695
+ font-family: font-pingfang-medium;
696
+ }
697
+ .scroll-content {
698
+ position: relative;
699
+ transition: top 0.825s;
700
+ }
701
+ }
702
+ </style>
703
+