<!--
 * @Author: Praise-Sun 18053314396@163.com
 * @Date: 2023-02-24 08:36:42
 * @LastEditors: Praise-Sun 18053314396@163.com
 * @LastEditTime: 2023-02-24 08:41:34
 * @FilePath: \tunnel-ui\README.md
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: Praise-Sun 18053314396@163.com
 * @Date: 2022-12-16 15:10:19
 * @LastEditors: Praise-Sun 18053314396@163.com
 * @LastEditTime: 2023-02-24 08:30:24
 * @FilePath: \tunnel-ui\README.md
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
## 开发

```
  ruoyi版本号 3.7.0
```

```bash
# 克隆项目
git clone https://gitee.com/y_project/RuoYi-Vue

# 进入项目目录
cd ruoyi-ui

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

#新增视频流播放和gis地图
npm install --save @vue/composition-api
npm install gis-map-tunnel@0.1.3
#新增swiper轮播图
npm install swiper@^5.4.5
#新增精确计算
npm install mathjs

# 新安装阿里云iconfont图标库，文件地址src\assets\icon\iconfont.css
#新增树形穿梭框
npm install --save el-tree-transfer

# 启动服务
npm run dev
```

浏览器访问 <http://localhost:80>

## 发布

```bash
# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

# 新版gis地图
npm install gis-map-admin@0.9.2

# 新增 vue-resource 数据请求
npm install vue-resource --save

# 新增 视频 rtmp转码 
npm install vue-video-player -S
# 因为是播放rtmp格式流，需要安装 videojs-flash 插件，必须用npm安装！！！！！！
npm install video-flash --save
# 使用file-saver导出文件，下载Excel文件、下载图片、下载文本
npm install file-saver --save

```

## 开发教程

### Element Form 封装

PresetFormItems.js 里面封装了一些可以复用的表单项
data.js 表单封装,里面会使用PresetFormItems的一些FormItem.

Form表单属性介绍:
<Form labelWidth="90px" column="2" class="form" ref="FormConfigRef" :formList="formList" />
/*
  column:  一行放多少元素(基于:style grid布局实现)
  formList: 表单项(FormItem)配置集合
  v-model: 双向绑定的表单数据(可以获取到表单数据(同步表单数据this.$emit("update:value", this.formData)), 也可修改表单数据)
*/

FormItem属性介绍 & ons 事件监听:

export const additionalNotes = {
  label: "补充说明:", // 标题
  key: "eventSourceTips", //数据存储字段
  isAlone: true, //  单独一行
  required: true, //必填
  default: 5, //默认值
  type: "input", //组件类型(el-input 去掉el-即可) 不填默认为input
  options: {  //element原生formItem属性
    type: "textarea",
    autosize: true,
    maxlength: 150,
    autosize: { minRows: 6, maxRows: 6 },
    showWordLimit: true,
  },
  visible: data => { //现隐控制
    if (data.searchType == 1) {
        return true
    }
  },
  ons: { //on监听 element事件
      change(value, ...args) {
        const { data, formList } = args.slice(-1)\[0]; //data 为表单数据  formList为传入的配置项
        formList[4].options.options = []; //调整配置项 修改下拉框options选项
        this.$set(this.data, 'deviceState', undefined); //更新v-model双向绑定的表单数据
      }
    },
};

MultipleLabelItem是单独写的组件,事件需按如下配置:
 merge({}, PresetFormItems.startStation,
          {
            options: {
              options: [
                {
                  prefix: {
                    text: "K",
                    style: {
                      color: "#3DE8FF",
                    },
                  },
                  key: "startStakeMark[0]",
                  default: "55",
                  rules: [
                    {
                      message: "请补全桩号",
                      callback(value, data) {
                        console.log(value, data.startStakeMark);
                        if (
                          !((value + "")?.trim() && (data.startStakeMark[1] + "")?.trim())
                        )
                          return false;
                        else return true;
                      },
                    },
                  ],
                  ons: { //on监听 element事件
                    change(value, ...args) {
                      const { data, formList } = args.slice[-1](0); //data 为数据  formList为传入的配置项
                      data.deviceType && changeHandle(data, formList);
                    }
                  },
                },
                {
                  prefix: {
                    text: "+",
                    style: {
                      color: "#3DE8FF",
                    },
                  },
                  default: "378",
                  key: "startStakeMark[1]",
                  ons: { //on监听 element事件
                    change(value, ...args) {
                      const { data, formList } = args.slice[-1](0); //data 为数据  formList为传入的配置项
                      data.deviceType && changeHandle(data, formList);
                    }
                  },
                },
              ],
            }
          })