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

Browse Source
This commit is contained in:
Michael
2025-08-12 17:07:52 +09:00
parent ffdc56b8f1
commit 84c7e61254
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;
background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
color: map-deep-get($config, #{$theme}, "paging-text") !important;
border: 0.5px solid #424242;
border: none;
.ant-pagination-item-link {
border: none;
@ -19,13 +19,13 @@
}
.ant-pagination-item-active {
border-color: #1890ff !important;
border: 1px solid #1890ff !important;
color: #1890ff !important
}
.ant-pagination-options-size-changer {
.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;
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 }) {
const colorRanges = isDarkMode
? [
[0.375, '#49AA19'], // Dark Green
// [0.5, '#B8860B'], // Dark Yellow
[0.625, '#D89614'], // Dark Orange
[60 / 160, '#49AA19'], // Dark Green
[100 / 160, '#D89614'], // Dark Orange
[1, '#D32029'], // Dark Red
]
: [
[0.375, '#52C41A'], // Light Green
// [0.5, '#FFD700'], // Light Yellow
[0.625, '#FAAD14'], // Light Orange
[60 / 160, '#52C41A'], // Light Green
[100 / 160, '#FAAD14'], // Light Orange
[1, '#F5222D'], // Light Red
];
// Old color range
@ -56,6 +54,7 @@ export default function getGaugeChartOption({ title, min = 0, max = 160, unit =
endAngle: -45,
min: min,
max: max,
splitNumber: 8,
// progress: {
// show: true,
// width: 15,

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

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

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

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

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

@ -1,5 +1,5 @@
<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="item.label" :cols="item.labelCols" class="py-0">
<label for="" class="search-box-label">

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

@ -21,9 +21,9 @@
</v-col>
</v-row>
<!-- 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>
<div style="height: 1px; background-color: #ccc;"></div>
<div style="height: 1px; background-color: #0000000F;"></div>
</v-col>
</v-row>
<v-row class="search-box" align="center" no-gutters style="height: 44px;">
@ -43,7 +43,7 @@
<div
ref="gridParent"
class="w100"
style="height: calc((100vh - 600px) / 2);"
style="height: calc((100vh - 500px) / 2);"
>
<Grid
:ref="gridName"
@ -57,7 +57,7 @@
</div>
</v-col>
</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">
<label for="" class="search-box-label">
<!-- <v-icon x-small color="primary" class="mr-1"
@ -77,7 +77,7 @@
<div
ref="chartParent"
class="h100 w100"
style="height: calc((100vh - 600px) / 2 - 30px);"
style="height: calc((100vh - 500px) / 2);"
>
<component
class="w100 h100"

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

@ -1196,7 +1196,8 @@ export default {
show: false,
},
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
itemStyle: {
borderColor: "#fff", // Color of the gap
@ -1272,7 +1273,10 @@ export default {
top: "middle",
type: "scroll",
orient: "vertical",
left: "left",
left: "20",
icon: 'rect',
itemWidth: 15, // Width of the legend icon
itemHeight: 15,
textStyle: {
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-tab-item v-for="(item, idx) in items" :key="item.id">
<component v-if="item.id == 'readPlcBaseInfoTab'" :is="'Form'" :parentPrgmId="myPrgmId"
:detailList="detailList" :bindingData="gridName"
:detailList="f" :bindingData="gridName"
@gridEditingFinish="gridEditingFinish" />
<ReadPlcAddInfoTab v-if="item.id == 'readPlcAddInfoTab'" :parentPrgmId="myPrgmId"
:innerTabGridInfo="{ tab, idx }" />

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

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

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

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

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

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

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

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