701 lines
19 KiB
Vue
701 lines
19 KiB
Vue
<template>
|
||
<el-form :model="form" ref="userRef" label-width="100px">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="类型选择">
|
||
<el-radio-group v-model="form.specLevel">
|
||
<el-radio
|
||
size="large"
|
||
v-for="item in plan_spel_level"
|
||
v-key="item.value"
|
||
:label="item.value"
|
||
>{{ item.label }}</el-radio
|
||
>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="进水指标">
|
||
<el-descriptions
|
||
class="margin-top"
|
||
direction="vertical"
|
||
:column="8"
|
||
border
|
||
>
|
||
<el-descriptions-item v-for="item in inletlist">
|
||
<template #label>
|
||
<div class="cell-item">
|
||
{{ item.name }}
|
||
</div>
|
||
</template>
|
||
<el-input v-model="item.value" placeholder="请输入" />
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<!-- <el-icon :size="30" color="red"><CirclePlus /></el-icon> -->
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="出水指标">
|
||
<el-cascader
|
||
v-model="cityValue"
|
||
:options="citytype"
|
||
:props="props"
|
||
@change="handleChange"
|
||
/>
|
||
<el-descriptions
|
||
class="margin-top"
|
||
direction="vertical"
|
||
:column="10"
|
||
style="margin-top: 10px"
|
||
border
|
||
>
|
||
<el-descriptions-item v-for="item in outletlist">
|
||
<template #label>
|
||
<div class="cell-item">
|
||
{{ item.name }}
|
||
</div>
|
||
</template>
|
||
|
||
<el-input v-model="item.value" placeholder="请输入" disabled />
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="粪大肠菌群">
|
||
<el-radio-group v-model="form.coliformRemoval">
|
||
<el-radio
|
||
size="large"
|
||
v-for="item in coliform_removal"
|
||
v-key="item.value"
|
||
:label="item.value"
|
||
>{{ item.label }}</el-radio
|
||
>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="填料方式">
|
||
<el-radio-group v-model="form.packingMethod">
|
||
<el-radio
|
||
size="large"
|
||
v-for="item in packing_method"
|
||
v-key="item.value"
|
||
:label="item.value"
|
||
>{{ item.label }}</el-radio
|
||
>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="加药量">
|
||
<el-descriptions
|
||
class="margin-top"
|
||
style="width: 100%"
|
||
:column="4"
|
||
:size="size"
|
||
border
|
||
>
|
||
<!-- <template #title>
|
||
<el-button type="primary">Operation</el-button>
|
||
</template> -->
|
||
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">葡萄糖</div>
|
||
</template>
|
||
<el-input
|
||
v-model="form.glucose"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">碳酸钠</div>
|
||
</template>
|
||
<el-input
|
||
v-model="form.na2co3"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">PAC（28%）</div>
|
||
</template>
|
||
<el-input
|
||
v-model="form.pac"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">氯片</div>
|
||
</template>
|
||
<el-input
|
||
v-model="form.naclo"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
|
||
|
||
|
||
|
||
<div>
|
||
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="费用价格">
|
||
<el-descriptions
|
||
class="margin-top"
|
||
style="width: 100%"
|
||
:column="3"
|
||
:size="size"
|
||
border
|
||
>
|
||
<!-- <template #title>
|
||
<el-button type="primary">Operation</el-button>
|
||
</template> -->
|
||
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">人工费</div>
|
||
</template>
|
||
<el-input
|
||
v-model="cost.laborCost"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">okr提成</div>
|
||
</template>
|
||
<el-input
|
||
v-model="cost.royaltyOKR"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">其他部门提成</div>
|
||
</template>
|
||
<el-input
|
||
v-model="cost.royaltyOther"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">包装费</div>
|
||
</template>
|
||
<el-input
|
||
v-model="cost.packingFee"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">企业综合管理费</div>
|
||
</template>
|
||
<el-input
|
||
v-model="cost.manageFee"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">运输费</div>
|
||
</template>
|
||
<el-input
|
||
v-model="cost.shippingFee"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">管线安装/吊装/搬运费</div>
|
||
</template>
|
||
<el-input
|
||
v-model="cost.buildingFee"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">服务器租赁费</div>
|
||
</template>
|
||
<el-input
|
||
v-model="cost.serverFee"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">融资成本</div>
|
||
</template>
|
||
<el-input
|
||
v-model="cost.financingCost"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">投标代理费/场地/专家费/配合费</div>
|
||
</template>
|
||
<el-input
|
||
v-model="cost.biddingFee"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">増值税</div>
|
||
</template>
|
||
<el-input
|
||
v-model="cost.vat"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">其他</div>
|
||
</template>
|
||
<el-input
|
||
v-model="cost.other"
|
||
placeholder="请输入"
|
||
/>
|
||
</el-descriptions-item>
|
||
|
||
</el-descriptions>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="24">
|
||
<el-form-item label="处理量选型">
|
||
<el-tree-select
|
||
v-model="form.equipmentParamId"
|
||
:data="treeListData"
|
||
:render-after-expand="false"
|
||
multiple
|
||
style="width: 100%"
|
||
/>
|
||
<el-divider content-position="left"
|
||
>相关设备参数与电费计算</el-divider
|
||
>
|
||
|
||
<el-table border :data="dataList">
|
||
<el-table-column
|
||
label="设备名称"
|
||
align="center"
|
||
prop="processingCapacity"
|
||
>
|
||
<template #default="scope">
|
||
<div>{{ scope.row.equipment.equipmentName }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="处理量"
|
||
align="center"
|
||
prop="processingCapacity"
|
||
>
|
||
<template #default="scope">
|
||
<div>{{ scope.row.capacityTonnage }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="水泵参数" align="center" prop="pumpParam" />
|
||
<el-table-column
|
||
label="水泵数量"
|
||
align="center"
|
||
prop="pumpQuantity"
|
||
/>
|
||
<el-table-column label="气泵参数" align="center" prop="fanParam" />
|
||
<el-table-column
|
||
label="风机数量"
|
||
align="center"
|
||
prop="fanQuantity"
|
||
/>
|
||
|
||
<el-table-column label="主要动力设备" align="center" prop="11">
|
||
<div class="borderBt">水泵</div>
|
||
<div>风机</div>
|
||
</el-table-column>
|
||
<el-table-column label="运行时间" align="center" prop="11">
|
||
<template #default="scope">
|
||
<div class="borderBt">{{ scope.row.pumpRuntime }}</div>
|
||
<div>{{ scope.row.fanRuntime }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="装机功率" align="center" prop="11">
|
||
<template #default="scope">
|
||
<div class="borderBt">{{ scope.row.pumpInstalledPower }}</div>
|
||
<div>{{ scope.row.fanInstalledPower }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="日均电耗" align="center" prop="11">
|
||
<template #default="scope">
|
||
<div class="borderBt">{{ scope.row.pumpDailyConsumption }}</div>
|
||
<div>{{ scope.row.fanDailyConsumption }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="日总电耗"
|
||
align="center"
|
||
prop="totalDailyConsumption"
|
||
/>
|
||
<el-table-column
|
||
label="日吨水总电耗"
|
||
align="center"
|
||
prop="waterElectricityCost"
|
||
/>
|
||
<el-table-column
|
||
label="吨水电费"
|
||
align="center"
|
||
prop="waterElectricityCost"
|
||
/>
|
||
</el-table>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</template>
|
||
<script setup>
|
||
import { treeRegionLevel, getData } from "@/api/renovation/scheme/discharge";
|
||
import { list } from "@/api/renovation/scheme/capacity";
|
||
import {
|
||
list as equipmentEnergyConsumptionList,
|
||
multipleConsumption,
|
||
} from "@/api/renovation/scheme/equipmentEnergyConsumption";
|
||
const { proxy } = getCurrentInstance();
|
||
const { coliform_removal, technical_plan_type, packing_method,plan_spel_level } = proxy.useDict(
|
||
"coliform_removal",
|
||
"technical_plan_type",
|
||
"packing_method",
|
||
"plan_spel_level"
|
||
);
|
||
import {
|
||
list as equipmentList,
|
||
treelist,
|
||
} from "@/api/renovation/scheme/equipment";
|
||
import { list as capList } from "@/api/renovation/scheme/capacity";
|
||
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
planId: null,
|
||
};
|
||
},
|
||
},
|
||
citytype: {
|
||
type: Array,
|
||
default: () => {
|
||
return [];
|
||
},
|
||
},
|
||
planType: {
|
||
type: String,
|
||
default: () => {
|
||
return "";
|
||
},
|
||
},
|
||
});
|
||
|
||
const form = ref({
|
||
waterIn: null,
|
||
waterQualityStandardId: null,
|
||
coliformRemoval: null,
|
||
equipmentParamId: null,
|
||
});
|
||
watch(
|
||
() => props.planType,
|
||
(val) => {
|
||
form.equipmentParamId = [];
|
||
if (val) gettreelist(val,null);
|
||
}
|
||
);
|
||
watch(
|
||
() => form.value.specLevel,
|
||
(newval, oldval) => {
|
||
if(newval){
|
||
gettreelist(null,newval);
|
||
}
|
||
|
||
|
||
},
|
||
{ deep: true }
|
||
|
||
)
|
||
const inletlist = ref([
|
||
{
|
||
name: "cod",
|
||
value: "250~400",
|
||
},
|
||
{
|
||
name: "bod",
|
||
value: "0~400",
|
||
},
|
||
{
|
||
name: "ss",
|
||
value: "100~200",
|
||
},
|
||
{
|
||
name: "nh3",
|
||
value: "30~50",
|
||
},
|
||
{
|
||
name: "tn",
|
||
value: "40~65",
|
||
},
|
||
{
|
||
name: "tp",
|
||
value: "2.5~5.0",
|
||
},
|
||
|
||
{
|
||
name: "ph",
|
||
value: "6~9",
|
||
},
|
||
{
|
||
name: "animalVegetableOil",
|
||
value: "0~1",
|
||
},
|
||
]);
|
||
const outletlist = ref([]);
|
||
const tonnageData = ref([]);
|
||
const treeListData = ref([]);
|
||
const tableDevice = ref([]);
|
||
const tableDict = ref([]);
|
||
const devicelist = ref([]);
|
||
const cityValue = ref([]);
|
||
const dataList = ref([]);
|
||
const citytype = ref(proxy.citytype);
|
||
console.log(proxy.modelValue);
|
||
function watchData() {
|
||
watch(
|
||
() => proxy.modelValue.planId,
|
||
|
||
(newval, oldval) => {
|
||
if (newval) {
|
||
let newForm = proxy.modelValue;
|
||
citytype.value.forEach((element) => {
|
||
let val = element.children.filter(
|
||
(item) => newForm.waterQualityStandardId == item.value
|
||
);
|
||
if (val.length > 0) {
|
||
cityValue.value = [element.label, val[0].value];
|
||
handleChange(cityValue.value);
|
||
}
|
||
});
|
||
|
||
gettreelist(newForm.planType,newForm.specLevel);
|
||
form.value.equipmentParamId = newForm.equipmentDetail.map((item) => {
|
||
return `${item.capacityId}-${item.equipmentId}`;
|
||
});
|
||
|
||
// form.value.equipmentParamId = newForm.equipmentDetail.map((item) => {
|
||
// return item?.capacityId;
|
||
// });
|
||
|
||
// changeSelect(form.value.equipmentParamId);
|
||
form.value.coliformRemoval = newForm.coliformRemoval;
|
||
form.value.packingMethod = newForm.packingMethod;
|
||
form.value.specLevel = newForm.specLevel
|
||
form.value.na2co3 = newForm.na2co3;
|
||
form.value.pac = newForm.pac;
|
||
form.value.naclo = newForm.naclo;
|
||
form.value.glucose = newForm.glucose;
|
||
cost.value=newForm?.cost||{
|
||
laborCost:'',
|
||
royaltyOKR:'',
|
||
royaltyOther:'',
|
||
packingFee:'',
|
||
manageFee:'',
|
||
shippingFee:'',
|
||
buildingFee:'',
|
||
serverFee:'',
|
||
financingCost:'',
|
||
biddingFee:'',
|
||
vat:''
|
||
}
|
||
} else {
|
||
rest();
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
}
|
||
|
||
async function handleChange(params) {
|
||
console.log(params);
|
||
outletlist.value = [];
|
||
if (params[1]) {
|
||
let data = await getData(params[1]);
|
||
form.value.waterQualityStandardId = params[1];
|
||
const keyValue = [
|
||
"standardId",
|
||
"basisDoc",
|
||
"createBy",
|
||
"createTime",
|
||
"level",
|
||
"region",
|
||
"regionId",
|
||
"updateBy",
|
||
"updateTime",
|
||
];
|
||
for (let item in data.data) {
|
||
if (!keyValue.includes(item)) {
|
||
outletlist.value.push({
|
||
name: item,
|
||
value: data.data[item],
|
||
});
|
||
}
|
||
}
|
||
} else {
|
||
proxy.$modal.msgError("出水指标配置项错误，请联系管理员");
|
||
}
|
||
}
|
||
function changeSelect(value) {
|
||
console.log(devicelist.value);
|
||
dataList.value = [];
|
||
dataList.value = devicelist.value.filter((item) =>
|
||
value.includes(item.capacityId)
|
||
);
|
||
}
|
||
|
||
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
||
if (columnIndex === 0 || columnIndex > 5) {
|
||
if (rowIndex % 2 === 0) {
|
||
return {
|
||
rowspan: 2,
|
||
colspan: 1,
|
||
};
|
||
} else {
|
||
return {
|
||
rowspan: 0,
|
||
colspan: 0,
|
||
};
|
||
}
|
||
}
|
||
};
|
||
async function getList() {
|
||
let data = await list();
|
||
let equipData = await equipmentEnergyConsumptionList();
|
||
devicelist.value = equipData.rows;
|
||
|
||
tonnageData.value = data.data.map((item, index) => {
|
||
return {
|
||
value: item.capacityId,
|
||
label: item.capacityTonnage + "吨",
|
||
};
|
||
});
|
||
watchData();
|
||
}
|
||
const cost=ref({})
|
||
function rest() {
|
||
form.value = {
|
||
waterIn: null,
|
||
waterQualityStandardId: null,
|
||
coliformRemoval: null,
|
||
equipmentParamId: null,
|
||
specLevel:0
|
||
|
||
};
|
||
cost.value={
|
||
laborCost:'',
|
||
royaltyOKR:'',
|
||
royaltyOther:'',
|
||
packingFee:'',
|
||
manageFee:'',
|
||
shippingFee:'',
|
||
buildingFee:'',
|
||
serverFee:'',
|
||
financingCost:'',
|
||
biddingFee:'',
|
||
vat:''
|
||
}
|
||
dataList.value = [];
|
||
}
|
||
function handleSubmit() {
|
||
form.value.waterIn = inletlist.value.reduce((obj, item) => {
|
||
obj[item.name] = item.value;
|
||
return obj;
|
||
}, {});
|
||
form.value.equipmentDetail = form.value.equipmentParamId.map((item) => {
|
||
let data = item.split("-");
|
||
return {
|
||
capacityId: data[0],
|
||
equipmentId: data[1],
|
||
|
||
};
|
||
});
|
||
debugger
|
||
form.value.cost=cost.value
|
||
return { ...form.value };
|
||
}
|
||
defineExpose({
|
||
handleSubmit,
|
||
rest,
|
||
});
|
||
async function gettreelist(type,level) {
|
||
type =type||props.planType
|
||
level = level||form.value.specLevel
|
||
debugger
|
||
if((type!=""&&type!=null&&type!=undefined)&&(level!=""&&level!=null&&level!=undefined)){
|
||
let res = await treelist(type,level);
|
||
let data = res.data;
|
||
data.forEach((element) => {
|
||
element.children.forEach((item) => {
|
||
(item.label = `${item.label}(${element.label})`),
|
||
(item.value = element.value + "-" + item.value);
|
||
});
|
||
});
|
||
treeListData.value = data;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
watch(
|
||
() => form.value.equipmentParamId,
|
||
(newVal, oldVal) => {
|
||
console.log("新值：", newVal);
|
||
if (
|
||
Object.prototype.toString.call(newVal) == "[object Array]" &&
|
||
newVal.length
|
||
) {
|
||
let data = newVal.map((item) => {
|
||
return {
|
||
equipmentId: item.split("-")[1],
|
||
capacityId: item.split("-")[0],
|
||
specLevel:form.value.specLevel
|
||
|
||
};
|
||
});
|
||
multipleConsumption(data).then((res) => {
|
||
dataList.value = res.data;
|
||
});
|
||
}
|
||
|
||
// 在这里处理值变化后的逻辑
|
||
}
|
||
);
|
||
onMounted(() => {
|
||
getList();
|
||
});
|
||
</script>
|
||
<style scope>
|
||
.borderBt {
|
||
border-bottom: 1px solid #ebeef5;
|
||
padding: 0 0 4px;
|
||
margin: 5px;
|
||
}
|
||
.cell-item{
|
||
white-space: pre;
|
||
}
|
||
</style>
|