<template>
<div>
<h3>일별 박스오피스</h3>
<el-table :data="items" size="mini" style="width: 100%;">
<el-table-column type="index" width="50" />
<el-table-column label="순위" width="60" style="margin:auto ;" >
<template #default="scope">
<el-input size="mini" type="text" v-model="scope.row.rank" />
</template>
</el-table-column>
<el-table-column label="순위변동" width="70">
<template #default="scope">
<el-input size="mini" type="text" style="width:60; margin:auto ;" v-model="scope.row.rankInten" />
</template>
</el-table-column>
<el-table-column label="올드앤뉴" width="70" >
<template #default="scope">
<el-input size="mini" type="text" v-model="scope.row.rankOldAndNew" />
</template>
</el-table-column>
<el-table-column label="Cd" width="auto" >
<template #default="scope">
<el-input size="mini" type="text" v-model="scope.row.movieCd" />
</template>
</el-table-column>
<el-table-column label="제목" width="auto" >
<template #default="scope">
<el-input size="mini" type="text" v-model="scope.row.movieNm" />
</template>
</el-table-column>
<el-table-column label="개봉일" width="auto" >
<template #default="scope">
<el-input size="mini" type="text" v-model="scope.row.openDt" />
</template>
</el-table-column>
<el-table-column label="Amt" width="auto" >
<template #default="scope">
<el-input size="mini" type="text" v-model="scope.row.salesAmt" />
</template>
</el-table-column>
<el-table-column label="Share" width="auto" >
<template #default="scope">
<el-input size="mini" type="text" v-model="scope.row.salesShare" />
</template>
</el-table-column>
<el-table-column label="Inten" width="auto" >
<template #default="scope">
<el-input size="mini" type="text" v-model="scope.row.salesInten" />
</template>
</el-table-column>
</el-table>
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>순위</th>
<th>순위변동</th>
<th>올드앤뉴</th>
<th>Cd</th>
<th>영화제목</th>
<th>개봉일</th>
<th>salesAmt</th>
<th>salesShare</th>
<th>saleslnten</th>
<th>매출 추이</th>
<th>salesAcc</th>
<th>audiCnt</th>
<th>audilnten</th>
<th>audiChange</th>
<th>audiAcc</th>
<th>scrnCnt</th>
<th>showCnt</th>
</tr>
</thead>
<tbody>
<tr v-for="tmp in items" v-bind:key="tmp">
<td>{{ tmp.rnum }}</td>
<td>{{ tmp.rank }}</td>
<td>{{ tmp.rankInten }}</td>
<td>{{ tmp.rankOldAndNew }}</td>
<td>{{ tmp.movieCd }}</td>
<td>{{ tmp.movieNm }}</td>
<td>{{ tmp.openDt }}</td>
<td>{{ tmp.salesAmt }}</td>
<td>{{ tmp.salesShare }}</td>
<td>{{ tmp.salesInten }}</td>
<td>{{ tmp.salesChange }}</td>
<td>{{ tmp.salesAcc }}</td>
<td>{{ tmp.audiCnt }}</td>
<td>{{ tmp.audiInten }}</td>
<td>{{ tmp.audiChange }}</td>
<td>{{ tmp.audiAcc }}</td>
<td>{{ tmp.scrnCnt }}</td>
<td v-text="tmp.showCnt"></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
created() {
this.handleData();
},
data() {
return {
items : [],
}
},
methods:{
async handleData() {
const url = "http://ihongss.com/json/exam21.json";
const headers = { 'Content-type':'application/json' };
const response = await axios.get(url, headers);
console.log(response);
if(response.status === 200 && response.data.boxOfficeResult.showRange === '20120101~20120101'){
this.items = response.data.boxOfficeResult.dailyBoxOfficeList;
}
}
}
}
</script>
<style scoped>
</style>