优化样式、引入DataV、新增边框组件

szhyde · Aug 14, 2021 · bb69169 · bb69169
1 parent eaa61bf
commit bb69169
Show file tree

Hide file tree

Showing 23 changed files with 323 additions and 155 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # cola-designer-vue
-由于gitee的pages迟迟不上线，代码仓库已经移步到[github](https://github.com/colaiven/cola-designer )，gitee启用远程同步
+由于gitee的pages迟迟不上线，代码仓库已经移步到[github](https://github.com/colaiven/cola-designer )，[gitee](https://gitee.com/colaiven/cola-designer )不定时同步
 
 预览地址：https://colaiven.github.io/cola-designer/#/
 #### Project setup
@@ -109,3 +109,13 @@ export default {
 #### Q：提示组件属性未注册
 
 ### 待优化项
+· 大屏尺寸自定义（目前固定为16:9）
+
+· 宽高100%组件拉伸滚动条常驻现象
+
+· 添加更多的组件
+
+· 示例模板
+
+· 后端对接
+
diff --git a/docs/css/app.2c3245c1.css b/docs/css/app.2c3245c1.css
diff --git a/docs/css/app.b8218a61.css b/docs/css/app.b8218a61.css
diff --git a/docs/css/chunk-vendors.c470e980.css → docs/css/chunk-vendors.4f7e061f.css b/docs/css/chunk-vendors.c470e980.css → docs/css/chunk-vendors.4f7e061f.css
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>cola-design-vue</title><link href="css/app.b8218a61.css" rel="preload" as="style"><link href="css/chunk-vendors.c470e980.css" rel="preload" as="style"><link href="js/app.e2a5d68b.js" rel="preload" as="script"><link href="js/chunk-vendors.35a363dc.js" rel="preload" as="script"><link href="css/chunk-vendors.c470e980.css" rel="stylesheet"><link href="css/app.b8218a61.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but cola-design-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.35a363dc.js"></script><script src="js/app.e2a5d68b.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>cola-design-vue</title><link href="css/app.2c3245c1.css" rel="preload" as="style"><link href="css/chunk-vendors.4f7e061f.css" rel="preload" as="style"><link href="js/app.e06f5dce.js" rel="preload" as="script"><link href="js/chunk-vendors.20185a8e.js" rel="preload" as="script"><link href="css/chunk-vendors.4f7e061f.css" rel="stylesheet"><link href="css/app.2c3245c1.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but cola-design-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.20185a8e.js"></script><script src="js/app.e06f5dce.js"></script></body></html>
diff --git a/docs/js/app.e06f5dce.js b/docs/js/app.e06f5dce.js
diff --git a/docs/js/app.e2a5d68b.js b/docs/js/app.e2a5d68b.js
diff --git a/docs/js/chunk-vendors.20185a8e.js b/docs/js/chunk-vendors.20185a8e.js
diff --git a/docs/js/chunk-vendors.35a363dc.js b/docs/js/chunk-vendors.35a363dc.js
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
     "core-js": "^3.6.5",
     "echarts": "^5.0.1",
     "element-ui": "^2.15.0",

diff --git a/src/components/dataV/cpt-dataV-border.vue b/src/components/dataV/cpt-dataV-border.vue
@@ -0,0 +1,30 @@
+<template>
+  <comment :is="option.borderType" :style="{width:width+'px',height:height+'px'}"
+           :color="[option.borderColor1, option.borderColor2]" :backgroundColor="option.backgroundColor"
+           :title="option.borderTitle" :titleWidth="option.titleWidth"
+           :dur="option.dur" :reverse="option.reverse"/>
+<!--  默认宽高为100%（http://datav.jiaminghi.com/guide/borderBox.html），会出现滚动条常驻现象 -->
+</template>
+
+<script>
+export default {
+  name: "cpt-dataV-border",
+  title: "边框",
+  icon: 'el-icon-help',
+  initWidth: 256,
+  initHeight: 191,
+  group: 'element',
+  props:{
+    width:Number,
+    height:Number,
+    option:Object
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/dataV/options/cpt-dataV-border-option.vue b/src/components/dataV/options/cpt-dataV-border-option.vue
@@ -0,0 +1,70 @@
+<template>
+  <el-form label-width="100px" size="mini">
+    <el-form-item label="边框样式">
+      <el-select v-model="option.borderType" placeholder="请选择">
+        <el-option v-for="item in borderTypes"
+            :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="边框颜色1">
+      <el-color-picker v-model="option.borderColor1" show-alpha/>
+    </el-form-item>
+    <el-form-item label="边框颜色2">
+      <el-color-picker v-model="option.borderColor2" show-alpha/>
+    </el-form-item>
+    <el-form-item label="背景颜色">
+      <el-color-picker v-model="option.backgroundColor" show-alpha/>
+    </el-form-item>
+    <div v-if="option.borderType === 'dv-border-box-8'">
+      <el-form-item label="动画时长">
+        <el-input-number v-model="option.dur" :min="1" :max="60"/>
+      </el-form-item>
+      <el-form-item label="动画方向">
+        <el-select v-model="option.reverse" placeholder="请选择">
+          <el-option label="逆时针" :value="true"/>
+          <el-option label="顺时针" :value="false"/>
+        </el-select>
+      </el-form-item>
+    </div>
+    <div v-if="option.borderType === 'dv-border-box-11'">
+      <el-form-item label="标题">
+        <el-input v-model="option.borderTitle"/>
+      </el-form-item>
+      <el-form-item label="标题宽度">
+        <el-input-number v-model="option.titleWidth" :min="10"/>
+      </el-form-item>
+    </div>
+
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: "cpt-dataV-border-option",
+  props: { option: Object },
+  data(){
+    return {
+      borderTypes:[
+        { value: 'dv-border-box-1', label: '样式1' },
+        { value: 'dv-border-box-2', label: '样式2' },
+        { value: 'dv-border-box-3', label: '样式3' },
+        { value: 'dv-border-box-4', label: '样式4' },
+        { value: 'dv-border-box-5', label: '样式5' },
+        { value: 'dv-border-box-6', label: '样式6' },
+        { value: 'dv-border-box-7', label: '样式7' },
+        { value: 'dv-border-box-8', label: '样式8' },
+        { value: 'dv-border-box-9', label: '样式9' },
+        { value: 'dv-border-box-10', label: '样式10' },
+        { value: 'dv-border-box-11', label: '样式11' },
+        { value: 'dv-border-box-12', label: '样式12' },
+        { value: 'dv-border-box-13', label: '样式13' }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/echarts/cpt-chart-clock.vue b/src/components/echarts/cpt-chart-clock.vue
@@ -100,6 +100,7 @@ export default {
             }
           },
           splitLine: {
+            distance: option.splitLineDistance,
             lineStyle: {
               shadowColor: 'rgba(0, 0, 0, 0.3)',
               shadowBlur: 3,
@@ -109,7 +110,7 @@ export default {
           },
           axisLabel: {
             fontSize: option.axisLabelSize,//表盘字体大小
-            distance: 10,
+            distance: option.axisLabelDistance,
             formatter: function (value) {
               if (value === 0) {
                 return '';

diff --git a/src/components/echarts/options/cpt-chart-clock-option.vue b/src/components/echarts/options/cpt-chart-clock-option.vue
@@ -1,10 +1,16 @@
 <template>
   <el-form label-width="100px" size="mini">
     <el-form-item label="表盘宽度">
-      <el-input-number v-model="option.axisLineWidth"/>
+      <el-input-number v-model="option.axisLineWidth" :min="1" :max="200"/>
     </el-form-item>
     <el-form-item label="表盘字体">
-      <el-input-number v-model="option.axisLabelSize"/>
+      <el-input-number v-model="option.axisLabelSize" :min="5" :max="200"/>
+    </el-form-item>
+    <el-form-item label="字体边距">
+      <el-input-number v-model="option.axisLabelDistance" :min="1" :max="100"/>
+    </el-form-item>
+    <el-form-item label="刻度边距">
+      <el-input-number v-model="option.splitLineDistance" :min="1" :max="100"/>
     </el-form-item>
     <el-form-item label="时针颜色">
       <el-color-picker v-model="option.hourPointerColor" show-alpha/>

diff --git a/src/components/echarts/options/cpt-chart-pie-option.vue b/src/components/echarts/options/cpt-chart-pie-option.vue
@@ -1,42 +1,46 @@
 <template>
-  <el-form label-width="100px" size="mini">
-    <el-form-item label="标题">
-      <el-input v-model="option.chartTitle"/>
-    </el-form-item>
-    <el-form-item label="标题位置(X)">
-      <el-input v-model="option.titleX"/>
-    </el-form-item>
-    <el-form-item label="标题位置(Y)">
-      <el-input v-model="option.titleY"/>
-    </el-form-item>
-    <el-form-item label="标题大小">
-      <el-input-number v-model="option.titleFontSize" :min="10" :max="50"/>
-    </el-form-item>
-    <el-form-item label="标题颜色">
-      <el-color-picker v-model="option.titleTextColor" show-alpha/>
-    </el-form-item>
-    <el-form-item label="副标题">
-      <el-input v-model="option.subtext"/>
-    </el-form-item>
-    <el-form-item label="图例位置(X)">
-      <el-input v-model="option.legendX"/>
-    </el-form-item>
-    <el-form-item label="图例位置(Y)">
-      <el-input v-model="option.legendY"/>
-    </el-form-item>
-    <el-form-item label="图例布局方式">
-      <el-select v-model="option.orient">
-        <el-option label="纵向" value="vertical"/>
-        <el-option label="横向" value="horizontal"/>
-      </el-select>
-    </el-form-item>
-    <el-form-item label="图例文字颜色">
-      <el-color-picker v-model="option.legendTextColor" show-alpha/>
-    </el-form-item>
-    <el-form-item label="数据">
-      <el-input type="textarea" :rows="4" v-model="option.seriesData"/>
-    </el-form-item>
-  </el-form>
+  <div>
+    <el-form label-width="100px" size="mini">
+      <el-form-item label="标题">
+        <el-input v-model="option.chartTitle"/>
+      </el-form-item>
+      <el-form-item label="标题位置(X)">
+        <el-input v-model="option.titleX"/>
+      </el-form-item>
+      <el-form-item label="标题位置(Y)">
+        <el-input v-model="option.titleY"/>
+      </el-form-item>
+      <el-form-item label="标题大小">
+        <el-input-number v-model="option.titleFontSize" :min="10" :max="50"/>
+      </el-form-item>
+      <el-form-item label="标题颜色">
+        <el-color-picker v-model="option.titleTextColor" show-alpha/>
+      </el-form-item>
+      <el-form-item label="副标题">
+        <el-input v-model="option.subtext"/>
+      </el-form-item>
+      <el-form-item label="图例位置(X)">
+        <el-input v-model="option.legendX"/>
+      </el-form-item>
+      <el-form-item label="图例位置(Y)">
+        <el-input v-model="option.legendY"/>
+      </el-form-item>
+      <el-form-item label="图例布局方式">
+        <el-select v-model="option.orient">
+          <el-option label="纵向" value="vertical"/>
+          <el-option label="横向" value="horizontal"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="图例文字颜色">
+        <el-color-picker v-model="option.legendTextColor" show-alpha/>
+      </el-form-item>
+    </el-form>
+    <el-form label-position="top">
+      <el-form-item label="数据">
+        <el-input type="textarea" :rows="4" v-model="option.seriesData"/>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>

diff --git a/src/components/element/options/cpt-image-option.vue b/src/components/element/options/cpt-image-option.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-form label-width="80px" size="mini">
-      <el-form-item label="图片">
+      <el-form-item label="图片地址">
         <el-input v-model="option.url"></el-input>
       </el-form-item>
       <el-form-item label="填充方式">

diff --git a/src/components/options.js b/src/components/options.js
@@ -4,6 +4,12 @@ const cptOptions = {
         icon:'',
         opened:true,
         options:{
+            'cpt-dataV-border-option':{
+                borderType:'dv-border-box-1',
+                borderColor1:'#409eff',borderColor2:'#f00',backgroundColor:'rgba(0, 0, 0, 0)',
+                borderTitle:'标题1',titleWidth:250,//样式11特殊配置
+                dur:3, reverse:false//样式8特殊配置
+            },
             'cpt-button-option': {
                 text: '按钮1', url: '', bgColor: '#409eff', textColor: '#fff',
                 radius: 6,
@@ -63,7 +69,8 @@ const cptOptions = {
                 legendY:'bottom',seriesData:"[{\"value\":1048,\"name\":\"搜索引擎\"},{\"value\":735,\"name\":\"直接访问\"},{\"value\":580,\"name\":\"邮件营销\"},{\"value\":484,\"name\":\"联盟广告\"},{\"value\":300,\"name\":\"视频广告\"}]"
             },
             'cpt-chart-clock-option':{
-                axisLineWidth: 6,axisLabelSize:24,hourPointerColor:'#C0911F'
+                axisLineWidth: 3,axisLabelSize:16,hourPointerColor:'#C0911F',axisLabelDistance:8,
+                splitLineDistance:4
             }
         }
     }

diff --git a/src/components/registerCpt.js b/src/components/registerCpt.js
@@ -7,10 +7,12 @@ import cpt_image from '@/components/element/cpt-image'
 import cpt_chart_column from '@/components/echarts/cpt-chart-column'
 import cpt_chart_pie from '@/components/echarts/cpt-chart-pie'
 import cpt_chart_clock from '@/components/echarts/cpt-chart-clock'
+import cpt_dataV_border from '@/components/dataV/cpt-dataV-border'
 
 let cptList = [
+    cpt_dataV_border,
     cpt_input,cpt_text,cpt_carousel,cpt_button,cpt_image,
-    cpt_chart_column,cpt_chart_pie,cpt_chart_clock
+    cpt_chart_column,cpt_chart_pie,cpt_chart_clock,
 ]
 
 let cptGroups = {}

diff --git a/src/components/registerOption.js b/src/components/registerOption.js
@@ -8,10 +8,12 @@ import cpt_carousel_option from '@/components/element/options/cpt-carousel-optio
 import cpt_chart_column_option from '@/components/echarts/options/cpt-chart-column-option'
 import cpt_chart_pie_option from '@/components/echarts/options/cpt-chart-pie-option'
 import cpt_chart_clock_option from '@/components/echarts/options/cpt-chart-clock-option'
+import cpt_dataV_border_option from '@/components/dataV/options/cpt-dataV-border-option'
 
 let cptOptionsList = [
     cpt_button_option, cpt_text_option, cpt_input_option, cpt_image_option,
-    cpt_carousel_option, cpt_chart_column_option,cpt_chart_pie_option,cpt_chart_clock_option
+    cpt_carousel_option, cpt_chart_column_option,cpt_chart_pie_option,cpt_chart_clock_option,
+    cpt_dataV_border_option
 ]
 let listOptions = [];
 cptOptionsList.forEach(ele => {

diff --git a/src/main.js b/src/main.js
@@ -4,10 +4,12 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import * as echarts from 'echarts'
 import router from './router'
+import dataV from '@jiaminghi/data-view'
 
 Vue.prototype.$echarts = echarts
 Vue.config.productionTip = false
 Vue.use(ElementUI)
+Vue.use(dataV)
 
 new Vue({
   router,
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>cola-design-vue</title><link href="css/app.b8218a61.css" rel="preload" as="style"><link href="css/chunk-vendors.c470e980.css" rel="preload" as="style"><link href="js/app.e2a5d68b.js" rel="preload" as="script"><link href="js/chunk-vendors.35a363dc.js" rel="preload" as="script"><link href="css/chunk-vendors.c470e980.css" rel="stylesheet"><link href="css/app.b8218a61.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but cola-design-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.35a363dc.js"></script><script src="js/app.e2a5d68b.js"></script></body></html>
		<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>cola-design-vue</title><link href="css/app.2c3245c1.css" rel="preload" as="style"><link href="css/chunk-vendors.4f7e061f.css" rel="preload" as="style"><link href="js/app.e06f5dce.js" rel="preload" as="script"><link href="js/chunk-vendors.20185a8e.js" rel="preload" as="script"><link href="css/chunk-vendors.4f7e061f.css" rel="stylesheet"><link href="css/app.2c3245c1.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but cola-design-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.20185a8e.js"></script><script src="js/app.e06f5dce.js"></script></body></html>