conditionAssistance.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680
  1. <template>
  2. <BasicModal
  3. @register="register"
  4. title="风机运行工况辅助决策"
  5. :maskStyle="{ backgroundColor: '#000000aa' }"
  6. width="1200px"
  7. v-bind="$attrs"
  8. @ok="onSubmit"
  9. @cancel="onSubmit"
  10. :canFullscreen="false"
  11. :destroyOnClose="true"
  12. :footer="null"
  13. >
  14. <div class="modal-box">
  15. <div class="right-box">
  16. <!-- <div class="box-title">风机信息</div> -->
  17. <dv-decoration7 style="height: 20px">
  18. <div class="box-title">风机信息</div>
  19. </dv-decoration7>
  20. <div class="info-container">
  21. <template v-if="isMock">
  22. <div v-for="(item, index) in fanInfo" class="info-item" :key="index">
  23. <div class="title">{{ item.title }}:</div>
  24. <div class="value">{{ fanInfoData && fanInfoData[item.code] ? fanInfoData[item.code] : '-' }}</div>
  25. </div>
  26. </template>
  27. <template v-else>
  28. <div v-for="(item, index) in columns" class="info-item" :key="index">
  29. <div class="title">{{ item['title'] }}:</div>
  30. <div class="value">{{ selectData && selectData[item['dataIndex']] ? selectData[item['dataIndex']] : '-' }}</div>
  31. </div>
  32. </template>
  33. </div>
  34. </div>
  35. <div class="center-box">
  36. <a-spin :spinning="loadding" tip="正在计算,请稍等。。。">
  37. <div ref="chartRef" class="info-echarts" style="width: 450px; height: 375px"></div>
  38. <div v-if="resultObj" class="result-tip">
  39. 工况点为
  40. <span style="color: #9a60b4; padding: 0 10px; font-weight: 600">{{ parseInt(resultObj.Hz) }}Hz</span>
  41. <span style="color: #c60000; padding: 0 10px; font-weight: 600">{{ formatNum(resultObj.x) }} m³/s</span>
  42. <span style="color: #c60000; padding: 0 10px; font-weight: 600">{{ formatNum(resultObj.y) }} Pa</span></div
  43. >
  44. </a-spin>
  45. </div>
  46. <div class="left-box">
  47. <!-- <div class="box-title">曲线方程</div> -->
  48. <dv-decoration7 style="height: 20px">
  49. <div class="box-title">曲线方程</div>
  50. </dv-decoration7>
  51. <div class="info-lines">
  52. <div v-for="(item, index) in lineEquation" class="info-item" :key="index">
  53. <div class="title">{{ item }}</div>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="setting-box">
  59. <div class="left-buttons">
  60. <!-- <div class="btn btn1" @click="edit('info')">编辑风机信息</div> -->
  61. <!-- <div class="btn btn1" @click="edit('line')">编辑特性曲线</div> -->
  62. </div>
  63. <div class="border-clip"></div>
  64. <div class="right-inputs">
  65. <div class="vent-flex-row">
  66. <div class="input-title">风量(m³/s):</div>
  67. <Input class="input-box" size="large" v-model:value="uQ" />
  68. <div class="input-title">风压(Pa):</div>
  69. <Input class="input-box" size="large" v-model:value="uH" />
  70. </div>
  71. <div class="btn btn1" @click="makeLine">决策工况</div>
  72. </div>
  73. </div>
  74. <!-- <div v-if="formShow" class="is-close" :class="{ 'is-open': formShow }">
  75. <a-divider orientation="left" style="border-color: #00d8ff22">{{ formType }}</a-divider>
  76. <BasicForm @register="registerForm" @submit="handleSubmit" :schemas="columns" />
  77. </div> -->
  78. </BasicModal>
  79. </template>
  80. <script lang="ts" setup>
  81. //ts语法
  82. import { ref, onMounted, reactive, nextTick, defineProps, defineEmits, watch } from 'vue';
  83. import echarts from '/@/utils/lib/echarts';
  84. import { option, initData, fanInfoData, fanInfo, getSchamas, getSchamas1, lineFormData } from '../main.data.ts';
  85. import { BasicModal, useModalInner } from '/@/components/Modal';
  86. import { BasicForm, useForm } from '/@/components/Form/index';
  87. import { Input } from 'ant-design-vue';
  88. import { Decoration7 as DvDecoration7 } from '@kjgl77/datav-vue3';
  89. import { message } from 'ant-design-vue';
  90. import { formatNum } from '/@/utils/ventutil';
  91. import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  92. import { list } from '../main.api';
  93. const props = defineProps({
  94. deviceType: {
  95. type: String,
  96. },
  97. selectData: {
  98. type: Object,
  99. default: () => {},
  100. },
  101. });
  102. const emit = defineEmits(['close', 'register', 'openModal']);
  103. type AssistanceItemType = {
  104. angle: number;
  105. Hz: number;
  106. a: number;
  107. b: number;
  108. c: number;
  109. min: number;
  110. max: number;
  111. };
  112. const columns = ref([]);
  113. const isMock = true;
  114. // 注册 modal
  115. const [register, { closeModal }] = useModalInner(() => {
  116. nextTick(() => {
  117. computeAssistance();
  118. if (option['xAxis']) option['xAxis']['data'] = xData;
  119. option['series'] = yDataList;
  120. initEcharts();
  121. });
  122. });
  123. const loadding = ref<boolean>(false);
  124. const formShow = ref(false);
  125. const formType = ref('');
  126. const chartRef = ref();
  127. const myChart = ref();
  128. const refresh = ref(true);
  129. const xData: any[] = [];
  130. const yDataList: [] = [];
  131. let lineNum = 0;
  132. const lineEquation = ref<string[]>([]);
  133. const deviceData = ref({});
  134. const uQ = ref<string | undefined>(undefined); // 100 - 400
  135. const uH = ref<number | undefined>(undefined); // - 1000
  136. const resultObj = ref<{ x: number; y: number; Hz: number } | null>(null);
  137. const [registerForm, {}] = useForm({
  138. labelWidth: 120,
  139. actionColOptions: {
  140. span: 24,
  141. },
  142. compact: true,
  143. showSubmitButton: true,
  144. submitButtonOptions: {
  145. text: '提交',
  146. preIcon: '',
  147. },
  148. showResetButton: true,
  149. resetButtonOptions: {
  150. text: '关闭',
  151. preIcon: '',
  152. },
  153. resetFunc: async () => {
  154. formShow.value = false;
  155. },
  156. });
  157. function computeAssistance() {
  158. const assistanceData = initData();
  159. lineNum = 0;
  160. const assistanceDataList = [];
  161. const lineEquationList: string[] = [];
  162. for (const key in assistanceData) {
  163. const item = assistanceData[key];
  164. assistanceDataList.push(item);
  165. lineEquationList.push(
  166. `H${parseInt(item['Hz'])} = ${item['a']}Q² ${Number(item['b']) > 0 ? '+' : '-'} ${Math.abs(Number(item['b'])).toFixed(5)}Q ${
  167. Number(item['c']) > 0 ? '+' : '-'
  168. } ${Math.abs(Number(item['c'])).toFixed(5)}`
  169. );
  170. }
  171. lineEquation.value = lineEquationList;
  172. lineNum = assistanceDataList.length;
  173. const xDataMin =
  174. Math.min.apply(
  175. Math,
  176. assistanceDataList.map((item) => {
  177. return item.min;
  178. })
  179. ) - 10;
  180. // const xDataMax = Math.max.apply(Math, assistanceDataList.map(item => { return item.max }))
  181. const xDataMax = 230;
  182. fanInfoData.flfw = `${xDataMin}~${xDataMax}`;
  183. const computeItem = (item: AssistanceItemType) => {
  184. const min = item.min;
  185. const max = item.max;
  186. const HList: number[] = [];
  187. for (let i = xDataMin; i <= xDataMax; i++) {
  188. if (i < min) {
  189. HList.push(null);
  190. } else if (i > max) {
  191. HList.push(null);
  192. } else {
  193. HList.push(item.a * i * i + item.b * i + item.c);
  194. }
  195. }
  196. return HList;
  197. };
  198. for (const key in assistanceData) {
  199. const element: AssistanceItemType = assistanceData[key];
  200. const yData: number[] = computeItem(element);
  201. const series = {
  202. name: `${element['Hz']}Hz`,
  203. type: 'line',
  204. smooth: true,
  205. showSymbol: false,
  206. emphasis: {
  207. focus: 'series',
  208. },
  209. itemStyle: { normal: { label: { show: true } } },
  210. lineStyle: {
  211. width: 1,
  212. color: '#ffffff88',
  213. },
  214. zlevel: 0,
  215. z: 1,
  216. endLabel: {
  217. show: true,
  218. formatter: '{a}',
  219. distance: 0,
  220. color: '#39E9FE99',
  221. backgroundColor: 'transparent',
  222. padding: [3, 3, 2, 3],
  223. },
  224. data: yData,
  225. };
  226. yDataList.push(series);
  227. }
  228. for (let i = xDataMin; i <= xDataMax; i++) {
  229. xData.push(i);
  230. }
  231. }
  232. function computeRLine() {
  233. if (uH.value && uQ.value) {
  234. const R = uH.value / Number(uQ.value) / Number(uQ.value);
  235. const yAxis: number[] = [];
  236. for (let i = 0; i < xData.length; i++) {
  237. const x = xData[i];
  238. const y = R * x * x;
  239. if (x == uQ.value) {
  240. uH.value = y;
  241. }
  242. yAxis.push(y);
  243. }
  244. const series = {
  245. name: 'R',
  246. type: 'line',
  247. smooth: true,
  248. showSymbol: false,
  249. zlevel: 0,
  250. emphasis: {
  251. focus: 'series',
  252. },
  253. itemStyle: { normal: { label: { show: true } } },
  254. lineStyle: {
  255. width: 2,
  256. color: '#D0A343',
  257. },
  258. endLabel: {
  259. show: true,
  260. formatter: '{a}',
  261. distance: 0,
  262. color: '#D0A343',
  263. },
  264. data: yAxis,
  265. };
  266. yDataList[lineNum] = series;
  267. }
  268. }
  269. function reSetLine() {
  270. let minIndex = -1;
  271. for (let i = 0; i < yDataList.length; i++) {
  272. if (i !== lineNum && i != lineNum + 1) {
  273. if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['color'] = '#ffffff88';
  274. if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['width'] = 1;
  275. if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['color']) yDataList[i]['endLabel']['color'] = '#39E9FE99';
  276. if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['backgroundColor']) yDataList[i]['endLabel']['backgroundColor'] = 'transparent';
  277. if (yDataList[i]['z']) yDataList[i]['z'] = 1;
  278. }
  279. if (`${resultObj.value.Hz}Hz` == yDataList[i]['name']) {
  280. minIndex = i;
  281. }
  282. }
  283. if (minIndex != -1) {
  284. yDataList[minIndex]['lineStyle']['color'] = '#9A60B4';
  285. yDataList[minIndex]['lineStyle']['width'] = 2;
  286. yDataList[minIndex]['endLabel']['color'] = '#9A60B4';
  287. yDataList[minIndex]['endLabel']['backgroundColor'] = '#111';
  288. yDataList[minIndex]['z'] = 999;
  289. }
  290. }
  291. // 根据风量计算压差
  292. function computePa() {
  293. const R = uH.value / Number(uQ.value) / Number(uQ.value);
  294. const pointX = Number(uQ.value);
  295. const pointY = Number(uH.value);
  296. type ItemType = {
  297. x: number;
  298. y: number;
  299. Hz: number;
  300. };
  301. const assistanceData = initData();
  302. const paList = new Map<number, ItemType>(); // key 是最近距离
  303. const getIntersectionPoint = (a, b, c, R, min, max) => {
  304. const obj: { x: undefined | number; y: undefined | number } = { x: undefined, y: undefined };
  305. // 计算二次方程的判别式
  306. const discriminant = b * b - 4 * (a - R) * c;
  307. if (discriminant > 0) {
  308. // 有两个实根
  309. const x1 = (-b + Math.sqrt(discriminant)) / (2 * (a - R));
  310. const x2 = (-b - Math.sqrt(discriminant)) / (2 * (a - R));
  311. const y1 = R * x1 * x1;
  312. const y2 = R * x2 * x2;
  313. if (x1 >= min && x1 <= max) {
  314. obj.x = x1;
  315. obj.y = y1;
  316. } else {
  317. obj.x = x2;
  318. obj.y = y2;
  319. }
  320. } else if (discriminant === 0) {
  321. // 有一个实根
  322. const x = -b / (2 * (a - R));
  323. const y = R * x * x;
  324. if (x >= min && x <= max) {
  325. obj.x = x;
  326. obj.y = y;
  327. }
  328. // console.log(`唯一交点: (${x}, ${y})`);
  329. } else {
  330. // 没有实根,交点在虚数域
  331. console.log('没有实数交点');
  332. }
  333. return obj;
  334. };
  335. for (let key in assistanceData) {
  336. const item: AssistanceItemType = assistanceData[key];
  337. paList.set(item.Hz, getIntersectionPoint(item.a, item.b, item.c, R, item.min, item.max));
  338. }
  339. const min = (points: Map<number, ItemType>) => {
  340. const targetX = uQ.value;
  341. const targetY = uH.value;
  342. let minDistance = Number.POSITIVE_INFINITY;
  343. let closestPoint = null;
  344. let keyVal = '';
  345. // 遍历已知点数组,计算距离并更新最小距离和对应的点
  346. for (const [key, point] of points) {
  347. const distance = Math.sqrt((targetX - point.x) ** 2 + (targetY - point.y) ** 2);
  348. if (distance < minDistance) {
  349. minDistance = distance;
  350. closestPoint = point;
  351. keyVal = key;
  352. }
  353. }
  354. if (closestPoint !== null) {
  355. console.log(`距离最小的点是 (${closestPoint.x}, ${closestPoint.y}), 距离为 ${minDistance}`);
  356. resultObj.value = { x: closestPoint.x, y: closestPoint.y, Hz: keyVal };
  357. } else {
  358. console.log('没有找到最小距离的点');
  359. }
  360. };
  361. min(paList);
  362. reSetLine();
  363. }
  364. function computeR() {
  365. if (uQ.value && uH.value) {
  366. computeRLine();
  367. computePa();
  368. if (resultObj.value && resultObj.value.x && resultObj.value.y) {
  369. const series = {
  370. type: 'effectScatter',
  371. symbolSize: 5,
  372. // symbolOffset:[1, 1],
  373. showEffectOn: 'render',
  374. // 涟漪特效相关配置。
  375. rippleEffect: {
  376. // 波纹的绘制方式,可选 'stroke' 和 'fill'。
  377. brushType: 'stroke',
  378. },
  379. zlevel: 1,
  380. z: 999,
  381. itemStyle: {
  382. color: '#C60000',
  383. },
  384. data: [[resultObj.value.x.toFixed(0), Number(resultObj.value.y.toFixed(0))]],
  385. };
  386. yDataList[lineNum + 1] = series;
  387. }
  388. }
  389. }
  390. function edit(flag) {
  391. if (flag == 'info') {
  392. formType.value = '编辑风机信息';
  393. }
  394. if (flag == 'line') {
  395. formType.value = '编辑特性曲线';
  396. }
  397. if (formShow.value == true) {
  398. formShow.value = false;
  399. nextTick(() => {
  400. formShow.value = true;
  401. });
  402. } else {
  403. formShow.value = true;
  404. }
  405. }
  406. async function onSubmit() {
  407. emit('close');
  408. closeModal();
  409. chartRef.value = null;
  410. uQ.value = undefined;
  411. uH.value = undefined;
  412. formType.value = '';
  413. myChart.value = undefined;
  414. refresh.value = true;
  415. xData.length = 0;
  416. yDataList.length = 0;
  417. lineNum = 0;
  418. lineEquation.value = [];
  419. resultObj.value = null;
  420. }
  421. function initEcharts() {
  422. if (chartRef.value) {
  423. computeR();
  424. myChart.value = echarts.init(chartRef.value);
  425. option && myChart.value.setOption(option);
  426. refresh.value = false;
  427. nextTick(() => {
  428. setTimeout(() => {
  429. refresh.value = true;
  430. }, 0);
  431. });
  432. }
  433. }
  434. function makeLine() {
  435. if (uQ.value && uH.value) {
  436. loadding.value = true;
  437. setTimeout(() => {
  438. initEcharts();
  439. loadding.value = false;
  440. }, 1200);
  441. }
  442. }
  443. function handleSubmit() {
  444. message.success('提交成功');
  445. setTimeout(() => {
  446. formShow.value = false;
  447. }, 800);
  448. }
  449. function getColumn() {
  450. let lineColumns = [];
  451. if (props.deviceType) {
  452. lineColumns = getTableHeaderColumns(props.deviceType + '_input') as [];
  453. if (lineColumns && lineColumns.length < 1) {
  454. lineColumns = getTableHeaderColumns(props.deviceType.split('_')[0] + '_input') as [];
  455. }
  456. if (lineColumns.length > 0) {
  457. lineColumns = lineColumns.filter((item) => item['dataIndex'] && item['dataIndex'].includes('_line_'));
  458. columns.value = lineColumns;
  459. }
  460. }
  461. }
  462. watch(
  463. () => props.deviceType,
  464. async () => {
  465. getColumn();
  466. // deviceData.value = await list({ devicetype: 'fanmain', pagetype: 'normal' });
  467. }
  468. );
  469. watch(
  470. () => props.selectData,
  471. async (selectData) => {
  472. debugger;
  473. deviceData.value = selectData;
  474. }
  475. );
  476. onMounted(() => {});
  477. </script>
  478. <style scoped lang="less">
  479. .modal-box {
  480. display: flex;
  481. flex-direction: row;
  482. background-color: #ffffff05;
  483. padding: 20px 8px;
  484. border: 1px solid #00d8ff22;
  485. // min-height: 600px;
  486. .box-title {
  487. width: calc(100% - 40px);
  488. text-align: center;
  489. background-color: #1dc1f522;
  490. }
  491. .info-item {
  492. display: flex;
  493. justify-content: space-between;
  494. align-items: center;
  495. padding: 2px 0px;
  496. margin: 4px 0;
  497. background-image: linear-gradient(to right, #39deff15, #3977e500);
  498. &:first-child {
  499. margin-top: 0;
  500. }
  501. .title {
  502. width: 200px;
  503. text-align: left;
  504. padding-left: 20px;
  505. color: #f1f1f1cc;
  506. }
  507. .value {
  508. width: 150px;
  509. color: #00d8ff;
  510. padding-right: 20px;
  511. text-align: right;
  512. }
  513. }
  514. .right-box {
  515. width: 350px;
  516. .info-container {
  517. width: calc(100% - 2px);
  518. margin-top: 5px;
  519. box-shadow: 0px 0px 50px #86baff08 inset;
  520. }
  521. }
  522. .left-box {
  523. width: 350px;
  524. .info-lines {
  525. width: calc(100% - 2px);
  526. height: 390px;
  527. box-shadow: 0px 0px 50px #86baff08 inset;
  528. overflow-y: auto;
  529. margin-top: 5px;
  530. .title {
  531. width: 100%;
  532. color: #f1f1f1cc;
  533. }
  534. }
  535. }
  536. .center-box {
  537. margin: 0 10px;
  538. .info-echarts {
  539. // background-color: #ffffff11;
  540. }
  541. .result-tip {
  542. text-align: center;
  543. background-color: #00000011;
  544. line-height: 28px;
  545. margin: 10px 50px 0 50px;
  546. border: 1px solid #00d8ff22;
  547. border-radius: 2px;
  548. }
  549. }
  550. }
  551. .setting-box {
  552. width: 1170px;
  553. height: 70px;
  554. margin: 10px 0;
  555. background-color: #ffffff05;
  556. border: 1px solid #00d8ff22;
  557. display: flex;
  558. align-items: center;
  559. justify-content: space-between;
  560. .right-inputs {
  561. display: flex;
  562. height: 40px;
  563. margin-right: 10px;
  564. }
  565. .left-buttons {
  566. display: flex;
  567. height: 40px;
  568. .btn {
  569. margin: 0 10px;
  570. }
  571. }
  572. .border-clip {
  573. width: 1px;
  574. height: 25px;
  575. border-right: 1px solid #8b8b8b77;
  576. }
  577. .input-title {
  578. width: 80px;
  579. }
  580. .input-box {
  581. width: 200px !important;
  582. background: transparent !important;
  583. border-color: #00d8ff44 !important;
  584. margin-right: 20px;
  585. color: #fff !important;
  586. }
  587. .btn {
  588. padding: 8px 20px;
  589. position: relative;
  590. border-radius: 2px;
  591. color: #fff;
  592. width: fit-content;
  593. cursor: pointer;
  594. &::before {
  595. position: absolute;
  596. display: block;
  597. content: '';
  598. width: calc(100% - 4px);
  599. height: calc(100% - 4px);
  600. top: 2px;
  601. left: 2px;
  602. border-radius: 2px;
  603. z-index: -1;
  604. }
  605. }
  606. .btn1 {
  607. border: 1px solid #5cfaff;
  608. &::before {
  609. background-image: linear-gradient(#2effee92, #0cb1d592);
  610. }
  611. &:hover {
  612. border: 1px solid #5cfaffaa;
  613. &::before {
  614. background-image: linear-gradient(#2effee72, #0cb1d572);
  615. }
  616. }
  617. }
  618. }
  619. .is-open {
  620. animation: open 0.5s;
  621. animation-iteration-count: 1;
  622. animation-fill-mode: forwards;
  623. animation-timing-function: ease-in;
  624. }
  625. .is-close {
  626. height: 0px;
  627. }
  628. @keyframes open {
  629. 0% {
  630. height: 0px;
  631. }
  632. 100% {
  633. height: fit-content;
  634. }
  635. }
  636. @keyframes close {
  637. 0% {
  638. height: fit-content;
  639. }
  640. 100% {
  641. height: 0px;
  642. }
  643. }
  644. :deep(.zxm-divider-inner-text) {
  645. color: #cacaca88 !important;
  646. }
  647. :deep(.zxm-form-item) {
  648. margin-bottom: 10px;
  649. }
  650. </style>