|
|
@@ -1,5 +1,16 @@
|
|
|
<template>
|
|
|
- <BasicModal @register="register" title="风机运行工况辅助决策" :maskStyle="{backgroundColor: '#000000aa'}" width="1200px" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit" :canFullscreen="false" :destroyOnClose="true" :footer="null">
|
|
|
+ <BasicModal
|
|
|
+ @register="register"
|
|
|
+ title="风机运行工况辅助决策"
|
|
|
+ :maskStyle="{ backgroundColor: '#000000aa' }"
|
|
|
+ width="1200px"
|
|
|
+ v-bind="$attrs"
|
|
|
+ @ok="onSubmit"
|
|
|
+ @cancel="onSubmit"
|
|
|
+ :canFullscreen="false"
|
|
|
+ :destroyOnClose="true"
|
|
|
+ :footer="null"
|
|
|
+ >
|
|
|
<div class="modal-box">
|
|
|
<div class="right-box">
|
|
|
<!-- <div class="box-title">风机信息</div> -->
|
|
|
@@ -14,13 +25,14 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="center-box">
|
|
|
- <a-spin :spinning="loadding" tip="正在计算，请稍等。。。">
|
|
|
- <div ref="chartRef" class="info-echarts" style="width: 450px; height:375px;"></div>
|
|
|
+ <a-spin :spinning="loadding" tip="正在计算，请稍等。。。">
|
|
|
+ <div ref="chartRef" class="info-echarts" style="width: 450px; height: 375px"></div>
|
|
|
<div v-if="resultObj" class="result-tip">
|
|
|
工况点为
|
|
|
- <span style="color: #9A60B4; padding: 0 10px; font-weight: 600;">{{ parseInt(resultObj.Hz) }}Hz</span>
|
|
|
- <span style="color: #C60000; padding: 0 10px; font-weight: 600;">{{ formatNum(resultObj.x) }} m³/s</span>
|
|
|
- <span style="color: #C60000; padding: 0 10px; font-weight: 600;">{{ formatNum(resultObj.y) }} Pa</span></div>
|
|
|
+ <span style="color: #9a60b4; padding: 0 10px; font-weight: 600">{{ parseInt(resultObj.Hz) }}Hz</span>
|
|
|
+ <span style="color: #c60000; padding: 0 10px; font-weight: 600">{{ formatNum(resultObj.x) }} m³/s</span>
|
|
|
+ <span style="color: #c60000; padding: 0 10px; font-weight: 600">{{ formatNum(resultObj.y) }} Pa</span></div
|
|
|
+ >
|
|
|
</a-spin>
|
|
|
</div>
|
|
|
<div class="left-box">
|
|
|
@@ -53,61 +65,64 @@
|
|
|
</div>
|
|
|
<div v-if="formShow" class="is-close" :class="{ 'is-open': formShow }">
|
|
|
<a-divider orientation="left" style="border-color: #00d8ff22">{{ formType }}</a-divider>
|
|
|
- <BasicForm @register="registerForm" @submit="handleSubmit" :schemas="formType == '编辑风机信息' ? getSchamas() : getSchamas1()" :model="formType == '编辑风机信息' ? fanInfoData : lineFormData"></BasicForm>
|
|
|
+ <BasicForm
|
|
|
+ @register="registerForm"
|
|
|
+ @submit="handleSubmit"
|
|
|
+ :schemas="formType == '编辑风机信息' ? getSchamas() : getSchamas1()"
|
|
|
+ :model="formType == '编辑风机信息' ? fanInfoData : lineFormData"
|
|
|
+ />
|
|
|
</div>
|
|
|
-
|
|
|
</BasicModal>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
//ts语法
|
|
|
import { ref, onMounted, reactive, nextTick } from 'vue';
|
|
|
import echarts from '/@/utils/lib/echarts';
|
|
|
- import { option, initData, fanInfoData, fanInfo, getSchamas, getSchamas1, lineFormData } from '../main.data.ts'
|
|
|
+ import { option, initData, fanInfoData, fanInfo, getSchamas, getSchamas1, lineFormData } from '../main.data.ts';
|
|
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
|
|
- import { Input} from 'ant-design-vue';
|
|
|
- import { Decoration7 as DvDecoration7} from '@kjgl77/datav-vue3';
|
|
|
+ import { Input } from 'ant-design-vue';
|
|
|
+ import { Decoration7 as DvDecoration7 } from '@kjgl77/datav-vue3';
|
|
|
import { message } from 'ant-design-vue';
|
|
|
- import { formatNum } from '/@/utils/ventutil'
|
|
|
+ import { formatNum } from '/@/utils/ventutil';
|
|
|
|
|
|
- const emit = defineEmits(['close', 'register', 'openModal'])
|
|
|
+ const emit = defineEmits(['close', 'register', 'openModal']);
|
|
|
type AssistanceItemType = {
|
|
|
- angle: number,
|
|
|
- Hz: number,
|
|
|
- a: number,
|
|
|
- b: number,
|
|
|
- c: number,
|
|
|
- min: number,
|
|
|
- max: number,
|
|
|
- }
|
|
|
+ angle: number;
|
|
|
+ Hz: number;
|
|
|
+ a: number;
|
|
|
+ b: number;
|
|
|
+ c: number;
|
|
|
+ min: number;
|
|
|
+ max: number;
|
|
|
+ };
|
|
|
|
|
|
// 注册 modal
|
|
|
const [register, { closeModal }] = useModalInner(() => {
|
|
|
nextTick(() => {
|
|
|
- computeAssistance()
|
|
|
- if (option['xAxis']) option['xAxis']['data'] = xData
|
|
|
- option['series'] = yDataList
|
|
|
- initEcharts()
|
|
|
- })
|
|
|
+ computeAssistance();
|
|
|
+ if (option['xAxis']) option['xAxis']['data'] = xData;
|
|
|
+ option['series'] = yDataList;
|
|
|
+ initEcharts();
|
|
|
+ });
|
|
|
});
|
|
|
const loadding = ref<boolean>(false);
|
|
|
- const formShow = ref(false)
|
|
|
- const formType = ref('')
|
|
|
+ const formShow = ref(false);
|
|
|
+ const formType = ref('');
|
|
|
const chartRef = ref();
|
|
|
const myChart = ref();
|
|
|
- const refresh = ref(true)
|
|
|
- const xData:any[] = [];
|
|
|
- const yDataList:[] = [];
|
|
|
+ const refresh = ref(true);
|
|
|
+ const xData: any[] = [];
|
|
|
+ const yDataList: [] = [];
|
|
|
let lineNum = 0;
|
|
|
- const lineEquation = ref<string[]>([])
|
|
|
+ const lineEquation = ref<string[]>([]);
|
|
|
+
|
|
|
+ const uQ = ref<string | undefined>(undefined); // 100 - 400
|
|
|
+ const uH = ref<number | undefined>(undefined); // - 1000
|
|
|
+ const resultObj = ref<{ x: number; y: number; Hz: number } | null>(null);
|
|
|
|
|
|
- const uQ = ref<string | undefined>(undefined) // 100 - 400
|
|
|
- const uH = ref<number | undefined>(undefined) // - 1000
|
|
|
- const resultObj = ref<{ x: number, y: number, Hz: number }|null>(null)
|
|
|
-
|
|
|
- const [registerForm, { }] = useForm({
|
|
|
+ const [registerForm, {}] = useForm({
|
|
|
labelWidth: 120,
|
|
|
actionColOptions: {
|
|
|
span: 24,
|
|
|
@@ -124,57 +139,67 @@
|
|
|
preIcon: '',
|
|
|
},
|
|
|
resetFunc: async () => {
|
|
|
- formShow.value = false
|
|
|
- }
|
|
|
+ formShow.value = false;
|
|
|
+ },
|
|
|
});
|
|
|
|
|
|
function computeAssistance() {
|
|
|
- const assistanceData = initData()
|
|
|
- lineNum = 0
|
|
|
- const assistanceDataList = []
|
|
|
- const lineEquationList: string[] = []
|
|
|
+ const assistanceData = initData();
|
|
|
+ lineNum = 0;
|
|
|
+ const assistanceDataList = [];
|
|
|
+ const lineEquationList: string[] = [];
|
|
|
for (const key in assistanceData) {
|
|
|
- const item = assistanceData[key]
|
|
|
- assistanceDataList.push(item)
|
|
|
- lineEquationList.push(`H${parseInt(item['Hz'])} = ${item['a']}Q² ${Number(item['b']) > 0 ? '+' : '-'} ${Math.abs(Number(item['b'])).toFixed(5)}Q ${Number(item['c']) > 0 ? '+' : '-'} ${Math.abs(Number(item['c'])).toFixed(5)}` )
|
|
|
- }
|
|
|
- lineEquation.value = lineEquationList
|
|
|
+ const item = assistanceData[key];
|
|
|
+ assistanceDataList.push(item);
|
|
|
+ lineEquationList.push(
|
|
|
+ `H${parseInt(item['Hz'])} = ${item['a']}Q² ${Number(item['b']) > 0 ? '+' : '-'} ${Math.abs(Number(item['b'])).toFixed(5)}Q ${
|
|
|
+ Number(item['c']) > 0 ? '+' : '-'
|
|
|
+ } ${Math.abs(Number(item['c'])).toFixed(5)}`
|
|
|
+ );
|
|
|
+ }
|
|
|
+ lineEquation.value = lineEquationList;
|
|
|
lineNum = assistanceDataList.length;
|
|
|
- const xDataMin = Math.min.apply(Math, assistanceDataList.map(item => { return item.min })) - 10
|
|
|
+ const xDataMin =
|
|
|
+ Math.min.apply(
|
|
|
+ Math,
|
|
|
+ assistanceDataList.map((item) => {
|
|
|
+ return item.min;
|
|
|
+ })
|
|
|
+ ) - 10;
|
|
|
// const xDataMax = Math.max.apply(Math, assistanceDataList.map(item => { return item.max }))
|
|
|
- const xDataMax = 230
|
|
|
- fanInfoData.flfw = `${xDataMin}~${xDataMax}`
|
|
|
+ const xDataMax = 230;
|
|
|
+ fanInfoData.flfw = `${xDataMin}~${xDataMax}`;
|
|
|
const computeItem = (item: AssistanceItemType) => {
|
|
|
- const min = item.min
|
|
|
- const max = item.max
|
|
|
- const HList:number[] = []
|
|
|
- for(let i = xDataMin; i <= xDataMax; i++){
|
|
|
- if(i < min){
|
|
|
- HList.push(null)
|
|
|
- } else if(i > max){
|
|
|
- HList.push(null)
|
|
|
- }else{
|
|
|
- HList.push(item.a * i * i + item.b * i + item.c)
|
|
|
+ const min = item.min;
|
|
|
+ const max = item.max;
|
|
|
+ const HList: number[] = [];
|
|
|
+ for (let i = xDataMin; i <= xDataMax; i++) {
|
|
|
+ if (i < min) {
|
|
|
+ HList.push(null);
|
|
|
+ } else if (i > max) {
|
|
|
+ HList.push(null);
|
|
|
+ } else {
|
|
|
+ HList.push(item.a * i * i + item.b * i + item.c);
|
|
|
}
|
|
|
}
|
|
|
- return HList
|
|
|
- }
|
|
|
-
|
|
|
+ return HList;
|
|
|
+ };
|
|
|
+
|
|
|
for (const key in assistanceData) {
|
|
|
const element: AssistanceItemType = assistanceData[key];
|
|
|
- const yData:number[] = computeItem(element)
|
|
|
+ const yData: number[] = computeItem(element);
|
|
|
const series = {
|
|
|
name: `${element['Hz']}Hz`,
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
showSymbol: false,
|
|
|
emphasis: {
|
|
|
- focus: 'series'
|
|
|
+ focus: 'series',
|
|
|
},
|
|
|
itemStyle: { normal: { label: { show: true } } },
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
- color: '#ffffff88'
|
|
|
+ color: '#ffffff88',
|
|
|
},
|
|
|
zlevel: 0,
|
|
|
z: 1,
|
|
|
@@ -184,29 +209,29 @@
|
|
|
distance: 0,
|
|
|
color: '#39E9FE99',
|
|
|
backgroundColor: 'transparent',
|
|
|
- padding: [3, 3, 2, 3]
|
|
|
+ padding: [3, 3, 2, 3],
|
|
|
},
|
|
|
- data: yData
|
|
|
+ data: yData,
|
|
|
};
|
|
|
- yDataList.push(series)
|
|
|
+ yDataList.push(series);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
for (let i = xDataMin; i <= xDataMax; i++) {
|
|
|
- xData.push(i)
|
|
|
+ xData.push(i);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function computeRLine() {
|
|
|
- if(uH.value && uQ.value){
|
|
|
+ if (uH.value && uQ.value) {
|
|
|
const R = uH.value / Number(uQ.value) / Number(uQ.value);
|
|
|
- const yAxis: number[] = []
|
|
|
+ const yAxis: number[] = [];
|
|
|
for (let i = 0; i < xData.length; i++) {
|
|
|
- const x = xData[i]
|
|
|
- const y = R * x * x
|
|
|
+ const x = xData[i];
|
|
|
+ const y = R * x * x;
|
|
|
if (x == uQ.value) {
|
|
|
- uH.value = y
|
|
|
+ uH.value = y;
|
|
|
}
|
|
|
- yAxis.push(y)
|
|
|
+ yAxis.push(y);
|
|
|
}
|
|
|
const series = {
|
|
|
name: 'R',
|
|
|
@@ -215,12 +240,12 @@
|
|
|
showSymbol: false,
|
|
|
zlevel: 0,
|
|
|
emphasis: {
|
|
|
- focus: 'series'
|
|
|
+ focus: 'series',
|
|
|
},
|
|
|
itemStyle: { normal: { label: { show: true } } },
|
|
|
lineStyle: {
|
|
|
width: 2,
|
|
|
- color: '#D0A343'
|
|
|
+ color: '#D0A343',
|
|
|
},
|
|
|
endLabel: {
|
|
|
show: true,
|
|
|
@@ -228,49 +253,49 @@
|
|
|
distance: 0,
|
|
|
color: '#D0A343',
|
|
|
},
|
|
|
- data: yAxis
|
|
|
+ data: yAxis,
|
|
|
};
|
|
|
- yDataList[lineNum] = series
|
|
|
+ yDataList[lineNum] = series;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function reSetLine() {
|
|
|
- let minIndex = -1
|
|
|
- for(let i=0; i< yDataList.length; i++){
|
|
|
- if(i !== lineNum && i != lineNum + 1){
|
|
|
- if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['color'] = '#ffffff88'
|
|
|
- if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['width'] = 1
|
|
|
- if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['color']) yDataList[i]['endLabel']['color'] = '#39E9FE99'
|
|
|
- if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['backgroundColor']) yDataList[i]['endLabel']['backgroundColor'] = 'transparent'
|
|
|
- if (yDataList[i]['z']) yDataList[i]['z'] = 1
|
|
|
+ let minIndex = -1;
|
|
|
+ for (let i = 0; i < yDataList.length; i++) {
|
|
|
+ if (i !== lineNum && i != lineNum + 1) {
|
|
|
+ if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['color'] = '#ffffff88';
|
|
|
+ if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['width'] = 1;
|
|
|
+ if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['color']) yDataList[i]['endLabel']['color'] = '#39E9FE99';
|
|
|
+ if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['backgroundColor']) yDataList[i]['endLabel']['backgroundColor'] = 'transparent';
|
|
|
+ if (yDataList[i]['z']) yDataList[i]['z'] = 1;
|
|
|
}
|
|
|
- if(`${resultObj.value.Hz}Hz` == yDataList[i]['name']){
|
|
|
- minIndex = i
|
|
|
+ if (`${resultObj.value.Hz}Hz` == yDataList[i]['name']) {
|
|
|
+ minIndex = i;
|
|
|
}
|
|
|
}
|
|
|
- if(minIndex != -1){
|
|
|
- yDataList[minIndex]['lineStyle']['color'] = '#9A60B4'
|
|
|
- yDataList[minIndex]['lineStyle']['width'] = 2
|
|
|
- yDataList[minIndex]['endLabel']['color'] = '#9A60B4'
|
|
|
- yDataList[minIndex]['endLabel']['backgroundColor'] = '#111'
|
|
|
- yDataList[minIndex]['z'] = 999
|
|
|
+ if (minIndex != -1) {
|
|
|
+ yDataList[minIndex]['lineStyle']['color'] = '#9A60B4';
|
|
|
+ yDataList[minIndex]['lineStyle']['width'] = 2;
|
|
|
+ yDataList[minIndex]['endLabel']['color'] = '#9A60B4';
|
|
|
+ yDataList[minIndex]['endLabel']['backgroundColor'] = '#111';
|
|
|
+ yDataList[minIndex]['z'] = 999;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 根据风量计算压差
|
|
|
function computePa() {
|
|
|
const R = uH.value / Number(uQ.value) / Number(uQ.value);
|
|
|
- const pointX = Number(uQ.value)
|
|
|
- const pointY = Number(uH.value)
|
|
|
+ const pointX = Number(uQ.value);
|
|
|
+ const pointY = Number(uH.value);
|
|
|
type ItemType = {
|
|
|
- x: number,
|
|
|
- y: number,
|
|
|
- Hz: number
|
|
|
- }
|
|
|
- const assistanceData = initData()
|
|
|
- const paList = new Map<number, ItemType>() // key 是最近距离
|
|
|
+ x: number;
|
|
|
+ y: number;
|
|
|
+ Hz: number;
|
|
|
+ };
|
|
|
+ const assistanceData = initData();
|
|
|
+ const paList = new Map<number, ItemType>(); // key 是最近距离
|
|
|
const getIntersectionPoint = (a, b, c, R, min, max) => {
|
|
|
- const obj: { x: undefined | number, y: undefined | number } = { x: undefined, y: undefined }
|
|
|
+ const obj: { x: undefined | number; y: undefined | number } = { x: undefined, y: undefined };
|
|
|
// 计算二次方程的判别式
|
|
|
const discriminant = b * b - 4 * (a - R) * c;
|
|
|
|
|
|
@@ -282,66 +307,64 @@
|
|
|
const y1 = R * x1 * x1;
|
|
|
const y2 = R * x2 * x2;
|
|
|
if (x1 >= min && x1 <= max) {
|
|
|
- obj.x = x1
|
|
|
- obj.y = y1
|
|
|
+ obj.x = x1;
|
|
|
+ obj.y = y1;
|
|
|
} else {
|
|
|
- obj.x = x2
|
|
|
- obj.y = y2
|
|
|
+ obj.x = x2;
|
|
|
+ obj.y = y2;
|
|
|
}
|
|
|
} else if (discriminant === 0) {
|
|
|
// 有一个实根
|
|
|
const x = -b / (2 * (a - R));
|
|
|
const y = R * x * x;
|
|
|
if (x >= min && x <= max) {
|
|
|
- obj.x = x
|
|
|
- obj.y = y
|
|
|
+ obj.x = x;
|
|
|
+ obj.y = y;
|
|
|
}
|
|
|
// console.log(`唯一交点: (${x}, ${y})`);
|
|
|
} else {
|
|
|
// 没有实根，交点在虚数域
|
|
|
- console.log("没有实数交点");
|
|
|
+ console.log('没有实数交点');
|
|
|
}
|
|
|
- return obj
|
|
|
+ return obj;
|
|
|
+ };
|
|
|
|
|
|
+ for (let key in assistanceData) {
|
|
|
+ const item: AssistanceItemType = assistanceData[key];
|
|
|
+ paList.set(item.Hz, getIntersectionPoint(item.a, item.b, item.c, R, item.min, item.max));
|
|
|
}
|
|
|
|
|
|
- for(let key in assistanceData){
|
|
|
- const item: AssistanceItemType = assistanceData[key]
|
|
|
- paList.set(item.Hz, getIntersectionPoint(item.a, item.b, item.c, R, item.min, item.max ))
|
|
|
- }
|
|
|
-
|
|
|
const min = (points: Map<number, ItemType>) => {
|
|
|
const targetX = uQ.value;
|
|
|
const targetY = uH.value;
|
|
|
let minDistance = Number.POSITIVE_INFINITY;
|
|
|
let closestPoint = null;
|
|
|
- let keyVal = ''
|
|
|
+ let keyVal = '';
|
|
|
// 遍历已知点数组，计算距离并更新最小距离和对应的点
|
|
|
for (const [key, point] of points) {
|
|
|
const distance = Math.sqrt((targetX - point.x) ** 2 + (targetY - point.y) ** 2);
|
|
|
if (distance < minDistance) {
|
|
|
minDistance = distance;
|
|
|
closestPoint = point;
|
|
|
- keyVal = key
|
|
|
+ keyVal = key;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (closestPoint !== null) {
|
|
|
console.log(`距离最小的点是 (${closestPoint.x}, ${closestPoint.y}), 距离为 ${minDistance}`);
|
|
|
- resultObj.value = {x: closestPoint.x, y: closestPoint.y, Hz: keyVal }
|
|
|
+ resultObj.value = { x: closestPoint.x, y: closestPoint.y, Hz: keyVal };
|
|
|
} else {
|
|
|
- console.log("没有找到最小距离的点");
|
|
|
+ console.log('没有找到最小距离的点');
|
|
|
}
|
|
|
- }
|
|
|
- min(paList)
|
|
|
- reSetLine()
|
|
|
+ };
|
|
|
+ min(paList);
|
|
|
+ reSetLine();
|
|
|
}
|
|
|
|
|
|
-
|
|
|
- function computeR(){
|
|
|
- if(uQ.value && uH.value){
|
|
|
- computeRLine()
|
|
|
- computePa()
|
|
|
+ function computeR() {
|
|
|
+ if (uQ.value && uH.value) {
|
|
|
+ computeRLine();
|
|
|
+ computePa();
|
|
|
if (resultObj.value && resultObj.value.x && resultObj.value.y) {
|
|
|
const series = {
|
|
|
type: 'effectScatter',
|
|
|
@@ -351,103 +374,97 @@
|
|
|
// 涟漪特效相关配置。
|
|
|
rippleEffect: {
|
|
|
// 波纹的绘制方式，可选 'stroke' 和 'fill'。
|
|
|
- brushType: 'stroke'
|
|
|
+ brushType: 'stroke',
|
|
|
},
|
|
|
zlevel: 1,
|
|
|
z: 999,
|
|
|
itemStyle: {
|
|
|
- color: '#C60000'
|
|
|
+ color: '#C60000',
|
|
|
},
|
|
|
- data: [
|
|
|
- [resultObj.value.x.toFixed(0), Number(resultObj.value.y.toFixed(0))]
|
|
|
- ],
|
|
|
- }
|
|
|
- yDataList[lineNum + 1] = series
|
|
|
+ data: [[resultObj.value.x.toFixed(0), Number(resultObj.value.y.toFixed(0))]],
|
|
|
+ };
|
|
|
+ yDataList[lineNum + 1] = series;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function edit(flag) {
|
|
|
- if(flag == 'info'){
|
|
|
- formType.value = '编辑风机信息'
|
|
|
+ if (flag == 'info') {
|
|
|
+ formType.value = '编辑风机信息';
|
|
|
}
|
|
|
- if(flag == 'line'){
|
|
|
- formType.value = '编辑特性曲线'
|
|
|
+ if (flag == 'line') {
|
|
|
+ formType.value = '编辑特性曲线';
|
|
|
}
|
|
|
- if(formShow.value == true){
|
|
|
- formShow.value = false
|
|
|
+ if (formShow.value == true) {
|
|
|
+ formShow.value = false;
|
|
|
nextTick(() => {
|
|
|
- formShow.value = true
|
|
|
- })
|
|
|
- }else{
|
|
|
- formShow.value = true
|
|
|
+ formShow.value = true;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ formShow.value = true;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
async function onSubmit() {
|
|
|
- emit('close')
|
|
|
+ emit('close');
|
|
|
closeModal();
|
|
|
- chartRef.value = null
|
|
|
- uQ.value = undefined
|
|
|
- uH.value = undefined
|
|
|
- formType.value = ''
|
|
|
- myChart.value = undefined
|
|
|
- refresh.value = true
|
|
|
- xData.length = 0
|
|
|
- yDataList.length = 0
|
|
|
- lineNum = 0
|
|
|
- lineEquation.value = []
|
|
|
- resultObj.value = null
|
|
|
- }
|
|
|
+ chartRef.value = null;
|
|
|
+ uQ.value = undefined;
|
|
|
+ uH.value = undefined;
|
|
|
+ formType.value = '';
|
|
|
+ myChart.value = undefined;
|
|
|
+ refresh.value = true;
|
|
|
+ xData.length = 0;
|
|
|
+ yDataList.length = 0;
|
|
|
+ lineNum = 0;
|
|
|
+ lineEquation.value = [];
|
|
|
+ resultObj.value = null;
|
|
|
+ }
|
|
|
|
|
|
function initEcharts() {
|
|
|
- if(chartRef.value){
|
|
|
- computeR()
|
|
|
+ if (chartRef.value) {
|
|
|
+ computeR();
|
|
|
myChart.value = echarts.init(chartRef.value);
|
|
|
option && myChart.value.setOption(option);
|
|
|
- refresh.value = false
|
|
|
+ refresh.value = false;
|
|
|
nextTick(() => {
|
|
|
setTimeout(() => {
|
|
|
- refresh.value = true
|
|
|
- }, 0)
|
|
|
-
|
|
|
- })
|
|
|
+ refresh.value = true;
|
|
|
+ }, 0);
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function makeLine() {
|
|
|
- if(uQ.value && uH.value){
|
|
|
- loadding.value = true
|
|
|
+ if (uQ.value && uH.value) {
|
|
|
+ loadding.value = true;
|
|
|
setTimeout(() => {
|
|
|
- initEcharts()
|
|
|
- loadding.value = false
|
|
|
- }, 1200)
|
|
|
+ initEcharts();
|
|
|
+ loadding.value = false;
|
|
|
+ }, 1200);
|
|
|
}
|
|
|
}
|
|
|
function handleSubmit() {
|
|
|
- message.success('提交成功')
|
|
|
+ message.success('提交成功');
|
|
|
setTimeout(() => {
|
|
|
- formShow.value = false
|
|
|
- }, 800)
|
|
|
+ formShow.value = false;
|
|
|
+ }, 800);
|
|
|
}
|
|
|
- onMounted(() => {
|
|
|
-
|
|
|
- })
|
|
|
+ onMounted(() => {});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
- .modal-box{
|
|
|
- display: flex;
|
|
|
+ .modal-box {
|
|
|
+ display: flex;
|
|
|
flex-direction: row;
|
|
|
background-color: #ffffff05;
|
|
|
padding: 20px 8px;
|
|
|
border: 1px solid #00d8ff22;
|
|
|
// min-height: 600px;
|
|
|
- .box-title{
|
|
|
+ .box-title {
|
|
|
width: calc(100% - 40px);
|
|
|
text-align: center;
|
|
|
- background-color: #1DC1F522;
|
|
|
+ background-color: #1dc1f522;
|
|
|
}
|
|
|
.info-item {
|
|
|
display: flex;
|
|
|
@@ -456,7 +473,7 @@
|
|
|
padding: 2px 0px;
|
|
|
margin: 4px 0;
|
|
|
background-image: linear-gradient(to right, #39deff15, #3977e500);
|
|
|
- &:first-child{
|
|
|
+ &:first-child {
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
.title {
|
|
|
@@ -472,38 +489,38 @@
|
|
|
text-align: right;
|
|
|
}
|
|
|
}
|
|
|
- .right-box{
|
|
|
+ .right-box {
|
|
|
width: 350px;
|
|
|
-
|
|
|
- .info-container{
|
|
|
+
|
|
|
+ .info-container {
|
|
|
width: calc(100% - 2px);
|
|
|
margin-top: 5px;
|
|
|
box-shadow: 0px 0px 50px #86baff08 inset;
|
|
|
}
|
|
|
}
|
|
|
- .left-box{
|
|
|
+ .left-box {
|
|
|
width: 350px;
|
|
|
- .info-lines{
|
|
|
+ .info-lines {
|
|
|
width: calc(100% - 2px);
|
|
|
height: 390px;
|
|
|
box-shadow: 0px 0px 50px #86baff08 inset;
|
|
|
overflow-y: auto;
|
|
|
margin-top: 5px;
|
|
|
- .title{
|
|
|
+ .title {
|
|
|
width: 100%;
|
|
|
color: #f1f1f1cc;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .center-box{
|
|
|
+ .center-box {
|
|
|
margin: 0 10px;
|
|
|
-
|
|
|
- .info-echarts{
|
|
|
+
|
|
|
+ .info-echarts {
|
|
|
// background-color: #ffffff11;
|
|
|
}
|
|
|
- .result-tip{
|
|
|
- text-align: center;
|
|
|
- background-color: #00000011;
|
|
|
+ .result-tip {
|
|
|
+ text-align: center;
|
|
|
+ background-color: #00000011;
|
|
|
line-height: 28px;
|
|
|
margin: 10px 50px 0 50px;
|
|
|
border: 1px solid #00d8ff22;
|
|
|
@@ -511,7 +528,7 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .setting-box{
|
|
|
+ .setting-box {
|
|
|
width: 1170px;
|
|
|
height: 70px;
|
|
|
margin: 10px 0;
|
|
|
@@ -520,30 +537,29 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
-
|
|
|
- .right-inputs{
|
|
|
+
|
|
|
+ .right-inputs {
|
|
|
display: flex;
|
|
|
height: 40px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
- .left-buttons{
|
|
|
+ .left-buttons {
|
|
|
display: flex;
|
|
|
height: 40px;
|
|
|
-
|
|
|
- .btn{
|
|
|
+
|
|
|
+ .btn {
|
|
|
margin: 0 10px;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- .border-clip{
|
|
|
+ .border-clip {
|
|
|
width: 1px;
|
|
|
height: 25px;
|
|
|
border-right: 1px solid #8b8b8b77;
|
|
|
}
|
|
|
- .input-title{
|
|
|
+ .input-title {
|
|
|
width: 80px;
|
|
|
}
|
|
|
- .input-box{
|
|
|
+ .input-box {
|
|
|
width: 200px !important;
|
|
|
background: transparent !important;
|
|
|
border-color: #00d8ff44 !important;
|
|
|
@@ -586,24 +602,22 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- .is-open{
|
|
|
- animation: open .5s;
|
|
|
+ .is-open {
|
|
|
+ animation: open 0.5s;
|
|
|
animation-iteration-count: 1;
|
|
|
animation-fill-mode: forwards;
|
|
|
animation-timing-function: ease-in;
|
|
|
-
|
|
|
}
|
|
|
- .is-close{
|
|
|
- height: 0px;
|
|
|
+ .is-close {
|
|
|
+ height: 0px;
|
|
|
}
|
|
|
|
|
|
@keyframes open {
|
|
|
0% {
|
|
|
height: 0px;
|
|
|
}
|
|
|
- 100%{
|
|
|
+ 100% {
|
|
|
height: fit-content;
|
|
|
}
|
|
|
}
|
|
|
@@ -612,14 +626,14 @@
|
|
|
0% {
|
|
|
height: fit-content;
|
|
|
}
|
|
|
- 100%{
|
|
|
+ 100% {
|
|
|
height: 0px;
|
|
|
}
|
|
|
}
|
|
|
:deep(.zxm-divider-inner-text) {
|
|
|
color: #cacaca88 !important;
|
|
|
}
|
|
|
- :deep(.zxm-form-item ){
|
|
|
+ :deep(.zxm-form-item) {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
</style>
|
hongrunxia
