update
This commit is contained in:
71
module/Application/view/dashboard/analysis.phtml
Normal file
71
module/Application/view/dashboard/analysis.phtml
Normal file
@ -0,0 +1,71 @@
|
||||
<?php
|
||||
$this->layout('layout/dashboardLayout');
|
||||
?>
|
||||
|
||||
<div id="app">
|
||||
<div id="main" style="width: 100%;height:400px;"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, reactive, onMounted } = Vue
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const state = reactive({
|
||||
dataProvider: {},
|
||||
searchDataProvider: {
|
||||
params: '1'
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
var chartDom = document.getElementById('main');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
title: {
|
||||
text: '请求数量'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['00-01', '01-02', '02-03', '03-04', '04-05', '05-06', '06-07', '07-08', '08-09', '09-10', '10-11', '11-12', '12-13','13-14', '14-15', '15-16', '16-17', '17-18', '18-19', '19-20', '20-21', '21-22', '22-23']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
<?php foreach ($data as $item): ?>
|
||||
{
|
||||
name: '<?= $item['name'] ?>',
|
||||
data: [<?= implode(',', $item['data']) ?>],
|
||||
type: 'line'
|
||||
},
|
||||
<?php endforeach; ?>
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
})
|
||||
|
||||
function fetchData() {
|
||||
fetch('/api/dashboard/form-log', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
},
|
||||
body: Qs.stringify(state.searchDataProvider)
|
||||
}).then(res => res.json()).then(res => {
|
||||
state.dataProvider = res.data
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
return {
|
||||
fetchData,
|
||||
state
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
105
module/Application/view/dashboard/analysisResponseTime.phtml
Normal file
105
module/Application/view/dashboard/analysisResponseTime.phtml
Normal file
@ -0,0 +1,105 @@
|
||||
<?php
|
||||
$this->layout('layout/dashboardLayout');
|
||||
?>
|
||||
|
||||
<div id="app">
|
||||
<div id="main" style="width: 100%;height:400px;"></div>
|
||||
<div class="panel panel-default">
|
||||
<!-- Table -->
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px">id</th>
|
||||
<th>请求参数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in state.dataProvider">
|
||||
<td>{{ index }}</td>
|
||||
<td>{{ item }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, reactive, onMounted } = Vue
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const state = reactive({
|
||||
dataProvider: {},
|
||||
searchDataProvider: {
|
||||
params: '1'
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
var chartDom = document.getElementById('main');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
option = {
|
||||
color: ['#91cc75', '#ee6666'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {},
|
||||
xAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['<?= implode("','", $title) ?>']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '正常请求',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
data: [<?= implode(',', \Application\Service\Extension\Helper\ArrayHelper::getColumn($data, 'normal')) ?>]
|
||||
},
|
||||
{
|
||||
name: '慢请求',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
data: [<?= implode(',', \Application\Service\Extension\Helper\ArrayHelper::getColumn($data, 'slow')) ?>]
|
||||
},
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.on('click', function(event) {
|
||||
console.log(event.name)
|
||||
fetchData(event.name)
|
||||
});
|
||||
})
|
||||
|
||||
function fetchData(url) {
|
||||
fetch('/api/dashboard/analysisResponseTime?url=' + url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
},
|
||||
body: Qs.stringify(state.searchDataProvider)
|
||||
}).then(res => res.json()).then(res => {
|
||||
state.dataProvider = res.data
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
return {
|
||||
fetchData,
|
||||
state
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
95
module/Application/view/dashboard/exception.phtml
Normal file
95
module/Application/view/dashboard/exception.phtml
Normal file
@ -0,0 +1,95 @@
|
||||
<?php
|
||||
$this->layout('layout/dashboardLayout');
|
||||
?>
|
||||
|
||||
<div id="app">
|
||||
<div class="panel panel-default">
|
||||
<div class="navbar-form" role="search">
|
||||
<div class="form-group">
|
||||
<input v-model="state.searchDataProvider.date" type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default" @click="fetchData()">Submit</button>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>path</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in state.dataProvider.files">
|
||||
<td>
|
||||
<span class="detail" @click="detail(item, index)">{{ item }}</span>
|
||||
<div ref="detailWrapper" style="white-space: pre">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<style scoped>
|
||||
.detail{
|
||||
cursor: pointer;
|
||||
}
|
||||
.detail:hover{
|
||||
color: #0000FF;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const { createApp, reactive, ref } = Vue
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const detailWrapper = ref(null)
|
||||
const state = reactive({
|
||||
dataProvider: {
|
||||
files: <?= json_encode($files) ?>,
|
||||
},
|
||||
searchDataProvider: {
|
||||
date: '<?= date('Y-m-d', time()) ?>'
|
||||
}
|
||||
})
|
||||
|
||||
function fetchData() {
|
||||
fetch('/api/dashboard/exception', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
},
|
||||
body: Qs.stringify(state.searchDataProvider)
|
||||
}).then(res => res.json()).then(res => {
|
||||
state.dataProvider.files = res.data
|
||||
this.detailWrapper.forEach(element => {
|
||||
element.innerHTML = '';
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function detail(path, index) {
|
||||
console.log('点了', index)
|
||||
fetch('/api/dashboard/exception/detail', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
},
|
||||
body: Qs.stringify({
|
||||
path: path
|
||||
})
|
||||
}).then(res => res.json()).then(res => {
|
||||
// state.dataProvider = res.data
|
||||
this.detailWrapper[index].innerHTML = res.data[0]
|
||||
})
|
||||
}
|
||||
return {
|
||||
detailWrapper,
|
||||
detail,
|
||||
fetchData,
|
||||
state
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
62
module/Application/view/dashboard/fileTimestamp.phtml
Normal file
62
module/Application/view/dashboard/fileTimestamp.phtml
Normal file
@ -0,0 +1,62 @@
|
||||
<?php
|
||||
$this->layout('layout/dashboardLayout');
|
||||
?>
|
||||
|
||||
<div id="app">
|
||||
<div class="navbar-form" role="search">
|
||||
<div class="form-group">
|
||||
<input v-model="state.searchDataProvider.path" type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default" @click="fetchData">Submit</button>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<!-- Table -->
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>path</th>
|
||||
<th>updated_time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in state.dataProvider">
|
||||
<td>{{ item.path }}</td>
|
||||
<td>{{ item.timestamp }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, reactive } = Vue
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const state = reactive({
|
||||
dataProvider: {},
|
||||
searchDataProvider: {
|
||||
path: '/module/Application'
|
||||
}
|
||||
})
|
||||
|
||||
function fetchData() {
|
||||
fetch('/api/dashboard/file-timestamp', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
},
|
||||
body: Qs.stringify(state.searchDataProvider)
|
||||
}).then(res => res.json()).then(res => {
|
||||
state.dataProvider = res.data
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
return {
|
||||
fetchData,
|
||||
state
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
61
module/Application/view/dashboard/formLog.phtml
Normal file
61
module/Application/view/dashboard/formLog.phtml
Normal file
@ -0,0 +1,61 @@
|
||||
<?php
|
||||
$this->layout('layout/dashboardLayout');
|
||||
?>
|
||||
|
||||
<div id="app">
|
||||
<div class="navbar-form" role="search">
|
||||
<div class="form-group">
|
||||
主键ID:
|
||||
<input v-model="state.searchDataProvider.params" type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default" @click="fetchData">Go!</button>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<!-- Table -->
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in state.dataProvider">
|
||||
<td>{{ item }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, reactive } = Vue
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const state = reactive({
|
||||
dataProvider: {},
|
||||
searchDataProvider: {
|
||||
params: '1'
|
||||
}
|
||||
})
|
||||
|
||||
function fetchData() {
|
||||
fetch('/api/dashboard/form-log', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
},
|
||||
body: Qs.stringify(state.searchDataProvider)
|
||||
}).then(res => res.json()).then(res => {
|
||||
state.dataProvider = res.data
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
return {
|
||||
fetchData,
|
||||
state
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
59
module/Application/view/dashboard/index.phtml
Normal file
59
module/Application/view/dashboard/index.phtml
Normal file
@ -0,0 +1,59 @@
|
||||
<?php
|
||||
$this->layout('layout/dashboardLayout');
|
||||
?>
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail">
|
||||
<div class="caption">
|
||||
<a href="/dashboard/exception"><h3>错误日志: <?= $filesCount ?? 0 ?></h3></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail">
|
||||
<div class="caption">
|
||||
<a href="/dashboard/form-log"><h3>表单日志</h3></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail">
|
||||
<div class="caption">
|
||||
<a href="/dashboard/file-timestamp"><h3>文件更新时间</h3></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail">
|
||||
<div class="caption">
|
||||
<a href="/dashboard/redis"><h3>redis</h3></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail">
|
||||
<div class="caption">
|
||||
<h3>单元测试</h3>
|
||||
<!-- <a href="/dashboard/unit-test"><h3>单元测试</h3></a>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail">
|
||||
<div class="caption">
|
||||
<a href="/dashboard/analysis"><h3>访问统计</h3></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail">
|
||||
<div class="caption">
|
||||
<a href="/dashboard/analysis-response-time"><h3>性能统计</h3></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
let token = sessionStorage.getItem('token');
|
||||
document.cookie = `token=${token}`;
|
||||
</script>
|
||||
60
module/Application/view/dashboard/redis.phtml
Normal file
60
module/Application/view/dashboard/redis.phtml
Normal file
@ -0,0 +1,60 @@
|
||||
<?php
|
||||
$this->layout('layout/dashboardLayout');
|
||||
?>
|
||||
|
||||
<div id="app">
|
||||
<div class="navbar-form" role="search">
|
||||
<div class="form-group">
|
||||
<input v-model="state.searchDataProvider.params" type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default" @click="fetchData">Submit</button>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<!-- Table -->
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in state.dataProvider">
|
||||
<td>{{ item }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, reactive } = Vue
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const state = reactive({
|
||||
dataProvider: {},
|
||||
searchDataProvider: {
|
||||
params: 'get key'
|
||||
}
|
||||
})
|
||||
|
||||
function fetchData() {
|
||||
fetch('/api/dashboard/redis', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
},
|
||||
body: Qs.stringify(state.searchDataProvider)
|
||||
}).then(res => res.json()).then(res => {
|
||||
state.dataProvider = res.data
|
||||
console.log(res)
|
||||
})
|
||||
}
|
||||
return {
|
||||
fetchData,
|
||||
state
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
80
module/Application/view/dashboard/unitTest.phtml
Normal file
80
module/Application/view/dashboard/unitTest.phtml
Normal file
@ -0,0 +1,80 @@
|
||||
<?php
|
||||
$this->layout('layout/dashboardLayout');
|
||||
?>
|
||||
|
||||
<div id="app">
|
||||
<div class="panel panel-default">
|
||||
<div class="navbar-form" role="search">
|
||||
<button :disabled="state.isTesting" type="submit" class="btn btn-default" @click="fetchData()">测试</button>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<div ref="response"style="white-space: pre">
|
||||
{{ state.dataProvider }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style scoped>
|
||||
.detail{
|
||||
cursor: pointer;
|
||||
}
|
||||
.detail:hover{
|
||||
color: #0000FF;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const { createApp, reactive, ref } = Vue
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const response = ref(null)
|
||||
const state = reactive({
|
||||
isTesting: false,
|
||||
dataProvider: '',
|
||||
searchDataProvider: {
|
||||
date: '<?= date('Y-m-d', time()) ?>'
|
||||
}
|
||||
})
|
||||
|
||||
function fetchData() {
|
||||
state.isTesting = true;
|
||||
state.dataProvider = ''
|
||||
fetch('/api/dashboard/unitTest', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
},
|
||||
body: Qs.stringify(state.searchDataProvider)
|
||||
}).then(res => res.text()).then(res => {
|
||||
state.dataProvider = res
|
||||
}).finally(() => {
|
||||
state.isTesting = false
|
||||
})
|
||||
}
|
||||
|
||||
// function detail(path, index) {
|
||||
// console.log('点了', index)
|
||||
// fetch('/api/dashboard/exception/detail', {
|
||||
// method: 'POST',
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
||||
// },
|
||||
// body: Qs.stringify({
|
||||
// path: path
|
||||
// })
|
||||
// }).then(res => res.json()).then(res => {
|
||||
// // state.dataProvider = res.data
|
||||
// this.detailWrapper[index].innerHTML = res.data[0]
|
||||
// })
|
||||
// }
|
||||
return {
|
||||
response,
|
||||
fetchData,
|
||||
state
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
Reference in New Issue
Block a user