Açıklama Yok

baiyanting fd234140b5 打开报警弹窗功能 1 yıl önce
public 69d4a5c341 实现报警弹窗、报警设置、报警声音功能 1 yıl önce
src fd234140b5 打开报警弹窗功能 1 yıl önce
.env 4f7d048853 first commit 1 yıl önce
.env.development 5aff959c79 修改页面展示bug,修改性能评估页面数据接口问题,修改曲线偏差率页面 1 yıl önce
.env.eapi 4f7d048853 first commit 1 yıl önce
.env.production d7a67e118f 功率曲线拟合接口调试完成,调整菜单权限,修改页面样式,修复数据出错bug 1 yıl önce
.gitignore 7f8d81ba2a update--安全监视、经济运行、首页地图 1 yıl önce
.gitlab-ci.yml 4f7d048853 first commit 1 yıl önce
README.md 4f7d048853 first commit 1 yıl önce
babel.config.js 4f7d048853 first commit 1 yıl önce
npminstall-debug.log 54fb68fe27 菜单报错 BUG 修复。 1 yıl önce
package.json ddee0618fb 发电场站生产实时运营管理平台, 经济运行菜单下风电分析与光伏分析菜单下增加状态转换分析页面与状态时间分析页面并服务联调; 1 yıl önce
sh.exe.stackdump 4f7d048853 first commit 1 yıl önce
vue.config.js d0d89bb8ac 首页展示数据修改,性能等级评估页面增加分页并完善功能 1 yıl önce

README.md

三区综合分析系统[hb_sis_zhfx]

  • 注:需创建自己的 GIT 分支进行代码开发,开发完调试完毕后再自行合并至主干分支。
  • 关于主题样式的开发,应遵循以下开发提规章:
  • 通过增加样式的 id class 标签名 来提升权重实现样式替换。 即:避免使用 !important 修饰符来提升权重(本身需覆盖的样式就有 !important 的除外)

  • 个人所负责的模块内的所有样式个人处理解决完。 包括但不限于模块内所使用但还没进行样式切换修改的组件、工具、弹窗、第三方UI库等。

  • 理论上来说只需要亮色主题样式。 但是部分模块可能还需要再写一份暗色的样式避免切换后亮色主题的部分样式残留问题。如需写两套,所分配任务的个人承担。

  • 遵循一个模块一个 less 文件的原则,文件顶部写明当前文件所属模块的名称。

  • 提交代码后如果衍生出冲突需要自行解决

项目运行

npm install
npm run serve

项目打包

npm run build

查看 vue cli webpack配置

vue inspect > webpack.config.js

开发文档

文件目录结构

-src
 --- assets		-- 静态文件
 	--- icon		-- 图标
 		--- svg			-- svg图标
 	--- style		-- 公共样式
 	--- font		-- 字体
 --- component  -- 自定义组件
     --- chart  -- 图表组件
         --- bar    -- 柱状体
         --- line   -- 折线图
         --- pie    -- 饼状图
     --- coms   -- 自定义UI组件
     	---	table 	-- 表格组件
     	--- panel	-- panel组件
     	--- card	-- 自定义卡片
     	--- ...		-- 更多自定义组件
 --- helper     -- 小工具
 	--- partten 	-- js端全局常量,引入即可使用 目前只有颜色
 --- router     -- 路由
     --- index.js   
 --- store      -- 状态管理 可使用vuex
 --- views      -- 页面 - 有路由管理跳转
     --- layout     -- 页面布局
     --- Home       -- 领导驾驶舱
     --- Agc        -- AGC页面
     --- ...		-- 其他页面

样式

项目中使用Less语言处理样式

公共样式

在assets/styles文件夹中为公共样式 其中包含样式变量公共样式

样式变量

  • 参见 assets/styles/common 文件夹中的文件

    @green: #05bb4c;
    @yellow: #f8de5b;
    @blue: #597ef7;
    
  • 使用方式:在项目中可直接@green即可使用

    color:@green;
    

公共样式

assets/styles除common的文件为公共样式,采用原子性方式设计样式class,可直接在HTML中使用

  1. color:通用颜色
  2. font:通用字体字号
  3. svg:svg相关样式

布局

栅格化布局

采用element ui 源码直接引入,可直接参考element ui https://element.faas.ele.me/#/zh-CN/component/layout

  • 注意: 修改布局组件名称 直接为 Row 和 Col即可 vue <Row type="flex"> <Col :span="6"> <Row type="flex"> <Col :span="24"> </Col> </Row> <Row type="flex"> <Col :span="24"> </Col> </Row> <Row type="flex"> <Col :span="24"> </Col> </Row> </Col> <Col :span="12"> </Col> <Col :span="6"> <Row type="flex"> <Col :span="24"> </Col> </Row> <Row type="flex"> <Col :span="24"> </Col> </Row> </Col> </Row>

svg-icon使用

  1. 将SVG图标添加至 assets/icon/svg 文件夹中,svg图片由webpack统一打包,放置到对应文件夹即可
  2. 在组件中引入svg-icon组件 vue import SvgIcon from "@/components/coms/icon/svg-icon.vue";
  3. 使用svg html <!-- svgid svg图片的id ,打包规则为 svg-文件名 --> <!-- 如 svg图片名为arrow-down.svg 其svgid 为 svg-arrow-down --> <!-- 外层样式为公共样式 在 assets/styles/svg.less 中查看 --> <div class="svg-icon svg-icon-white"> <svg-icon svgid="svg-arrow-down" /> </div>

版本更新