ldeyun/ruoyi-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

孔板计算天然气计算界面调整，修改系统logo

Browse Source
This commit is contained in:
廖德云 2025-02-28 00:14:19 +08:00
parent 1014740818
commit 4441e3d171
25 changed files with 1734 additions and 2976 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -1,10 +1,10 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = 天然气工具系统
# 开发环境配置
ENV = 'development'
# 若依管理系统/开发环境
# 天然气工具系统/开发环境
VUE_APP_BASE_API = '/dev-api'
# 路由懒加载

4
.env.production
View File

@ -1,8 +1,8 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = 天然气工具系统
# 生产环境配置
ENV = 'production'
# 若依管理系统/生产环境
# 天然气工具系统/生产环境
VUE_APP_BASE_API = '/prod-api'

4
.env.staging
View File

@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = 若依管理系统
VUE_APP_TITLE = 天然气工具系统
BABEL_ENV = production
@ -8,5 +8,5 @@ NODE_ENV = production
# 测试环境配置
ENV = 'staging'
# 若依管理系统/测试环境
# 天然气工具系统/测试环境
VUE_APP_BASE_API = '/stage-api'

4
package.json
View File

@ -1,8 +1,8 @@
{
"name": "ruoyi",
"version": "3.8.9",
"description": "若依管理系统",
"author": "若依",
"description": "天然气工具集",
"author": "妍杰丽云",
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",

BIN
src/assets/images/logo (2)(1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
src/assets/images/logo (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 684 KiB

BIN
src/assets/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 680 KiB

BIN
src/assets/logo/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
src/assets/logo/logo11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

84
src/components/Breadcrumb/index.vue
View File

@ -1,12 +1,14 @@
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
<div>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</div>
</template>
<script>
@ -14,79 +16,79 @@ export default {
data() {
return {
levelList: null
}
};
},
watch: {
$route(route) {
// if you go to the redirect page, do not update the breadcrumbs
if (route.path.startsWith('/redirect/')) {
return
return;
}
this.getBreadcrumb()
this.getBreadcrumb();
}
},
created() {
this.getBreadcrumb()
this.getBreadcrumb();
},
methods: {
getBreadcrumb() {
// only show routes with meta.title
let matched = []
const router = this.$route
const pathNum = this.findPathNum(router.path)
let matched = [];
const router = this.$route;
const pathNum = this.findPathNum(router.path);
// multi-level menu
if (pathNum > 2) {
const reg = /\/\w+/gi
const reg = /\/\w+/gi;
const pathList = router.path.match(reg).map((item, index) => {
if (index !== 0) item = item.slice(1)
return item
})
this.getMatched(pathList, this.$store.getters.defaultRoutes, matched)
if (index !== 0) item = item.slice(1);
return item;
});
this.getMatched(pathList, this.$store.getters.defaultRoutes, matched);
} else {
matched = router.matched.filter(item => item.meta && item.meta.title)
matched = router.matched.filter((item) => item.meta && item.meta.title);
}
// 判断是否为首页
if (!this.isDashboard(matched[0])) {
matched = [{ path: "/index", meta: { title: "首页" } }].concat(matched)
matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched);
}
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
this.levelList = matched.filter((item) => item.meta && item.meta.title && item.meta.breadcrumb !== false);
},
findPathNum(str, char = "/") {
let index = str.indexOf(char)
let num = 0
findPathNum(str, char = '/') {
let index = str.indexOf(char);
let num = 0;
while (index !== -1) {
num++
index = str.indexOf(char, index + 1)
num++;
index = str.indexOf(char, index + 1);
}
return num
return num;
},
getMatched(pathList, routeList, matched) {
let data = routeList.find(item => item.path == pathList[0] || (item.name += '').toLowerCase() == pathList[0])
let data = routeList.find((item) => item.path == pathList[0] || (item.name += '').toLowerCase() == pathList[0]);
if (data) {
matched.push(data)
matched.push(data);
if (data.children && pathList.length) {
pathList.shift()
this.getMatched(pathList, data.children, matched)
pathList.shift();
this.getMatched(pathList, data.children, matched);
}
}
},
isDashboard(route) {
const name = route && route.name
const name = route && route.name;
if (!name) {
return false
return false;
}
return name.trim() === 'Index'
return name.trim() === 'Index';
},
handleLink(item) {
const { redirect, path } = item
const { redirect, path } = item;
if (redirect) {
this.$router.push(redirect)
return
this.$router.push(redirect);
return;
}
this.$router.push(path)
this.$router.push(path);
}
}
}
};
</script>
<style lang="scss" scoped>

366
src/components/NGTools/NGResult.vue
View File

