sk_fems_ui commit
This commit is contained in:
unknown
351
components/widget/ComcUseReptWidget.vue
Normal file
351
components/widget/ComcUseReptWidget.vue
Normal file
@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<div class="l-layout">
|
||||
<v-row ref="rowParent">
|
||||
<v-col :cols="12">
|
||||
<v-card class="pa-3 widget-card">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<v-card-title class="pa-0">통신/사용 현황</v-card-title>
|
||||
<v-card-subtitle class="mt-0 pa-0">
|
||||
<v-icon
|
||||
v-show="widgetPrgmId"
|
||||
class="mr-1"
|
||||
size="25"
|
||||
@click="btnAction('widgetCallPage')"
|
||||
>mdi-note-search</v-icon
|
||||
>
|
||||
<v-icon
|
||||
v-show="widgetPopFg"
|
||||
size="25"
|
||||
@click="btnAction('popWidget')"
|
||||
>mdi-plus-box-multiple</v-icon
|
||||
>
|
||||
</v-card-subtitle>
|
||||
</div>
|
||||
<div class="row pt-2 px-2">
|
||||
<v-col :cols="3">
|
||||
<v-banner>
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<v-card-subtitle class="pa-0">전체검침개소</v-card-subtitle>
|
||||
<v-avatar
|
||||
size="36"
|
||||
:color="isDarkMode ? '#2fad35' : '#00c875'"
|
||||
min-width="72"
|
||||
class="font-weight-bold text-color--white-0"
|
||||
>{{ pointUse }}</v-avatar
|
||||
>
|
||||
</div>
|
||||
</v-banner>
|
||||
<component
|
||||
:is="'UnusedStatPopPage'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:pointNoUse="pointNoUse"
|
||||
/>
|
||||
<component
|
||||
:is="'EtcStatPopPage'"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:pointEtc="pointEtc"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="4">
|
||||
<component
|
||||
:ref="gridName01"
|
||||
:is="loadGrid01 ? 'Grid' : null"
|
||||
:gridName="gridName01"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:dataPath="searchParam.ComcUseReptWidget.ComcUseReptWidgetData"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col :cols="5">
|
||||
<div>
|
||||
<component
|
||||
:ref="gridName02"
|
||||
:is="loadGrid02 ? 'Grid' : null"
|
||||
:gridName="gridName02"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
:dataPath="
|
||||
searchParam.ComcUseReptWidget.ComcUseReptWidgetData
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</v-col>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapMutations, mapState } from 'vuex'; // , mapActions
|
||||
import Vue from 'vue';
|
||||
import DateUtility from '~/plugins/dateUtility';
|
||||
import Utility from '~/plugins/utility';
|
||||
import Grid from '~/components/common/Grid';
|
||||
import UnusedStatPopPage from '~/components/common/modal/UnusedStatPopPage';
|
||||
import EtcStatPopPage from '~/components/common/modal/EtcStatPopPage';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
widgetId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
widgetPrgmId: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
widgetPopFg: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
widgetReflashMm: {
|
||||
type: Number,
|
||||
require: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
DateUtility,
|
||||
Grid,
|
||||
UnusedStatPopPage,
|
||||
EtcStatPopPage,
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
searchParam(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
isDarkMode: 'isDarkMode',
|
||||
}),
|
||||
},
|
||||
watch: {},
|
||||
beforeCreate() {
|
||||
this.$store.commit('setWidgetPageData', {
|
||||
prgmId: this.$route.query.prgmId,
|
||||
// defaultData: defaultData,
|
||||
ComcUseReptWidget: { ComcUseReptWidgetData: ComcUseReptWidgetData },
|
||||
});
|
||||
},
|
||||
created() {
|
||||
this.search();
|
||||
this.timer = setInterval(this.search, this.widgetReflashMm);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.clearTimeout(this.timer);
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
pointUse: 0,
|
||||
pointNoUse: 0,
|
||||
pointEtc: 0,
|
||||
gridName01: 'grid01',
|
||||
gridName02: 'grid02',
|
||||
loadGrid01: false,
|
||||
loadGrid02: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setPageData: 'setPageData',
|
||||
setWidgetChartOption: 'setWidgetChartOption',
|
||||
setWidgetGridData: 'setWidgetGridData',
|
||||
setWidgetGridColumn: 'setWidgetGridColumn',
|
||||
setWidgetGridOption: 'setWidgetGridOption',
|
||||
openDashboardWidget: 'openDashboardWidget',
|
||||
}),
|
||||
...mapActions({
|
||||
postApi: 'modules/list/postApi',
|
||||
postApiReturn: 'modules/list/postApiReturn',
|
||||
}),
|
||||
async search() {
|
||||
await this.getReadplcStatus();
|
||||
this.gridInit();
|
||||
},
|
||||
async gridInit() {
|
||||
this.loadGrid01 = false;
|
||||
this.loadGrid02 = false;
|
||||
|
||||
const gridHeight = 180;
|
||||
|
||||
const myOptions = {
|
||||
scrollX: false,
|
||||
};
|
||||
|
||||
var gridOptions = Utility.defaultGridOption(gridHeight);
|
||||
gridOptions.columnOptions.minWidth = 10;
|
||||
gridOptions.columnOptions.maxWidth = 200;
|
||||
|
||||
this.setWidgetGridOption({
|
||||
prgmId: this.$route.query.prgmId,
|
||||
widgetKey: 'ComcUseReptWidget',
|
||||
widgetData: 'ComcUseReptWidgetData',
|
||||
gridKey: this.gridName01,
|
||||
value: gridOptions,
|
||||
});
|
||||
|
||||
this.setWidgetGridOption({
|
||||
prgmId: this.$route.query.prgmId,
|
||||
widgetKey: 'ComcUseReptWidget',
|
||||
widgetData: 'ComcUseReptWidgetData',
|
||||
gridKey: this.gridName02,
|
||||
value: gridOptions,
|
||||
});
|
||||
|
||||
var columnList01 = [
|
||||
// {header:'No', name:"No", width:50, align:"center"},
|
||||
{
|
||||
header: 'readplcId',
|
||||
name: 'readPlcId',
|
||||
align: 'center',
|
||||
hidden: true,
|
||||
},
|
||||
{ header: '미사용개소 ', name: 'readPlcNm', align: 'left' },
|
||||
];
|
||||
|
||||
var columnList02 = [
|
||||
// {header:'No', name:"No", width:50, align:"center"},
|
||||
{
|
||||
header: 'readplcId',
|
||||
name: 'readPlcId',
|
||||
align: 'center',
|
||||
hidden: true,
|
||||
},
|
||||
{ header: '통신이상개소', name: 'readPlcNm', align: 'left' },
|
||||
{ header: '최종검침시간', name: 'readTm', width: 90, align: 'center' },
|
||||
];
|
||||
|
||||
this.setWidgetGridColumn({
|
||||
prgmId: this.$route.query.prgmId,
|
||||
widgetKey: 'ComcUseReptWidget',
|
||||
widgetData: 'ComcUseReptWidgetData',
|
||||
gridKey: this.gridName01,
|
||||
value: columnList01,
|
||||
});
|
||||
|
||||
this.setWidgetGridColumn({
|
||||
prgmId: this.$route.query.prgmId,
|
||||
widgetKey: 'ComcUseReptWidget',
|
||||
widgetData: 'ComcUseReptWidgetData',
|
||||
gridKey: this.gridName02,
|
||||
value: columnList02,
|
||||
});
|
||||
|
||||
await this.getGridData();
|
||||
|
||||
this.loadGrid01 = true;
|
||||
this.loadGrid02 = true;
|
||||
},
|
||||
async getGridData() {
|
||||
// var res1 = [
|
||||
// {"No":1, "readplcId":123, "readPlcNm":"abc"},
|
||||
// {"No":2, "readplcId":123, "readPlcNm":"bcd"},
|
||||
// {"No":3, "readplcId":123, "readPlcNm":"cde"},
|
||||
// ];
|
||||
|
||||
// var res2 = [
|
||||
// {"No":1, "readplcId":123, "readPlcNm":"aaa"},
|
||||
// {"No":2, "readplcId":123, "readPlcNm":"bbb"},
|
||||
// {"No":3, "readplcId":123, "readPlcNm":"ccc"},
|
||||
// ];
|
||||
var res1;
|
||||
var res2;
|
||||
|
||||
res1 = await this.postApiReturn({
|
||||
apiKey: 'selectUnusedReadPlc',
|
||||
resKey: 'unusedData',
|
||||
sendParam: {},
|
||||
});
|
||||
|
||||
res2 = await this.postApiReturn({
|
||||
apiKey: 'selectEtcReadPlc',
|
||||
resKey: 'etcData',
|
||||
sendParam: {},
|
||||
});
|
||||
|
||||
res1.map((item, index) => {
|
||||
item.No = index + 1;
|
||||
});
|
||||
|
||||
res2.map((item, index) => {
|
||||
item.No = index + 1;
|
||||
});
|
||||
|
||||
this.setWidgetGridData({
|
||||
prgmId: this.$route.query.prgmId,
|
||||
widgetKey: 'ComcUseReptWidget',
|
||||
widgetData: 'ComcUseReptWidgetData',
|
||||
gridKey: this.gridName01,
|
||||
value: res1,
|
||||
});
|
||||
|
||||
this.setWidgetGridData({
|
||||
prgmId: this.$route.query.prgmId,
|
||||
widgetKey: 'ComcUseReptWidget',
|
||||
widgetData: 'ComcUseReptWidgetData',
|
||||
gridKey: this.gridName02,
|
||||
value: res2,
|
||||
});
|
||||
},
|
||||
async getReadplcStatus() {
|
||||
const res = await this.postApiReturn({
|
||||
apiKey: 'selectReadplcStatus',
|
||||
resKey: 'pointData',
|
||||
sendParam: {},
|
||||
});
|
||||
|
||||
res.forEach((item, idx) => {
|
||||
if (item.type == 'ALL') {
|
||||
this.pointUse = item.cnt;
|
||||
}
|
||||
if (item.type == 'UNUSED') {
|
||||
this.pointNoUse = item.cnt;
|
||||
}
|
||||
if (item.type == 'ABNORMAL') {
|
||||
this.pointEtc = item.cnt;
|
||||
}
|
||||
});
|
||||
},
|
||||
btnAction(action) {
|
||||
switch (action) {
|
||||
case 'popWidget':
|
||||
this.openDashboardWidget({
|
||||
prgmId: this.$route.query.prgmId,
|
||||
widgetId: this.widgetId,
|
||||
});
|
||||
break;
|
||||
case 'widgetCallPage':
|
||||
this.$parent.$parent.$parent.openWidgetPrgm(this.widgetId);
|
||||
break;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const ComcUseReptWidgetData = {
|
||||
grid01: {
|
||||
data: [],
|
||||
column: [],
|
||||
option: {},
|
||||
},
|
||||
grid02: {
|
||||
data: [],
|
||||
column: [],
|
||||
option: {},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-avatar {
|
||||
border-radius: 21px;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
.v-virtual-scroll-wrapper {
|
||||
overflow-y: auto;
|
||||
max-height: 210px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user