feat(视图): 视图组件编辑界面，echarts

frontend/src/business/components/chart/Chart.vue

@@ -34,12 +34,13 @@
   .ms-aside-container {
     height: calc(100vh - 40px);
     padding: 15px;
-    min-width: 300px;
-    max-width: 500px;
+    min-width: 260px;
+    max-width: 460px;
   }
 
   .ms-main-container {
     height: calc(100vh - 40px);
+    padding: 0px;
   }
 
 </style>

frontend/src/business/components/chart/group/Group.vue

@@ -253,12 +253,10 @@ export default {
   mounted() {
     this.groupTree(this.groupForm);
     this.chartTree();
-    this.$router.push('/chart');
   },
   activated() {
     this.groupTree(this.groupForm);
     this.chartTree();
-    this.$router.push('/chart');
   },
   watch: {},
   methods: {
@@ -494,8 +492,9 @@ export default {
     createChart() {
       console.log(this.table);
       this.selectTableFlag = false;
-      // TODO
-      this.$router.push("/chart");
+      this.$store.commit("setTableId", null);
+      this.$store.commit("setTableId", this.table.id);
+      this.$router.push("/chart/chart-edit");
     },
 
     getTable(table) {

frontend/src/business/components/chart/router.js

 const Chart = () => import('@/business/components/chart/Chart');
 const ChartHome = () => import('@/business/components/chart/data/ChartHome');
+const ChartEdit =() => import('@/business/components/chart/view/ChartEdit')
 
 export default {
   path: "/chart",
@@ -13,6 +14,11 @@ export default {
       path: 'home',
       name: 'home',
       component: ChartHome,
+    },
+    {
+      path: 'chart-edit',
+      name: 'chart-edit',
+      component: ChartEdit,
     }
   ]
 }

frontend/src/business/components/chart/view/ChartEdit.vue

 <template>
-<div>
-  <div>{{drag?'拖拽中':'拖拽停止'}}</div>
-  <!--使用draggable组件-->
-  <draggable v-model="myArray" chosenClass="chosen" forceFallback="true" group="people" animation="1000"
-             @start="onStart" @end="onEnd">
-    <transition-group>
-      <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div>
-    </transition-group>
-  </draggable>
-</div>
+<!--TODO 慢慢完善，写个DEMO-->
+<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
+  <span v-show="false">{{tableId}}</span>
+  <el-row style="height: 30px;">
+    <span>{{tableId}}</span>
+    <span style="float: right;">
+      <el-button size="mini">
+        取消
+      </el-button>
+      <el-button type="primary" size="mini">
+        确认
+      </el-button>
+    </span>
+  </el-row>
+  <el-row style="display: flex;height: 100%">
+    <el-col style="height: 100%;width: 20%;min-width: 180px;max-width:220px;border: 1px solid #E6E6E6;">
+      <div style="height: 50%;border-bottom: 1px solid #E6E6E6;overflow:auto">
+        纬度
+        <draggable v-model="arr1" @end="end1" :options="{group:{name: 'itxst',pull:'clone'},sort: true}" animation="300"
+                   :move="onMove">
+          <transition-group>
+            <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
+          </transition-group>
+        </draggable>
+      </div>
+      <div style="height: 50%;overflow:auto">
+        指标
+        <draggable v-model="arr2" @end="end2" group="itxst" animation="300" :move="onMove">
+          <transition-group>
+            <div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
+          </transition-group>
+        </draggable>
+      </div>
+    </el-col>
+
+    <el-col
+      style="height: 100%;width: 25%;min-width: 200px;max-width:240px;border: 1px solid #E6E6E6;border-left: 0 solid;">
+      <div style="border-bottom: 1px solid #E6E6E6;overflow-y:hidden;">
+        <el-row>
+          <span>标题</span>
+          <el-checkbox v-model="checked" style="float: right;">显示</el-checkbox>
+        </el-row>
+        <el-form>
+          <el-form-item class="form-item">
+            <el-input
+              size="mini"
+              placeholder="标题"
+              prefix-icon="el-icon-search"
+              v-model="title"
+              clearable>
+            </el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div style="height: 30%;overflow:auto">
+        <span>图标类型</span>
+        <el-row>
+          <div class="chart-type">
+            <el-radio v-model="radio1" label="1">折线图</el-radio>
+            <el-radio v-model="radio1" label="2">柱状图</el-radio>
+          </div>
+        </el-row>
+      </div>
+      <div style="height: 50%;overflow:auto;border-top: 1px solid #e6e6e6">
+        <el-tabs type="card">
+          <el-tab-pane label="图形属性">图形属性</el-tab-pane>
+          <el-tab-pane label="组件样式">组件样式</el-tab-pane>
+        </el-tabs>
+      </div>
+      <div style="height: 50%;overflow:auto;border-top: 1px solid #e6e6e6">
+        <span>结果过滤器</span>
+
+      </div>
+    </el-col>
+
+    <el-col style="height: 100%;min-width: 500px;border-top: 1px solid #E6E6E6;">
+      <el-row style="width: 100%;height: 100%;">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="横轴">
+            <el-input v-model="form.x_axis" size="mini"></el-input>
+          </el-form-item>
+          <el-form-item label="纵轴">
+            <el-input v-model="form.y_axis" size="mini"></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="Echarts" style="height: 100%;display: flex;">
+          <div id="echart" style="width: 100%;height: 80%">
+
+          </div>
+        </div>
+      </el-row>
+    </el-col>
+  </el-row>
+</el-row>
 </template>
 
 <script>
@@ -19,63 +103,164 @@ export default {
   components: {draggable},
   data() {
     return {
-      drag:false,
-      list1: [
-        {name: "John", id: 1},
-        {name: "Joao", id: 2},
-        {name: "Jean", id: 3},
-        {name: "Gerard", id: 4}
+      form: {
+        x_axis: '',
+        y_axis: ''
+      },
+      checked: true,
+      radio1: '2',
+      title: '',
+      //定义要被拖拽对象的数组
+      arr1: [
+        {id: 1, name: 'id'},
+        {id: 2, name: '名称'},
+        {id: 3, name: '类型'},
+        {id: 5, name: '状态'},
+        {id: 4, name: '指标指标指标'}
       ],
-      list2: [
-        {name: "Juan", id: 5},
-        {name: "Edgard", id: 6},
-        {name: "Johnson", id: 7}
+      arr2: [
+        {id: 11, name: '容量'},
       ],
-      myArray: [
-        {people: 'cn', id: 1, name: 'www.itxst.com'},
-        {people: 'cn', id: 2, name: 'www.baidu.com'},
-        {people: 'cn', id: 3, name: 'www.taobao.com'},
-        {people: 'us', id: 4, name: 'www.google.com'}
-      ]
+      moveId: -1
     }
   },
   created() {
   },
   mounted() {
+    this.myEcharts();
   },
   activated() {
   },
-  computed: {},
+  computed: {
+    tableId() {
+      console.log(this.$store.state.chart.tableId);
+      return this.$store.state.chart.tableId;
+    },
+  },
   methods: {
-    //开始拖拽事件
-    onStart(){
-      this.drag=true;
+    //左边往右边拖动时的事件
+    end1(e) {
+      console.log(e)
+      var that = this;
+      var items = this.arr2.filter(function (m) {
+        return m.id == that.moveId
+      })
+      //如果左边
+      if (items.length < 2) return;
+      this.arr2.splice(e.newDraggableIndex, 1)
+    },
+    //右边往左边拖动时的事件
+    end2(e) {
+      console.log(e)
+      var that = this;
+      var items = this.arr1.filter(function (m) {
+        return m.id == that.moveId
+      })
+      //如果左边
+      if (items.length < 2) return;
+      this.arr1.splice(e.newDraggableIndex, 1)
     },
-    //拖拽结束事件
-    onEnd() {
-      this.drag=false;
+    //move回调方法
+    onMove(e, originalEvent) {
+      console.log('onmove');
+      this.moveId = e.relatedContext.element.id;
+      //不允许停靠
+      if (e.relatedContext.element.id == 1) return false;
+      //不允许拖拽
+      if (e.draggedContext.element.id == 4) return false;
+      if (e.draggedContext.element.id == 11) return false;
+      return true;
     },
+
+    myEcharts() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = this.$echarts.init(document.getElementById('echart'));
+
+      // 指定图表的配置项和数据
+      var option = {
+        title: {
+          text: 'ECharts示例'
+        },
+        tooltip: {},
+        legend: {
+          data: ['销量']
+        },
+        xAxis: {
+          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+        },
+        yAxis: {},
+        series: [{
+          name: '销量',
+          type: 'bar',
+          data: [5, 20, 36, 10, 10, 20]
+        }]
+      };
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      }
+    }
   },
   watch: {}
 }
 </script>
 
 <style scoped>
-  .form-item {
-    margin-bottom: 6px;
+  .itxst {
+    margin: 10px;
+    text-align: left;
+  }
+
+  .col {
+    width: 40%;
+    flex: 1;
+    padding: 10px;
+    border: solid 1px #eee;
+    border-radius: 5px;
+    float: left;
+  }
+
+  .col + .col {
+    margin-left: 10px;
   }
 
-  /*被拖拽对象的样式*/
   .item {
-    padding: 6px;
+    padding: 2px 12px;
+    margin: 3px 10px 0px 10px;
+    border: solid 1px #eee;
+    background-color: #f1f1f1;
+    text-align: left;
+  }
+
+  .item + .item {
+    border-top: none;
+    margin-top: 3px;
+  }
+
+  .item:hover {
     background-color: #fdfdfd;
+    cursor: pointer;
+  }
+
+  .item2 {
+    padding: 6px 12px;
+    margin: 0px 10px 0px 10px;
     border: solid 1px #eee;
-    margin-bottom: 10px;
+    background-color: pink;
+    text-align: left;
+  }
+
+  .item2 + .item2 {
+    border-top: none;
+    margin-top: 6px;
+  }
+
+  .item2:hover {
+    outline: solid 1px #ddd;
     cursor: move;
   }
 
-  /*选中样式*/
-  .chosen {
-    border: solid 2px #3089dc !important;
+  .el-form-item {
+    margin-bottom: 0;
   }
 </style>

frontend/src/business/components/dataset/data/ViewTable.vue

@@ -10,9 +10,9 @@
         <el-button size="mini" @click="edit">
           {{$t('dataset.edit')}}
         </el-button>
-        <el-button size="mini" type="primary" @click="createChart">
-          {{$t('dataset.create_view')}}
-        </el-button>
+<!--        <el-button size="mini" type="primary" @click="createChart">-->
+<!--          {{$t('dataset.create_view')}}-->
+<!--        </el-button>-->
       </el-row>
     </el-row>
     <el-divider/>
@@ -142,12 +142,10 @@ export default {
       this.initTableFields();
     },
 
-    createChart() {
-      console.log(this.table);
-      this.createViewDialog = true;
-      // TODO
-      this.$router.push("/chart");
-    },
+    // createChart() {
+    //   console.log(this.table);
+    //   this.createViewDialog = true;
+    // },
 
     saveEdit() {
       console.log(this.tableFields);

frontend/src/business/main.js

@@ -23,7 +23,9 @@ import VueFab from 'vue-float-action-button'
 import {left2RightDrag, bottom2TopDrag, right2LeftDrag} from "../common/js/directive";
 import JsonSchemaEditor from './components/common/json-schema/schema/index';
 import JSONPathPicker from 'vue-jsonpath-picker';
+import echarts from 'echarts'
 
+Vue.prototype.$echarts = echarts;
 Vue.use(JsonSchemaEditor);
 import VuePapaParse from 'vue-papa-parse'
 Vue.use(VuePapaParse)

frontend/src/business/store.js

@@ -21,7 +21,8 @@ const Dataset = {
 const Chart = {
   state: {
     chartSceneData: "",
-    chart: ""
+    chart: "",
+    tableId: ""
   },
   mutations: {
     setChartSceneData(state, chartSceneData) {
@@ -29,6 +30,9 @@ const Chart = {
     },
     setChart(state, chart) {
       state.chart = chart;
+    },
+    setTableId(state, tableId) {
+      state.tableId = tableId;
     }
   }
 }