mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-30 08:40:26 +08:00
实现基本的图表管理
This commit is contained in:
刘祥超
@@ -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>
|
||||
45
web/views/@default/servers/metrics/charts/chart.html
Normal file
45
web/views/@default/servers/metrics/charts/chart.html
Normal file
@@ -0,0 +1,45 @@
|
||||
{$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.widthDiv == 0">100%</span>
|
||||
<span v-else>1/{{chart.widthDiv}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>对象数限制</td>
|
||||
<td>
|
||||
<span v-if="chart.maxItems <= 0" class="disabled">没有限制</span>
|
||||
<span v-else>{{chart.maxItems}}</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-period-unit="item.periodUnit"></metric-chart>
|
||||
</metric-board>
|
||||
63
web/views/@default/servers/metrics/charts/chart.js
Normal file
63
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]
|
||||
})
|
||||
})
|
||||
})
|
||||
49
web/views/@default/servers/metrics/charts/createPopup.html
Normal file
49
web/views/@default/servers/metrics/charts/createPopup.html
Normal file
@@ -0,0 +1,49 @@
|
||||
{$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>宽度</td>
|
||||
<td>
|
||||
<select class="ui dropdown auto-width" name="widthDiv">
|
||||
<option value="0">100%</option>
|
||||
<option value="2">1/2</option>
|
||||
<option value="3">1/3</option>
|
||||
<option value="4">1/4</option>
|
||||
</select>
|
||||
</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>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
15
web/views/@default/servers/metrics/charts/createPopup.js
Normal file
15
web/views/@default/servers/metrics/charts/createPopup.js
Normal file
@@ -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
|
||||
})
|
||||
}
|
||||
})
|
||||
35
web/views/@default/servers/metrics/charts/index.html
Normal file
35
web/views/@default/servers/metrics/charts/index.html
Normal file
@@ -0,0 +1,35 @@
|
||||
{$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>宽度</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>
|
||||
<span v-if="chart.widthDiv > 0">1/{{chart.widthDiv}}</span>
|
||||
<span v-else>1</span>
|
||||
</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
web/views/@default/servers/metrics/charts/index.js
Normal file
21
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("保存成功")
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
54
web/views/@default/servers/metrics/charts/update.html
Normal file
54
web/views/@default/servers/metrics/charts/update.html
Normal file
@@ -0,0 +1,54 @@
|
||||
{$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>
|
||||
<select class="ui dropdown auto-width" name="widthDiv" v-model="chart.widthDiv">
|
||||
<option value="0">100%</option>
|
||||
<option value="2">1/2</option>
|
||||
<option value="3">1/3</option>
|
||||
<option value="4">1/4</option>
|
||||
</select>
|
||||
</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>
|
||||
</tbody>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
17
web/views/@default/servers/metrics/charts/update.js
Normal file
17
web/views/@default/servers/metrics/charts/update.js
Normal file
@@ -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