流量剩余显示增加详细信息

增加流量剩余显示的详细剩余流量
改进CSS，优化显示效果

cmd/dashboard/controller/controller.go

@@ -148,13 +148,34 @@ var funcMap = template.FuncMap{
 	"add": func(a, b int) int {
 		return a + b
 	},
-	"Transleft": func(a, b float64) (n float64) {
+	"TransLeftPercent": func(a, b float64) (n float64) {
 		n, _ = strconv.ParseFloat(fmt.Sprintf("%.2f", (100-(a/b)*100)), 64)
 		if n < 0 {
 			n = 0
 		}
 		return
 	},
+	"TransLeft": func(a, b uint64) string {
+		if a < b {
+			return "0KB"
+		}
+		return bytefmt.ByteSize(a - b)
+	},
+	"TransClassName": func(a float64) string {
+		if a == 0 {
+			return "offline"
+		}
+		if a > 50 {
+			return "fine"
+		}
+		if a > 20 {
+			return "warning"
+		}
+		if a > 0 {
+			return "error"
+		}
+		return "offline"
+	},
 	"UintToFloat": func(a uint64) (n float64) {
 		n, _ = strconv.ParseFloat((strconv.FormatUint(a, 10)), 64)
 		return

resource/template/theme-default/service.html

@@ -59,6 +59,7 @@
                 <tbody>
                     {{range $id, $stats := .CycleTransferStats}}
                     {{range $innerId, $transfer := $stats.Transfer}}
+                    {{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
                         <tr>
                             <td class="ui center aligned">{{$id}}</td>
                             <td class="ui center aligned">{{$stats.Name}}</td>
@@ -69,7 +70,7 @@
                             <td class="ui center aligned">{{$stats.Min|bf}}</td>
                             <td class="ui center aligned">{{(index $stats.NextUpdate $innerId)|sft}}</td>
                             <td class="ui center aligned">{{$transfer|bf}}</td>
-                            <td class="ui center aligned" style="padding: 14px 0px 0px 0px; position: relative;"><div class="thirteen wide column"><div class="ui progress fine"><div class="bar" style="transition-duration: 300ms; min-width: unset; background-color: rgb(10, 148, 242); width: {{Transleft (UintToFloat $transfer) (UintToFloat $stats.Max)}}% !important;"></div><small style="position: absolute; top: 4px; margin-left: -20px;">{{Transleft (UintToFloat $transfer) (UintToFloat $stats.Max)}} %</small></div></div></td>
+                            <td class="ui center aligned" style="padding: 14px 0px 0px 0px; position: relative;"><div class="thirteen wide column"><div class="ui progress {{TransClassName $TransLeftPercent}}" style=" background: rgba(0,0,0,.1); background-color: rgba(0,0,0,.1)!important; height: 25px;"><div class="bar" style="transition-duration: 300ms; min-width: unset; background-color: rgb(10, 148, 242); width: {{$TransLeftPercent}}% !important;"></div><small style="position: relative; top: -2em;;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small></div></div></td>
                         </tr>
                     {{end}}
                     {{end}}