# notbooks

**Repository Path**: z_qaz/notbook

## Basic Information

- **Project Name**: notbooks
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-11
- **Last Updated**: 2021-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# notbooks

## git的使用

    下载git上的项目：在电脑某个硬盘创建一个文件夹，并在文件夹鼠标右键选择Git Bash，然后输入git clone命令克隆并下载项目
    git clone https:*******.git

    cd：进入某个目录
    mkdir：创建一个文件
    pwd：显示当前的目录路径

#### 添加文件到版本库
1.  git init (初始化)
2.  git add  文件名：将文件提交到暂存区
3.  git commit -m '备注'：将暂存区文件提交到仓库（单引号内为注释）
4.  检查是否有未提交的文件
    通过下面的命令，检查该版本库是否有文件未提交：

    git status：检查当前文件状态

5.  检查文件是否被修改
    修改文件后，通过命令git status发现，文件已经被修改，但是未提交

    git diff：查看文件修改的内容

6.  查看历史变更记录

    git log：获得历史修改记录

    git log --pretty=oneline：使记录只显示主要的内容，一行显示

7.  版本回退

    cat：查看文件内容

    git reset --hard HEAD^：回退到上一个版本

    git reflog：获取历史版本号

    git reset --hard 版本号：回退到该版本号对应的版本

    PS：如果要回退到上上个版本，可以使用git reset --hard HEAD^^命令，但是这样稍显麻烦，如果回退到100个版本之前，只需要执行这个命令即可：git reset --hard HEAD~100；

8.  将本地文件推送到github仓库
    git push

    git remote add origin https://github.com/zwg481026/APITest.git是将你本地的仓库和github仓库进行关联，在操作时候，需要将github地址替换为自己的，否则无法推送！

    第一次推送master分支时，加上了 –u参数，Git会将本地的master分支内容推送的远程新的master分支，还会把2个master分支关联起来，在以后的推送或者拉取时就可以简化操作。

    推送成功后，可以立刻在github页面中看到远程库的内容已经和本地一模一样了登录你的github，从仓库中查看：

    之后，只要本地做了修改提交，就可以使用git push origin master命令进行文件推送。


## 本地时间的封装

####  datatime.ts
```
 //实时显示当前时间
    private getDay = '';
    private gettime = '';
    private getWeek = '';
    private getTime() {
        var _this = this;
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1;
        let dd = new Date().getDate();
        let hh = new Date().getHours();
        let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
        let week = new Date().getDay();
        let weeks = ["日", "一", "二", "三", "四", "五", "六"];
        let getWeek = "星期" + weeks[week];
        _this.getDay = yy + '-' + mm + '-' + dd;
        _this.gettime = hh + ':' + mf + ':' + ss;
        _this.getWeek = getWeek;
    }
    mounted() {
        var _this = this;//声明一个变量指向Vue实例this，保证作用域一致
        setInterval(() => {
            _this.getTime();
        }, 1000);

    }


```

#### datatime.vue

```
 直接调用需要的数据

     <p>{{ getDay }}</p>
     <p>{{ getWeek }}</p>

```

##  滚动条设置

```
//右边滚动条

   ::-webkit-scrollbar {
  width: 10px; /*滚动条宽度*/
  height: 16px; /*滚动条高度*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  background-color: #f5f5f5; /*滚动条的背景颜色*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px; /*滚动条的圆角*/
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #00e8ff; /*滚动条的背景颜色*/
}



   

```

##  公司项目说明

##### 前序准备

