manage-client 3.1.14 → 3.1.17

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