添加标签功能

cmd/dashboard/controller/member_api.go

@@ -87,6 +87,7 @@ type serverForm struct {
 	Name         string `binding:"required"`
 	DisplayIndex int
 	Secret       string
+	Tag          string
 }
 
 func (ma *memberAPI) addOrEditServer(c *gin.Context) {
@@ -102,6 +103,7 @@ func (ma *memberAPI) addOrEditServer(c *gin.Context) {
 		s.Secret = sf.Secret
 		s.DisplayIndex = sf.DisplayIndex
 		s.ID = sf.ID
+		s.Tag = sf.Tag
 		if sf.ID == 0 {
 			s.Secret = com.MD5(fmt.Sprintf("%s%s%d", time.Now(), sf.Name, admin.ID))
 			s.Secret = s.Secret[:10]

model/server.go

@@ -14,7 +14,7 @@ type Server struct {
 	Name         string
 	DisplayIndex int    // 展示权重，越大越靠前
 	Secret       string `json:"-"`
-
+	Tag          string
 	Host         *Host  `gorm:"-"`
 	State        *State `gorm:"-"`
 	LastActive   time.Time

resource/template/component/server.html

@@ -8,6 +8,10 @@
                 <label>备注</label>
                 <input type="text" name="name" placeholder="爱因斯坦-光速1号">
             </div>
+            <div class="field">
+                <label>标签</label>
+                <input type="text" name="Tag" placeholder="服务器标签">
+            </div>
             <div class="field">
                 <label>展示权重</label>
                 <input type="number" name="DisplayIndex" placeholder="越大越靠前">

resource/template/dashboard/server.html

@@ -15,6 +15,7 @@
                 <tr>
                     <th>权重</th>
                     <th>备注</th>
+                    <th>标签</th>
                     <th>IP</th>
                     <th>ID</th>
                     <th>密钥</th>
@@ -26,6 +27,7 @@
                 <tr>
                     <td>{{$server.DisplayIndex}}</td>
                     <td>{{$server.Name}}</td>
+                    <td>{{$server.Tag}}</td>
                     <td>{{$server.Host.IP}}</td>
                     <td>{{$server.ID}}</td>
                     <td>{{$server.Secret}}</td>

resource/template/theme-default/home.html

@@ -6,8 +6,14 @@
 {{template "common/menu" .}}
 <div class="nb-container">
     <div class="ui container">
-        <div class="ui four stackable status cards">
-            <div v-for='server in servers' :id="server.ID" class="card">
+        <div id="app">
+            <div class="ui" v-for="group in groups" >
+                <br>
+                <div class="ui horizontal divider">
+                    @#group.Tag#@
+                </div>
+
+                <div class="ui four stackable status cards"> <div v-for='server in group.data' :id="server.ID" class="card">
                     <div class="content" v-if='server.Host'>
                         <div class="header"><i :class="server.Host.CountryCode + ' flag'"></i><i
                                 v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i
@@ -35,7 +41,8 @@
                                 <div class="three wide column">CPU</div>
                                 <div class="thirteen wide column">
                                     <div :class="formatPercent(server.live,server.State.CPU, 100).class">
-                                    <div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
+                                        <div class="bar"
+                                             :style="formatPercent(server.live,server.State.CPU, 100).style">
                                             <small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
                                         </div>
                                     </div>
@@ -88,6 +95,8 @@
                         <p>@#server.Name#@</p>
                         <p>节点已离线</p>
                     </div>
+                </div></div>
+
             </div>
         </div>
     </div>
@@ -95,13 +104,18 @@
 {{template "common/footer" .}}
 <script>
     const initData = {{.Servers}};
+
     var statusCards = new Vue({
-        el: 'div.status.cards',
+        el: '#app',
         delimiters: ['@#', '#@'],
         data: {
-            servers: initData,
+            data: initData,
+            groups:[],
             cache: [],
         },
+        created() {
+            this.group()
+        },
         mounted() {
             $('.yellow.info.icon').popup({
                 popup: '.ui.content.popup',
@@ -109,6 +123,42 @@
             });
         },
         methods: {
+            group() {
+                this.groups = this.groupingData(this.data, "Tag")
+                console.log(this.groups)
+            },
+            groupingData(data, filed) {
+                let map = {};
+
+                let dest = [];
+
+                data.forEach(item => {
+                    if (!map[item[filed]]) {
+                        dest.push({
+                            [filed]: item[filed],
+
+                            data: [item]
+
+                        });
+
+                        map[item[filed]] = item;
+
+                    } else {
+                        dest.forEach(dItem => {
+                            if (dItem[filed] == item[filed]) {
+                                dItem.data.push(item);
+
+                            }
+
+                        });
+
+                    }
+
+                })
+
+                return dest;
+
+            },
             formatPercent(live, used, total) {
                 const percent = live ? (parseInt(used / total * 100) || 0) : -1
                 if (!this.cache[percent]) {