# cy_3d_ui

**Repository Path**: hanyuqq/cy_3d_ui

## Basic Information

- **Project Name**: cy_3d_ui
- **Description**: vue2+cesium.js--3D项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-30
- **Last Updated**: 2025-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# basaltic_system

全局控件 size 大小(已做全局控制，注意页面排版)

- 0 < window.innerWidth < 1024 : small
- 1024 <= window.innerWidth < 1440 : medium
- 1440 <= window.innerWidth < Infinity : large

## Build Setup

```bash
# install dependencies
npm install

# serve with hot reload at localhost:9200
npm start

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

## eslint

vscode 安装 eslint 的扩展，并在设置中添加如下配置

```
"eslint.options": {
  "extensions": [".js", ".vue"]
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue-html",
  {
    "language": "vue",
    "autoFix": true
  },
  {
    "language": "html",
    "autoFix": true
  }
],
"eslint.run": "onSave",
"eslint.autoFixOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}
```

## 页面路由

src/router/index.js 登陆时后台路由获取模拟 src/pages/treeDara.js

## 接口调用

1. this.atomAPI.xxx
2. src/service/appVersion.js => api 中的 url 中带有的版本信息
3. 其余路径安装接口文档结构组成

## 组件使用

element 组件照常使用，api 照常使用

## 自定义组件

src/components/custom 中有自定义组件，原则上不要修改，已被全局注册，无须在页面引
入，template 中直接使用即可，例如：AtomButton 组件在 template 中使用
\<atom-button>\</atom-button>

### **1 \<atom-text>\</atom-text>**

| 描述         | 属性或方法  |                                值                                |  类型  |  默认   |
| ------------ | :---------: | :--------------------------------------------------------------: | :----: | :-----: |
| 控制渲染标签 |    :ele     |                         span \| p \| div                         | String |   div   |
| 字体大小     |    :size    |          smaller \| small \| medium \| large \| larger           | String |
| 颜色预设     |    :type    | primary \| secondary \| placeholder \| success \| danger \| info | String | regular |
| 行高预设     | :lineHeight |               smaller \| small \| large \| larger                | String |

### **2 \<atom-button>\</atom-button>**

| 描述                  |                     属性或方法                      |            值             |           类型            | 默认 |
| --------------------- | :-------------------------------------------------: | :-----------------------: | :-----------------------: | :--: |
| 是否带有 loading 效果 |                     :hasLoading                     |       true \| false       |          Boolean          | true |
|                       | 除 loading 属性，其余所有属性与 element-ui 保持一致 |                           |
|                       |                       @click                        | cb => cb(none\|\|boolean) | Function(none\|\|Boolean) |

- 和 element-ui 中的 el-button 相比，除了 loading 属性，其余 api 均保持一致
- 点击事件仍然使用@click, 可以传入带布尔值参数的回调，布尔值控制 loading 的结束

### **3 \<atom-delete>\</atom-delete>**

| 描述                            |  属性或方法   |       值       |   类型   | 默认 |
| ------------------------------- | :-----------: | :------------: | :------: | :--: |
| 控制渲染 el-link 或者 el-button |     :ele      | button \| link |  String  | link |
| 是否允许执行弹出框              |    :allow     |  true\|false   | Boolean  | true |
| 不允许弹出时提示什么内容        | :allowMessage |                |  String  |      |
| 确认执行                        |   @confirm    |    () => {}    | Function |
| 取消执行                        |    @cancel    |    () => {}    | Function |

### **4 \<atom-dialog-trigger>\</atom-dialog-trigger>**

| 描述                                  |   属性或方法   |                       值                        |  类型  |                                    默认                                    |
| ------------------------------------- | :------------: | :---------------------------------------------: | :----: | :------------------------------------------------------------------------: |
| 控制渲染触发器 el-button 或者 el-link |      :ele      |                 button \| link                  | String |                                   button                                   |
| 触发器属性                            | :buttonOptions | 继承 el-button 或 el-link 的属性，由:ele 值决定 | Object |                                     {}                                     |
| 对话框属性                            | :dialogOptions |              继承 el-dialog 的属性              | Object |                                     {}                                     |
| 自定义按钮                            |    :buttons    |              继承 el-button 的属性              | Array  | [{ text: "取消", event: () => null }, { text: "确定", event: () => null }] |
| dialog 对应的 ref                     |      :ref      |                                                 | String |                                                                            |

- 自定义按钮中传入的 event 回调中有一个参数，布尔值，控制 dialog 对话框的关闭
- 外部可通过执行 this.\$refs.triggerRef.visible = false;控制 dialog 对话框的关闭

### **5 \<atom-button-group>\</atom-button-group>**

| 描述 | 属性或方法 |   值   |      类型      | 默认 |
| ---- | :--------: | :----: | :------------: | :--: |
| 间隙 |    :gap    | 0 \| 1 | String\|Number |  1   |

- 仅能包裹\<atom-button>\</atom-button>和
  \<atom-dialog-trigger>\</atom-dialog-trigger>

### **6 \<atom-space>\</atom-space>**

| 描述         |   属性或方法    |             值             |                           类型                            |    默认    |
| ------------ | :-------------: | :------------------------: | :-------------------------------------------------------: | :--------: |
| 排版方向     |   :direction    |   与 flex-direction 相同   |                          String                           |    row     |
| 间隙         |      :gap       | 数字 \| 两个数字组成的数组 | String \| Number \| Array[Number\|String, Number\|String] |     6      |
| 是否换行     |      :wrap      |     与 flex-wrap 相同      |                          String                           |   nowrap   |
| 主轴排列方式 | :justifyContent |  与 justify-content 相同   |                          String                           | flex-start |
| 副轴对齐方式 |   :alignItems   |    与 align-items 相同     |                          String                           |   center   |

- 能包裹所有标签
- 能通过/^\d+\$/正则校验的数字或字符串，或数组[a, b]且 a, b 都必须是通过/^\d+\$/
  正则校验的数字或字符串

### **7 \<atom-form>\</atom-form>**

| 描述         | 属性或方法  | 值  |  类型   |  默认   |
| ------------ | :---------: | :-: | :-----: | :-----: |
| 表单 ref     |  :formRef   |     | String  | formRef |
| 配置         |    :form    |     |  Array  |   []    |
| 分列         |    :col     |     | Number  |    1    |
| loading 状态 |  :loading   |     | Boolean |  false  |
| label 宽度   | :labelWidth |     | Number  |   80    |
| 表单操作按钮 |  :buttons   |     |  Array  |   []    |

- :form 结构如下

```
{
  label: String, // label名称
  /*
  * 渲染表单type类型:
  * input     =>  <el-input></el-input>
  * select    =>  <el-select></el-select>
  * radio     =>  <el-radio></el-radio>
  * checkbox  =>  <el-checkbox></el-checkbox>
  * datetime  =>  <el-date-picker type='datetime'></el-date-picker>
  * date      =>  <el-date-picker></el-date-picker>
  * time      =>  <el-time-picker></el-time-picker>
  * textarea  =>  <el-input type='textarea'></el-input>
  */
  type: String,
  key: String, // 表单项key
  defaultValue: String|Array, // 表单项默认值，checkbox的默认值是value组成的数组
  placeholder: String, // placeholder
  options: Array, // 当type='Array'时渲染的select下的options选项, {label: '', value: ''}
  groupOptions: Boolean, // options是否分组显示，与此同时options的数据结构需要相应改变
  rules: Array, // 表单校验配置
  nextRow: Boolean, // 是否在此换行
  span: Number, // 表单项宽度占几列
  display: Boolean, // 是否显示或隐藏
}
```

- 其余属性集成 element，例如 type='textarea'如下

```
{
  maxlength：Number,
  rows：Number,
  "show-word-limit": Boolean,
  multiple: Boolean, //默认collapse-tags的值与multiple保持一致
}
```

- option 的禁用状态：在 label 和 value 属性之外，传入 disabled(Boolean)即可

### **8 \<atom-descriptions>\</atom-descriptions>**

| 描述                                                   | 属性或方法 | 值  |  类型  | 默认 |
| ------------------------------------------------------ | :--------: | :-: | :----: | :--: |
| 分列                                                   |    :col    |     | Number |  3   |
| 数据来源                                               |   :data    |     | Object |  {}  |
| 结构，与表单的配置:form 一样的结构，甚至就是同一个数据 |  :config   |     | Array  |  []  |

- 其余属性集成 element-ui 的\<el-descriptions>\</el-descriptions>

### **9 \<atom-sat-select><atom-sat-select/>**

| 描述               |                属性或方法                 | 值  |   类型   |   默认    |
| ------------------ | :---------------------------------------: | :-: | :------: | :-------: |
| 修改当前选择的卫星 | this.\$store.commit("SET_SAT_ACTIVE", Object) |     |          |           |
| 卫星变动回调       |              @change="event"              |     | function |           |
| 获取已选卫星 code  |     this.\$store.getters.getSatActive     |     |  String  | undefined |
| 获取已选卫星信息   |       this.\$store.state.satActive        |     |  Object  |    {}     |
| 已选卫星是否存入vuex|             relativeVuex                 |     |  Boolean  |    true    |

- 在 event 回调方法中,如有需要可选择接收 event(value,item)参数,其中 value 与
  this.\$store.getters.getSatActive 一致， item 为已选的卫星对象属性。

### **10 \<atom-tree>\</atom-tree>**

| 描述         | 属性或方法 | 值  |   类型   |      默认      |
| ------------ | :--------: | :-: | :------: | :------------: |
| 节点点击事件 |   @click   |     | Function | data => (data) |

- 点击事件中的参数为节点的 data，其中 data.category 可以区分是分系统或者单机设备

### **10 \<atom-search>\</atom-search>**
- 封装的公共搜索组件,统一优化处理了回车搜索事件;

| 描述         |   属性或方法    | 值  |   类型   |                默认                |
| ------------ | :-------------: | :-: | :------: | :--------------------------------: |
| 搜索处理方法 |     :action     |     | Function |          condition => () //会将条件传处理函数          |
| 搜索条件类型(可选)     | :conditionsType |     |  Array   | [] //[{label:'标签',value:'some'}] |
| 过滤类型(like,equal...)     | :filterType |  'like'   |  String   | 'like' |

### **11 \<atom-select-popup><atom-select-popup/>**

| 描述                    |       属性或方     | 值  |   类型    |   默认    |
| ---------------------- | :---------------: | :-: | :------:  | :-------: |
| 需要筛选的数组           |       dataList     |     |    Array  |    []     |
| 是否显示需要选择的code值  |      isShowCode    |     | Boolean   |   false  |
| 传入的属性值            |       defaultProps  |     |  Object  | {label: "name",value: "id",code: "code"} |
| 弹窗出现位置            |       placement     |     |  String  |    bottom   |
| 选择框左侧的名字          |      title        |     |  String  |    ''     |
| 默认提示                |       placeholder  |     |  String  |    请选择     |
| 是否可以删除选择的值      |       deleteShow   |     |  Boolean  |    true     |
| 整个选择框的宽度         |       width        |     |  String  |    100%(接收width所以属性,例如200px)  |
| 选择变动回调             |  @change="event"   |     |  function  |         |


- 在 defaultProps 参数中,name为显示的值,value为唯一标识或者需要返回的值,code为显示的副值,
在回调@change绑定方法后,第一个值为传入的value值,第二个值为整个选中的对象。

### **11 \<atom-select-checkbox><atom-select-checkbox/>**

| 描述                    |       属性或方     | 值  |   类型    |   默认    |
| ---------------------- | :---------------: | :-: | :------:  | :-------: |
| 需要筛选的数组           |       dataList     |     |    Array  |    []     |
| 所以已选中的值          |       selected     |     |    Array  |    []     |
| 是否显示需要选择的code值  |      isShowCode    |     | Boolean   |   false  |
| 传入的属性值            |       defaultProps  |     |  Object  | {label: "name",value: "id",code: "code"} |
| 弹窗出现位置            |       placement     |     |  String  |    bottom   |
| 默认提示                |       placeholder  |     |  String  |    请选择     |
| 整个选择框的宽度         |       width        |     |  String  |    100%(接收width所以属性,例如200px)  |
| 选择变动回调             |  @change="event"   |     |  function  |         |


- 在 defaultProps 参数中,name为显示的值,value为唯一标识或者需要返回的值,code为显示的副值,
在回调@change绑定方法后,只有一个参数返回,即选中的这个数组。