# 综合平台模版

**Repository Path**: mofei-0109/Support_System_Web

## Basic Information

- **Project Name**: 综合平台模版
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-21
- **Last Updated**: 2024-10-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 项目

- 林草综合管理平台
- 账号: admin
- 密码: Suntoon@123

#### 项目文件介绍

- `public` 目录：静态资源目录
- `src` 目录：源码目录
  - `src/assets` 目录：存放静态资源，一般存放图片、字体等静态文件
    - `src/assets/css` 目录：存放公共样式以及 scss 文件
    - `src/assets/icon` 目录：存放 svg 图标文件
    - `src/assets/images` 目录：存放图片文件
- `src/common` 目录：存放公共方法

  - `src/common/common-const.js` 文件:存放变量命名
  - `src/common/common-crypto.js` 文件:密码加密方法
  - `src/common/common-loading.js` 文件:加载状态方法

  ```
  import { load } from '@/common/common-loading';

   打开=load.show();
   关闭=load.hide()
  ```

- `src/components` 目录：存放公共组件

  - `src/components/SvgIconIndex` 组件：svg 图标组件

  ```
   <SvgIconIndex
          icon-class="client" //svg名称(存放 svg 图标文件里面的名称)
          size="28px"  //大小
          color="#333" //颜色
    />
  ```

  - `src/components/ReleasePromptMessage` 组件: 提示弹窗组件
  - `src/components/PaginationIndex` 组件: 分页组件
  - `src/components/BorderBoxBg` 组件: 边框背景组件
  - `src/components/MapIndex` 组件: 地图组件
  - `src/components/ReImageVerify` 组件: 图形验证码组件
  - `src/components/MapAttribute` 目录: 属性查询
  - `src/components/MapBaseLayer` 目录: 底图切换
  - `src/components/MapBufferAnalysis` 目录: 数据切割
  - `src/components/MapCompare` 目录: 卷帘
  - `src/components/MapCoverAnalysis` 目录: 占地分析
  - `src/components/MapBufferAnalysis` 目录: 缓冲区分析
  - `src/components/MapMeasure` 目录: 测量(点/线/面)
  - `src/components/MapPoints` 目录: 切换坐标系
  - `src/components/MapResultInfo` 目录: 属性查询结果展示
  - `src/components/MapTermingQuery` 目录: 条件查询
  - `src/components/MapThermalAnalysis` 目录: 热力图分析

- `src/plugins/plugins-set-rem.js` 文件:改变窗口大小时重新设置 rem
- `src/router` 目录：存放路由配置

  - [ ] **备注:** _该项目路由是动态路由，根据用户权限动态加载路由，具体实现请参考`src/router/index.js`和`scripts/generateBizConfig.js`文件。_ 同时每个模块的路由都对应写在每个模块的文件夹下面，如`src/pages/module-biology-system/routes.js`文件中定义了`生物多样性系统`模块的路由。

- `src/pages` 目录：存放页面组件

  - `src/pages/module-launch` 模块: 首页导航模块
  - `src/pages/module-login` 模块: 登录模块
  - `src/pages/module-personal-center` 模块: 个人中心模块
  - `src/pages/module-base-system` 模块: 基础系统模块
  - `src/pages/module-biology-system` 模块: 生物多样性系统模块
  - `src/pages/module-fire-system` 模块: 森林防火预警模块
  - `src/pages/module-grid-system` 模块: 林长网格系统模块
  - `src/pages/module-pest-system` 模块: 有害生物监测预警模块
  - `src/pages/module-resource-system` 模块: 林草资源可视化管理模块
  - `src/pages/module-sprout-system` 模块: 林木种苗管理系统管理模块
  - `src/pages/module-tanhui-system` 模块: 林草湿碳汇计量监测系统管理模块
  - `src/pages/module-tuigenghuanli-system` 模块: 退耕还林管理系统管理模块
  - `src/pages/module-uav-system` 模块: 无人机管理系统管理模块
  - `src/pages/module-ylxm-system` 模块: 营林项目管理系统管理模块
  - `src/pages/module-zhongZhi-system` 模块: 种质资源管理系统管理模块

- `src/store` 目录：存放状态管理
- `src/utils` 目录：存放工具类(基本都是地图相关的工具类)
- `src/App.vue` 入口组件
- `src/main.js` 入口文件
- `index.html` 入口 html 文件
- `.env` 环境变量配置文件
- `.gitignore` git 忽略文件
- `vite.config.js` vite 配置文件
- `unocss.config.js` unocss 配置文件
- `README.md` 项目说明文件
- `package.json` 项目依赖配置文件
- `package-lock.json` 项目依赖锁定文件

### 地图 MapIndex 组件