你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [typescript](https://www.typescriptlang.org/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[faker.js](https://github.com/Marak/Faker.js)进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。

##### 目录结构

本项目已经为你生成了一个完整的开发框架，提供了涵盖后台开发的各类功能和坑位，下面是整个项目的目录结构。

```bash
├── mock                       # mock 服务器 与 模拟数据
├── public                     # 静态资源 (会被直接复制)
│   │── favicon.ico            # favicon图标
│   │── manifest.json          # PWA 配置文件
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源 (由 webpack 处理加载)
│   ├── components             # 全局组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局过滤函数
│   ├── icons                  # svg 图标
│   ├── lang                   # 国际化
│   ├── layout                 # 全局布局
│   ├── pwa                    # PWA service worker 相关的文件
│   ├── router                 # 路由
│   ├── store                  # 全局 vuex store
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局方法
│   ├── views                  # 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   ├── permission.ts          # 权限管理
│   ├── settings.ts            # 设置文件
│   └── shims.d.ts             # 模块注入
├── tests                      # 测试
├── .circleci/                 # 自动化 CI 配置
├── .browserslistrc            # browserslistrc 配置文件 (用于支持 Autoprefixer)
├── .editorconfig              # 编辑相关配置
├── .env.development           # 本地环境变量配置
├── .env.production            # 生产环境变量配置
├── .eslintrc.js               # eslint 配置
├── babel.config.js            # babel-loader 配置
├── cypress.json               # e2e 测试配置
├── jest.config.js             # jest 单元测试配置
├── package.json               # package.json 依赖
├── postcss.config.js          # postcss 配置
├── tsconfig.json              # typescript 配置
└── vue.config.js              # vue-cli 配置
```

##  代码封装

###  附件中图片的展示

  封装 .ts文件内容

```
ispic(path:any)
    {
        let istrue=false;
        

        let fileName = path.lastIndexOf(".");//取到文件名开始到最后一个点的长度
        let fileNameLength = path.length;//取到文件名长度
        let fileFormat = path.substring(fileName + 1, fileNameLength);//截
        fileFormat=fileFormat.toLowerCase();
        let extList='jpg,png,jpeg,gif'; 
        istrue= extList.includes(fileFormat)
        return istrue;
    }    
           
```
 .vue文件

``` 
<div v-if='datalist.footprintFileVOList && datalist.footprintFileVOList.length>0' style="color: white;font-size: 26px;">附件:</div>
              <div v-for="(item,index) in datalist.footprintFileVOList" :key="index" class="ImgList">
                <img :src="changepath(item.path)"  v-if="ispic(item.path)" />
                  <!-- <p v-if="ispic(item.path)" @click='takepath(item.path)' style="color: white;font-size: 20px;margin: 10px 0;cursor: pointer;">{{item.path.substring(item.path.lastIndexOf('/') + 1, item.path.length)}}</p> -->
              </div>
```

###  处理适配

```
    // 处理适配
    private zoomRatio: any = 0;
    private zoomRatio2: any = 0;
    private scale() {
        (window.top as any).zoomRatio = document.documentElement.clientWidth / 1920;
        (window.top as any).zoomRatio2 = document.documentElement.clientHeight / 1080;
        document.documentElement.style.zoom = (window.top as any).zoomRatio;
    }


     //返回上一页
    private goBack() {
        this.$router.go(-1)
    }

```
### filter过滤器

封装时间过滤器

```
import Vue from 'vue';
import moment from 'moment';
import { StringUtil } from '@/utils/stringutil';

Vue.filter('misToDatetime', function (value: string) {
  let ref = value;
  try {
    if (!StringUtil.isNullOrEmpty(value)) {
      ref = moment(value).format('YYYY-MM-DD HH:mm:ss');
    }
  } catch (error) {

  }

  return ref;
});
const misToDatetime = Vue.filter('misToDatetime');

Vue.filter('misToDate', function (value: string) {
  let ref = value;
  try {
    if (!StringUtil.isNullOrEmpty(value)) {
      ref = moment(value).format('YYYY-MM-DD');
    }
  } catch (error) {

  }

  return ref;
});
const misToDate = Vue.filter('misToDate');

Vue.filter('misToDatetimeMinute', function (value: string) {
  let ref = value;
  try {
    if (!StringUtil.isNullOrEmpty(value)) {
      ref = moment(value).format('YYYY-MM-DD HH:mm');
    }
  } catch (error) {

  }

  return ref;
});
const misToDatetimeMinute = Vue.filter('misToDatetimeMinute');
const myFilters = {
  misToDatetime,
  misToDate,
  misToDatetimeMinute
}
export default myFilters;


```
过滤器的使用

不用引入

```
 <span>{{props.row.createtime | misToDatetimeMinute}}</span>

```
## 路由传参 接收

   api文件里的接口文件 ——> failname.ts
   封装接口

   ```
   export const 接口名 = (参数) =>

   request({
       url:"/××××××/××××/××××"
       method:" post/get ",
       data / params
   })

   ```


## typescript
    
    定义数组，如果报红  private  arrlist:Array<any> = [];
      
## echarts

   x轴上的刻度信息只显示奇数部分，不显示偶数部分

   解决办法：

   在xAxis中的axisLabel下添加interval属性，将这个属性设置为0，即： interval: 0

## 改变饼状图的颜色
    
    ts文件中的写法
   ``` 
    async initMemberEchart(){

        let colorList = ['#62daab', '#6395f9','#cfdffd'];
        let total = 300;
        let data: any = []

        let option: any = {
          tooltip:{
            trigger:'item',
            formatter:'{a} <br/> {b} : {c} ({d}%)'
          },

           legend: {
                icon: 'circle',
                orient: 'horizontal', // 'vertical'
                x: 'center', // 'center' | 'left' | {number},
                y: 'bottom', // 'center' | 'bottom' | {number}
                data: ['户籍选民', '居住选民','单位选民']
            },
             series: [
      {
        name:"饼状图名字",
        radius:['50%','70%'],
        type:'pie',
        avoidLableOverlap:false,

        data:[

          <!-- 改变默认的颜色 -->

          {
            value:12,name:'户籍选民',itemStyle:{color:'#6395f9'}
            },
          {
            value:223,name:'居住选民',itemStyle:{color:'#cfdffd'}
            },
          {
            value:284,name:'单位选民',itemStyle:{color:'#62daab'}
            },
          ]
        }
       ]
        }

        let chart = echarts.init(document.getElementById('chartMember') as HTMLDivElement);
        chart.setOption(option);
     
    }
```

## VS code 快捷键

   F9 打开和停止调试断点
   F11 单步调试
   F5 启动调试
    

    一、主命令框

　　F1 或 Ctrl+Shift+P（俗称万能键）  ：打开命令面板。在打开的输入框内，可以输入任何命令


　　例如：

    按一下 Backspace 会进入到 Ctrl+P 模式

    在 Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式

    在 Ctrl+P 窗口下还可以直接输入文件名，跳转到该文件
    在 Ctrl+P 模式下输入 “?” 会弹出下拉菜单，



　　常用的如下：


    ?   列出当前可执行的动作

    !   显示 Errors或 Warnings，也可以 Ctrl+Shift+M

     :   跳转到行数，也可以 Ctrl+G 直接进入

     @    跳转到 symbol（搜索变量或者函数），也可以 Ctrl+Shift+O 直接进入

     @    根据分类跳转 symbol，查找属性或函数，也可以 Ctrl+Shift+O 后输入" : "进入

     #   根据名字查找 symbol，也可以 Ctrl+T

  
二、 常用快捷键

　　1、编辑器与窗口管理


       新建文件:   Ctrl+N

       文件之间切换:   Ctrl+Tab

       打开一个新的VS Code编辑器:    Ctrl+Shift+N

       关闭当前窗口:   Ctrl+W

       关闭当前的VS Code编辑器:   Ctrl+Shift+W

       切出一个新的编辑器窗口（最多3个):   Ctrl+\

       切换左中右3个编辑器窗口的快捷键:   Ctrl+1  Ctrl+2  Ctrl+3


