106 lines
3.5 KiB
PHTML
106 lines
3.5 KiB
PHTML
<?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>
|