feat:增加仪表盘设计组件及设计

frontend/src/components/vue-drag-resize-rotate/index.vue

@@ -26,6 +26,7 @@
     >
       <slot :name="handle"></slot>
     </div>
+    <i class="el-icon-circle-close" @click.stop="removeView()"></i>
     <slot></slot>
   </div>
 </template>
@@ -68,6 +69,10 @@ export default {
   replace: true,
   name: 'vue-drag-resize-rotate',
   props: {
+    viewId: {
+      type: String,
+      default: ''
+    },
     className: {
       type: String,
       default: 'vdr'
@@ -394,6 +399,11 @@ export default {
   },
 
   methods: {
+    removeView(){
+      debugger
+      console.log(this.viewId);
+      this.$emit('removeView',this.viewId)
+    },
     // 重置边界和鼠标状态
     resetBoundsAndMouseState() {
       this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }
@@ -1310,13 +1320,15 @@ export default {
       }
     },
     style() {
-      return {
+      let newStyle ={
         transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
         width: this.computedWidth,
         height: this.computedHeight,
         zIndex: this.zIndex,
         ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
       };
+      this.$emit('newStyle', this.viewId,newStyle);
+      return newStyle;
     },
     // 控制柄显示与否
     actualHandles() {
@@ -1503,4 +1515,11 @@ export default {
   height: 7px;
   background-color: #666;
 }
+
+.close {
+  float: right;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
 </style>

frontend/src/main.js

@@ -19,6 +19,9 @@ import message from '@/metersphere/common/js/message'
 import { left2RightDrag, bottom2TopDrag, right2LeftDrag } from '@/metersphere/common/js/directive'
 import directives from './directive'
 
+import './styles/vdrr/common-temp.scss'
+
+
 import vdrr from './components/vue-drag-resize-rotate'
 Vue.component('vdrr', vdrr)
 

frontend/src/styles/vdrr/common-temp.scss

+
+.vdr {
+  border: 1px dashed;
+}
+
+.vdrr {
+  border: 1px dashed;
+}

frontend/src/views/panel/list/PanelViewShow.vue

@@ -5,7 +5,7 @@
         <el-tabs v-model="ViewActiveName">
           <!--视图展示操作-->
           <el-tab-pane name="Views" class="view-list-thumbnails-outline">
-            <span slot="label"><i class="el-icon-s-data" />视图</span>
+            <span slot="label"><i class="el-icon-s-data"/>视图</span>
             <draggable
               v-model="thumbnails"
               :options="{group:{name: 'itxst',pull:'clone'},sort: true}"
@@ -15,14 +15,17 @@
               @end="end1"
             >
               <transition-group>
-                <img class="view-list-thumbnails" v-for="item in thumbnails" :key="item.name" :src="'/common-files/images/'+item.id" alt=""/>
+                <div v-for="item in thumbnails" :key="item.name"  v-on:dblclick = panelViewAdd(item)>
+                  <span style="color: gray">{{item.name}}</span>
+                  <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt=""/>
+                </div>
               </transition-group>
             </draggable>
           </el-tab-pane>
 
           <!--通用组件操作-->
           <el-tab-pane name="PublicTools">
-            <span slot="label"><i class="el-icon-s-grid" />组件</span>
+            <span slot="label"><i class="el-icon-s-grid"/>组件</span>
             开发中...
           </el-tab-pane>
         </el-tabs>
@@ -36,14 +39,33 @@
                 背景图
               </el-button>
               <el-button type="primary" size="mini" @click="save">
-                透视
+                预览
               </el-button>
             </span>
         </el-row>
         <el-row class="panel-design-show">
-          <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
-            <div id="echart" style="width: 100%;height: 80vh;"/>
+          <div class="container" style="overflow-y: auto">
+
+            <div :style="gridStyle">
+<!--              <draggable-->
+<!--                v-model="thumbnailsTmp"-->
+<!--                :options="{group:{name: 'itxst',pull:'clone'},sort: true}"-->
+<!--                animation="300"-->
+<!--                :move="onMove"-->
+<!--                style="height: 100%;overflow:auto"-->
+<!--                @end="end1"-->
+<!--              >-->
+              <vdrr v-if="item.keepFlag" :view-id="item.id" :parent="true" v-for="item in thumbnailsTmp" :key="item.name" @newStyle="newStyle" @removeView="removeView">
+                <img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt=""/>
+              </vdrr>
+<!--            </draggable>-->
+
           </div>
+          </div>
+
+          <!--          <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">-->
+          <!--            <div id="echart" style="width: 100%;height: 80vh;"/>-->
+          <!--          </div>-->
         </el-row>
 
       </el-col>
@@ -52,22 +74,34 @@
 </template>
 
 <script>
-import { post } from '@/api/dataset/dataset'
-import draggable from 'vuedraggable'
-import { BASE_BAR } from '../chart/chart'
+  import {post} from '@/api/dataset/dataset'
+  import draggable from 'vuedraggable'
+  import {BASE_BAR} from '../chart/chart'
 
-export default {
+  export default {
     name: 'PanelViewShow',
-  components: { draggable },
+    components: {draggable},
     data() {
       return {
-      ViewActiveName:'Views',
+        gridStyle: {
+          position: 'relative',
+          height: '2000px',
+          width: '2000px',
+          backgroundColor: '#808080',
+          background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
+          backgroundSize: '20px 20px, 20px 20px'
+        },
+        ViewActiveName: 'Views',
         table: {},
+        thumbnailsTmp: [
+          {id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST1',keepFlag:true,style:''},
+          {id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2',keepFlag:true,style:''}
+        ],
         thumbnails: [
-        {id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST1'},
-        {id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST2'},
-        {id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST3'},
-        {id:'772572ba-8bc1-4125-97a9-5b810466e339',name:'TEST4'}
+          {id: 'e70d7955-44dc-4158-9002-7b48ed0d5d80', name: 'TEST1'},
+          {id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2'},
+          {id: 'aebc8346-c3f2-44ad-97d3-1e36a10dd0fa', name: 'TEST3'},
+          {id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST4'}
         ],
         quota: [],
         view: {
@@ -79,14 +113,14 @@ export default {
         },
         // 定义要被拖拽对象的数组
         arr1: [
-        { id: 1, name: 'id' },
-        { id: 2, name: '名称' },
-        { id: 3, name: '类型' },
-        { id: 5, name: '状态' },
-        { id: 4, name: '指标指标指标' }
+          {id: 1, name: 'id'},
+          {id: 2, name: '名称'},
+          {id: 3, name: '类型'},
+          {id: 5, name: '状态'},
+          {id: 4, name: '指标指标指标'}
         ],
         arr2: [
-        { id: 11, name: '容量' }
+          {id: 11, name: '容量'}
         ],
         moveId: -1
       }
@@ -120,6 +154,28 @@ export default {
     activated() {
     },
     methods: {
+      panelViewAdd(item){
+        let pushItem = {
+          id:item.id,
+          name:item.name,
+          keepFlag:true
+        }
+        debugger
+        this.thumbnailsTmp.push(pushItem)
+        console.log(this.thumbnailsTmp);
+      },
+      removeView(viewId) {
+        this.thumbnailsTmp.forEach(function(item, index) {
+         if(item.id===viewId){
+           item.keepFlag = false
+         }
+        })
+      },
+      newStyle(viewId,newStyleInfo) {
+        console.log(viewId);
+        console.log(JSON.stringify(newStyleInfo))
+
+      },
       initTableData(id) {
         if (id != null) {
           post('/dataset/table/get/' + id, null).then(response => {
@@ -136,7 +192,7 @@ export default {
       },
       click1(item) {
         // console.log(item);
-      const c = this.view.xaxis.filter(function(ele) {
+        const c = this.view.xaxis.filter(function (ele) {
           return ele.id === item.id
         })
         // console.log(c);
@@ -146,7 +202,7 @@ export default {
       },
       click2(item) {
         // console.log(item);
-      const c = this.view.yaxis.filter(function(ele) {
+        const c = this.view.yaxis.filter(function (ele) {
           return ele.id === item.id
         })
         // console.log(c);
@@ -199,7 +255,7 @@ export default {
             if (chart.data) {
               chart_option.title.text = chart.title
               chart_option.xAxis.data = chart.data.x
-            chart.data.series.forEach(function(y) {
+              chart.data.series.forEach(function (y) {
                 chart_option.legend.data.push(y.name)
                 chart_option.series.push(y)
               })
@@ -257,12 +313,12 @@ export default {
         var myChart = this.$echarts.init(document.getElementById('echart'))
         // 指定图表的配置项和数据
         setTimeout(myChart.setOption(option, true), 500)
-      window.onresize = function() {
+        window.onresize = function () {
           myChart.resize()
         }
       }
     }
-}
+  }
 </script>
 
 <style scoped>
@@ -270,15 +326,17 @@ export default {
     height: 100%;
     width: 20%;
     min-width: 180px;
-    max-width:220px;
+    max-width: 220px;
     border: 1px solid #E6E6E6;
     border-left: 0 solid;
+    overflow-y: auto;
   }
 
   .view-list-thumbnails-outline {
     height: 100%;
     overflow-y: auto;
   }
+
   .view-list-thumbnails {
     width: 100%;
     padding: 0px 15px 15px 0px;
@@ -358,6 +416,14 @@ export default {
     margin-bottom: 0;
   }
 
+  .container {
+    width: 100%;
+    height: 600px;
+    border: 1px solid #000;
+    position: relative;
+    box-sizing: border-box;
+  }
+
   span {
     font-size: 12px;
   }