搜索栏按钮样式在公共样式里面，如果要使用，就在按钮上加 class="btn",\
公共样式路径：src\dpv-web\src\styles\index.scss

# 公共组件 staticstic

路径：src\dpv-web\src\components\ly-components\staticstic
常见用法如下：

```javascript
<staticstic
  :imgurl="yh" // 数字前的图片，可不传。
  :number="compData.runTime" // 要显示的数据
  title="运行时长" // 数据下面的文字描述
  afterTitle="/h"> // 数据后面的文字描述
</staticstic>
```

# 标题样式

```javascript
<div class="module-Title">标题名</div>
```

# 标题组件

路径：src\dpv-web\src\components\ly-components\title
用法：

```javascript
imgurl：前置图片
number：需要显示的value，可以是字符串或者Number
description: 描述
<componentstitle :imgurl="imgurl" :number="num" description="可信状态上链总块数"></componentstitle>
```

功能示例：src\dpv-web\src\views\dpvView\trustedMonitoring\realTimeMonitoringOfDataTrustworthiness\Index.vue

# table 组件

路径：src\dpv-web\src\views\dpvView\common\Table.vue

功能如下：

```javascript
loading: true, // 遮罩层，默认开启
tableData： 表格数据
tableConfig: 表格配置，配置如下：
tableConfig: {          //表格配置项
  height: 200,        //表格高度
  loading: true,      //表格遮罩
  total: 52,           //总条数
  currentPage: 1,     //当前页
  pageSize:10,        //每页条数
  isMultiple: true,   //是否显示多选列
  multipleSelection: [],  //复选框
  column: [   //prop：对应显示的字段，为后台返回的数据需要显示的字段， label：表头， width：单元格宽度， fixed：是否固定
      { prop: 'marketingNum', label: '电力营销号', width: '300', fixed: true },
      { prop: 'userName', label: '用户名称',width: '', fixed: false },
      { prop: 'powerType', label: '用户类型',width: '', fixed: false },
      { prop: 'address', label: '用户地址',width: '', fixed: false },
      { prop: 'responseCapacity', label: '响应容量',width: '', fixed: false },
      { prop: 'programmeName', label: '方案参与类型',width: '', fixed: false },
      { prop: 'responseType', label: '响应类型',width: '', fixed: false },
      { prop: 'responseState', label: '响应状态',width: '', fixed: false }
    ],
    isOperation:false,   //是否显示操作列
    operationBtn:[
    ],
},
```

示例如下:
路径：src\dpv-web\src\views\dpvView\demandSideResponse\usersAreInvited\Index.vue

```javascript
<Table :tableData="InvitedList"
       :tableConfig="tableConfig"
       @handleSizeChange="handleSizeChange"
       @handleCurrentChange="handleCurrentChange"
       @handleSelectionChange="handleSelectionChange"
       @cellHandleClick="cellHandleClick"
       @showDetail="showDetail"
       @editRow="editRow"
       @deleteRow="deleteRow"
       v-loading="loading">
  <template #powerType="{data}">
    <div class="powerType" v-if="data.powerType==='01'">
      <div style="cursor: pointer;margin-left: 5px;">削峰</div>
    </div>
    <div class="powerType" v-if="data.powerType==='02'">
      <div style="cursor: pointer;margin-left: 5px">填谷</div>
    </div>
  </template>
</Table>
```

# 每个卡片左上角的图标和描述组件

组件路径：src\dpv-web\src\components\ly-components\contentTitle\index.vue

```javascript
<contentTitle title="当日绿地占比"></contentTitle>
```

# 统一规范：

- 每个页面的 style 采用以下规范
  示例：

```javascript
<style lang="scss" scoped>
</style>
每个页面有自己的唯一类名:
例如页面 test.vue
#<template>
#  <div class="test">
#     你的业务逻辑
#   </div>
#</template>
#<style lang="scss" scoped>
#.test{
#/**
#这里是你页面的样式
#*/
#}
#</style>
```

- 统一页面背景色： $bgColor

