Merge branch 'gojs' of http://git.mes123.com/zhouyx/mes-ui into gojs

components/page/wall/index.vue

+<template>
+    <div class="henq-wall">
+        <div class="henq-brick" v-width="5%">
+
+        </div>
+    </div>
+</template>
+<script>
+export default {
+
+    props:{
+        column:{
+            type:Number,
+            default:20
+        },
+        brickHeight:{
+            type:Number,
+            default:25
+        }
+    }
+}
+</script>
+<style lang="less">
+.henq-wall{
+    border: 2px solid #ddd;;
+    .henq-brick{
+        border: 1px solid #ddd;
+        display: table-cell;
+    }
+}
+</style>
\ No newline at end of file

layouts/basic.vue

@@ -13,11 +13,11 @@
                         <MenuItem name="3" to="/go/color">
                             <Icon type="ios-analytics"></Icon>
                             色彩
+                        <MenuItem name="4" to="/go/wall">
+                            <Icon type="ios-analytics"></Icon>
+                            墙
                         </MenuItem>
-                        <MenuItem name="4">
-                            <Icon type="ios-paper"></Icon>
-                            Item 4
-                        </MenuItem>
+                     
                 </Menu>
             </Header>
             <Content >
@@ -51,7 +51,7 @@
         height: 100%;
         padding: 20px;
         .hp100{
-            height: 100%;
+            min-height: 90%;
         }
     }
 }

pages/go/tree/index.vue

@@ -5,7 +5,7 @@
     <div id="card">
       <h1>go.js</h1>
     </div>
-    <div id="svg" ref="svg" v-if="show">222222222222222222222222</div>
+    <div id="svg" ref="svg" v-if="show">vvvv</div>
   </div>
 </template>
 
@@ -87,10 +87,14 @@ export default {
       let $ = go.GraphObject.make;
       this.go = $(go.Diagram, "card", {
         "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
-        layout: $(
-          go.TreeLayout, // specify a Diagram.layout that arranges trees
-          { angle: 90, layerSpacing: 35 }
-        )
+        // layout: $(
+        //   go.TreeLayout, // specify a Diagram.layout that arranges trees
+        //   { angle: 90, layerSpacing: 35 }
+        // ),
+        // nodeSelectionAdornmentTemplate:
+        //           $(go.Adornment, "Auto",
+        //               $(go.Shape, "Rectangle", { fill: "red", stroke: "red" ,strokeWidth:2}),
+        //           )
       });
 
       var myModel = $(go.TreeModel);
@@ -105,16 +109,39 @@ export default {
           "Hi,henq",
           { margin: 12, stroke: "#fff", font: "bold 16px '宋体'" },
           new go.Binding("text", "name")
-        ),{
-          contextClick:(e,obj)=>{
+        ),
+        {
+          contextClick: (e, obj) => {
             // alert(obj.data.key+":"+obj.data.name);
-            console.warn("info",e,obj)
-            this.onContextmenu(e.event,obj.data)
+            console.warn("info", e, obj);
+            this.onContextmenu(e.event, obj.data);
           },
-          doubleClick:(e,obj)=>{
+          doubleClick: (e, obj) => {
             alert(321);
-          }
-        }
+          },
+          angle: 45,
+          // mouseEnter:(e,obj)=>{
+          //   console.warn(e,obj);
+          //   if(obj.part){
+          //     obj.part.fill="red"
+          //   }
+          // }
+          // mouseEnter: function(e, obj) {
+          //   console.log(obj)
+          //   obj.background = "green";
+          //   obj.stroke = "dodgerblue";
+          //   obj.toolTip="hello henq!"
+          // },
+          // mouseLeave: function(e, obj) {
+          //    obj.background = "orange";
+          //   obj.opacity = 1;
+          //   obj.strokeWidth = 2;
+          //   obj.stroke = "gray";
+          // }
+        },
+        new go.Binding("background","isSelected",(v)=>{
+          return v?"green":"red"
+        }).ofObject()
       );
       this.go.linkTemplate = $(
         go.Link,
@@ -122,8 +149,9 @@ export default {
         $(go.Shape, { strokeWidth: 1, stroke: "#ddd" })
       ); // the link shape
 
-      myModel.nodeDataArray = this.data;
+      // myModel.nodeDataArray = this.data;
       this.go.model = myModel;
+      this.go.add($(go.Part, "Table",$(go.Picture,{source:"/static/logo.png",margin:10,column:1})))
     },
     svg() {
       this.show = !this.show;
@@ -134,9 +162,9 @@ export default {
           maxSize: new go.Size(1200, NaN)
         });
         console.log(this.$refs.svg);
