选煤厂生产管理平台前端代码
查看 | 历史 | 提交 | 提交对比
Jay
2024-12-10 358c8ecd0642c16980cb8c6d340d4b9c49b7ca33
提交 | 用户 | 时间
58a8ee 1 <template>
J 2   <el-card shadow="never" class="aui-card--fill">
3     <div class="mod-wash-curves-draw">
4       <el-form :inline="true" :model="formData">
5         <el-form-item>
6           <span>可选性曲线 - </span><span>{{formData.curvesCode}}</span>
7         </el-form-item>
8         <el-form-item>
9           <el-button size="mini" @click="getDataList()"> 刷新 </el-button>
10         </el-form-item>
11       </el-form>
12       <el-table
13         ref="table"
14         v-loading="loading"
15         :data="dataList"
16         border
17         height="300"
18       >
19         <el-table-column prop="code" label="流水号" header-align="center" align="center"
20                          width="140"/>
21         <el-table-column prop="mdjName" label="密度级" header-align="center"
22                          align="center"/>
23         <el-table-column label="综合累计" header-align="center">
24           <el-table-column prop="zhljcl" label="产率(%)" header-align="center"
25                            align="center"/>
26           <el-table-column prop="zhljhf" label="灰分(%)" header-align="center"
27                            align="center"/>
28         </el-table-column>
29         <el-table-column label="浮物累计" header-align="center" >
30           <el-table-column prop="fwljcl" label="产率(%)" header-align="center"
31                            align="center"/>
32           <el-table-column prop="fwljhf" label="灰分(%)" header-align="center"
33                            align="center"/>
34         </el-table-column>
35         <el-table-column label="沉物累计" header-align="center" >
36           <el-table-column prop="cwljcl" label="产率(%)" header-align="center"
37                            align="center"/>
38           <el-table-column prop="cwljhf" label="灰分(%)" header-align="center"
39                            align="center"/>
40         </el-table-column>
41         <el-table-column prop="md" label="密度" header-align="center" align="center" />
42         <el-table-column prop="hl" label="±0.1含量" header-align="center" align="center" />
43 <!--        <el-table-column prop="lf" label="硫分(%)" header-align="center" align="center" />-->
44       </el-table>
45
46       <el-divider content-position="left">可选性曲线</el-divider>
47       <el-form :inline="true" :model="formData">
48         <el-form-item>
49           <el-select v-model="formData.curvesType" placeholder="绘图方法" style="width: 150px"
50                      clearable >
51             <el-option
52               v-for="dict in getStrDictOptions(DICT_TYPE.CURVES_TYPE)"
53               :key="dict.value"
54               :label="dict.label"
55               :value="dict.value"
56             />
57           </el-select>
58         </el-form-item>
59         <el-form-item>
60           <el-button type="primary" @click="drawHandle">开始绘图</el-button>
61         </el-form-item>
62       </el-form>
63       <!--可选性曲线-->
64       <div class="wash-curves">
65         <div style="width: 40%; padding-left: 20px;">
66           <div id="wash" ref="washChart"
67                v-loading="chartLoading"
68                style="width: 500px; height: 500px; text-align: center"></div>
69         </div>
70         <div style="width: 58%;">
71           <!--λ曲线-->
72           <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
73             <el-row>
74               <el-col :span="2">
75                 <el-form-item>λ曲线</el-form-item>
76               </el-col>
77               <el-col :span="11">
78                 <el-form-item label="基元灰分" prop="cellAsh">
79                   <el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
80                                    v-model="formInline.cellAsh" placeholder="请输入灰分"/>
81                 </el-form-item>
82                 <el-form-item>
83                   <el-button size="mini" type="primary" @click="queryCellFloat">求浮物产率</el-button>
84                 </el-form-item>
85               </el-col>
86               <el-col :span="11">
87                 <el-form-item label="浮物产率" prop="cellFloat">
88                   <el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
89                                    v-model="formInline.cellFloat" placeholder="请输入产率"/>
90                 </el-form-item>
91                 <el-form-item>
92                   <el-button size="mini" type="primary" @click="queryCellAsh">求基元灰分</el-button>
93                 </el-form-item>
94               </el-col>
95             </el-row>
96           </el-form>
97
98           <!--β曲线-->
99           <el-form :inline="true" :model="formInlineFloat" class="demo-form-inline" label-width="100px">
100             <el-row>
101               <el-col :span="2">
102                 <el-form-item>β曲线</el-form-item>
103               </el-col>
104               <el-col :span="11">
105                 <el-form-item label="灰分">
106                   <el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
107                                    v-model="formInlineFloat.ash" placeholder="请输入灰分"/>
108                 </el-form-item>
109                 <el-form-item>
110                   <el-button size="mini" type="primary" @click="queryFloatYield">求浮物产率</el-button>
111                 </el-form-item>
112               </el-col>
113               <el-col :span="11">
114                 <el-form-item label="浮物产率">
115                   <el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
116                                    v-model="formInlineFloat.float" placeholder="请输入产率"/>
117                 </el-form-item>
118                 <el-form-item>
119                   <el-button size="mini" type="primary" @click="queryFloatAsh">求灰分</el-button>
120                 </el-form-item>
121               </el-col>
122             </el-row>
123           </el-form>
124
125           <!--θ曲线-->
126           <el-form :inline="true" :model="formInlineSink" class="demo-form-inline" label-width="100px">
127             <el-row>
128               <el-col :span="2">
129                 <el-form-item>θ曲线</el-form-item>
130               </el-col>
131               <el-col :span="11">
132                 <el-form-item label="灰分">
133                   <el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
134                                    v-model="formInlineSink.ash" placeholder="请输入灰分"/>
135                 </el-form-item>
136                 <el-form-item>
137                   <el-button size="mini" type="primary" @click="querySinkYield">求沉物产率</el-button>
138                 </el-form-item>
139               </el-col>
140               <el-col :span="11">
141                 <el-form-item label="沉物产率">
142                   <el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
143                                    v-model="formInlineSink.sink" placeholder="请输入产率"/>
144                 </el-form-item>
145                 <el-form-item>
146                   <el-button size="mini" type="primary" @click="querySinkAsh">求灰分</el-button>
147                 </el-form-item>
148               </el-col>
149             </el-row>
150           </el-form>
151
152           <!--δ曲线-->
153           <el-form :inline="true" :model="formInlineDensity" class="demo-form-inline" label-width="100px">
154             <el-row>
155               <el-col :span="2">
156                 <el-form-item>δ曲线</el-form-item>
157               </el-col>
158               <el-col :span="11">
159                 <el-form-item label="密度">
160                   <el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
161                                    v-model="formInlineDensity.density" placeholder="请输入密度"/>
162                 </el-form-item>
163                 <el-form-item>
164                   <el-button size="mini" type="primary" @click="queryDensityFloat">求浮物产率</el-button>
165                 </el-form-item>
166               </el-col>
167               <el-col :span="11">
168                 <el-form-item label="浮物产率">
169                   <el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
170                                    v-model="formInlineDensity.float" placeholder="请输入产率"/>
171                 </el-form-item>
172                 <el-form-item>
173                   <el-button size="mini" type="primary" @click="queryDensitydensity">求密度</el-button>
174                 </el-form-item>
175               </el-col>
176             </el-row>
177           </el-form>
178
179           <!--ε曲线-->
180           <el-form :inline="true" :model="formInlineDensityScope" class="demo-form-inline" label-width="100px">
181             <el-row>
182               <el-col :span="2">
183                 <el-form-item>ε曲线</el-form-item>
184               </el-col>
185               <el-col :span="11">
186                 <el-form-item label="密度">
187                   <el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
188                                    v-model="formInlineDensityScope.density" placeholder="请输入密度"/>
189                 </el-form-item>
190                 <el-form-item>
191                   <el-button size="mini" type="primary" @click="queryScope">求±0.1含量</el-button>
192                 </el-form-item>
193               </el-col>
194               <el-col :span="11">
195                 <el-form-item label="±0.1含量">
196                   <el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
197                                    v-model="formInlineDensityScope.scope"/>
198                 </el-form-item>
199                 <el-form-item>
200                   <el-checkbox size="mini" v-model="formInlineDensityScope.subsGan">扣矸(1.8)/扣低(1.5)</el-checkbox>
201                 </el-form-item>
202               </el-col>
203             </el-row>
204           </el-form>
205         </div>
206       </div>
207
208     </div>
209   </el-card>
210 </template>
211 <script lang="ts" setup>
212   import * as WashCurvesDetApi from '@/api/xmcpms/coal-quality/analysis/wash-curves/wash-curves-det'
213   import * as WashCurvesChartApi from '@/api/xmcpms/coal-quality/analysis/wash-curves/wash-curves-chart'
214   import * as echarts from "echarts";
215   import {DICT_TYPE, getStrDictOptions} from '@/utils/dict'
216   import * as WashCurvesApi from "@/api/xmcpms/coal-quality/analysis/wash-curves";
217
218   const route = useRoute()
219   const chartLoading = ref(false)
220   const dataList = ref()
221   const cellData = ref([])
222   const floatData = ref([])
223   const sinkData = ref([])
224   const densityData = ref([])
225   const densityScopeData = ref([])
226   const xAxisData1 = ref([])
227   const xAxisData2 = ref([])
228   const legendData = ref([])
229   const floatPointData = ref([])
230   const densityPointData = ref([])
231   const densityScopePointData = ref([])
232   const washChart = ref(null);
233   let loadChart = null;
234
235   const curvesTypeOption = [
236     {
237       value: 0,
238       label: '插值法',
239     },
240     {
241       value: 1,
242       label: '拟合法',
243     }
244   ]
245   const formData = ref({
246     curvesId: '0',
247     curvesCode: '',
248     curvesType: 0,
249     fcfa: '',
250   })
251
252   const formInline = ref({
253     cellAsh: '',
254     cellFloat: ''
255   })
256   const formInlineFloat = ref({
257     ash: '',
258     float: ''
259   })
260   const formInlineSink= ref({
261     ash: '',
262     sink: ''
263   })
264   const formInlineDensity = ref({
265     density: '',
266     float: ''
267   })
268   const formInlineDensityScope = ref({
269     density: '',
270     scope: '',
271     subsGan: false,
272   })
273
274   const getDataList = async () => {
275     dataList.value = await WashCurvesDetApi.getWashCurvesDet(formData.value.curvesId)
276   }
277
278   const getChart = async () => {
279     if (!formData.value.curvesId) {
280       formData.value.resetFields()
281       return
282     }
283     chartLoading.value = true
284     const data = await WashCurvesChartApi.getWashCurvesChart(formData.value.curvesId);
285     chartLoading.value = false
286     formData.value.curvesType = data.curvesType
287     cellData.value = JSON.parse(data.cellData)
288     floatData.value = JSON.parse(data.floatData)
289     sinkData.value = JSON.parse(data.sinkData)
290     densityData.value = JSON.parse(data.densityData)
291     densityScopeData.value = JSON.parse(data.densityScopeData)
292     xAxisData1.value = JSON.parse(data.xaxisData1)
293     xAxisData2.value = JSON.parse(data.xaxisData2)
294     floatPointData.value = JSON.parse(data.floatPointData)
295     densityPointData.value = JSON.parse(data.densityPointData)
296     densityScopePointData.value = JSON.parse(data.densityScopePointData)
297     await drawWashCurves()
298   }
299
300   const drawWashCurves = async () => {
301     let option = {
302       tooltip: {
303         trigger: 'axis',
304         axisPointer: {
305           type: 'cross'
306         }
307       },
308       legend: {},
309       grid: {
310         top: 70,
311         bottom: 50
312       },
313       yAxis: [
314         {
315           type: "value",
316           min: 0,
317           max: 100,
318           interval: 10,
319           inverse: true //反转坐标轴
320         },
321         {
322           type: "value",
323           min: 0,
324           max: 100,
325           interval: 10
326         }
327       ],
328       xAxis: [
329         {
330           type: 'category',
331           boundaryGap: false,
332           axisTick: {
333             alignWithLabel: true
334           },
335           data: xAxisData1.value,
336           interval: 0.01,
337         },
338         {
339           type: 'category',
340           boundaryGap: false,
341           axisTick: {
342             alignWithLabel: true
343           },
344           interval: 0.01,
345           inverse: true,
346           data: xAxisData2.value,
347         }
348       ],
349
350       series: [
351         {
352           data: floatPointData.value,
353           xAxisIndex: 0,
354           yAxisIndex: 0,
355           type: 'scatter'
356         }, {
357           symbolSize: 10,
358           data: densityPointData.value,
359           xAxisIndex: 1,
360           yAxisIndex: 0,
361           type: 'scatter'
362         },
363         {
364           symbolSize: 10,
365           data: densityScopePointData.value,
366           xAxisIndex: 1,
367           yAxisIndex: 0,
368           type: 'scatter'
369         },
370         {
371           showSymbol: false,
372           name: '灰分特性曲线',
373           type: 'line',
374           xAxisIndex: 0,
375           yAxisIndex: 0,
376           smooth: true,
377           emphasis: {
378             focus: 'series'
379           },
380           data: cellData.value
381         },
382         {
383           showSymbol: false,
384           name: '密度曲线',
385           type: 'line',
386           xAxisIndex: 1,
387           yAxisIndex: 0,
388           smooth: true,
389           emphasis: {
390             focus: 'series'
391           },
392           data: densityData.value
393         },
394         {
395           showSymbol: false,
396           name: '浮物曲线',
397           type: 'line',
398           xAxisIndex: 0,
399           yAxisIndex: 0,
400           smooth: true,
401           emphasis: {
402             focus: 'series'
403           },
404           data: floatData.value
405         },
406
407         {
408           showSymbol: false,
409           name: '沉物曲线',
410           type: 'line',
411           xAxisIndex: 0,
412           yAxisIndex: 1,
413           smooth: true,
414           emphasis: {
415             focus: 'series'
416           },
417           data: sinkData.value
418         },
419         {
420           showSymbol: false,
421           name: '密度±0.1曲线',
422           type: 'line',
423           xAxisIndex: 1,
424           yAxisIndex: 0,
425           smooth: true,
426           emphasis: {
427             focus: 'series'
428           },
429           data: densityScopeData.value
430         },
431       ]
432     };
433     loadChart.setOption(option);
434   }
435
436   const drawHandle = async () => {
437     chartLoading.value = true
438     const params = formData.value as WashCurvesChartApi.WashCurvesChartVO
439     const data = await WashCurvesChartApi.drawWashCurvesChart(params);
440     chartLoading.value = false
441     formData.value.curvesType = data.curvesType
442     cellData.value = JSON.parse(data.cellData)
443     floatData.value = JSON.parse(data.floatData)
444     sinkData.value = JSON.parse(data.sinkData)
445     densityData.value = JSON.parse(data.densityData)
446     densityScopeData.value = JSON.parse(data.densityScopeData)
447     xAxisData1.value = JSON.parse(data.xaxisData1)
448     xAxisData2.value = JSON.parse(data.xaxisData2)
449     floatPointData.value = JSON.parse(data.floatPointData)
450     densityPointData.value = JSON.parse(data.densityPointData)
451     densityScopePointData.value = JSON.parse(data.densityScopePointData)
452     await drawWashCurves()
453   }
454
455   const queryCellFloat = async () => {
456     if (!formInline.value.cellAsh) {
457       console.log("请输入")
458       return
459     }
460     let floatIndex = await getClosestNumber(xAxisData1.value, formInline.value.cellAsh)
461     console.log(floatIndex)
462     let a = cellData.value[floatIndex]
463     formInline.value.cellFloat = cellData.value[floatIndex]
464   }
465
466   const getClosestNumber = async (array, target) => {
467     let result = array[0];
468     let resultIndex = 0
469     for (let i = 0; i < array.length; i++) {
470       if (Math.abs(array[i] - target) < Math.abs(result - target)) {
471         result = array[i]
472         resultIndex = i;
473       }
474     }
475     return resultIndex;
476   }
477
478   const queryCellAsh = async () => {
479     if (!formInline.value.cellFloat) {
480       console.log("请输入")
481       return
482     }
483     let ashIndex = await getClosestNumber(cellData.value, formInline.value.cellFloat)
484     console.log(formInline.value.cellFloat)
485     console.log(ashIndex)
486     formInline.value.cellAsh = xAxisData1.value[ashIndex]
487
488   }
489
490   const queryFloatAsh = async () => {
491     if (!formInlineFloat.value.float) {
492       console.log("请输入")
493       return
494     }
495     let ashIndex = await getClosestNumber(floatData.value, formInlineFloat.value.float)
496     formInlineFloat.value.ash = xAxisData1.value[ashIndex]
497   }
498
499   const queryFloatYield = async () => {
500     if (!formInlineFloat.value.ash) {
501       console.log("请输入")
502       return
503     }
504     let floatIndex = await getClosestNumber(xAxisData1.value, formInlineFloat.value.ash)
505     formInlineFloat.value.float = floatData.value[floatIndex]
506   }
507
508   const querySinkAsh = async () => {
509     if (!formInlineSink.value.sink) {
510       console.log("请输入")
511       return
512     }
513     let ashIndex = await getClosestNumber(sinkData.value, formInlineSink.value.sink)
514     console.log(ashIndex)
515     formInlineSink.value.ash = xAxisData1.value[ashIndex]
516
517   }
518
519   const querySinkYield = async () =>  {
520     if (!formInlineSink.value.ash) {
521       console.log("请输入")
522       return
523     }
524     let sinkIndex = await getClosestNumber(xAxisData1.value, formInlineSink.value.ash)
525     formInlineSink.value.sink = sinkData.value[sinkIndex]
526   }
527
528   const queryDensitydensity = async () => {
529     if (!formInlineDensity.value.float) {
530       console.log("请输入")
531       return
532     }
533     let densityIndex = await getClosestNumber(densityData.value, formInlineDensity.value.float)
534     formInlineDensity.value.density = xAxisData2.value[densityIndex]
535   }
536
537   const queryDensityFloat = async () => {
538     if (!formInlineDensity.value.density) {
539       console.log("请输入")
540       return
541     }
542     let floatIndex = await getClosestNumber(xAxisData2.value, formInlineDensity.value.density)
543     formInlineDensity.value.float = densityData.value[floatIndex]
544   }
545
546   const queryScope = async () => {
547     if (!formInlineDensityScope.value.density) {
548       console.log("请输入")
549       return
550     }
551     let scopeIndex = await getClosestNumber(xAxisData2.value, formInlineDensityScope.value.density)
552     formInlineDensityScope.value.scope = densityScopeData.value[scopeIndex]
553     if (formInlineDensityScope.value.subsGan == true) {
554       if (formInlineDensityScope.value.density >= 1.7) {
555         let kouDiIndex = await getClosestNumber(xAxisData2.value, 1.5) //扣抵1.5
556         formInlineDensityScope.value.scope = densityScopeData.value[scopeIndex] / (100 - densityData.value[kouDiIndex]) * 100
557       } else {
558         let kouGanIndex = await getClosestNumber(xAxisData2.value, 1.8) //扣矸1.8
559         formInlineDensityScope.value.scope = densityScopeData.value[scopeIndex] / (densityData.value[kouGanIndex]) * 100
560       }
561     }
562   }
563
564   onMounted(async () => {
565     formData.value.curvesId = route.query.curvesId
566     formData.value.curvesCode = route.query.code
567     formData.value.fcfa = route.query.fcfa
568     loadChart = echarts.init(washChart.value);
569     await getDataList()
570     await getChart()
571   })
572
573 </script>
574 <style scoped>
575   .wash-curves {
576     display: flex;
577     flex-direction: row;
578     flex-wrap: wrap;
579     justify-content: center;
580     align-content: center;
581   }
582 </style>