　　2、代码编辑

　　  (1) 格式调整


        代码行向左或向右缩进:   Ctrl+[ 、 Ctrl+]

        复制或剪切当前行/当前选中内容:   Ctrl+C 、 Ctrl+V

        代码格式化:   Shift+Alt+F

        向上或向下移动一行:   Alt+Up 或 Alt+Down

        向上或向下复制一行:   Shift+Alt+Up 或 Shift+Alt+Down

        在当前行下方插入一行:   Ctrl+Enter

        在当前行上方插入一行:   Ctrl+Shift+Enter

　　   (2) 光标相关


          移动到行首:   Home

          移动到行尾:   End

          移动到文件结尾:   Ctrl+End

          移动到文件开头:   Ctrl+Home

          移动到定义处:   F12

          查看定义处缩略图(只看一眼而不跳转过去):    Alt+F12

          选择从光标到行尾的内容:   Shift+End

          选择从光标到行首的内容： Shift+Home

          删除光标右侧的所有内容(当前行):   Ctrl+Delete

          扩展/缩小选取范围： Shift+Alt+Right 和 Shift+Alt+Left

          多行编辑(列编辑):   Alt+Shift+鼠标左键 或 Ctrl+Alt+Down/Up

          同时选中所有匹配编辑(与当前行或选定内容匹配):   Ctrl+Shift+L

          下一个匹配的也被选中:   Ctrl+D

          回退上一个光标操作:   Ctrl+U

          撤销上一步操作: Ctrl+Z

          手动保存:   Ctrl+S

 　　(3) 重构代码

          找到所有的引用:   Shift+F12

          同时修改本文件中所有匹配的:   Ctrl+F2

          跳转到下一个 Error 或 Warning:   当有多个错误时可以按 F8 逐个跳转

