sis_zhfx

三区综合分析系统[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-plus": "^1.1.0-beta.4", "vue": "^3.0.11", 采用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>

版本更新