sis_zhfx

三区综合分析系统[sis_zhfx]

• 注：需创建自己的 GIT 分支进行代码开发，开发完调试完毕后再自行合并至主干分支。

项目运行

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>

版本更新