96 lines
2.9 KiB
PHTML
96 lines
2.9 KiB
PHTML
<?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>
|