```javascript
  <style lang="scss" scoped>
    选择器{
      background-color: $bgColor;
    }
  </style>
```

- 接口联调完毕后，删除页面冗余 console.log
- 页面代码超过 1000 行后，请自行拆分页面，保证业务逻辑的规范性
- 如果有新的开发规范请自行往下添加

- 字典翻译

```javascript
getNameFromDicCodeAndDictValue({
  dicCode: "dpv_chain_uplink_type",
  value: scope.row.bodyType,
});
```

示例：src\dpv-web\src\views\dpvView\trustedMonitoring\realTimeMonitoringOfDataTrustworthiness\components\AreaDetails.vue

###权限

- 操作权限处理使用指令,使用此指令需要在：
  1. 权限管理——资源管理——权限标识中配置
  2. 配置格式为：项目:功能:操作，例：dpv:table:add

```javascript
    //判断是否有操作权限
    v-has-permi="['xxx','xxx','xxx']"
```

- 角色权限处理，可用于判断角色权限
  1. "admin" 管理员
  2. "super_admin" 超级管理员
  3. "aggregator_u" 聚合体用电测
  4. "aggregator_g" 聚合体发电测
  5. "unit_u" 单元体用电测
  6. "unit_g" 单元体发电测

```javascript
    //判断当前角色是否有权限
    v-has-role="['xxxxx']"
    //多个角色
    v-has-role="['xxxxx', 'xxxxxx']"
```

所有角色和操作权限在 Network —— getInfo 接口中查看。

- permissions 对象中为操作权限
- roles 为当前账户包括哪些角色

###自定义指令——复制

```html
v-clipboard="要复制的内容"
```

将数字转成成带有，的科学计数法，这个是全局过滤器，例如：10000 => "10,000"
toThousandFilter
示例：
{{ scope.row.price | toThousandFilter }}
<icontitle :imgurl="imgLeiurl" :number="454545 | toThousandFilter" description="累计发电量" aftertitle="kW·h"></icontitle>

# 新的获取第一级组织树和全部组织树数据和所有的供电单位的数据，目前已经全部放到了 vuex 里面，原来的数据不再采用

# 使用方式

(1)首先引入
import { mapState } from "vuex";
(2)
computed: {
...mapState("dpvView", {
regionList: "regionList",
organzationList: "organzationList",
powerorg: "powerorg"
})
}

# 更改主题色

```
import Settings from "@/layout/components/Settings";
```

# 增加自定义指令 v-loadmore

# 使用方式 例如：v-loadmore="loadmoreCompany"

路径： D:\luruan\dpv-web\src\views\dpvView\rightConfirmation\greenPowerSurver\Index.vue
<el-select
style="position: absolute; right: 0px; top: -20px; width: 200px"
v-model="companyName"
placeholder="请选择或输入"
filterable
v-loadmore="loadmoreCompany"

> <el-option

    v-for="item in companyDataList"
    :key="item.id"
    :label="item.name"
    :value="item.id"

> </el-option>
>  </el-select>
>  // 加载更多数据
> loadmoreCompany() {
>   if (this.companyDataList.length >= this.total) {

    // 加载完全部数据了
    return false

}
this.page.pageNum++
this.getCompanyInfo()
}
// 初始化数据，获取企业发电用户
getCompanyInfo() {
let params = {
pageIndex: this.page.pageNum,
pageSize: 100,
companyName: this.companyName === "" ? null : this.companyName,
};
getPoerUseUser(params).then((res) => {
if (res.code === 200) {
let arr = res.data.records;
this.companyDataList = this.companyDataList.concat(arr)
// this.companyName = this.companyDataList[0].id;
this.total = res.data.total
}
});
},

### uuid
console.log('uuid===',this.uuidv4());

# 获取所在部门的公共用法
// 首先引入vuex
import { mapState } from "vuex";
// 获取用户部门信息
computed: {
   ...mapState('sdhxView', {
      userInfoList: 'userInfoList',
   })
}
// 使用
const arr = this.userInfoList（这里是当前登录用户的，在开发环境可能数组为空）