# 公共内容API
### API
###### requestData(options)
通用数据请求。
>options: 请求配置项  

使用方式：
```javascript
this.API.requestData({
  isMust: true, // 请求是否携带 token ，默认为 true ，可缺省
  showLoading: false, // 请求是否显示加载中遮罩层，默认 false ，可缺省
  method: "GET", // 请求方式，默认为 GET ，可缺省
  subUrl: "api/repassword", // 请求接口地址，必传项
  timeout: 3000, // 请求超时时间，默认 3s ，可缺省
  data: { name: "admin", pasword: "123456" }, // 请求所携带参数，默认为空，可缺省
  success (res) {
    // 请求成功的回调
  },
  fail (error) {
    // 请求失败的回调
  }
});
```

###### get(url, params = {})
get请求。
>url: 接口地址  
params: 请求参数  

使用方式：
```
this.API.get("powercompare/windfarmAjax").then((res) => {
  ....
});
```

###### post(url, params = {})
post请求。
>url: 接口地址  
params: 请求参数  

使用方式：
```
this.API.post("login", {
  "username": "ylf",
  "password": "123456",
}).then((res) => {
  ....
});
```
### Get_PDF
公共的pdf导出工具  
```  
this.Get_PDF.downloadPDF(document.querySelector(id), 导出的pdf名称)
```  
### BASE
###### numberB0(n)
为各位数字自动补充一个0，用于日期补零。
>参数：  
n: 传入数字。  
输出：  
01  

使用方式：
```
this.BASE.numberB0(1)
```
###### getBzDate(time, tag = 0, type = "date")
通过传入的时间戳获取所需的一个标准格式的日期
>参数：  
time: 时间戳  
tag: 0,今天；1，明天，-1，昨天  
type: 输出格式，date：标准日期1999-01-10；datetime：标准日期时间：1999-01-10 10:10:10。  
返回：1999-01-10

使用方式：
```
this.BASE.getBzDate(new Date().getTime(), 0, "date") // 返回：1999-01-10
this.BASE.getBzDate(new Date().getTime(), 0, "datetime") // 返回：1999-01-10 10:10:10
```
###### dateQjChange(list, tag)
为时间区间的数组补零。
>参数：  
list：[开始日期, 结束日期]，如[2020-10-01, 2020-10-01]  
tag：1，补时分秒[2020-10-01 00:00:00, 2020-10-01 23:59:59]  
2，补分秒[2020-10-01 10:00:00, 2020-10-01 10:59:59]  
3，补秒[2020-10-01 10:13:00, 2020-10-01 10:13:59]  

使用方式：
```
this.BASE.dateQjChange(["2020-10-01", "2020-10-01"], 1) // 返回：[2020-10-01 00:00:00, 2020-10-01 23:59:59]
```
###### getNewNum(nStr)
金额分割符,4位分割（仅数字）。
>参数：  
nStr：数字  

使用方式：
```
this.BASE.getNewNum(123456789) // 返回：1,2345,6789
```
###### numberCeil(num)
对一个数字上取舍，如1234，取舍结果是2000。
适配万亿级别的数字
>参数：  
num: 数字。  

使用方式：
```
this.BASE.numberCeil(1234) // 返回：2000
this.BASE.numberCeil(12) // 返回：20
```
###### cascaderBugRepair(data)
Ant和element-ui 级联相同bug - 底层存在children的时候会显示空模块的问题，此方法可以完成任意级别的递归找children。
>参数：  
data：原型数据。  

使用方式：
```
this.BASE.cascaderBugRepair(树结构的数据) 
```

### 自定义滚动条
使用方式如下:
```
<VueScroll>
  <div style="width: 100px; height: 100px;">
    内容
  </div>
</VueScroll>
```

### 404
404.vue对所有未注入的路由地址进行拦截，统一处理。
### 组件
common/menu.vue菜单公共组件。

# 运行、打包
```
npm run serve // 运行
npm run dev // 打包 - 开发服务
npm run test // 打包 - 测试服务
npm run build // 打包 - 生产服务
```


# 项目前端基础要求
### 项目框架基础：
vue 脚手架4.5.12搭建vue2项目
### 基础组件：
vue 2.6.11 + ElementUI2.15.1 + axios0.21.1 + router3.2.0
### 公共组件：
Echarts5.1.0 报表  
Excel：vue-json-excel0.3.0 导出excel  
vuescroll：滚动条  
等