- `mapId`: 地图的唯一标识
- `mapRoles`: 地图的权限 ['初始化位置','当前位置','zoom', '属性查询','条件查询','测量','二三维切换','气象监测','图层','比例尺','底图切换']
- `toolbarPosition`: 工具栏位置
- `toolbarRight`: 工具栏内容位置
- `plugins`: 地图自定义插件
- `mapLoadCallBack`: 地图初始化后加载回调函数 会传递 map 实例
- `compareDataRequest`: 用于获取数据对比数据
- `mapPluginCheckChange`: 地图插件状态改变回调函数 会传递当前插件状态

```
const mapRef = ref(null);

const mapPlugins = ref([
  {
    role: '热力图',
    component: markRaw({
      render: () => {
        return h(
          'div',
          {
            class: 'tool-item layer-item',
            title: '热力图',

            onClick: handleQuery,
          },
          [
            h(SvgIconIndex, {
              iconClass: '热力图分析',
              size: '20',
              class: 'cursor-pointer',
              title: '热力图分析',
              color: '#c9e2fa',
            }),
          ],
        );
      },
    }),
  },
]);

const handleQuery = () => {
  mapRef.value.changeShowUtil('plugin-show', true);
};

// 插件点击切换状态的事件
const handlePluginCheckChange = (key) => {
  if (key != 'plugin-show') {
    thermodynamicShow.value = false;
  } else {
    thermodynamicShow.value = true;
  }
};

<MapIndex
      ref="mapRef"
      :map-id="'map-zhongZhi'"
      :plugins="mapPlugins"
      :map-roles="['图层', '']"
      :toolbar-position="toolbarPosition"
      :toolbar-right="toolbarRight"
      @map-plugin-check-change="handlePluginCheckChange"
    />

```

#### 下载依赖

```
npm install
```

#### 启动服务

```
npm run dev
```

#### 项目打包

```
npm run build
```

提交信息应遵守以下规范：

```bash
"[HEAD] 详细信息"
```

其中 **详细信息** 应尽可能详细，要能说明问题，`[HEAD]` 可取：

```
[初始化]
[依赖]
[文档]
[功能]
[修复]
[优化]
```

示例：

```
[初始化] 项目初始化
[依赖] 添加 AntDesign React UI 组件库
[功能] 新添加登陆页面
[功能] 登录页面添加登录信息校验流程
[修复] 主界面白屏修复
```

#### git 提交方案

- 多人协作的情况下，提交 git 的时候就会出现提交分支混乱的情况，为避免这样情况，可以使用如下方案进行提交，可以避免很多意外情况。

```
git add -A
git commit -m "[描述]"
git pull --rebase

```

1. 执行完 git pull --rebase 后如果有 succeed 字样，就表示没有冲突，直接 git push

2. 执行完 git pull --rebase`后如果有冲突，本地如果有冲突，手动解决冲突后：

```
git add -A
git rebase --continue ，// 可以线性的连接本地分支与远程分支，无误之后就退出，回到主分支上。
git push
```

- git 忽略换行符的变化（建议执行）

```
git config --global core.autocrlf input
```

- git 文件名的大小写敏感（建议执行）

```
git config --global core.ignorecase false
```

#### 项目功能简介

- `element-plus` element-plus UI 库，修改其主题样式可以在`src/assets/css/element-plus.scss`中进行自定义主题
- `lint-staged husky`:用于代码提交时进行`eslint prettier`代码校验，校验通过后，才能提交代码
- `package.json` 中 `engines`用来定义`node`版本，可根据自己的需要自行修改
- `.npmrc` 文件是用来约束 npm 的，`package.json` 中 `engines`只能限制`yarn`，所以需要这个文件配置
- `vite-plugin-vue-devtools` 可替代 `vue-devtools` ,还增加点击跳转代码功能
- `postcss-pxtorem` 用来将 css 中的 px 单位转换为 rem，`css in js`和行内样式无效
- `viteCompression` 用来配置开启 gzip 打包
- `rollup-plugin-visualizer` 用来打包时展示包大小细节
- `vue-hooks-plus` 一个多功能 hook 库，包含了非常多非常好的工具
- `lodash` 包含了多功能的 js 工具库
- `vue-router` vue 路由功能库
- `preinstall` 该命令是为了强制包管理器，这里使用的是 npm

#### 项目打包图片优化方案

- `vite-plugin-imagemin`:一个压缩图片资产的 vite 插件 （https://github.com/vbenjs/vite-plugin-imagemin）
- 但项目中并没有引入，因为国内下载极为不便，所以需要在电脑 host 文件加上如下配置：
- 199.232.4.133 raw.githubusercontent.com
- 加上配置后执行`npm i vite-plugin-imagemin -D`
- 在`vite.config`文件中加上插件配置：

```
import viteImagemin from 'vite-plugin-imagemin'

export default () => {
  return {
    plugins: [
      viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false,
        },
        optipng: {
          optimizationLevel: 7,
        },
        mozjpeg: {
          quality: 20,
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4,
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox',
            },
            {
              name: 'removeEmptyAttrs',
              active: false,
            },
          ],
        },
      }),
    ],
  }
}
```

#### 设计图地址

https://app.mockplus.cn/app/uUvu-QtHF/design