Merge branch 'dev-bagus' into playground
This commit is contained in:
kur0nek-o
commit
0b8c0bc295
0
.env.development
Normal file → Executable file
0
.env.development
Normal file → Executable file
0
.env.production
Normal file → Executable file
0
.env.production
Normal file → Executable file
0
.eslintrc.cjs
Normal file → Executable file
0
.eslintrc.cjs
Normal file → Executable file
4
.github/workflows/docker-image-development.yml
vendored
Normal file → Executable file
4
.github/workflows/docker-image-development.yml
vendored
Normal file → Executable file
@ -24,5 +24,5 @@ jobs:
|
||||
- uses: actions/checkout@v3
|
||||
- name: Build the Docker image
|
||||
run: |
|
||||
docker build . -t defuj/apkt-eis:v1.0.0-dev
|
||||
docker push defuj/apkt-eis:v1.0.0-dev
|
||||
docker build . -t defuj/apkt-eis:v1.0.1-dev
|
||||
docker push defuj/apkt-eis:v1.0.1-dev
|
||||
0
.github/workflows/docker-image-release.yml
vendored
Normal file → Executable file
0
.github/workflows/docker-image-release.yml
vendored
Normal file → Executable file
0
.gitignore
vendored
Normal file → Executable file
0
.gitignore
vendored
Normal file → Executable file
0
.prettierrc.json
Normal file → Executable file
0
.prettierrc.json
Normal file → Executable file
0
.tw-patch/tw-class-list.json
Normal file → Executable file
0
.tw-patch/tw-class-list.json
Normal file → Executable file
0
.vscode/extensions.json
vendored
Normal file → Executable file
0
.vscode/extensions.json
vendored
Normal file → Executable file
0
Dockerfile
Normal file → Executable file
0
Dockerfile
Normal file → Executable file
0
deployment.yaml
Normal file → Executable file
0
deployment.yaml
Normal file → Executable file
0
index.html
Normal file → Executable file
0
index.html
Normal file → Executable file
0
nginx.conf
Normal file → Executable file
0
nginx.conf
Normal file → Executable file
3333
package-lock.json
generated
Normal file → Executable file
3333
package-lock.json
generated
Normal file → Executable file
File diff suppressed because it is too large
Load Diff
3
package.json
Normal file → Executable file
3
package.json
Normal file → Executable file
@ -30,6 +30,7 @@
|
||||
"@vue/apollo-components": "^4.0.0",
|
||||
"@vue/apollo-composable": "^4.0.1",
|
||||
"@vue/apollo-option": "^4.0.0",
|
||||
"@vueform/multiselect": "^2.6.6",
|
||||
"axios": "^1.6.7",
|
||||
"devextreme": "23.1.5",
|
||||
"devextreme-vue": "23.1.5",
|
||||
@ -40,6 +41,8 @@
|
||||
"graphql": "^16.8.1",
|
||||
"graphql-tag": "^2.12.6",
|
||||
"jspdf": "^2.5.1",
|
||||
"jspdf-autotable": "^3.8.2",
|
||||
"nvm": "^0.0.4",
|
||||
"pinia": "^2.1.3",
|
||||
"qs": "^6.11.2",
|
||||
"react": "^18.2.0",
|
||||
|
||||
0
postcss.config.js
Normal file → Executable file
0
postcss.config.js
Normal file → Executable file
0
public/assets/css/loader.css
Normal file → Executable file
0
public/assets/css/loader.css
Normal file → Executable file
0
public/assets/images/favicon.ico
Normal file → Executable file
0
public/assets/images/favicon.ico
Normal file → Executable file
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
0
public/assets/images/pln.ico
Normal file → Executable file
0
public/assets/images/pln.ico
Normal file → Executable file
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
0
src/App.vue
Normal file → Executable file
0
src/App.vue
Normal file → Executable file
0
src/assets/css/base.css
Normal file → Executable file
0
src/assets/css/base.css
Normal file → Executable file
0
src/assets/css/main.css
Normal file → Executable file
0
src/assets/css/main.css
Normal file → Executable file
350
src/assets/css/style.css
Normal file → Executable file
350
src/assets/css/style.css
Normal file → Executable file
@ -1,5 +1,5 @@
|
||||
/*
|
||||
! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
|
||||
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
|
||||
/*
|
||||
@ -32,9 +32,11 @@
|
||||
4. Use the user's configured `sans` font-family by default.
|
||||
5. Use the user's configured `sans` font-feature-settings by default.
|
||||
6. Use the user's configured `sans` font-variation-settings by default.
|
||||
7. Disable tap highlights on iOS
|
||||
*/
|
||||
|
||||
html {
|
||||
html,
|
||||
:host {
|
||||
line-height: 1.5;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
@ -50,6 +52,8 @@ html {
|
||||
/* 5 */
|
||||
font-variation-settings: normal;
|
||||
/* 6 */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* 7 */
|
||||
}
|
||||
|
||||
/*
|
||||
@ -121,8 +125,10 @@ strong {
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use the user's configured `mono` font family by default.
|
||||
2. Correct the odd `em` font sizing in all browsers.
|
||||
1. Use the user's configured `mono` font-family by default.
|
||||
2. Use the user's configured `mono` font-feature-settings by default.
|
||||
3. Use the user's configured `mono` font-variation-settings by default.
|
||||
4. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
@ -131,8 +137,12 @@ samp,
|
||||
pre {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
font-feature-settings: normal;
|
||||
/* 2 */
|
||||
font-variation-settings: normal;
|
||||
/* 3 */
|
||||
font-size: 1em;
|
||||
/* 4 */
|
||||
}
|
||||
|
||||
/*
|
||||
@ -979,14 +989,30 @@ body {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.-bottom-px {
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
.-left-2 {
|
||||
left: -0.5rem;
|
||||
}
|
||||
|
||||
.-left-px {
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.-right-px {
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
.bottom-0 {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.bottom-auto {
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px;
|
||||
}
|
||||
@ -1197,8 +1223,13 @@ body {
|
||||
margin-right: -3rem;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.-mr-2 {
|
||||
margin-right: -0.5rem;
|
||||
=======
|
||||
.-mt-px {
|
||||
margin-top: -1px;
|
||||
>>>>>>> dev-bagus
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
@ -1269,6 +1300,13 @@ body {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
.mr-3\.5 {
|
||||
margin-right: 0.875rem;
|
||||
}
|
||||
|
||||
>>>>>>> dev-bagus
|
||||
.mt-0 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
@ -1313,6 +1351,14 @@ body {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.box-border {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.line-clamp-1 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
@ -1376,6 +1422,7 @@ body {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.h-2 {
|
||||
height: 0.5rem;
|
||||
}
|
||||
@ -1388,14 +1435,19 @@ body {
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.h-3 {
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.h-3\.5 {
|
||||
height: 0.875rem;
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
@ -1449,6 +1501,10 @@ body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-px {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.h-screen-80 {
|
||||
height: 80vh;
|
||||
}
|
||||
@ -1521,22 +1577,30 @@ body {
|
||||
width: 0.5rem;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.w-20 {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.w-28 {
|
||||
width: 7rem;
|
||||
=======
|
||||
.w-2\.5 {
|
||||
width: 0.625rem;
|
||||
>>>>>>> dev-bagus
|
||||
}
|
||||
|
||||
.w-3 {
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.w-3\.5 {
|
||||
width: 0.875rem;
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
@ -1629,6 +1693,7 @@ body {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.max-w-lg {
|
||||
max-width: 32rem;
|
||||
}
|
||||
@ -1637,6 +1702,8 @@ body {
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.max-w-sm {
|
||||
max-width: 24rem;
|
||||
}
|
||||
@ -1669,6 +1736,10 @@ body {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-grow-0 {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@ -1824,6 +1895,13 @@ body {
|
||||
scroll-padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
.list-none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
>>>>>>> dev-bagus
|
||||
.appearance-none {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
@ -1902,10 +1980,6 @@ body {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
@ -2030,12 +2104,24 @@ body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.overflow-y-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.whitespace-normal {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@ -2044,6 +2130,10 @@ body {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.break-all {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
@ -2064,19 +2154,30 @@ body {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.rounded-none {
|
||||
border-radius: 0px;
|
||||
=======
|
||||
.rounded-sm {
|
||||
border-radius: 0.125rem;
|
||||
>>>>>>> dev-bagus
|
||||
}
|
||||
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.rounded-b {
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.rounded-b-2xl {
|
||||
border-bottom-right-radius: 1rem;
|
||||
border-bottom-left-radius: 1rem;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.rounded-b-lg {
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
@ -2087,6 +2188,8 @@ body {
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.rounded-b-none {
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
@ -2122,6 +2225,7 @@ body {
|
||||
border-bottom-right-radius: 9999px;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.rounded-r-lg {
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
@ -2135,6 +2239,11 @@ body {
|
||||
.rounded-r-none {
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
=======
|
||||
.rounded-t {
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
>>>>>>> dev-bagus
|
||||
}
|
||||
|
||||
.rounded-t-2xl {
|
||||
@ -2142,6 +2251,7 @@ body {
|
||||
border-top-right-radius: 1rem;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.rounded-t-lg {
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-top-right-radius: 0.5rem;
|
||||
@ -2152,11 +2262,14 @@ body {
|
||||
border-top-right-radius: 0.375rem;
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.rounded-t-none {
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.rounded-bl-lg {
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
}
|
||||
@ -2189,6 +2302,8 @@ body {
|
||||
border-top-right-radius: 0.375rem;
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
@ -2326,6 +2441,7 @@ body {
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.bg-black\/50 {
|
||||
background-color: rgb(0 0 0 / 0.5);
|
||||
}
|
||||
@ -2354,6 +2470,8 @@ body {
|
||||
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.bg-gray-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
@ -2364,6 +2482,11 @@ body {
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-300 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
||||
@ -2392,6 +2515,7 @@ body {
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.bg-green-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(220 252 231 / var(--tw-bg-opacity));
|
||||
@ -2411,6 +2535,8 @@ body {
|
||||
background-color: rgb(240 253 244 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.bg-green-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
|
||||
@ -2421,11 +2547,14 @@ body {
|
||||
background-color: rgb(22 163 74 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.bg-indigo-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.bg-indigo-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(79 70 229 / var(--tw-bg-opacity));
|
||||
@ -2607,6 +2736,10 @@ body {
|
||||
--tw-bg-opacity: 0.05;
|
||||
}
|
||||
|
||||
.bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
|
||||
.bg-opacity-60 {
|
||||
--tw-bg-opacity: 0.6;
|
||||
}
|
||||
@ -2619,14 +2752,28 @@ body {
|
||||
--tw-bg-opacity: 0.8;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.bg-gradient-to-r {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
=======
|
||||
.bg-multiselect-caret {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'%3e%3c/path%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.bg-multiselect-remove {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3e%3c/path%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.bg-multiselect-spinner {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 512 512' fill='%2322c55e' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z'%3e%3c/path%3e%3c/svg%3e");
|
||||
>>>>>>> dev-bagus
|
||||
}
|
||||
|
||||
.bg-none {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.from-gray-100 {
|
||||
--tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
|
||||
@ -2641,16 +2788,23 @@ body {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.bg-center {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.fill-\[\#4f46e5\] {
|
||||
fill: #4f46e5;
|
||||
}
|
||||
|
||||
.fill-current {
|
||||
fill: currentColor;
|
||||
=======
|
||||
.bg-no-repeat {
|
||||
background-repeat: no-repeat;
|
||||
>>>>>>> dev-bagus
|
||||
}
|
||||
|
||||
.fill-gray-500 {
|
||||
@ -2715,10 +2869,6 @@ body {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.p-0\.5 {
|
||||
padding: 0.125rem;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
@ -2895,12 +3045,17 @@ body {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.pr-0 {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.pr-0\.5 {
|
||||
padding-right: 0.125rem;
|
||||
=======
|
||||
.pl-3\.5 {
|
||||
padding-left: 0.875rem;
|
||||
>>>>>>> dev-bagus
|
||||
}
|
||||
|
||||
.pr-10 {
|
||||
@ -2911,6 +3066,10 @@ body {
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
.pr-16 {
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
.pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
@ -2919,6 +3078,13 @@ body {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
=======
|
||||
.pr-3\.5 {
|
||||
padding-right: 0.875rem;
|
||||
}
|
||||
|
||||
>>>>>>> dev-bagus
|
||||
.pr-4 {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
@ -2975,8 +3141,13 @@ body {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.align-middle {
|
||||
vertical-align: middle;
|
||||
=======
|
||||
.font-sans {
|
||||
font-family: Plus Jakarta Sans, sans-serif;
|
||||
>>>>>>> dev-bagus
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
@ -3071,10 +3242,18 @@ body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.leading-normal {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.leading-relaxed {
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.leading-snug {
|
||||
line-height: 1.375;
|
||||
}
|
||||
|
||||
.tracking-tight {
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
@ -3097,6 +3276,7 @@ body {
|
||||
color: rgb(96 165 250 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.text-blue-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity));
|
||||
@ -3117,6 +3297,8 @@ body {
|
||||
color: rgb(30 64 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.text-dark {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(21 22 23 / var(--tw-text-opacity));
|
||||
@ -3166,6 +3348,11 @@ body {
|
||||
color: rgb(17 24 39 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-green-100 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(220 252 231 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-green-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(74 222 128 / var(--tw-text-opacity));
|
||||
@ -3316,6 +3503,10 @@ body {
|
||||
color: rgb(13 148 136 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-transparent {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.text-vtd-primary-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(3 91 113 / var(--tw-text-opacity));
|
||||
@ -3434,6 +3625,10 @@ body {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.opacity-90 {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||
@ -3521,6 +3716,7 @@ body {
|
||||
--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.ring-blue-400\/50 {
|
||||
--tw-ring-color: rgb(96 165 250 / 0.5);
|
||||
}
|
||||
@ -3529,6 +3725,8 @@ body {
|
||||
--tw-ring-color: rgb(29 78 216 / 0.1);
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
.ring-gray-300 {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
|
||||
@ -3943,6 +4141,7 @@ body {
|
||||
border-color: rgb(3 91 113 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.hover\:bg-blue-100:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
|
||||
@ -3955,6 +4154,11 @@ body {
|
||||
.hover\:bg-gray-100:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
=======
|
||||
.hover\:bg-black:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
>>>>>>> dev-bagus
|
||||
}
|
||||
|
||||
.hover\:bg-gray-50:hover {
|
||||
@ -4038,6 +4242,7 @@ body {
|
||||
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.hover\:text-gray-400:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
@ -4046,6 +4251,10 @@ body {
|
||||
.hover\:text-gray-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
=======
|
||||
.hover\:bg-opacity-10:hover {
|
||||
--tw-bg-opacity: 0.1;
|
||||
>>>>>>> dev-bagus
|
||||
}
|
||||
|
||||
.hover\:text-primary-500:hover {
|
||||
@ -4063,6 +4272,7 @@ body {
|
||||
color: rgb(2 73 90 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.hover\:shadow-sm:hover {
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
@ -4071,6 +4281,10 @@ body {
|
||||
|
||||
.focus\:z-10:focus {
|
||||
z-index: 10;
|
||||
=======
|
||||
.hover\:opacity-80:hover {
|
||||
opacity: 0.8;
|
||||
>>>>>>> dev-bagus
|
||||
}
|
||||
|
||||
.focus\:border-0:focus {
|
||||
@ -4417,8 +4631,13 @@ body {
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
.group:focus .group-focus\:visible {
|
||||
visibility: visible;
|
||||
=======
|
||||
.group:hover .group-hover\:opacity-60 {
|
||||
opacity: 0.6;
|
||||
>>>>>>> dev-bagus
|
||||
}
|
||||
|
||||
.peer:checked ~ .peer-checked\:text-primary-500 {
|
||||
@ -4426,6 +4645,7 @@ body {
|
||||
color: rgb(3 91 113 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
<<<<<<< HEAD
|
||||
:is(.dark .dark\:divide-gray-700) > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-opacity: 1;
|
||||
border-color: rgb(55 65 81 / var(--tw-divide-opacity));
|
||||
@ -5158,6 +5378,8 @@ body {
|
||||
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
=======
|
||||
>>>>>>> dev-bagus
|
||||
@media (min-width: 640px) {
|
||||
.sm\:static {
|
||||
position: static;
|
||||
@ -5743,3 +5965,105 @@ body {
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.rtl\:left-auto:where([dir="rtl"], [dir="rtl"] *) {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.rtl\:right-0:where([dir="rtl"], [dir="rtl"] *) {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.rtl\:ml-1:where([dir="rtl"], [dir="rtl"] *) {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.rtl\:ml-3:where([dir="rtl"], [dir="rtl"] *) {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.rtl\:ml-3\.5:where([dir="rtl"], [dir="rtl"] *) {
|
||||
margin-left: 0.875rem;
|
||||
}
|
||||
|
||||
.rtl\:mr-0:where([dir="rtl"], [dir="rtl"] *) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.rtl\:pl-0:where([dir="rtl"], [dir="rtl"] *) {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.rtl\:pl-2:where([dir="rtl"], [dir="rtl"] *) {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.rtl\:pl-3:where([dir="rtl"], [dir="rtl"] *) {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.rtl\:pl-3\.5:where([dir="rtl"], [dir="rtl"] *) {
|
||||
padding-left: 0.875rem;
|
||||
}
|
||||
|
||||
.rtl\:pr-0:where([dir="rtl"], [dir="rtl"] *) {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.rtl\:pr-2:where([dir="rtl"], [dir="rtl"] *) {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.rtl\:pr-3:where([dir="rtl"], [dir="rtl"] *) {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.rtl\:pr-3\.5:where([dir="rtl"], [dir="rtl"] *) {
|
||||
padding-right: 0.875rem;
|
||||
}
|
||||
|
||||
.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
|
||||
.dark\:text-vtd-primary-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(53 124 141 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-opacity-70 {
|
||||
--tw-text-opacity: 0.7;
|
||||
}
|
||||
|
||||
.dark\:hover\:text-vtd-primary-300:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(104 157 170 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:focus\:border-vtd-primary-500:focus {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(3 91 113 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.dark\:focus\:bg-opacity-50:focus {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
|
||||
.dark\:focus\:text-vtd-primary-300:focus {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(104 157 170 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:focus\:ring-opacity-20:focus {
|
||||
--tw-ring-opacity: 0.2;
|
||||
}
|
||||
|
||||
.dark\:focus\:ring-opacity-25:focus {
|
||||
--tw-ring-opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
0
src/assets/css/tailwind.css
Normal file → Executable file
0
src/assets/css/tailwind.css
Normal file → Executable file
0
src/assets/icons/dot-outline.svg
Normal file → Executable file
0
src/assets/icons/dot-outline.svg
Normal file → Executable file
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
0
src/assets/icons/gauge.svg
Normal file → Executable file
0
src/assets/icons/gauge.svg
Normal file → Executable file
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
0
src/assets/icons/lightning-slash.svg
Normal file → Executable file
0
src/assets/icons/lightning-slash.svg
Normal file → Executable file
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
0
src/assets/icons/monitor.svg
Normal file → Executable file
0
src/assets/icons/monitor.svg
Normal file → Executable file
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
0
src/assets/icons/plugs.svg
Normal file → Executable file
0
src/assets/icons/plugs.svg
Normal file → Executable file
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
0
src/assets/icons/smiley-sad.svg
Normal file → Executable file
0
src/assets/icons/smiley-sad.svg
Normal file → Executable file
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
0
src/assets/icons/swap.svg
Normal file → Executable file
0
src/assets/icons/swap.svg
Normal file → Executable file
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
0
src/assets/images/hero.png
Normal file → Executable file
0
src/assets/images/hero.png
Normal file → Executable file
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
0
src/assets/images/pln-with-text.png
Normal file → Executable file
0
src/assets/images/pln-with-text.png
Normal file → Executable file
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
0
src/assets/images/pln.png
Normal file → Executable file
0
src/assets/images/pln.png
Normal file → Executable file
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
1
src/components/Button.vue
Normal file → Executable file
1
src/components/Button.vue
Normal file → Executable file
@ -45,6 +45,7 @@ const buttonStyle = computed(() => {
|
||||
})
|
||||
|
||||
const emit = defineEmits(['on:click'])
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
0
src/components/Buttons/ButtonDropdown.vue
Normal file → Executable file
0
src/components/Buttons/ButtonDropdown.vue
Normal file → Executable file
0
src/components/Buttons/ButtonPrimary.vue
Normal file → Executable file
0
src/components/Buttons/ButtonPrimary.vue
Normal file → Executable file
0
src/components/CommandPalettes.vue
Normal file → Executable file
0
src/components/CommandPalettes.vue
Normal file → Executable file
24
src/components/DatePicker.vue
Normal file → Executable file
24
src/components/DatePicker.vue
Normal file → Executable file
@ -11,7 +11,25 @@ const formatter = ref({
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:dateValue'])
|
||||
|
||||
const customShortcuts = () => {
|
||||
return [
|
||||
{
|
||||
label: "Last 15 Days",
|
||||
atClick: () => {
|
||||
const date = new Date();
|
||||
return [new Date(date.setDate(date.getDate() + 1)), date];
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Last Years",
|
||||
atClick: () => {
|
||||
const date = new Date();
|
||||
return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
|
||||
},
|
||||
},
|
||||
|
||||
];
|
||||
};
|
||||
watch(dateValue, (newValue) => {
|
||||
emit('update:dateValue', newValue)
|
||||
})
|
||||
@ -23,8 +41,8 @@ watch(dateValue, (newValue) => {
|
||||
v-model="dateValue"
|
||||
:formatter="formatter"
|
||||
separator=" s/d "
|
||||
:shortcuts="false"
|
||||
:auto-apply="false"
|
||||
:shortcuts="customShortcuts"
|
||||
:auto-apply="true"
|
||||
as-single
|
||||
use-range
|
||||
v-slot="{ value, placeholder }"
|
||||
|
||||
0
src/components/Dialogs/ActionDialog.vue
Normal file → Executable file
0
src/components/Dialogs/ActionDialog.vue
Normal file → Executable file
0
src/components/Dialogs/DetailDialog.vue
Normal file → Executable file
0
src/components/Dialogs/DetailDialog.vue
Normal file → Executable file
16
src/components/Form/Filters.vue
Normal file → Executable file
16
src/components/Form/Filters.vue
Normal file → Executable file
@ -2,19 +2,10 @@
|
||||
<script setup lang="ts">
|
||||
// components
|
||||
import Button from '@/components/Button.vue'
|
||||
import { useSearchStore } from '@/stores/filtersAction'
|
||||
|
||||
// icons
|
||||
import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
|
||||
const cariButton = useSearchStore()
|
||||
defineProps({
|
||||
reportButton: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['runSearch'])
|
||||
const emit = defineEmits(['runSearch','resetForm'])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -26,7 +17,7 @@ const emit = defineEmits(['runSearch'])
|
||||
<div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
|
||||
<div class="filter-buttons flex gap-3 flex-wrap">
|
||||
<Button
|
||||
@click="() => (cariButton.isTriggerChange = !cariButton.isTriggerChange)"
|
||||
@on:click="() => emit('resetForm')"
|
||||
label="Ulangi"
|
||||
style-type="outline"
|
||||
class-name="bg-white"
|
||||
@ -35,11 +26,10 @@ const emit = defineEmits(['runSearch'])
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
v-if="reportButton"
|
||||
label="Lihat Laporan"
|
||||
style-type="outline"
|
||||
class-name="bg-white"
|
||||
>
|
||||
>
|
||||
<PhFileText size="18" class="ml-1" weight="regular" />
|
||||
</Button>
|
||||
|
||||
|
||||
32
src/components/Form/FiltersType/Type1.vue
Normal file → Executable file
32
src/components/Form/FiltersType/Type1.vue
Normal file → Executable file
@ -12,15 +12,15 @@ import {
|
||||
} from './reference'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const up3laceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const poskoPlaceholder = 'Semua Posko'
|
||||
const uppp = ref({ id: 0, name: uppPlaceholder })
|
||||
const up3 = ref({ id: 0, name: up3laceholder })
|
||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
up3: up3.value,
|
||||
posko: posko.value,
|
||||
periode: ''
|
||||
})
|
||||
@ -32,12 +32,12 @@ watch(data.value, (value) => {
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
uppp.value = { id: 0, name: uppPlaceholder }
|
||||
up3.value = { id: 0, name: up3laceholder }
|
||||
data.value.uid = value
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value
|
||||
up3.value = value
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
@ -57,35 +57,21 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Induk Distribusi/Wilayah:</label
|
||||
>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:selected="uppp"
|
||||
:placeholder="uppPlaceholder"
|
||||
/>
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3laceholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:selected="posko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
/>
|
||||
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
|
||||
86
src/components/Form/FiltersType/Type10.vue
Normal file → Executable file
86
src/components/Form/FiltersType/Type10.vue
Normal file → Executable file
@ -1,13 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Ulp,
|
||||
selectedUlp,
|
||||
fetchUid,
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsUlp
|
||||
} from './reference'
|
||||
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputNumber from '@/components/Form/InputNumber.vue'
|
||||
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const uppp = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const ulp = ref({ id: "", name: ulpPlaceholder });
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
posko: ulp.value,
|
||||
periode: '',
|
||||
minJmlLapor: 1,
|
||||
maxJmlLapor: 1
|
||||
})
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
uppp.value = { id: 0, name: up3Placeholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value;
|
||||
selectedUp3Ulp(value);
|
||||
ulp.value = { id: "", name: ulpPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
ulp.value = value;
|
||||
selectedUlp(value);
|
||||
data.value.posko = value;
|
||||
};
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
<Select
|
||||
@update:selected="setUid($event)"
|
||||
:data="itemsUid"
|
||||
:placeholder="uidPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -15,7 +75,11 @@
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -23,7 +87,11 @@
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
<Select
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -39,9 +107,13 @@
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<Select placeholder="1" />
|
||||
<InputNumber @update:time-value="(value) => {
|
||||
data.minJmlLapor = value
|
||||
}" />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<Select placeholder="2" />
|
||||
<InputNumber @update:time-value="(value) => {
|
||||
data.maxJmlLapor = value
|
||||
}" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
127
src/components/Form/FiltersType/Type11.vue
Normal file → Executable file
127
src/components/Form/FiltersType/Type11.vue
Normal file → Executable file
@ -1,13 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Ulp,
|
||||
selectedUlp,
|
||||
fetchUid,
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsUlp
|
||||
} from './reference'
|
||||
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const uppp = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const ulp = ref({ id: "", name: ulpPlaceholder });
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const sla = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dibawah / Sesuai SLA (<= 45 menit)'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Melebihi SLA (> 45 menit)'
|
||||
}
|
||||
];
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
posko: ulp.value,
|
||||
periode: '',
|
||||
minDurasiRecoveryTime: 1,
|
||||
maxDurasiRecoveryTime: 1
|
||||
})
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
uppp.value = { id: 0, name: up3Placeholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value;
|
||||
selectedUp3Ulp(value);
|
||||
ulp.value = { id: "", name: ulpPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
ulp.value = value;
|
||||
selectedUlp(value);
|
||||
data.value.posko = value;
|
||||
};
|
||||
const triggerInput = ref(false)
|
||||
const changeDuration = (value: any) => {
|
||||
if (value.id === 0) {
|
||||
console.log('Durasi Menit')
|
||||
data.value.minDurasiRecoveryTime = 0
|
||||
data.value.maxDurasiRecoveryTime = 5
|
||||
triggerInput.value = false
|
||||
} else if (value.id === 1) {
|
||||
data.value.minDurasiRecoveryTime = 0
|
||||
data.value.maxDurasiRecoveryTime = 45
|
||||
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
|
||||
triggerInput.value = true
|
||||
} else {
|
||||
data.value.minDurasiRecoveryTime = 46
|
||||
data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
|
||||
triggerInput.value = true
|
||||
console.log('Melebihi SLA (> 45 menit)')
|
||||
}
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
<Select
|
||||
@update:selected="setUid($event)"
|
||||
:data="itemsUid"
|
||||
:placeholder="uidPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -15,7 +100,11 @@
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -23,7 +112,11 @@
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
<Select
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -39,12 +132,30 @@
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<Select placeholder="Durasi Menit" />
|
||||
<Select
|
||||
@update:selected="changeDuration($event)"
|
||||
:data="sla"
|
||||
placeholder="Durasi Menit"
|
||||
/>
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<Select placeholder="1" />
|
||||
<InputWithSuffix
|
||||
@update:minute-value="
|
||||
(value :any)=> {
|
||||
data.minDurasiRecoveryTime =value
|
||||
}
|
||||
"
|
||||
@value="data.minDurasiRecoveryTime"
|
||||
:disabled=triggerInput />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<Select placeholder="2" />
|
||||
<InputWithSuffix
|
||||
@update:minute-value="
|
||||
(value :any)=> {
|
||||
data.maxDurasiRecoveryTime = value
|
||||
}
|
||||
"
|
||||
@value="data.maxDurasiRecoveryTime"
|
||||
:disabled="triggerInput" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
116
src/components/Form/FiltersType/Type12.vue
Normal file → Executable file
116
src/components/Form/FiltersType/Type12.vue
Normal file → Executable file
@ -2,13 +2,91 @@
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithSuffix from '../InputWithSuffix.vue';
|
||||
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
|
||||
import { onMounted, ref } from 'vue';
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const uppp = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const ulp = ref({ id: "", name: ulpPlaceholder });
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
posko: ulp.value,
|
||||
periode: '',
|
||||
minDurasiResponseTime: 1,
|
||||
maxDurasiResponseTime: 1
|
||||
})
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
uppp.value = { id: 0, name: up3Placeholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value;
|
||||
selectedUp3Ulp(value);
|
||||
ulp.value = { id: "", name: ulpPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
ulp.value = value;
|
||||
selectedUlp(value);
|
||||
data.value.posko = value;
|
||||
};
|
||||
const triggerInput = ref(false)
|
||||
const sla = [
|
||||
{
|
||||
id: 0,
|
||||
name: 'Durasi Menit'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dibawah / Sesuai SLA (<= 45 menit)'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Melebihi SLA (> 45 menit)'
|
||||
}
|
||||
];
|
||||
const changeDuration = (value: any) => {
|
||||
if (value.id === 0) {
|
||||
console.log('Durasi Menit')
|
||||
data.value.minDurasiResponseTime = 0
|
||||
data.value.maxDurasiResponseTime = 5
|
||||
triggerInput.value = false
|
||||
} else if (value.id === 1) {
|
||||
data.value.minDurasiResponseTime = 0
|
||||
data.value.maxDurasiResponseTime = 45
|
||||
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
|
||||
triggerInput.value = true
|
||||
} else {
|
||||
data.value.minDurasiResponseTime = 46
|
||||
data.value.maxDurasiResponseTime = 99999 * 60 * 24
|
||||
triggerInput.value = true
|
||||
console.log('Melebihi SLA (> 45 menit)')
|
||||
}
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
<Select
|
||||
@update:selected="setUid($event)"
|
||||
:data="itemsUid"
|
||||
:placeholder="uidPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -16,7 +94,11 @@
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -24,7 +106,11 @@
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
<Select
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -40,12 +126,30 @@
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<Select placeholder="Durasi Menit" />
|
||||
<Select
|
||||
@update:selected="changeDuration($event)"
|
||||
:data="sla"
|
||||
placeholder="Durasi Menit"
|
||||
/>
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<InputWithSuffix />
|
||||
<InputWithSuffix
|
||||
@update:minute-value="
|
||||
(value :any)=> {
|
||||
data.minDurasiResponseTime =value
|
||||
}
|
||||
"
|
||||
@value="data.minDurasiResponseTime"
|
||||
:disabled=triggerInput />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputWithSuffix />
|
||||
<InputWithSuffix
|
||||
@update:minute-value="
|
||||
(value :any)=> {
|
||||
data.maxDurasiResponseTime = value
|
||||
}
|
||||
"
|
||||
@value="data.maxDurasiResponseTime"
|
||||
:disabled="triggerInput" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
70
src/components/Form/FiltersType/Type13.vue
Normal file → Executable file
70
src/components/Form/FiltersType/Type13.vue
Normal file → Executable file
@ -1,44 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
||||
import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
|
||||
import { onMounted, ref } from 'vue';
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const uppp = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const ulp = ref({ id: "", name: ulpPlaceholder });
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
posko: ulp.value,
|
||||
periode: '',
|
||||
group: 1
|
||||
})
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
uppp.value = { id: 0, name: up3Placeholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value;
|
||||
selectedUp3Ulp(value);
|
||||
ulp.value = { id: "", name: ulpPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
ulp.value = value;
|
||||
selectedUlp(value);
|
||||
data.value.posko = value;
|
||||
};
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
<Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Group By Kode Unit Distribusi:</label>
|
||||
|
||||
<InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
|
||||
<InlineRadioGroup @update:group-value="(value) => {
|
||||
data.group = value
|
||||
console.log('data.group', value)
|
||||
}" :radio-items="[{ id: 1, title: 'Tidak' }, { id: 2, title: 'Ya, Grupkan' }]" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
64
src/components/Form/FiltersType/Type14.vue
Normal file → Executable file
64
src/components/Form/FiltersType/Type14.vue
Normal file → Executable file
@ -1,37 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
|
||||
import { onMounted, ref } from 'vue';
|
||||
const uidPlaceholder = 'Semua Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Area';
|
||||
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const up3 = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const posko = ref({ id: 0, name: poskoPlaceholder });
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: up3.value,
|
||||
posko: posko.value,
|
||||
periode: '',
|
||||
})
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
up3.value = { id: 0, name: up3Placeholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
up3.value = value;
|
||||
selectedUp3Posko(value);
|
||||
posko.value = { id: 0, name: poskoPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
posko.value = value;
|
||||
selectedPosko(value);
|
||||
data.value.posko = value;
|
||||
};
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Distribusi/Wilayah"/>
|
||||
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Area:</label
|
||||
>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Area:</label>
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
|
||||
|
||||
<Select placeholder="Semua Area" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Posko:</label
|
||||
>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
15
src/components/Form/FiltersType/Type15.vue
Normal file → Executable file
15
src/components/Form/FiltersType/Type15.vue
Normal file → Executable file
@ -2,6 +2,21 @@
|
||||
import InputWithFilter from '../InputWithFilter.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
||||
import { ref } from 'vue';
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const uppp = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const ulp = ref({ id: "", name: ulpPlaceholder });
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
posko: ulp.value,
|
||||
periode: '',
|
||||
group: 1
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
112
src/components/Form/FiltersType/Type16.vue
Normal file → Executable file
112
src/components/Form/FiltersType/Type16.vue
Normal file → Executable file
@ -1,15 +1,81 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData,fetchMedia, items,itemsUp3, itemsPosko,itemsMedia} from './reference';
|
||||
fetchMedia();
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Posko,
|
||||
selectedPosko,
|
||||
fetchUid,
|
||||
fetchMedia,
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsPosko,
|
||||
itemsMedia
|
||||
} from './reference'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const poskoPlaceholder = 'Semua Posko'
|
||||
const mediaPlaceholder = 'Semua Media'
|
||||
const up3 = ref({ id: 0, name: up3Placeholder })
|
||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
||||
const media = ref({ id: "", name: mediaPlaceholder })
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: up3.value,
|
||||
posko: posko.value,
|
||||
media: media.value,
|
||||
periode: ''
|
||||
})
|
||||
|
||||
watch(data.value, (value) => {
|
||||
emit('update:filters', value)
|
||||
})
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
up3.value = value
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
posko.value = value
|
||||
selectedPosko(value)
|
||||
data.value.posko = value
|
||||
}
|
||||
const setMedia = (value: any) => {
|
||||
media.value = value
|
||||
data.value.media = value
|
||||
}
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
fetchMedia()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Induk Distribusi/Wilayah:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
<Select
|
||||
:data="itemsUid"
|
||||
@update:selected="setUid($event)"
|
||||
:placeholder="uidPlaceholder"
|
||||
:selected="uid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -17,27 +83,45 @@ fetchMedia();
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
<Select
|
||||
:data="itemsUp3"
|
||||
@update:selected="setUp3($event)"
|
||||
:placeholder="up3Placeholder"
|
||||
:selected="up3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
<Select
|
||||
:data="itemsPosko"
|
||||
@update:selected="setPosko($event)"
|
||||
:placeholder="poskoPlaceholder"
|
||||
:selected="posko"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Media:</label>
|
||||
|
||||
<Select placeholder="Semua Media" :data="itemsMedia" />
|
||||
<Select
|
||||
:selected="media"
|
||||
@update:selected="setMedia($event)"
|
||||
:placeholder="mediaPlaceholder"
|
||||
:data="itemsMedia"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
" />
|
||||
<DatePicker
|
||||
@update:date-value="
|
||||
(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
4
src/components/Form/FiltersType/Type17.vue
Normal file → Executable file
4
src/components/Form/FiltersType/Type17.vue
Normal file → Executable file
@ -2,6 +2,10 @@
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithFilter from '../InputWithFilter.vue'
|
||||
import { ref } from 'vue'
|
||||
const data = ref({
|
||||
periode: '',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
26
src/components/Form/FiltersType/Type18.vue
Normal file → Executable file
26
src/components/Form/FiltersType/Type18.vue
Normal file → Executable file
@ -1,17 +1,16 @@
|
||||
<!-- <script setup lang="ts">
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import SelectMulti from '@/components/SelectMulti.vue'
|
||||
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
|
||||
fetchData();
|
||||
fetchUid();
|
||||
|
||||
const departments = [
|
||||
{ id: 1, name: 'Marketing', contact: 'Durward Reynolds' },
|
||||
{ id: 2, name: 'HR', contact: 'Kenton Towne' },
|
||||
{ id: 3, name: 'Sales', contact: 'Therese Wunsch' },
|
||||
{ id: 4, name: 'Finance', contact: 'Benedict Kessler' },
|
||||
{ id: 5, name: 'Customer service', contact: 'Katelyn Rohan' },
|
||||
const jenisTransakasi = [
|
||||
{ id: 1, value: 'Koreksi Transaksi Individual',label: 'Koreksi Transaksi Individual' },
|
||||
{ id: 2, value: 'Cleansing Traksaksi TM',label: 'Cleansing Traksaksi TM', },
|
||||
{ id: 3, value: 'Koreksi Transaksi TM',label: 'Koreksi Transaksi TM', },
|
||||
{ id: 4, value: 'Koreksi Kode Gangguan dan Anev',label: 'Koreksi Kode Gangguan dan Anev' },
|
||||
]
|
||||
|
||||
</script>
|
||||
@ -38,12 +37,15 @@ const departments = [
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Transaksi:</label>
|
||||
|
||||
<SelectMulti :data="departments" placeholder="Semua Jenis Transaksi" />
|
||||
<SelectMulti
|
||||
:tags="jenisTransakasi"
|
||||
placeholder="Semua Jenis Transaksi"
|
||||
useLabel
|
||||
label="Jenis Transaksi"
|
||||
/>
|
||||
</div>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
<DatePicker />
|
||||
</div>
|
||||
</template> -->
|
||||
|
||||
<template></template>
|
||||
</template>
|
||||
|
||||
68
src/components/Form/FiltersType/Type2.vue
Normal file → Executable file
68
src/components/Form/FiltersType/Type2.vue
Normal file → Executable file
@ -1,45 +1,94 @@
|
||||
<!-- <script setup lang="ts">
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import { selectedUid, selectedUp3Ulp, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
|
||||
import { ref } from 'vue';
|
||||
import { selectedUid, selectedUp3Ulp,fetchRegional,fetchUid,fetchUidWithRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { getMonthName } from '@/utils/texts';
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const regionalPlaceholder = 'Semua Regional';
|
||||
const bulanPlaceholder = getMonthName(new Date().getMonth());
|
||||
const tahunPlaceholder = new Date().getFullYear().toString();
|
||||
const bulanSelected = new Date().getMonth();
|
||||
const tahunSelected = new Date().getFullYear();
|
||||
const uppp = ref({ id: 0, name: up3Placholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const ulp = ref({ id: 0, name: ulpPlaceholder });
|
||||
const ulp = ref({ id: "", name: ulpPlaceholder });
|
||||
const bulan = ref({ id: bulanSelected, name: bulanPlaceholder });
|
||||
const tahun = ref({ id: tahunSelected, name: tahunPlaceholder });
|
||||
const regional = ref({ id: 0, name: regionalPlaceholder });
|
||||
const emit = defineEmits(['update:filters'])
|
||||
// Find index of January
|
||||
const bulanIndex = months.findIndex(month => month.id === bulan.value.id);
|
||||
console.log(bulanSelected)
|
||||
// Remove January if found
|
||||
if (bulanIndex !== -1) {
|
||||
months.splice(bulanIndex, 1);
|
||||
}
|
||||
// Find index of current year
|
||||
const tahunIndex = years.value.findIndex(year => year.id === tahun.value.id);
|
||||
if (tahunIndex !== -1) {
|
||||
years.value.splice(tahunIndex, 1);
|
||||
}
|
||||
const data = ref({
|
||||
regional: regional.value,
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
posko: ulp.value,
|
||||
periode: '',
|
||||
bulan : bulan.value,
|
||||
tahun : tahun.value
|
||||
})
|
||||
|
||||
const setRegional = (value: any) => {
|
||||
regional.value = value;
|
||||
fetchUid();
|
||||
// harusnya fetchUidWithRegional(value);
|
||||
selectedUid(value);
|
||||
uid.value = { id: 0, name: uidPlaceholder };
|
||||
data.value.regional = value;
|
||||
|
||||
};
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
uppp.value = { id: 0, name: up3Placholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value;
|
||||
selectedUp3Ulp(value);
|
||||
ulp.value = { id: 0, name: ulpPlaceholder };
|
||||
ulp.value = { id: "", name: ulpPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
ulp.value = value;
|
||||
selectedUp3Ulp(value);
|
||||
data.value.posko = value;
|
||||
};
|
||||
const setMonth = (value: any) => {
|
||||
bulan.value = value;
|
||||
data.value.bulan = value;
|
||||
console.log(data.value)
|
||||
|
||||
};
|
||||
const setYear = (value: any) => {
|
||||
tahun.value = value;
|
||||
data.value.tahun = value;
|
||||
};
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchRegional()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Regional:</label>
|
||||
|
||||
<Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
|
||||
<Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -64,10 +113,9 @@ const setUlp = (value: any) => {
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
|
||||
|
||||
<div class="grid grid-cols-2 gap-x-2">
|
||||
<Select :data="months" placeholder="Pilih Bulan" />
|
||||
<Select :data="years" placeholder="Pilih Tahun" />
|
||||
<Select @update:selected="setMonth($event)" :data="months" :placeholder="bulanPlaceholder" />
|
||||
<Select @update:selected="setYear($event)" :data="years" :placeholder="tahunPlaceholder" />
|
||||
</div>
|
||||
</div>
|
||||
</template> -->
|
||||
</template>
|
||||
|
||||
<template></template>
|
||||
|
||||
27
src/components/Form/FiltersType/Type3.vue
Normal file → Executable file
27
src/components/Form/FiltersType/Type3.vue
Normal file → Executable file
@ -1,32 +1,44 @@
|
||||
<!-- <script setup lang="ts">
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
|
||||
import { ref } from 'vue';
|
||||
fetchData();
|
||||
import { onMounted, ref } from 'vue';
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const uppp = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const ulp = ref({ id: 0, name: ulpPlaceholder });
|
||||
|
||||
const ulp = ref({ id: "", name: ulpPlaceholder });
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
posko: ulp.value,
|
||||
periode: ''
|
||||
})
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
uppp.value = { id: 0, name: up3Placeholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value;
|
||||
selectedUp3Ulp(value);
|
||||
ulp.value = { id: 0, name: ulpPlaceholder };
|
||||
ulp.value = { id: "", name: ulpPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
ulp.value = value;
|
||||
selectedUlp(value);
|
||||
data.value.posko = value;
|
||||
};
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -56,5 +68,4 @@ const setUlp = (value: any) => {
|
||||
}
|
||||
" />
|
||||
</div>
|
||||
</template> -->
|
||||
<template></template>
|
||||
</template>
|
||||
|
||||
69
src/components/Form/FiltersType/Type4.vue
Normal file → Executable file
69
src/components/Form/FiltersType/Type4.vue
Normal file → Executable file
@ -1,13 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
|
||||
import { onMounted, ref } from 'vue';
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const uppp = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const ulp = ref({ id: "", name: ulpPlaceholder });
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
posko: ulp.value,
|
||||
periode: '',
|
||||
jenisLaporan : ''
|
||||
})
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value;
|
||||
selectedUid(value);
|
||||
uppp.value = { id: 0, name: up3Placeholder };
|
||||
data.value.uid = value;
|
||||
};
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value;
|
||||
selectedUp3Ulp(value);
|
||||
ulp.value = { id: "", name: ulpPlaceholder };
|
||||
data.value.up3 = value;
|
||||
};
|
||||
|
||||
const setUlp = (value: any) => {
|
||||
ulp.value = value;
|
||||
selectedUlp(value);
|
||||
data.value.posko = value;
|
||||
};
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
// fetchUid()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
<Select
|
||||
@update:selected="setUid($event)"
|
||||
:data="itemsUid"
|
||||
:placeholder="uidPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -15,7 +58,11 @@
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:placeholder="up3Placeholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -23,7 +70,11 @@
|
||||
>Unit Layanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Layanan Pelanggan" />
|
||||
<Select
|
||||
@update:selected="setUlp($event)"
|
||||
:data="itemsUlp"
|
||||
:placeholder="ulpPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -31,7 +82,17 @@
|
||||
>Jenis Laporan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Laporan Berulang Unit" />
|
||||
<Select
|
||||
@update:selected="(value) => {
|
||||
data.jenisLaporan = value
|
||||
}"
|
||||
:data="[
|
||||
{ id: 1, name: 'Laporan Berulang Unit' },
|
||||
{ id: 2, name: 'Laporan Berulang Pelanggan' },
|
||||
{ id: 3, name: 'Laporan Berulang Pelanggan dan Unit' },
|
||||
]"
|
||||
:placeholder="'Semua Jenis Laporan'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
|
||||
72
src/components/Form/FiltersType/Type5.vue
Normal file → Executable file
72
src/components/Form/FiltersType/Type5.vue
Normal file → Executable file
@ -1,13 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Posko,
|
||||
selectedPosko,
|
||||
fetchUid,
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsPosko
|
||||
} from './reference'
|
||||
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const poskoPlaceholder = 'Semua Posko'
|
||||
const uppp = ref({ id: 0, name: uppPlaceholder })
|
||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
posko: posko.value,
|
||||
periode: ''
|
||||
})
|
||||
|
||||
watch(data.value, (value) => {
|
||||
emit('update:filters', value)
|
||||
})
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
uppp.value = { id: 0, name: uppPlaceholder }
|
||||
data.value.uid = value
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
posko.value = value
|
||||
selectedPosko(value)
|
||||
data.value.posko = value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Induk Distribusi/Wilayah:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
<Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -15,19 +70,18 @@
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
<Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
" />
|
||||
|
||||
89
src/components/Form/FiltersType/Type6.vue
Normal file → Executable file
89
src/components/Form/FiltersType/Type6.vue
Normal file → Executable file
@ -1,57 +1,90 @@
|
||||
<!-- <script setup lang="ts">
|
||||
import InputNumber from '@/components/Form/InputNumber.vue'
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
|
||||
import { useTotalReport } from '@/stores/totalReport';
|
||||
fetchData();
|
||||
const changeMinReport = (value: any) => {
|
||||
useTotalReport().setDataMin(value)
|
||||
}
|
||||
const changeMaxReport = (value: any) => {
|
||||
useTotalReport().setDataMax(value)
|
||||
}
|
||||
<script setup lang="ts">
|
||||
import InputNumber from '@/components/Form/InputNumber.vue'
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
|
||||
import { onMounted, ref } from 'vue';
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const up3 = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const posko = ref({ id: 0, name: poskoPlaceholder });
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: up3.value,
|
||||
posko: posko.value,
|
||||
periode: '',
|
||||
minJmlLapor: 1,
|
||||
maxJmlLapor: 1
|
||||
})
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
up3.value = value
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
posko.value = value
|
||||
selectedPosko(value)
|
||||
data.value.posko = value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
|
||||
<Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
" />
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<InputNumber :value="1" @change="changeMinReport($event.target.value)" />
|
||||
<InputNumber :value="data.minJmlLapor" @update:time-value="(value) => {
|
||||
data.minJmlLapor = value
|
||||
}" />
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputNumber :value="1" @change="changeMaxReport($event.target.value)"/>
|
||||
<InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => {
|
||||
data.maxJmlLapor = value
|
||||
}" />
|
||||
</div>
|
||||
</div>
|
||||
</template> -->
|
||||
</template>
|
||||
|
||||
<template></template>
|
||||
|
||||
148
src/components/Form/FiltersType/Type7.vue
Normal file → Executable file
148
src/components/Form/FiltersType/Type7.vue
Normal file → Executable file
@ -1,69 +1,120 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithSuffix from '../InputWithSuffix.vue';
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InputWithSuffix from '../InputWithSuffix.vue';
|
||||
import { useTotalDuration } from '@/stores/totalDuration';
|
||||
import { ref } from 'vue';
|
||||
const data = [
|
||||
|
||||
{
|
||||
id : 1,
|
||||
name : 'Dibawah / Sesuai SLA (<= 45 menit)'
|
||||
},
|
||||
{
|
||||
id : 2,
|
||||
name : 'Melebihi SLA (> 45 menit)'
|
||||
}
|
||||
|
||||
]
|
||||
const triggerInput = ref(false)
|
||||
const changeDuration = (value: any) => {
|
||||
if(value.id === 0 ){
|
||||
console.log('Durasi Menit')
|
||||
useTotalDuration().setDataMin(0)
|
||||
useTotalDuration().setDataMax(5)
|
||||
triggerInput.value = false
|
||||
}else if(value.id === 1){
|
||||
useTotalDuration().setDataMin(0)
|
||||
useTotalDuration().setDataMax(45)
|
||||
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
|
||||
triggerInput.value = true
|
||||
}else{
|
||||
useTotalDuration().setDataMin(46)
|
||||
useTotalDuration().setDataMax(7*60*24)
|
||||
triggerInput.value = true
|
||||
console.log('Melebihi SLA (> 45 menit)')
|
||||
}
|
||||
|
||||
import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
|
||||
const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
|
||||
const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
|
||||
const up3 = ref({ id: 0, name: up3Placeholder });
|
||||
const uid = ref({ id: 0, name: uidPlaceholder });
|
||||
const posko = ref({ id: 0, name: poskoPlaceholder });
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: up3.value,
|
||||
posko: posko.value,
|
||||
periode: '',
|
||||
minTime: useTotalDuration().getDataMin().split(' ')[0],
|
||||
maxTime: useTotalDuration().getDataMax().split(' ')[0]
|
||||
})
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
up3.value = { id: 0, name: up3Placeholder }
|
||||
data.value.uid = value
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
up3.value = value
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
posko.value = value
|
||||
selectedPosko(value)
|
||||
data.value.posko = value
|
||||
}
|
||||
const sla = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dibawah / Sesuai SLA (<= 45 menit)'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Melebihi SLA (> 45 menit)'
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
const setMin = (value: any) => {
|
||||
console.log(value)
|
||||
data.value.minTime = value
|
||||
useTotalDuration().setDataMin(value)
|
||||
|
||||
}
|
||||
const setMax = (value: any) => {
|
||||
data.value.maxTime = value
|
||||
useTotalDuration().setDataMax(value)
|
||||
}
|
||||
const triggerInput = ref(false)
|
||||
const changeDuration = (value: any) => {
|
||||
if (value.id === 0) {
|
||||
setMin("1 Menit")
|
||||
setMax("5 Menit")
|
||||
console.log('Durasi Menit')
|
||||
triggerInput.value = false
|
||||
} else if (value.id === 1) {
|
||||
setMin("1 Menit")
|
||||
setMax("45 Menit")
|
||||
console.log('Dibawah / Sesuai SLA (<= 45 menit)')
|
||||
triggerInput.value = true
|
||||
} else {
|
||||
setMin("45 Menit")
|
||||
setMax(99999 * 60 * 24+ ' Menit')
|
||||
triggerInput.value = true
|
||||
console.log('Melebihi SLA (> 45 menit)')
|
||||
}
|
||||
}
|
||||
watch(data, (newValue) => {
|
||||
emit('update:filters', newValue)
|
||||
})
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
<Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
<Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
<Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
" />
|
||||
</div>
|
||||
|
||||
@ -71,12 +122,15 @@ import { ref } from 'vue';
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
|
||||
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<Select @update:selected="changeDuration($event)" :data="data" placeholder="Durasi Menit" />
|
||||
<Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
|
||||
|
||||
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
||||
<InputWithSuffix :value="useTotalDuration().getDataMin()" :disabled=triggerInput />
|
||||
<InputWithSuffix
|
||||
:value="`${data.minTime} Menit`"
|
||||
/>
|
||||
<small class="flex items-center">s/d</small>
|
||||
<InputWithSuffix :value="useTotalDuration().getDataMax()" :disabled="triggerInput" />
|
||||
<InputWithSuffix
|
||||
:value="`${data.maxTime} Menit`"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
73
src/components/Form/FiltersType/Type8.vue
Normal file → Executable file
73
src/components/Form/FiltersType/Type8.vue
Normal file → Executable file
@ -1,29 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Posko,
|
||||
fetchUid,
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
} from './reference'
|
||||
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const poskoPlaceholder = 'Semua Posko'
|
||||
const uppp = ref({ id: 0, name: uppPlaceholder })
|
||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||
const posko = ref({ id: 0, name: poskoPlaceholder })
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
posko: posko.value,
|
||||
periode: ''
|
||||
})
|
||||
|
||||
watch(data.value, (value) => {
|
||||
emit('update:filters', value)
|
||||
})
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
uppp.value = { id: 0, name: uppPlaceholder }
|
||||
data.value.uid = value
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
<Select
|
||||
@update:selected="setUid($event)"
|
||||
:data="itemsUid"
|
||||
:placeholder="uidPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:placeholder="uppPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
|
||||
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
<DatePicker @update:date-value="(value) => {
|
||||
data.periode = value
|
||||
}
|
||||
" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
72
src/components/Form/FiltersType/Type9.vue
Normal file → Executable file
72
src/components/Form/FiltersType/Type9.vue
Normal file → Executable file
@ -2,13 +2,71 @@
|
||||
import Select from '@/components/Select.vue'
|
||||
import DatePicker from '@/components/DatePicker.vue'
|
||||
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
|
||||
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import {
|
||||
selectedUid,
|
||||
selectedUp3Posko,
|
||||
selectedPosko,
|
||||
fetchUid,
|
||||
itemsUid,
|
||||
itemsUp3,
|
||||
itemsPosko
|
||||
} from './reference'
|
||||
|
||||
const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
|
||||
const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
|
||||
const poskoPlaceholder = 'Semua Posko'
|
||||
const uppp = ref({ id: 0, name: uppPlaceholder })
|
||||
const uid = ref({ id: 0, name: uidPlaceholder })
|
||||
const posko = ref({ id: "" ,name: poskoPlaceholder })
|
||||
const emit = defineEmits(['update:filters'])
|
||||
const data = ref({
|
||||
uid: uid.value,
|
||||
up3: uppp.value,
|
||||
posko: posko.value,
|
||||
periode: ''
|
||||
})
|
||||
|
||||
watch(data.value, (value) => {
|
||||
emit('update:filters', value)
|
||||
})
|
||||
|
||||
const setUid = (value: any) => {
|
||||
uid.value = value
|
||||
selectedUid(value)
|
||||
uppp.value = { id: 0, name: uppPlaceholder }
|
||||
data.value.uid = value
|
||||
}
|
||||
|
||||
const setUp3 = (value: any) => {
|
||||
uppp.value = value
|
||||
selectedUp3Posko(value)
|
||||
posko.value = { id: 0, name: poskoPlaceholder }
|
||||
data.value.up3 = value
|
||||
}
|
||||
|
||||
const setPosko = (value: any) => {
|
||||
posko.value = value
|
||||
selectedPosko(value)
|
||||
data.value.posko = value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emit('update:filters', data.value)
|
||||
fetchUid()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
|
||||
|
||||
<Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
|
||||
<Select
|
||||
@update:selected="setUid($event)"
|
||||
:data="itemsUid"
|
||||
:placeholder="uidPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
@ -16,13 +74,21 @@
|
||||
>Unit Pelaksanaan Pelayanan Pelanggan:</label
|
||||
>
|
||||
|
||||
<Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
|
||||
<Select
|
||||
@update:selected="setUp3($event)"
|
||||
:data="itemsUp3"
|
||||
:placeholder="uppPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
<label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
|
||||
|
||||
<Select placeholder="Semua Posko" />
|
||||
<Select
|
||||
@update:selected="setPosko($event)"
|
||||
:data="itemsPosko"
|
||||
:placeholder="poskoPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
|
||||
|
||||
0
src/components/Form/FiltersType/index.ts
Normal file → Executable file
0
src/components/Form/FiltersType/index.ts
Normal file → Executable file
51
src/components/Form/FiltersType/reference.ts
Normal file → Executable file
51
src/components/Form/FiltersType/reference.ts
Normal file → Executable file
@ -2,7 +2,7 @@ import { usePostsStore } from '@/stores/posts'
|
||||
import { useRegionStore } from '@/stores/region'
|
||||
import { useUlpStore } from '@/stores/ulp'
|
||||
import { useUp3Store } from '@/stores/up3'
|
||||
import { getUid, getUp3, getPosko, getUlp } from '@/utils/network'
|
||||
import { getUid, getUp3, getPosko, getUlp, getRegional } from '@/utils/network'
|
||||
import { ref } from 'vue'
|
||||
interface Item {
|
||||
id: any
|
||||
@ -56,12 +56,14 @@ const fetchMedia = () => {
|
||||
const fetchUid = async () => {
|
||||
try {
|
||||
const res = await getUid()
|
||||
itemsUid.value = res.data.map((item: any) => ({
|
||||
id: item.id,
|
||||
name: item.nama
|
||||
}))
|
||||
itemsUid.value = res.data.map((item: any) => (
|
||||
{
|
||||
id: item.id,
|
||||
name: item.nama.toUpperCase(),
|
||||
}
|
||||
));
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error)
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
@ -98,31 +100,20 @@ const fetchDataPosko = async (up3: number) => {
|
||||
console.error('Error fetching data:', error)
|
||||
}
|
||||
}
|
||||
const fetchRegional = () => {
|
||||
itemsRegional.value = [
|
||||
{ id: '1', name: 'Wilayah Sumatera' },
|
||||
{ id: '2', name: 'Wilayah Jawa Bali' },
|
||||
{ id: '3', name: 'Wilayah Kalimantan' },
|
||||
{ id: '4', name: 'Wilayah Sulawesi' },
|
||||
{ id: '5', name: 'Wilayah Nusa Tenggara' },
|
||||
{ id: '6', name: 'Wilayah Maluku Papua' }
|
||||
]
|
||||
}
|
||||
const fetchStatus = (data: any) => {
|
||||
const status = [
|
||||
{ id: '8', name: 'Selesai' },
|
||||
{ id: '7', name: 'Nyala' },
|
||||
{ id: '6', name: 'Pengalihan' },
|
||||
{ id: '5', name: 'Dialihkan' },
|
||||
{ id: '4', name: 'Dalam Pengerjaan' },
|
||||
{ id: '3', name: 'Dalam Perjalanan' },
|
||||
{ id: '2', name: 'Penugasan Regu' },
|
||||
{ id: '1', name: 'lapor' }
|
||||
]
|
||||
const filteredStatus = status.find((item) => item.id == data)
|
||||
const name = filteredStatus ? filteredStatus.name : null
|
||||
return name
|
||||
const fetchRegional = async () => {
|
||||
try {
|
||||
const res = await getRegional()
|
||||
itemsRegional.value = res.data.map((item: any) => (
|
||||
{
|
||||
id: item.id,
|
||||
name: item.nama.toUpperCase(),
|
||||
}
|
||||
));
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const selectedUid = (value: any) => {
|
||||
useRegionStore().setData(value.id)
|
||||
fetchDataUp3(value.id)
|
||||
|
||||
24
src/components/Form/InlineRadioGroup.vue
Normal file → Executable file
24
src/components/Form/InlineRadioGroup.vue
Normal file → Executable file
@ -3,8 +3,10 @@
|
||||
<fieldset>
|
||||
<div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
|
||||
<div v-for="item in radioItems" :key="item.id" class="flex items-center">
|
||||
<input :id="`${item.id}`" type="radio" name="radio"
|
||||
:checked="item.hasOwnProperty('checked') && item.checked === true"
|
||||
<input v-model="groupValue"
|
||||
type="radio" name="radio"
|
||||
:checked="itemSelected.id === item.id ? true : false"
|
||||
@change="onChange(item)"
|
||||
class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
|
||||
<label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
|
||||
item.title }}</label>
|
||||
@ -15,7 +17,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type PropType } from 'vue'
|
||||
import { ref, watch, type PropType, onMounted } from 'vue'
|
||||
|
||||
interface Item {
|
||||
id: number;
|
||||
@ -23,10 +25,24 @@ interface Item {
|
||||
checked?: boolean;
|
||||
}
|
||||
|
||||
defineProps({
|
||||
const onChange= (e:Item) => {
|
||||
itemSelected.value = e
|
||||
emit('update:groupValue', e)
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
radioItems: {
|
||||
type: Array as PropType<Item[]>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const itemSelected = ref(props.radioItems[0])
|
||||
const emit = defineEmits(['update:groupValue'])
|
||||
const groupValue = ref(1)
|
||||
|
||||
onMounted(() => {
|
||||
itemSelected.value = props.radioItems[0]
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
47
src/components/Form/InputNumber.vue
Normal file → Executable file
47
src/components/Form/InputNumber.vue
Normal file → Executable file
@ -1,36 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: "",
|
||||
},
|
||||
})
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(['update:timeValue'])
|
||||
const timeValue = ref(1)
|
||||
watch(timeValue, (newValue) => {
|
||||
emit('update:timeValue', newValue)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
||||
<input
|
||||
v-model="timeValue"
|
||||
autocomplete="off"
|
||||
type="number"
|
||||
:value ="props.value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9.]*"
|
||||
|
||||
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
|
||||
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
|
||||
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
|
||||
|
||||
0
src/components/Form/InputWithFilter.vue
Normal file → Executable file
0
src/components/Form/InputWithFilter.vue
Normal file → Executable file
62
src/components/Form/InputWithSuffix.vue
Normal file → Executable file
62
src/components/Form/InputWithSuffix.vue
Normal file → Executable file
@ -1,38 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: "",
|
||||
},
|
||||
})
|
||||
import { computed, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: '1 Menit'
|
||||
}
|
||||
|
||||
})
|
||||
const handleInput = (e :any) => {
|
||||
e.value = e.value.replace(/[^0-9.]/g, '')
|
||||
}
|
||||
const handleBlur = (e :any) => {
|
||||
e.value = e.value ? e.value + ' Menit' : ''
|
||||
}
|
||||
const handleFocus = (e:any) => {
|
||||
e.value = e.value.replace(/[^0-9.]/g, '')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
||||
<div
|
||||
|
||||
class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
||||
<input
|
||||
:value="props.value"
|
||||
autocomplete="off"
|
||||
type="text"
|
||||
:value ="props.value"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9.]*"
|
||||
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
|
||||
onblur="this.value = this.value ? this.value + ' Menit' : ''"
|
||||
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
|
||||
:disabled="disabled"
|
||||
@oninput="handleInput($event)"
|
||||
@onblur="handleBlur($event)"
|
||||
@onfocus="handleFocus($event)"
|
||||
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
0
src/components/Input.vue
Normal file → Executable file
0
src/components/Input.vue
Normal file → Executable file
0
src/components/InputText.vue
Normal file → Executable file
0
src/components/InputText.vue
Normal file → Executable file
0
src/components/Navigation/Aside/Aside.vue
Normal file → Executable file
0
src/components/Navigation/Aside/Aside.vue
Normal file → Executable file
0
src/components/Navigation/Aside/AsideMenuMultiple.vue
Normal file → Executable file
0
src/components/Navigation/Aside/AsideMenuMultiple.vue
Normal file → Executable file
0
src/components/Navigation/Aside/AsideMenuSingle.vue
Normal file → Executable file
0
src/components/Navigation/Aside/AsideMenuSingle.vue
Normal file → Executable file
0
src/components/Navigation/Header.vue
Normal file → Executable file
0
src/components/Navigation/Header.vue
Normal file → Executable file
0
src/components/Navigation/Navigation.vue
Normal file → Executable file
0
src/components/Navigation/Navigation.vue
Normal file → Executable file
0
src/components/Notification/Notification.vue
Normal file → Executable file
0
src/components/Notification/Notification.vue
Normal file → Executable file
0
src/components/Notification/NotificationProvider.vue
Normal file → Executable file
0
src/components/Notification/NotificationProvider.vue
Normal file → Executable file
0
src/components/Notification/icons/CloseIcon.vue
Normal file → Executable file
0
src/components/Notification/icons/CloseIcon.vue
Normal file → Executable file
0
src/components/Notification/icons/ErrorIcon.vue
Normal file → Executable file
0
src/components/Notification/icons/ErrorIcon.vue
Normal file → Executable file
0
src/components/Notification/icons/InfoIcon.vue
Normal file → Executable file
0
src/components/Notification/icons/InfoIcon.vue
Normal file → Executable file
0
src/components/Notification/icons/SuccessIcon.vue
Normal file → Executable file
0
src/components/Notification/icons/SuccessIcon.vue
Normal file → Executable file
0
src/components/Notification/icons/WarningIcon.vue
Normal file → Executable file
0
src/components/Notification/icons/WarningIcon.vue
Normal file → Executable file
0
src/components/Notification/icons/index.ts
Normal file → Executable file
0
src/components/Notification/icons/index.ts
Normal file → Executable file
0
src/components/Notification/index.ts
Normal file → Executable file
0
src/components/Notification/index.ts
Normal file → Executable file
0
src/components/Notification/interfaces/Notification.interface.ts
Normal file → Executable file
0
src/components/Notification/interfaces/Notification.interface.ts
Normal file → Executable file
0
src/components/Notification/interfaces/NotificationConfig.interface.ts
Normal file → Executable file
0
src/components/Notification/interfaces/NotificationConfig.interface.ts
Normal file → Executable file
0
src/components/Notification/interfaces/NotificationsState.interface.ts
Normal file → Executable file
0
src/components/Notification/interfaces/NotificationsState.interface.ts
Normal file → Executable file
0
src/components/Notification/interfaces/index.ts
Normal file → Executable file
0
src/components/Notification/interfaces/index.ts
Normal file → Executable file
0
src/components/Notification/store/index.ts
Normal file → Executable file
0
src/components/Notification/store/index.ts
Normal file → Executable file
99
src/components/Pages/Anomali/Table_61.vue
Normal file → Executable file
99
src/components/Pages/Anomali/Table_61.vue
Normal file → Executable file
@ -1,17 +1,24 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type4 @update:filters="(value) => {
|
||||
filters = value
|
||||
}
|
||||
" />
|
||||
</Filters>
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||
Laporan Pengaduan Total
|
||||
</h1>
|
||||
</div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
@ -100,7 +107,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
@ -110,6 +117,15 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { AnomaliTable2 } from '.'
|
||||
import { Type4 } from '@/components/Form/FiltersType'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
const position = { of: '#data' };
|
||||
const showIndicator = ref(true);
|
||||
const shading = ref(true);
|
||||
const showPane = ref(true);
|
||||
const data = ref<any[]>([])
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
@ -145,11 +161,70 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const filters = useFiltersStore()
|
||||
|
||||
filters.setConfig({
|
||||
type: 'type-4'
|
||||
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
|
||||
query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
||||
laporanAnomaliPenangananPengaduanGangguanPetugas(
|
||||
dateFrom: $dateFrom
|
||||
dateTo: $dateTo
|
||||
posko: $posko
|
||||
idUid: $idUid
|
||||
idUp3: $idUp3
|
||||
) {
|
||||
nama_posko
|
||||
persen_penyelesaian_petugas_anomali_cc_123_marking
|
||||
persen_penyelesaian_petugas_anomali_cc_123_non_marking
|
||||
persen_penyelesaian_petugas_anomali_marking
|
||||
persen_penyelesaian_petugas_anomali_non_marking
|
||||
persen_penyelesaian_petugas_anomali_pln_mobile_marking
|
||||
persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
|
||||
total_penyelesaian_petugas_anomali_cc_123_marking
|
||||
total_penyelesaian_petugas_anomali_cc_123_non_marking
|
||||
total_penyelesaian_petugas_anomali_marking
|
||||
total_penyelesaian_petugas_anomali_non_marking
|
||||
total_penyelesaian_petugas_anomali_pln_mobile_marking
|
||||
total_penyelesaian_petugas_anomali_pln_mobile_non_marking
|
||||
total_petugas
|
||||
}
|
||||
}
|
||||
`
|
||||
const filterData = (params: any) => {
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
refetch({
|
||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
posko: posko ? posko.id : "",
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item,
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
const filters = ref()
|
||||
</script>
|
||||
12
src/components/Pages/Anomali/Table_62.vue
Normal file → Executable file
12
src/components/Pages/Anomali/Table_62.vue
Normal file → Executable file
@ -4,13 +4,14 @@
|
||||
Laporan Pengaduan PLN Mobile
|
||||
</h1>
|
||||
</div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
@exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
@ -41,6 +42,13 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { ref } from 'vue'
|
||||
const position = { of: '#data' };
|
||||
const showIndicator = ref(true);
|
||||
const shading = ref(true);
|
||||
const showPane = ref(true);
|
||||
const loading = ref(true)
|
||||
const data = ref<any[]>([])
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
|
||||
145
src/components/Pages/Anomali/Table_63.vue
Normal file → Executable file
145
src/components/Pages/Anomali/Table_63.vue
Normal file → Executable file
@ -1,4 +1,10 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type4 @update:filters="(value) => {
|
||||
filters = value
|
||||
}
|
||||
" />
|
||||
</Filters>
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||
Laporan Pengaduan Total
|
||||
@ -11,65 +17,70 @@
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
|
||||
data-type="number" caption="b" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
|
||||
data-type="number" caption="c" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
|
||||
caption="d=b+c" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center"
|
||||
data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking" data-type="number"
|
||||
caption="Marking" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center"
|
||||
data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking" data-type="number"
|
||||
caption="Non Marking" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
|
||||
data-type="number" caption="Marking" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center"
|
||||
data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking" data-type="number"
|
||||
caption="Non Marking" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_marking"
|
||||
data-type="number" caption="Marking" css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_non_marking"
|
||||
data-type="number" caption="Non Marking" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
</DxDataGrid>
|
||||
|
||||
<AnomaliTable4 />
|
||||
<AnomaliTable4 :filters-detail="filters" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
@ -78,6 +89,16 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { AnomaliTable4 } from '.'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
import { Type4 } from '@/components/Form/FiltersType'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
|
||||
const position = { of: '#data' };
|
||||
const showIndicator = ref(true);
|
||||
const shading = ref(true);
|
||||
const showPane = ref(true);
|
||||
const data = ref<any[]>([])
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
@ -112,12 +133,76 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
|
||||
query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!,
|
||||
$dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
|
||||
laporanAnomaliPenangananPengaduanGangguanPetugas(
|
||||
dateFrom: $dateFrom
|
||||
dateTo: $dateTo
|
||||
jenisLaporan :$jenisLaporan
|
||||
idUid: $idUid
|
||||
idUp3: $idUp3
|
||||
posko: $posko
|
||||
|
||||
onMounted(() => {
|
||||
const filters = useFiltersStore()
|
||||
|
||||
filters.setConfig({
|
||||
type: 'type-4'
|
||||
) {
|
||||
nama_posko
|
||||
persen_penyelesaian_petugas_anomali_cc_123_marking
|
||||
persen_penyelesaian_petugas_anomali_cc_123_non_marking
|
||||
persen_penyelesaian_petugas_anomali_marking
|
||||
persen_penyelesaian_petugas_anomali_non_marking
|
||||
persen_penyelesaian_petugas_anomali_pln_mobile_marking
|
||||
persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
|
||||
total_penyelesaian_petugas_anomali_cc_123_marking
|
||||
total_penyelesaian_petugas_anomali_cc_123_non_marking
|
||||
total_penyelesaian_petugas_anomali_marking
|
||||
total_penyelesaian_petugas_anomali_non_marking
|
||||
total_penyelesaian_petugas_anomali_pln_mobile_marking
|
||||
total_penyelesaian_petugas_anomali_pln_mobile_non_marking
|
||||
total_petugas
|
||||
}
|
||||
}
|
||||
`
|
||||
const filterData = (params: any) => {
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
refetch({
|
||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
posko: posko ? posko.id : "",
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item,
|
||||
total_penyelesaian_petugas_anomali_cc_123: item.total_penyelesaian_petugas_anomali_cc_123_marking + item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
|
||||
total_penyelesaian_petugas_anomali_pln_mobile: item.total_penyelesaian_petugas_anomali_pln_mobile_marking + item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
|
||||
total_penyelesaian_petugas_anomali: item.total_penyelesaian_petugas_anomali_marking + item.total_penyelesaian_petugas_anomali_non_marking,
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
const filters = ref()
|
||||
</script>
|
||||
125
src/components/Pages/Anomali/Table_64.vue
Normal file → Executable file
125
src/components/Pages/Anomali/Table_64.vue
Normal file → Executable file
@ -4,53 +4,56 @@
|
||||
Laporan Pengaduan PLN Mobile
|
||||
</h1>
|
||||
</div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
|
||||
css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
|
||||
data-type="number" caption="b" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
|
||||
data-type="number" caption="c" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
|
||||
caption="d=b+c" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=b/a"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
|
||||
data-type="number" caption="e=b/a" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f=c/a"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_cc_123"
|
||||
data-type="number" caption="f=c/a" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g=e+f"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali"
|
||||
data-type="number" caption="g=e+f" css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
|
||||
@ -58,6 +61,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
filtersDetail: {
|
||||
type: Object as PropType<any>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
@ -65,7 +74,18 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
import { ref, watch, type PropType } from 'vue'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
const position = { of: '#data' };
|
||||
const showIndicator = ref(true);
|
||||
const shading = ref(true);
|
||||
const showPane = ref(true);
|
||||
const data = ref<any[]>([])
|
||||
const filtersDetail = ref({}); // Declare the 'filters' variable
|
||||
watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref
|
||||
filterData(newValue)
|
||||
}, { immediate: true })
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
@ -99,5 +119,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
console.log(data)
|
||||
}
|
||||
const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
|
||||
query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!,
|
||||
$dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
|
||||
laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
|
||||
dateFrom: $dateFrom
|
||||
dateTo: $dateTo
|
||||
jenisLaporan :$jenisLaporan
|
||||
idUid: $idUid
|
||||
idUp3: $idUp3
|
||||
posko: $posko
|
||||
|
||||
) {
|
||||
nama_petugas
|
||||
nama_posko
|
||||
persen_penyelesaian_petugas_anomali
|
||||
persen_penyelesaian_petugas_anomali_cc_123
|
||||
persen_penyelesaian_petugas_anomali_pln_mobile
|
||||
total_penyelesaian_petugas_anomali
|
||||
total_penyelesaian_petugas_anomali_cc_123
|
||||
total_penyelesaian_petugas_anomali_pln_mobile
|
||||
total_wo
|
||||
}
|
||||
}
|
||||
`
|
||||
const filterData = (params: any) => {
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
refetch({
|
||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
posko: posko ? posko.id : "",
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item,
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
|
||||
</script>
|
||||
86
src/components/Pages/Anomali/Table_65.vue
Normal file → Executable file
86
src/components/Pages/Anomali/Table_65.vue
Normal file → Executable file
@ -1,4 +1,10 @@
|
||||
<template>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type4 @update:filters="(value) => {
|
||||
filters = value
|
||||
}
|
||||
" />
|
||||
</Filters>
|
||||
<div class="mt-4 lg:mt-6 max-w-7xl">
|
||||
<h1 class="text-xl font-medium md:text-2xl text-dark">
|
||||
Laporan Pengaduan Total
|
||||
@ -11,7 +17,8 @@
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
@ -76,7 +83,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
@ -86,6 +95,14 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { AnomaliTable6 } from '.'
|
||||
import { Type4 } from '@/components/Form/FiltersType'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
const position = { of: '#data' };
|
||||
const showIndicator = ref(true);
|
||||
const shading = ref(true);
|
||||
const showPane = ref(true);
|
||||
const data = ref<any[]>([])
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
@ -121,11 +138,64 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const filters = useFiltersStore()
|
||||
|
||||
filters.setConfig({
|
||||
type: 'type-4'
|
||||
const GET_laporanCheckInCheckOut = gql`
|
||||
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
||||
laporanCheckInCheckOut(
|
||||
dateFrom: $dateFrom
|
||||
dateTo: $dateTo
|
||||
posko: $posko
|
||||
idUid: $idUid
|
||||
idUp3: $idUp3
|
||||
) {
|
||||
avg_durasi_wo_gangguan_individual
|
||||
avg_durasi_wo_penugasan_khusus
|
||||
avg_rct_wo_gangguan_individual
|
||||
avg_rpt_wo_gangguan_individual
|
||||
jumlah_wo_gangguan_individual
|
||||
jumlah_wo_penugasan_khusus
|
||||
personil_yantek
|
||||
user_regu
|
||||
}
|
||||
}
|
||||
`
|
||||
const filterData = (params: any) => {
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
refetch({
|
||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
posko: posko ? posko.id : "",
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item,
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
GET_laporanCheckInCheckOut,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
const filters = ref()
|
||||
</script>
|
||||
12
src/components/Pages/Anomali/Table_66.vue
Normal file → Executable file
12
src/components/Pages/Anomali/Table_66.vue
Normal file → Executable file
@ -10,7 +10,8 @@
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
@ -34,6 +35,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
import { jsPDF } from 'jspdf'
|
||||
@ -41,6 +44,13 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
import { ref } from 'vue'
|
||||
const position = { of: '#data' };
|
||||
const showIndicator = ref(true);
|
||||
const shading = ref(true);
|
||||
const showPane = ref(true);
|
||||
const data = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
|
||||
0
src/components/Pages/Anomali/index.ts
Normal file → Executable file
0
src/components/Pages/Anomali/index.ts
Normal file → Executable file
126
src/components/Pages/Cico/Table_60.vue
Normal file → Executable file
126
src/components/Pages/Cico/Table_60.vue
Normal file → Executable file
@ -1,39 +1,48 @@
|
||||
<template>
|
||||
<div>
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||
:word-wrap-enabled="true">
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type1 @update:filters="(value) => {
|
||||
filters = value
|
||||
}
|
||||
" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="200" alignment="center" data-field="" caption="User Regu" css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" caption="Personil Yantek"
|
||||
<DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu" css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
|
||||
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
|
||||
caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
|
||||
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
|
||||
caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RPT WO Gangguan"
|
||||
<DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
|
||||
caption="Rata-rata RPT WO Gangguan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RCT WO Gangguan"
|
||||
<DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number" caption="Rata-rata RCT WO Gangguan"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Jumlah Wo Penugasan Khusus"
|
||||
<DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number" caption="Jumlah Wo Penugasan Khusus"
|
||||
css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="" data-type="number"
|
||||
caption="Rata-rata Duarasi WO Penugasan" css-class="custom-table-column" />
|
||||
<DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number"
|
||||
caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
|
||||
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
@ -42,7 +51,20 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
import { Type1 } from '@/components/Form/FiltersType'
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const dataDetail = ref<any>()
|
||||
const data = ref<any[]>([])
|
||||
const showDetail = ref(false)
|
||||
const showData = () => {
|
||||
showDetail.value = true
|
||||
}
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
@ -71,18 +93,72 @@ const onExporting = (e: any) => {
|
||||
e.cancel = true
|
||||
}
|
||||
}
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
dataDetail.value = data
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const filters = useFiltersStore()
|
||||
|
||||
filters.setConfig({
|
||||
type: 'type-1',
|
||||
reportButton: true
|
||||
const GET_laporanCheckInCheckOut = gql`
|
||||
query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
||||
laporanCheckInCheckOut(
|
||||
dateFrom: $dateFrom
|
||||
dateTo: $dateTo
|
||||
posko: $posko
|
||||
idUid: $idUid
|
||||
idUp3: $idUp3
|
||||
) {
|
||||
avg_durasi_wo_gangguan_individual
|
||||
avg_durasi_wo_penugasan_khusus
|
||||
avg_rct_wo_gangguan_individual
|
||||
avg_rpt_wo_gangguan_individual
|
||||
jumlah_wo_gangguan_individual
|
||||
jumlah_wo_penugasan_khusus
|
||||
personil_yantek
|
||||
user_regu
|
||||
}
|
||||
}
|
||||
`
|
||||
const filterData = (params: any) => {
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
refetch({
|
||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
posko: posko ? posko.id : "",
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item,
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
GET_laporanCheckInCheckOut,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
const filters = ref()
|
||||
</script>
|
||||
0
src/components/Pages/Cico/index.ts
Normal file → Executable file
0
src/components/Pages/Cico/index.ts
Normal file → Executable file
119
src/components/Pages/Ctt/Table_67.vue
Normal file → Executable file
119
src/components/Pages/Ctt/Table_67.vue
Normal file → Executable file
@ -1,5 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<Filters @run-search="() => filterData(filters)" class="mb-4">
|
||||
<Type3 @update:filters="(value) => {
|
||||
filters = value
|
||||
}
|
||||
" />
|
||||
</Filters>
|
||||
<div id="data">
|
||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
|
||||
:row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
|
||||
:column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
|
||||
@ -7,46 +13,47 @@
|
||||
<DxSelection mode="single" />
|
||||
<DxPaging :enabled="false" />
|
||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||
<DxLoadPanel :enabled="true" />
|
||||
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||
<DxColumnFixing :enabled="true" />
|
||||
|
||||
<DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
|
||||
<DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
|
||||
<DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Total" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
|
||||
<DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e"
|
||||
<DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas" data-type="number" caption="e"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
|
||||
<DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
|
||||
<DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
<DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
|
||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h"
|
||||
<DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
|
||||
css-class="custom-table-column" />
|
||||
</DxColumn>
|
||||
|
||||
@ -55,7 +62,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useFiltersStore } from '@/stores/filters'
|
||||
import { DxDataGrid } from 'devextreme-vue'
|
||||
import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
|
||||
@ -64,7 +71,16 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
|
||||
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { Workbook } from 'exceljs'
|
||||
|
||||
import Filters from '@/components/Form/Filters.vue'
|
||||
import { Type3 } from '@/components/Form/FiltersType'
|
||||
import { useQuery } from '@vue/apollo-composable'
|
||||
import gql from 'graphql-tag'
|
||||
const position = { of: '#data' }
|
||||
const showIndicator = ref(true)
|
||||
const shading = ref(true)
|
||||
const showPane = ref(true)
|
||||
const dataDetail = ref<any>()
|
||||
const showDetail = ref(false)
|
||||
const onExporting = (e: any) => {
|
||||
if (e.format === 'pdf') {
|
||||
const doc = new jsPDF()
|
||||
@ -94,17 +110,74 @@ const onExporting = (e: any) => {
|
||||
}
|
||||
}
|
||||
|
||||
const GET_laporanCttKwhPeriksa = gql`
|
||||
query laporanCttKwhPeriksa($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
|
||||
laporanCttKwhPeriksa(
|
||||
dateFrom: $dateFrom
|
||||
dateTo: $dateTo
|
||||
posko: $posko
|
||||
idUid: $idUid
|
||||
idUp3: $idUp3
|
||||
) {
|
||||
dlpd
|
||||
history_p2ti
|
||||
nama_posko
|
||||
rekomendasi_sistem_mendatangkan_petugas
|
||||
total_wo
|
||||
total_wo_cc123
|
||||
total_wo_comcen
|
||||
total_wo_loket
|
||||
total_wo_pln_mobile
|
||||
}
|
||||
}
|
||||
`
|
||||
const filterData = (params: any) => {
|
||||
const { posko, uid, up3 } = params
|
||||
const dateValue = params.periode.split(' s/d ')
|
||||
refetch({
|
||||
dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
|
||||
posko: posko ? posko.id : "",
|
||||
idUid: uid ? uid.id : 0,
|
||||
idUp3: up3 ? up3.id : 0
|
||||
})
|
||||
onResult((queryResult) => {
|
||||
if (queryResult.data != undefined) {
|
||||
queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
|
||||
data.value = [
|
||||
...data.value,
|
||||
{
|
||||
...item,
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
console.log(queryResult.data)
|
||||
console.log(queryResult.loading)
|
||||
console.log(queryResult.networkStatus)
|
||||
})
|
||||
onError((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
const { onResult, onError, loading, refetch } = useQuery(
|
||||
GET_laporanCttKwhPeriksa,
|
||||
{
|
||||
dateFrom: new Date().toISOString().slice(0, 10),
|
||||
dateTo: new Date().toISOString().slice(0, 10),
|
||||
posko: '',
|
||||
idUid: 0,
|
||||
idUp3: 0
|
||||
}
|
||||
)
|
||||
|
||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
||||
const data = selectedRowsData[0]
|
||||
dataDetail.value = data
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const filters = useFiltersStore()
|
||||
|
||||
filters.setConfig({
|
||||
type: 'type-3',
|
||||
reportButton: true
|
||||
})
|
||||
})
|
||||
const showData = () => {
|
||||
showDetail.value = true
|
||||
}
|
||||
const filters = ref()
|
||||
</script>
|
||||
0
src/components/Pages/Ctt/index.ts
Normal file → Executable file
0
src/components/Pages/Ctt/index.ts
Normal file → Executable file
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user