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
File name
Commit message
Commit date
<template>
<div v-show="isModalOpen" class="modal-wrapper">
<div class="modal-container">
<div class="modal-title">
<div class="flex justify-between align-center">
<h2>센서 알람 설정</h2>
<button class="close-btn" @click="closeModal"><svg-icon type="mdi" :width="20" :height="20" :path="closePath"></svg-icon></button>
</div>
</div>
<div class="modal-content-monthly">
<div class="flex justify-between align-center">
<div class="count-zone">
<p>총 <span>{{this.jobItem.itm.dataCheckItems.length}}</span>건 중 <span>{{selectCount}}</span>건 선택</p>
</div>
<div class="cunt-selectZone">
<p>중복알람 주기설정</p>
<select v-model="jobItm.itm_option_string">
<option value="1">1분</option>
<option value="5">5분</option>
</select>
</div>
</div>
<div class="table-zone">
<table class="list-table">
<!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
<colgroup>
<col style="width: 22.5%;">
<col style="width: 22.5%;">
<col style="width: 22.5%;">
<col style="width: 22.5%;">
<col style="width: 10%;">
</colgroup>
<thead>
<tr>
<th>컬럼명</th>
<th>한글명</th>
<th>MIN</th>
<th>MAX</th>
<th>사용여부</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, indx) in jobItem.itm.dataCheckItems" :key="indx">
<td>{{item.column_display}}</td>
<td><input type="text" class="full-input" v-model="item.column_origin"/></td>
<td><input type="text" class="full-input" v-model="item.min_value"/></td>
<td><input type="text" class="full-input" v-model="item.max_value"/></td>
<td><input type="checkbox" v-model="item.use_at"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-end flex justify-end">
<button class="orange-btn small-btn" @click="closeModal">닫기</button>
<button class="blue-btn small-btn" @click="closeModal">확인</button>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiClose } from '@mdi/js';
export default {
name: 'data-check',
props: {
openPopup: {
type: Boolean,
default: false
},
jobItem: {
type: Boolean,
default: null
}
},
data() {
return {
isModalOpen: this.openPopup
, jobItm: this.jobItem
, closePath:mdiClose
}
},
methods: {
// 모달 닫기
closeModal: function () {
this.isModalOpen = false;
this.$emit("closePopup", this.jobItm.indx);
},
dataSetting : function(){
if(this.jobItm.itm.dataCheckItems.length == 0 ){
for(let i = 0 ; i < this.jobItm.front_dataTable.columnDatas.length ; i++){
if(this.jobItm.front_dataTable.columnDatas[i].dataTy == 'INT' ||
this.jobItm.front_dataTable.columnDatas[i].dataTy == 'LONG' ||
this.jobItm.front_dataTable.columnDatas[i].dataTy == 'FLOAT' ||
this.jobItm.front_dataTable.columnDatas[i].dataTy == 'DOUBLE'){
let DataCheckItem = {};
DataCheckItem.order = i;
DataCheckItem.column_origin = this.jobItm.front_dataTable.columnDatas[i].columnNm;
DataCheckItem.column_display = this.jobItm.front_dataTable.columnDatas[i].displyColumnNm;
DataCheckItem.min_value = 0.0;
DataCheckItem.max_value = 1.0;
DataCheckItem.use_at = true;
this.jobItem.itm.dataCheckItems.push(DataCheckItem)
}
}
}
},
resetData : function(){
this.jobItm.front_dataTable.columnDatas = [];
this.dataSetting();
}
},
watch: {
openPopup: function (v) {
this.isModalOpen = v;
},
jobItem: function (v) {
this.jobItm = v;
this.dataSetting();
},
},
computed: {
selectCount: function () {
let count = 0;
for(let i = 0 ; i < this.jobItem.itm.dataCheckItems.length ; i++){
if(this.jobItem.itm.dataCheckItems[i].use_at){
count++;
}
}
return count;
}
},
components: {
'SvgIcon':SvgIcon
},
mounted() {
this.dataSetting();
}
}
</script>