Initial commit (code only without large binaries)
This commit is contained in:
robin
@@ -0,0 +1,6 @@
|
||||
<second-menu>
|
||||
<menu-item :href="Tea.url('.', { itemId: item.id })">图表列表</menu-item>
|
||||
<span class="item disabled">|</span>
|
||||
<menu-item :href="Tea.url('.chart', {chartId: chart.id})" code="chartIndex">详情"{{chart.name}}"</menu-item>
|
||||
<menu-item :href="Tea.url('.update', {chartId: chart.id})" code="chartUpdate">修改</menu-item>
|
||||
</second-menu>
|
||||
@@ -0,0 +1,5 @@
|
||||
h4 span {
|
||||
font-size: 0.8em;
|
||||
color: grey;
|
||||
}
|
||||
/*# sourceMappingURL=chart.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["chart.less"],"names":[],"mappings":"AAAA,EACC;EACC,gBAAA;EACA,WAAA","file":"chart.css"}
|
||||
@@ -0,0 +1,54 @@
|
||||
{$layout}
|
||||
{$template "../item_menu"}
|
||||
{$template "chart_menu"}
|
||||
{$template "/echarts"}
|
||||
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">图表名称</td>
|
||||
<td>
|
||||
{{chart.name}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>状态</td>
|
||||
<td>
|
||||
<label-on :v-is-on="chart.isOn"></label-on>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>图表类型</td>
|
||||
<td>
|
||||
{{chart.typeName}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>对象数限制</td>
|
||||
<td>
|
||||
<span v-if="chart.maxItems <= 0" class="disabled">没有限制</span>
|
||||
<span v-else>{{chart.maxItems}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>忽略空值对象</td>
|
||||
<td>
|
||||
<span v-if="chart.ignoreEmptyKeys" class="green">Y</span>
|
||||
<span v-else class="disabled">N</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>忽略其他对象</td>
|
||||
<td>
|
||||
<div v-if="chart.ignoredKeys.length > 0">
|
||||
<span v-for="key in chart.ignoredKeys" class="ui label basic small">{{key}}</span>
|
||||
</div>
|
||||
<span v-else class="disabled">没有要忽略的对象。</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h4>图表示例</h4>
|
||||
<p class="comment"><span class="red">图中数据均为测试数据。</span></p>
|
||||
<metric-board>
|
||||
<metric-chart :v-chart="chart" :v-stats="testingStats" :v-item="item"></metric-chart>
|
||||
</metric-board>
|
||||
63
EdgeAdmin/web/views/@default/servers/metrics/charts/chart.js
Normal file
63
EdgeAdmin/web/views/@default/servers/metrics/charts/chart.js
Normal file
@@ -0,0 +1,63 @@
|
||||
Tea.context(function () {
|
||||
this.format = function (v) {
|
||||
if (v == 0) {
|
||||
return "00"
|
||||
}
|
||||
if (v < 10) {
|
||||
return "0" + v
|
||||
}
|
||||
return v.toString()
|
||||
}
|
||||
|
||||
let randValues = []
|
||||
let times = []
|
||||
let count = 6
|
||||
for (let i = 0; i < count; i++) {
|
||||
randValues.push(Math.ceil(Math.random() * 100))
|
||||
switch (this.item.periodUnit) {
|
||||
case "month": {
|
||||
let date = new Date()
|
||||
date.setMonth(date.getMonth() - (count - 1 - i))
|
||||
let month = date.getMonth() + 1
|
||||
times.push(date.getFullYear() + this.format(month))
|
||||
}
|
||||
break
|
||||
case "week": {
|
||||
let date = new Date()
|
||||
times.push(date.getFullYear() + this.format(50 + i - count))
|
||||
}
|
||||
break
|
||||
case "day": {
|
||||
let date = new Date()
|
||||
date.setDate(date.getDate() - (count - i - 1))
|
||||
let day = date.getDate()
|
||||
times.push(date.getFullYear() + this.format(date.getMonth() + 1) + this.format(day))
|
||||
}
|
||||
break
|
||||
case "hour": {
|
||||
let date = new Date()
|
||||
date.setHours(date.getHours() - (count - i - 1))
|
||||
times.push(date.getFullYear() + this.format(date.getMonth() + 1) + this.format(date.getDate()) + this.format(date.getHours()))
|
||||
}
|
||||
break
|
||||
case "minute": {
|
||||
let date = new Date()
|
||||
date.setMinutes(date.getMinutes() - (count - i - 1))
|
||||
times.push(date.getFullYear() + this.format(date.getMonth() + 1) + this.format(date.getDate()) + this.format(date.getHours()) + this.format(date.getMinutes()))
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
let total = randValues.$sum()
|
||||
|
||||
this.testingStats = []
|
||||
let that = this
|
||||
randValues.forEach(function (v, index) {
|
||||
that.testingStats.push({
|
||||
keys: ["对象" + (index + 1)],
|
||||
value: v,
|
||||
total: total,
|
||||
time: times[index]
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,6 @@
|
||||
h4 {
|
||||
span {
|
||||
font-size: 0.8em;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>创建图表</h3>
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<input type="hidden" name="itemId" :value="itemId"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">图表名称 *</td>
|
||||
<td>
|
||||
<input type="text" maxlength="100" name="name" ref="focus"/>
|
||||
<p class="comment">也会作为有些图表的标题。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>图表类型 *</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="type" v-model="type" @change="changeType">
|
||||
<option v-for="type in types" :value="type.code">{{type.name}}</option>
|
||||
</select>
|
||||
<p class="comment" v-if="typeDefinition != null"><i class="icon" :class="typeDefinition.icon"></i> {{typeDefinition.description}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>对象数限制</td>
|
||||
<td>
|
||||
<input type="text" name="maxItems" maxlength="2" style="width: 4em"/>
|
||||
<p class="comment">在图表中能显示的最多对象数，0表示不限制。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>忽略空值对象</td>
|
||||
<td>
|
||||
<checkbox name="ignoreEmptyKeys"></checkbox>
|
||||
<p class="comment">选中后，空的对象值不会在图表中出现。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>忽略其他对象</td>
|
||||
<td>
|
||||
<values-box name="ignoredKeys"></values-box>
|
||||
<p class="comment">这些对象不会在图表中出现。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,15 @@
|
||||
Tea.context(function () {
|
||||
this.type = this.types[0].code
|
||||
this.typeDefinition = null
|
||||
|
||||
this.$delay(function () {
|
||||
this.changeType()
|
||||
})
|
||||
|
||||
this.changeType = function () {
|
||||
let that = this
|
||||
this.typeDefinition = this.types.$find(function (k, v) {
|
||||
return v.code == that.type
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,30 @@
|
||||
{$layout}
|
||||
{$template "../item_menu"}
|
||||
|
||||
<second-menu>
|
||||
<menu-item @click.prevent="createChart">[创建图表]</menu-item>
|
||||
</second-menu>
|
||||
|
||||
|
||||
<p class="comment" v-if="charts.length == 0">暂时还没有图表。</p>
|
||||
<table class="ui table celled selectable" v-if="charts.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>图表名称</th>
|
||||
<th>类型</th>
|
||||
<th class="two wide">状态</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="chart in charts">
|
||||
<td>{{chart.name}}</td>
|
||||
<td>{{chart.typeName}}</td>
|
||||
<td><label-on :v-is-on="chart.isOn"></label-on></td>
|
||||
<td>
|
||||
<a :href="Tea.url('.chart', {chartId: chart.id})">详情</a>
|
||||
<a href="" @click.prevent="deleteChart(chart.id)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="page" v-html="page"></div>
|
||||
21
EdgeAdmin/web/views/@default/servers/metrics/charts/index.js
Normal file
21
EdgeAdmin/web/views/@default/servers/metrics/charts/index.js
Normal file
@@ -0,0 +1,21 @@
|
||||
Tea.context(function () {
|
||||
this.createChart = function () {
|
||||
teaweb.popup(Tea.url(".createPopup?itemId=" + this.item.id), {
|
||||
callback: function () {
|
||||
teaweb.successRefresh("保存成功")
|
||||
},
|
||||
height: "27em"
|
||||
})
|
||||
}
|
||||
|
||||
this.deleteChart = function (chartId) {
|
||||
let that = this
|
||||
teaweb.confirm("确定要删除这个图表吗？", function () {
|
||||
that.$post(".delete")
|
||||
.params({ chartId: chartId })
|
||||
.success(function () {
|
||||
teaweb.successRefresh("保存成功")
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,57 @@
|
||||
{$layout}
|
||||
{$template "../item_menu"}
|
||||
{$template "chart_menu"}
|
||||
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<input type="hidden" name="chartId" :value="chart.id"/>
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">图表名称 *</td>
|
||||
<td>
|
||||
<input type="text" maxlength="100" name="name" ref="focus" v-model="chart.name"/>
|
||||
<p class="comment">也会作为有些图表的标题。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>图表类型 *</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="type" v-model="type" @change="changeType">
|
||||
<option v-for="type in types" :value="type.code">{{type.name}}</option>
|
||||
</select>
|
||||
<p class="comment" v-if="typeDefinition != null"><i class="icon" :class="typeDefinition.icon"></i> {{typeDefinition.description}}</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>启用当前图表</td>
|
||||
<td><checkbox name="isOn" value="1" v-model="chart.isOn"></checkbox></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><more-options-indicator></more-options-indicator></td>
|
||||
</tr>
|
||||
<tbody v-show="moreOptionsVisible">
|
||||
<tr>
|
||||
<td>对象数限制</td>
|
||||
<td>
|
||||
<input type="text" name="maxItems" maxlength="2" style="width: 4em" v-model="chart.maxItems"/>
|
||||
<p class="comment">在图表中能显示的最多对象数，0表示不限制。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>忽略空值对象</td>
|
||||
<td>
|
||||
<checkbox name="ignoreEmptyKeys" value="1" checked="checked" v-model="chart.ignoreEmptyKeys"></checkbox>
|
||||
<p class="comment">选中后，空的对象值不会在图表中出现。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>忽略其他对象</td>
|
||||
<td>
|
||||
<values-box name="ignoredKeys" :values="chart.ignoredKeys"></values-box>
|
||||
<p class="comment">这些对象不会在图表中出现。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,17 @@
|
||||
Tea.context(function () {
|
||||
this.type = this.chart.type
|
||||
this.typeDefinition = null
|
||||
|
||||
this.$delay(function () {
|
||||
this.changeType()
|
||||
})
|
||||
|
||||
this.changeType = function () {
|
||||
let that = this
|
||||
this.typeDefinition = this.types.$find(function (k, v) {
|
||||
return v.code == that.type
|
||||
})
|
||||
}
|
||||
|
||||
this.success = NotifySuccess("保存成功", Tea.url(".chart", {chartId: this.chart.id}))
|
||||
})
|
||||
Reference in New Issue
Block a user