@ -1,259 +1,311 @@
<template>
<div class="app-container">
<el-form :model="NGResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px"
class="result-form">
<el-form-item label="分子量" prop="dMrx">
<el-input v-model="NGResult.dMrx" placeholder="请输入分子量" />
<h3>GB/T 17747</h3>
<el-form :model="NGResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px" class="result-form">
<el-form-item label="分子量" prop="dMrx" ref="selectRef">
<el-input readonly v-model="NGResult.dMrx" placeholder="请输入分子量" />
</el-form-item>
<el-form-item label="标况压缩因子" prop="dZb">
<el-input v-model="NGResult.dZb" placeholder="请输入标况压缩因子" />
<el-input readonly v-model="NGResult.dZb" placeholder="请输入标况压缩因子" />
</el-form-item>
<el-form-item label="工况压缩因子" prop="dZf">
<el-input v-model="NGResult.dZf" placeholder="请输入工况压缩因子" />
<el-input readonly v-model="NGResult.dZf" placeholder="请输入工况压缩因子" />
</el-form-item>
<el-form-item label="超压缩系数" prop="dFpv">
<el-input v-model="NGResult.dFpv" placeholder="请输入超压缩系数" />
<el-input readonly v-model="NGResult.dFpv" placeholder="请输入超压缩系数" />
</el-form-item>
<el-form-item label="标况摩尔密度" prop="dDb">
<el-input v-model="NGResult.dDb" placeholder="请输入标况摩尔密度" />
<el-input readonly v-model="NGResult.dDb" placeholder="请输入标况摩尔密度" />
</el-form-item>
<el-form-item label="工况摩尔密度" prop="dDf">
<el-input v-model="NGResult.dDf" placeholder="请输入工况摩尔密度" />
<el-input readonly v-model="NGResult.dDf" placeholder="请输入工况摩尔密度" />
</el-form-item>
<el-form-item label="标况质量密度" prop="dRhob">
<el-input v-model="NGResult.dRhob" placeholder="请输入标况质量密度" />
<el-input readonly v-model="NGResult.dRhob" placeholder="请输入标况质量密度" />
</el-form-item>
<el-form-item label="工况质量密度" prop="dRhof">
<el-input v-model="NGResult.dRhof" placeholder="请输入工况质量密度" />
<el-input readonly v-model="NGResult.dRhof" placeholder="请输入工况质量密度" />
</el-form-item>
<el-form-item label="理想气体的相对密度" prop="drdIdeal">
<el-input v-model="NGResult.drdIdeal" placeholder="请输入理想气体的相对密度" />
<el-form-item label="理想气体的相对密度" prop="dRD_Ideal">
<el-input readonly v-model="NGResult.dRD_Ideal" placeholder="请输入理想气体的相对密度" />
</el-form-item>
<el-form-item label="真实气体的相对密度" prop="drdReal">
<el-input v-model="NGResult.drdReal" placeholder="请输入真实气体的相对密度" />
<el-form-item label="真实气体的相对密度" prop="dRD_Real">
<el-input readonly v-model="NGResult.dRD_Real" placeholder="请输入真实气体的相对密度" />
</el-form-item>
</el-form>
<h3>AGA No10</h3>
<el-form :model="NGResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px" class="result-form">
<el-form-item label="理想气体的比焓" prop="dHo">
<el-input v-model="NGResult.dHo" placeholder="请输入理想气体的比焓" />
<el-input readonly v-model="NGResult.dHo" placeholder="请输入理想气体的比焓" />
</el-form-item>
<el-form-item label="真实气体的焓" prop="dH">
<el-input v-model="NGResult.dH" placeholder="请输入真实气体的焓" />
<el-input readonly v-model="NGResult.dH" placeholder="请输入真实气体的焓" />
</el-form-item>
<el-form-item label="真实气体的熵" prop="dS">
<el-input v-model="NGResult.dS" placeholder="请输入真实气体的熵" />
<el-input readonly v-model="NGResult.dS" placeholder="请输入真实气体的熵" />
</el-form-item>
<el-form-item label="理想气体定压热容" prop="dCpi">
<el-input v-model="NGResult.dCpi" placeholder="请输入理想气体定压热容" />
<el-input readonly v-model="NGResult.dCpi" placeholder="请输入理想气体定压热容" />
</el-form-item>
<el-form-item label="定压热容" prop="dCp">
<el-input v-model="NGResult.dCp" placeholder="请输入定压热容" />
<el-input readonly v-model="NGResult.dCp" placeholder="请输入定压热容" />
</el-form-item>
<el-form-item label="定容积热容" prop="dCv">
<el-input v-model="NGResult.dCv" placeholder="请输入定容积热容" />
<el-input readonly v-model="NGResult.dCv" placeholder="请输入定容积热容" />
</el-form-item>
<el-form-item label="比热比" prop="dk">
<el-input v-model="NGResult.dk" placeholder="请输入比热比" />
<el-input readonly v-model="NGResult.dk" placeholder="请输入比热比" />
</el-form-item>
<el-form-item label="等熵指数" prop="dKappa">
<el-input v-model="NGResult.dKappa" placeholder="请输入等熵指数" />
<el-input readonly v-model="NGResult.dKappa" placeholder="请输入等熵指数" />
</el-form-item>
<el-form-item label="声速" prop="dSOS">
<el-input v-model="NGResult.dSOS" placeholder="请输入声速" />
<el-input readonly v-model="NGResult.dSOS" placeholder="请输入声速" />
</el-form-item>
<el-form-item label="临界流函数" prop="dCstar">
<el-input v-model="NGResult.dCstar" placeholder="请输入临界流函数" />
<el-input readonly v-model="NGResult.dCstar" placeholder="请输入临界流函数" />
</el-form-item>
</el-form>
<h3>GB/T 11063</h3>
<el-form :model="NGResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px" class="result-form">
<el-form-item label="摩尔高位发热量" prop="dHhvMol">
<el-input v-model="NGResult.dHhvMol" placeholder="请输入摩尔高位发热量" />
<el-input readonly v-model="NGResult.dHhvMol" placeholder="请输入摩尔高位发热量" />
</el-form-item>
<el-form-item label="摩尔低位发热量" prop="dLhvMol">
<el-input v-model="NGResult.dLhvMol" placeholder="请输入摩尔低位发热量" />
<el-input readonly v-model="NGResult.dLhvMol" placeholder="请输入摩尔低位发热量" />
</el-form-item>
<el-form-item label="体积高位发热量" prop="dHhvv">
<el-input v-model="NGResult.dHhvv" placeholder="请输入体积高位发热量" />
<el-input readonly v-model="NGResult.dHhvv" placeholder="请输入体积高位发热量" />
</el-form-item>
<el-form-item label="体积低位发热量" prop="dLhvv">
<el-input v-model="NGResult.dLhvv" placeholder="请输入体积低位发热量" />
<el-input readonly v-model="NGResult.dLhvv" placeholder="请输入体积低位发热量" />
</el-form-item>
<el-form-item label="质量高位发热量" prop="dHhvm">
<el-input v-model="NGResult.dHhvm" placeholder="请输入质量高位发热量" />
<el-input readonly v-model="NGResult.dHhvm" placeholder="请输入质量高位发热量" />
</el-form-item>
<el-form-item label="质量地位发热量" prop="dLhvm">
<el-input v-model="NGResult.dLhvm" placeholder="请输入质量地位发热量" />
<el-input readonly v-model="NGResult.dLhvm" placeholder="请输入质量地位发热量" />
</el-form-item>
<el-form-item label="标况压缩因子" prop="dZb11062">
<el-input v-model="NGResult.dZb11062" placeholder="请输入标况压缩因子" />
<el-input readonly v-model="NGResult.dZb11062" placeholder="请输入标况压缩因子" />
</el-form-item>
<el-form-item label="标况质量密度" prop="dRhob11062">
<el-input v-model="NGResult.dRhob11062" placeholder="请输入标况质量密度" />
<el-input readonly v-model="NGResult.dRhob11062" placeholder="请输入标况质量密度" />
</el-form-item>
<el-form-item label="工况质量密度" prop="dRhof11062">
<el-input v-model="NGResult.dRhof11062" placeholder="请输入工况质量密度" />
<el-input readonly v-model="NGResult.dRhof11062" placeholder="请输入工况质量密度" />
</el-form-item>
<el-form-item label="理想气体的相对密度" prop="drdIdeal11062">
<el-input v-model="NGResult.drdIdeal11062" placeholder="请输入理想气体的相对密度" />
<el-form-item label="理想气体的相对密度" prop="dRD_Ideal11062">
<el-input readonly v-model="NGResult.dRD_Ideal11062" placeholder="请输入理想气体的相对密度" />
</el-form-item>
<el-form-item label="真实气体的相对密度" prop="drdReal11062">
<el-input v-model="NGResult.drdReal11062" placeholder="请输入真实气体的相对密度" />
<el-form-item label="真实气体的相对密度" prop="dRD_Real11062">
<el-input readonly v-model="NGResult.dRD_Real11062" placeholder="请输入真实气体的相对密度" />
</el-form-item>
<el-form-item label="真实气体的沃泊指数" prop="dWobbeIndex">
<el-input v-model="NGResult.dWobbeIndex" placeholder="请输入真实气体的沃泊指数" />
<el-input readonly v-model="NGResult.dWobbeIndex" placeholder="请输入真实气体的沃泊指数" />
</el-form-item>
</el-form>
<h3>其他</h3>
<el-form :model="NGResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px" class="result-form">
<el-form-item label="临界压力" prop="dPc">
<el-input v-model="NGResult.dPc" placeholder="请输入临界压力" />
<el-input readonly v-model="NGResult.dPc" placeholder="请输入临界压力" />
</el-form-item>
<el-form-item label="临界温度" prop="dTC">
<el-input v-model="NGResult.dTC" placeholder="请输入临界温度" />
<el-input readonly v-model="NGResult.dTC" placeholder="请输入临界温度" />
</el-form-item>
<el-form-item label="爆炸上限" prop="dBzsx">
<el-input v-model="NGResult.dBzsx" placeholder="请输入爆炸上限" />
<el-input readonly v-model="NGResult.dBzsx" placeholder="请输入爆炸上限" />
</el-form-item>
<el-form-item label="爆炸下限" prop="dBzxx">
<el-input v-model="NGResult.dBzxx" placeholder="请输入爆炸下限" />
<el-input readonly v-model="NGResult.dBzxx" placeholder="请输入爆炸下限" />
</el-form-item>
<el-form-item label="总炭含量(kg/m3)" prop="dTotalC">
<el-input v-model="NGResult.dTotalC" placeholder="请输入总炭含量(kg/m3)" />
<el-input readonly v-model="NGResult.dTotalC" placeholder="请输入总炭含量(kg/m3)" />
</el-form-item>
<el-form-item label="C2组分含量(kg/m3)" prop="dC2">
<el-input v-model="NGResult.dC2" placeholder="请输入C2组分含量(kg/m3)" />
<el-input readonly v-model="NGResult.dC2" placeholder="请输入C2组分含量(kg/m3)" />
</el-form-item>
<el-form-item label="C2以上组分含量(kg/m3)" prop="dC2j">
<el-input v-model="NGResult.dC2j" placeholder="请输入C2以上组分含量(kg/m3)" />
<el-input readonly v-model="NGResult.dC2j" placeholder="请输入C2以上组分含量(kg/m3)" />
</el-form-item>
<el-form-item label="C3以上组分含量(kg/m3)" prop="dC3j">
<el-input v-model="NGResult.dC3j" placeholder="请输入C3以上组分含量(kg/m3)" />
<el-input readonly v-model="NGResult.dC3j" placeholder="请输入C3以上组分含量(kg/m3)" />
</el-form-item>
<el-form-item label="C4以上组分含量(kg/m3)" prop="dC4j">
<el-input v-model="NGResult.dC4j" placeholder="请输入C4以上组分含量(kg/m3)" />
<el-input readonly v-model="NGResult.dC4j" placeholder="请输入C4以上组分含量(kg/m3)" />
</el-form-item>
<el-form-item label="C5以上组分含量(kg/m3)" prop="dC5j">
<el-input v-model="NGResult.dC5j" placeholder="请输入C5以上组分含量(kg/m3)" />
<el-input readonly v-model="NGResult.dC5j" placeholder="请输入C5以上组分含量(kg/m3)" />
</el-form-item>
<el-form-item label="C6以上组分含量(kg/m3)" prop="dC6j">
<el-input v-model="NGResult.dC6j" placeholder="请输入C6以上组分含量(kg/m3)" />
<el-input readonly v-model="NGResult.dC6j" placeholder="请输入C6以上组分含量(kg/m3)" />
</el-form-item>
<el-form-item label="C3C4组分含量(kg/m3)" prop="dC3C4">
<el-input v-model="NGResult.dC3C4" placeholder="请输入C3C4组分含量(kg/m3)" />
<el-input readonly v-model="NGResult.dC3C4" placeholder="请输入C3C4组分含量(kg/m3)" />
</el-form-item>
</el-form>
</div>
</template>
<script>
import unitConverter from '@/components/inputValueUnit/index';
export default {
name: 'MeterresultComponent',
components: {
unitConverter
},
import unitConverter from '@/components/inputValueUnit/index';
export default {
name: 'MeterresultComponent',
components: {
unitConverter
},
props: {
value: {
type: Object,
default: () => ({
dMrx: null,
dZb: null,
dZf: null,
dFpv: null,
dDb: null,
dDf: null,
dRhob: null,
dRhof: null,
drdIdeal: null,
drdReal: null,
dHo: null,
dH: null,
dS: null,
dCpi: null,
dCp: null,
dCv: null,
dk: null,
dKappa: null,
dSOS: null,
dCstar: null,
dHhvMol: null,
dLhvMol: null,
dHhvv: null,
dLhvv: null,
dHhvm: null,
dLhvm: null,
dZb11062: null,
dRhob11062: null,
dRhof11062: null,
drdIdeal11062: null,
drdReal11062: null,
dWobbeIndex: null,
dPc: null,
dTC: null,
dBzsx: null,
dBzxx: null,
dTotalC: null,
dC2: null,
dC2j: null,
dC3j: null,
dC4j: null,
dC5j: null,
dC6j: null,
dC3C4: null,
})
}
},
props: {
value: {
type: Object,
default: () => ({
dMrx: 0,
dZb: 0,
dZf: 0,
dFpv: 0,
dDb: 0,
dDf: 0,
dRhob: 0,
dRhof: 0,
dRD_Ideal: 0,
dRD_Real: 0,
dHo: 0,
dH: 0,
dS: 0,
dCpi: 0,
dCp: 0,
dCv: 0,
dk: 0,
dKappa: 0,
dSOS: 0,
dCstar: 0,
dHhvMol: 0,
dLhvMol: 0,
dHhvv: 0,
dLhvv: 0,
dHhvm: 0,
dLhvm: 0,
dZb11062: 0,
dRhob11062: 0,
dRhof11062: 0,
dRD_Ideal11062: 0,
dRD_Real11062: 0,
dWobbeIndex: 0,
dPc: 0,
dTC: 0,
dBzsx: 0,
dBzxx: 0,
dTotalC: 0,
dC2: 0,
dC2j: 0,
dC3j: 0,
dC4j: 0,
dC5j: 0,
dC6j: 0,
dC3C4: 0
})
}
},
data() {
return {
NGResult: [],
selectWidth: 180
};
},
data() {
return {
NGResult: {
dMrx: 0,
dZb: 0,
dZf: 0,
dFpv: 0,
dDb: 0,
dDf: 0,
dRhob: 0,
dRhof: 0,
dRD_Ideal: 0,
dRD_Real: 0,
dHo: 0,
dH: 0,
dS: 0,
dCpi: 0,
dCp: 0,
dCv: 0,
dk: 0,
dKappa: 0,
dSOS: 0,
dCstar: 0,
dHhvMol: 0,
dLhvMol: 0,
dHhvv: 0,
dLhvv: 0,
dHhvm: 0,
dLhvm: 0,
dZb11062: 0,
dRhob11062: 0,
dRhof11062: 0,
dRD_Ideal11062: 0,
dRD_Real11062: 0,
dWobbeIndex: 0,
dPc: 0,
dTC: 0,
dBzsx: 0,
dBzxx: 0,
dTotalC: 0,
dC2: 0,
dC2j: 0,
dC3j: 0,
dC4j: 0,
dC5j: 0,
dC6j: 0,
dC3C4: 0
},
selectWidth: 180
};
},
watch: {
value: {
deep: true,
handler(newVal) {
console.log(newVal)
for (const key in newVal) {
if (newVal.hasOwnProperty(key)) {
const value = newVal[key];
// 判断是否为有效的数值
if (typeof value === 'number' && !isNaN(value) && isFinite(value)) {
// 使用 toFixed 方法设置小数点位数
newVal[key] = parseFloat(value.toFixed(6));
}
watch: {
value: {
deep: true,
handler(newVal) {
// console.log(newVal);
for (const key in newVal) {
if (newVal.hasOwnProperty(key)) {
const value = newVal[key];
// 判断是否为有效的数值
if (typeof value === 'number' && !isNaN(value) && isFinite(value)) {
// 使用 toFixed 方法设置小数点位数
newVal[key] = parseFloat(value.toFixed(6));
}
}
this.NGResult = JSON.parse(JSON.stringify(newVal));
}
this.NGResult = JSON.parse(JSON.stringify(newVal));
}
},
mounted() {
this.$nextTick(() => {
this.selectWidth = this.$refs.selectRef.$el.offsetWidth;
if (this.selectWidth === 0) this.selectWidth = 180
console.log("wwww", this.selectWidth)
})
},
methods: {}
};
}
},
mounted() {
this.$nextTick(() => {
this.selectWidth = this.$refs.selectRef.$el.offsetWidth;
if (this.selectWidth === 0) this.selectWidth = 180;
// console.log('wwww', this.selectWidth);
});
},
methods: {}
};
</script>
<style scoped>
/* 可按需添加样式 */
.app-container {
height: 100%;
}
/* 可按需添加样式 */
.app-container {
height: 100%;
}
.el-input .el-input__inner {
color: #0000ff; /* 你想要的字体颜色 */
}
.result-form {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
color: red;
}
.result-form {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.total-input>>>.el-input__inner {
font-weight: bold;
color: #409eff;
}
.total-input >>> .el-input readonly__inner {
font-weight: bold;
color: #409eff;
}
</style>

408
src/components/NGTools/meterPar.vue
View File

@ -3,14 +3,12 @@
<el-form :model="meterPar" ref="dataForm" label-position="top" size="small" :inline="true" label-width="160px">
<el-form-item label="流量计算标准" prop="dFlowCalbz" ref="selectRef">
<el-select v-model="meterPar.dFlowCalbz" placeholder="请选择流量计算标准 " clearable>
<el-option v-for="dict in dict.type.ngtools_lljsbz" :key="dict.value" :label="dict.label"
:value="dict.value" />
<el-option v-for="dict in dict.type.ngtools_lljsbz" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="压缩因子计算标准" prop="dZcalbz">
<el-select v-model="meterPar.dZcalbz" placeholder="请选择压缩因子计算标准 " clearable>
<el-option v-for="dict in dict.type.ngtools_ysyzjsbz" :key="dict.value" :label="dict.label"
:value="dict.value" />
<el-option v-for="dict in dict.type.ngtools_ysyzjsbz" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="计量参比条件压力" prop="dCbtj">
@ -20,20 +18,25 @@
</el-form-item>
<el-form-item label="当地大气压" prop="dPatm">
<unit-converter v-model="meterPar.dPatm" :unit-type="'pressure'" :unit-order.sync="meterPar.dPatmUnit"
:show-english-only="false" :decimal-places="6" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dPatm"
:unit-type="'pressure'"
:unit-order.sync="meterPar.dPatmUnit"
:show-english-only="false"
:decimal-places="6"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="流量计类别" prop="dMeterType">
<el-select v-model="meterPar.dMeterType" placeholder="请选择流量计类别 " clearable>
<el-option v-for="dict in dict.type.ngtools_lljlx" :key="dict.value" :label="dict.label"
:value="dict.value" />
<el-select :key="meterPar.dMeterType" v-model="meterPar.dMeterType" placeholder="请选择流量计类别 " clearable>
<el-option v-for="dict in dict.type.ngtools_lljlx" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="节流装置类型" prop="dCoreType">
<el-select v-model="meterPar.dCoreType" placeholder="请选择节流装置类型 " clearable>
<el-option v-for="dict in dict.type.ngtools_jlzzlx" :key="dict.value" :label="dict.label"
:value="dict.value" />
<el-option v-for="dict in dict.type.ngtools_jlzzlx" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="取压方式" prop="dPtmode">
@ -47,8 +50,15 @@
</el-select>
</el-form-item>
<el-form-item label="管道内径" prop="dPipeD">
<unit-converter v-model="meterPar.dPipeD" :unit-type="'length'" :unit-order.sync="meterPar.dLenUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dPipeD"
:unit-type="'length'"
:unit-order.sync="meterPar.dLenUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="管道材料" prop="dPipeMaterial">
<el-select v-model="meterPar.dPipeMaterial" placeholder="请选择管道材料 " clearable>
@ -56,8 +66,15 @@
</el-select>
</el-form-item>
<el-form-item label="孔板孔径" prop="dOrificeD">
<unit-converter v-model="meterPar.dOrificeD" :unit-type="'length'" :unit-order.sync="meterPar.dOrificeUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dOrificeD"
:unit-type="'length'"
:unit-order.sync="meterPar.dOrificeUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="孔板材料" prop="dOrificeMaterial">
@ -66,8 +83,15 @@
</el-select>
</el-form-item>
<el-form-item label="输入压力" prop="dPf">
<unit-converter v-model="meterPar.dPf" :unit-type="'pressure'" :unit-order.sync="meterPar.dPfUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dPf"
:unit-type="'pressure'"
:unit-order.sync="meterPar.dPfUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="压力类型" prop="dPfType">
@ -76,12 +100,26 @@
</el-select>
</el-form-item>
<el-form-item label="输入温度" prop="dTf">
<unit-converter v-model="meterPar.dTf" :unit-type="'temperature'" :unit-order.sync="meterPar.dTfUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dTf"
:unit-type="'temperature'"
:unit-order.sync="meterPar.dTfUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="输入差压" prop="dDp">
<unit-converter v-model="meterPar.dDp" :unit-type="'pressure'" :unit-order.sync="meterPar.dDpUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dDp"
:unit-type="'pressure'"
:unit-order.sync="meterPar.dDpUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<!-- <el-form-item label="体积流量单位" prop="dVFlowUnit">
@ -106,163 +144,243 @@
<el-input v-model="meterPar.dMeterFactor" placeholder="请输入仪表系数 " clearable />
</el-form-item>
<el-form-item label="脉冲数" prop="dPulseNum">
<unit-converter v-model="meterPar.dPulseNum" :unit-type="'user'" :unit-order.sync="meterPar.dVGscUnit"
:show-english-only="false" :decimal-places="5" :user-defined="true" :user-definedunit-name="'个'"
:enable-convert="false" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dPulseNum"
:unit-type="'user'"
:unit-order.sync="meterPar.dVGscUnit"
:show-english-only="false"
:decimal-places="5"
:user-defined="true"
:user-definedunit-name="'个'"
:enable-convert="false"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="管束车容积" prop="dVGsc">
<unit-converter v-model="meterPar.dVGsc" :unit-type="'volume'" :unit-order.sync="meterPar.dVGscUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dVGsc"
:unit-type="'volume'"
:unit-order.sync="meterPar.dVGscUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="最大体积流量" prop="dVFlowMax">
<unit-converter v-model="meterPar.dVFlowMax" :unit-type="'volumeflow'" :unit-order.sync="meterPar.dVFlowUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dVFlowMax"
:unit-type="'volumeflow'"
:unit-order.sync="meterPar.dVFlowUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="最小体积流量" prop="dVFlowMin">
<unit-converter v-model="meterPar.dVFlowMin" :unit-type="'volumeflow'" :unit-order.sync="meterPar.dVFlowUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dVFlowMin"
:unit-type="'volumeflow'"
:unit-order.sync="meterPar.dVFlowUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="常用流量" prop="dVFlowCon">
<unit-converter v-model="meterPar.dVFlowCon" :unit-type="'volumeflow'" :unit-order.sync="meterPar.dVFlowUnit"
:show-english-only="false" :decimal-places="5" :enable-convert="true" :width="selectWidth"
:style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dVFlowCon"
:unit-type="'volumeflow'"
:unit-order.sync="meterPar.dVFlowUnit"
:show-english-only="false"
:decimal-places="5"
:enable-convert="true"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="压力量程下限" prop="dPfRangeMin">
<unit-converter v-model="meterPar.dPfRangeMin" :unit-type="'pressure'" :unit-order.sync="meterPar.dPfUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dPfRangeMin"
:unit-type="'pressure'"
:unit-order.sync="meterPar.dPfUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="压力量程上限" prop="dPfRangeMax">
<unit-converter v-model="meterPar.dPfRangeMax" :unit-type="'pressure'" :unit-order.sync="meterPar.dPfUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dPfRangeMax"
:unit-type="'pressure'"
:unit-order.sync="meterPar.dPfUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="差压量程下限" prop="dDpRangeMin">
<unit-converter v-model="meterPar.dDpRangeMin" :unit-type="'pressure'" :unit-order.sync="meterPar.dDpUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dDpRangeMin"
:unit-type="'pressure'"
:unit-order.sync="meterPar.dDpUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="差压量程上限" prop="dDpRangeMax">
<unit-converter v-model="meterPar.dDpRangeMax" :unit-type="'pressure'" :unit-order.sync="meterPar.dDpUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dDpRangeMax"
:unit-type="'pressure'"
:unit-order.sync="meterPar.dDpUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="温度计量程下限" prop="dTfRangeMin">
<unit-converter v-model="meterPar.dTfRangeMin" :unit-type="'temperature'" :unit-order.sync="meterPar.dTfUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dTfRangeMin"
:unit-type="'temperature'"
:unit-order.sync="meterPar.dTfUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="温度计量程上限" prop="dTfRangeMax">
<unit-converter v-model="meterPar.dTfRangeMax" :unit-type="'temperature'" :unit-order.sync="meterPar.dTfUnit"
:show-english-only="false" :decimal-places="5" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterPar.dTfRangeMax"
:unit-type="'temperature'"
:unit-order.sync="meterPar.dTfUnit"
:show-english-only="false"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
import unitConverter from '@/components/inputValueUnit/index';
export default {
name: 'meterParComponents',
components: {
unitConverter
},
dicts: [
'ngtools_cbtj',
'ngtools_jlzzlx',
'ngtools_lljlx',
'ngtools_qyfs',
'ngtools_gdcz',
'ngtools_lcxsjsff',
'ngtools_gdlx',
'ngtools_yllx',
'ngtools_lljsbz',
'ngtools_ysyzjsbz'
],
mounted() {
this.selectWidth = this.$refs.selectRef.$el.offsetWidth;
},
props: {
value: {
type: Object,
default: () => ({
dFlowCalbz: null,
dZcalbz: null,
dCbtj: null,
dpbM: null,
dtbM: null,
dpbE: null,
dtbE: null,
dPatm: null,
dPatmUnit: null,
dngCompents: null,
dMeterType: null,
dCoreType: null,
dPtmode: null,
dPipeType: null,
dPipeD: null,
dLenUnit: null,
dPipeDtemp: null,
dPileDtempU: null,
dPipeMaterial: null,
dOrificeD: null,
dOrificeUnit: null,
dOrificeDtemp: null,
dOrificeDtempUnit: null,
dOrificeMaterial: null,
dOrificeSharpness: null,
dOrificeRk: null,
dOrificeRkLenU: null,
dPf: null,
dPfUnit: null,
dPfType: null,
dTf: null,
dTfUnit: null,
dDp: null,
dDpUnit: null,
dVFlowUnit: 0,
dVFlowWorkUnit: 0,
dMFlowUnit: 0,
dEFlowUnit: 6,
dCd: null,
dCdCalMethod: null,
dMeterFactor: null,
dPulseNum: null,
dVFlowMax: null,
dVFlowMin: null,
dVFlowCon: null,
dPfRangeMin: null,
dPfRangeMax: null,
dDpRangeMin: null,
dDpRangeMax: null,
dTfRangeMin: null,
dTfRangeMax: null,
dVGsc: null
})
import unitConverter from '@/components/inputValueUnit/index';
export default {
name: 'meterParComponents',
components: {
unitConverter
},
dicts: [
'ngtools_cbtj',
'ngtools_jlzzlx',
'ngtools_lljlx',
'ngtools_qyfs',
'ngtools_gdcz',
'ngtools_lcxsjsff',
'ngtools_gdlx',
'ngtools_yllx',
'ngtools_lljsbz',
'ngtools_ysyzjsbz'
],
mounted() {
this.selectWidth = this.$refs.selectRef.$el.offsetWidth;
},
props: {
value: {
type: Object,
default: () => ({
dFlowCalbz: null,
dZcalbz: null,
dCbtj: null,
dpbM: null,
dtbM: null,
dpbE: null,
dtbE: null,
dPatm: null,
dPatmUnit: null,
dngCompents: null,
dMeterType: null,
dCoreType: null,
dPtmode: null,
dPipeType: null,
dPipeD: null,
dLenUnit: null,
dPipeDtemp: null,
dPileDtempU: null,
dPipeMaterial: null,
dOrificeD: null,
dOrificeUnit: null,
dOrificeDtemp: null,
dOrificeDtempUnit: null,
dOrificeMaterial: null,
dOrificeSharpness: null,
dOrificeRk: null,
dOrificeRkLenU: null,
dPf: null,
dPfUnit: null,
dPfType: null,
dTf: null,
dTfUnit: null,
dDp: null,
dDpUnit: null,
dVFlowUnit: 0,
dVFlowWorkUnit: 0,
dMFlowUnit: 0,
dEFlowUnit: 6,
dCd: null,
dCdCalMethod: null,
dMeterFactor: null,
dPulseNum: null,
dVFlowMax: null,
dVFlowMin: null,
dVFlowCon: null,
dPfRangeMin: null,
dPfRangeMax: null,
dDpRangeMin: null,
dDpRangeMax: null,
dTfRangeMin: null,
dTfRangeMax: null,
dVGsc: null
})
}
},
data() {
return {
selectWidth: 0, //下拉选择组件的宽度
meterPar: _.cloneDeep(this.value)
};
},
watch: {
value: {
deep: true,
handler(newVal) {
console.log('-------------------', newVal, newVal.dMeterType);
this.formData = _.cloneDeep(newVal);
}
},
data() {
return {
selectWidth: 0, //下拉选择组件的宽度
meterPar: _.cloneDeep(this.value)
};
},
watch: {
value: {
deep: true,
handler(newVal) {
this.formData = _.cloneDeep(newVal);
}
},
meterPar: {
deep: true,
handler(newVal) {
this.$emit('input', newVal);
}
meterPar: {
deep: true,
handler(newVal) {
this.$emit('input', newVal);
}
},
methods: {}
};
}
},
methods: {}
};
</script>
<style scoped>
/* 在这里可以添加一些样式 */
/* 在这里可以添加一些样式 */
</style>

290
src/components/NGTools/meterResult.vue
View File

@ -1,170 +1,232 @@
<template>
<div class="app-container">
<el-form :model="meterResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px"
class="result-form">
<el-form :model="meterResult" label-position="top" ref="queryRef" size="small" :inline="false" label-width="160px" class="result-form">
<el-form-item label="求渐近速度系数 E" prop="dE" ref="selectRef">
<el-input disabled v-model="meterResult.dE" placeholder=" " />
<el-input readonly v-model="meterResult.dE" placeholder=" " />
</el-form-item>
<el-form-item label="求相对密度系数 FG" prop="dFG">
<el-input disabled v-model="meterResult.dFG" placeholder=" " />
<el-input readonly v-model="meterResult.dFG" placeholder=" " />
</el-form-item>
<el-form-item label="求流动温度系数 FT" prop="dFT">
<el-input disabled v-model="meterResult.dFT" placeholder="" />
<el-input readonly v-model="meterResult.dFT" placeholder="" />
</el-form-item>
<el-form-item label="求动力粘度dlnd" prop="dDViscosity">
<el-input disabled v-model="meterResult.dDViscosity" placeholder="" />
<el-input readonly v-model="meterResult.dDViscosity" placeholder="" />
</el-form-item>
<el-form-item label="求可膨胀系数" prop="dDExpCoefficient">
<el-input disabled v-model="meterResult.dDExpCoefficient" placeholder="" />
<el-input readonly v-model="meterResult.dDExpCoefficient" placeholder="" />
</el-form-item>
<el-form-item label="管道雷诺数" prop="dRnPipe">
<el-input disabled v-model="meterResult.dRnPipe" placeholder="" />
<el-input readonly v-model="meterResult.dRnPipe" placeholder="" />
</el-form-item>
<el-form-item label="孔板锐利度系数Bk" prop="dBk">
<el-input disabled v-model="meterResult.dBk" placeholder="" />
<el-input readonly v-model="meterResult.dBk" placeholder="" />
</el-form-item>
<el-form-item label="管道粗糙度系数 Gme" prop="dRoughNessPipe">
<el-input disabled v-model="meterResult.dRoughNessPipe" placeholder="" />
<el-input readonly v-model="meterResult.dRoughNessPipe" placeholder="" />
</el-form-item>
<el-form-item label="修正后的流出系数" prop="dCdCorrect">
<el-input disabled v-model="meterResult.dCdCorrect" placeholder="" />
<el-input readonly v-model="meterResult.dCdCorrect" placeholder="" />
</el-form-item>
<el-form-item label="喷嘴的流出系数" prop="dCdNozell">
<el-input disabled v-model="meterResult.dCdNozell" placeholder="" />
<el-input readonly v-model="meterResult.dCdNozell" placeholder="" />
</el-form-item>
<el-form-item label="标况体积流量m³/s" prop="dVFlowb">
<unit-converter v-model="meterResult.dVFlowb" :unit-type="'volumeflow'"
:unit-order.sync="meterResult.dVFlowUnit" :show-english-only="true" :decimal-places="5" :width="selectWidth"
:input-disable="true" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterResult.dVFlowb"
:unit-type="'volumeflow'"
:unit-order.sync="meterResult.dVFlowUnit"
:show-english-only="true"
:decimal-places="5"
:width="selectWidth"
:input-disable="true"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="工况体积流量" prop="dVFlowf">
<unit-converter v-model="meterResult.dVFlowf" :unit-type="'volumeflow'"
:unit-order.sync="meterResult.dVFlowWorkUnit" :show-english-only="true" :decimal-places="5"
:input-disable="true" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterResult.dVFlowf"
:unit-type="'volumeflow'"
:unit-order.sync="meterResult.dVFlowWorkUnit"
:show-english-only="true"
:decimal-places="5"
:input-disable="true"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="标况质量流量" prop="dMFlowb">
<unit-converter v-model="meterResult.dMFlowb" :unit-type="'massflow'" :unit-order.sync="meterResult.dMFlowUnit"
:input-disable="true" :show-english-only="true" :decimal-places="5" :width="selectWidth"
:style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterResult.dMFlowb"
:unit-type="'massflow'"
:unit-order.sync="meterResult.dMFlowUnit"
:input-disable="true"
:show-english-only="true"
:decimal-places="5"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="标况能量流量" prop="dEFlowb">
<unit-converter v-model="meterResult.dEFlowb" :unit-type="'energyflow'"
:unit-order.sync="meterResult.dEFlowUnit" :show-english-only="true" :decimal-places="5" :width="selectWidth"
:input-disable="true" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterResult.dEFlowb"
:unit-type="'energyflow'"
:unit-order.sync="meterResult.dEFlowUnit"
:show-english-only="true"
:decimal-places="5"
:width="selectWidth"
:input-disable="true"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="管道内天然气流速" prop="dVelocityFlow">
<unit-converter v-model="meterResult.dVelocityFlow" :unit-type="'speed'"
:unit-order.sync="meterResult.dVelocityUnit" :show-english-only="true" :decimal-places="5"
:input-disable="true" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterResult.dVelocityFlow"
:unit-type="'speed'"
:unit-order.sync="meterResult.dVelocityUnit"
:show-english-only="true"
:decimal-places="5"
:input-disable="true"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="压力损失" prop="dPressLost">
<unit-converter v-model="meterResult.dPressLost" :unit-type="'pressure'"
:unit-order.sync="meterResult.dPressLostUnit" :show-english-only="true" :decimal-places="5"
:input-disable="true" :width="selectWidth" :style="{ width: selectWidth + 'px' }" />
<unit-converter
v-model="meterResult.dPressLost"
:unit-type="'pressure'"
:unit-order.sync="meterResult.dPressLostUnit"
:show-english-only="true"
:decimal-places="5"
:input-disable="true"
:width="selectWidth"
:style="{ width: selectWidth + 'px' }"
/>
</el-form-item>
<el-form-item label="直径比" prop="dBeta">
<el-input disabled v-model="meterResult.dBeta" placeholder="" />
<el-input readonly v-model="meterResult.dBeta" placeholder="" />
</el-form-item>
<el-form-item label="等熵指数" prop="dKappa">
<el-input disabled v-model="meterResult.dKappa" placeholder="" />
<el-input readonly v-model="meterResult.dKappa" placeholder="" />
</el-form-item>
</el-form>
</div>
</template>
<script>
import unitConverter from '@/components/inputValueUnit/index';
export default {
name: 'MeterresultComponent',
components: {
unitConverter
},
import unitConverter from '@/components/inputValueUnit/index';
export default {
name: 'MeterresultComponent',
components: {
unitConverter
},
props: {
value: {
type: Object,
default: () => ({
dE: 0,
dFG: 0,
dFT: 0,
dDViscosity: 0,
dDExpCoefficient: 0,
dRnPipe: 0,
dBk: 0,
dRoughNessPipe: 0,
dCdCorrect: 0,
dCdNozell: 0,
dVFlowb: 0,
dVFlowf: 0,
dVFlowUnit: 0,
dMFlowb: 0,
dMFlowUnit: 0,
dEFlowb: 0,
dEFlowUnit: 0,
dVelocityFlow: 0,
dVelocityUnit: 0,
dPressLost: 0,
dPressLostUnit: 0,
dBeta: 0,
dKappa: 0
})
}
},
props: {
value: {
type: Object,
default: () => ({
dE: 0,
dFG: 0,
dFT: 0,
dDViscosity: 0,
dDExpCoefficient: 0,
dRnPipe: 0,
dBk: 0,
dRoughNessPipe: 0,
dCdCorrect: 0,
dCdNozell: 0,
dVFlowb: 0,
dVFlowf: 0,
dVFlowUnit: 0,
dMFlowb: 0,
dMFlowUnit: 0,
dEFlowb: 0,
dEFlowUnit: 0,
dVelocityFlow: 0,
dVelocityUnit: 0,
dPressLost: 0,
dPressLostUnit: 0,
dBeta: 0,
dKappa: 0
})
}
},
data() {
return {
meterResult: [],
selectWidth: 180
};
},
data() {
return {
meterResult: {
dE: 0,
dFG: 0,
dFT: 0,
dDViscosity: 0,
dDExpCoefficient: 0,
dRnPipe: 0,
dBk: 0,
dRoughNessPipe: 0,
dCdCorrect: 0,
dCdNozell: 0,
dVFlowb: 0,
dVFlowf: 0,
dVFlowUnit: 0,
dMFlowb: 0,
dMFlowUnit: 0,
dEFlowb: 0,
dEFlowUnit: 0,
dVelocityFlow: 0,
dVelocityUnit: 0,
dPressLost: 0,
dPressLostUnit: 0,
dBeta: 0,
dKappa: 0
},
selectWidth: 180
};
},
watch: {
value: {
deep: true,
handler(newVal) {
console.log(newVal)
for (const key in newVal) {
if (newVal.hasOwnProperty(key)) {
const value = newVal[key];
// 判断是否为有效的数值
if (typeof value === 'number' && !isNaN(value) && isFinite(value)) {
// 使用 toFixed 方法设置小数点位数
newVal[key] = parseFloat(value.toFixed(6));
}
watch: {
value: {
deep: true,
handler(newVal) {
console.log(newVal);
for (const key in newVal) {
if (newVal.hasOwnProperty(key)) {
const value = newVal[key];
// 判断是否为有效的数值
if (typeof value === 'number' && !isNaN(value) && isFinite(value)) {
// 使用 toFixed 方法设置小数点位数
newVal[key] = parseFloat(value.toFixed(6));
}
}
this.meterResult = JSON.parse(JSON.stringify(newVal));
}
this.meterResult = JSON.parse(JSON.stringify(newVal));
}
},
mounted() {
this.$nextTick(() => {
this.selectWidth = this.$refs.selectRef.$el.offsetWidth;
if (this.selectWidth === 0) this.selectWidth = 180
console.log("wwww", this.selectWidth)
})
},
methods: {}
};
}
},
mounted() {
this.$nextTick(() => {
this.selectWidth = this.$refs.selectRef.$el.offsetWidth;
if (this.selectWidth === 0) this.selectWidth = 180;
console.log('wwww', this.selectWidth);
});
},
methods: {}
};
</script>
<style scoped>
/* 可按需添加样式 */
.app-container {
height: 100%;
}
/* 可按需添加样式 */
.app-container {
height: 100%;
}
.result-form {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.result-form {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.total-input>>>.el-input__inner {
font-weight: bold;
color: #409eff;
}
.total-input >>> .el-input__inner {
font-weight: bold;
color: #409eff;
}
</style>

250
src/components/inputValueUnit/index -db.vue
View File

@ -1,250 +0,0 @@
<template>
<div class="unit-conversion">
<!-- 数值输入框，实现双向绑定 -->
<input type="number" v-model="localValue" placeholder="请输入数值" @input="handleInputChange" class="input-field" />
<!-- 单位名称显示标签，蓝色字体，绑定点击和双击事件 -->
<span style="color: blue; cursor: pointer" @click="changeUnit" @dblclick="openUnitSelector" class="unit-label">
{{ getDisplayUnitName(currentUnitName) }}
</span>
<!-- 单位选择弹出窗口 -->
<div v-if="isUnitSelectorVisible" class="unit-selector" :style="{ top: selectorTop + 'px', left: selectorLeft + 'px' }">
<ul>
<!-- 遍历可用单位，绑定点击事件 -->
<li v-for="unit in availableUnits" :key="unit.id" @click="selectUnit(unit)" class="unit-option">
{{ getDisplayUnitName(unit.unitName) }}
</li>
</ul>
</div>
</div>
</template>
<script>
// 引入后台单位换算查询的 API
import { listSysUnitConvert } from '@/api/system/sysUnitConvert.js';
export default {
props: {
// 单位类型
unitType: {
type: String,
required: true
},
// 单位名称，支持双向绑定
unitName: {
type: String,
required: true
},
// 数值，支持双向绑定
value: {
type: [Number, String],
default: ''
},
// 是否只显示英文部分
showEnglishOnly: {
type: Boolean,
default: false
},
// 换算结果小数点的位数
decimalPlaces: {
type: Number,
default: 2
}
},
data() {
return {
// 本地存储的数值，用于双向绑定
localValue: this.value,
// 当前选择的单位名称
currentUnitName: this.unitName,
// 单位选择弹出窗口是否可见
isUnitSelectorVisible: false,
// 弹出窗口的顶部位置
selectorTop: 0,
// 弹出窗口的左侧位置
selectorLeft: 0,
// 当前单位类型下的所有可用单位
availableUnits: [],
// 按照单位类型分组的单位换算数据
unitConversionData: {}
};
},
watch: {
// 监听父组件传入的单位类型变化，更新可用单位
unitType: {
handler(newVal) {
this.fetchUnitConversionData();
},
immediate: true
},
// 监听父组件传入的单位名称变化，更新当前单位名称
unitName(newVal) {
this.currentUnitName = newVal;
console.log(this.currentUnitName);
this.convertValue();
},
// 监听父组件传入的数值变化，更新本地数值
value(newVal) {
this.localValue = newVal;
this.convertValue();
}
},
mounted() {
// 组件挂载时获取单位换算数据
this.fetchUnitConversionData();
},
methods: {
// 获取单位换算数据
async fetchUnitConversionData() {
try {
const response = await listConversion({ pageSize: 300, unitType: this.unitType });
console.log(response);
// 平铺数据转换成按照 unitType 分组的格式
this.unitConversionData = this.groupByUnitType(response.rows);
console.log(this.unitConversionData);
// 获取当前单位类型下的所有可用单位
this.availableUnits = this.unitConversionData[this.unitType] || [];
} catch (error) {
console.error('获取单位换算数据失败:', error);
}
},
// 按照单位类型分组数据
groupByUnitType(data) {
const groupedData = {};
data.forEach((item) => {
if (!groupedData[item.unitType]) {
groupedData[item.unitType] = [];
}
groupedData[item.unitType].push(item);
});
return groupedData;
},
// 处理输入框输入变化事件
handleInputChange() {
this.convertValue();
// 通知父组件数值变化
this.$emit('update:value', parseFloat(this.localValue));
},
// 改变单位
changeUnit() {
const currentIndex = this.availableUnits.findIndex((unit) => unit.unitName === this.currentUnitName);
console.log(currentIndex);
const nextIndex = (currentIndex + 1) % this.availableUnits.length;
const nextUnit = this.availableUnits[nextIndex];
this.selectUnit(nextUnit);
},
// 打开单位选择弹出窗口
openUnitSelector(event) {
this.isUnitSelectorVisible = true;
// 获取单位标签的位置
const rect = event.target.getBoundingClientRect();
this.selectorTop = rect.bottom;
this.selectorLeft = rect.left;
},
// 选择单位
selectUnit(unit) {
const oldUnit = this.getUnitByName(this.currentUnitName);
const newUnit = unit;
this.currentUnitName = newUnit.unitName;
this.convertValue(oldUnit, newUnit);
this.isUnitSelectorVisible = false;
// 通知父组件单位名称变化
this.$emit('update:unitName', newUnit.unitName);
},
// 根据单位名称获取单位信息
getUnitByName(unitName) {
return this.availableUnits.find((unit) => unit.unitName === unitName);
},
// 换算值
convertValue(oldUnit, newUnit) {
oldUnit = oldUnit || this.getUnitByName(this.currentUnitName);
newUnit = newUnit || oldUnit;
const input = parseFloat(this.localValue);
if (isNaN(input)) return;
let result;
if (this.unitType === 'temperature') {
// 温度换算的特殊处理
result = this.convertTemperature(input, oldUnit, newUnit);
} else {
// 普通单位换算，以基准单位为中间件计算
const baseUnit = this.availableUnits.find((unit) => unit.baseUnit === 1);
const valueInBaseUnit = input * oldUnit.conversionFactor;
result = valueInBaseUnit / newUnit.conversionFactor;
}
// 按照四舍六入五留双处理结果
const roundedResult = this.roundToDecimalPlaces(result, this.decimalPlaces);
this.localValue = roundedResult;
// 提交换算结果给父组件
this.$emit('conversionResult', input, roundedResult, oldUnit.unitName, newUnit.unitName);
},
// 温度换算
convertTemperature(input, oldUnit, newUnit) {
if (oldUnit.unitName === 'C(摄氏度)' && newUnit.unitName === 'F(华氏度)') {
return (input * 9) / 5 + 32;
} else if (oldUnit.unitName === 'F(华氏度)' && newUnit.unitName === 'C(摄氏度)') {
return ((input - 32) * 5) / 9;
}
return input;
},
// 按照四舍六入五留双处理结果 conversionFactor
roundToDecimalPlaces(value, decimalPlaces) {
const multiplier = Math.pow(10, decimalPlaces);
const val = value * multiplier;
const intVal = Math.trunc(val);
const decimalPart = val - intVal;
if (decimalPart < 0.5) {
return intVal / multiplier;
} else if (decimalPart > 0.5) {
return (intVal + 1) / multiplier;
} else {
return intVal % 2 === 0 ? intVal / multiplier : (intVal + 1) / multiplier;
}
},
// 获取显示的单位名称
getDisplayUnitName(unitName) {
return this.showEnglishOnly ? unitName.split('(')[0] : unitName;
}
}
};
</script>
<style scoped>
.unit-conversion {
display: inline-flex;
align-items: center;
gap: 5px;
}
.input-field {
padding: 5px 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
.unit-label {
font-size: 14px;
}
.unit-selector {
position: absolute;
z-index: 1000;
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 5px 0;
min-width: 100px;
list-style-type: none;
margin: 0;
}
.unit-option {
padding: 5px 10px;
cursor: pointer;
font-size: 14px;
}
.unit-option:hover {
background-color: #f0f0f0;
}
</style>

762
src/components/inputValueUnit/index.vue
View File

@ -1,19 +1,25 @@
<template>
<div class="unit-converter" :style="{ width: width + 'px' }">
<!-- 数值输入框 -->
<input v-model.number="inputValue" :disabled="inputDisable" class="input-field" type="number" ref="inputRef"
:style="{ width: inputWidth + 'px', height: height + 'px' }" @change="handleInputChange" @focus="selectAllText" />
<input
v-model.number="inputValue"
:disabled="inputDisable"
class="input-field"
type="number"
ref="inputRef"
:style="{ width: inputWidth + 'px', height: height + 'px' }"
@change="handleInputChange"
@focus="selectAllText"
/>
<!-- 单位标签 -->
<span v-if="enableConvert" ref="unitLabel" @click="cycleUnit" @dblclick="toggleUnitSelector" class="unit-label"
:style="{ color: 'blue', height: height + 'px' }">
<span v-if="enableConvert" ref="unitLabel" @click="cycleUnit" @dblclick="toggleUnitSelector" class="unit-label" :style="{ color: 'blue', height: height + 'px' }">
{{ textUnitName }}
</span>
<span v-else ref="unitLabel" class="unit-label" :style="{ color: 'blue', height: height + 'px' }">
{{ textUnitName }}
</span>
<!-- 单位选择弹出窗口 -->
<div v-if="showUnitSelector" class="unit-selector" ref="unitSelector"
:style="{ left: unitSelectorLeft + 'px', top: unitSelectorTop + 'px' }">
<div v-if="showUnitSelector" class="unit-selector" ref="unitSelector" :style="{ left: unitSelectorLeft + 'px', top: unitSelectorTop + 'px' }">
<div v-for="unit in sortedUnits" :key="unit.id" @click="selectUnit(unit)" class="unit-option">
{{ showEnglishOnly ? unit.unitName.split('(')[0] : unit.unitName }}
</div>
@ -22,414 +28,406 @@
</template>
<script>
import {
listSysUnitConvert
} from '@/api/system/sysUnitConvert.js';
import { listSysUnitConvert } from '@/api/system/sysUnitConvert.js';
export default {
name: 'UnitConverter',
props: {
unitType: {
// 当前单位类型 (required)
type: String,
required: true
},
unitOrder: {
// 当前单位序号 (sync)
type: Number,
default: 0
},
value: {
// 输入数值 (sync)
type: Number,
required: true
},
showEnglishOnly: {
// 是否只显示英文
type: Boolean,
default: false
},
decimalPlaces: {
// 小数位数
type: Number,
default: 5,
validator: (v) => v >= 0 && v <= 10
},
width: {
type: Number,
required: false,
default: 180
},
height: {
type: Number,
required: false,
default: 32
},
enableConvert: {
//是否能够进行单位换算
type: Boolean,
default: true
},
userDefined: {
//自定义输入单位显示
type: Boolean,
default: false
},
userDefinedunitName: {
//自定义输入单位显示
type: String,
default: ''
},
inputDisable: {
type: Boolean,
required: false,
default: false
}
export default {
name: 'UnitConverter',
props: {
unitType: {
// 当前单位类型 (required)
type: String,
required: true
},
unitOrder: {
// 当前单位序号 (sync)
type: Number,
default: 0
},
value: {
// 输入数值 (sync)
type: Number,
required: true
},
showEnglishOnly: {
// 是否只显示英文
type: Boolean,
default: false
},
decimalPlaces: {
// 小数位数
type: Number,
default: 5,
validator: (v) => v >= 0 && v <= 10
},
width: {
type: Number,
required: false,
default: 180
},
height: {
type: Number,
required: false,
default: 32
},
enableConvert: {
//是否能够进行单位换算
type: Boolean,
default: true
},
userDefined: {
//自定义输入单位显示
type: Boolean,
default: false
},
userDefinedunitName: {
//自定义输入单位显示
type: String,
default: ''
},
inputDisable: {
type: Boolean,
required: false,
default: false
}
},
mounted() {
this.$nextTick(() => {
this.updateInputWidth();
});
// 在挂载时添加全局点击事件监听器
document.addEventListener('click', this.handleClickOutside);
},
beforeUnmount() {
// 在组件销毁前移除全局点击事件监听器
document.removeEventListener('click', this.handleClickOutside);
},
data() {
return {
inputValue: this.value,
unitData: [], // 原始单位数据
showUnitSelector: false, // 显示选择器
currentUnit: null, // 当前选中单位
baseUnit: null, // 基准单位
inputWidth: 120, //输入框的宽度
textUnitName: '',
unitSelectorLeft: 0,
unitSelectorTop: 0,
// 新增三个数据项
originalValue: this.value, // 原始输入值
originalUnit: null, // 原始输入单位
isInternalUpdate: false // 更新锁定标志
};
},
computed: {
// 显示的单位文本
displayUnitText() {
if (!this.currentUnit) return '';
return this.showEnglishOnly ? this.currentUnit.unitName.split('(')[0].trim() : this.currentUnit.unitName;
},
mounted() {
this.$nextTick(() => {
this.updateInputWidth();
});
// 在挂载时添加全局点击事件监听器
document.addEventListener('click', this.handleClickOutside);
// 当前类型的单位列表（按unitOrder排序）
sortedUnits() {
return this.unitData.filter((u) => u.unitType === this.unitType).sort((a, b) => a.unitOrder - b.unitOrder);
},
beforeUnmount() {
// 在组件销毁前移除全局点击事件监听器
document.removeEventListener('click', this.handleClickOutside);
},
data() {
// 弹窗定位样式
popupPosition() {
if (!this.$refs.unitLabel) return {};
const rect = this.$refs.unitLabel.getBoundingClientRect();
return {
inputValue: this.value,
unitData: [], // 原始单位数据
showUnitSelector: false, // 显示选择器
currentUnit: null, // 当前选中单位
baseUnit: null, // 基准单位
inputWidth: 120, //输入框的宽度
textUnitName: '',
unitSelectorLeft: 0,
unitSelectorTop: 0,
// 新增三个数据项
originalValue: this.value, // 原始输入值
originalUnit: null, // 原始输入单位
isInternalUpdate: false // 更新锁定标志
top: `${rect.bottom + window.scrollY}px`,
left: `${rect.left + window.scrollX}px`
};
},
computed: {
// 显示的单位文本
displayUnitText() {
if (!this.currentUnit) return '';
return this.showEnglishOnly ? this.currentUnit.unitName.split('(')[0].trim() : this.currentUnit.unitName;
},
// 当前类型的单位列表（按unitOrder排序）
sortedUnits() {
return this.unitData.filter((u) => u.unitType === this.unitType).sort((a, b) => a.unitOrder - b.unitOrder);
},
// 弹窗定位样式
popupPosition() {
if (!this.$refs.unitLabel) return {};
const rect = this.$refs.unitLabel.getBoundingClientRect();
return {
top: `${rect.bottom + window.scrollY}px`,
left: `${rect.left + window.scrollX}px`
};
}
},
watch: {
// 监听单位类型变化
unitType: {
immediate: true,
async handler(newType) {
if (this.userDefined) {
this.textUnitName = this.userDefinedunitName;
this.$nextTick(() => {
this.updateInputWidth();
});
} else {
await this.loadUnits(newType);
this.initCurrentUnit();
}
}
},
// 监听外部单位序号变化
unitOrder(newOrder) {
}
},
watch: {
// 监听单位类型变化
unitType: {
immediate: true,
async handler(newType) {
if (this.userDefined) {
this.textUnitName = this.userDefinedunitName;
this.$nextTick(() => {
this.updateInputWidth();
});
} else {
const target = this.sortedUnits.find((u) => u.unitOrder === newOrder);
if (target) this.currentUnit = target;
this.textUnitName = this.showEnglishOnly ? target.unitName.split('(')[0].trim() : target.unitName;
this.$nextTick(() => {
this.updateInputWidth();
});
await this.loadUnits(newType);
this.initCurrentUnit();
}
},
// 监听输入值变化
value(newVal) {
if (!this.isInternalUpdate) {
// 外部更新时重置原始值
this.originalValue = (newVal === "NaN" ? 0 : newVal);
this.originalUnit = this.currentUnit;
this.inputValue = (newVal === "" ? 0 : newVal);
}
this.isInternalUpdate = false;
}
},
methods: {
selectAllText(event) {
// 通过 event.target 获取触发事件的 input 元素
const input = event.target;
// 调用 select() 方法全选文本
input.select();
},
handleMouseMove(event) {
if (this.showUnitSelector) {
// 鼠标右下方偏移量
const offsetX = 10;
const offsetY = 10;
this.unitSelectorLeft = event.clientX + offsetX;
this.unitSelectorTop = event.clientY + offsetY;
// 获取弹窗元素
const unitSelector = this.$refs.unitSelector;
if (unitSelector) {
// 检查是否超出屏幕右边界
if (this.unitSelectorLeft + unitSelector.offsetWidth > window.innerWidth) {
this.unitSelectorLeft = window.innerWidth - unitSelector.offsetWidth;
}
// 检查是否超出屏幕下边界
if (this.unitSelectorTop + unitSelector.offsetHeight > window.innerHeight) {
this.unitSelectorTop = window.innerHeight - unitSelector.offsetHeight;
}
}
}
},
updateInputWidth() {
const spanWidth = this.$refs.unitLabel.offsetWidth + 5;
console.log("widht", this.width, "spanWidth", spanWidth)
this.inputWidth = this.width - spanWidth;
},
// 处理全局点击事件
handleClickOutside(event) {
if (this.$refs.unitSelector && !this.$refs.unitSelector.contains(event.target)) {
this.showUnitSelector = false;
}
},
// 切换单位选择器的显示状态
toggleUnitSelector() {
this.showUnitSelector = !this.showUnitSelector;
},
// 加载单位数据
async loadUnits(unitType) {
try {
const res = await listSysUnitConvert({
unitType: unitType,
status: 'Y'
});
// console.log(res);
this.unitData = res.rows;
this.baseUnit = this.unitData.find((u) => u.baseUnit === 'Y');
// console.log(this.baseUnit.unitName);
} catch (e) {
console.error('单位数据加载失败:', e);
}
},
// 初始化当前单位
initCurrentUnit() {
const target = this.sortedUnits.find((u) => u.unitOrder === this.unitOrder);
this.currentUnit = target || this.baseUnit || this.sortedUnits[0];
// 初始化时设置原始单位（关键修复）
this.originalUnit = this.currentUnit;
// 监听外部单位序号变化
unitOrder(newOrder) {
if (this.userDefined) {
this.textUnitName = this.userDefinedunitName;
this.$nextTick(() => {
this.updateInputWidth();
});
} else {
const target = this.sortedUnits.find((u) => u.unitOrder === newOrder);
if (target) this.currentUnit = target;
this.textUnitName = this.showEnglishOnly ? target.unitName.split('(')[0].trim() : target.unitName;
this.$nextTick(() => {
this.updateInputWidth();
});
},
}
},
// 输入变化处理
handleInputChange() {
// 记录原始值和单位
this.originalValue = this.inputValue;
// 监听输入值变化
value(newVal) {
if (!this.isInternalUpdate) {
// 外部更新时重置原始值
this.originalValue = newVal === 'NaN' ? 0 : newVal;
this.originalUnit = this.currentUnit;
// console.log(this.originalValue);
this.$emit('input', this.inputValue);
// this.convertAndEmit();
},
// 循环切换单位
// 修改单位切换方法
cycleUnit() {
const index = this.sortedUnits.findIndex((u) => u === this.currentUnit);
const newUnit = this.sortedUnits[(index + 1) % this.sortedUnits.length];
this.currentUnit = newUnit;
this.textUnitName = this.showEnglishOnly ? newUnit.unitName.split('(')[0].trim() : newUnit.unitName;
this.$nextTick(() => {
this.updateInputWidth();
this.convertAndEmit(); // 触发转换
});
},
// 选择单位
selectUnit(unit) {
this.currentUnit = unit;
this.showUnitSelector = false;
this.$nextTick(() => {
this.updateInputWidth();
this.convertAndEmit(); // 触发转换
});
},
// 执行换算并提交事件
convertAndEmit() {
// 移除参数
if (!this.currentUnit || !this.baseUnit || !this.originalUnit) return;
let newValue = 0;
if (this.unitType === 'temperature') {
newValue = this.handleTemperatureConversion(this.originalUnit, this.currentUnit);
} else {
// 通过基准单位进行两次精确转换
const baseValue = this.originalValue / this.originalUnit.conversionFactor;
newValue = baseValue * this.currentUnit.conversionFactor;
}
const roundedValue = this.roundValue(newValue);
this.isInternalUpdate = true; // 锁定更新
this.inputValue = roundedValue;
this.$emit('input', roundedValue);
this.$emit('update:unitOrder', this.currentUnit.unitOrder);
this.$emit('conversion', {
initialValue: this.originalValue,
newValue: roundedValue,
oldUnit: this.originalUnit.unitName,
newUnit: this.currentUnit.unitName,
oldOrder: this.originalUnit.unitOrder,
newOrder: this.currentUnit.unitOrder
});
},
// 温度单位换算
// 温度转换调整（使用原始值）
handleTemperatureConversion(oldUnit, newUnit) {
const oldOrder = oldUnit.unitOrder;
const newOrder = newUnit.unitOrder;
// console.log(1111, this.originalValue);
// 使用原始值计算
let celsius;
switch (oldOrder) {
case 0:
celsius = this.originalValue;
break;
case 1:
celsius = ((this.originalValue - 32) * 5) / 9;
break;
case 2:
celsius = this.originalValue - 273.15;
break;
default:
throw new Error('无效温度单位');
}
switch (newOrder) {
case 0:
return celsius;
case 1:
return (celsius * 9) / 5 + 32;
case 2:
return celsius + 273.15;
default:
throw new Error('无效温度单位');
}
},
// 四舍六入五成双
roundValue(value) {
const multiplier = Math.pow(10, this.decimalPlaces);
const val = value * multiplier;
const intVal = Math.trunc(val);
const decimalPart = val - intVal;
if (decimalPart < 0.5) {
return intVal / multiplier;
} else if (decimalPart > 0.5) {
return (intVal + 1) / multiplier;
} else {
return intVal % 2 === 0 ? intVal / multiplier : (intVal + 1) / multiplier;
this.inputValue = newVal === '' ? 0 : newVal;
}
this.isInternalUpdate = false;
}
},
methods: {
selectAllText(event) {
// 通过 event.target 获取触发事件的 input 元素
const input = event.target;
// 调用 select() 方法全选文本
input.select();
},
handleMouseMove(event) {
if (this.showUnitSelector) {
// 鼠标右下方偏移量
const offsetX = 10;
const offsetY = 10;
this.unitSelectorLeft = event.clientX + offsetX;
this.unitSelectorTop = event.clientY + offsetY;
// 获取弹窗元素
const unitSelector = this.$refs.unitSelector;
if (unitSelector) {
// 检查是否超出屏幕右边界
if (this.unitSelectorLeft + unitSelector.offsetWidth > window.innerWidth) {
this.unitSelectorLeft = window.innerWidth - unitSelector.offsetWidth;
}
// 检查是否超出屏幕下边界
if (this.unitSelectorTop + unitSelector.offsetHeight > window.innerHeight) {
this.unitSelectorTop = window.innerHeight - unitSelector.offsetHeight;
}
}
}
},
updateInputWidth() {
const spanWidth = this.$refs.unitLabel.offsetWidth + 5;
// console.log("widht", this.width, "spanWidth", spanWidth)
this.inputWidth = this.width - spanWidth;
},
// 处理全局点击事件
handleClickOutside(event) {
if (this.$refs.unitSelector && !this.$refs.unitSelector.contains(event.target)) {
this.showUnitSelector = false;
}
},
// 切换单位选择器的显示状态
toggleUnitSelector() {
this.showUnitSelector = !this.showUnitSelector;
},
// 加载单位数据
async loadUnits(unitType) {
try {
const res = await listSysUnitConvert({
unitType: unitType,
status: 'Y'
});
// console.log(res);
this.unitData = res.rows;
this.baseUnit = this.unitData.find((u) => u.baseUnit === 'Y');
// console.log(this.baseUnit.unitName);
} catch (e) {
console.error('单位数据加载失败:', e);
}
},
// 初始化当前单位
initCurrentUnit() {
const target = this.sortedUnits.find((u) => u.unitOrder === this.unitOrder);
this.currentUnit = target || this.baseUnit || this.sortedUnits[0];
// 初始化时设置原始单位（关键修复）
this.originalUnit = this.currentUnit;
this.textUnitName = this.showEnglishOnly ? target.unitName.split('(')[0].trim() : target.unitName;
this.$nextTick(() => {
this.updateInputWidth();
});
},
// 输入变化处理
handleInputChange() {
// 记录原始值和单位
this.originalValue = this.inputValue;
this.originalUnit = this.currentUnit;
// console.log(this.originalValue);
this.$emit('input', this.inputValue);
// this.convertAndEmit();
},
// 循环切换单位
// 修改单位切换方法
cycleUnit() {
const index = this.sortedUnits.findIndex((u) => u === this.currentUnit);
const newUnit = this.sortedUnits[(index + 1) % this.sortedUnits.length];
this.currentUnit = newUnit;
this.textUnitName = this.showEnglishOnly ? newUnit.unitName.split('(')[0].trim() : newUnit.unitName;
this.$nextTick(() => {
this.updateInputWidth();
this.convertAndEmit(); // 触发转换
});
},
// 选择单位
selectUnit(unit) {
this.currentUnit = unit;
this.showUnitSelector = false;
this.$nextTick(() => {
this.updateInputWidth();
this.convertAndEmit(); // 触发转换
});
},
// 执行换算并提交事件
convertAndEmit() {
// 移除参数
if (!this.currentUnit || !this.baseUnit || !this.originalUnit) return;
let newValue = 0;
if (this.unitType === 'temperature') {
newValue = this.handleTemperatureConversion(this.originalUnit, this.currentUnit);
} else {
// 通过基准单位进行两次精确转换
const baseValue = this.originalValue / this.originalUnit.conversionFactor;
newValue = baseValue * this.currentUnit.conversionFactor;
}
const roundedValue = this.roundValue(newValue);
this.isInternalUpdate = true; // 锁定更新
this.inputValue = roundedValue;
this.$emit('input', roundedValue);
this.$emit('update:unitOrder', this.currentUnit.unitOrder);
this.$emit('conversion', {
initialValue: this.originalValue,
newValue: roundedValue,
oldUnit: this.originalUnit.unitName,
newUnit: this.currentUnit.unitName,
oldOrder: this.originalUnit.unitOrder,
newOrder: this.currentUnit.unitOrder
});
},
// 温度单位换算
// 温度转换调整（使用原始值）
handleTemperatureConversion(oldUnit, newUnit) {
const oldOrder = oldUnit.unitOrder;
const newOrder = newUnit.unitOrder;
// console.log(1111, this.originalValue);
// 使用原始值计算
let celsius;
switch (oldOrder) {
case 0:
celsius = this.originalValue;
break;
case 1:
celsius = ((this.originalValue - 32) * 5) / 9;
break;
case 2:
celsius = this.originalValue - 273.15;
break;
default:
throw new Error('无效温度单位');
}
switch (newOrder) {
case 0:
return celsius;
case 1:
return (celsius * 9) / 5 + 32;
case 2:
return celsius + 273.15;
default:
throw new Error('无效温度单位');
}
},
// 四舍六入五成双
roundValue(value) {
const multiplier = Math.pow(10, this.decimalPlaces);
const val = value * multiplier;
const intVal = Math.trunc(val);
const decimalPart = val - intVal;
if (decimalPart < 0.5) {
return intVal / multiplier;
} else if (decimalPart > 0.5) {
return (intVal + 1) / multiplier;
} else {
return intVal % 2 === 0 ? intVal / multiplier : (intVal + 1) / multiplier;
}
}
};
}
};
</script>
<style scoped>
.unit-converter {
display: flex;
align-items: center;
gap: 2px;
position: relative;
}
.unit-converter {
display: flex;
align-items: center;
gap: 2px;
position: relative;
}
.input-field {
border: 1px solid #d6d5d5;
border-radius: 4px;
font-size: 14px;
}
.input-field {
border: 1px solid #d6d5d5;
border-radius: 4px;
font-size: 14px;
}
.unit-label {
cursor: pointer;
font-weight: bold;
border: 1px solid #d6d5d5;
border-radius: 4px;
font-size: 12px;
padding-left: 10px;
padding-right: 5px;
white-space: nowrap;
}
.unit-label {
cursor: pointer;
font-weight: bold;
border: 1px solid #d6d5d5;
border-radius: 4px;
font-size: 12px;
padding-left: 10px;
padding-right: 5px;
white-space: nowrap;
}
.unit-label:hover {
background: #f0f8ff;
}
.unit-label:hover {
background: #f0f8ff;
}
.unit-selector {
/* 设置容器的最大高度，当内容超出这个高度时会出现滚动条 */
max-height: 100px;
/* 超出内容时显示纵向滚动条 */
overflow-y: auto;
/* 横向内容不溢出，隐藏多余部分 */
overflow-x: hidden;
/* 其他样式保持不变 */
position: absolute;
z-index: 9999;
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 2px 0;
min-width: 200px;
list-style-type: none;
margin-left: 100px;
}
.unit-selector {
/* 设置容器的最大高度，当内容超出这个高度时会出现滚动条 */
max-height: 100px;
/* 超出内容时显示纵向滚动条 */
overflow-y: auto;
/* 横向内容不溢出，隐藏多余部分 */
overflow-x: hidden;
/* 其他样式保持不变 */
position: absolute;
z-index: 9999;
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 2px 0;
min-width: 200px;
list-style-type: none;
margin-left: 100px;
}
.unit-option {
padding: 2px 10px;
cursor: pointer;
font-size: 14px;
}
.unit-option {
padding: 2px 10px;
cursor: pointer;
font-size: 14px;
}
.unit-option:hover {
background-color: #f0f0f0;
}
.unit-option:hover {
background-color: #f0f0f0;
}
</style>

271
src/components/inputValueUnit/index_old.vue
View File

@ -1,271 +0,0 @@
<template>
<div class="unit-converter">
<!-- 数值输入框 -->
<input v-model="inputValue" type="number" @input="handleInputChange" class="input-field" :style="{ width: width + 'px' }" />
<!-- 单位标签 -->
<span @click="toggleUnit" @dblclick="toggleUnitSelector" class="unit-label" :style="{ color: 'blue' }">
{{ displayUnitName }}
</span>
<!-- 单位选择弹出窗口 -->
<div v-if="showUnitSelector" class="unit-selector" ref="unitSelector">
<div v-for="unit in filteredUnitList" :key="unit.id" @click="selectUnit(unit)" class="unit-option">
{{ showEnglishOnly ? unit.unitName.split('(')[0] : unit.unitName }}
</div>
</div>
</div>
</template>
<script>
import { number } from 'echarts';
import { listSysUnitConvert } from '@/api/system/sysUnitConvert.js';
export default {
props: {
// 单位类型
unitType: {
type: String,
required: true
},
// 是否只显示英文部分
showEnglishOnly: {
type: Boolean,
default: false
},
// 当前单位名称
unitOrder: {
type: number,
required: false,
default: 0
},
// 当前数值
value: {
type: Number,
required: true
},
// 小数点位数
decimalPlaces: {
type: Number,
default: 2
},
width: {
type: Number,
required: false,
default: 80
}
},
mounted() {
// 在挂载时添加全局点击事件监听器
document.addEventListener('click', this.handleClickOutside);
},
beforeUnmount() {
// 在组件销毁前移除全局点击事件监听器
document.removeEventListener('click', this.handleClickOutside);
},
data() {
return {
inputValue: this.value, // 输入的数值
currentUnit: null, // 当前单位
unitList: [], // 单位列表
showUnitSelector: false // 是否显示单位选择窗口
};
},
computed: {
// 显示的单位名称 instanceof
displayUnitName() {
console.log('-----------------------------' + this.currentUnit.unitName);
if (!this.currentUnit) return '';
return this.showEnglishOnly ? this.currentUnit.unitName.split('(')[0] : this.currentUnit.unitName;
},
// 过滤后的单位列表（排除当前单位）
filteredUnitList() {
return this.unitList.filter((unit) => unit.unitOrder !== this.currentUnit?.unitOrder);
}
},
watch: {
// 监听 unitType 变化，重新加载单位列表
unitType: {
immediate: true,
handler(newVal) {
this.loadUnitList(newVal);
}
},
// 监听 unitName 变化，更新当前单位
unitOrder: {
immediate: true,
handler(newVal) {
console.log(newVal);
this.currentUnit = this.unitList.find((unit) => unit.unitOrder == newVal);
}
},
// 监听 value 变化，更新输入框的值
value: {
immediate: true,
handler(newVal) {
this.inputValue = newVal;
}
}
},
methods: {
// 处理全局点击事件
handleClickOutside(event) {
if (this.$refs.unitSelector && !this.$refs.unitSelector.contains(event.target)) {
this.showUnitSelector = false;
}
},
// 切换单位选择器的显示状态
toggleUnitSelector() {
this.showUnitSelector = !this.showUnitSelector;
},
// 加载单位列表
async loadUnitList(unitType) {
try {
const response = await listConversion({ pageSize: 100, unitType: unitType });
this.unitList = response.rows;
// if (this.unitOrder == ) {
// //处理默认基准单位
// this.currentUnit = this.unitList.find((unit) => unit.baseUnit == 1);
// console.log(this.currentUnit);
// } else {
this.currentUnit = this.unitList.find((unit) => unit.unitOrder == this.unitOrder);
// console.log(this.currentUnit);
// if (this.currentUnit === undefined) {
// this.currentUnit = this.unitList.find((unit) => unit.baseUnit === 1);
// }
// }
} catch (error) {
console.error('Failed to load unit list:', error);
}
},
// 处理输入框变化
handleInputChange() {
this.$emit('input', this.inputValue); // 将输入值同步到父组件
this.convertAndEmit();
},
// 切换单位
toggleUnit() {
const currentIndex = this.unitList.indexOf(this.currentUnit);
const nextIndex = (currentIndex + 1) % this.unitList.length;
let oldUnit = this.currentUnit;
let newUnit = this.unitList[nextIndex];
this.currentUnit = newUnit;
console.log('切换单位', currentIndex, nextIndex, this.currentUnit);
this.convertAndEmit(oldUnit, newUnit);
},
// 打开单位选择窗口
openUnitSelector() {
this.showUnitSelector = true;
},
// 选择单位
selectUnit(unit) {
console.log('所选择的单位', unit);
let oldUnit = this.currentUnit;
let newUnit = unit;
this.currentUnit = unit;
this.showUnitSelector = false;
this.convertAndEmit(oldUnit, newUnit);
},
// 换算并提交结果
convertAndEmit(oldUnit, newUnit) {
if (!newUnit) return;
// 获取基准单位
const baseUnit = this.unitList.find((unit) => unit.baseUnit === 1);
if (!baseUnit) return;
// 将输入值转换为基准单位的值
const baseValue = this.inputValue / oldUnit.conversionFactor;
// 将基准单位的值转换为新单位的值
const newValue = baseValue * newUnit.conversionFactor;
console.log('转换值', this.inputValue, baseValue, newValue);
let roundedValue = 0;
if (newUnit.unitName != 'ly(光年)') {
roundedValue = this.roundToDecimalPlaces(newValue);
} else {
roundedValue = newValue;
}
// 提交结果给父组件
this.$emit('conversion', {
initialValue: this.inputValue,
newValue: roundedValue,
oldUnit: oldUnit.unitOrder,
newUnit: newUnit.unitOrder
});
this.inputValue = roundedValue;
// 更新父组件的 unitName
this.$emit('update:unitOrder', this.newUnit.unitOrder);
this.$emit('input', roundedValue);
},
// 四舍六入五留双
// 按照四舍六入五留双处理结果 conversionFactor
roundToDecimalPlaces(value) {
const multiplier = Math.pow(10, this.decimalPlaces);
const val = value * multiplier;
const intVal = Math.trunc(val);
const decimalPart = val - intVal;
if (decimalPart < 0.5) {
return intVal / multiplier;
} else if (decimalPart > 0.5) {
return (intVal + 1) / multiplier;
} else {
return intVal % 2 === 0 ? intVal / multiplier : (intVal + 1) / multiplier;
}
}
}
};
</script>
<style scoped>
.unit-converter {
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
.input-field {
padding: 2px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
height: 50px;
}
.unit-label {
cursor: pointer;
font-weight: bold;
font-size: 12px;
}
.unit-selector {
/* 设置容器的最大高度，当内容超出这个高度时会出现滚动条 */
max-height: 200px;
/* 超出内容时显示纵向滚动条 */
overflow-y: auto;
/* 横向内容不溢出，隐藏多余部分 */
overflow-x: hidden;
/* 其他样式保持不变 */
position: absolute;
z-index: 1000;
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 2px 0;
min-width: 100px;
list-style-type: none;
margin: 0;
}
.unit-option {
padding: 2px 10px;
cursor: pointer;
font-size: 14px;
}
.unit-option:hover {
background-color: #f0f0f0;
}
</style>

72
src/layout/components/Navbar.vue
View File

@ -2,11 +2,14 @@
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/> -->
<div class="left-menu" v-if="topNav">
<p style="color: white">欢迎进入天然气工具系统平台</p>
</div>
<div class="right-menu">
<template v-if="device!=='mobile'">
<template v-if="device !== 'mobile'">
<search id="header-search" class="right-menu-item" />
<el-tooltip content="源码地址" effect="dark" placement="bottom">
@ -22,12 +25,11 @@
<el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar">
<img :src="avatar" class="user-avatar" />
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
@ -47,15 +49,15 @@
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git'
import RuoYiDoc from '@/components/RuoYi/Doc'
import { mapGetters } from 'vuex';
import Breadcrumb from '@/components/Breadcrumb';
import TopNav from '@/components/TopNav';
import Hamburger from '@/components/Hamburger';
import Screenfull from '@/components/Screenfull';
import SizeSelect from '@/components/SizeSelect';
import Search from '@/components/HeaderSearch';
import RuoYiGit from '@/components/RuoYi/Git';
import RuoYiDoc from '@/components/RuoYi/Doc';
export default {
components: {
@ -69,45 +71,43 @@ export default {
RuoYiDoc
},
computed: {
...mapGetters([
'sidebar',
'avatar',
'device'
]),
...mapGetters(['sidebar', 'avatar', 'device']),
setting: {
get() {
return this.$store.state.settings.showSettings
return this.$store.state.settings.showSettings;
},
set(val) {
this.$store.dispatch('settings/changeSetting', {
key: 'showSettings',
value: val
})
});
}
},
topNav: {
get() {
return this.$store.state.settings.topNav
return this.$store.state.settings.topNav;
}
}
},
methods: {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
this.$store.dispatch('app/toggleSideBar');
},
async logout() {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$store.dispatch('LogOut').then(() => {
location.href = '/index';
})
.then(() => {
this.$store.dispatch('LogOut').then(() => {
location.href = '/index';
});
})
}).catch(() => {});
.catch(() => {});
}
}
}
};
</script>
<style lang="scss" scoped>
@ -115,19 +115,19 @@ export default {
height: 50px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
background: #19b6ff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
@ -159,15 +159,15 @@ export default {
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
color: #ffffff;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background .3s;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
}

20
src/layout/components/Sidebar/Logo.vue
View File

@ -1,21 +1,25 @@
<template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<div
class="sidebar-logo-container"
:class="{ collapse: collapse }"
:style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
>
<transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}</h1>
</router-link>
</transition>
</div>
</template>
<script>
import logoImg from '@/assets/logo/logo.png'
import variables from '@/assets/styles/variables.scss'
import logoImg from '@/assets/logo/logo.png';
import variables from '@/assets/styles/variables.scss';
export default {
name: 'SidebarLogo',
@ -30,16 +34,16 @@ export default {
return variables;
},
sideTheme() {
return this.$store.state.settings.sideTheme
return this.$store.state.settings.sideTheme;
}
},
data() {
return {
title: process.env.VUE_APP_TITLE,
logo: logoImg
}
};
}
}
};
</script>
<style lang="scss" scoped>

91
src/layout/components/Sidebar/index.vue
View File

@ -1,57 +1,52 @@
<template>
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true"
:active-text-color="settings.theme"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item
v-for="(route, index) in sidebarRouters"
:key="route.path + index"
:item="route"
:base-path="route.path"
/>
</el-menu>
</el-scrollbar>
</div>
<div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true"
:active-text-color="settings.theme"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss";
import { mapGetters, mapState } from 'vuex';
import Logo from './Logo';
import SidebarItem from './SidebarItem';
import variables from '@/assets/styles/variables.scss';
export default {
components: { SidebarItem, Logo },
computed: {
...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]),
activeMenu() {
const route = this.$route;
const { meta, path } = route;
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu;
}
return path;
},
showLogo() {
return this.$store.state.settings.sidebarLogo;
},
variables() {
return variables;
},
isCollapse() {
return !this.sidebar.opened;
}
components: { SidebarItem, Logo },
computed: {
...mapState(['settings']),
...mapGetters(['sidebarRouters', 'sidebar']),
activeMenu() {
const route = this.$route;
const { meta, path } = route;
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu;
}
return path;
},
showLogo() {
return this.$store.state.settings.sidebarLogo;
},
variables() {
return variables;
},
isCollapse() {
return !this.sidebar.opened;
}
}
};
</script>

126
src/router/index.js
View File

@ -29,17 +29,14 @@ import Layout from '@/layout'
*/
// 公共路由
export const constantRoutes = [
{
export const constantRoutes = [{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect')
}
]
children: [{
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect')
}]
},
{
path: '/login',
@ -65,102 +62,109 @@ export const constantRoutes = [
path: '',
component: Layout,
redirect: 'index',
children: [
{
path: 'index',
component: () => import('@/views/index'),
name: 'Index',
meta: { title: '首页', icon: 'dashboard', affix: true }
children: [{
path: 'index',
component: () => import('@/views/index'),
name: 'Index',
meta: {
title: '首页',
icon: 'dashboard',
affix: true
}
]
}]
},
{
path: '/user',
component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: 'profile',
component: () => import('@/views/system/user/profile/index'),
name: 'Profile',
meta: { title: '个人中心', icon: 'user' }
children: [{
path: 'profile',
component: () => import('@/views/system/user/profile/index'),
name: 'Profile',
meta: {
title: '个人中心',
icon: 'user'
}
]
}]
}
]
// 动态路由，基于用户权限动态去加载
export const dynamicRoutes = [
{
export const dynamicRoutes = [{
path: '/system/user-auth',
component: Layout,
hidden: true,
permissions: ['system:user:edit'],
children: [
{
path: 'role/:userId(\\d+)',
component: () => import('@/views/system/user/authRole'),
name: 'AuthRole',
meta: { title: '分配角色', activeMenu: '/system/user' }
children: [{
path: 'role/:userId(\\d+)',
component: () => import('@/views/system/user/authRole'),
name: 'AuthRole',
meta: {
title: '分配角色',
activeMenu: '/system/user'
}
]
}]
},
{
path: '/system/role-auth',
component: Layout,
hidden: true,
permissions: ['system:role:edit'],
children: [
{
path: 'user/:roleId(\\d+)',
component: () => import('@/views/system/role/authUser'),
name: 'AuthUser',
meta: { title: '分配用户', activeMenu: '/system/role' }
children: [{
path: 'user/:roleId(\\d+)',
component: () => import('@/views/system/role/authUser'),
name: 'AuthUser',
meta: {
title: '分配用户',
activeMenu: '/system/role'
}
]
}]
},
{
path: '/system/dict-data',
component: Layout,
hidden: true,
permissions: ['system:dict:list'],
children: [
{
path: 'index/:dictId(\\d+)',
component: () => import('@/views/system/dict/data'),
name: 'Data',
meta: { title: '字典数据', activeMenu: '/system/dict' }
children: [{
path: 'index/:dictId(\\d+)',
component: () => import('@/views/system/dict/data'),
name: 'Data',
meta: {
title: '字典数据',
activeMenu: '/system/dict'
}
]
}]
},
{
path: '/monitor/job-log',
component: Layout,
hidden: true,
permissions: ['monitor:job:list'],
children: [
{
path: 'index/:jobId(\\d+)',
component: () => import('@/views/monitor/job/log'),
name: 'JobLog',
meta: { title: '调度日志', activeMenu: '/monitor/job' }
children: [{
path: 'index/:jobId(\\d+)',
component: () => import('@/views/monitor/job/log'),
name: 'JobLog',
meta: {
title: '调度日志',
activeMenu: '/monitor/job'
}
]
}]
},
{
path: '/tool/gen-edit',
component: Layout,
hidden: true,
permissions: ['tool:gen:edit'],
children: [
{
path: 'index/:tableId(\\d+)',
component: () => import('@/views/tool/gen/editTable'),
name: 'GenEdit',
meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
children: [{
path: 'index/:tableId(\\d+)',
component: () => import('@/views/tool/gen/editTable'),
name: 'GenEdit',
meta: {
title: '修改生成配置',
activeMenu: '/tool/gen'
}
]
}]
}
]
@ -178,6 +182,8 @@ Router.prototype.replace = function push(location) {
export default new Router({
mode: 'history', // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
scrollBehavior: () => ({
y: 0
}),
routes: constantRoutes
})

1212
src/views/index.vue
View File

File diff suppressed because it is too large Load Diff

112
src/views/login.vue
View File

@ -1,55 +1,32 @@
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">若依后台管理系统</h3>
<h3 class="title">天然气工具集</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin"
>
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
<el-form-item style="width: 100%">
<el-button :loading="loading" size="medium" type="primary" style="width: 100%" @click.native.prevent="handleLogin">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<div style="float: right" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
@ -62,30 +39,26 @@
</template>
<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { getCodeImg } from '@/api/login';
import Cookies from 'js-cookie';
import { encrypt, decrypt } from '@/utils/jsencrypt';
export default {
name: "Login",
name: 'Login',
data() {
return {
codeUrl: "",
codeUrl: '',
loginForm: {
username: "admin",
password: "admin123",
username: 'admin',
password: 'admin123',
rememberMe: false,
code: "",
uuid: ""
code: '',
uuid: ''
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" }
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" }
],
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
},
loading: false,
// 验证码开关
@ -97,7 +70,7 @@ export default {
},
watch: {
$route: {
handler: function(route) {
handler: function (route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
@ -109,18 +82,18 @@ export default {
},
methods: {
getCode() {
getCodeImg().then(res => {
getCodeImg().then((res) => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.codeUrl = 'data:image/gif;base64,' + res.img;
this.loginForm.uuid = res.uuid;
}
});
},
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
const username = Cookies.get('username');
const password = Cookies.get('password');
const rememberMe = Cookies.get('rememberMe');
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
@ -128,26 +101,29 @@ export default {
};
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
Cookies.set('username', this.loginForm.username, { expires: 30 });
Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 });
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove('username');
Cookies.remove('password');
Cookies.remove('rememberMe');
}
this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
});
this.$store
.dispatch('Login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || '/' }).catch(() => {});
})
.catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
});
}
});
}
@ -161,7 +137,7 @@ export default {
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-image: url('../assets/images/login-background.jpg');
background-size: cover;
}
.title {

513
src/views/ngtools/FlowCal/index.vue
View File

@ -1,19 +1,19 @@
<template>
<div>
<div style="text-align: center;margin-top: 10px;margin-bottom: 10px;">
<div style="text-align: center; margin-top: 10px; margin-bottom: 10px">
<button @click="calc" type="primary" class="animated-button">计算组分参数</button>
<button @click="calcFlow" type="primary" class="animated-button">计算流量</button>
</div>
<el-tabs v-model="activeTab" style="width: 100%;">
<el-tab-pane label="流量计参数" name="meterpar">
<el-tabs v-model="activeTab" style="width: 100%">
<el-tab-pane label="工况参数" name="meterpar">
<meterPar v-model="parentMeterPar" />
</el-tab-pane>
<el-tab-pane label="天然气组分" name="ngComponents">
<el-tab-pane label="摩尔组分" name="ngComponents">
<ngComponents v-model="parentMeterPar.dngComponents" />
</el-tab-pane>
<el-tab-pane label="流量计算结果" name="meterresult">
<el-tab-pane label="计算结果" name="meterresult">
<meterResult v-model:meterResult="parentMeterResult" />
<n-g-result v-model:NGResult="parentNGResult"></n-g-result>
</el-tab-pane>
@ -21,261 +21,284 @@
<div v-if="isShowMessage" class="message-box">{{ message }}</div>
</div>
</template>
<script>
import meterPar from '@/components/NGTools/meterPar';
import ngComponents from '@/components/NGTools/NGCom';
import meterResult from '@/components/NGTools/meterResult';
import NGResult from '@/components/NGTools/NGResult';
import meterPar from '@/components/NGTools/meterPar';
import ngComponents from '@/components/NGTools/NGCom';
import meterResult from '@/components/NGTools/meterResult';
import NGResult from '@/components/NGTools/NGResult';
import {
calcNGPar,
calcFlow
} from '@/api/ngtools/NGCalcTools.js';
import { calcNGPar, calcFlow } from '@/api/ngtools/NGCalcTools.js';
export default {
name: 'TabbedComponentWrapper',
components: {
meterPar,
ngComponents,
meterResult,
NGResult
},
data() {
return {
activeTab: 'meterpar',
isShowMessage: false,
message: '',
parentMeterPar: {
dFlowCalbz: '0',
dZcalbz: '0',
dCbtj: '0',
dpbM: 0,
dtbM: 0,
dpbE: 0,
dtbE: 0,
dPatm: 0.0981,
dPatmUnit: 2,
dngComponents: '',
dMeterType: '0',
dCoreType: '0',
dPtmode: '0',
dPipeType: '0',
dPipeD: 259.38,
dLenUnit: 3,
dPipeDtemp: 20,
dPileDtempU: 0,
dPipeMaterial: '11.16',
dOrificeD: 150.25,
dOrificeUnit: 3,
dOrificeDtemp: 0,
dOrificeDtempUnit: 0,
dOrificeMaterial: '16.6',
dOrificeSharpness: 0,
dOrificeRk: 0,
dOrificeRkLenU: 0,
dPf: 1.48,
dPfUnit: 2,
dPfType: '0',
dTf: 15,
dTfUnit: 0,
dDp: 12.5,
dDpUnit: 1,
dVFlowUnit: 0,
dVFlowWorkUnit: 0,
dMFlowUnit: 0,
dEFlowUnit: 6,
dCd: 0,
dCdCalMethod: 0,
dMeterFactor: 2354,
dPulseNum: 12000,
dVFlowMax: 6,
dVFlowMin: 3,
dVFlowCon: 5,
dPfRangeMin: 0,
dPfRangeMax: 0,
dDpRangeMin: 0,
dDpRangeMax: 0,
dTfRangeMin: 0,
dTfRangeMax: 0,
dVGsc: 300,
dVGscUnit: 0
},
parentMeterResult: {
dE: 10,
dFG: 0,
dFT: 0,
dDViscosity: 0,
dDExpCoefficient: 0,
dRnPipe: 0,
dBk: 0,
dRoughNessPipe: 0,
dCdCorrect: 0,
dCdNozell: 0,
dVFlowb: 100,
dVFlowf: 100,
dVFlowUnit: 2,
dMFlowb: 44,
dMFlowUnit: 0,
dEFlowb: 33,
dEFlowUnit: 0,
dVelocityFlow: 3,
dVelocityUnit: 1,
dPressLost: 300,
dPressLostUnit: 0,
dBeta: 0,
dKappa: 0
},
parentNGResult: {
dMrx: null,
dZb: null,
dZf: null,
dFpv: null,
dDb: null,
dDf: null,
dRhob: null,
dRhof: null,
drdIdeal: null,
drdReal: null,
dHo: null,
dH: null,
dS: null,
dCpi: null,
dCp: null,
dCv: null,
dk: null,
dKappa: null,
dSOS: null,
dCstar: null,
dHhvMol: null,
dLhvMol: null,
dHhvv: null,
dLhvv: null,
dHhvm: null,
dLhvm: null,
dZb11062: null,
dRhob11062: null,
dRhof11062: null,
drdIdeal11062: null,
drdReal11062: null,
dWobbeIndex: null,
dPc: null,
dTC: null,
dBzsx: null,
dBzxx: null,
dTotalC: null,
dC2: null,
dC2j: null,
dC3j: null,
dC4j: null,
dC5j: null,
dC6j: null,
dC3C4: null,
},
componentString: ''
};
},
methods: {
showMessage() {
this.isShowMessage = true;
setTimeout(() => {
this.isShowMessage = false;
}, 1000); // 3 秒后自动消失
export default {
name: 'TabbedComponentWrapper',
components: {
meterPar,
ngComponents,
meterResult,
NGResult
},
data() {
return {
activeTab: 'meterpar',
isShowMessage: false,
message: '',
parentMeterPar: {
dFlowCalbz: '0',
dZcalbz: '0',
dCbtj: '0',
dpbM: 0,
dtbM: 0,
dpbE: 0,
dtbE: 0,
dPatm: 0.0981,
dPatmUnit: 2,
dngComponents: '',
dMeterType: '0',
dCoreType: '0',
dPtmode: '0',
dPipeType: '0',
dPipeD: 259.38,
dLenUnit: 3,
dPipeDtemp: 20,
dPileDtempU: 0,
dPipeMaterial: '11.16',
dOrificeD: 150.25,
dOrificeUnit: 3,
dOrificeDtemp: 0,
dOrificeDtempUnit: 0,
dOrificeMaterial: '16.6',
dOrificeSharpness: 0,
dOrificeRk: 0,
dOrificeRkLenU: 0,
dPf: 1.48,
dPfUnit: 2,
dPfType: '0',
dTf: 15,
dTfUnit: 0,
dDp: 12.5,
dDpUnit: 1,
dVFlowUnit: 0,
dVFlowWorkUnit: 0,
dMFlowUnit: 0,
dEFlowUnit: 6,
dCd: 0.9957,
dCdCalMethod: 0,
dMeterFactor: 2354,
dPulseNum: 12000,
dVFlowMax: 6,
dVFlowMin: 3,
dVFlowCon: 5,
dPfRangeMin: 0,
dPfRangeMax: 0,
dDpRangeMin: 0,
dDpRangeMax: 0,
dTfRangeMin: 0,
dTfRangeMax: 0,
dVGsc: 300,
dVGscUnit: 0
},
calc() {
console.log(this.parentMeterPar);
calcNGPar(this.parentMeterPar)
.then((res) => {
this.parentNGResult = res.data
this.activeTab = "meterresult"
console.log('Response:', res);
})
.catch((error) => {
console.error('Request error:', error);
});
parentMeterResult: {
dE: 0,
dFG: 0,
dFT: 0,
dDViscosity: 0,
dDExpCoefficient: 0,
dRnPipe: 0,
dBk: 0,
dRoughNessPipe: 0,
dCdCorrect: 0,
dCdNozell: 0,
dVFlowb: 0,
dVFlowf: 0,
dVFlowUnit: 2,
dMFlowb: 0,
dMFlowUnit: 0,
dEFlowb: 0,
dEFlowUnit: 0,
dVelocityFlow: 0,
dVelocityUnit: 0,
dPressLost: 0,
dPressLostUnit: 0,
dBeta: 0,
dKappa: 0
},
calcFlow() {
console.log(this.parentMeterPar);
if (this.parentMeterPar.dngComponents === "") {
this.message = "组分为空，请输入天然气组分!"
this.showMessage()
this.activeTab = "ngComponents"
return;
}
// 遍历对象并将每个属性的值设置为零
for (const key in this.parentMeterResult) {
if (this.parentMeterResult.hasOwnProperty(key)) {
this.parentMeterResult[key] = 0;
}
}
calcFlow(this.parentMeterPar)
.then((res) => {
this.parentMeterResult = res.data[0];
console.log('Response:', this.parentMeterResult);
this.activeTab = "meterresult"
})
.catch((error) => {
console.error('Request error:', error);
});
}
parentNGResult: {
dMrx: 0,
dZb: 0,
dZf: 0,
dFpv: 0,
dDb: 0,
dDf: 0,
dRhob: 0,
dRhof: 0,
dRD_Ideal: 0,
dRD_Real: 0,
dHo: 0,
dH: 0,
dS: 0,
dCpi: 0,
dCp: 0,
dCv: 0,
dk: 0,
dKappa: 0,
dSOS: 0,
dCstar: 0,
dHhvMol: 0,
dLhvMol: 0,
dHhvv: 0,
dLhvv: 0,
dHhvm: 0,
dLhvm: 0,
dZb11062: 0,
dRhob11062: 0,
dRhof11062: 0,
dRD_Ideal11062: 0,
dRD_Real11062: 0,
dWobbeIndex: 0,
dPc: 0,
dTC: 0,
dBzsx: 0,
dBzxx: 0,
dTotalC: 0,
dC2: 0,
dC2j: 0,
dC3j: 0,
dC4j: 0,
dC5j: 0,
dC6j: 0,
dC3C4: 0
},
componentString: '',
dMeterType: 0
};
},
mounted() {
console.log('179行', this.dMeterType);
this.parentMeterPar.dMeterType = this.dMeterType;
console.log('180行', this.parentMeterPar);
},
created() {
// 获取路由的查询参数
let params = this.$route.query;
console.log('186行', params);
this.dMeterType = params.dMeterType;
},
watch: {
dMeterType(newValue) {
this.parentMeterPar.dMeterType = newValue;
console.log('dMeterType 变化后，parentMeterPar:', this.parentMeterPar);
}
};
},
methods: {
showMessage() {
this.isShowMessage = true;
setTimeout(() => {
this.isShowMessage = false;
}, 1000); // 3 秒后自动消失
},
calc() {
console.log(this.parentMeterPar);
if (this.parentMeterPar.dngComponents === '') {
this.message = '组分为空，请输入天然气组分!';
this.showMessage();
this.activeTab = 'ngComponents';
return;
}
// 遍历对象并将每个属性的值设置为零
for (const key in this.parentNGResult) {
if (this.parentNGResult.hasOwnProperty(key)) {
this.parentNGResult[key] = 0;
}
}
calcNGPar(this.parentMeterPar)
.then((res) => {
this.parentNGResult = res.data;
this.activeTab = 'meterresult';
console.log('Response:', res);
})
.catch((error) => {
console.error('Request error:', error);
});
},
calcFlow() {
console.log(this.parentMeterPar);
if (this.parentMeterPar.dngComponents === '') {
this.message = '组分为空，请输入天然气组分!';
this.showMessage();
this.activeTab = 'ngComponents';
return;
}
// 遍历对象并将每个属性的值设置为零
for (const key in this.parentMeterResult) {
if (this.parentMeterResult.hasOwnProperty(key)) {
this.parentMeterResult[key] = 0;
}
}
calcFlow(this.parentMeterPar)
.then((res) => {
this.parentMeterResult = res.data[0];
console.log('Response:', this.parentMeterResult);
this.activeTab = 'meterresult';
})
.catch((error) => {
console.error('Request error:', error);
});
}
}
};
</script>
<style scoped>
.animated-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
transition: background-color 0.3s ease;
}
.animated-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
transition: background-color 0.3s ease;
}
.animated-button:last-child {
margin-right: 0;
}
.animated-button:last-child {
margin-right: 0;
}
.animated-button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
.animated-button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
.animated-button:active {
transform: scale(0.95);
}
.animated-button:active {
transform: scale(0.95);
}
/* 使用深度选择器 */
/deep/ .el-tabs__nav {
padding: 0;
margin: 0;
display: flex;
width: 100%;
}
/* 使用深度选择器 */
/deep/ .el-tabs__nav {
padding: 0;
margin: 0;
display: flex;
width: 100%;
}
/deep/ .el-tabs__item {
flex: 1;
text-align: center;
padding: 10px;
}
/deep/ .el-tabs__item {
flex: 1;
text-align: center;
padding: 10px;
}
.message-box {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 10px 20px;
border-radius: 5px;
z-index: 9999;
}
.message-box {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 10px 20px;
border-radius: 5px;
z-index: 9999;
}
</style>

112
src/views/register.vue
View File

@ -1,60 +1,36 @@
<template>
<div class="register">
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
<h3 class="title">若依后台管理系统</h3>
<h3 class="title">天然气工具系统</h3>
<el-form-item prop="username">
<el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="registerForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleRegister"
>
<el-input v-model="registerForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleRegister">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="confirmPassword">
<el-input
v-model="registerForm.confirmPassword"
type="password"
auto-complete="off"
placeholder="确认密码"
@keyup.enter.native="handleRegister"
>
<el-input v-model="registerForm.confirmPassword" type="password" auto-complete="off" placeholder="确认密码" @keyup.enter.native="handleRegister">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="registerForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleRegister"
>
<el-input v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleRegister">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="register-code">
<img :src="codeUrl" @click="getCode" class="register-code-img"/>
<img :src="codeUrl" @click="getCode" class="register-code-img" />
</div>
</el-form-item>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleRegister"
>
<el-form-item style="width: 100%">
<el-button :loading="loading" size="medium" type="primary" style="width: 100%" @click.native.prevent="handleRegister">
<span v-if="!loading">注 册</span>
<span v-else>注 册 中...</span>
</el-button>
<div style="float: right;">
<div style="float: right">
<router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
</div>
</el-form-item>
@ -67,42 +43,42 @@
</template>
<script>
import { getCodeImg, register } from "@/api/login";
import { getCodeImg, register } from '@/api/login';
export default {
name: "Register",
name: 'Register',
data() {
const equalToPassword = (rule, value, callback) => {
if (this.registerForm.password !== value) {
callback(new Error("两次输入的密码不一致"));
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
};
return {
codeUrl: "",
codeUrl: '',
registerForm: {
username: "",
password: "",
confirmPassword: "",
code: "",
uuid: ""
username: '',
password: '',
confirmPassword: '',
code: '',
uuid: ''
},
registerRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" },
{ required: true, trigger: 'blur', message: '请输入您的账号' },
{ min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" },
{ min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
{ pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
{ required: true, trigger: 'blur', message: '请输入您的密码' },
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
{ pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\\ |', trigger: 'blur' }
],
confirmPassword: [
{ required: true, trigger: "blur", message: "请再次输入您的密码" },
{ required: true, validator: equalToPassword, trigger: "blur" }
{ required: true, trigger: 'blur', message: '请再次输入您的密码' },
{ required: true, validator: equalToPassword, trigger: 'blur' }
],
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
},
loading: false,
captchaEnabled: true
@ -113,32 +89,36 @@ export default {
},
methods: {
getCode() {
getCodeImg().then(res => {
getCodeImg().then((res) => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.codeUrl = 'data:image/gif;base64,' + res.img;
this.registerForm.uuid = res.uuid;
}
});
},
handleRegister() {
this.$refs.registerForm.validate(valid => {
this.$refs.registerForm.validate((valid) => {
if (valid) {
this.loading = true;
register(this.registerForm).then(res => {
const username = this.registerForm.username;
this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
dangerouslyUseHTMLString: true,
type: 'success'
}).then(() => {
this.$router.push("/login");
}).catch(() => {});
}).catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
})
register(this.registerForm)
.then((res) => {
const username = this.registerForm.username;
this.$alert("<font color='red'>恭喜你，您的账号 " + username + ' 注册成功！</font>', '系统提示', {
dangerouslyUseHTMLString: true,
type: 'success'
})
.then(() => {
this.$router.push('/login');
})
.catch(() => {});
})
.catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
});
}
});
}
@ -152,7 +132,7 @@ export default {
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-image: url('../assets/images/login-background.jpg');
background-size: cover;
}
.title {

5
vue.config.js
View File

@ -7,7 +7,7 @@ function resolve(dir) {
const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
const name = process.env.VUE_APP_TITLE || '天然气工具' // 网页标题
const port = process.env.port || process.env.npm_config_port || 80 // 端口
@ -26,7 +26,8 @@ module.exports = {
// 是否开启eslint保存检测，有效值：ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// productionSourceMap: true,
productionSourceMap: true,
transpileDependencies: ['quill'],
// webpack-dev-server 相关配置
devServer: {