jihe-hs/ruoyi-ui/README.md

<!--
 * @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" />
  {
    key: "ServiceAreaAbnormal", //唯一标识 一般tabs才需要
    label: "服务区异常",//表单标题
    formConfig: {
      formOptions: {//element中表单配置参数
        column: 2, //一行放多少元素(基于:style grid布局实现)
      },
      list: [//FormItem定义
        {
          label: "异常分类:",
          key: "eventSubclass",
          type: "RadioGroup",
          isAlone: true,
          required: true,
          options: {
            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
            options: [
              {
                key: "8-1",
                label: "封闭、暂停营业",
              },
              {
                key: "8-2",
                label: "重要设施停用",
              },
              {
                key: "8-3",
                label: "其他异常",
              },
            ],
          },
        },
        PresetFormItems.freeway,
        PresetFormItems.direction,
        {
          label: "服务区:",
          key: "dcEventServiceArea.facilityId",
          type: "select",
          isAlone: true,
          required: true,
          options: {
            options: [
              {
                value: "选项1",
                label: "黄金糕",
              },
            ],
          },
        },
        {
          label: "出入口:",
          key: "dcEventServiceArea.exitsInlets",
          type: "RadioGroup",
          isAlone: true,
          required: true,
          options: {
            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
            options: [
              {
                key: "1",
                label: "出口",
              },
              {
                key: "2",
                label: "入口",
              },
            ],
          },
        },
        PresetFormItems.startTime,
        PresetFormItems.expectedEndTime,
        PresetFormItems.remark,
        PresetFormItems.source,
      ],
    },
  }

FormItem属性介绍:

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为传入的配置项
        mileCal(data);
      }
    },
};

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);
                    }
                  },
                },
              ],
            }
          })