-        this.$nextTick(()=>{
+        this.$nextTick(() => {
           document.getElementById("svg").appendChild(svg);
-        })       
+        });
       }
     },
     onContextmenu(event, a) {
@@ -208,11 +236,11 @@ export default {
   background-color: white;
   top: 150px;
   left: 0;
-  rect{
+  rect {
     // fill:wheat;
     cursor: pointer;
   }
-  rect:hover{
+  rect:hover {
     fill: tomato;
   }
 }

pages/go/wall/index.vue

+<template>
+  <div id="wall-test">
+    <Split v-model="split">
+      <div slot="left" class="henq-wall">
+        <div
+          class="henq-brick"
+          v-for="(li,i) in list"
+          :key="i"
+          v-width="width(li)"
+          v-height="li.rows*40"
+        >
+          <!-- <div class="filed">{{li.name}}</div> -->
+          <div class="pkg">
+            <div class="title">{{li.name}}</div>
+            <div class="content">{{li.span}}|{{li.rows}}|{{li.value}}</div>
+          </div>
+        </div>
+        <div class="clear"></div>
+      </div>
+      <div slot="right" class="tools">
+        <Table :columns="cols" :data="items" size="small" height="800">
+          <!-- <Input slot="value" slot-scope="{row,i}" v-model="row.value" /> -->
+          <InputNumber
+            slot="span"
+            slot-scope="{row,index}"
+            v-model="row.span"
+            @on-change="setRow(row,index)"
+          />
+          <InputNumber
+            slot="rows"
+            slot-scope="{row,index}"
+            v-model="row.rows"
+            @on-change="setRow(row,index)"
+          />
+        </Table>
+      </div>
+    </Split>
+    <div class="clear"></div>
+  </div>
+</template>
+<script>
+export default {
+  layout: "basic",
+  data() {
+    return {
+      items: [],
+      cols: [
+        { key: "id", title: "id", width: 50 },
+        { key: "name", title: "名称" },
+        // {key:"value",title:"值",slot:"value"},
+        { key: "span", title: "宽", slot: "span" },
+        { key: "rows", title: "高", slot: "rows" }
+      ],
+      // list:[],
+      split: 0.8
+    };
+  },
+  created() {
+    let items = [];
+    for (let i = 0; i < 20; i++) {
+      items.push({
+        id: i,
+        name: "hahah" + i,
+        value: i + "大家爱，才是真爱。。。",
+        span: 5,
+        rows: 1,
+        hide: false
+      });
+    }
+    this.items = items;
+    this.list = items;
+  },
+  methods: {
+    width(row) {
+      return 4.8 * row.span + "%";
+    },
+    setRow(row, i) {
+      let item = this.items[i];
+      item.rows = row.rows;
+      item.span = row.span;
+      this.$set(this.items, i, item);
+    }
+  },
+  computed: {
+    list() {
+      return this.items.filter(u => {
+        return !u.hide;
+      });
+    }
+  },
+  props: {
+    column: {
+      type: Number,
+      default: 20
+    },
+    brickHeight: {
+      type: Number,
+      default: 25
+    }
+  }
+};
+</script>
+<style lang="less">
+@border-color: #ddd;
+#wall-test {
+  .henq-wall {
+    width: 100%;
+    border: 2px solid @border-color;
+    display: flex;
+    .henq-brick {
+      border: 1px solid @border-color;
+      // border-bottom: 1px solid @border-color;
+      display: block;
+      line-height: 30px;
+      justify-content:flex-start;
+      align-items:flex-start;
+      float: left;
+      flex-grow: 0;
+      margin: 2px;
+      // align-self: flex-start;
+      // margin-top: -1px;
+      // margin-left: -1px;
+      .pkg {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        .title {
+          width: 100px;
+          background: #f7f7f7;
+          text-align: right;
+          padding: 0 5px;
+        }
+        .content {
+          flex: 1;
+        }
+      }
+    }
+    .clear {
+      clear: both;
+    }
+  }
+  .tools {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file