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="banner">
<div>
<p>가공도구 마모</p>
<p>데이터 시각화</p>
</div>
</div>
<div class="chart-zone">
<div class="content-box">
<div class="chart-title">
<div class="flex">
<p>월별 평균 길이 Z축 마모</p>
<select name="" id="" v-model="month_tl_no" @change="monthChange()">
<option v-for="(tool, index) in tools" :key="index" :value="tool">{{ tool }}</option>
</select>
</div>
</div>
<VerticalBarChart :chartData="monthData" xField="ormpm_month" yField="avg_ofs5" />
</div>
<div class="content-box">
<div class="chart-title">
<div class="flex">
<p>시간대별 평균 길이 Z축 마모</p>
<select name="" id="" v-model="time_tl_no" @change="timeChange()">
<option v-for="(tool, index) in tools" :key="index" :value="tool">{{ tool }}</option>
</select>
</div>
</div>
<VerticalBarChart :chartData="timeData" :xField="'ormpm_hour'" :yField="'avg_ofs5'" :color="['#1c7ed6','#74c0fc','#1864ab']" />
</div>
<div class="content-box">
<div class="chart-title">
<div>
<p>가동시간에 따른 각 툴별(도구) 길이 Z축 마모</p>
</div>
</div>
<LineChart :chartData="toolZWearData" :xField="'search_date'" />
</div>
<div class="content-box">
<div class="chart-title">
<div>
<p>가동시간에 따른 각 툴별(도구) 길이 X축 형상마모</p>
</div>
</div>
<LineChart :chartData="toolXWearData" :xField="'search_date'" />
</div>
</div>
</div>
</template>
<script>
import VerticalBarChart from '../../components/VerticalBarChart.vue';
import LineChart from '../../components/LineChart.vue';
import axios from 'axios';
export default {
data() {
return {
tools: ["T1", "T2", "T3", "T4", "T5", "T6", "T7", "T8"],
month_tl_no: "T4",
time_tl_no: "T4",
// 월별 데이터
emptyData: [],
monthData: [],
// 시간대별
timeData: [],
toolZWearData: [],
toolXWearData: [],
}
},
methods: {
timeZWear: function(){
const vm = this;
axios({
url: '/hwaSin/timeZWear.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: {tl_no : vm.time_tl_no}
}).then(function(response) {
vm.timeData = response.data;
}).catch(function() {
alert("시간대별 평균 길이 Z축 마모 조회 오류, 관리자에게 문의 바랍니다.")
})
},
timeChange: function() {
this.timeZWear();
},
monthZWear: function(){
const vm = this;
axios({
url: '/hwaSin/monthZWear.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
data: {tl_no : vm.month_tl_no}
}).then(function(response) {
vm.monthData = response.data;
}).catch(function() {
alert("월별 평균 길이 Z축 마모 조회 오류, 관리자에게 문의 바랍니다.")
})
},
monthChange: function() {
this.monthZWear();
},
toolWear: function() {
const vm = this;
axios({
url: '/hwaSin/toolWear.json',
method: 'post',
hearder: {
'Content-Type': "application/json; charset=UTF-8",
},
}).then(function(response) {
vm.toolZWearData = response.data.toolZWear;
vm.toolXWearData = response.data.toolXWear;
}).catch(function() {
alert("가동시간에 따른 각 툴별(도구) 길이 Z축 마모 조회 오류, 관리자에게 문의 바랍니다.")
})
},
dataSet: function () {
this.emptyData = this.monthToolData;
this.emptyTimeData = this.timeData;
this.emptyNetData = this.netData;
this.emptyLineData = this.lineData;
}
},
watch: {
},
computed: {},
components: {
'VerticalBarChart': VerticalBarChart,
'LineChart': LineChart
},
mounted() {
this.dataSet();
this.timeZWear();
this.monthZWear();
this.toolWear();
}
}
</script>