　　(4) 查找替换

          查找:   Ctrl+F

          查找替换:   Ctrl+H

　　(5) 显示相关


          全屏显示(再次按则恢复):   F11

          放大或缩小(以编辑器左上角为基准):   Ctrl +/-

          侧边栏显示或隐藏： Ctrl+B

          显示资源管理器(光标切到侧边栏中才有效):   Ctrl+Shift+E

          显示搜索(光标切到侧边栏中才有效):   Ctrl+Shift+F

          显示(光标切到侧边栏中才有效):   Git Ctrl+Shift+G

          显示 Debug:    Ctrl+Shift+D

          显示 Output:    Ctrl+Shift+U

　　(6) 其他设置

          自动保存：File -> AutoSave(中文界面下“文件”->“自动保存”) 或者 Ctrl+Shift+P，输入 auto
 
##  vue 地图插件
   
   https://dafrok.github.io/vue-baidu-map/#/zh/overlay/marker

## //打印

```
     private doPrint() {
          print({
              printable: 'qrCode',
              type: 'html',
              targetStyles: ['*'],
              ignoreElements: ['no-print', 'bc', 'gb']
          })
      }
```
##  接口文档的添加

    获取所有数据 ，增删改查 ,
    当Parameter Type为body时，用（data：any）传参
                    为path时，需要路由传参，url:'... /'+params(id)
                    为query时，用（params:any）传参

    // 获取所有选民  query

    export const getElector = (params: any) =>
    request({
    url: '/microservice-base/rest/elector',
    method: 'get',
    params
    })

    // 新增单个选民   body
    export const createOne = (data: any) =>
    request({
    url: '/microservice-base/rest/elector/createOne',
    method: 'post',
    data
    })

    // 删除单个选民    path
    export const deleteOne = (params: any) =>
    request({
    url: '/microservice-base/rest/elector/deleteOne/'+params,
    method: 'post',

     })

    // 更新单个选民    body
    export const updateOne = (data: any) =>
    request({
    url: '/microservice-base/rest/elector/updateOne',
    method: 'post',
    data
    })

    // 获取单个选民    path
    export const getElectorOne = (id: any) =>
    request({
    url: '/microservice-base/rest/elector/' + id,
    method: 'get',
    })


