update lib

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,28 @@
+---
+name: Bug report
+about: 提交Bug反馈
+---
+
+<!-- 请确定这是一个Bug反馈，而不是一个需求反馈或问题求助，否则ISSUE可能被关闭 -->
+<!-- 请提供可供复现Bug的必要条件，否则ISSUE可能被关闭 -->
+<!-- 创建Bug反馈前请确定你的DataV是最新版的 -->
+
+## Bug report
+
+#### 出现Bug的组件？
+
+#### 组件配置数据？
+<!-- (config等props，若无配置请忽略) -->
+
+#### 控制台错误输出？
+<!-- (若无错误输出请忽略) -->
+
+#### 期望情况？
+
+#### 实际情况？
+
+#### 其他相关信息
+
+- DataV版本
+- 浏览器版本
+- 其他

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,14 @@
+---
+name: Feature request
+about: 新特性建议
+---
+
+<!-- 创建新特性建议前请确定你的DataV是最新版的 -->
+
+## Feature request
+
+#### 这个特性解决了什么问题？
+
+#### 这个特性的实现形式？
+
+#### 是否愿意为此特性提交PR？

.github/ISSUE_TEMPLATE/new_component_request.md

@@ -0,0 +1,20 @@
+---
+name: Component request
+about: 新组件建议
+---
+
+<!-- 创建新组件建议前请确定你的DataV是最新版的 -->
+<!-- (将[ ]修改为[x]) -->
+
+## Component request
+
+#### 新组件的类型？
+
+* [ ] 边框
+* [ ] 装饰
+* [ ] 图表
+* [ ] 其他
+
+#### 这个组件的功能描述 (边框及装饰类，请提供样图)？
+
+#### 是否愿意为此组件提交PR？

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,33 @@
+<!-- (将[ ]修改为[x]) -->
+
+**该PR的类型是？** (至少选择一个)
+
+- [ ] Bug修复
+- [ ] 新特性
+- [ ] 新组件
+
+**该PR是否向下兼容?** (选择任一)
+
+- [ ] 是
+- [ ] 否
+
+如果为否，请描述冲突情况:
+
+**涉及到的ISSUE:**
+
+- [ ] 该PR如果涉及到某个ISSUE, 请在PR标题中描述出来 (例如. `fix #xxx[,#xxx]`, "xxx"为ISSUE序号)
+
+**是否在Chrome浏览器下进行过测试？**
+
+- [ ] 是
+- [ ] 否
+
+如果这是一个**新特性**或**新组件**相关的PR，请提供如下信息
+
+- [ ] 添加该特性或组件的原因
+- [ ] 文档应该修改哪些信息
+- [ ] 测试相关
+
+提交**新特性**或**新组件**前请先发起一个相关的ISSUE请求
+
+**其他信息:**

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2.4.2-alpha (2019-08-30)
+
+### Perfect
+
+- **capsuleChart:** Class name compatibility optimization.
+
 # 2.4.1-alpha (2019-08-29)
 
 ### Perfect

README.md

@@ -49,3 +49,7 @@ Demo页面使用了全屏组件，请F11全屏后查看。
 * [机电运维管理台](http://datav.jiaminghi.com/demo/manage-desk/index.html)
 
 ![manage-desk](./demoImg/manage-desk.jpg)
+
+* [机电设备电子档案](http://datav.jiaminghi.com/demo/electronic-file/index.html)
+
+![electronic-file](./demoImg/electronic-file.jpg)

README_EN.md

@@ -50,3 +50,7 @@ The Demo page uses the full-screen component, please view it after F11 full scre
 * [Manage-Desk](http://datav.jiaminghi.com/demo/manage-desk/index.html)
 
 ![manage-desk](./demoImg/manage-desk.jpg)
+
+* [Electronic-File](http://datav.jiaminghi.com/demo/electronic-file/index.html)
+
+![electronic-file](./demoImg/electronic-file.jpg)

lib/components/capsuleChart/src/main.css

@@ -1,4 +1,4 @@
-.capsule-chart {
+.dv-capsule-chart {
   position: relative;
   display: flex;
   flex-direction: row;
@@ -6,7 +6,7 @@
   padding: 10px;
   color: #fff;
 }
-.capsule-chart .label-column {
+.dv-capsule-chart .label-column {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -15,41 +15,41 @@
   text-align: right;
   font-size: 12px;
 }
-.capsule-chart .label-column div {
+.dv-capsule-chart .label-column div {
   height: 20px;
   line-height: 20px;
 }
-.capsule-chart .capsule-container {
+.dv-capsule-chart .capsule-container {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
-.capsule-chart .capsule-item {
+.dv-capsule-chart .capsule-item {
   box-shadow: 0 0 3px #999;
   height: 10px;
   margin: 5px 0px;
   border-radius: 5px;
 }
-.capsule-chart .capsule-item div {
+.dv-capsule-chart .capsule-item div {
   height: 8px;
   margin-top: 1px;
   border-radius: 5px;
   transition: all 0.3s;
 }
-.capsule-chart .unit-label {
-  display: flex;
-  flex-direction: row;
-  line-height: 20px;
+.dv-capsule-chart .unit-label {
+  height: 20px;
   font-size: 12px;
-}
-.capsule-chart .unit-text {
-  width: 30px;
-  text-align: right;
-}
-.capsule-chart .unit-container {
-  flex: 1;
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: space-between;
 }
+.dv-capsule-chart .unit-text {
+  text-align: right;
+  display: flex;
+  align-items: flex-end;
+  font-size: 12px;
+  line-height: 20px;
+  margin-left: 10px;
+}

lib/components/capsuleChart/src/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="capsule-chart">
+  <div class="dv-capsule-chart">
     <template v-if="mergedConfig">
       <div class="label-column">
         <div v-for="item in mergedConfig.data" :key="item.name">{{ item.name }}</div>
@@ -11,18 +11,16 @@
           class="capsule-item"
           v-for="(capsule, index) in capsuleLength"
           :key="index"
-          :style="`width: calc(100% - ${mergedConfig.unit ? 30 : 0}px)`"
         >
           <div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
         </div>
 
         <div class="unit-label">
-          <div class="unit-container">
-            <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
-          </div>
-          <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
+          <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
         </div>
       </div>
+
+      <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
     </template>
   </div>
 </template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/index.js",

src/components/capsuleChart/src/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="capsule-chart">
+  <div class="dv-capsule-chart">
     <template v-if="mergedConfig">
       <div class="label-column">
         <div v-for="item in mergedConfig.data" :key="item.name">{{ item.name }}</div>
@@ -114,7 +114,7 @@ export default {
 </script>
 
 <style lang="less">
-.capsule-chart {
+.dv-capsule-chart {
   position: relative;
   display: flex;
   flex-direction: row;