| 提交 | 用户 | 时间 | ||
| 850106 | 1 | <template> |
| H | 2 | <div class="distribution-curves" ref="distribution"> |
| 3 | <el-col :span="16"> | |
| 4 | <div id="distribution" | |
| 5 | style="width: 60vh; height: 50vh; text-align: center"> | |
| 6 | </div> | |
| 7 | </el-col> | |
| 8 | <el-col :span="8"> | |
| 9 | <el-form label-width="80px" :inline="true" :model="curvesQueryForm" :rule="rules"> | |
| 10 | <el-form-item prop="density" label="密度:"> | |
| 11 | <el-input size="mini" v-model="curvesQueryForm.density" placeholder="1.0~2.5 密度Kg/L" clearable></el-input> | |
| 12 | </el-form-item> | |
| 13 | <el-form-item><i class="el-icon-search" @click="open('density')"></i></el-form-item> | |
| 14 | <el-form-item prop="allocation1" label="一段产率:"> | |
| 15 | <el-input size="mini" v-model.number="curvesQueryForm.allocation1" placeholder="0~100 分配率%" clearable></el-input> | |
| 16 | </el-form-item> | |
| 17 | <el-form-item><i class="el-icon-search" @click="open('allocation1')"></i></el-form-item> | |
| 18 | <el-form-item prop="allocation2" label="二段产率:"> | |
| 19 | <el-input size="mini" v-model.number="curvesQueryForm.allocation2" placeholder="0~100 分配率%" clearable></el-input> | |
| 20 | </el-form-item> | |
| 21 | <el-form-item><i class="el-icon-search" @click="open('allocation2')"></i></el-form-item> | |
| 22 | </el-form> | |
| 23 | </el-col> | |
| 24 | </div> | |
| 25 | ||
| 26 | </template> | |
| 27 | <script> | |
| 28 | export default { | |
| 29 | data() { | |
| 30 | return { | |
| 31 | chartLoading: false, | |
| 32 | loadChart: {}, | |
| 33 | curvesQueryForm: { | |
| 34 | density: '', | |
| 35 | allocation1: '', | |
| 36 | allocation2: '' | |
| 37 | }, | |
| 38 | xAxisData: [], | |
| 39 | disDataOneCurve: '', | |
| 40 | disDataTwoCurve: '' | |
| 41 | } | |
| 42 | ||
| 43 | }, | |
| 44 | methods: { | |
| 45 | init (data) { | |
| 46 | this.$nextTick(() => { | |
| 47 | this.loadChart = this.$echarts.init(document.getElementById('distribution')); | |
| 48 | this.getChart(data) | |
| 49 | }) | |
| 50 | }, | |
| 51 | // 分配曲线 | |
| 52 | getChart(data) { | |
| 53 | let seriesData = [] | |
| 54 | this.xAxisData = data.disDataOne_curve[0] | |
| 55 | this.disDataOneCurve = data.disDataOne_curve[1] | |
| 56 | this.disDataTwoCurve = data.disDataTwo_curve[1] | |
| 57 | // let disDataTwoPoint = [] | |
| 58 | // res.data.disDataTwo[0].forEach((dataX,index) => { | |
| 59 | // disDataTwoPoint.push( | |
| 60 | // [dataX,res.data.disDataTwo[1][index]] | |
| 61 | // ) | |
| 62 | // }) | |
| 63 | // seriesData.push( | |
| 64 | // { | |
| 65 | // data: disDataTwoPoint, | |
| 66 | // type: 'scatter' | |
| 67 | // } | |
| 68 | // ) | |
| 69 | seriesData.push( | |
| 70 | { | |
| 71 | name: '一段产率(矸石和中煤分配率)', | |
| 72 | showSymbol: false, | |
| 73 | smooth: true, | |
| 74 | emphasis: { | |
| 75 | focus: 'series' | |
| 76 | }, | |
| 77 | type: 'line', | |
| 78 | data: data.disDataOne_curve[1] | |
| 79 | } | |
| 80 | ) | |
| 81 | seriesData.push( | |
| 82 | { | |
| 83 | name: '二段产率(矸石分配率)', | |
| 84 | showSymbol: false, | |
| 85 | smooth: true, | |
| 86 | emphasis: { | |
| 87 | focus: 'series' | |
| 88 | }, | |
| 89 | type: 'line', | |
| 90 | data: data.disDataTwo_curve[1] | |
| 91 | } | |
| 92 | ) | |
| 93 | this.drawDistributionCurves(seriesData) | |
| 94 | }, | |
| 95 | ||
| 96 | drawDistributionCurves(seriesData) { | |
| 97 | let option = { | |
| 98 | tooltip: { | |
| 99 | trigger: 'axis', | |
| 100 | axisPointer: { | |
| 101 | type: 'cross' | |
| 102 | } | |
| 103 | }, | |
| 104 | legend: {}, | |
| 105 | xAxis: { | |
| 106 | type: 'category', | |
| 107 | boundaryGap: false, | |
| 108 | axisTick: { | |
| 109 | alignWithLabel: true | |
| 110 | }, | |
| 111 | name: '密度kg/L', | |
| 112 | data: this.xAxisData, | |
| 113 | interval: 0.01, | |
| 114 | }, | |
| 115 | yAxis: { | |
| 116 | type: 'value', | |
| 117 | name: '分配率%' | |
| 118 | }, | |
| 119 | series: seriesData | |
| 120 | }; | |
| 121 | this.loadChart.setOption(option, true); | |
| 122 | }, | |
| 123 | open(item) { | |
| 124 | let message = '' | |
| 125 | let y1Data = this.disDataOneCurve | |
| 126 | let y2Data = this.disDataTwoCurve | |
| 127 | let xData = this.xAxisData | |
| 128 | switch (item) { | |
| 129 | case 'density': | |
| 130 | message = this.queryDensityValue(y1Data,y2Data); | |
| 131 | break; | |
| 132 | case 'allocation1': | |
| 133 | message = this.queryAllocation1Value(xData,y2Data); | |
| 134 | break; | |
| 135 | case 'allocation2': | |
| 136 | message = this.queryAllocation2Value(xData,y1Data); | |
| 137 | break; | |
| 138 | } | |
| 139 | this.$msgbox({ | |
| 140 | confirmButtonText: '确定', | |
| 141 | title: '提示', | |
| 142 | message: message | |
| 143 | }); | |
| 144 | }, | |
| 145 | // 查询 | |
| 146 | queryDensityValue (y1Data,y2Data) { | |
| 147 | let x = this.curvesQueryForm.density | |
| 148 | if(this.checkDensityValue(x)){ | |
| 149 | return this.checkDensityValue(x) | |
| 150 | } | |
| 151 | let y1 = '' | |
| 152 | let y2 = '' | |
| 153 | this.xAxisData.forEach(function (item,index) { | |
| 154 | if (x == item){ | |
| 155 | y1 = y1Data[index]; | |
| 156 | y2 = y2Data[index]; | |
| 157 | } | |
| 158 | }) | |
| 159 | return '分选密度' + x + 'Kg/L，分配率一:' + y1 + '%,分配率二:' + y2 + ' %' | |
| 160 | }, | |
| 161 | queryAllocation1Value(xData,y2Data){ | |
| 162 | let y1 = this.curvesQueryForm.allocation1 | |
| 163 | if (!y1) { | |
| 164 | return '请输入查询信息!' | |
| 165 | } | |
| 166 | if(this.checkAllocationValue(y1)){ | |
| 167 | return this.checkAllocationValue(y1) | |
| 168 | } | |
| 169 | let x = '' | |
| 170 | let y2 = '' | |
| 171 | this.disDataOneCurve.forEach(function (item,index) { | |
| 172 | if (y1 == item){ | |
| 173 | x = xData[index]; | |
| 174 | y2 = y2Data[index]; | |
| 175 | } | |
| 176 | }) | |
| 177 | return '分选密度' + x + 'Kg/L，分配率一:' + y1 + '%,分配率二:' + y2 + ' %' | |
| 178 | }, | |
| 179 | queryAllocation2Value(xData,y1Data){ | |
| 180 | let y2 = this.curvesQueryForm.allocation2 | |
| 181 | if (!y2) { | |
| 182 | return '请输入查询信息!' | |
| 183 | } | |
| 184 | if(this.checkAllocationValue(y2)){ | |
| 185 | return this.checkAllocationValue(y2) | |
| 186 | } | |
| 187 | let x = '' | |
| 188 | let y1 = '' | |
| 189 | this.disDataOneCurve.forEach(function (item,index) { | |
| 190 | if (y2 == item){ | |
| 191 | x = xData[index]; | |
| 192 | y1 = y1Data[index]; | |
| 193 | } | |
| 194 | }) | |
| 195 | return '分选密度' + x + 'Kg/L，分配率一:' + y1 + '%,分配率二:' + y2 + ' %' | |
| 196 | }, | |
| 197 | checkDensityValue(densityValue){ | |
| 198 | if (!densityValue) { | |
| 199 | return '请输入查询信息!' | |
| 200 | } | |
| 201 | const regex = /^\d+(\.\d{1,2})?$/; | |
| 202 | if (!regex.test(densityValue)) { | |
| 203 | return '请输入1.0~2.5的两位小数!' | |
| 204 | } | |
| 205 | if( densityValue < 0 || densityValue >= 2.5){ | |
| 206 | return '请输入1.0~2.5的两位小数!' | |
| 207 | } | |
| 208 | }, | |
| 209 | checkAllocationValue(allocationValue){ | |
| 210 | if (!allocationValue) { | |
| 211 | return '请输入查询信息!' | |
| 212 | } | |
| 213 | const regex = /^\d+(\.\d{1,2})?$/; | |
| 214 | if (!regex.test(allocationValue)) { | |
| 215 | return '请输入0~100之间的两位小数!' | |
| 216 | } | |
| 217 | if( allocationValue < 0 || allocationValue >= 100){ | |
| 218 | return '请输入0~100之间的两位小数!' | |
| 219 | } | |
| 220 | } | |
| 221 | } | |
| 222 | } | |
| 223 | </script> | |
| 224 | <style scoped> | |
| 225 | ||
| 226 | </style> | |
