<template>
|
<el-card shadow="never" class="aui-card--fill">
|
<div class="mod-wash-curves-draw">
|
<el-form :inline="true" :model="formData">
|
<el-form-item>
|
<span>可选性曲线 - </span><span>{{formData.curvesCode}}</span>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="mini" @click="getDataList()"> 刷新 </el-button>
|
</el-form-item>
|
</el-form>
|
<el-table
|
ref="table"
|
v-loading="loading"
|
:data="dataList"
|
border
|
height="300"
|
>
|
<el-table-column prop="code" label="流水号" header-align="center" align="center"
|
width="140"/>
|
<el-table-column prop="mdjName" label="密度级" header-align="center"
|
align="center"/>
|
<el-table-column label="综合累计" header-align="center">
|
<el-table-column prop="zhljcl" label="产率(%)" header-align="center"
|
align="center"/>
|
<el-table-column prop="zhljhf" label="灰分(%)" header-align="center"
|
align="center"/>
|
</el-table-column>
|
<el-table-column label="浮物累计" header-align="center" >
|
<el-table-column prop="fwljcl" label="产率(%)" header-align="center"
|
align="center"/>
|
<el-table-column prop="fwljhf" label="灰分(%)" header-align="center"
|
align="center"/>
|
</el-table-column>
|
<el-table-column label="沉物累计" header-align="center" >
|
<el-table-column prop="cwljcl" label="产率(%)" header-align="center"
|
align="center"/>
|
<el-table-column prop="cwljhf" label="灰分(%)" header-align="center"
|
align="center"/>
|
</el-table-column>
|
<el-table-column prop="md" label="密度" header-align="center" align="center" />
|
<el-table-column prop="hl" label="±0.1含量" header-align="center" align="center" />
|
<!-- <el-table-column prop="lf" label="硫分(%)" header-align="center" align="center" />-->
|
</el-table>
|
|
<el-divider content-position="left">可选性曲线</el-divider>
|
<el-form :inline="true" :model="formData">
|
<el-form-item>
|
<el-select v-model="formData.curvesType" placeholder="绘图方法" style="width: 150px"
|
clearable >
|
<el-option
|
v-for="dict in getStrDictOptions(DICT_TYPE.CURVES_TYPE)"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="drawHandle">开始绘图</el-button>
|
</el-form-item>
|
</el-form>
|
<!--可选性曲线-->
|
<div class="wash-curves">
|
<div style="width: 40%; padding-left: 20px;">
|
<div id="wash" ref="washChart"
|
v-loading="chartLoading"
|
style="width: 500px; height: 500px; text-align: center"></div>
|
</div>
|
<div style="width: 58%;">
|
<!--λ曲线-->
|
<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
|
<el-row>
|
<el-col :span="2">
|
<el-form-item>λ曲线</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="基元灰分" prop="cellAsh">
|
<el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
|
v-model="formInline.cellAsh" placeholder="请输入灰分"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryCellFloat">求浮物产率</el-button>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="浮物产率" prop="cellFloat">
|
<el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
|
v-model="formInline.cellFloat" placeholder="请输入产率"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryCellAsh">求基元灰分</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<!--β曲线-->
|
<el-form :inline="true" :model="formInlineFloat" class="demo-form-inline" label-width="100px">
|
<el-row>
|
<el-col :span="2">
|
<el-form-item>β曲线</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="灰分">
|
<el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
|
v-model="formInlineFloat.ash" placeholder="请输入灰分"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryFloatYield">求浮物产率</el-button>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="浮物产率">
|
<el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
|
v-model="formInlineFloat.float" placeholder="请输入产率"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryFloatAsh">求灰分</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<!--θ曲线-->
|
<el-form :inline="true" :model="formInlineSink" class="demo-form-inline" label-width="100px">
|
<el-row>
|
<el-col :span="2">
|
<el-form-item>θ曲线</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="灰分">
|
<el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
|
v-model="formInlineSink.ash" placeholder="请输入灰分"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="querySinkYield">求沉物产率</el-button>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="沉物产率">
|
<el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
|
v-model="formInlineSink.sink" placeholder="请输入产率"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="querySinkAsh">求灰分</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<!--δ曲线-->
|
<el-form :inline="true" :model="formInlineDensity" class="demo-form-inline" label-width="100px">
|
<el-row>
|
<el-col :span="2">
|
<el-form-item>δ曲线</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="密度">
|
<el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
|
v-model="formInlineDensity.density" placeholder="请输入密度"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryDensityFloat">求浮物产率</el-button>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="浮物产率">
|
<el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
|
v-model="formInlineDensity.float" placeholder="请输入产率"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryDensitydensity">求密度</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<!--ε曲线-->
|
<el-form :inline="true" :model="formInlineDensityScope" class="demo-form-inline" label-width="100px">
|
<el-row>
|
<el-col :span="2">
|
<el-form-item>ε曲线</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="密度">
|
<el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
|
v-model="formInlineDensityScope.density" placeholder="请输入密度"/>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryScope">求±0.1含量</el-button>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11">
|
<el-form-item label="±0.1含量">
|
<el-input-number size="mini" :controls="false" :precision="2" :min="0" :max="100"
|
v-model="formInlineDensityScope.scope"/>
|
</el-form-item>
|
<el-form-item>
|
<el-checkbox size="mini" v-model="formInlineDensityScope.subsGan">扣矸(1.8)/扣低(1.5)</el-checkbox>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</div>
|
|
</div>
|
</el-card>
|
</template>
|
<script lang="ts" setup>
|
import * as WashCurvesDetApi from '@/api/xmcpms/coal-quality/analysis/wash-curves/wash-curves-det'
|
import * as WashCurvesChartApi from '@/api/xmcpms/coal-quality/analysis/wash-curves/wash-curves-chart'
|
import * as echarts from "echarts";
|
import {DICT_TYPE, getStrDictOptions} from '@/utils/dict'
|
import * as WashCurvesApi from "@/api/xmcpms/coal-quality/analysis/wash-curves";
|
|
const route = useRoute()
|
const chartLoading = ref(false)
|
const dataList = ref()
|
const cellData = ref([])
|
const floatData = ref([])
|
const sinkData = ref([])
|
const densityData = ref([])
|
const densityScopeData = ref([])
|
const xAxisData1 = ref([])
|
const xAxisData2 = ref([])
|
const legendData = ref([])
|
const floatPointData = ref([])
|
const densityPointData = ref([])
|
const densityScopePointData = ref([])
|
const washChart = ref(null);
|
let loadChart = null;
|
|
const curvesTypeOption = [
|
{
|
value: 0,
|
label: '插值法',
|
},
|
{
|
value: 1,
|
label: '拟合法',
|
}
|
]
|
const formData = ref({
|
curvesId: '0',
|
curvesCode: '',
|
curvesType: 0,
|
fcfa: '',
|
})
|
|
const formInline = ref({
|
cellAsh: '',
|
cellFloat: ''
|
})
|
const formInlineFloat = ref({
|
ash: '',
|
float: ''
|
})
|
const formInlineSink= ref({
|
ash: '',
|
sink: ''
|
})
|
const formInlineDensity = ref({
|
density: '',
|
float: ''
|
})
|
const formInlineDensityScope = ref({
|
density: '',
|
scope: '',
|
subsGan: false,
|
})
|
|
const getDataList = async () => {
|
dataList.value = await WashCurvesDetApi.getWashCurvesDet(formData.value.curvesId)
|
}
|
|
const getChart = async () => {
|
if (!formData.value.curvesId) {
|
formData.value.resetFields()
|
return
|
}
|
chartLoading.value = true
|
const data = await WashCurvesChartApi.getWashCurvesChart(formData.value.curvesId);
|
chartLoading.value = false
|
formData.value.curvesType = data.curvesType
|
cellData.value = JSON.parse(data.cellData)
|
floatData.value = JSON.parse(data.floatData)
|
sinkData.value = JSON.parse(data.sinkData)
|
densityData.value = JSON.parse(data.densityData)
|
densityScopeData.value = JSON.parse(data.densityScopeData)
|
xAxisData1.value = JSON.parse(data.xaxisData1)
|
xAxisData2.value = JSON.parse(data.xaxisData2)
|
floatPointData.value = JSON.parse(data.floatPointData)
|
densityPointData.value = JSON.parse(data.densityPointData)
|
densityScopePointData.value = JSON.parse(data.densityScopePointData)
|
await drawWashCurves()
|
}
|
|
const drawWashCurves = async () => {
|
let option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross'
|
}
|
},
|
legend: {},
|
grid: {
|
top: 70,
|
bottom: 50
|
},
|
yAxis: [
|
{
|
type: "value",
|
min: 0,
|
max: 100,
|
interval: 10,
|
inverse: true //反转坐标轴
|
},
|
{
|
type: "value",
|
min: 0,
|
max: 100,
|
interval: 10
|
}
|
],
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
axisTick: {
|
alignWithLabel: true
|
},
|
data: xAxisData1.value,
|
interval: 0.01,
|
},
|
{
|
type: 'category',
|
boundaryGap: false,
|
axisTick: {
|
alignWithLabel: true
|
},
|
interval: 0.01,
|
inverse: true,
|
data: xAxisData2.value,
|
}
|
],
|
|
series: [
|
{
|
data: floatPointData.value,
|
xAxisIndex: 0,
|
yAxisIndex: 0,
|
type: 'scatter'
|
}, {
|
symbolSize: 10,
|
data: densityPointData.value,
|
xAxisIndex: 1,
|
yAxisIndex: 0,
|
type: 'scatter'
|
},
|
{
|
symbolSize: 10,
|
data: densityScopePointData.value,
|
xAxisIndex: 1,
|
yAxisIndex: 0,
|
type: 'scatter'
|
},
|
{
|
showSymbol: false,
|
name: '灰分特性曲线',
|
type: 'line',
|
xAxisIndex: 0,
|
yAxisIndex: 0,
|
smooth: true,
|
emphasis: {
|
focus: 'series'
|
},
|
data: cellData.value
|
},
|
{
|
showSymbol: false,
|
name: '密度曲线',
|
type: 'line',
|
xAxisIndex: 1,
|
yAxisIndex: 0,
|
smooth: true,
|
emphasis: {
|
focus: 'series'
|
},
|
data: densityData.value
|
},
|
{
|
showSymbol: false,
|
name: '浮物曲线',
|
type: 'line',
|
xAxisIndex: 0,
|
yAxisIndex: 0,
|
smooth: true,
|
emphasis: {
|
focus: 'series'
|
},
|
data: floatData.value
|
},
|
|
{
|
showSymbol: false,
|
name: '沉物曲线',
|
type: 'line',
|
xAxisIndex: 0,
|
yAxisIndex: 1,
|
smooth: true,
|
emphasis: {
|
focus: 'series'
|
},
|
data: sinkData.value
|
},
|
{
|
showSymbol: false,
|
name: '密度±0.1曲线',
|
type: 'line',
|
xAxisIndex: 1,
|
yAxisIndex: 0,
|
smooth: true,
|
emphasis: {
|
focus: 'series'
|
},
|
data: densityScopeData.value
|
},
|
]
|
};
|
loadChart.setOption(option);
|
}
|
|
const drawHandle = async () => {
|
chartLoading.value = true
|
const params = formData.value as WashCurvesChartApi.WashCurvesChartVO
|
const data = await WashCurvesChartApi.drawWashCurvesChart(params);
|
chartLoading.value = false
|
formData.value.curvesType = data.curvesType
|
cellData.value = JSON.parse(data.cellData)
|
floatData.value = JSON.parse(data.floatData)
|
sinkData.value = JSON.parse(data.sinkData)
|
densityData.value = JSON.parse(data.densityData)
|
densityScopeData.value = JSON.parse(data.densityScopeData)
|
xAxisData1.value = JSON.parse(data.xaxisData1)
|
xAxisData2.value = JSON.parse(data.xaxisData2)
|
floatPointData.value = JSON.parse(data.floatPointData)
|
densityPointData.value = JSON.parse(data.densityPointData)
|
densityScopePointData.value = JSON.parse(data.densityScopePointData)
|
await drawWashCurves()
|
}
|
|
const queryCellFloat = async () => {
|
if (!formInline.value.cellAsh) {
|
console.log("请输入")
|
return
|
}
|
let floatIndex = await getClosestNumber(xAxisData1.value, formInline.value.cellAsh)
|
console.log(floatIndex)
|
let a = cellData.value[floatIndex]
|
formInline.value.cellFloat = cellData.value[floatIndex]
|
}
|
|
const getClosestNumber = async (array, target) => {
|
let result = array[0];
|
let resultIndex = 0
|
for (let i = 0; i < array.length; i++) {
|
if (Math.abs(array[i] - target) < Math.abs(result - target)) {
|
result = array[i]
|
resultIndex = i;
|
}
|
}
|
return resultIndex;
|
}
|
|
const queryCellAsh = async () => {
|
if (!formInline.value.cellFloat) {
|
console.log("请输入")
|
return
|
}
|
let ashIndex = await getClosestNumber(cellData.value, formInline.value.cellFloat)
|
console.log(formInline.value.cellFloat)
|
console.log(ashIndex)
|
formInline.value.cellAsh = xAxisData1.value[ashIndex]
|
|
}
|
|
const queryFloatAsh = async () => {
|
if (!formInlineFloat.value.float) {
|
console.log("请输入")
|
return
|
}
|
let ashIndex = await getClosestNumber(floatData.value, formInlineFloat.value.float)
|
formInlineFloat.value.ash = xAxisData1.value[ashIndex]
|
}
|
|
const queryFloatYield = async () => {
|
if (!formInlineFloat.value.ash) {
|
console.log("请输入")
|
return
|
}
|
let floatIndex = await getClosestNumber(xAxisData1.value, formInlineFloat.value.ash)
|
formInlineFloat.value.float = floatData.value[floatIndex]
|
}
|
|
const querySinkAsh = async () => {
|
if (!formInlineSink.value.sink) {
|
console.log("请输入")
|
return
|
}
|
let ashIndex = await getClosestNumber(sinkData.value, formInlineSink.value.sink)
|
console.log(ashIndex)
|
formInlineSink.value.ash = xAxisData1.value[ashIndex]
|
|
}
|
|
const querySinkYield = async () => {
|
if (!formInlineSink.value.ash) {
|
console.log("请输入")
|
return
|
}
|
let sinkIndex = await getClosestNumber(xAxisData1.value, formInlineSink.value.ash)
|
formInlineSink.value.sink = sinkData.value[sinkIndex]
|
}
|
|
const queryDensitydensity = async () => {
|
if (!formInlineDensity.value.float) {
|
console.log("请输入")
|
return
|
}
|
let densityIndex = await getClosestNumber(densityData.value, formInlineDensity.value.float)
|
formInlineDensity.value.density = xAxisData2.value[densityIndex]
|
}
|
|
const queryDensityFloat = async () => {
|
if (!formInlineDensity.value.density) {
|
console.log("请输入")
|
return
|
}
|
let floatIndex = await getClosestNumber(xAxisData2.value, formInlineDensity.value.density)
|
formInlineDensity.value.float = densityData.value[floatIndex]
|
}
|
|
const queryScope = async () => {
|
if (!formInlineDensityScope.value.density) {
|
console.log("请输入")
|
return
|
}
|
let scopeIndex = await getClosestNumber(xAxisData2.value, formInlineDensityScope.value.density)
|
formInlineDensityScope.value.scope = densityScopeData.value[scopeIndex]
|
if (formInlineDensityScope.value.subsGan == true) {
|
if (formInlineDensityScope.value.density >= 1.7) {
|
let kouDiIndex = await getClosestNumber(xAxisData2.value, 1.5) //扣抵1.5
|
formInlineDensityScope.value.scope = densityScopeData.value[scopeIndex] / (100 - densityData.value[kouDiIndex]) * 100
|
} else {
|
let kouGanIndex = await getClosestNumber(xAxisData2.value, 1.8) //扣矸1.8
|
formInlineDensityScope.value.scope = densityScopeData.value[scopeIndex] / (densityData.value[kouGanIndex]) * 100
|
}
|
}
|
}
|
|
onMounted(async () => {
|
formData.value.curvesId = route.query.curvesId
|
formData.value.curvesCode = route.query.code
|
formData.value.fcfa = route.query.fcfa
|
loadChart = echarts.init(washChart.value);
|
await getDataList()
|
await getChart()
|
})
|
|
</script>
|
<style scoped>
|
.wash-curves {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
justify-content: center;
|
align-content: center;
|
}
|
</style>
|
