File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="chart-wrap">
<div class="banner2">
<div>
<p style="color:#1c7ed6">물류운송</p>
<p style="color:#0d426d">데이터 시각화</p>
</div>
</div>
<div class="chart-zone">
<div class="content-box">
<div class="chart-title">
<div class="flex">
<p>각 시도별 평균, 최소, 최대 이동거리</p>
<select name="" id="" v-model="distanceMonth" @change="distanceMonthChange()">
<option :value=null disabled>전체</option>
<option v-for="(month, index) in months" :key="index" :value="month">{{ month }}월</option>
</select>
</div>
</div>
<MultiBarChart :setData="distanceList" :mapping="keyMapping" columnX="city" :color="['#e67700', '#339af0']" />
<table v-if="distanceList.length != 0">
<tr>
<th></th>
<th v-for="(item, index) in distanceList" :key="index">{{ item.city }}</th>
</tr>
<tr>
<th class="max-title">최대</th>
<td v-for="(item, index) in distanceList" :key="index">{{ item.maximum }}</td>
</tr>
<tr>
<th class="avg-title">평균</th>
<td v-for="(item, index) in distanceList" :key="index">{{ item.average }}</td>
</tr>
<tr>
<th class="min-title">최소</th>
<td v-for="(item, index) in distanceList" :key="index">{{ item.minimum }}</td>
</tr>
</table>
</div>
<div class="content-box">
<div class="chart-title">
<div class="flex">
<p>각 시도별 평균, 최소, 최대 소요시간</p>
<select name="" id="" v-model="timeMonth" @change="useTimeMonthChange()">
<option :value=null disabled>전체</option>
<option v-for="(month, index) in months" :key="index" :value="month">{{ month }}월</option>
</select>
</div>
</div>
<MultiBarChart :setData="useTimeList" :mapping="keyMapping" columnX="city" :color="['#e67700', '#339af0']" />
<table v-if="useTimeList.length != 0">
<tr>
<th></th>
<th v-for="(item, index) in useTimeList" :key="index">{{ item.city }}</th>
</tr>
<tr>
<th class="max-title">최대</th>
<td v-for="(item, index) in useTimeList" :key="index">{{ item.maximum }}</td>
</tr>
<tr>
<th class="avg-title">평균</th>
<td v-for="(item, index) in useTimeList" :key="index">{{ item.average }}</td>
</tr>
<tr>
<th class="min-title">최소</th>
<td v-for="(item, index) in useTimeList" :key="index">{{ item.minimum }}</td>
</tr>
</table>
</div>
<div class="content-box">
<div class="chart-title">
<div>
<p>지역별 배송 건수</p>
</div>
</div>
<PieChart :setData="deliveriesCountList" />
</div>
<div class="content-box">
<div class="chart-title">
<div>
<p>지역별 평균 이동 시간</p>
</div>
</div>
<NetworkingChart :setData="travelTimeList" />
</div>
</div>
</div>
</template>
<script>
import MultiBarChart from '../../components/MultiBarChart.vue';
import PieChart from '../../components/PeiChart.vue';
import NetworkingChart from '../../components/NetworkingChart.vue';
import axios from 'axios';
export default {
data() {
return {
months: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
keyMapping : {
maximum: '최대',
minimum: '최소',
average: '평균'
},
distanceMonth: null,
timeMonth: null,
distanceList: [],
useTimeList: [],
deliveriesCountList: [],
travelTimeList: {},
}
},
methods: {
travelDistance: function(){
const vm = this;
axios({
url: '/meatKorea/travelDistance.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: {distanceMonth : vm.distanceMonth}
}).then(function(response) {
vm.distanceList = response.data;
console.log('distanceList', vm.distanceList.length)
}).catch(function() {
alert("각 시도별 평균, 최소, 최대 이동거리 조회 오류, 관리자에게 문의 바랍니다.")
})
},
distanceMonthChange: function() {
this.travelDistance();
},
useTime: function(){
const vm = this;
axios({
url: '/meatKorea/useTime.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: {timeMonth : vm.timeMonth}
}).then(function(response) {
vm.useTimeList = response.data;
}).catch(function() {
alert("각 시도별 평균, 최소, 최대 소요시간 조회 오류, 관리자에게 문의 바랍니다.")
})
},
useTimeMonthChange: function() {
this.useTime();
},
deliveriesCount: function(){
const vm = this;
axios({
url: '/meatKorea/deliveriesCount.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
}).then(function(response) {
vm.deliveriesCountList = response.data;
}).catch(function() {
alert("지역별 배송 건수 조회 오류, 관리자에게 문의 바랍니다.")
})
},
travelTime: function(){
const vm = this;
axios({
url: '/meatKorea/travelTime.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
}).then(function(response) {
const travelTime = {};
travelTime.city = '경북영천시고경면삼포리';
travelTime.children = response.data;
vm.travelTimeList = travelTime;
}).catch(function() {
alert("지역별 평균 이동 시간 조회 오류, 관리자에게 문의 바랍니다.")
})
},
},
watch: {
},
computed: {},
components: {
'MultiBarChart': MultiBarChart,
'PieChart': PieChart,
'NetworkingChart':NetworkingChart
},
mounted() {
this.travelDistance();
this.useTime();
this.deliveriesCount();
this.travelTime();
}
}
</script>