### 规范：
1.	目录结构说明：
Api：根据需求封装的请求，公共类型，不要随意修改。
Assets：公共资源，包括图片，css文件，js文件，字体库等。
Components：公共组件，根据项目需要，如果有重复可多次使用的相同或相似的功能，分装为组件，方便重复使用。
Router：index.js主路由和子路由，所有前端会分配子路由。
Store：vuex，按需使用。
Tools：公共JS方法，如日期格式化等。通过全局变量this.BASE.使用公用的方法。如有新的需求，可以自行添加，注释一定要详细明了。
Views：所有页面。
jsonData: 前端需要的数据
2.	Vue文件分割开，html写在vue文件中，js写在assets/js/模块名称/*.js，Scss文件写在assets/css/模块名称/*.scss
Vue文件引入方式： 

```
<script>
  import main from '../assets/js/main'
  export default main
</script>

<style lang="scss" scoped>
  @import "../assets/css/main.scss";
</style>
```

3.	文件起名按照驼峰法命名，包括文件夹名称、文件名称、变量名称、函数名称等，尽量使用准确的英文单词命名，减少拼音使用次数。
4.	引用使用尽量使用如下格式引用：  
```
.set('@', resolve('src'))
.set('@assets', resolve('src/assets'))
.set('@components', resolve('src/components'))
.set('@views', resolve('src/views'))
.set('@store', resolve('src/store'));
``` 

例如：@import "../assets/css/main.less";改成@import "@assets/css/main.less";
5.	Sass语法按照官方语法写，树级结构，使用class样式，不要使用id样式。
6.	代码缩进，统一为2。设置方式：文件-首选项-设置，搜索tabsize。严格按照2的缩进编写代码，提高代码美观程度。
7.	代码注释，方法用途（方法的输入、输出注释），关键代码注释。
8.	代码自我优化，js，css代码自行优化，用最短得代码，高效完成功能和效果。
9.	资源优化，图片资源，优化后再放入项目中，选择正确的资源放置位置。
10.	防止死循环。
11.	自己的功能做完后需要自测。

12.	接口访问，统一封装，统一通过this.API.get(url, 参数)
13.	针对请求超过1s的接口，必须进行loading加载中提示。
```
this.$store.commit('loadingStore', true); // 全局的数据 加载中.... - 开
this.$store.commit('loadingStore', false); // 全局的数据 加载中.... - 关
```
14.	防抖动。
15.	控制台零报错，见到错误第一时间解决。

16.	引入新的组件，前端成员共同商讨，选择合适、轻量、简单易上手的组件。
17.	组件引入后，如果无用请卸载。
18.	遇到技术难点，攻克时不要一把抓，什么都粘进来，弄明白每一行的用途，并注释。
19.	后台提供可阅读的接口文档，包括接口地址、请求类型、请求参数、返回数据注释用途等。
20.	与后台约定所有请求的基本头类型，推荐application/json，或约定一个其他类型的。
21.	与后台约定数据格式，请求格式、返回数据的格式，code统一使用200int型。
22.	与后台约定，message提示内容由后台编写，所有code ！==200的自动显示message内容。
23.	Git代码统一管理，没有账号就先借用一下使用。有账号的按照自己的账号编写代码。
每天提交一次代码，如单个功能未开发完成可以在完成后提交。每周提交一次代码。
代码编写规范：先拉取最新代码-创建本地分支-开发-提交-合并分支-本地验证无误、无冲突可以push。
Git使用教程：https://www.liaoxuefeng.com/wiki/896043488029600/900003767775424
24.	Git commit 时需要填写提交关键信息。



### 本次改动目标：
1.	全面完成前后端分离，完成解耦。
2.	统一项目全局的常用文字的字体、字号、字色。
3.	基于ElementUI开发，需统一使用其按钮、表格、表单等，形成风格统一。
4.	提升报表Echarts，按照最新的API实现所有报表。
5.	地图建议设计更好看的地图图片，或更换百度高德等，后期讨论、调研决定。
6.	设计方面，如UI时间比较紧，建议只设计登录页、框架页面、公共页出设计稿，定稿后修改。其他所有的表格表单，按照ElementUI实现。

### 开发工具：
Visual Studio Code V1.55.2，小版本区别没关系。
### 任务：
2周移植项目。