sisweb

公共内容API

API

requestData(options)

通用数据请求。

options: 请求配置项

使用方式：

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>

1. 文件起名按照驼峰法命名，包括文件夹名称、文件名称、变量名称、函数名称等，尽量使用准确的英文单词命名，减少拼音使用次数。
2. 引用使用尽量使用如下格式引用：
   .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";

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

7. 自己的功能做完后需要自测。

8. 接口访问，统一封装，统一通过this.API.get(url, 参数)

9. 针对请求超过1s的接口，必须进行loading加载中提示。

   this.$store.commit('loadingStore', true); // 全局的数据 加载中.... - 开
   this.$store.commit('loadingStore', false); // 全局的数据 加载中.... - 关
   

10. 防抖动。

11. 控制台零报错，见到错误第一时间解决。

12. 引入新的组件，前端成员共同商讨，选择合适、轻量、简单易上手的组件。

13. 组件引入后，如果无用请卸载。

14. 遇到技术难点，攻克时不要一把抓，什么都粘进来，弄明白每一行的用途，并注释。

15. 后台提供可阅读的接口文档，包括接口地址、请求类型、请求参数、返回数据注释用途等。

16. 与后台约定所有请求的基本头类型，推荐application/json，或约定一个其他类型的。

17. 与后台约定数据格式，请求格式、返回数据的格式，code统一使用200int型。

18. 与后台约定，message提示内容由后台编写，所有code ！==200的自动显示message内容。

19. Git代码统一管理，没有账号就先借用一下使用。有账号的按照自己的账号编写代码。 每天提交一次代码，如单个功能未开发完成可以在完成后提交。每周提交一次代码。 代码编写规范：先拉取最新代码-创建本地分支-开发-提交-合并分支-本地验证无误、无冲突可以push。 Git使用教程：https://www.liaoxuefeng.com/wiki/896043488029600/900003767775424

20. Git commit 时需要填写提交关键信息。

本次改动目标：

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

开发工具：

Visual Studio Code V1.55.2，小版本区别没关系。

任务：

2周移植项目。