gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update pagination UI + Fix bugs gauge chart line chart + Fix bugs s14 #59

Merged
dev merged 1 commits from dev-nghiantt-fix-bugs into dev 2025-08-12 18:43:07 +09:00
Conversation 0 Commits 1 Files Changed 12 +57 -48
12 changed files with 57 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/scss/common/pagination.scss
View File

@ -10,7 +10,7 @@
// box-shadow: none !important; // box-shadow: none !important;
background-color: map-deep-get($config, #{$theme}, "paging-background") !important; background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
color: map-deep-get($config, #{$theme}, "paging-text") !important; color: map-deep-get($config, #{$theme}, "paging-text") !important;
border: 0.5px solid #424242; border: none;
.ant-pagination-item-link { .ant-pagination-item-link {
border: none; border: none;
@ -19,13 +19,13 @@
} }
.ant-pagination-item-active { .ant-pagination-item-active {
border-color: #1890ff !important; border: 1px solid #1890ff !important;
color: #1890ff !important color: #1890ff !important
} }
.ant-pagination-options-size-changer { .ant-pagination-options-size-changer {
.ant-select-selection { .ant-select-selection {
border: 0.5px solid #424242; border: 0.5px solid map-deep-get($config, #{$theme}, "v-input-fieldset-color") !important;
background: map-deep-get($config, #{$theme}, "paging-background") !important; background: map-deep-get($config, #{$theme}, "paging-background") !important;
color: map-deep-get($config, #{$theme}, "paging-text") !important; color: map-deep-get($config, #{$theme}, "paging-text") !important;
} }

11
components/common/chartoptions/GaugeChart.js
View File

@ -2,15 +2,13 @@
export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) { export default function getGaugeChartOption({ title, min = 0, max = 160, unit = '%', isDarkMode = false, backgroundRadius = 97 }) {
const colorRanges = isDarkMode const colorRanges = isDarkMode
? [ ? [
[0.375, '#49AA19'], // Dark Green [60 / 160, '#49AA19'], // Dark Green
// [0.5, '#B8860B'], // Dark Yellow [100 / 160, '#D89614'], // Dark Orange
[0.625, '#D89614'], // Dark Orange
[1, '#D32029'], // Dark Red [1, '#D32029'], // Dark Red
] ]
: [ : [
[0.375, '#52C41A'], // Light Green [60 / 160, '#52C41A'], // Light Green
// [0.5, '#FFD700'], // Light Yellow [100 / 160, '#FAAD14'], // Light Orange
[0.625, '#FAAD14'], // Light Orange
[1, '#F5222D'], // Light Red [1, '#F5222D'], // Light Red
]; ];
// Old color range // Old color range
@ -56,6 +54,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
endAngle: -45, endAngle: -45,
min: min, min: min,
max: max, max: max,
splitNumber: 8,
// progress: { // progress: {
// show: true, // show: true,
// width: 15, // width: 15,

2
components/common/chartoptions/LineChart.js
View File

@ -34,6 +34,8 @@ export default function getLineChartOption({
legend: { legend: {
// data: legendData, // data: legendData,
icon: 'circle', icon: 'circle',
itemWidth: 15, // Width of the legend icon
itemHeight: 15,
top: '0%', top: '0%',
right: '5%', right: '5%',
orient: 'horizontal', orient: 'horizontal',

10
components/common/modal/ElecPowChrgPop.vue
View File

@ -17,20 +17,24 @@
{{ item.label }} {{ item.label }}
</label> </label>
</v-col> </v-col>
<v-col :cols="label ? item.textCols : ''"> <v-col :cols="label ? item.textCols : ''" class="py-0">
<!-- <v-col :cols="label ? 9 : ''"> --> <!-- <v-col :cols="label ? 9 : ''"> -->
<!-- :value="textfield" --> <!-- :value="textfield" -->
<v-text-field <v-text-field
readonly readonly
v-model="selectValue" v-model="selectValue"
append-icon="mdi-magnify"
class="v-input__custom" class="v-input__custom"
@click="dialog = !dialog" @click="dialog = !dialog"
outlined outlined
:hide-details="true" :hide-details="true"
:disabled="item.disabled || false" :disabled="item.disabled || false"
:required="item.required || false" :required="item.required || false"
></v-text-field> >
<template v-slot:append>
<!-- Custom SVG icon -->
<v-icon>$icoSearch</v-icon>
</template>
</v-text-field>
</v-col> </v-col>
<!-- <v-row justify="center"> --> <!-- <v-row justify="center"> -->

2
components/common/modal/ReadPlcPop.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<v-row class="search-box" align="center"> <v-row class="search-box" align="center" no-gutters>
<!-- <v-col v-if="label" cols="2"> --> <!-- <v-col v-if="label" cols="2"> -->
<v-col v-if="item.label" :cols="item.labelCols" class="py-0"> <v-col v-if="item.label" :cols="item.labelCols" class="py-0">
<label for="" class="search-box-label"> <label for="" class="search-box-label">

10
components/pages/ems/ErcChrgInfo/ErcChrgInfoTab.vue
View File

@ -21,9 +21,9 @@
</v-col> </v-col>
</v-row> </v-row>
<!-- Create the line between date picker and form --> <!-- Create the line between date picker and form -->
<v-row class="my-5" no-gutters> <v-row class="mt-6 mb-7" no-gutters>
<v-col> <v-col>
<div style="height: 1px; background-color: #ccc;"></div> <div style="height: 1px; background-color: #0000000F;"></div>
</v-col> </v-col>
</v-row> </v-row>
<v-row class="search-box" align="center" no-gutters style="height: 44px;"> <v-row class="search-box" align="center" no-gutters style="height: 44px;">
@ -43,7 +43,7 @@
<div <div
ref="gridParent" ref="gridParent"
class="w100" class="w100"
style="height: calc((100vh - 600px) / 2);" style="height: calc((100vh - 500px) / 2);"
> >
<Grid <Grid
:ref="gridName" :ref="gridName"
@ -57,7 +57,7 @@
</div> </div>
</v-col> </v-col>
</v-row> </v-row>
<v-row class="search-box" align="center" no-gutters style="height: 44px;"> <v-row class="search-box mt-2" align="center" no-gutters style="height: 44px;">
<v-col :cols="4"> <v-col :cols="4">
<label for="" class="search-box-label"> <label for="" class="search-box-label">
<!-- <v-icon x-small color="primary" class="mr-1" <!-- <v-icon x-small color="primary" class="mr-1"
@ -77,7 +77,7 @@
<div <div
ref="chartParent" ref="chartParent"
class="h100 w100" class="h100 w100"
style="height: calc((100vh - 600px) / 2 - 30px);" style="height: calc((100vh - 500px) / 2);"
> >
<component <component
class="w100 h100" class="w100 h100"

8
pages/ems/base/DashboardPage.vue
View File

@ -1196,7 +1196,8 @@ export default {
show: false, show: false,
}, },
left: "22%", left: "22%",
radius: ["50%", "80%"], // Bigger inner and outer radius bottom: "23",
radius: ["67%", "97%"], // Bigger inner and outer radius
center: ["60%", "50%"], // Shift chart slightly right to make room for legend center: ["60%", "50%"], // Shift chart slightly right to make room for legend
itemStyle: { itemStyle: {
borderColor: "#fff", // Color of the gap borderColor: "#fff", // Color of the gap
@ -1272,7 +1273,10 @@ export default {
top: "middle", top: "middle",
type: "scroll", type: "scroll",
orient: "vertical", orient: "vertical",
left: "left", left: "20",
icon: 'rect',
itemWidth: 15, // Width of the legend icon
itemHeight: 15,
textStyle: { textStyle: {
color: this.isDarkMode ? "#fff" : "#333333", color: this.isDarkMode ? "#fff" : "#333333",
}, },

2
pages/ems/base/EnrgReadPlaceMngPage.vue
View File

@ -63,7 +63,7 @@
<v-tabs-items v-model="tab" style="height: calc(100% - 65px);" class="pt-6 py-2"> <v-tabs-items v-model="tab" style="height: calc(100% - 65px);" class="pt-6 py-2">
<v-tab-item v-for="(item, idx) in items" :key="item.id"> <v-tab-item v-for="(item, idx) in items" :key="item.id">
<component v-if="item.id == 'readPlcBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId" <component v-if="item.id == 'readPlcBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId"
:detailList="detailList" :bindingData="gridName" :detailList="f" :bindingData="gridName"
@gridEditingFinish="gridEditingFinish" /> @gridEditingFinish="gridEditingFinish" />
<ReadPlcAddInfoTab v-if="item.id == 'readPlcAddInfoTab'" :parentPrgmId="myPrgmId" <ReadPlcAddInfoTab v-if="item.id == 'readPlcAddInfoTab'" :parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }" /> :innerTabGridInfo="{ tab, idx }" />

24
pages/ems/base/EnrgResourceCenterMngPage.vue
View File

@ -835,7 +835,7 @@ const myDetail = [
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
iconShow: true, iconShow: true,
class: 'py-2 pr-4', class: 'py-3 pr-4',
required: false, required: false,
placeholder: '시스템 자동입력', placeholder: '시스템 자동입력',
}, },
@ -848,7 +848,7 @@ const myDetail = [
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
iconShow: true, iconShow: true,
class: 'py-2 pl-4', class: 'py-3 pl-4',
required: true, required: true,
}, },
{ {
@ -860,7 +860,7 @@ const myDetail = [
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
iconShow: true, iconShow: true,
class: 'py-2 pr-4', class: 'py-3 pr-4 mt-2',
list: 'ercKindList', list: 'ercKindList',
itemText: 'commCdNm', itemText: 'commCdNm',
itemValue: 'commCd', itemValue: 'commCd',
@ -875,7 +875,7 @@ const myDetail = [
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
iconShow: true, iconShow: true,
class: 'py-2 pl-4', class: 'py-3 pl-4 mt-2',
list: 'readObjList', list: 'readObjList',
itemText: 'readObjNm', itemText: 'readObjNm',
itemValue: 'readObjId', itemValue: 'readObjId',
@ -890,7 +890,7 @@ const myDetail = [
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
iconShow: true, iconShow: true,
class: 'py-2 pr-4', class: 'py-3 pr-4 mt-2',
list: 'chrgKindList', list: 'chrgKindList',
itemText: 'commCdNm', itemText: 'commCdNm',
itemValue: 'commCd', itemValue: 'commCd',
@ -905,7 +905,7 @@ const myDetail = [
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
iconShow: true, iconShow: true,
class: 'py-2 pl-4', class: 'py-3 pl-4 mt-2',
}, },
{ {
type: 'InputText', type: 'InputText',
@ -916,7 +916,7 @@ const myDetail = [
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
iconShow: true, iconShow: true,
class: 'py-2 pr-4', class: 'py-3 pr-4 mt-2',
}, },
{ {
@ -928,7 +928,7 @@ const myDetail = [
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
iconShow: true, iconShow: true,
class: 'py-2 pl-4', class: 'py-3 pl-4 mt-2',
list: 'blocMstrList', list: 'blocMstrList',
itemText: 'blocNm', itemText: 'blocNm',
itemValue: 'blocId', itemValue: 'blocId',
@ -944,7 +944,7 @@ const myDetail = [
textCols: 12, textCols: 12,
iconShow: true, iconShow: true,
// class: 'py-2', // class: 'py-2',
class: 'pb-0 mb-0 pr-4', class: 'pb-0 mb-0 pr-4 mt-2',
disableContent: true, disableContent: true,
}, },
{ {
@ -956,7 +956,7 @@ const myDetail = [
labelCols: 12, labelCols: 12,
textCols: 12, textCols: 12,
iconShow: true, iconShow: true,
class: 'py-2 pl-4', class: 'pb-0 mb-0 pl-4 mt-2',
}, },
{ {
type: 'InputText', type: 'InputText',
@ -981,7 +981,7 @@ const myDetail = [
disabled: false, disabled: false,
cols: 6, cols: 6,
iconShow: true, iconShow: true,
class: 'py-2 pr-4', class: 'py-3 pr-4 mt-2',
value: { '1': true, '0': false }, value: { '1': true, '0': false },
}, },
{ {
@ -991,7 +991,7 @@ const myDetail = [
disabled: false, disabled: false,
cols: 6, cols: 6,
iconShow: true, iconShow: true,
class: 'py-2 pl-4', class: 'py-3 pl-4 mt-2',
value: { '1': true, '0': false }, value: { '1': true, '0': false },
required: true, required: true,
}, },

13
pages/ems/effc/EnrgUseEqpmDetlMntrPage.vue
View File

@ -154,14 +154,15 @@
</v-row> </v-row>
<v-row class="pa-1" style="height: 52%; width: 100%"> <v-row class="pa-1" style="height: 52%; width: 100%">
<v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden"> <v-card class="pa-1" style="height: 100%; width: 100%; overflow: hidden">
<div style="height: 25%"> <div style="height: 15%">
<v-card-title class="d-flex align-center justify-space-between pa-5"> <v-card-title class="d-flex align-center justify-space-between pl-3">
<span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span> <span class="tit ft-size_20 ft-weight_600">가이드 알람정보</span>
</v-card-title> </v-card-title>
</div> </div>
<div <div
ref="gridParent01" ref="gridParent01"
style="height: 75%; overflow: hidden; margin-top: 15px" class="pl-3 mt-5"
style="height: 75%; overflow: hidden;"
> >
<component <component
:ref="gridName01" :ref="gridName01"
@ -177,12 +178,12 @@
<v-row style="height: 100%"> <v-row style="height: 100%">
<v-col :cols="5" class=""> <v-col :cols="5" class="">
<v-card class="pa-1" style="height: 100%; width: 100%"> <v-card class="pa-1" style="height: 100%; width: 100%">
<div style="height: 25%"> <div style="height: 15%">
<v-card-title class="d-flex align-center justify-space-between pa-5"> <v-card-title class="d-flex align-center justify-space-between pl-3">
<span class="tit ft-size_20 ft-weight_600">설비 상세 정보</span> <span class="tit ft-size_20 ft-weight_600">설비 상세 정보</span>
</v-card-title> </v-card-title>
</div> </div>
<div ref="gridParent02" style="height: 75%"> <div ref="gridParent02" style="height: 75%" class="pl-3 mt-5">
<component <component
:ref="gridName02" :ref="gridName02"
:is="loadGrid02 ? 'Grid' : null" :is="loadGrid02 ? 'Grid' : null"

12
pages/ems/effc/EnrgUseTotSummPage.vue
View File

@ -47,13 +47,14 @@
<v-row ref="contents" style="overflow: auto"> <v-row ref="contents" style="overflow: auto">
<v-col> <v-col>
<div v-for="(value, key, index) in contentData" :key="'key1_' + index"> <div v-for="(value, key, index) in contentData" :key="'key1_' + index">
<v-card-title class="d-flex align-center justify-space-between pa-3"> <v-card style="background: none">
<span class="tit ft-size_20 ft-weight_600">{{ value.eqpmGrpNm }}</span> <v-card-title class="d-flex align-center justify-space-between pa-3">
</v-card-title> <span class="tit ft-size_20 ft-weight_600">{{ value.eqpmGrpNm }}</span>
</v-card-title>
</v-card>
<v-row> <v-row>
<v-col :cols="3" v-for="(item, i) in value.chartData" :key="'key2_' + i"> <v-col :cols="3" v-for="(item, i) in value.chartData" :key="'key2_' + i">
<v-card> <v-card>
<div <div
class="v-box" class="v-box"
style="height: 330px; position: relative" style="height: 330px; position: relative"
@ -125,8 +126,7 @@
</div> </div>
</v-col> </v-col>
</div> </div>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
</div> </div>

5
pages/ems/effc/EqpmIndMntrPage.vue
View File

@ -105,8 +105,7 @@
:gridName="gridName" :gridName="gridName"
:parentPrgmId="myPrgmId" :parentPrgmId="myPrgmId"
/> />
<div v-if="loadGrid && totalCount > 0" class="pagination-wrapper">
<div class="pagination-wrapper">
<pagination <pagination
id="pagination" id="pagination"
:total-count="totalCount" :total-count="totalCount"
@ -201,7 +200,7 @@ export default {
gridName: "grid01", gridName: "grid01",
enrgUseMainIdxDesc: [], enrgUseMainIdxDesc: [],
itemsPerPageArray: [10, 20, 30], itemsPerPageArray: [10, 20, 50],
limit: 10, limit: 10,
page: 1, page: 1,
totalCount: 0, totalCount: 0,