##  导出 导入 下载模板

 ####  接口文档
     
     导出和模板接口文档需要加上 responseType: 'blob'

   ```
      // 导出多个选民或候选代表   query

     export const getExportExcel = (params: any) =>
     request({
     url: '/microservice-base/rest/elector/exportExcel',
     method: 'get',
     params,
     responseType: 'blob'
     })

      // 下载导入模板    path

      export const getTemplate = (params: any) =>
      request({
      url: '/microservice-base/rest/elector/getTemplate/'+ params,
      method: 'get',
      params,
      responseType: 'blob'
      })




      // 导入多个选民      formData

      export const importElector = (data: any) =>
      request({
      url: '/microservice-base/rest/elector/importElector',
      method: 'post',
      data
      })
     
   ```
#### .vue & .ts
   
     ```
      <el-dialog title="导入" :visible.sync="importVisible" width="30%">
      <div class="upl">
        <el-form>
          <el-form-item label="文件导入">
            <el-upload
              class="upload-demo uplodel"
              action="#"
              :on-change="filchangepel"
              multiple
              accept=".xls, .xlsx"
              :limit="1"
              :file-list="fileList"
              :auto-upload="false"
            >
              <el-button type="theme">文件导入</el-button>
            </el-upload>
          </el-form-item>
          <span class="don"  >下载模板</span>
          <el-button type="theme" @click="downtTemplate()">下载模板</el-button>
          <!-- <a
            class="donlod"
            href="./static/file/代表信息模板.xls"
            download="代表信息模板.xls"
            >下载模板</a
          > -->
        </el-form>
      </div>
    </el-dialog>


      <el-button  
        type="theme"
        @click="handleExport"
        >导出</el-button
      >

     ```
    ``` 
     //导出
     private async handleExport() {

     let obj = {
          name: this.listQuery.name,
          sex: this.listQuery.sex,
          type: this.listQuery.type,
          fuzzy:this.listQuery.fuzzy,
          electorateId:this.listQuery.electorateId,
          electorType: this.listQuery.electorType,
         
        }
     let that = this
     await getElector(obj).then(async (res) => {
     if (res.resData) {
        // let obj = {
        //     materialReportId: localStorage.getItem("projectId"),
        //     type:0
        // }
        let obj = {
          name: this.listQuery.name,
          sex: this.listQuery.sex,
          type: this.listQuery.type,
          fuzzy:this.listQuery.fuzzy,
          electorateId:this.listQuery.electorateId,
          electorType: this.listQuery.electorType,
         
        }
        await getExportExcel(obj).then((res) => {
            let blob = new Blob([res], { type: "application/octet-stream" });
            let download = document.createElement('a');
            download.href = window.URL.createObjectURL(blob);
            download.download = '选民信息表格.xls';
            download.click();
            window.URL.revokeObjectURL(download.href);
        })
      } else {
        this.$message.error("无法导出未保存的表格，请选保存表格！");
      }
     })
    }

     // 导入

     private fileList = [];

     private async filchangepel(file: any) {
     const fd = new FormData();
     fd.append("file", file.raw);
     const res: any = await importElector(fd);
     if (res.msg == "请求处理成功") {
     this.$message.success("导入成功");
     this.fileList = [];
     this.importVisible = false;
     this.getList();
     }
    }

    //下载模板
    private async downtTemplate() {
    let type = 0
    await getTemplate(type).then((res) => {
      let blob = new Blob([res], { type: "application/octet-stream" });
      let download = document.createElement('a');
      download.href = window.URL.createObjectURL(blob);
      download.download = '选民信息模板.xls';
      download.click();
      window.URL.revokeObjectURL(download.href);
     })
    }


    ```

***  样式  ***
1.  xxxx
2.  xxxx
3.  xxxx

#### 

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1. *** 
2.  
3.  
4.  
5.  
6.