NGTools/uni_modules/yjly-ngtools-NGComponents/components/yjly-ngtools-NGComponents/yjly-ngtools-NGComponents.vue
ldeyun 9dbfdc6c71 V1.0.0
微信小程序运行成功;
H5运行成功
2024-09-30 01:30:39 +08:00

418 lines
11 KiB
Vue

<template>
<view>
<uni-card>
<view class="uni-container">
<button type="primary" class="uni-button" size="mini" @click="clear">清零</button>
<button type="primary" class="uni-button" size="mini" @click="copy">复制</button>
<button type="primary" class="uni-button" size="mini" @click="paste">粘贴</button>
</view>
<uni-forms ref="form" label-position="top" :model="formData" err-show-type="toast">
<view class="uni-container">
<view class="formItem">
<uni-forms-item name="sampleNumber" label-width='150px' label="样品编号">
<yjly-dictItemSelect sql-condition="cyzf" @change="zfchange"></yjly-dictItemSelect>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item :disabled="true" name="NG_SUM" label-width='150px' label="合计">
<uni-easyinput placeholder="合计" v-model.number="NG_SUM" trim="both"></uni-easyinput>
</uni-forms-item>
</view>
</view>
<scroll-view scroll-y="true" :style="{height:scrollerHeight+'px'}">
<view class="uni-container">
<view class="formItem">
<uni-forms-item name="NG_C1" label-width='150px' label="甲烷C1">
<uni-easyinput placeholder="甲烷C1" v-model.number="formData.NG_C1" @change="change()"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_N2" label-width='150px' label="氮气N2">
<uni-easyinput placeholder="氮气N2" v-model.number="formData.NG_N2"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_CO2" label-width='150px' label="二氧化碳CO2">
<uni-easyinput placeholder="二氧化碳CO2" v-model.number="formData.NG_CO2"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_C2" label-width='150px' label="乙烷C2">
<uni-easyinput placeholder="乙烷C2" v-model.number="formData.NG_C2"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_C3" label-width='150px' label="丙烷C3">
<uni-easyinput placeholder="丙烷C3" v-model.number="formData.NG_C3"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_H2O" label-width='150px' label="水H2O">
<uni-easyinput placeholder="水H2O" v-model.number="formData.NG_H2O"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_H2S" label-width='150px' label="硫化氢H2S">
<uni-easyinput placeholder="硫化氢H2S" v-model.number="formData.NG_H2S"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_H2" label-width='150px' label="氢气H2">
<uni-easyinput placeholder="氢气H2" v-model.number="formData.NG_H2"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_CO" label-width='150px' label="一氧化碳CO">
<uni-easyinput placeholder="一氧化碳CO" v-model.number="formData.NG_CO"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_O2" label-width='150px' label="氧气O2">
<uni-easyinput placeholder="氧气O2" v-model.number="formData.NG_O2"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_iC4" label-width='150px' label="异丁烷iC4">
<uni-easyinput placeholder="异丁烷iC4" v-model.number="formData.NG_iC4"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_nC4" label-width='150px' label="正丁烷nC4">
<uni-easyinput placeholder="正丁烷nC4" v-model.number="formData.NG_nC4"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_iC5" label-width='150px' label="异戊烷iC5">
<uni-easyinput placeholder="异戊烷iC5" v-model.number="formData.NG_iC5"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_nC5" label-width='150px' label="正戊烷nC5">
<uni-easyinput placeholder="正戊烷nC5" v-model.number="formData.NG_nC5"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_C6" label-width='150px' label="己烷C6">
<uni-easyinput placeholder="己烷C6" v-model.number="formData.NG_C6"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_C7" label-width='150px' label="庚烷C7">
<uni-easyinput placeholder="庚烷C7" v-model.number="formData.NG_C7"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_C8" label-width='150px' label="辛烷C8">
<uni-easyinput placeholder="辛烷C8" v-model.number="formData.NG_C8"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_C9" label-width='150px' label="壬烷C9">
<uni-easyinput placeholder="壬烷C9" v-model.number="formData.NG_C9"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_C10" label-width='150px' label="癸烷C10">
<uni-easyinput placeholder="癸烷C10" v-model.number="formData.NG_C10"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_He" label-width='150px' label="氦气He">
<uni-easyinput placeholder="氦气He" v-model.number="formData.NG_He"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
<uni-forms-item name="NG_Ar" label-width='150px' label="氩气Ar">
<uni-easyinput placeholder="氩气Ar" v-model.number="formData.NG_Ar"
trim="both"></uni-easyinput>
</uni-forms-item>
</view>
<view class="formItem">
</view>
</view>
</scroll-view>
</uni-forms>
</uni-card>
</view>
</template>
<script>
// import dictItemSelect from '@/pagesPackage/components/dictItemSelect';
import {
validator
} from '@/js_sdk/validator/ngTools_NGComponents.js';
function getValidator(fields) {
// console.log(validator)
let result = {}
for (let key in validator) {
if (fields.indexOf(key) > -1) {
result[key] = validator[key]
}
}
return result
}
export default {
components: {
// dictItemSelect
},
data() {
let formData = {
"NG_C1": 0,
"NG_N2": 0,
"NG_CO2": 0,
"NG_C2": 0,
"NG_C3": 0,
"NG_H2O": 0,
"NG_H2S": 0,
"NG_H2": 0,
"NG_CO": 0,
"NG_O2": 0,
"NG_iC4": 0,
"NG_nC4": 0,
"NG_iC5": 0,
"NG_nC5": 0,
"NG_C6": 0,
"NG_C7": 0,
"NG_C8": 0,
"NG_C9": 0,
"NG_C10": 0,
"NG_He": 0,
"NG_Ar": 0,
}
return {
formData,
formOptions: {},
scrollerHeight: 0,
NG_SUM: 0,
Str_NG_SUM: "",
rules: {
...getValidator(Object.keys(formData))
},
}
},
watch: {
formData: {
immediate: true,
deep: true,
handler(val) {
// console.log(val)
this.sum(val)
}
},
},
mounted() {
let that = this;
uni.getSystemInfo({
success: function(res) {
that.scrollerHeight = (res.windowHeight - 320)
}
});
this.$refs.form.setRules(this.rules)
},
methods: {
zfchange(e) {
let data = JSON.parse(e);
this.formData = Object.assign({}, this.formData, JSON.parse(data))
},
sum(val) {
let sumZf = 0;
let strZf = ""
for (var item in val) {
if (item.toString().substring(0, 2) == "NG") {
if (val[item] != "") {
sumZf += parseFloat(val[item]);
strZf = strZf + val[item] + "_";
} else {
strZf = strZf + "0" + "_";
}
}
}
this.Str_NG_SUM = strZf.slice(0, -1);
this.NG_SUM = sumZf.toFixed(4);
var diff = sumZf - 100
// console.log(diff)
if (Math.abs(diff) < 0.0001) {
this.$emit("input", this.Str_NG_SUM);
this.$emit("calEnable", true);
} else {
uni.showToast({
title: '组分合计不为100%!',
icon: 'none'
})
this.$emit("calEnable", false);
}
},
clear() {
for (var item in this.formData) {
if (item.toString().substring(0, 2) == "NG") {
this.formData[item] = 0;
}
}
},
copy() {
uni.setStorageSync("NGCopy", this.formData)
},
paste() {
let data = uni.getStorageSync("NGCopy")
this.formData = data
},
/**
* 验证表单并提交
*/
submit(val) {
console.log(val)
this.$refs.form.validate().then((res) => {
// this.$emit("input", val);
this.$emit("calEnable", true);
}).catch((err) => {}).finally(() => {
console.log(err)
this.$emit("calEnable", false);
})
},
}
}
</script>
<style>
.uni-container {
padding: 0px;
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 1024px) {
.formItem {
width: 18%;
padding-right: 10px;
}
}
@media screen and (max-width: 1024px) {
.formItem {
width: 18%;
padding-right: 10px;
}
}
@media screen and (max-width: 768px) {
.formItem {
width: 22%;
padding-right: 10px;
}
}
@media screen and (max-width: 640px) {
.formItem {
width: 30%;
padding-right: 10px;
}
}
@media screen and (max-width: 480px) {
.formItem {
width: 45%;
padding-right: 10px;
}
}
@media screen and (max-width: 320px) {
.formItem {
width: 90%;
padding-right: 10px;
}
}
.uni-input-border,
.uni-textarea-border {
width: 100%;
font-size: 14px;
color: #666;
border: 1px #e5e5e5 solid;
border-radius: 5px;
box-sizing: border-box;
}
.uni-input-border {
padding: 0 10px;
height: 35px;
}
.uni-textarea-border {
padding: 10px;
height: 80px;
}
.uni-button-group {
margin-top: 0px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
}
.uni-button {
width: 80px;
margin-right: 10px;
}
</style>