# electronic-map

## 项目运行
```
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 文件夹中的文件
``` less
@green: #05bb4c;
@yellow: #f8de5b;
@blue: #597ef7;
```

* 使用方式：在项目中可直接`@green`即可使用
``` \less
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>
```

## 版本更新