347 lines
8.5 KiB
Vue
347 lines
8.5 KiB
Vue
<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">
|
|
<component
|
|
ref="MainReadReptReadObjMultiPop"
|
|
:is="'MainReadReptReadObjMultiPop'"
|
|
:parentPrgmId="parentPrgmId"
|
|
:eqpmYn="0"
|
|
:popTitle="'검침대상 목록'"
|
|
:widgetId="this.widgetId"
|
|
@chDialogViewmainReadReptWidget="dialogViewChange"
|
|
/>
|
|
<v-tooltip bottom>
|
|
<template v-slot:activator="{ on, attrs }">
|
|
<v-icon
|
|
class="mr-1"
|
|
size="25"
|
|
v-bind="attrs"
|
|
v-on="on"
|
|
@click="readObjDialog"
|
|
>mdi-tooltip-plus</v-icon
|
|
>
|
|
</template>
|
|
<span>품질</span>
|
|
</v-tooltip>
|
|
<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="px-2 pt-2">
|
|
<v-banner single-line :style="{ paddingRight: '10px' }">
|
|
<v-row justify="space-between" align="center" no-gutters>
|
|
<v-col cols="auto" align="center">
|
|
<p class="body-2 mb-0">No</p>
|
|
</v-col>
|
|
<v-col cols="4" align="center">
|
|
검침개소
|
|
</v-col>
|
|
<v-col cols="2" align="center">
|
|
<p class="body-2 mb-0">kW</p>
|
|
</v-col>
|
|
<v-col cols="2" align="center">
|
|
상태
|
|
</v-col>
|
|
<v-col
|
|
cols="2"
|
|
align="center"
|
|
v-for="(item, index) in readObjIdList"
|
|
:key="item.readPlcId"
|
|
:class="{
|
|
'v-banner--last': index === readObjIdList.length - 1,
|
|
}"
|
|
>
|
|
{{ item.readObjNm }}
|
|
</v-col>
|
|
</v-row>
|
|
</v-banner>
|
|
<div
|
|
class="v-virtual-scroll-wrapper"
|
|
style="padding-right: '5px'; overflow-y: auto; max-height:185px"
|
|
>
|
|
<v-banner
|
|
single-line
|
|
v-for="(item, index) in mainReadPlcData"
|
|
:key="item.readPlcId"
|
|
:class="{
|
|
'v-banner--last': index === mainReadPlcData.length - 1,
|
|
}"
|
|
>
|
|
<v-row justify="space-between" align="center" no-gutters>
|
|
<v-col cols="auto">
|
|
<p class="body-2 mb-0">{{ item.rowNum }}</p>
|
|
</v-col>
|
|
<v-col cols="4">
|
|
<div
|
|
class="d-flex align-center"
|
|
style="white-space: normal"
|
|
>
|
|
<p class="body-2 mb-0 ml-2">{{ item.readPlcNm }}</p>
|
|
</div>
|
|
</v-col>
|
|
<v-col cols="2" align="center">
|
|
<p class="body-2 mb-0">
|
|
{{
|
|
String(Math.floor(item.instantVal)).replace(
|
|
/\B(?=(\d{3})+(?!\d))/g,
|
|
',',
|
|
)
|
|
}}
|
|
</p>
|
|
</v-col>
|
|
<v-col cols="2" align="center">
|
|
<v-icon
|
|
:color="
|
|
isDarkMode
|
|
? tableDataGetDarkColorByState(item.stat)
|
|
: tableDataGetLightColorByState(item.stat)
|
|
"
|
|
size="8"
|
|
class="mr-1"
|
|
>mdi-circle</v-icon
|
|
>
|
|
<span class="body-2">{{ item.stat }}</span>
|
|
</v-col>
|
|
<v-col
|
|
cols="2"
|
|
align="center"
|
|
v-for="(item2, index) in readObjIdList"
|
|
:key="item2.readPlcId"
|
|
:class="{
|
|
'v-banner--last': index === readObjIdList.length - 1,
|
|
}"
|
|
>
|
|
<span class="body-2">{{ item[item2.readObjId] }}</span>
|
|
</v-col>
|
|
</v-row>
|
|
</v-banner>
|
|
</div>
|
|
</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 Chart from '~/components/common/Chart';
|
|
import MainReadReptReadObjMultiPop from '~/components/common/modal/MainReadReptReadObjMultiPop';
|
|
|
|
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,
|
|
Chart,
|
|
MainReadReptReadObjMultiPop,
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
searchParam(state) {
|
|
return state.pageData[this.parentPrgmId][this.widgetId][
|
|
this.widgetId + 'Data'
|
|
];
|
|
},
|
|
isDarkMode: 'isDarkMode',
|
|
}),
|
|
},
|
|
watch: {
|
|
energyCd() {
|
|
this.getMainReadPlcStat();
|
|
},
|
|
},
|
|
beforeCreate() {
|
|
this.$store.commit('setWidgetPageData', {
|
|
prgmId: this.$route.query.prgmId,
|
|
ElecReadReptWidget: { ElecReadReptWidgetData },
|
|
});
|
|
},
|
|
async created() {
|
|
this.search();
|
|
this.timer = setInterval(this.search, this.widgetReflashMm);
|
|
},
|
|
beforeDestroy() {
|
|
window.clearTimeout(this.timer);
|
|
},
|
|
mounted() {},
|
|
data() {
|
|
return {
|
|
blocNm: '',
|
|
mainReadPlcData: [],
|
|
//widgetId:"ElecReadReptWidget",
|
|
dialogView: false,
|
|
readObjIdList: [],
|
|
readPlcIdList: [],
|
|
};
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
setPageData: 'setPageData',
|
|
setWidgetChartOption: 'setWidgetChartOption',
|
|
openDashboardWidget: 'openDashboardWidget',
|
|
}),
|
|
...mapActions({
|
|
postApi: 'modules/list/postApi',
|
|
postApiReturn: 'modules/list/postApiReturn',
|
|
getEnergyList: 'modules/search/getEnergyList',
|
|
}),
|
|
setBlocNm() {
|
|
this.blocNm = this.$store.state.userInfo.blocNm;
|
|
if (this.blocNm != '') {
|
|
this.blocNm = '[' + this.blocNm + ']';
|
|
}
|
|
},
|
|
dialogViewChange() {
|
|
this.getMainReadPlcStat();
|
|
},
|
|
async search() {
|
|
this.setBlocNm();
|
|
|
|
await this.getMainReadPlcStat();
|
|
},
|
|
async getMainReadPlcStat() {
|
|
if (
|
|
this.$store.state.pageData[this.parentPrgmId].ElecReadReptWidget
|
|
.ElecReadReptWidgetData.readObjList.length > 0
|
|
) {
|
|
this.readObjIdList = this.$store.state.pageData[
|
|
this.parentPrgmId
|
|
].ElecReadReptWidget.ElecReadReptWidgetData.readObjList.map(item => {
|
|
return { readObjId: item.readObjId, readObjNm: item.readObjNm };
|
|
});
|
|
}
|
|
|
|
if (
|
|
this.$store.state.pageData[this.parentPrgmId].ElecReadReptWidget
|
|
.ElecReadReptWidgetData.plcKindList.length > 0
|
|
) {
|
|
this.readPlcIdList = this.$store.state.pageData[
|
|
this.parentPrgmId
|
|
].ElecReadReptWidget.ElecReadReptWidgetData.plcKindList.map(item => {
|
|
return item.readPlcId;
|
|
});
|
|
}
|
|
this.mainReadPlcData = await this.postApiReturn({
|
|
apiKey: 'selectMainReadPlcStat',
|
|
resKey: 'mainReadPlcData',
|
|
sendParam: {
|
|
readObjIdList: this.readObjIdList,
|
|
},
|
|
});
|
|
|
|
// this.mainReadPlcData = [
|
|
// {
|
|
// "rowNum" : 1,
|
|
// "comId" : "CDR00",
|
|
// "readPlcId" : "RPC000002",
|
|
// "readPlcNm" : "[전력] LP-1_A동메인",
|
|
// "readObjNm" : "Heartbit",
|
|
// "readObjId" : "ROI000040",
|
|
// "instantVal" : 11239.0,
|
|
// "volt" : 228.9,
|
|
// "ampr" : 55.1,
|
|
// "ROI000001" : 93613.1,
|
|
// "ROI000005" : 229.7,
|
|
// "ROI000006" : 81.8,
|
|
// "ROI000008" : 1,
|
|
// "stat" : "가동중"
|
|
// }
|
|
// ]
|
|
},
|
|
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;
|
|
}
|
|
},
|
|
tableDataGetDarkColorByState: state => {
|
|
return {
|
|
가동중: '#01ae6a',
|
|
미사용: '#ffb046',
|
|
비정상: '#f6637b',
|
|
}[state];
|
|
},
|
|
tableDataGetLightColorByState: state => {
|
|
return {
|
|
가동중: '#3cc380',
|
|
미사용: '#ffb13b',
|
|
비정상: '#f98694',
|
|
}[state];
|
|
},
|
|
readObjDialog() {
|
|
this.$store.state.pageData[
|
|
this.parentPrgmId
|
|
].ElecReadReptWidget.ElecReadReptWidgetData.enrgDiv = 'MTT_ELEC';
|
|
this.$store.state.pageData[
|
|
this.parentPrgmId
|
|
].ElecReadReptWidget.ElecReadReptWidgetData.grpCd = 'MTT_STAT';
|
|
this.$refs['MainReadReptReadObjMultiPop'].dialog = true;
|
|
},
|
|
},
|
|
};
|
|
const ElecReadReptWidgetData = {
|
|
readObjModalData: {},
|
|
isMulti: true,
|
|
blocId: 0,
|
|
blocMstrList: [],
|
|
readObjList: [],
|
|
readObj: {},
|
|
enrgDiv: '',
|
|
plcKindList: [],
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.v-avatar {
|
|
border-radius: 21px;
|
|
font-size: 1.75rem;
|
|
}
|
|
</style>
|