sk_fems_ui commit
This commit is contained in:
unknown
350
components/widget/GasReadReptWidget.vue
Normal file
350
components/widget/GasReadReptWidget.vue
Normal file
@ -0,0 +1,350 @@
|
||||
<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-3">
|
||||
<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="{ paddingRight: '5px' }"
|
||||
>
|
||||
<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,
|
||||
gasReadReptWidget: { gasReadReptWidgetData },
|
||||
});
|
||||
},
|
||||
async created() {
|
||||
this.search();
|
||||
this.timer = setInterval(this.search, this.widgetReflashMm);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.clearTimeout(this.timer);
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
blocNm: '',
|
||||
mainReadPlcData: [],
|
||||
widgetId: 'gasReadReptWidget',
|
||||
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].gasReadReptWidget
|
||||
.gasReadReptWidgetData.readObjList.length > 0
|
||||
) {
|
||||
this.readObjIdList = this.$store.state.pageData[
|
||||
this.parentPrgmId
|
||||
].gasReadReptWidget.gasReadReptWidgetData.readObjList.map(item => {
|
||||
return { readObjId: item.readObjId, readObjNm: item.readObjNm };
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
this.$store.state.pageData[this.parentPrgmId].gasReadReptWidget
|
||||
.gasReadReptWidgetData.plcKindList.length > 0
|
||||
) {
|
||||
this.readPlcIdList = this.$store.state.pageData[
|
||||
this.parentPrgmId
|
||||
].gasReadReptWidget.gasReadReptWidgetData.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
|
||||
].gasReadReptWidget.gasReadReptWidgetData.enrgDiv = 'MTT_FUEL';
|
||||
this.$store.state.pageData[
|
||||
this.parentPrgmId
|
||||
].gasReadReptWidget.gasReadReptWidgetData.grpCd = 'MTT_STAT';
|
||||
this.$refs['MainReadReptReadObjMultiPop'].dialog = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
const gasReadReptWidgetData = {
|
||||
readObjModalData: {},
|
||||
isMulti: true,
|
||||
blocId: 0,
|
||||
blocMstrList: [],
|
||||
readObjList: [],
|
||||
readObj: {},
|
||||
enrgDiv: '',
|
||||
plcKindList: [],
|
||||
};
|
||||
</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