ruoyi-ui/src/views/index.vue

<template>
  <div class="container">
    <!-- 顶部区域 -->
    <div class="top"><h2>天然气工具系统 简要说明</h2></div>
    <hr style="border: 1px solid #ccc; margin: 20px 0" />
    <!-- <el-divider></el-divider> -->
    <div class="middle">
      <!-- 左侧区域 -->
      <div class="left"></div>
      <!-- 右侧区域 -->
      <div class="right">
        <div class="content" style="overflow-y: auto; height: calc(100vh - 230px)">
          <p>
            天然气工具系统 是一款采用 vue
            2和springboot前后端分离技术开发的网页版天然气计量计算和专业信息的专业软件。借助先进的前端框架，提供更流畅、便捷的操作体验，无需安装，通过网页即可直接使用。
          </p>

          <h2>主要功能</h2>
          <ol>
            <li>多类型流量计流量计算：支持标准孔板、速度式、容积式和临界流文丘利喷嘴流量计的流量计算，严格依据相关标准和规程，确保计算结果的准确性和可靠性。</li>
            <li>
              系数修正方法多样：在流量计算过程中，可灵活使用校准提供的流量计系数、仪表系数（适用于速度式和容积式流量计）、流出系数（针对标准孔板和临界流文丘利喷嘴）进行修正。对于标准孔板，还支持多种流出系数标准公式，满足不同场景的计算需求。
            </li>
            <li>流量单位换算：提供标准参比条件下体积流量、工作条件下体积流量、质量流量和标准参比条件下能量流量的换算功能，方便用户在不同流量单位之间进行快速转换。</li>
            <li>物性参数计算丰富：具备多种计算标准参比条件下物性参数、工作条件下压缩因子和密度、等熵指数和临界流函数等物性参数的方法，为天然气流量计算提供全面的数据支持。</li>
          </ol>

          <h3>计算选择</h3>
          <ul>
            <li>物性参数计算：在系统设置框中，可从参比条件下拉式选择框中选择合适的标准参比条件，从压缩因子和等熵指数下拉式选择框中选择相应的计算方法，以满足不同的计算需求。</li>
            <li>
              流量计算：选择流量计算单选按钮后，根据所选的流量计类型，按要求输入天然气和流量计数据，选择合适的流出系数计算方法，输入温度、压力等相关数据，然后按计算按钮或从系统文件菜单中选择开始计算项目，即可完成流量计算。
            </li>
            <li>
              流量换算：选择流量换算单选按钮，按上述方法选择标准参比条件和压缩因子计算方法，输入天然气数据和温度、压力、大气压、流量等数据，点击计算按钮或从菜单选择开始计算项目，即可进行流量换算。
            </li>
          </ul>
          <h3>结果输出</h3>
          <p>
            计算结果支持显示、打印和保存三种方式。显示结果会在指定的文本框中呈现，用户可清晰查看计算结果；通过系统文件菜单中的打印计算结果子菜单，可选择需要打印的内容进行打印；选择保存计算结果子菜单，可选择保存内容、文件格式和文件名，将计算结果保存到指定位置。
          </p>

          <h2>注意事项</h2>
          <ul>
            <li>
              本软件计算方法严格遵循相关国家和行业标准，计算结果与标准中的计算示例结果的偏差均在标准允许的范围内，但开发者不承担因直接或间接使用本软件所引起的经济和安全责任。
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部区域 -->
    <div class="bottom">
      <p style="color: blue; font-size: 14px">妍杰丽云工作室版权所有 &copy; ----- 基于若依管理框架系统 V3.8.9</p>
    </div>
  </div>
</template>

<script>
import { calcNGPar } from '@/api/ngtools/NGCalcTools';
import { listSysUnitConvert } from '@/api/system/sysUnitConvert.js';
export default {
  name: 'Index',
  data() {
    return {
      // 版本号
      version: '3.8.9'
    };
  },
  onload() {
    this.loadUnits();
  },
  methods: {
    loadUnits() {
      console.log(0);
      listSysUnitConvert({
        // unitType: unitType,
        status: 'Y'
      })
        .then((res) => {
          // 检查 res 是否为有效对象且包含 rows 属性
          if (res && res.rows) {
            console.log('未找到 baseUnit 为 Y 的单位数据');
            this.unitData = res.rows;
            // 检查 unitData 是否为有效数组
            if (Array.isArray(this.unitData)) {
              this.baseUnit = this.unitData.find((u) => u.baseUnit === 'Y');
              // 检查 baseUnit 是否找到
              if (this.baseUnit) {
                // console.log(this.baseUnit.unitName);
              } else {
                console.log('未找到 baseUnit 为 Y 的单位数据');
              }
            } else {
              console.log('unitData 不是有效的数组');
            }
          } else {
            console.log('响应数据格式不正确，缺少 rows 属性');
          }
        })
        .catch((e) => {
          console.error('单位数据加载失败:', e);
        });
    },
    goTarget(href) {
      window.open(href, '_blank');
    }
  }
};
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100px);
}

.top {
  height: 30px;
  text-align: center;
  /* background-color: #f0f0f0; */
}

.bottom {
  height: 30px;
  text-align: center;
  vertical-align: top;
  /* background-color: #f0f0f0; */
}

.middle {
  display: flex;
  flex: 1; /* 中间区域占满剩余空间 */
}

.left {
  width: 75%;
  /* background-color: #e0e0e0; */
}

.right {
  width: 25%;
  /* background-color: #d0d0d0; */
}

/* 美化 .content 部分的样式 */
.content {
  font-size: 14px; /* 缩小字体 */
  line-height: 1.6; /* 调整行高，增强可读性 */
  padding: 20px; /* 添加内边距，使内容不紧贴边框 */
}

.content p {
  text-indent: 2em; /* 首行缩进2个字符 */
  margin-bottom: 10px; /* 段落底部间距 */
}

.content h2,
.content h3 {
  margin-top: 20px; /* 标题顶部间距 */
  margin-bottom: 10px; /* 标题底部间距 */
}

.content ol,
.content ul {
  padding-left: 20px; /* 列表左侧内边距 */
}

.content li {
  margin-bottom: 8px; /* 列表项底部间距 */
}
</style>