孔板计算天然气计算界面调整，修改系统logo
This commit is contained in:
parent
1014740818
commit
5e3e004e4f
@ -1,10 +1,10 @@
|
||||
# 页面标题
|
||||
VUE_APP_TITLE = 若依管理系统
|
||||
VUE_APP_TITLE = 天然气工具系统
|
||||
|
||||
# 开发环境配置
|
||||
ENV = 'development'
|
||||
|
||||
# 若依管理系统/开发环境
|
||||
# 天然气工具系统/开发环境
|
||||
VUE_APP_BASE_API = '/dev-api'
|
||||
|
||||
# 路由懒加载
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# 页面标题
|
||||
VUE_APP_TITLE = 若依管理系统
|
||||
VUE_APP_TITLE = 天然气工具系统
|
||||
|
||||
# 生产环境配置
|
||||
ENV = 'production'
|
||||
|
||||
# 若依管理系统/生产环境
|
||||
# 天然气工具系统/生产环境
|
||||
VUE_APP_BASE_API = '/prod-api'
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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
BIN
src/assets/images/logo (2)(1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
src/assets/images/logo (2).png
Normal file
BIN
src/assets/images/logo (2).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 684 KiB |
BIN
src/assets/images/logo.png
Normal file
BIN
src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 680 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 5.4 KiB |
BIN
src/assets/logo/logo11.png
Normal file
BIN
src/assets/logo/logo11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
||||
@ -7,6 +8,7 @@
|
||||
</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(path)
|
||||
this.$router.push(redirect);
|
||||
return;
|
||||
}
|
||||
this.$router.push(path);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,143 +1,149 @@
|
||||
<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>
|
||||
|
||||
@ -153,57 +159,102 @@
|
||||
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,
|
||||
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: [],
|
||||
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
|
||||
};
|
||||
},
|
||||
@ -212,7 +263,7 @@
|
||||
value: {
|
||||
deep: true,
|
||||
handler(newVal) {
|
||||
console.log(newVal)
|
||||
// console.log(newVal);
|
||||
for (const key in newVal) {
|
||||
if (newVal.hasOwnProperty(key)) {
|
||||
const value = newVal[key];
|
||||
@ -224,17 +275,15 @@
|
||||
}
|
||||
}
|
||||
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)
|
||||
})
|
||||
|
||||
if (this.selectWidth === 0) this.selectWidth = 180;
|
||||
// console.log('wwww', this.selectWidth);
|
||||
});
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
@ -245,14 +294,17 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.total-input>>>.el-input__inner {
|
||||
.total-input >>> .el-input readonly__inner {
|
||||
font-weight: bold;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
@ -1,75 +1,115 @@
|
||||
<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>
|
||||
|
||||
@ -114,7 +154,31 @@
|
||||
|
||||
data() {
|
||||
return {
|
||||
meterResult: [],
|
||||
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
|
||||
};
|
||||
},
|
||||
@ -123,7 +187,7 @@
|
||||
value: {
|
||||
deep: true,
|
||||
handler(newVal) {
|
||||
console.log(newVal)
|
||||
console.log(newVal);
|
||||
for (const key in newVal) {
|
||||
if (newVal.hasOwnProperty(key)) {
|
||||
const value = newVal[key];
|
||||
@ -135,17 +199,15 @@
|
||||
}
|
||||
}
|
||||
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)
|
||||
})
|
||||
|
||||
if (this.selectWidth === 0) this.selectWidth = 180;
|
||||
console.log('wwww', this.selectWidth);
|
||||
});
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
|
||||
@ -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>
|
||||
@ -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,9 +28,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listSysUnitConvert
|
||||
} from '@/api/system/sysUnitConvert.js';
|
||||
import { listSysUnitConvert } from '@/api/system/sysUnitConvert.js';
|
||||
|
||||
export default {
|
||||
name: 'UnitConverter',
|
||||
@ -92,7 +96,6 @@
|
||||
});
|
||||
// 在挂载时添加全局点击事件监听器
|
||||
document.addEventListener('click', this.handleClickOutside);
|
||||
|
||||
},
|
||||
beforeUnmount() {
|
||||
// 在组件销毁前移除全局点击事件监听器
|
||||
@ -174,17 +177,15 @@
|
||||
// 监听输入值变化
|
||||
value(newVal) {
|
||||
if (!this.isInternalUpdate) {
|
||||
|
||||
// 外部更新时重置原始值
|
||||
this.originalValue = (newVal === "NaN" ? 0 : newVal);
|
||||
this.originalValue = newVal === 'NaN' ? 0 : newVal;
|
||||
this.originalUnit = this.currentUnit;
|
||||
this.inputValue = (newVal === "" ? 0 : newVal);
|
||||
this.inputValue = newVal === '' ? 0 : newVal;
|
||||
}
|
||||
this.isInternalUpdate = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
selectAllText(event) {
|
||||
// 通过 event.target 获取触发事件的 input 元素
|
||||
const input = event.target;
|
||||
@ -214,9 +215,8 @@
|
||||
},
|
||||
|
||||
updateInputWidth() {
|
||||
|
||||
const spanWidth = this.$refs.unitLabel.offsetWidth + 5;
|
||||
console.log("widht", this.width, "spanWidth", spanWidth)
|
||||
// console.log("widht", this.width, "spanWidth", spanWidth)
|
||||
this.inputWidth = this.width - spanWidth;
|
||||
},
|
||||
// 处理全局点击事件
|
||||
@ -228,7 +228,6 @@
|
||||
// 切换单位选择器的显示状态
|
||||
toggleUnitSelector() {
|
||||
this.showUnitSelector = !this.showUnitSelector;
|
||||
|
||||
},
|
||||
// 加载单位数据
|
||||
async loadUnits(unitType) {
|
||||
@ -281,7 +280,6 @@
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// 选择单位
|
||||
selectUnit(unit) {
|
||||
this.currentUnit = unit;
|
||||
|
||||
@ -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>
|
||||
@ -2,9 +2,12 @@
|
||||
<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'">
|
||||
<search id="header-search" class="right-menu-item" />
|
||||
@ -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(() => {
|
||||
})
|
||||
.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;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<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" />
|
||||
@ -14,8 +18,8 @@
|
||||
</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>
|
||||
|
||||
@ -12,28 +12,23 @@
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
<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"]),
|
||||
...mapState(['settings']),
|
||||
...mapGetters(['sidebarRouters', 'sidebar']),
|
||||
activeMenu() {
|
||||
const route = this.$route;
|
||||
const { meta, path } = route;
|
||||
|
||||
@ -29,17 +29,14 @@ import Layout from '@/layout'
|
||||
*/
|
||||
|
||||
// 公共路由
|
||||
export const constantRoutes = [
|
||||
{
|
||||
export const constantRoutes = [{
|
||||
path: '/redirect',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
children: [
|
||||
{
|
||||
children: [{
|
||||
path: '/redirect/:path(.*)',
|
||||
component: () => import('@/views/redirect')
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
@ -65,102 +62,109 @@ export const constantRoutes = [
|
||||
path: '',
|
||||
component: Layout,
|
||||
redirect: 'index',
|
||||
children: [
|
||||
{
|
||||
children: [{
|
||||
path: 'index',
|
||||
component: () => import('@/views/index'),
|
||||
name: 'Index',
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true }
|
||||
meta: {
|
||||
title: '首页',
|
||||
icon: 'dashboard',
|
||||
affix: true
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
redirect: 'noredirect',
|
||||
children: [
|
||||
{
|
||||
children: [{
|
||||
path: 'profile',
|
||||
component: () => import('@/views/system/user/profile/index'),
|
||||
name: 'Profile',
|
||||
meta: { title: '个人中心', icon: 'user' }
|
||||
meta: {
|
||||
title: '个人中心',
|
||||
icon: 'user'
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
]
|
||||
|
||||
// 动态路由，基于用户权限动态去加载
|
||||
export const dynamicRoutes = [
|
||||
{
|
||||
export const dynamicRoutes = [{
|
||||
path: '/system/user-auth',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['system:user:edit'],
|
||||
children: [
|
||||
{
|
||||
children: [{
|
||||
path: 'role/:userId(\\d+)',
|
||||
component: () => import('@/views/system/user/authRole'),
|
||||
name: 'AuthRole',
|
||||
meta: { title: '分配角色', activeMenu: '/system/user' }
|
||||
meta: {
|
||||
title: '分配角色',
|
||||
activeMenu: '/system/user'
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/system/role-auth',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['system:role:edit'],
|
||||
children: [
|
||||
{
|
||||
children: [{
|
||||
path: 'user/:roleId(\\d+)',
|
||||
component: () => import('@/views/system/role/authUser'),
|
||||
name: 'AuthUser',
|
||||
meta: { title: '分配用户', activeMenu: '/system/role' }
|
||||
meta: {
|
||||
title: '分配用户',
|
||||
activeMenu: '/system/role'
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/system/dict-data',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['system:dict:list'],
|
||||
children: [
|
||||
{
|
||||
children: [{
|
||||
path: 'index/:dictId(\\d+)',
|
||||
component: () => import('@/views/system/dict/data'),
|
||||
name: 'Data',
|
||||
meta: { title: '字典数据', activeMenu: '/system/dict' }
|
||||
meta: {
|
||||
title: '字典数据',
|
||||
activeMenu: '/system/dict'
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/monitor/job-log',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['monitor:job:list'],
|
||||
children: [
|
||||
{
|
||||
children: [{
|
||||
path: 'index/:jobId(\\d+)',
|
||||
component: () => import('@/views/monitor/job/log'),
|
||||
name: 'JobLog',
|
||||
meta: { title: '调度日志', activeMenu: '/monitor/job' }
|
||||
meta: {
|
||||
title: '调度日志',
|
||||
activeMenu: '/monitor/job'
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
{
|
||||
path: '/tool/gen-edit',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['tool:gen:edit'],
|
||||
children: [
|
||||
{
|
||||
children: [{
|
||||
path: 'index/:tableId(\\d+)',
|
||||
component: () => import('@/views/tool/gen/editTable'),
|
||||
name: 'GenEdit',
|
||||
meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
|
||||
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
|
||||
})
|
||||
|
||||
1186
src/views/index.vue
1186
src/views/index.vue
File diff suppressed because it is too large
Load Diff
@ -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" />
|
||||
</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,
|
||||
// 验证码开关
|
||||
@ -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,21 +101,24 @@ 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.$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 {
|
||||
|
||||
@ -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,9 +21,6 @@
|
||||
|
||||
<div v-if="isShowMessage" class="message-box">{{ message }}</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -32,10 +29,7 @@
|
||||
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',
|
||||
@ -44,7 +38,6 @@
|
||||
ngComponents,
|
||||
meterResult,
|
||||
NGResult
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -90,7 +83,7 @@
|
||||
dVFlowWorkUnit: 0,
|
||||
dMFlowUnit: 0,
|
||||
dEFlowUnit: 6,
|
||||
dCd: 0,
|
||||
dCd: 0.9957,
|
||||
dCdCalMethod: 0,
|
||||
dMeterFactor: 2354,
|
||||
dPulseNum: 12000,
|
||||
@ -108,7 +101,7 @@
|
||||
},
|
||||
|
||||
parentMeterResult: {
|
||||
dE: 10,
|
||||
dE: 0,
|
||||
dFG: 0,
|
||||
dFT: 0,
|
||||
dDViscosity: 0,
|
||||
@ -118,69 +111,81 @@
|
||||
dRoughNessPipe: 0,
|
||||
dCdCorrect: 0,
|
||||
dCdNozell: 0,
|
||||
dVFlowb: 100,
|
||||
dVFlowf: 100,
|
||||
dVFlowb: 0,
|
||||
dVFlowf: 0,
|
||||
dVFlowUnit: 2,
|
||||
dMFlowb: 44,
|
||||
dMFlowb: 0,
|
||||
dMFlowUnit: 0,
|
||||
dEFlowb: 33,
|
||||
dEFlowb: 0,
|
||||
dEFlowUnit: 0,
|
||||
dVelocityFlow: 3,
|
||||
dVelocityUnit: 1,
|
||||
dPressLost: 300,
|
||||
dVelocityFlow: 0,
|
||||
dVelocityUnit: 0,
|
||||
dPressLost: 0,
|
||||
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,
|
||||
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: ''
|
||||
componentString: '',
|
||||
dMeterType: ''
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
created() {
|
||||
// 获取路由的查询参数
|
||||
let params = this.$route.query;
|
||||
|
||||
this.dMeterType = params.dMeterType;
|
||||
console.log(params, this.dMeterType);
|
||||
setTimeout(function () {
|
||||
this.parentMeterPar.dMeterType = this.dMeterType;
|
||||
}, 500);
|
||||
},
|
||||
methods: {
|
||||
showMessage() {
|
||||
this.isShowMessage = true;
|
||||
@ -190,10 +195,22 @@
|
||||
},
|
||||
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"
|
||||
this.parentNGResult = res.data;
|
||||
this.activeTab = 'meterresult';
|
||||
console.log('Response:', res);
|
||||
})
|
||||
.catch((error) => {
|
||||
@ -202,10 +219,10 @@
|
||||
},
|
||||
calcFlow() {
|
||||
console.log(this.parentMeterPar);
|
||||
if (this.parentMeterPar.dngComponents === "") {
|
||||
this.message = "组分为空，请输入天然气组分!"
|
||||
this.showMessage()
|
||||
this.activeTab = "ngComponents"
|
||||
if (this.parentMeterPar.dngComponents === '') {
|
||||
this.message = '组分为空，请输入天然气组分!';
|
||||
this.showMessage();
|
||||
this.activeTab = 'ngComponents';
|
||||
return;
|
||||
}
|
||||
// 遍历对象并将每个属性的值设置为零
|
||||
@ -218,7 +235,7 @@
|
||||
.then((res) => {
|
||||
this.parentMeterResult = res.data[0];
|
||||
console.log('Response:', this.parentMeterResult);
|
||||
this.activeTab = "meterresult"
|
||||
this.activeTab = 'meterresult';
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Request error:', error);
|
||||
|
||||
@ -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" />
|
||||
</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 => {
|
||||
register(this.registerForm)
|
||||
.then((res) => {
|
||||
const username = this.registerForm.username;
|
||||
this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
|
||||
this.$alert("<font color='red'>恭喜你，您的账号 " + username + ' 注册成功！</font>', '系统提示', {
|
||||
dangerouslyUseHTMLString: true,
|
||||
type: 'success'
|
||||
}).then(() => {
|
||||
this.$router.push("/login");
|
||||
}).catch(() => {});
|
||||
}).catch(() => {
|
||||
})
|
||||
.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 {
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user