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

公共组件 staticstic

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

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

标题样式

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

标题组件

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

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

功能如下：

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

<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

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

统一规范：

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

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

• 统一页面背景色： $bgColor

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

• 接口联调完毕后，删除页面冗余 console.log

• 页面代码超过 1000 行后，请自行拆分页面，保证业务逻辑的规范性

• 如果有新的开发规范请自行往下添加

• 字典翻译

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

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

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

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

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

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

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

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

将数字转成成带有，的科学计数法，这个是全局过滤器，例如：10000 => "10,000" toThousandFilter 示例： {{ scope.row.price | toThousandFilter }}

新的获取第一级组织树和全部组织树数据和所有的供电单位的数据，目前已经全部放到了 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"

// 加载更多数据 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（这里是当前登录用户的，在开发环境可能数组为空）