工业互联网平台前端 vue2版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-07-23 8501060c4f921d1e744c477e4dc08eb47b52693c
提交 | 用户 | 时间
850106 1 <template>
H 2   <div>
3     <el-card shadow="never" class="aui-card--fill" style="margin-top: 5px">
4       <el-row>
5         <el-col :span="5">
6           <el-radio-group v-model="radio" size="small" @change="change()">
7             <el-radio-button label="分选"></el-radio-button>
8             <el-radio-button label="浓缩压滤"></el-radio-button>
9             <el-radio-button label="鼓风"></el-radio-button>
10             <el-radio-button label="外运"></el-radio-button>
11           </el-radio-group>
12         </el-col>
13       </el-row>
14     </el-card>
15     <el-card shadow="never" class="aui-card--fill" v-loading="loading">
16       <div v-for="(data, index) in dataList" :key="index" class="Border" >
17         <el-card shadow="never" class="aui-card--fill" style="margin-top: 5px">
18           <el-row type="flex" justify="space-around">
19             <el-col :span="4" style="margin-top: 40px" class="Border_l">
20               <el-row>
21                 <el-col :span="12">
22                   <div style="width: 100%; text-align: left; font-size: 18px">
23                     当前值
24                   </div>
25                   <div
26                     style="
27                       width: 100%;
28                       height: 30px;
29                       margin-top: 10px;
30                       margin-bottom: 10px;
31                       color: #000000;
32                       font-size: 24px;
33                     "
34                   >
35                     <span>{{ data.currentValue }}</span>
36                     <span style="font-size: 14px">{{data.unit}}</span>
37                   </div>
38                 </el-col>
39                 <el-col :span="12">
40                   <div style="width: 100%; text-align: left; font-size: 18px">
41                     分析长度
42                   </div>
43                   <div
44                     style="
45                       width: 100%;
46                       height: 30px;
47                       margin-top: 10px;
48                       margin-bottom: 10px;
49                       color: #000000;
50                       font-size: 24px;
51                     "
52                   >
53                     <span>{{ data.length }}</span
54                     ><span style="font-size: 14px">天</span>
55                   </div>
56                 </el-col>
57               </el-row>
58     <!--          <el-button type="default" @onclick="viewHistoryData(bfg1Data)"> -->
59     <!--          查看历史</el-button>-->
60             </el-col>
61             <el-col :span="19">
62               <div>
63                 <div :id="'raw' + index" style="margin-top: 20px" class="ecbox"></div>
64               </div>
65             </el-col>
66           </el-row>
67           <el-row>
68             <el-col :span="12" class="Border_down" align="left">
69               <el-row
70                 type="flex"
71                 justify="center"
72                 align="middle"
73                 style="height: 5vh"
74               >
75                 <el-col :span="5" style="padding-top:5vh">
76                   <span style="font-size: 16px; font-weight: 600">
77                     整体趋势{{data.trend}}
78                     <i :class="data.iconClass"></i>
79                   </span>
80                 </el-col>
81                 <el-col :span="5" style="padding-top:5vh">
82                   <el-row style="font-size: 14px">
83                     <span>平均值</span>
84                   </el-row>
85                   <el-row style="font-size: 14px">
86                     <span>{{data.trendValue.mean_value}}</span>
87                   </el-row>
88                 </el-col>
89                 <el-col :span="5" style="padding-top:5vh">
90                   <el-row style="font-size: 14px">
91                     <span>最大值</span>
92                   </el-row>
93                   <el-row style="font-size: 14px">
94                     <span>{{data.trendValue.max_value}}</span>
95                   </el-row>
96                 </el-col>
97                 <el-col :span="5" style="padding-top:5vh">
98                   <el-row style="font-size: 14px">
99                     <span>最小值</span>
100                   </el-row>
101                   <el-row style="font-size: 14px">
102                     <span>{{data.trendValue.min_value}}</span>
103                   </el-row>
104                 </el-col>
105               </el-row>
106             </el-col>
107             <el-col :span="12" class="Border_down" align="left">
108             <el-row style="margin-left: 2vh; margin-top: 1vh">
109               <span style="font-size: 14px; font-weight: 600">调度建议</span>
110             </el-row>
111             <el-row>
112                 <el-col
113                   :span="18"
114                   class="Border_text"
115                   style="margin-left: 2vh; margin-top: 1vh; padding-top: 10px"
116                   ><span
117                     style="
118                       margin-left: 2vh;
119                       font-size: 18px;
120                       font-family: '楷体';
121                       font-weight: 600;
122                       color: red;
123                     "
124                     >{{data.overSlopeSug}}</span>
125                 </el-col>
126                 <el-col
127                 :span="5"
128                 class="Border_text"
129                 style="margin-top: 1vh; padding-top: 10px"
130                 ></el-col>
131             </el-row>
132             </el-col>
133           </el-row>
134         </el-card>
135       </div>
136     </el-card>
137 <!--    <el-card shadow="never" class="aui-card&#45;&#45;fill" v-loading="loading" >-->
138 <!--      <div v-for="(data, index) in dataList" :key="index" class="Border" >-->
139 <!--        <el-card shadow="never" class="aui-card&#45;&#45;fill" style="margin-top: 5px">-->
140 <!--          <el-row type="flex" justify="space-around">-->
141 <!--            <el-col :span="4" style="margin-top: 40px" class="Border_l">-->
142 <!--              <el-row>-->
143 <!--                <el-col :span="12">-->
144 <!--                  <div style="width: 100%; text-align: left; font-size: 18px">-->
145 <!--                    当前值-->
146 <!--                  </div>-->
147 <!--                  <div-->
148 <!--                          style="-->
149 <!--                  width: 100%;-->
150 <!--                  height: 30px;-->
151 <!--                  margin-top: 10px;-->
152 <!--                  margin-bottom: 10px;-->
153 <!--                  color: #000000;-->
154 <!--                  font-size: 24px;-->
155 <!--                "-->
156 <!--                  >-->
157 <!--                    <span>{{ data.currentValue }}</span>-->
158 <!--                    <span style="font-size: 14px">{{data.unit}}</span>-->
159 <!--                  </div>-->
160 <!--                </el-col>-->
161 <!--                <el-col :span="12">-->
162 <!--                  <div style="width: 100%; text-align: left; font-size: 18px">-->
163 <!--                    分析长度-->
164 <!--                  </div>-->
165 <!--                  <div-->
166 <!--                          style="-->
167 <!--                  width: 100%;-->
168 <!--                  height: 30px;-->
169 <!--                  margin-top: 10px;-->
170 <!--                  margin-bottom: 10px;-->
171 <!--                  color: #000000;-->
172 <!--                  font-size: 24px;-->
173 <!--                "-->
174 <!--                  >-->
175 <!--                <span>{{ data.length }}</span-->
176 <!--                ><span style="font-size: 14px">天</span>-->
177 <!--                  </div>-->
178 <!--                </el-col>-->
179 <!--              </el-row>-->
180 <!--              &lt;!&ndash;            <el-button type="default" @onclick="viewHistoryData(bfg1Data)">&ndash;&gt;-->
181 <!--              &lt;!&ndash;              查看历史</el-button>&ndash;&gt;-->
182 <!--            </el-col>-->
183 <!--            <el-col :span="19">-->
184 <!--              <div>-->
185 <!--                <div :id="'raw' + index" style="margin-top: 20px" class="ecbox"></div>-->
186 <!--              </div>-->
187 <!--            </el-col>-->
188 <!--          </el-row>-->
189 <!--          <el-row>-->
190 <!--            <el-col :span="12" class="Border_down" align="left">-->
191 <!--              <el-row-->
192 <!--                      type="flex"-->
193 <!--                      justify="center"-->
194 <!--                      align="middle"-->
195 <!--                      style="height: 5vh"-->
196 <!--              >-->
197 <!--                <el-col :span="5" style="padding-top:5vh">-->
198 <!--              <span style="font-size: 16px; font-weight: 600">-->
199 <!--                整体趋势下降-->
200 <!--                <i class="el-icon-bottom"></i>-->
201 <!--              </span>-->
202 <!--                </el-col>-->
203 <!--                <el-col :span="5" style="padding-top:5vh">-->
204 <!--                  <el-row style="font-size: 14px">-->
205 <!--                    <span>历史平均值</span>-->
206 <!--                  </el-row>-->
207 <!--                  <el-row style="font-size: 14px">-->
208 <!--                    <span>15.4%</span>-->
209 <!--                  </el-row>-->
210 <!--                </el-col>-->
211 <!--                <el-col :span="5" style="padding-top:5vh">-->
212 <!--                  <el-row style="font-size: 14px">-->
213 <!--                    <span>历史最大值</span>-->
214 <!--                  </el-row>-->
215 <!--                  <el-row style="font-size: 14px">-->
216 <!--                    <span>15.7%</span>-->
217 <!--                  </el-row>-->
218 <!--                </el-col>-->
219 <!--                <el-col :span="5" style="padding-top:5vh">-->
220 <!--                  <el-row style="font-size: 14px">-->
221 <!--                    <span>近期最大值</span>-->
222 <!--                  </el-row>-->
223 <!--                  <el-row style="font-size: 14px">-->
224 <!--                    <span>15.7%</span>-->
225 <!--                  </el-row>-->
226 <!--                </el-col>-->
227 <!--              </el-row>-->
228 <!--            </el-col>-->
229 <!--            <el-col :span="12" class="Border_down" align="left">-->
230 <!--              <el-row style="margin-left: 2vh; margin-top: 1vh">-->
231 <!--                <span style="font-size: 14px; font-weight: 600">调度建议</span>-->
232 <!--              </el-row>-->
233 <!--              <el-row>-->
234 <!--                <el-col-->
235 <!--                        :span="18"-->
236 <!--                        class="Border_text"-->
237 <!--                        style="margin-left: 2vh; margin-top: 1vh; padding-top: 10px"-->
238 <!--                ><span-->
239 <!--                        style="-->
240 <!--                  margin-left: 2vh;-->
241 <!--                  font-size: 18px;-->
242 <!--                  font-family: '楷体';-->
243 <!--                  font-weight: 600;-->
244 <!--                  color: red;-->
245 <!--                "-->
246 <!--                >暂无调度建议</span-->
247 <!--                ></el-col-->
248 <!--                >-->
249 <!--                <el-col-->
250 <!--                        :span="5"-->
251 <!--                        class="Border_text"-->
252 <!--                        style="margin-top: 1vh; padding-top: 10px"-->
253 <!--                >2024-03-24 8:54</el-col-->
254 <!--                >-->
255 <!--              </el-row>-->
256 <!--            </el-col>-->
257 <!--          </el-row>-->
258 <!--        </el-card>-->
259 <!--      </div>-->
260 <!--    </el-card>-->
261   </div>
262 </template>
263
264 <script>
265   import * as echarts from "echarts";
266   import {getSeriesData} from '@/utils/mathUtils'
267
268   export default {
269     data() {
270       return {
271         page:"fx",
272         radio: "分选",
273         loading: false,
274         bfg1Data: {
275           alarmList: {},
276         },
277         dataList:[],
278         chartsName:{},
279         wyChartsName:{
280           'A010060':'地销混煤',
281           'A010061':'洗中块外运',
282           'A010062':'洗小块外运',
283           'A010063':'矸石外运',
284           'A010064':'小块转载',
285           'A010065':'火车外运吨数',
286           'A010066':'火车外运列数'
287         },
288         fxChartsName:{},
289         nsylChartsName:{},
290         gfChartsName:{},
291       };
292     },
293     mounted() {
294       this.init()
295     },
296     methods: {
297       init() {
298         window.addEventListener("resize", this.handleResize);
299         this.chartsName = this.wyChartsName
300         this.getPointDataList()
301       },
302       change(){
303         console.log(this.radio);
304         this.loading = true
305         if(this.radio=="分选"){
306           this.chartsName = this.fxChartsName
307           this.page="fx"
308           this.getPointDataList()
309         }else if(this.radio=="浓缩压滤"){
310           this.chartsName = this.nsylChartsName
311           this.page="nsyl"
312           this.getPointDataList()
313         }else if(this.radio=="鼓风"){
314           this.chartsName = this.gfChartsName
315           this.page="gf"
316           this.getPointDataList()
317         }else if(this.radio=="外运"){
318           this.chartsName = this.wyChartsName
319           this.page="wy"
320           Promise.all([
321             this.getPageParamDataList()
322           ]).then(() => {
323             if (this.prepareDataList.length !== 0) {
324               this.getDataList();
325             }
326           })
327         }
328       },
329       getPageParamDataList(){
330         return this.$http.get(`/iailab-ntt-model/param/page/${this.page}`).then(({data: res}) => {
331           if (res.code !== 0) {
332             return this.$message.error(res.msg)
333           }
334           this.prepareDataList = res.data
335         })
336       },
337       getDataList() {
338         this.loading = true
339         let that = this
340         let params = []
341         this.prepareDataList.forEach((data) => {
342           params.push(data.chartCode)
343         })
344         this.$http.post(`/iailab-ntt-data/api/data/ind-item/values-trend`, params).then(({data: res}) => {
345           this.loading = false
346           if (res.code !== 0) {
347             console.log(res.msg)
348             return
349           }
350           this.dataList = []
351           this.prepareDataList.forEach((data, index) => {
352             data.dataValue = res.data['values'][data.chartCode]
353             //获取当前值数据，获取最后一个有值的数据
354             for (let i = data.dataValue.length - 1; i >= 0; i--) {
355               if (data.dataValue[i].dataValue) {
356                 data.currentValue = data.dataValue[i].dataValue
357                 break
358               }
359             }
360             data.trendValue = res.data['trend'][data.chartCode]
361             let slopeFlag = data.trendValue.slope_flag
362             //判断整体趋势，根据趋势值修改趋势后面的图标,生成建议值
363             let scopeValue = ''
364             switch (slopeFlag) {
365               case 1:
366                 data.trend = '上升'
367                 data.iconClass = 'el-icon-top'
368                 scopeValue = '略大'
369                 break
370               case 2:
371                 data.trend = '上升'
372                 data.iconClass = 'el-icon-top'
373                 scopeValue = '过大'
374                 break
375               case -1:
376                 data.trend = '下降'
377                 data.iconClass = 'el-icon-bottom'
378                 scopeValue = '略小'
379                 break
380               case -2:
381                 data.trend = '下降'
382                 data.iconClass = 'el-icon-bottom'
383                 scopeValue = '过小'
384                 break
385             }
386             //生成调度建议
387             let xAxis = []
388             data.dataValue.forEach((item) =>{
389               xAxis.push(item.dataTime)
390             })
391             if(slopeFlag === 0 ){
392               data.trend = '平稳'
393               data.overSlopeSug = '暂无调度建议'
394             }else {
395               let startTime = xAxis[0]
396               let endTime = xAxis[xAxis.length - 1]
397               data.overSlopeSug = startTime + '到' + endTime + ',' + this.chartsName[data.chartCode] + '趋势' + data.trend + '幅度' + scopeValue + '，请及时关注'
398             }
399             data.chartName = this.chartsName[data.chartCode]
400             this.dataList.push(data)
401             setTimeout(function () {
402               that.getCharts(data,index);
403             }, 1000)
404           })
405         })
406       },
407       getPointDataList() {
408         this.loading = true
409         let that = this
410         this.$http.get(`/iailab-ntt-model/param/page/point/${this.page}`).then(({data: res}) => {
411           this.loading = false
412           if (res.code !== 0) {
413             console.log(res.msg)
414             return
415           }
416           this.dataList = res.data
417           res.data.forEach((data,index) => {
418             data.chartCode = data.pointNo
419             //获取当前值数据，获取最后一个有值的数据
420             for (let i = data.dataValue.length - 1; i >= 0; i--) {
421               if (data.dataValue[i].dataValue) {
422                 data.currentValue = data.dataValue[i].dataValue
423                 break
424               }
425             }
426             setTimeout(function () {
427               that.getCharts(data,index);
428             }, 1000)
429           })
430         })
431       },
432       getCharts(data,index) {
433         let a = document.getElementById('raw' + index)
434         let myChart = this.$echarts.init(document.getElementById('raw' + index))
435         let valueData = data.dataValue
436         let chartData = []
437         let xAxis = []
438         valueData.forEach((item) =>{
439           xAxis.push(item.dataTime)
440           if (item.dataValue && item.dataValue >= 0) {
441             chartData.push([item.dataTime, item.dataValue])
442           }
443         })
444         let trendDate = getSeriesData(data.trendValue.slope, data.trendValue.bias, xAxis.length)
445         var option = {
446           title: {
447             text: data.chartName,
448           },
449           tooltip: {
450             trigger: "axis",
451           },
452           grid: {
453             left: "3%",
454             right: "4%",
455             bottom: "3%",
456             containLabel: true,
457           },
458           xAxis: {
459             type: "category",
460             boundaryGap: false,
461             data: xAxis,
462           },
463           yAxis: {
464             type: "value",
465           },
466           series: [
467             {
468               name: data.chartName,
469               type: "line",
470               smooth: true,
471               stack: "Total",
472               data: chartData,
473             },
474             {
475               name: '趋势',
476               data: trendDate,
477               type: 'line',
478               smooth: true,
479               showSymbol: false,
480               color: '#FFAA5D'
481             }
482           ],
483         };
484         if (option && typeof option === "object") {
485           myChart.setOption(option);
486         }
487         return option;
488       },
489       // getCharts() {
490       //   this.loading = true
491       //   let that = this
492       //   this.$http.get(`/iailab-ntt-model/analysis/raw/${this.page}`).then(({data: res}) => {
493       //     this.loading = false
494       //     if (res.code !== 0) {
495       //       return this.$message.error(res.msg)
496       //     }
497       //     this.dataList=res.data
498       //     this.dataList.forEach((data, index) => {
499       //       setTimeout(function() {
500       //         that.getLines(data,index);
501       //       }, 1000)
502       //     });
503       //   }).catch(() => {})
504       // },
505       // getLines(data,id) {
506       //   let myChart = this.$echarts.init(
507       //           document.getElementById("raw" + id)
508       //   );
509       //   var option = {
510       //     title: {
511       //       text: data.barLineDTO.valueName,
512       //     },
513       //     tooltip: {
514       //       trigger: "axis",
515       //     },
516       //     grid: {
517       //       left: "3%",
518       //       right: "4%",
519       //       bottom: "3%",
520       //       containLabel: true,
521       //     },
522       //     xAxis: {
523       //       type: "category",
524       //       boundaryGap: false,
525       //       data: data.barLineDTO.categories,
526       //     },
527       //     yAxis: {
528       //       type: "value",
529       //     },
530       //     series: [
531       //       {
532       //         name: data.barLineDTO.series[0].name,
533       //         type: "line",
534       //         smooth: true,
535       //         stack: "Total",
536       //         data: data.barLineDTO.series[0].data,
537       //       },
538       //     ],
539       //   };
540       //   if (option && typeof option === "object") {
541       //     myChart.setOption(option);
542       //   }
543       // },
544       handleResize() {
545         this.dataList.forEach((data, index) => {
546           var myChart = echarts.getInstanceByDom(
547                   document.getElementById(data.chartCode)
548           );
549           myChart.resize();
550         });
551       },
552     },
553     beforeDestroy() {
554       window.removeEventListener("resize", this.handleResize);
555     },
556   };
557 </script>
558
559 <style scoped>
560   .ecbox {
561     width: 100%;
562     height: 30vh;
563   }
564   .Border {
565     height: 42vh+40px;
566   }
567   .Border_l {
568     height: 20vh;
569   }
570   .Border_down {
571     border: 1px solid    #F2F3F5;
572     height: 12vh;
573   }
574   .Border_text {
575     background-color:     #F2F3F5;
576     border: 1px solid    #F2F3F5;
577     height: 7vh;
578   }
579 </style>