|
|
@@ -0,0 +1,367 @@
|
|
|
+<!-- eslint-disable vue/multi-word-component-names -->
|
|
|
+<template>
|
|
|
+ <div class="gas-verify">
|
|
|
+ <CustomHeader> 瓦斯抽采达标能力核定 </CustomHeader>
|
|
|
+ <div class="flex mt-90px">
|
|
|
+ <div class="nav-l"> 瓦斯抽采达标生产能力： {{ data.dbscnl }} t/a </div>
|
|
|
+ <div class="nav">
|
|
|
+ <Tabs v-model:active-key="actived" :tabBarStyle="{ color: 'red' }">
|
|
|
+ <TabPane key="product" tab="矿井瓦斯抽采达标生产能力核定" />
|
|
|
+ <TabPane key="extract" tab="矿井瓦斯抽采能力核定" />
|
|
|
+ </Tabs>
|
|
|
+ </div>
|
|
|
+ <div class="nav-r"> 瓦斯抽采能力： {{ data.ccnl }} m<sup>3</sup>/min </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div :style="{ flex: 1 }">
|
|
|
+ 矿井瓦斯抽采系统能力统计图
|
|
|
+ <Bar :chart-data="productChartData" x-axis-prop-type="x" series-prop-type="y" height="300px" />
|
|
|
+ 矿井瓦斯抽采能力统计图
|
|
|
+ <Bar :chart-data="extractChartData" x-axis-prop-type="x" series-prop-type="y" height="300px" />
|
|
|
+ </div>
|
|
|
+ <div class="gas-verify__content">
|
|
|
+ <template v-if="true">
|
|
|
+ <div class="flex flex-justify-between flex-items-center">
|
|
|
+ <FormTitle class="flex-grow-1" icon="pump" title="矿井基本信息" />
|
|
|
+ <Button class="mr-10px" @click="addPubFormSchema">添加回风井</Button>
|
|
|
+ <Button type="primary" @click="submitBasicForm">计算</Button>
|
|
|
+ </div>
|
|
|
+ <BasicForm :model="basicFormModel" :schemas="pubFormSchema" @register="regBasicForm" />
|
|
|
+ </template>
|
|
|
+ <template v-if="actived === 'product'">
|
|
|
+ <div class="flex flex-justify-between flex-items-center">
|
|
|
+ <FormTitle class="flex-grow-1" icon="pump" title="根据矿井实际抽采瓦斯量核定" />
|
|
|
+ <Button type="primary" @click="submitGasvalForm">计算</Button>
|
|
|
+ </div>
|
|
|
+ <BasicForm :model="basicFormModel" :schemas="valFormSchema" @register="regGasvalForm" />
|
|
|
+ </template>
|
|
|
+ <template v-if="actived === 'product'">
|
|
|
+ <div class="flex flex-justify-between flex-items-center">
|
|
|
+ <FormTitle class="flex-grow-1" icon="pump" title="根据矿井瓦斯抽采率核定" />
|
|
|
+ <Button type="primary" @click="submitGasrateForm">计算</Button>
|
|
|
+ </div>
|
|
|
+ <BasicForm :model="basicFormModel" :schemas="rateFormSchema" @register="regGasrateForm" />
|
|
|
+ </template>
|
|
|
+ <template v-if="false">
|
|
|
+ <div class="flex flex-justify-between flex-items-center">
|
|
|
+ <FormTitle class="flex-grow-1" icon="pump" title="核定区域信息" />
|
|
|
+ <Button type="primary" @click="submitCheckForm">计算</Button>
|
|
|
+ </div>
|
|
|
+ <BasicForm :model="basicFormModel" :schemas="checkFormSchema" @register="regCheckForm" />
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="actived === 'product'">
|
|
|
+ <div class="flex flex-justify-between flex-items-center">
|
|
|
+ <FormTitle class="flex-grow-1" :title="`按矿井瓦斯抽采泵站装机能力核定：test`" />
|
|
|
+ <Button type="primary" @click="editHandler()">添加</Button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="actived === 'extract'">
|
|
|
+ <div class="flex flex-justify-between flex-items-center">
|
|
|
+ <FormTitle class="flex-grow-1" :title="`按瓦斯抽采泵站装机能力核定：test`" />
|
|
|
+ <Button type="primary" @click="editHandler()">添加</Button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <BasicTable class="mb-20px" :columns="installTableColumns" :data-source="tableData" @register="regTable">
|
|
|
+ <template #action="{ record }">
|
|
|
+ <a class="mr-5px" @click.prevent="editHandler(record)">编辑</a>
|
|
|
+ <Popconfirm @confirm="deleteHandler(record)"><a>删除</a></Popconfirm>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ <template v-if="actived === 'product'">
|
|
|
+ <div class="flex flex-justify-between flex-items-center">
|
|
|
+ <FormTitle class="flex-grow-1" :title="`按矿井瓦斯抽采主管道系统能力核定：test`" />
|
|
|
+ <Button type="primary" @click="editHandler()">添加</Button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="actived === 'extract'">
|
|
|
+ <div class="flex flex-justify-between flex-items-center">
|
|
|
+ <FormTitle class="flex-grow-1" :title="`按矿井瓦斯主管道系统能力核定：test`" />
|
|
|
+ <Button type="primary" @click="editHandler()">添加</Button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <BasicTable :columns="pipeTableColumns" :data-source="tableData" @register="regTable">
|
|
|
+ <template #action="{ record }">
|
|
|
+ <a class="mr-5px" @click.prevent="editHandler(record)">编辑</a>
|
|
|
+ <Popconfirm @confirm="deleteHandler(record)"><a>删除</a></Popconfirm>
|
|
|
+ </template>
|
|
|
+ </BasicTable>
|
|
|
+ <!-- <BasicTable :columns="workfaceTableColumns" :data-source="[{ ccbz: `1111` }, { ccbz: `2222` }]" @register="regTable">
|
|
|
+ <template #action="{ record }">
|
|
|
+ <a class="mr-5px" @click.prevent="openModal()">编辑</a>
|
|
|
+ <a>删除</a>
|
|
|
+ </template>
|
|
|
+ </BasicTable> -->
|
|
|
+
|
|
|
+ <BasicModal @register="regModal" title="能力核定表单" @ok="submitCommonForm">
|
|
|
+ <BasicForm @register="regCommonForm" />
|
|
|
+ </BasicModal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import CustomHeader from '/@/components/vent/customHeader.vue';
|
|
|
+ import { computed, ref } from 'vue';
|
|
|
+ import { message, TabPane, Tabs, Button, Popconfirm } from 'ant-design-vue';
|
|
|
+ import { onMounted } from 'vue';
|
|
|
+ import FormTitle from '@/views/vent/gas/components/form/formTitle.vue';
|
|
|
+ import { useForm, BasicForm, FormSchema } from '/@/components/Form';
|
|
|
+ import Bar from '/@/components/chart/Bar.vue';
|
|
|
+ import {} from './gasPumpSetting.api';
|
|
|
+ import {
|
|
|
+ publicFormSchema,
|
|
|
+ valFormSchema,
|
|
|
+ rateFormSchema,
|
|
|
+ installTableColumns,
|
|
|
+ pipeTableColumns,
|
|
|
+ tableFormSchema,
|
|
|
+ checkFormSchema,
|
|
|
+ // workfaceTableColumns,
|
|
|
+ } from './gasPumpSetting.data';
|
|
|
+ import { BasicTable, useTable } from '/@/components/Table';
|
|
|
+ import { BasicModal, useModal } from '/@/components/Modal';
|
|
|
+
|
|
|
+ const actived = ref<'extract' | 'product'>('product');
|
|
|
+
|
|
|
+ /** 矿井基本信息的表单数据 */
|
|
|
+ const basicFormModel = ref<any>({});
|
|
|
+ /** 计算参数相关的表单通用配置 */
|
|
|
+ const formProps = {
|
|
|
+ showActionButtonGroup: false,
|
|
|
+ labelCol: { span: 10 },
|
|
|
+ baseColProps: {
|
|
|
+ flex: '20%',
|
|
|
+ },
|
|
|
+ };
|
|
|
+ const [regBasicForm, ctxBasicForm] = useForm(formProps);
|
|
|
+ function submitBasicForm() {
|
|
|
+ ctxBasicForm.validate().then(() => {
|
|
|
+ calculate();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 根据矿井实际抽采瓦斯量核定的表单数据 */
|
|
|
+ // const gasvalFormModel = ref<any>({});
|
|
|
+ const [regGasvalForm, ctxGasvalForm] = useForm(formProps);
|
|
|
+ function submitGasvalForm() {
|
|
|
+ ctxGasvalForm.validate().then(() => {
|
|
|
+ calculate();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 根据矿井瓦斯抽采率核定的表单数据 */
|
|
|
+ // const gasrateFormModel = ref<any>({});
|
|
|
+ const [regGasrateForm, ctxGasrateForm] = useForm(formProps);
|
|
|
+ function submitGasrateForm() {
|
|
|
+ ctxGasrateForm.validate().then(() => {
|
|
|
+ calculate();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 核定区域信息的表单数据 */
|
|
|
+ // const checkFormModel = ref<any>({});
|
|
|
+ const [regCheckForm, ctxCheckForm] = useForm(formProps);
|
|
|
+ function submitCheckForm() {
|
|
|
+ ctxCheckForm.validate().then(() => {
|
|
|
+ calculate();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 两个表格对应的表单数据 */
|
|
|
+ const commonFormModel = ref<any>({});
|
|
|
+ const [regCommonForm, ctxCommonForm] = useForm({
|
|
|
+ model: commonFormModel,
|
|
|
+ schemas: tableFormSchema,
|
|
|
+ showActionButtonGroup: false,
|
|
|
+ labelCol: { span: 10 },
|
|
|
+ });
|
|
|
+ function submitCommonForm() {
|
|
|
+ ctxCommonForm.validate().then(() => {
|
|
|
+ calculate();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 矿井基本信息的表单配置，需要动态添加回风井 */
|
|
|
+ const pubFormSchema = ref<FormSchema[]>([]);
|
|
|
+ /** 根据表单数据设置矿井基本信息的表单配置 */
|
|
|
+ function initPubFormSchema() {
|
|
|
+ const extra: FormSchema[] = data.value.arr.map((num, inx) => {
|
|
|
+ return {
|
|
|
+ label: `回风井${inx + 1}`,
|
|
|
+ field: `__${inx + 1}`,
|
|
|
+ defaultValue: num,
|
|
|
+ component: 'Input',
|
|
|
+ componentProps: {
|
|
|
+ onChange: ({ target }) => {
|
|
|
+ data.value.arr[inx] = target.value;
|
|
|
+ ctxBasicForm.setFieldsValue({ total: data.value.arr.reduce((t, n) => t + parseFloat(n), 0) });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ });
|
|
|
+ const total: FormSchema = {
|
|
|
+ label: '总计',
|
|
|
+ field: 'total',
|
|
|
+ defaultValue: 0,
|
|
|
+ component: 'Input',
|
|
|
+ };
|
|
|
+ // @ts-ignore-next-line
|
|
|
+ pubFormSchema.value = publicFormSchema.concat(...extra, total);
|
|
|
+ }
|
|
|
+ /** 添加一项公用参数表单项 */
|
|
|
+ function addPubFormSchema() {
|
|
|
+ data.value.arr.push(0);
|
|
|
+ initPubFormSchema();
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 生产能力核定/抽采能力核定的数据，也是组件的数据依赖其一 */
|
|
|
+ const data = ref({
|
|
|
+ q: 1,
|
|
|
+ ccl: 1,
|
|
|
+ c1: 1,
|
|
|
+ qf: 1,
|
|
|
+ lpa: 1,
|
|
|
+ spa: 1,
|
|
|
+ total: 1,
|
|
|
+ arr: [1, 12],
|
|
|
+ dbscnl: 123,
|
|
|
+ ccnl: 321,
|
|
|
+ ccxtnl: 12,
|
|
|
+ sjccl: 13,
|
|
|
+ wsclv: 14,
|
|
|
+ ftcc: 11,
|
|
|
+ wsccbzznl: 20,
|
|
|
+ wscczgdxtnl: 10,
|
|
|
+ });
|
|
|
+ /** 两个表格依赖的数据，是组件的数据依赖其二，它们依赖相同的数据 */
|
|
|
+ const tableData = ref<any[]>([]);
|
|
|
+
|
|
|
+ const [regTable] = useTable({
|
|
|
+ pagination: false,
|
|
|
+ });
|
|
|
+ const [regModal, { openModal }] = useModal();
|
|
|
+
|
|
|
+ /** 表格编辑处理 */
|
|
|
+ function editHandler(record?: Record<string, any>) {
|
|
|
+ if (record) {
|
|
|
+ ctxCommonForm.setFieldsValue(record);
|
|
|
+ commonFormModel.value = record;
|
|
|
+ openModal();
|
|
|
+ } else {
|
|
|
+ ctxCommonForm.resetFields();
|
|
|
+ commonFormModel.value = {};
|
|
|
+ openModal();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /** 表格删除处理 */
|
|
|
+ function deleteHandler({ id }) {
|
|
|
+ message.info('提交删除请求');
|
|
|
+ console.log('debug', id);
|
|
|
+ }
|
|
|
+ function refresh() {
|
|
|
+ basicFormModel.value = data.value;
|
|
|
+ tableData.value = [{ ccbz: 1111 }, { ccbz: 2222 }];
|
|
|
+ initPubFormSchema();
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 提交参数进行核定值计算 */
|
|
|
+ function calculate() {
|
|
|
+ message.info('提交计算请求');
|
|
|
+ refresh();
|
|
|
+ }
|
|
|
+
|
|
|
+ const productChartData = computed(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ x: '抽采系统能力',
|
|
|
+ y: data.value.ccxtnl || 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x: '实际抽采量',
|
|
|
+ y: data.value.sjccl || 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x: '瓦斯抽采率',
|
|
|
+ y: data.value.wsclv || 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x: '防突抽采',
|
|
|
+ y: data.value.ftcc || 0,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ });
|
|
|
+ const extractChartData = computed(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ x: '瓦斯抽采泵装机能力',
|
|
|
+ y: data.value.wsccbzznl || 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x: '瓦斯抽采主管道系统能力',
|
|
|
+ y: data.value.wscczgdxtnl || 0,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ });
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ refresh();
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import '/@/design/theme.less';
|
|
|
+
|
|
|
+ .gas-verify {
|
|
|
+ --image-verify-nav-bg-l: url('/@/assets/images/vent/gas/verify-nav-bg-l.png');
|
|
|
+ --image-verify-nav-bg-r: url('/@/assets/images/vent/gas/verify-nav-bg-r.png');
|
|
|
+ --image-verify-nav-bg: url('/@/assets/images/vent/gas/verify-nav-bg.png');
|
|
|
+
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ padding: 0 20px;
|
|
|
+
|
|
|
+ .nav-l {
|
|
|
+ flex: 1;
|
|
|
+ height: 83px;
|
|
|
+ padding-top: 31px;
|
|
|
+ text-align: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 85px;
|
|
|
+ background-position: center 12px;
|
|
|
+ background-image: var(--image-verify-nav-bg-l);
|
|
|
+ }
|
|
|
+ .nav {
|
|
|
+ flex: 3;
|
|
|
+ height: 83px;
|
|
|
+ padding: 20px 40px 0 40px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 70px;
|
|
|
+ background-position: center 0;
|
|
|
+ background-image: var(--image-verify-nav-bg);
|
|
|
+ }
|
|
|
+ .nav-r {
|
|
|
+ flex: 1;
|
|
|
+ height: 83px;
|
|
|
+ padding-top: 31px;
|
|
|
+ text-align: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 85px;
|
|
|
+ background-position: center 12px;
|
|
|
+ background-image: var(--image-verify-nav-bg-r);
|
|
|
+ }
|
|
|
+
|
|
|
+ .gas-verify__content {
|
|
|
+ flex: 4;
|
|
|
+ height: 740px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.zxm-tabs-ink-bar) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ :deep(.form-title) {
|
|
|
+ background-size: 800px 100%;
|
|
|
+ }
|
|
|
+</style>
|
