工业互联网平台前端 vue2版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-07-23 8501060c4f921d1e744c477e4dc08eb47b52693c
提交 | 用户 | 时间
850106 1 <template>
H 2   <el-card shadow="never" class="aui-card--fill">
3     <el-tabs v-model="activeName" @tab-click="handleClick">
4       <el-tab-pane label="浅槽分选307" name="tab1">
5         <el-row type="flex" justify="space-around">
6           <el-col :span="8">
7             <div class="any-card border-down">
8               <el-form :model="qcfx307.anyData" ref="qcfx307AnyData" label-width="80px">
9                 <el-row :gutter="20">
10                   <el-col :span="24">
11                     <el-form-item label="诊断结果" prop="alarmInfo">
12                       <el-input v-model="qcfx307.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
13                     </el-form-item>
14                   </el-col>
15                   <el-col :span="24">
16                     <el-form-item label="诊断时间" prop="anyTime">
17                       <el-input v-model="qcfx307.anyData.anyTime" readonly></el-input>
18                     </el-form-item>
19                   </el-col>
20                 </el-row>
21               </el-form>
22               <el-divider content-position="left">诊断记录</el-divider>
23               <any-report :procCode="qcfx307.anyData.code"></any-report>
24             </div>
25           </el-col>
26           <el-col :span="16">
27             <el-form :inline="true" :model="qcfx307.dataForm" label-width="100px">
28               <el-form-item>
29                 <el-date-picker
30                     v-model="qcfx307.dataForm.startDate"
31                     type="datetime"
32                     value-format="yyyy-MM-dd HH:mm:ss"
33                     placeholder="选择开始时间">
34                 </el-date-picker>
35               </el-form-item>
36               <el-form-item>
37                 <el-date-picker
38                     v-model="qcfx307.dataForm.endDate"
39                     type="datetime"
40                     value-format="yyyy-MM-dd HH:mm:ss"
41                     placeholder="选择结束时间">
42                 </el-date-picker>
43               </el-form-item>
44               <el-form-item>
45                 <el-button :loading="qcfx307.hjt.loading" @click="searchDataQc307()">{{ $t('query') }}</el-button>
46               </el-form-item>
47             </el-form>
48             <div class="scrollable-container border-down">
49               <!--合介桶桶位-->
50               <div class="chart-cont" v-loading="qcfx307.hjt.loading">
51                 <div id="chartQcfx307Hjt" class="chart-line"></div>
52               </div>
53               <!--稀介桶桶位-->
54               <div class="chart-cont" v-loading="qcfx307.xjt.loading">
55                 <div id="chartQcfx307Xjt" class="chart-line"></div>
56               </div>
57               <!--煤泥桶桶位-->
58               <div class="chart-cont" v-loading="qcfx307.mnt.loading">
59                 <div id="chartQcfx307Mnt" class="chart-line"></div>
60               </div>
61               <!--磁性物含量-->
62               <div class="chart-cont" v-loading="qcfx307.cxw.loading">
63                 <div id="chartQcfx307Cxw" class="chart-line"></div>
64               </div>
65               <!--合介密度-->
66               <div class="chart-cont" v-loading="qcfx307.hjmd.loading">
67                 <div id="chartQcfx307Hjmd" class="chart-line"></div>
68               </div>
69               <!--分流阀开度-->
70               <div class="chart-cont" v-loading="qcfx307.flf.loading">
71                 <div id="chartQcfx307Flf" class="chart-line"></div>
72               </div>
73               <!--加水阀开度-->
74               <div class="chart-cont" v-loading="qcfx307.jsf.loading">
75                 <div id="chartQcfx307Jsf" class="chart-line"></div>
76               </div>
77               <!--灰分-->
78               <div class="chart-cont" v-loading="qcfx307.hf.loading">
79                 <div id="chartQcfx307Hf" class="chart-line"></div>
80               </div>
81             </div>
82           </el-col>
83         </el-row>
84       </el-tab-pane>
85       <el-tab-pane label="浅槽分选308" name="tab2">
86         <el-row type="flex" justify="space-around">
87           <el-col :span="8">
88             <div class="any-card border-down">
89               <el-form :model="qcfx308.anyData" ref="qcfx308AnyData" label-width="80px">
90                 <el-row :gutter="20">
91                   <el-col :span="24">
92                     <el-form-item label="诊断结果" prop="alarmInfo">
93                       <el-input v-model="qcfx308.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
94                     </el-form-item>
95                   </el-col>
96                   <el-col :span="24">
97                     <el-form-item label="诊断时间" prop="anyTime">
98                       <el-input v-model="qcfx308.anyData.anyTime" readonly></el-input>
99                     </el-form-item>
100                   </el-col>
101                 </el-row>
102               </el-form>
103               <el-divider content-position="left">诊断记录</el-divider>
104               <any-report :procCode="qcfx308.anyData.code"></any-report>
105             </div>
106           </el-col>
107           <el-col :span="16">
108             <el-form :inline="true" :model="qcfx308.dataForm" label-width="100px">
109               <el-form-item>
110                 <el-date-picker
111                     v-model="qcfx308.dataForm.startDate"
112                     type="datetime"
113                     value-format="yyyy-MM-dd HH:mm:ss"
114                     placeholder="选择开始时间">
115                 </el-date-picker>
116               </el-form-item>
117               <el-form-item>
118                 <el-date-picker
119                     v-model="qcfx308.dataForm.endDate"
120                     type="datetime"
121                     value-format="yyyy-MM-dd HH:mm:ss"
122                     placeholder="选择结束时间">
123                 </el-date-picker>
124               </el-form-item>
125               <el-form-item>
126                 <el-button :loading="qcfx308.hjt.loading" @click="searchDataQc308()">{{ $t('query') }}</el-button>
127               </el-form-item>
128             </el-form>
129             <div class="scrollable-container border-down">
130               <!--合介桶桶位-->
131               <div class="chart-cont" v-loading="qcfx308.hjt.loading">
132                 <div id="chartQcfx308Hjt" class="chart-line"></div>
133               </div>
134               <!--稀介桶桶位-->
135               <div class="chart-cont" v-loading="qcfx308.xjt.loading">
136                 <div id="chartQcfx308Xjt" class="chart-line"></div>
137               </div>
138               <!--煤泥桶桶位-->
139               <div class="chart-cont" v-loading="qcfx308.mnt.loading">
140                 <div id="chartQcfx308Mnt" class="chart-line"></div>
141               </div>
142               <!--磁性物含量-->
143               <div class="chart-cont" v-loading="qcfx308.cxw.loading">
144                 <div id="chartQcfx308Cxw" class="chart-line"></div>
145               </div>
146               <!--合介密度-->
147               <div class="chart-cont" v-loading="qcfx308.hjmd.loading">
148                 <div id="chartQcfx308Hjmd" class="chart-line"></div>
149               </div>
150               <!--分流阀开度-->
151               <div class="chart-cont" v-loading="qcfx308.flf.loading">
152                 <div id="chartQcfx308Flf" class="chart-line"></div>
153               </div>
154               <!--加水阀开度-->
155               <div class="chart-cont" v-loading="qcfx308.jsf.loading">
156                 <div id="chartQcfx308Jsf" class="chart-line"></div>
157               </div>
158               <!--灰分-->
159               <div class="chart-cont" v-loading="qcfx308.hf.loading">
160                 <div id="chartQcfx308Hf" class="chart-line"></div>
161               </div>
162             </div>
163           </el-col>
164         </el-row>
165       </el-tab-pane>
166       <el-tab-pane label="旋流分选3318" name="tab3">
167         <el-row type="flex" justify="space-around">
168           <el-col :span="8">
169             <div class="any-card border-down">
170               <el-form :model="xlfx3318.anyData" ref="xlfx3318AnyData" label-width="80px">
171                 <el-row :gutter="20">
172                   <el-col :span="24">
173                     <el-form-item label="诊断结果" prop="alarmInfo">
174                       <el-input v-model="xlfx3318.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
175                     </el-form-item>
176                   </el-col>
177                   <el-col :span="24">
178                     <el-form-item label="诊断时间" prop="anyTime">
179                       <el-input v-model="xlfx3318.anyData.anyTime" readonly></el-input>
180                     </el-form-item>
181                   </el-col>
182                 </el-row>
183               </el-form>
184               <el-divider content-position="left">诊断记录</el-divider>
185               <any-report :procCode="xlfx3318.anyData.code"></any-report>
186             </div>
187           </el-col>
188           <el-col :span="16">
189             <el-form :inline="true" :model="xlfx3318.dataForm" label-width="100px">
190               <el-form-item>
191                 <el-date-picker
192                     v-model="xlfx3318.dataForm.startDate"
193                     type="datetime"
194                     value-format="yyyy-MM-dd HH:mm:ss"
195                     placeholder="选择开始时间">
196                 </el-date-picker>
197               </el-form-item>
198               <el-form-item>
199                 <el-date-picker
200                     v-model="xlfx3318.dataForm.endDate"
201                     type="datetime"
202                     value-format="yyyy-MM-dd HH:mm:ss"
203                     placeholder="选择结束时间">
204                 </el-date-picker>
205               </el-form-item>
206               <el-form-item>
207                 <el-button :loading="xlfx3318.hlt.loading" @click="searchDataXlfx3318()">{{ $t('query') }}</el-button>
208               </el-form-item>
209             </el-form>
210             <div class="scrollable-container border-down">
211               <!--混料桶桶位-->
212               <div class="chart-cont" v-loading="xlfx3318.hlt.loading">
213                 <div id="chartXlfx3318Hlt" class="chart-line"></div>
214               </div>
215               <!--合介桶液位-->
216               <div class="chart-cont" v-loading="xlfx3318.hjt.loading">
217                 <div id="chartXlfx3318Hjt" class="chart-line"></div>
218               </div>
219               <!--稀介桶液位-->
220               <div class="chart-cont" v-loading="xlfx3318.xjt.loading">
221                 <div id="chartXlfx3318Xjt" class="chart-line"></div>
222               </div>
223               <!--煤泥桶桶位-->
224               <div class="chart-cont" v-loading="xlfx3318.mnt.loading">
225                 <div id="chartXlfx3318Mnt" class="chart-line"></div>
226               </div>
227
228               <!--旋流器压力-->
229               <div class="chart-cont" v-loading="xlfx3318.xlqyl.loading">
230                 <div id="chartXlfx3318Xlqyl" class="chart-line"></div>
231               </div>
232               <!--磁性物含量-->
233               <div class="chart-cont" v-loading="xlfx3318.cxw.loading">
234                 <div id="chartXlfx3318Cxw" class="chart-line"></div>
235               </div>
236               <!--合介密度-->
237               <div class="chart-cont" v-loading="xlfx3318.hjmd.loading">
238                 <div id="chartXlfx3318Hjmd" class="chart-line"></div>
239               </div>
240               <!--分流阀开度-->
241               <div class="chart-cont" v-loading="xlfx3318.flf.loading">
242                 <div id="chartXlfx3318Flf" class="chart-line"></div>
243               </div>
244               <!--排水泵频率-->
245               <div class="chart-cont" v-loading="xlfx3318.psb.loading">
246                 <div id="chartXlfx3318Psb" class="chart-line"></div>
247               </div>
248               <!--加介阀开度-->
249               <div class="chart-cont" v-loading="xlfx3318.jjf.loading">
250                 <div id="chartXlfx3318Jjf" class="chart-line"></div>
251               </div>
252               <!--加水阀开度-->
253               <div class="chart-cont" v-loading="xlfx3318.jsf.loading">
254                 <div id="chartXlfx3318Jsf" class="chart-line"></div>
255               </div>
256               <!--灰分-->
257               <div class="chart-cont" v-loading="xlfx3318.hf.loading">
258                 <div id="chartXlfx3318Hf" class="chart-line"></div>
259               </div>
260             </div>
261           </el-col>
262         </el-row>
263       </el-tab-pane>
264       <el-tab-pane label="旋流分选3319" name="tab4">
265         <el-row type="flex" justify="space-around">
266           <el-col :span="8">
267             <div class="any-card border-down">
268               <el-form :model="xlfx3319.anyData" ref="xlfx3319AnyData" label-width="80px">
269                 <el-row :gutter="20">
270                   <el-col :span="24">
271                     <el-form-item label="诊断结果" prop="alarmInfo">
272                       <el-input v-model="xlfx3319.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
273                     </el-form-item>
274                   </el-col>
275                   <el-col :span="24">
276                     <el-form-item label="诊断时间" prop="anyTime">
277                       <el-input v-model="xlfx3319.anyData.anyTime" readonly></el-input>
278                     </el-form-item>
279                   </el-col>
280                 </el-row>
281               </el-form>
282               <el-divider content-position="left">诊断记录</el-divider>
283               <any-report :procCode="xlfx3319.anyData.code"></any-report>
284             </div>
285           </el-col>
286           <el-col :span="16">
287             <el-form :inline="true" :model="xlfx3319.dataForm" label-width="100px">
288               <el-form-item>
289                 <el-date-picker
290                     v-model="xlfx3319.dataForm.startDate"
291                     type="datetime"
292                     value-format="yyyy-MM-dd HH:mm:ss"
293                     placeholder="选择开始时间">
294                 </el-date-picker>
295               </el-form-item>
296               <el-form-item>
297                 <el-date-picker
298                     v-model="xlfx3319.dataForm.endDate"
299                     type="datetime"
300                     value-format="yyyy-MM-dd HH:mm:ss"
301                     placeholder="选择结束时间">
302                 </el-date-picker>
303               </el-form-item>
304               <el-form-item>
305                 <el-button :loading="xlfx3319.hf.loading" @click="searchDataXlfx3319()">{{ $t('query') }}</el-button>
306               </el-form-item>
307             </el-form>
308             <div class="scrollable-container border-down">
309               <!--混料桶桶位-->
310               <div class="chart-cont" v-loading="xlfx3319.hlt.loading">
311                 <div id="chartXlfx3319Hlt" class="chart-line"></div>
312               </div>
313               <!--合介桶液位-->
314               <div class="chart-cont" v-loading="xlfx3319.hjt.loading">
315                 <div id="chartXlfx3319Hjt" class="chart-line"></div>
316               </div>
317               <!--稀介桶液位-->
318               <div class="chart-cont" v-loading="xlfx3319.xjt.loading">
319                 <div id="chartXlfx3319Xjt" class="chart-line"></div>
320               </div>
321               <!--煤泥桶桶位-->
322               <div class="chart-cont" v-loading="xlfx3319.mnt.loading">
323                 <div id="chartXlfx3319Mnt" class="chart-line"></div>
324               </div>
325
326               <!--旋流器压力-->
327               <div class="chart-cont" v-loading="xlfx3319.xlqyl.loading">
328                 <div id="chartXlfx3319Xlqyl" class="chart-line"></div>
329               </div>
330               <!--磁性物含量-->
331               <div class="chart-cont" v-loading="xlfx3319.cxw.loading">
332                 <div id="chartXlfx3319Cxw" class="chart-line"></div>
333               </div>
334               <!--合介密度-->
335               <div class="chart-cont" v-loading="xlfx3319.hjmd.loading">
336                 <div id="chartXlfx3319Hjmd" class="chart-line"></div>
337               </div>
338               <!--分流阀开度-->
339               <div class="chart-cont" v-loading="xlfx3319.flf.loading">
340                 <div id="chartXlfx3319Flf" class="chart-line"></div>
341               </div>
342               <!--排水泵频率-->
343               <div class="chart-cont" v-loading="xlfx3319.psb.loading">
344                 <div id="chartXlfx3319Psb" class="chart-line"></div>
345               </div>
346               <!--加介阀开度-->
347               <div class="chart-cont" v-loading="xlfx3319.jjf.loading">
348                 <div id="chartXlfx3319Jjf" class="chart-line"></div>
349               </div>
350               <!--加水阀开度-->
351               <div class="chart-cont" v-loading="xlfx3319.jsf.loading">
352                 <div id="chartXlfx3319Jsf" class="chart-line"></div>
353               </div>
354               <!--灰分-->
355               <div class="chart-cont" v-loading="xlfx3319.hf.loading">
356                 <div id="chartXlfx3319Hf" class="chart-line"></div>
357               </div>
358             </div>
359           </el-col>
360         </el-row>
361       </el-tab-pane>
362       <el-tab-pane label="浅槽浓缩" name="tab5">
363         <el-row type="flex" justify="space-around">
364           <el-col :span="8">
365             <div class="any-card border-down">
366               <el-form :model="qcns.anyData" ref="qcnsAnyData" label-width="80px">
367                 <el-row :gutter="20">
368                   <el-col :span="24">
369                     <el-form-item label="诊断结果" prop="alarmInfo">
370                       <el-input v-model="qcns.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
371                     </el-form-item>
372                   </el-col>
373                   <el-col :span="24">
374                     <el-form-item label="诊断时间" prop="anyTime">
375                       <el-input v-model="qcns.anyData.anyTime" readonly></el-input>
376                     </el-form-item>
377                   </el-col>
378                 </el-row>
379               </el-form>
380               <el-divider content-position="left">诊断记录</el-divider>
381               <any-report :procCode="qcns.anyData.code"></any-report>
382             </div>
383           </el-col>
384           <el-col :span="16">
385             <el-form :inline="true" :model="qcns.dataForm" label-width="100px">
386               <el-form-item>
387                 <el-date-picker
388                     v-model="qcns.dataForm.startDate"
389                     type="datetime"
390                     value-format="yyyy-MM-dd HH:mm:ss"
391                     placeholder="选择开始时间">
392                 </el-date-picker>
393               </el-form-item>
394               <el-form-item>
395                 <el-date-picker
396                     v-model="qcns.dataForm.endDate"
397                     type="datetime"
398                     value-format="yyyy-MM-dd HH:mm:ss"
399                     placeholder="选择结束时间">
400                 </el-date-picker>
401               </el-form-item>
402               <el-form-item>
403                 <el-button :loading="qcns.rlnd.loading" @click="searchDataQcns">{{ $t('query') }}</el-button>
404               </el-form-item>
405             </el-form>
406             <div class="scrollable-container border-down">
407               <!--浓缩池入料浓度-->
408               <div class="chart-cont" v-loading="qcns.rlnd.loading">
409                 <div id="chartQcnsRlnd" class="chart-line"></div>
410               </div>
411               <!--浓缩池入料流量-->
412               <div class="chart-cont" v-loading="qcns.rlld.loading">
413                 <div id="chartQcnsRlll" class="chart-line"></div>
414               </div>
415               <!--加药流量-->
416               <div class="chart-cont" v-loading="qcns.jyll.loading">
417                 <div id="chartQcnsJyll" class="chart-line"></div>
418               </div>
419               <!--循环水池浊度-->
420               <div class="chart-cont" v-loading="qcns.sczd.loading">
421                 <div id="chartQcnsSczd" class="chart-line"></div>
422               </div>
423               <!--浓缩池出料浓度-->
424               <div class="chart-cont" v-loading="qcns.clnd.loading">
425                 <div id="chartQcnsClnd" class="chart-line"></div>
426               </div>
427             </div>
428           </el-col>
429         </el-row>
430       </el-tab-pane>
431       <el-tab-pane label="旋流浓缩" name="tab6">
432         <el-row type="flex" justify="space-around">
433           <el-col :span="8">
434             <div class="any-card border-down">
435               <el-form :model="xlns.anyData" ref="xlnsAnyData" label-width="80px">
436                 <el-row :gutter="20">
437                   <el-col :span="24">
438                     <el-form-item label="诊断结果" prop="alarmInfo">
439                       <el-input v-model="xlns.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
440                     </el-form-item>
441                   </el-col>
442                   <el-col :span="24">
443                     <el-form-item label="诊断时间" prop="anyTime">
444                       <el-input v-model="xlns.anyData.anyTime" readonly></el-input>
445                     </el-form-item>
446                   </el-col>
447                 </el-row>
448               </el-form>
449               <el-divider content-position="left">诊断记录</el-divider>
450               <any-report :procCode="xlns.anyData.code"></any-report>
451             </div>
452           </el-col>
453           <el-col :span="16">
454             <el-form :inline="true" :model="xlns.dataForm" label-width="100px">
455               <el-form-item>
456                 <el-date-picker
457                     v-model="xlns.dataForm.startDate"
458                     type="datetime"
459                     value-format="yyyy-MM-dd HH:mm:ss"
460                     placeholder="选择开始时间">
461                 </el-date-picker>
462               </el-form-item>
463               <el-form-item>
464                 <el-date-picker
465                     v-model="xlns.dataForm.endDate"
466                     type="datetime"
467                     value-format="yyyy-MM-dd HH:mm:ss"
468                     placeholder="选择结束时间">
469                 </el-date-picker>
470               </el-form-item>
471               <el-form-item>
472                 <el-button :loading="xlns.rlnd.loading" @click="searchDataXlns()">{{ $t('query') }}</el-button>
473               </el-form-item>
474             </el-form>
475             <div class="scrollable-container border-down">
476               <!--浓缩池入料浓度-->
477               <div class="chart-cont" v-loading="xlns.rlnd.loading">
478                 <div id="chartXlnsRlnd" class="chart-line"></div>
479               </div>
480               <!--浓缩池入料流量-->
481               <div class="chart-cont" v-loading="xlns.rlld.loading">
482                 <div id="chartXlnsRlld" class="chart-line"></div>
483               </div>
484               <!--加药流量-->
485               <div class="chart-cont" v-loading="xlns.jyll.loading">
486                 <div id="chartXlnsJyll" class="chart-line"></div>
487               </div>
488               <!--循环水池浊度-->
489               <div class="chart-cont" v-loading="xlns.sczd.loading">
490                 <div id="chartXlnsSczd" class="chart-line"></div>
491               </div>
492               <!--浓缩池出料浓度-->
493               <div class="chart-cont" v-loading="xlns.clnd.loading">
494                 <div id="chartXlnsClnd" class="chart-line"></div>
495               </div>
496               <!--污泥厚度-->
497               <div class="chart-cont" v-loading="xlns.wnhd.loading">
498                 <div id="chartNSwnhd" class="chart-line"></div>
499               </div>
500             </div>
501           </el-col>
502         </el-row>
503       </el-tab-pane>
504       <el-tab-pane label="旋流压滤" name="tab7">
505         <el-row type="flex" justify="space-around">
506           <el-col :span="8">
507             <div class="any-card border-down">
508               <el-form :model="xlyl.anyData" ref="xlylAnyData" label-width="80px">
509                 <el-row :gutter="20">
510                   <el-col :span="24">
511                     <el-form-item label="诊断结果" prop="alarmInfo">
512                       <el-input v-model="xlyl.anyData.alarmInfo" readonly type="textarea" rows="6"></el-input>
513                     </el-form-item>
514                   </el-col>
515                   <el-col :span="24">
516                     <el-form-item label="诊断时间" prop="anyTime">
517                       <el-input v-model="xlyl.anyData.anyTime" readonly></el-input>
518                     </el-form-item>
519                   </el-col>
520                 </el-row>
521               </el-form>
522               <el-divider content-position="left">诊断记录</el-divider>
523               <any-report :procCode="xlyl.anyData.code"></any-report>
524             </div>
525           </el-col>
526           <el-col :span="16">
527             <el-form :inline="true" :model="xlyl.dataForm" label-width="100px">
528               <el-form-item>
529                 <el-date-picker
530                     v-model="xlyl.dataForm.startDate"
531                     type="datetime"
532                     value-format="yyyy-MM-dd HH:mm:ss"
533                     placeholder="选择开始时间">
534                 </el-date-picker>
535               </el-form-item>
536               <el-form-item>
537                 <el-date-picker
538                     v-model="xlyl.dataForm.endDate"
539                     type="datetime"
540                     value-format="yyyy-MM-dd HH:mm:ss"
541                     placeholder="选择结束时间">
542                 </el-date-picker>
543               </el-form-item>
544               <el-form-item>
545                 <el-button :loading="xlyl.rlc.loading" @click="searchDataXlyl()">{{ $t('query') }}</el-button>
546               </el-form-item>
547             </el-form>
548             <div class="scrollable-container border-down">
549               <!--入料池液位-->
550               <div class="chart-cont" v-loading="xlyl.rlc.loading">
551                 <div id="chartXlylRlc" class="chart-line"></div>
552               </div>
553               <!--皮带秤瞬时量-->
554               <div class="chart-cont" v-loading="xlyl.pdc.loading">
555                 <div id="chartXlylPdc" class="chart-line"></div>
556               </div>
557               <!--入料泵运行状态-->
558               <div class="chart-cont" v-loading="xlyl.rlb.loading">
559                 <div id="chartXlylRlb" class="chart-line"></div>
560               </div>
561               <!--刮板机运行状态-->
562               <div class="chart-cont" v-loading="xlyl.gbj.loading">
563                 <div id="chartXlylGbj" class="chart-line"></div>
564               </div>
565             </div>
566           </el-col>
567         </el-row>
568       </el-tab-pane>
569     </el-tabs>
570   </el-card>
571 </template>
572 <script>
573   import {getSeriesData} from '@/utils/mathUtils'
574   import AnyReport from  './components/report'
575
576   export default {
577     components: {
578       AnyReport
579     },
580     data() {
581       return {
582         activeName: 'tab1',
583         qcfx307: {
584           loading: false,
585           anyData: {
586             code: 'C01',
587             anyTime: '',
588             alarmInfo: '',
589           },
590           dataForm: {
591             startDate: '',
592             endDate: '',
593           },
594           hjt: {
595             loading: false,
596             chartCode: 'chartQcfx307Hjt',
597             chartName: '合介桶桶位',
598             codes: ['M0000200012', 'M0000200015', 'M0000200016']
599           },
600           xjt: {
601             loading: false,
602             chartCode: 'chartQcfx307Xjt',
603             chartName: '稀介桶桶位',
604             codes: ['M0000200013', 'M0000200017', 'M0000200018']
605           },
606           mnt: {
607             loading: false,
608             chartCode: 'chartQcfx307Mnt',
609             chartName: '煤泥桶桶位',
610             codes: ['M0000200014', 'M0000200019', 'M0000200020']
611           },
612           cxw: {
613             loading: false,
614             chartCode: 'chartQcfx307Cxw',
615             chartName: '磁性物含量',
616             codes: ['M0000200021', 'M0000200022']
617           },
618           hjmd: {
619             loading: false,
620             chartCode: 'chartQcfx307Hjmd',
621             chartName: '合介密度',
622             codes: ['M0000200023', 'M0000200024']
623           },
624           flf: {
625             loading: false,
626             chartCode: 'chartQcfx307Flf',
627             chartName: '分流阀开度',
628             codes: ['M0000200025']
629           },
630           jsf: {
631             loading: false,
632             chartCode: 'chartQcfx307Jsf',
633             chartName: '加水阀开度',
634             codes: ['M0000200026', 'M0000200027', 'M0000200028', 'M0000200029']
635           },
636           hf: {
637             loading: false,
638             chartCode: 'chartQcfx307Hf',
639             chartName: '灰分',
640             codes: ['M0000100020', 'M0000200007']
641           },
642         },
643         qcfx308: {
644           loading: false,
645           anyData: {
646             code: 'C02',
647             anyTime: '',
648             alarmInfo: '',
649           },
650           dataForm: {
651             startDate: '',
652             endDate: '',
653           },
654           hjt: {
655             loading: false,
656             chartCode: 'chartQcfx308Hjt',
657             chartName: '合介桶桶位',
658             codes: ['M0000200030', 'M0000200031', 'M0000200032']
659           },
660           xjt: {
661             loading: false,
662             chartCode: 'chartQcfx308Xjt',
663             chartName: '稀介桶桶位',
664             codes: ['M0000200033', 'M0000200034', 'M0000200035']
665           },
666           mnt: {
667             loading: false,
668             chartCode: 'chartQcfx308Mnt',
669             chartName: '煤泥桶桶位',
670             codes: ['M0000200014', 'M0000200019', 'M0000200020']
671           },
672           cxw: {
673             loading: false,
674             chartCode: 'chartQcfx308Cxw',
675             chartName: '磁性物含量',
676             codes: ['M0000200036', 'M0000200037']
677           },
678           hjmd: {
679             loading: false,
680             chartCode: 'chartQcfx308Hjmd',
681             chartName: '合介密度',
682             codes: ['M0000200038', 'M0000200039']
683           },
684           flf: {
685             loading: false,
686             chartCode: 'chartQcfx308Flf',
687             chartName: '分流阀开度',
688             codes: ['M0000200040']
689           },
690           jsf: {
691             loading: false,
692             chartCode: 'chartQcfx308Jsf',
693             chartName: '加水阀开度',
694             codes: ['M0000200041', 'M0000200042', 'M0000200028', 'M0000200043']
695           },
696           hf: {
697             loading: false,
698             chartCode: 'chartQcfx308Hf',
699             chartName: '灰分',
700             codes: ['M0000100020', 'M0000200007']
701           },
702         },
703         xlfx3318: {
704           loading: false,
705           anyData: {
706             code: 'C03',
707             anyTime: '',
708             alarmInfo: '',
709           },
710           dataForm: {
711             startDate: '',
712             endDate: '',
713           },
714           hlt: {
715             loading: false,
716             chartCode: 'chartXlfx3318Hlt',
717             chartName: '混料桶桶位',
718             codes: ['M0000200044', 'M0000200045', 'M0000200046']
719           },
720           hjt: {
721             loading: false,
722             chartCode: 'chartXlfx3318Hjt',
723             chartName: '合介桶液位',
724             codes: ['M0000200047', 'M0000200048', 'M0000200049']
725           },
726           xjt: {
727             loading: false,
728             chartCode: 'chartXlfx3318Xjt',
729             chartName: '稀介桶液位',
730             codes: ['M0000200050', 'M0000200051', 'M0000200052']
731           },
732           mnt: {
733             loading: false,
734             chartCode: 'chartXlfx3318Mnt',
735             chartName: '煤泥桶桶位',
736             codes: ['M0000200053', 'M0000200054', 'M0000200055']
737           },
738           xlqyl: {
739             loading: false,
740             chartCode: 'chartXlfx3318Xlqyl',
741             chartName: '旋流器压力',
742             codes: ['M0000200056', 'M0000200057']
743           },
744           cxw: {
745             loading: false,
746             chartCode: 'chartXlfx3318Cxw',
747             chartName: '磁性物含量',
748             codes: ['M0000200058', 'M0000200059']
749           },
750           hjmd: {
751             loading: false,
752             chartCode: 'chartXlfx3318Hjmd',
753             chartName: '合介密度',
754             codes: ['M0000200060', 'M0000200061']
755           },
756           flf: {
757             loading: false,
758             chartCode: 'chartXlfx3318Flf',
759             chartName: '分流阀开度',
760             codes: ['M0000200062', 'M0000200063']
761           },
762           psb: {
763             loading: false,
764             chartCode: 'chartXlfx3318Psb',
765             chartName: '排水泵频率',
766             codes: ['M0000200064', 'M0000200065', 'M0000200068', 'M0000200069']
767           },
768           jjf: {
769             loading: false,
770             chartCode: 'chartXlfx3318Jjf',
771             chartName: '加介阀开度',
772             codes: ['M0000200066']
773           },
774           jsf: {
775             loading: false,
776             chartCode: 'chartXlfx3318Jsf',
777             chartName: '加水阀开度',
778             codes: ['M0000200067', 'M0000200070']
779           },
780           hf: {
781             loading: false,
782             chartCode: 'chartXlfx3318Hf',
783             chartName: '灰分',
784             codes: ['M0000200071', 'M0000200006']
785           },
786         },
787         xlfx3319: {
788           loading: false,
789           anyData: {
790             code: 'C04',
791             anyTime: '',
792             alarmInfo: '',
793           },
794           dataForm: {
795             startDate: '',
796             endDate: '',
797           },
798           hlt: {
799             loading: false,
800             chartCode: 'chartXlfx3319Hlt',
801             chartName: '混料桶桶位',
802             codes: ['M0000200072', 'M0000200073', 'M0000200074']
803           },
804           hjt: {
805             loading: false,
806             chartCode: 'chartXlfx3319Hjt',
807             chartName: '合介桶液位',
808             codes: ['M0000200075', 'M0000200076', 'M0000200077']
809           },
810           xjt: {
811             loading: false,
812             chartCode: 'chartXlfx3319Xjt',
813             chartName: '稀介桶液位',
814             codes: ['M0000200078', 'M0000200079', 'M0000200080']
815           },
816           mnt: {
817             loading: false,
818             chartCode: 'chartXlfx3319Mnt',
819             chartName: '煤泥桶桶位',
820             codes: ['M0000200081', 'M0000200082', 'M0000200083']
821           },
822           xlqyl: {
823             loading: false,
824             chartCode: 'chartXlfx3319Xlqyl',
825             chartName: '旋流器压力',
826             codes: ['M0000200084', 'M0000200085']
827           },
828           cxw: {
829             loading: false,
830             chartCode: 'chartXlfx3319Cxw',
831             chartName: '磁性物含量',
832             codes: ['M0000200086', 'M0000200087']
833           },
834           hjmd: {
835             loading: false,
836             chartCode: 'chartXlfx3319Hjmd',
837             chartName: '合介密度',
838             codes: ['M0000200088', 'M0000200089']
839           },
840           flf: {
841             loading: false,
842             chartCode: 'chartXlfx3319Flf',
843             chartName: '分流阀开度',
844             codes: ['M0000200090', 'M0000200091']
845           },
846           psb: {
847             loading: false,
848             chartCode: 'chartXlfx3319Psb',
849             chartName: '排水泵频率',
850             codes: ['M0000200092', 'M0000200093', 'M0000200094', 'M0000200095']
851           },
852           jjf: {
853             loading: false,
854             chartCode: 'chartXlfx3319Jjf',
855             chartName: '加介阀开度',
856             codes: ['M0000200096']
857           },
858           jsf: {
859             loading: false,
860             chartCode: 'chartXlfx3319Jsf',
861             chartName: '加水阀开度',
862             codes: ['M0000200067', 'M0000200096']
863           },
864           hf: {
865             loading: false,
866             chartCode: 'chartXlfx3319Hf',
867             chartName: '灰分',
868             codes: ['M0000200071', 'M0000200006']
869           },
870         },
871         qcns: {
872           loading: false,
873           anyData: {
874             code: 'C05',
875             anyTime: '',
876             alarmInfo: '',
877           },
878           dataForm: {
879             startDate: '',
880             endDate: '',
881           },
882           rlnd: {
883             loading: false,
884             chartCode: 'chartQcnsRlnd',
885             chartName: '浓缩池入料浓度',
886             codes: ['M0000100106']
887           },
888           rlld: {
889             loading: false,
890             chartCode: 'chartQcnsRlll',
891             chartName: '浓缩池入料流量',
892             codes: ['M0000100105']
893           },
894           jyll: {
895             loading: false,
896             chartCode: 'chartQcnsJyll',
897             chartName: '加药流量',
898             codes: ['M0000100123', 'M0000100124']
899           },
900           sczd: {
901             loading: false,
902             chartCode: 'chartQcnsSczd',
903             chartName: '循环水池浊度',
904             codes: ['M0000100109', 'M0000101081', 'M0000100115', 'M0000101084']
905           },
906           clnd: {
907             loading: false,
908             chartCode: 'chartQcnsClnd',
909             chartName: '浓缩池出料浓度',
910             codes: ['M0000100108', 'M0000101082', 'M0000100114', 'M0000101085']
911           },
912           wnhd: {
913             loading: false,
914             chartCode: 'chartQcnsWnhd',
915             chartName: '浓缩池污泥厚度',
916             codes: ['M0000100110', 'M0000101083', 'M0000100116', 'M0000101086']
917           }
918         },
919         xlns: {
920           loading: false,
921           anyData: {
922             code: 'C06',
923             anyTime: '',
924             alarmInfo: '',
925           },
926           dataForm: {
927             startDate: '',
928             endDate: '',
929           },
930           rlnd: {
931             loading: false,
932             chartCode: 'chartXlnsRlnd',
933             chartName: '浓缩池入料浓度',
934             codes: ['M0000100118']
935           },
936           rlld: {
937             loading: false,
938             chartCode: 'chartXlnsRlld',
939             chartName: '浓缩池入料流量',
940             codes: ['M0000100117']
941           },
942           jyll: {
943             loading: false,
944             chartCode: 'chartXlnsJyll',
945             chartName: '加药流量',
946             codes: ['M0000100139', 'M0000100140']
947           },
948           sczd: {
949             loading: false,
950             chartCode: 'chartXlnsSczd',
951             chartName: '循环水池浊度',
952             codes: ['M0000100121', 'M0000101092']
953           },
954           clnd: {
955             loading: false,
956             chartCode: 'chartXlnsClnd',
957             chartName: '浓缩池出料浓度',
958             codes: ['M0000100120', 'M0000101093']
959           },
960           wnhd: {
961             loading: false,
962             chartCode: 'chartNSwnhd',
963             chartName: '污泥厚度',
964             codes: ['M0000100122', 'M0000101094']
965           }
966         },
967         xlyl: {
968           loading: false,
969           anyData: {
970             code: 'C07',
971             anyTime: '',
972             alarmInfo: '',
973           },
974           dataForm: {
975             startDate: '',
976             endDate: '',
977           },
978           rlc: {
979             loading: false,
980             chartCode: 'chartXlylRlc',
981             chartName: '入料池液位',
982             codes: ['M0000100426']
983           },
984           pdc: {
985             loading: false,
986             chartCode: 'chartXlylPdc',
987             chartName: '皮带秤瞬时量',
988             codes: ['M0000100015']
989           },
990           rlb: {
991             loading: false,
992             chartCode: 'chartXlylRlb',
993             chartName: '入料泵运行状态',
994             codes: ['M0000100151', 'M0000100153', 'M0000100155', 'M0000100157', 'M0000100159']
995           },
996           gbj: {
997             loading: false,
998             chartCode: 'chartXlylGbj',
999             chartName: '刮板机运行状态',
1000             codes: ['M0000100171', 'M0000100173', 'M0000100175', 'M0000100177', 'M0000100179']
1001           }
1002         }
1003       }
1004     },
1005     mounted() {
1006       this.init()
1007       this.searchDataQc307()
1008     },
1009     methods: {
1010       init() {
1011         this.getCard(this.qcfx307.anyData)
1012         this.getCard(this.qcfx308.anyData)
1013         this.getCard(this.xlfx3318.anyData)
1014         this.getCard(this.xlfx3319.anyData)
1015         this.getCard(this.qcns.anyData)
1016         this.getCard(this.xlns.anyData)
1017         this.getCard(this.xlyl.anyData)
1018       },
1019
1020       getCard(anyData) {
1021         this.resetFields(anyData)
1022         this.$http.get(`/iailab-ntt-model/any/proc-card/code/${anyData.code}`).then(({data: res}) => {
1023           if (res.code !== 0) {
1024             return this.$message.error(res.msg)
1025           }
1026           anyData.anyTime = res.data.anyTime
1027           anyData.alarmInfo = res.data.alarmInfo
1028         }).catch(() => {
1029         })
1030
1031       },
1032       searchDataQc307() {
1033         this.getChart(this.qcfx307.dataForm, this.qcfx307.hjt)
1034         this.getChart(this.qcfx307.dataForm, this.qcfx307.xjt)
1035         this.getChart(this.qcfx307.dataForm, this.qcfx307.mnt)
1036         this.getChart(this.qcfx307.dataForm, this.qcfx307.cxw)
1037         this.getChart(this.qcfx307.dataForm, this.qcfx307.hjmd)
1038         this.getChart(this.qcfx307.dataForm, this.qcfx307.flf)
1039         this.getChart(this.qcfx307.dataForm, this.qcfx307.jsf)
1040         this.getChart(this.qcfx307.dataForm, this.qcfx307.hf)
1041       },
1042       searchDataQc308() {
1043         this.getChart(this.qcfx308.dataForm, this.qcfx308.hjt)
1044         this.getChart(this.qcfx308.dataForm, this.qcfx308.xjt)
1045         this.getChart(this.qcfx308.dataForm, this.qcfx308.mnt)
1046         this.getChart(this.qcfx308.dataForm, this.qcfx308.cxw)
1047         this.getChart(this.qcfx308.dataForm, this.qcfx308.hjmd)
1048         this.getChart(this.qcfx308.dataForm, this.qcfx308.flf)
1049         this.getChart(this.qcfx308.dataForm, this.qcfx308.jsf)
1050         this.getChart(this.qcfx308.dataForm, this.qcfx308.hf)
1051       },
1052       searchDataXlfx3318() {
1053         this.getChart(this.xlfx3318.dataForm, this.xlfx3318.hlt)
1054         this.getChart(this.xlfx3318.dataForm, this.xlfx3318.hjt)
1055         this.getChart(this.xlfx3318.dataForm, this.xlfx3318.xjt)
1056         this.getChart(this.xlfx3318.dataForm, this.xlfx3318.mnt)
1057         this.getChart(this.xlfx3318.dataForm, this.xlfx3318.xlqyl)
1058         this.getChart(this.xlfx3318.dataForm, this.xlfx3318.cxw)
1059         this.getChart(this.xlfx3318.dataForm, this.xlfx3318.hjmd)
1060         this.getChart(this.xlfx3318.dataForm, this.xlfx3318.flf)
1061         this.getChart(this.xlfx3318.dataForm, this.xlfx3318.psb)
1062         this.getChart(this.xlfx3318.dataForm, this.xlfx3318.jjf)
1063         this.getChart(this.xlfx3318.dataForm, this.xlfx3318.jsf)
1064         this.getChart(this.xlfx3318.dataForm, this.xlfx3318.hf)
1065       },
1066       searchDataXlfx3319() {
1067         this.getChart(this.xlfx3319.dataForm, this.xlfx3319.hlt)
1068         this.getChart(this.xlfx3319.dataForm, this.xlfx3319.hjt)
1069         this.getChart(this.xlfx3319.dataForm, this.xlfx3319.xjt)
1070         this.getChart(this.xlfx3319.dataForm, this.xlfx3319.mnt)
1071         this.getChart(this.xlfx3319.dataForm, this.xlfx3319.xlqyl)
1072         this.getChart(this.xlfx3319.dataForm, this.xlfx3319.cxw)
1073         this.getChart(this.xlfx3319.dataForm, this.xlfx3319.hjmd)
1074         this.getChart(this.xlfx3319.dataForm, this.xlfx3319.flf)
1075         this.getChart(this.xlfx3319.dataForm, this.xlfx3319.psb)
1076         this.getChart(this.xlfx3319.dataForm, this.xlfx3319.jjf)
1077         this.getChart(this.xlfx3319.dataForm, this.xlfx3319.jsf)
1078         this.getChart(this.xlfx3319.dataForm, this.xlfx3319.hf)
1079       },
1080       searchDataQcns() {
1081         this.getChart(this.qcns.dataForm, this.qcns.rlnd)
1082         this.getChart(this.qcns.dataForm, this.qcns.rlld)
1083         this.getChart(this.qcns.dataForm, this.qcns.jyll)
1084         this.getChart(this.qcns.dataForm, this.qcns.sczd)
1085         this.getChart(this.qcns.dataForm, this.qcns.clnd)
1086         this.getChart(this.qcns.dataForm, this.qcns.wnhd)
1087       },
1088       searchDataXlns() {
1089         this.getChart(this.xlns.dataForm, this.xlns.rlnd)
1090         this.getChart(this.xlns.dataForm, this.xlns.rlld)
1091         this.getChart(this.xlns.dataForm, this.xlns.jyll)
1092         this.getChart(this.xlns.dataForm, this.xlns.sczd)
1093         this.getChart(this.xlns.dataForm, this.xlns.clnd)
1094         this.getChart(this.xlns.dataForm, this.xlns.wnhd)
1095       },
1096       searchDataXlyl() {
1097         this.getChart(this.xlyl.dataForm, this.xlyl.rlc)
1098         this.getChart(this.xlyl.dataForm, this.xlyl.pdc)
1099         this.getChart(this.xlyl.dataForm, this.xlyl.rlb)
1100         this.getChart(this.xlyl.dataForm, this.xlyl.gbj)
1101       },
1102       getChart(dataForm, chartParam) {
1103         let that = this
1104         chartParam.loading = true
1105         this.$http['post'](`/iailab-ntt-data/api/data/point/chart`, {
1106           codes: chartParam.codes,
1107           startDate: dataForm.startDate,
1108           endDate: dataForm.endDate,
1109         }).then(({data: res}) => {
1110           chartParam.loading = false
1111           if (res.code !== 0) {
1112             return this.$message.error(res.msg)
1113           }
1114           let myChart = this.$echarts.init(document.getElementById(chartParam.chartCode));
1115           let seriesData = []
1116           if (res.data.series) {
1117             res.data.series.forEach(function (item, index) {
1118               seriesData.push(
1119                 {
1120                   name: item.name,
1121                   type: 'line',
1122                   smooth: true,
1123                   showSymbol: false,
1124                   data: item.data
1125                 }
1126               )
1127             })
1128             let option = {
1129               title: {
1130                 text: chartParam.chartName
1131               },
1132               tooltip: {
1133                 trigger: 'axis'
1134               },
1135               legend: {
1136                 data: res.data.legend,
1137               },
1138               grid: {
1139                 top: '20%',
1140                 left: '3%',
1141                 right: '4%',
1142                 bottom: '3%',
1143                 containLabel: true
1144               },
1145               xAxis: {
1146                 type: 'category',
1147                 boundaryGap: false,
1148                 data: res.data.categories,
1149               },
1150               yAxis: {
1151                 type: 'value',
1152                 position: 'left',
1153                 offset: 0,
1154                 name: '',
1155                 splitLine: {
1156                   show: false
1157                 },
1158                 axisLine: {
1159                   show: true,
1160                   onZero: false
1161                 },
1162                 axisTick: {show: true},
1163                 axisLabel: {
1164                   formatter: '{value}'
1165                 }
1166               },
1167               series: seriesData
1168             }
1169             if (option && typeof option === "object") {
1170               myChart.setOption(option);
1171             }
1172           }
1173         })
1174
1175       },
1176       handleClick(tab, event) {
1177         let that = this
1178         if ('tab1' === tab.name) {
1179           setTimeout(function () {
1180             that.searchDataQc307()
1181             that.getCard(that.qcfx307.anyData)
1182           }, 500)
1183         } else if ('tab2' === tab.name) {
1184           setTimeout(function () {
1185             that.searchDataQc308()
1186             that.getCard(that.qcfx308.anyData)
1187           }, 500)
1188         } else if ('tab3' === tab.name) {
1189           setTimeout(function () {
1190             that.searchDataXlfx3318()
1191             that.getCard(that.xlfx3318.anyData)
1192           }, 500)
1193         } else if ('tab4' === tab.name) {
1194           setTimeout(function () {
1195             that.searchDataXlfx3319()
1196             that.getCard(that.xlfx3319.anyData)
1197           }, 500)
1198         } else if ('tab5' === tab.name) {
1199           setTimeout(function () {
1200             that.searchDataQcns()
1201             that.getCard(that.qcns.anyData)
1202           }, 500)
1203         } else if ('tab6' === tab.name) {
1204           setTimeout(function () {
1205             that.searchDataXlns()
1206             that.getCard(that.xlns.anyData)
1207           }, 500)
1208         } else if ('tab7' === tab.name) {
1209           setTimeout(function () {
1210             that.searchDataXlyl()
1211             that.getCard(that.xlyl.anyData)
1212           }, 500)
1213         }
1214       },
1215       resetFields (obj) {
1216         for (let key in obj) {
1217           if (key === 'id' || key === 'code') {
1218             continue
1219           }
1220           if (obj[key] instanceof Array) {
1221             obj[key] = []
1222           } else if (obj[key] instanceof Object) {
1223             this.resetFields(obj[key])
1224           } else {
1225             obj[key] = ''
1226           }
1227         }
1228       }
1229     }
1230
1231   }
1232 </script>
1233 <style scoped>
1234   .chart-cont {
1235     height: 240px;
1236     width: 100%;
1237     padding: 0 10px 0 10px;
1238   }
1239
1240   .chart-line {
1241     width: 95%;
1242     height: 100%;
1243   }
1244
1245   .any-card {
1246     width: 90%;
1247     margin: 5px;
1248     padding: 10px;
1249     height: calc(calc(100vh - 48px - 38px - 35px - 110px));
1250   }
1251
1252   .scrollable-container {
1253     overflow: auto;
1254     width: 100%;
1255     height: calc(calc(100vh - 48px - 38px - 35px - 160px));
1256   }
1257
1258   .border-down {
1259     border: 1px solid #e2e4e9;
1260   }
1261 </style>