Merge branch 'dev-defuj' of github.com:defuj/eis into dev-bagus
This commit is contained in:
kur0nek-o
commit
c842088e63
@ -21,5 +21,5 @@ jobs:
|
|||||||
- uses: actions/checkout@v3
|
- uses: actions/checkout@v3
|
||||||
- name: Build the Docker image
|
- name: Build the Docker image
|
||||||
run: |
|
run: |
|
||||||
docker build . -t defuj/apkt-eis:v0.0.25-dev
|
docker build . --file Dockerfile --tag defuj/apkt-eis:v0.0.5-vm
|
||||||
docker push defuj/apkt-eis:v0.0.25-dev
|
docker push defuj/apkt-eis:v0.0.5-vm
|
||||||
|
|||||||
3
.github/workflows/docker-image-release.yml
vendored
3
.github/workflows/docker-image-release.yml
vendored
@ -23,8 +23,7 @@ jobs:
|
|||||||
|
|
||||||
- name: Build the Docker image
|
- name: Build the Docker image
|
||||||
run: |
|
run: |
|
||||||
docker build . -t defuj/apkt-eis
|
docker build . --file Dockerfile --tag defuj/apkt-eis:v1.0.1-release
|
||||||
docker image tag defuj/apkt-eis defuj/apkt-eis:v1.0.1-release
|
|
||||||
docker push defuj/apkt-eis:v1.0.1-release
|
docker push defuj/apkt-eis:v1.0.1-release
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -11,6 +11,7 @@ lerna-debug.log*
|
|||||||
node_modules
|
node_modules
|
||||||
.DS_Store
|
.DS_Store
|
||||||
dist
|
dist
|
||||||
|
build
|
||||||
dist-ssr
|
dist-ssr
|
||||||
coverage
|
coverage
|
||||||
*.local
|
*.local
|
||||||
|
|||||||
27
Dockerfile
27
Dockerfile
@ -1,19 +1,18 @@
|
|||||||
FROM node:lts-alpine as build-stage
|
# FROM node:lts-alpine as build-stage
|
||||||
WORKDIR /app
|
# WORKDIR /app
|
||||||
# COPY package*.json ./
|
# COPY package*.json ./
|
||||||
# RUN npm install
|
# RUN npm install
|
||||||
COPY . .
|
# COPY . .
|
||||||
RUN npm run build
|
# RUN npm run build
|
||||||
|
|
||||||
# tahap produksi
|
# FROM nginx:stable-alpine as production-stage
|
||||||
FROM nginx:stable-alpine as production-stage
|
# COPY --from=build-stage /app/build /usr/share/nginx/html
|
||||||
COPY --from=build-stage /app/dist /usr/share/nginx/html
|
# COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
|
||||||
COPY --from=build-stage /app/nginx.conf /etc/nginx/nginx.conf
|
# EXPOSE 32166
|
||||||
|
# CMD ["nginx", "-g", "daemon off;"]
|
||||||
|
|
||||||
|
FROM nginx:stable-alpine
|
||||||
|
COPY /build /usr/share/nginx/html
|
||||||
|
COPY /nginx.conf /etc/nginx/nginx.conf
|
||||||
EXPOSE 32166
|
EXPOSE 32166
|
||||||
CMD ["nginx", "-g", "daemon off;"]
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
|
|
||||||
# FROM nginx:stable-alpine
|
|
||||||
# COPY /dist /usr/share/nginx/html
|
|
||||||
# COPY /nginx.conf /etc/nginx/nginx.conf
|
|
||||||
# EXPOSE 32166
|
|
||||||
# CMD ["nginx", "-g", "daemon off;"]
|
|
||||||
76
README.md
76
README.md
@ -1,52 +1,26 @@
|
|||||||
# Executive Information System
|
# TABLE MENU DOCUMENTATION
|
||||||
|
## Monalisa
|
||||||
|
### Gangguan > Rekapitulasi
|
||||||
|
| CODE | MENU | FILE |
|
||||||
|
| ------- | ---------------------------------------- | ------------ |
|
||||||
|
| MON0001 | Jumlah Kali Gangguan | Table_36.vue |
|
||||||
|
| MON0002 | Dispacthing Time (DT) Gangguan | Table_37.vue |
|
||||||
|
| MON0003 | Recovery Time (RCT) Gangguan | Table_38.vue |
|
||||||
|
| MON0004 | Response Time (RPT) Gangguan | Table_39.vue |
|
||||||
|
| MON0005 | Jumlah dan Durasi RPT RCT Gangguan | Table_40.vue |
|
||||||
|
| MON0006 | Rekapitulasi Gangguan Per Jenis Gangguan | Table_41.vue |
|
||||||
|
| MON0007 | Rekapitulasi Lapor Ulang Gangguan | Table_42.vue |
|
||||||
|
| MON0008 | Rekapitulasi ENS Gangguan | Table_43.vue |
|
||||||
|
| MON0009 | Rekapitulasi Gangguan Belum Selesai | Table_44.vue |
|
||||||
|
| MON0010 | Jumlah Kali Keluhan | Table_45.vue |
|
||||||
|
| MON0011 | Recovery Time (RCT) Keluhan | Table_46.vue |
|
||||||
|
| MON0012 | Response Time (RPT) Keluhan | Table_47.vue |
|
||||||
|
| MON0013 | Jumlah dan Durasi RPT RCT Keluhan | Table_48.vue |
|
||||||
|
| MON0014 | Rekapitulasi Gangguan Per Jenis Keluhan | Table_49.vue |
|
||||||
|
| MON0015 | Rekapitulasi Lapor Ulang Keluhan | Table_50.vue |
|
||||||
|
| MON0016 | Rekapitulasi Gangguan Belum Selesai | Table_51.vue |
|
||||||
|
|
||||||
This template should help get you started developing with Vue 3 in Vite.
|
### Keluhan > Rekapitulasi
|
||||||
|
| CODE | MENU | FILE |
|
||||||
## Recommended IDE Setup
|
| ------- | ------------------- | ------------ |
|
||||||
|
| MON0010 | Jumlah Kali Keluhan | Table_45.vue |
|
||||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
|
||||||
|
|
||||||
## Type Support for `.vue` Imports in TS
|
|
||||||
|
|
||||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
|
||||||
|
|
||||||
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
|
|
||||||
|
|
||||||
1. Disable the built-in TypeScript Extension
|
|
||||||
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
|
|
||||||
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
|
||||||
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|
|
||||||
|
|
||||||
## Customize configuration
|
|
||||||
|
|
||||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
|
||||||
|
|
||||||
## Project Setup
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
### Compile and Hot-Reload for Development
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
### Type-Check, Compile and Minify for Production
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
### Run Unit Tests with [Vitest](https://vitest.dev/)
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm run test:unit
|
|
||||||
```
|
|
||||||
|
|
||||||
### Lint with [ESLint](https://eslint.org/)
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm run lint
|
|
||||||
```
|
|
||||||
@ -1,22 +1,22 @@
|
|||||||
apiVersion: apps/v1
|
apiVersion: apps/v1
|
||||||
kind: Deployment
|
kind: Deployment
|
||||||
metadata:
|
metadata:
|
||||||
name: apkt-eis
|
name: apkt-eis
|
||||||
spec:
|
spec:
|
||||||
replicas: 3
|
replicas: 3
|
||||||
selector:
|
selector:
|
||||||
matchLabels:
|
matchLabels:
|
||||||
app: apkt-eis
|
app: apkt-eis
|
||||||
template:
|
template:
|
||||||
metadata:
|
metadata:
|
||||||
labels:
|
labels:
|
||||||
app: apkt-eis
|
app: apkt-eis
|
||||||
spec:
|
spec:
|
||||||
containers:
|
containers:
|
||||||
- name: apkt-eis
|
- name: apkt-eis
|
||||||
image: defuj/apkt-eis:v0.0.23-dev
|
image: defuj/apkt-eis:v0.0.5-vm
|
||||||
ports:
|
ports:
|
||||||
- containerPort: 80
|
- containerPort: 80
|
||||||
---
|
---
|
||||||
apiVersion: v1
|
apiVersion: v1
|
||||||
kind: Service
|
kind: Service
|
||||||
@ -44,4 +44,3 @@ spec:
|
|||||||
port: 32166
|
port: 32166
|
||||||
targetPort: 80
|
targetPort: 80
|
||||||
type: ClusterIP
|
type: ClusterIP
|
||||||
|
|
||||||
123
package-lock.json
generated
123
package-lock.json
generated
@ -71,7 +71,6 @@
|
|||||||
"tailwindcss": "^3.3.2",
|
"tailwindcss": "^3.3.2",
|
||||||
"tailwindcss-patch": "^2.2.2",
|
"tailwindcss-patch": "^2.2.2",
|
||||||
"typescript": "~5.2.2",
|
"typescript": "~5.2.2",
|
||||||
"unplugin-tailwindcss-mangle": "^2.2.2",
|
|
||||||
"vite": "^4.3.9",
|
"vite": "^4.3.9",
|
||||||
"vitest": "^0.34.6",
|
"vitest": "^0.34.6",
|
||||||
"vue-tsc": "^1.6.5"
|
"vue-tsc": "^1.6.5"
|
||||||
@ -166,12 +165,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
|
||||||
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
|
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
|
||||||
},
|
},
|
||||||
"node_modules/@ast-core/escape": {
|
|
||||||
"version": "1.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@ast-core/escape/-/escape-1.0.1.tgz",
|
|
||||||
"integrity": "sha512-/kVjBkDzYrSW1S+gTBCuOfhnNkge9qZFJgLT+MOZdmPN4Vts36S60uU5br3ozoxpJ1eRGe6pGy7/EfcOpFFHlA==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"node_modules/@babel/code-frame": {
|
"node_modules/@babel/code-frame": {
|
||||||
"version": "7.23.5",
|
"version": "7.23.5",
|
||||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
|
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
|
||||||
@ -537,23 +530,6 @@
|
|||||||
"@babel/core": "^7.0.0-0"
|
"@babel/core": "^7.0.0-0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@babel/plugin-transform-modules-commonjs": {
|
|
||||||
"version": "7.23.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz",
|
|
||||||
"integrity": "sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/helper-module-transforms": "^7.23.3",
|
|
||||||
"@babel/helper-plugin-utils": "^7.22.5",
|
|
||||||
"@babel/helper-simple-access": "^7.22.5"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=6.9.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"@babel/core": "^7.0.0-0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@babel/plugin-transform-typescript": {
|
"node_modules/@babel/plugin-transform-typescript": {
|
||||||
"version": "7.23.6",
|
"version": "7.23.6",
|
||||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz",
|
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz",
|
||||||
@ -572,25 +548,6 @@
|
|||||||
"@babel/core": "^7.0.0-0"
|
"@babel/core": "^7.0.0-0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@babel/preset-typescript": {
|
|
||||||
"version": "7.23.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz",
|
|
||||||
"integrity": "sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/helper-plugin-utils": "^7.22.5",
|
|
||||||
"@babel/helper-validator-option": "^7.22.15",
|
|
||||||
"@babel/plugin-syntax-jsx": "^7.23.3",
|
|
||||||
"@babel/plugin-transform-modules-commonjs": "^7.23.3",
|
|
||||||
"@babel/plugin-transform-typescript": "^7.23.3"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=6.9.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"@babel/core": "^7.0.0-0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@babel/runtime": {
|
"node_modules/@babel/runtime": {
|
||||||
"version": "7.23.9",
|
"version": "7.23.9",
|
||||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
|
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
|
||||||
@ -1528,40 +1485,6 @@
|
|||||||
"dedent": "^1.5.1"
|
"dedent": "^1.5.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@tailwindcss-mangle/core": {
|
|
||||||
"version": "2.2.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/@tailwindcss-mangle/core/-/core-2.2.2.tgz",
|
|
||||||
"integrity": "sha512-CFPQhX5xv+ru96Ty2l9gftL70EkVliU/HB8KKxW5O11CVSGKYU6+d6FFnWBFDq6yugArnlKle5q07U8J4Tj8aw==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@ast-core/escape": "^1.0.1",
|
|
||||||
"@babel/core": "^7.22.20",
|
|
||||||
"@babel/helper-plugin-utils": "^7.22.5",
|
|
||||||
"@babel/preset-typescript": "^7.22.15",
|
|
||||||
"@babel/types": "^7.22.19",
|
|
||||||
"@tailwindcss-mangle/config": "^2.2.2",
|
|
||||||
"@tailwindcss-mangle/shared": "^2.2.2",
|
|
||||||
"fast-sort": "^3.4.0",
|
|
||||||
"magic-string": "^0.30.3",
|
|
||||||
"micromatch": "^4.0.5",
|
|
||||||
"parse5": "^7.1.2",
|
|
||||||
"postcss": "^8.4.30",
|
|
||||||
"postcss-selector-parser": "^6.0.13"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@tailwindcss-mangle/core/node_modules/postcss-selector-parser": {
|
|
||||||
"version": "6.0.15",
|
|
||||||
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
|
|
||||||
"integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"cssesc": "^3.0.0",
|
|
||||||
"util-deprecate": "^1.0.2"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@tailwindcss-mangle/shared": {
|
"node_modules/@tailwindcss-mangle/shared": {
|
||||||
"version": "2.2.2",
|
"version": "2.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/@tailwindcss-mangle/shared/-/shared-2.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/@tailwindcss-mangle/shared/-/shared-2.2.2.tgz",
|
||||||
@ -4980,12 +4903,6 @@
|
|||||||
"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
|
"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/fast-sort": {
|
|
||||||
"version": "3.4.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/fast-sort/-/fast-sort-3.4.0.tgz",
|
|
||||||
"integrity": "sha512-c/cMBGA5mH3OYjaXedtLIM3hQjv+KuZuiD2QEH5GofNOZeQVDIYIN7Okc2AW1KPhk44g5PTZnXp8t2lOMl8qhQ==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"node_modules/fastq": {
|
"node_modules/fastq": {
|
||||||
"version": "1.17.1",
|
"version": "1.17.1",
|
||||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
|
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
|
||||||
@ -9344,31 +9261,6 @@
|
|||||||
"node": ">= 4.0.0"
|
"node": ">= 4.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/unplugin": {
|
|
||||||
"version": "1.7.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.7.1.tgz",
|
|
||||||
"integrity": "sha512-JqzORDAPxxs8ErLV4x+LL7bk5pk3YlcWqpSNsIkAZj972KzFZLClc/ekppahKkOczGkwIG6ElFgdOgOlK4tXZw==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"acorn": "^8.11.3",
|
|
||||||
"chokidar": "^3.5.3",
|
|
||||||
"webpack-sources": "^3.2.3",
|
|
||||||
"webpack-virtual-modules": "^0.6.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/unplugin-tailwindcss-mangle": {
|
|
||||||
"version": "2.2.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/unplugin-tailwindcss-mangle/-/unplugin-tailwindcss-mangle-2.2.2.tgz",
|
|
||||||
"integrity": "sha512-tbfva7OEQfY3SN/gT6a084Qqm/CvUdrQgrXIDeQPJGmRxH+mHeYP8WA49sGl0yz5LvSUKskneq1ylc4LOOmaYA==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@tailwindcss-mangle/config": "^2.2.2",
|
|
||||||
"@tailwindcss-mangle/core": "^2.2.2",
|
|
||||||
"@tailwindcss-mangle/shared": "^2.2.2",
|
|
||||||
"magic-string": "^0.30.3",
|
|
||||||
"unplugin": "^1.5.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/unzipper": {
|
"node_modules/unzipper": {
|
||||||
"version": "0.10.14",
|
"version": "0.10.14",
|
||||||
"resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
|
"resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
|
||||||
@ -9884,21 +9776,6 @@
|
|||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/webpack-sources": {
|
|
||||||
"version": "3.2.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
|
|
||||||
"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
|
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=10.13.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/webpack-virtual-modules": {
|
|
||||||
"version": "0.6.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
|
|
||||||
"integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
|
|
||||||
"dev": true
|
|
||||||
},
|
|
||||||
"node_modules/whatwg-encoding": {
|
"node_modules/whatwg-encoding": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
|
||||||
|
|||||||
@ -11,8 +11,7 @@
|
|||||||
"build-only": "vite build",
|
"build-only": "vite build",
|
||||||
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
||||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||||
"format": "prettier --write src/",
|
"format": "prettier --write src/"
|
||||||
"prepare": "tw-patch install"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@apollo/client": "^3.8.10",
|
"@apollo/client": "^3.8.10",
|
||||||
@ -78,9 +77,8 @@
|
|||||||
"tailwindcss": "^3.3.2",
|
"tailwindcss": "^3.3.2",
|
||||||
"tailwindcss-patch": "^2.2.2",
|
"tailwindcss-patch": "^2.2.2",
|
||||||
"typescript": "~5.2.2",
|
"typescript": "~5.2.2",
|
||||||
"unplugin-tailwindcss-mangle": "^2.2.2",
|
|
||||||
"vite": "^4.3.9",
|
"vite": "^4.3.9",
|
||||||
"vitest": "^0.34.6",
|
"vitest": "^0.34.6",
|
||||||
"vue-tsc": "^1.6.5"
|
"vue-tsc": "^1.6.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -5898,6 +5898,10 @@ body {
|
|||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg\:w-2\/6 {
|
||||||
|
width: 33.333333%;
|
||||||
|
}
|
||||||
|
|
||||||
.lg\:w-80 {
|
.lg\:w-80 {
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
}
|
}
|
||||||
@ -5906,10 +5910,24 @@ body {
|
|||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg\:flex-row {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
.lg\:flex-nowrap {
|
.lg\:flex-nowrap {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg\:justify-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
|
||||||
|
--tw-space-x-reverse: 0;
|
||||||
|
margin-right: calc(1rem * var(--tw-space-x-reverse));
|
||||||
|
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
|
||||||
|
}
|
||||||
|
|
||||||
.lg\:border-b-0 {
|
.lg\:border-b-0 {
|
||||||
border-bottom-width: 0px;
|
border-bottom-width: 0px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -36,22 +36,12 @@ watch(dateValue, (newValue) => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<vue-tailwind-datepicker
|
<vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="customShortcuts"
|
||||||
v-model="dateValue"
|
:auto-apply="true" as-single use-range v-slot="{ value, placeholder }">
|
||||||
:formatter="formatter"
|
|
||||||
separator=" s/d "
|
|
||||||
:shortcuts="customShortcuts"
|
|
||||||
:auto-apply="true"
|
|
||||||
as-single
|
|
||||||
use-range
|
|
||||||
v-slot="{ value, placeholder }"
|
|
||||||
>
|
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<button
|
<button type="button"
|
||||||
type="button"
|
class="flex items-center justify-between w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0">
|
||||||
class="w-full flex items-center justify-between 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"
|
|
||||||
>
|
|
||||||
<span class="text-gray-900">
|
<span class="text-gray-900">
|
||||||
{{ value || placeholder }}
|
{{ value || placeholder }}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@ -42,33 +42,17 @@ const switchInputType = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="['relative w-full overflow-hidden rounded-lg ', className]">
|
<div :class="['relative w-full overflow-hidden rounded-lg bg-gray-200 ', className]">
|
||||||
<input
|
<input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value" @input="updateValue($event)"
|
||||||
autocomplete="off"
|
:disabled="disabled" :readonly="readonly" :class="[
|
||||||
:type="inputType"
|
|
||||||
:placeholder="placeholder"
|
|
||||||
:value="value"
|
|
||||||
@input="updateValue($event)"
|
|
||||||
:disabled="disabled"
|
|
||||||
:readonly="readonly"
|
|
||||||
: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'
|
'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'
|
||||||
]"
|
]" />
|
||||||
/>
|
<span @click="switchInputType" v-if="type == 'password'"
|
||||||
<span
|
class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
|
||||||
@click="switchInputType"
|
<svg width="20" height="20" viewBox="0 0 20 20"
|
||||||
v-if="type == 'password'"
|
:class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']">
|
||||||
class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
:class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z"
|
d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z" />
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,186 +4,60 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:data-source="data"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
|
||||||
:show-column-lines="true"
|
column-resizing-mode="widget">
|
||||||
:show-row-lines="false"
|
|
||||||
:show-borders="true"
|
|
||||||
:row-alternation-enabled="true"
|
|
||||||
:hover-state-enabled="true"
|
|
||||||
@selection-changed="onSelectionChanged"
|
|
||||||
:column-width="100"
|
|
||||||
@exporting=""
|
|
||||||
:allow-column-resizing="true"
|
|
||||||
column-resizing-mode="widget"
|
|
||||||
>
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||||
:visible="true"
|
:show-info="true" :show-navigation-buttons="true" />
|
||||||
:allowed-page-sizes="[5, 10, 20]"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
display-mode="full"
|
v-if="loading" v-model:visible.sync="loading" :enabled="true" />
|
||||||
:show-page-size-selector="true"
|
|
||||||
:show-info="true"
|
|
||||||
:show-navigation-buttons="true"
|
|
||||||
/>
|
|
||||||
<DxLoadPanel
|
|
||||||
:position="position"
|
|
||||||
:show-indicator="showIndicator"
|
|
||||||
:show-pane="showPane"
|
|
||||||
:shading="shading"
|
|
||||||
v-if="loading"
|
|
||||||
v-model:visible.sync="loading"
|
|
||||||
:enabled="true"
|
|
||||||
/>
|
|
||||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
:allow-export-selected-data="false"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||||
/>
|
caption="No Laporan" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
||||||
css-class="custom-table-column"
|
caption="Tgl Lapor" cell-template="data" />
|
||||||
:width="50"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
||||||
alignment="center"
|
caption="Tgl Response" cell-template="data" />
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
||||||
data-type="number"
|
caption="Tgl Recovery" cell-template="data" />
|
||||||
caption="No"
|
<DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
|
||||||
/>
|
cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
||||||
css-class="custom-table-column"
|
caption="Durasi Response Time" cell-template="data" />
|
||||||
:width="150"
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
||||||
alignment="center"
|
caption="Durasi Recovery Time" cell-template="data" />
|
||||||
data-field="no_laporan"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
|
||||||
caption="No Laporan"
|
cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
||||||
/>
|
caption="IDPEL/NO METER" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||||
css-class="custom-table-column"
|
caption="Nama Pelapor" cell-template="data" />
|
||||||
:width="150"
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||||
alignment="center"
|
caption="Alamat Pelapor" cell-template="data" />
|
||||||
data-field="waktu_lapor"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||||
caption="Tgl Lapor"
|
caption="No Telp Pelapor" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
||||||
/>
|
caption="Keterangan Pelapor" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
|
||||||
css-class="custom-table-column"
|
cell-template="data" />
|
||||||
:width="150"
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
||||||
alignment="center"
|
cell-template="data" />
|
||||||
data-field="waktu_response"
|
|
||||||
caption="Tgl Response"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="waktu_recovery"
|
|
||||||
caption="Tgl Recovery"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
alignment="center"
|
|
||||||
data-field="jumlah_lapor"
|
|
||||||
caption="Jml Lapor"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_response_time"
|
|
||||||
caption="Durasi Response Time"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_recovery_time"
|
|
||||||
caption="Durasi Recovery Time"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="status_akhir"
|
|
||||||
caption="Status"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="idpel_nometer"
|
|
||||||
caption="IDPEL/NO METER"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_pelapor"
|
|
||||||
caption="Nama Pelapor"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="alamat_pelapor"
|
|
||||||
caption="Alamat Pelapor"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="no_telp_pelapor"
|
|
||||||
caption="No Telp Pelapor"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="keterangan_pelapor"
|
|
||||||
caption="Keterangan Pelapor"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="media"
|
|
||||||
caption="Sumber Lapor"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_posko"
|
|
||||||
caption="Posko"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<span class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</span>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DetailDialog
|
<DetailDialog :open="showDetail" title="Daftar Gangguan Melapor Lebih Dari 1 Kali" @on-close="closeDetail">
|
||||||
:open="showDetail"
|
|
||||||
title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
|
|
||||||
@on-close="closeDetail"
|
|
||||||
>
|
|
||||||
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
<div class="w-full p-4 space-y-2 bg-white rounded-xl">
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
|
||||||
@ -257,12 +131,7 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.nama_posko"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|||||||
@ -4,172 +4,55 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:data-source="data"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="" :allow-column-resizing="true"
|
||||||
:show-column-lines="true"
|
column-resizing-mode="widget">
|
||||||
:show-row-lines="false"
|
|
||||||
:show-borders="true"
|
|
||||||
:row-alternation-enabled="true"
|
|
||||||
:hover-state-enabled="true"
|
|
||||||
@selection-changed="onSelectionChanged"
|
|
||||||
:column-width="100"
|
|
||||||
@exporting=""
|
|
||||||
:allow-column-resizing="true"
|
|
||||||
column-resizing-mode="widget"
|
|
||||||
>
|
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||||
:visible="true"
|
:show-info="true" :show-navigation-buttons="true" />
|
||||||
:allowed-page-sizes="[5, 10, 20]"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
display-mode="full"
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
:show-page-size-selector="true"
|
|
||||||
:show-info="true"
|
|
||||||
:show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
|
||||||
:allow-export-selected-data="false"
|
cell-template="data" />
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="50"
|
|
||||||
alignment="center"
|
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
|
||||||
data-type="number"
|
|
||||||
caption="No"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
|
||||||
css-class="custom-table-column"
|
caption="No Laporan" cell-template="data" />
|
||||||
:width="150"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
|
||||||
alignment="center"
|
caption="Tgl Lapor" cell-template="data" />
|
||||||
data-field="no_laporan"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
|
||||||
caption="No Laporan"
|
caption="Tgl Response" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
|
||||||
/>
|
caption="Tgl Recovery" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
|
||||||
css-class="custom-table-column"
|
caption="Durasi Response Time" cell-template="data" />
|
||||||
:width="150"
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
|
||||||
alignment="center"
|
caption="Durasi Recovery Time" cell-template="data" />
|
||||||
data-field="waktu_lapor"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
|
||||||
caption="Tgl Lapor"
|
cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
|
||||||
/>
|
caption="Referensi Marking" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
|
||||||
css-class="custom-table-column"
|
caption="IDPEL/NO METER" cell-template="data" />
|
||||||
:width="150"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
|
||||||
alignment="center"
|
caption="Nama Pelapor" cell-template="data" />
|
||||||
data-field="waktu_response"
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
|
||||||
caption="Tgl Response"
|
caption="Alamat Pelapor" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
|
||||||
/>
|
caption="No Telp Pelapor" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
|
||||||
css-class="custom-table-column"
|
caption="Keterangan Pelapor" cell-template="data" />
|
||||||
:width="150"
|
<DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
|
||||||
alignment="center"
|
cell-template="data" />
|
||||||
data-field="waktu_recovery"
|
|
||||||
caption="Tgl Recovery"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_response_time"
|
|
||||||
caption="Durasi Response Time"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_recovery_time"
|
|
||||||
caption="Durasi Recovery Time"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="status_akhir"
|
|
||||||
caption="Status"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="referensi_marking"
|
|
||||||
caption="Referensi Marking"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="idpel_nometer"
|
|
||||||
caption="IDPEL/NO METER"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_pelapor"
|
|
||||||
caption="Nama Pelapor"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="alamat_pelapor"
|
|
||||||
caption="Alamat Pelapor"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="no_telp_pelapor"
|
|
||||||
caption="No Telp Pelapor"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="keterangan_pelapor"
|
|
||||||
caption="Keterangan Pelapor"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
css-class="custom-table-column"
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_posko"
|
|
||||||
caption="Posko"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<span class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</span>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@ -243,32 +126,17 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1 h-[56px]" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.nama_posko"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1 h-[56px]" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.penyebab"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1 h-[56px]" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.tindakan"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|||||||
@ -4,181 +4,57 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:data-source="data"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||||
:show-column-lines="true"
|
column-resizing-mode="widget" :word-wrap-enabled="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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||||
:visible="true"
|
:show-info="true" :show-navigation-buttons="true" />
|
||||||
:allowed-page-sizes="[5, 10, 20]"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
display-mode="full"
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
:show-page-size-selector="true"
|
|
||||||
:show-info="true"
|
|
||||||
:show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
:width="50"
|
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
data-type="number"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="No"
|
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||||
/>
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
|
||||||
data-field="no_laporan"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="No Laporan"
|
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
/>
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
|
||||||
:width="170"
|
cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||||
data-field="waktu_lapor"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="Tgl Lapor"
|
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
/>
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
data-field="waktu_response"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="Tgl Response"
|
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
|
||||||
css-class="custom-table-column"
|
cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
||||||
/>
|
cell-template="data" />
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="waktu_recovery"
|
|
||||||
caption="Tgl Recovery"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="120"
|
|
||||||
alignment="center"
|
|
||||||
data-field="jumlah_lapor"
|
|
||||||
caption="Jml Lapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_response_time"
|
|
||||||
caption="Durasi Response Time"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_recovery_time"
|
|
||||||
caption="Durasi Recovery Time"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="120"
|
|
||||||
alignment="center"
|
|
||||||
data-field="status_akhir"
|
|
||||||
caption="Status"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="idpel_nometer"
|
|
||||||
caption="IDPEL/NO METER"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_pelapor"
|
|
||||||
caption="Nama Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="alamat_pelapor"
|
|
||||||
caption="Alamat Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="no_telp_pelapor"
|
|
||||||
caption="No Telp Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="keterangan_pelapor"
|
|
||||||
caption="Keterangan Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="media"
|
|
||||||
caption="Sumber Lapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_ulp"
|
|
||||||
caption="Nama ULP"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<span class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</span>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@ -237,12 +113,7 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.alamat_pelapor"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -252,12 +123,8 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
||||||
:readonly="true"
|
class-name="flex-1 h-[56px]" />
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.keterangan_pelapor"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
|||||||
@ -4,165 +4,53 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:data-source="data"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||||
:show-column-lines="true"
|
column-resizing-mode="widget" :word-wrap-enabled="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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||||
:visible="true"
|
:show-info="true" :show-navigation-buttons="true" />
|
||||||
:allowed-page-sizes="[5, 10, 20]"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
display-mode="full"
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
:show-page-size-selector="true"
|
|
||||||
:show-info="true"
|
|
||||||
:show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
:width="50"
|
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
|
||||||
data-type="number"
|
|
||||||
caption="No"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="no_laporan"
|
|
||||||
caption="No Laporan"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||||
data-field="waktu_lapor"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="Tgl Lapor"
|
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||||
/>
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
|
||||||
data-field="waktu_response"
|
cell-template="data" />
|
||||||
caption="Tgl Response"
|
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
/>
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||||
data-field="waktu_recovery"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="Tgl Recovery"
|
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
||||||
/>
|
cell-template="data" />
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_response_time"
|
|
||||||
caption="Durasi Response Time"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_recovery_time"
|
|
||||||
caption="Durasi Recovery Time"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="120"
|
|
||||||
alignment="center"
|
|
||||||
data-field="status_akhir"
|
|
||||||
caption="Status"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="idpel_nometer"
|
|
||||||
caption="IDPEL/NO METER"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_pelapor"
|
|
||||||
caption="Nama Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="alamat_pelapor"
|
|
||||||
caption="Alamat Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="no_telp_pelapor"
|
|
||||||
caption="No Telp Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="keterangan_pelapor"
|
|
||||||
caption="Keterangan Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_ulp"
|
|
||||||
caption="Nama ULP"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<span class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</span>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@ -215,12 +103,7 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.alamat_pelapor"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -230,12 +113,8 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
||||||
:readonly="true"
|
class-name="flex-1 h-[56px]" />
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.keterangan_pelapor"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
|||||||
@ -4,165 +4,53 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:data-source="data"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||||
:show-column-lines="true"
|
column-resizing-mode="widget" :word-wrap-enabled="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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||||
:visible="true"
|
:show-info="true" :show-navigation-buttons="true" />
|
||||||
:allowed-page-sizes="[5, 10, 20]"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
display-mode="full"
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
:show-page-size-selector="true"
|
|
||||||
:show-info="true"
|
|
||||||
:show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
:width="50"
|
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
|
||||||
data-type="number"
|
|
||||||
caption="No"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="no_laporan"
|
|
||||||
caption="No Laporan"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||||
data-field="waktu_lapor"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="Tgl Lapor"
|
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||||
/>
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
|
||||||
data-field="waktu_response"
|
cell-template="data" />
|
||||||
caption="Tgl Response"
|
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
/>
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||||
data-field="waktu_recovery"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="Tgl Recovery"
|
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
||||||
/>
|
cell-template="data" />
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_response_time"
|
|
||||||
caption="Durasi Response Time"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_recovery_time"
|
|
||||||
caption="Durasi Recovery Time"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="120"
|
|
||||||
alignment="center"
|
|
||||||
data-field="status_akhir"
|
|
||||||
caption="Status"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="idpel_nometer"
|
|
||||||
caption="IDPEL/NO METER"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_pelapor"
|
|
||||||
caption="Nama Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="alamat_pelapor"
|
|
||||||
caption="Alamat Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="no_telp_pelapor"
|
|
||||||
caption="No Telp Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="keterangan_pelapor"
|
|
||||||
caption="Keterangan Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_ulp"
|
|
||||||
caption="Nama ULP"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<span class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</span>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@ -216,12 +104,7 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.alamat_pelapor"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -231,12 +114,8 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
||||||
:readonly="true"
|
class-name="flex-1 h-[56px]" />
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.keterangan_pelapor"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
|||||||
@ -4,172 +4,54 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:data-source="data"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||||
:show-column-lines="true"
|
column-resizing-mode="widget" :word-wrap-enabled="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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||||
:visible="true"
|
:show-info="true" :show-navigation-buttons="true" />
|
||||||
:allowed-page-sizes="[5, 10, 20]"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
display-mode="full"
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
:show-page-size-selector="true"
|
|
||||||
:show-info="true"
|
|
||||||
:show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
:width="50"
|
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
data-type="number"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="No"
|
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||||
/>
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
|
||||||
data-field="no_laporan"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="No Laporan"
|
<DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
|
||||||
/>
|
cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
data-field="waktu_lapor"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="Tgl Lapor"
|
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||||
/>
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
|
||||||
data-field="waktu_response"
|
cell-template="data" />
|
||||||
caption="Tgl Response"
|
<DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
|
||||||
css-class="custom-table-column"
|
cell-template="data" />
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="waktu_recovery"
|
|
||||||
caption="Tgl Recovery"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_response_time"
|
|
||||||
caption="Durasi Response Time"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_recovery_time"
|
|
||||||
caption="Durasi Recovery Time"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="120"
|
|
||||||
alignment="center"
|
|
||||||
data-field="status_akhir"
|
|
||||||
caption="Status"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="idpel_nometer"
|
|
||||||
caption="IDPEL/NO METER"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_pelapor"
|
|
||||||
caption="Nama Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="alamat_pelapor"
|
|
||||||
caption="Alamat Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="no_telp_pelapor"
|
|
||||||
caption="No Telp Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="keterangan_pelapor"
|
|
||||||
caption="Keterangan Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="media"
|
|
||||||
caption="Sumber Lapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_ulp"
|
|
||||||
caption="Nama ULP"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<span class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</span>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@ -223,12 +105,7 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.alamat_pelapor"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -238,12 +115,8 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
||||||
:readonly="true"
|
class-name="flex-1 h-[56px]" />
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.keterangan_pelapor"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
|||||||
@ -4,174 +4,56 @@
|
|||||||
</Filters>
|
</Filters>
|
||||||
|
|
||||||
<div id="data">
|
<div id="data">
|
||||||
<DxDataGrid
|
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
||||||
class="max-h-[calc(100vh-140px)]"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
:data-source="data"
|
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
||||||
:show-column-lines="true"
|
column-resizing-mode="widget" :word-wrap-enabled="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" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :page-size="5" :enabled="true" />
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
<DxPager
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||||
:visible="true"
|
:show-info="true" :show-navigation-buttons="true" />
|
||||||
:allowed-page-sizes="[5, 10, 20]"
|
<DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
|
||||||
display-mode="full"
|
v-if="loading" v-model:visible="loading" :enabled="true" />
|
||||||
:show-page-size-selector="true"
|
|
||||||
:show-info="true"
|
|
||||||
:show-navigation-buttons="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" />
|
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
|
||||||
<DxExport
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
:enabled="true"
|
|
||||||
:formats="['pdf', 'xlsx', 'document']"
|
|
||||||
:allow-export-selected-data="false"
|
|
||||||
/>
|
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
css-class="custom-table-column"
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
:width="50"
|
<DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
|
||||||
alignment="center"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
<DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
|
||||||
data-type="number"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="No"
|
<DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
|
||||||
/>
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
|
||||||
data-field="no_laporan"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="No Laporan"
|
<DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column"
|
||||||
css-class="custom-table-column"
|
cell-template="data" />
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="nama_pelapor"
|
|
||||||
caption="Nama Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="alamat_pelapor"
|
|
||||||
caption="Alamat Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="no_telp_pelapor"
|
|
||||||
caption="No Telp Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="keterangan_pelapor"
|
|
||||||
caption="Keterangan Pelapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="120"
|
|
||||||
alignment="center"
|
|
||||||
data-field="status_akhir"
|
|
||||||
caption="Status"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
|
||||||
data-field="waktu_lapor"
|
|
||||||
caption="Tgl Lapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<DxColumn
|
<DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
|
||||||
:width="170"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
|
||||||
data-field="waktu_response"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="Tgl Response"
|
<DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
cell-template="data"
|
<DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
|
||||||
/>
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn
|
<DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor" css-class="custom-table-column"
|
||||||
:width="170"
|
cell-template="data" />
|
||||||
alignment="center"
|
<DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
|
||||||
data-field="waktu_recovery"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
caption="Tgl Recovery"
|
<DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
|
||||||
css-class="custom-table-column"
|
css-class="custom-table-column" cell-template="data" />
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="waktu_response"
|
|
||||||
caption="Response Time"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="durasi_recovery_time"
|
|
||||||
caption="Recovery Time"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="media"
|
|
||||||
caption="Sumber Lapor"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="150"
|
|
||||||
alignment="center"
|
|
||||||
data-field="waktu_media"
|
|
||||||
caption="Tgl Media"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<DxColumn
|
|
||||||
:width="170"
|
|
||||||
alignment="center"
|
|
||||||
data-field="keterangan_media"
|
|
||||||
caption="Keterangan Media"
|
|
||||||
css-class="custom-table-column"
|
|
||||||
cell-template="data"
|
|
||||||
/>
|
|
||||||
<template #data="{ data }">
|
<template #data="{ data }">
|
||||||
<span class="cursor-pointer" @click="showData()">
|
<p class="cursor-pointer" @click="showData()">
|
||||||
{{ data.text }}
|
{{ data.text }}
|
||||||
</span>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
@ -195,22 +77,13 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1 h-[56px]" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.alamat_pelapor"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
|
||||||
:readonly="true"
|
class-name="flex-1 h-[56px]" />
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.keterangan_pelapor"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
@ -255,12 +128,7 @@
|
|||||||
|
|
||||||
<div class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
|
||||||
<InputText
|
<InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media" class-name="flex-1 h-[56px]" />
|
||||||
:readonly="true"
|
|
||||||
type="textarea"
|
|
||||||
:value="dataDetail?.keterangan_media"
|
|
||||||
class-name="flex-1 h-[56px]"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DetailDialog>
|
</DetailDialog>
|
||||||
|
|||||||
@ -5,8 +5,8 @@
|
|||||||
<div>
|
<div>
|
||||||
<DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
|
<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"
|
:show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
@selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
|
@selection-changed="onDataSelectionChanged" :column-width="100" @exporting="onExporting"
|
||||||
column-resizing-mode="widget" :word-wrap-enabled="true">
|
:allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
<DxSelection mode="single" />
|
<DxSelection mode="single" />
|
||||||
<DxPaging :enabled="false" />
|
<DxPaging :enabled="false" />
|
||||||
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
@ -16,46 +16,210 @@
|
|||||||
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
<DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
|
||||||
<DxColumnFixing :enabled="true" />
|
<DxColumnFixing :enabled="true" />
|
||||||
|
|
||||||
<DxColumn :width="170" alignment="center" data-field="idUlp" caption="Nama Unit" css-class="custom-table-column" />
|
<DxColumn :width="170" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
|
||||||
|
cell-template="data" header-cell-template="title-header" />
|
||||||
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
|
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
|
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
||||||
caption="> SLA" css-class="custom-table-column" />
|
caption="> SLA" css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
||||||
caption="≤ SLA" css-class="custom-table-column" />
|
caption="≤ SLA" css-class="custom-table-column" cell-template="data" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
|
<DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
|
<DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" cell-template="data" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
<template #data="{ data }">
|
||||||
|
<p class="cursor-pointer" @click="showDialog()">
|
||||||
|
{{ data.text }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #title-header="{ data }">
|
||||||
|
<p class="text-center">
|
||||||
|
{{ data.text }}
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
</DxDataGrid>
|
</DxDataGrid>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<DetailDialog :open="showDialogDetail" :full-width="true" title="Detail Rekapitulasi Keluhan All"
|
||||||
|
@on-close="closeDetailDialog">
|
||||||
|
<div class="flex flex-col w-full space-y-2 lg:space-x-4 lg:flex-row lg:justify-between">
|
||||||
|
<div class="flex flex-1 p-4 bg-white rounded-xl">
|
||||||
|
<div class="w-full">
|
||||||
|
<!-- <DxDataGrid class="w-full" :data-source="dataDetail" :column-auto-width="true" :show-column-lines="true"
|
||||||
|
:show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
|
||||||
|
@selection-changed="onDataDetailSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
|
||||||
|
column-resizing-mode="widget" :word-wrap-enabled="true">
|
||||||
|
<DxSelection mode="single" />
|
||||||
|
<DxPaging :page-size="5" :enabled="true" />
|
||||||
|
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
|
||||||
|
:show-info="true" :show-navigation-buttons="true" />
|
||||||
|
<DxScrolling column-rendering-mode="virtual" mode="virtual" />
|
||||||
|
<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="60" alignment="center" data-field="" caption="No" css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="170" alignment="center" data-field="" caption="No Laporan"
|
||||||
|
css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||||
|
css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Selesai"
|
||||||
|
css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||||
|
css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="InProgress"
|
||||||
|
css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
||||||
|
css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
||||||
|
css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
||||||
|
css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
|
||||||
|
css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
|
||||||
|
css-class="custom-table-column" />
|
||||||
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
|
||||||
|
css-class="custom-table-column" />
|
||||||
|
</DxDataGrid> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="w-full p-4 space-y-2 overflow-y-auto bg-white lg:w-2/6 rounded-xl">
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
No Laporan:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
Tgl Lapor:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
Dalam Proses Bidang:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
Selesai Bidang Unit:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
Durasi Response Time:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
Status:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
IDPEL/NO METER::
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
Nama Pelapor:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
Alamat Pelapor:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
No Telp Pelapor:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
Keterangan Pelapor:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" type="textarea" value="-" class-name="flex-1 h-[56px]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
Rayon:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" value="-" class-name="flex-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
Uraian:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between w-full">
|
||||||
|
<h3 class="text-sm font-medium w-[170px] text-gray-800">
|
||||||
|
Response Pelanggan:
|
||||||
|
</h3>
|
||||||
|
<InputText :readonly="true" value="-" class-name="flex-1 h-[56px]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DetailDialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
|
||||||
|
import InputText from '@/components/InputText.vue'
|
||||||
import Filters from '@/components/Form/Filters.vue'
|
import Filters from '@/components/Form/Filters.vue'
|
||||||
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
import Type3 from '@/components/Form/FiltersType/Type3.vue'
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
@ -65,6 +229,7 @@ import {
|
|||||||
DxColumnFixing,
|
DxColumnFixing,
|
||||||
DxExport,
|
DxExport,
|
||||||
DxLoadPanel,
|
DxLoadPanel,
|
||||||
|
DxPager,
|
||||||
DxPaging,
|
DxPaging,
|
||||||
DxScrolling,
|
DxScrolling,
|
||||||
DxSearchPanel,
|
DxSearchPanel,
|
||||||
@ -81,8 +246,29 @@ const position = { of: '#data' }
|
|||||||
const showIndicator = ref(true)
|
const showIndicator = ref(true)
|
||||||
const shading = ref(true)
|
const shading = ref(true)
|
||||||
const showPane = ref(true)
|
const showPane = ref(true)
|
||||||
const dataDetail = ref<any>()
|
const dataSelected = ref<any>()
|
||||||
const showDetail = ref(false)
|
const dataDetailSelected = ref<any>()
|
||||||
|
const showDialogDetail = ref(false)
|
||||||
|
const dataDetail = ref<any[]>([])
|
||||||
|
|
||||||
|
const closeDetailDialog = () => {
|
||||||
|
showDialogDetail.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const showDialog = () => {
|
||||||
|
showDialogDetail.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDataSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
dataSelected.value = selectedRowsData[0]
|
||||||
|
console.log(selectedRowsData[0])
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDataDetailSelectionChanged = ({ selectedRowsData }: any) => {
|
||||||
|
dataDetailSelected.value = selectedRowsData[0]
|
||||||
|
console.log(selectedRowsData[0])
|
||||||
|
}
|
||||||
|
|
||||||
const onExporting = (e: any) => {
|
const onExporting = (e: any) => {
|
||||||
if (e.format === 'pdf') {
|
if (e.format === 'pdf') {
|
||||||
const doc = new jsPDF()
|
const doc = new jsPDF()
|
||||||
@ -112,11 +298,6 @@ const onExporting = (e: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSelectionChanged = ({ selectedRowsData }: any) => {
|
|
||||||
const data = selectedRowsData[0]
|
|
||||||
console.log(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = ref<any[]>([])
|
const data = ref<any[]>([])
|
||||||
const GET_DATA = gql`
|
const GET_DATA = gql`
|
||||||
query rekapitulasiKeluhanAll
|
query rekapitulasiKeluhanAll
|
||||||
@ -135,30 +316,24 @@ query rekapitulasiKeluhanAll
|
|||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
) {
|
) {
|
||||||
avg_durasi_dispatch
|
id_ulp
|
||||||
avg_durasi_recovery
|
nama_ulp
|
||||||
avg_durasi_response
|
|
||||||
id_uid
|
|
||||||
id_up3
|
|
||||||
max_durasi_dispatch
|
|
||||||
max_durasi_recovery
|
|
||||||
max_durasi_response
|
|
||||||
min_durasi_dispatch
|
|
||||||
min_durasi_recovery
|
|
||||||
min_durasi_response
|
|
||||||
persen_inproses
|
|
||||||
persen_selesai
|
|
||||||
idUlp
|
|
||||||
total
|
total
|
||||||
total_diatas_sla_dispatch
|
|
||||||
total_diatas_sla_recovery
|
|
||||||
total_diatas_sla_response
|
|
||||||
total_dibawah_sla_dispatch
|
|
||||||
total_dibawah_sla_recovery
|
|
||||||
total_dibawah_sla_response
|
|
||||||
total_inproses
|
|
||||||
total_selesai
|
total_selesai
|
||||||
}
|
persen_selesai
|
||||||
|
total_inproses
|
||||||
|
persen_inproses
|
||||||
|
avg_durasi_response
|
||||||
|
min_durasi_response
|
||||||
|
max_durasi_response
|
||||||
|
total_dibawah_sla_response
|
||||||
|
total_diatas_sla_response
|
||||||
|
avg_durasi_recovery
|
||||||
|
min_durasi_recovery
|
||||||
|
max_durasi_recovery
|
||||||
|
total_dibawah_sla_recovery
|
||||||
|
total_diatas_sla_recovery
|
||||||
|
}
|
||||||
}`
|
}`
|
||||||
|
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
||||||
@ -184,7 +359,6 @@ const filterData = (params: any) => {
|
|||||||
onResult((queryResult) => {
|
onResult((queryResult) => {
|
||||||
if (queryResult.data != undefined) {
|
if (queryResult.data != undefined) {
|
||||||
data.value = queryResult.data.rekapitulasiKeluhanAll
|
data.value = queryResult.data.rekapitulasiKeluhanAll
|
||||||
|
|
||||||
}
|
}
|
||||||
console.log(queryResult.data)
|
console.log(queryResult.data)
|
||||||
console.log(queryResult.loading)
|
console.log(queryResult.loading)
|
||||||
|
|||||||
@ -18,21 +18,21 @@
|
|||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
<DxColumn :width="170" alignment="center" data-field="fungsiBidang" caption="Fungsi Bidang"
|
<DxColumn :width="170" alignment="center" data-field="fungsi_bidang" caption="Fungsi Bidang"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="totalSelesai" data-type="number" caption="Jml"
|
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="persenSelesai" data-type="number" caption="%"
|
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="totalInProcess" data-type="number" caption="Jml"
|
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="persenInProcess" data-type="number" caption="%"
|
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -40,17 +40,17 @@
|
|||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="avgDurasiResponse" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
caption="Rata-Rata" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="maxDurasiResponse" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
|
||||||
caption="Max" css-class="custom-table-column" />
|
caption="Max" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="minDurasiResponse" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
|
||||||
caption="Min" css-class="custom-table-column" />
|
caption="Min" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="totalDiatasSlaResponse" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
caption=">SLA" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="totalDibawahSlaResponse" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
caption="≤SLA" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -58,17 +58,17 @@
|
|||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="avgDurasiPenyelesaian" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
||||||
caption="Rata-Rata" css-class="custom-table-column" />
|
caption="Rata-Rata" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="maxDurasiPenyelesaian" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
|
||||||
caption="Max" css-class="custom-table-column" />
|
caption="Max" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="minDurasiPenyelesaian" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
|
||||||
caption="Min" css-class="custom-table-column" />
|
caption="Min" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="totalDiatasSlaPenyelesaian" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
caption=">SLA" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="totalDibawahSlaPenyelesaian" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
caption="≤SLA" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -155,24 +155,22 @@ const GET_DATA = gql`
|
|||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
) {
|
) {
|
||||||
avgDurasiPenyelesaian
|
fungsi_bidang
|
||||||
avgDurasiResponse
|
|
||||||
fungsiBidang
|
|
||||||
maxDurasiPenyelesaian
|
|
||||||
maxDurasiResponse
|
|
||||||
minDurasiPenyelesaian
|
|
||||||
minDurasiResponse
|
|
||||||
persenInProcess
|
|
||||||
persenSelesai
|
|
||||||
total
|
total
|
||||||
totalDiatasSlaPenyelesaian
|
total_selesai
|
||||||
totalDiatasSlaResponse
|
persen_selesai
|
||||||
totalDibawahSlaPenyelesaian
|
total_inproses
|
||||||
totalDibawahSlaResponse
|
persen_inproses
|
||||||
totalDurasiPenyelesaian
|
avg_durasi_response
|
||||||
totalDurasiResponse
|
min_durasi_response
|
||||||
totalInProcess
|
max_durasi_response
|
||||||
totalSelesai
|
total_dibawah_sla_response
|
||||||
|
total_diatas_sla_response
|
||||||
|
avg_durasi_recovery
|
||||||
|
min_durasi_recovery
|
||||||
|
max_durasi_recovery
|
||||||
|
total_dibawah_sla_recovery
|
||||||
|
total_diatas_sla_recovery
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
<DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
|
<DxColumn :width="170" alignment="center" data-field="tipe_keluhan" caption="Jenis Keluhan"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
@ -68,7 +68,7 @@
|
|||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
||||||
caption=">SLA" css-class="custom-table-column" />
|
caption=">SLA" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number"
|
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
||||||
caption="≤SLA" css-class="custom-table-column" />
|
caption="≤SLA" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -147,27 +147,22 @@ query rekapitulasiKeluhanPerJenisKeluhan
|
|||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
) {
|
) {
|
||||||
avg_durasi_dispatch
|
tipe_keluhan
|
||||||
avg_durasi_recovery
|
|
||||||
avg_durasi_response
|
|
||||||
max_durasi_dispatch
|
|
||||||
max_durasi_recovery
|
|
||||||
max_durasi_response
|
|
||||||
min_durasi_dispatch
|
|
||||||
min_durasi_recovery
|
|
||||||
min_durasi_response
|
|
||||||
persen_inproses
|
|
||||||
persen_selesai
|
|
||||||
tipe_permasalahan
|
|
||||||
total
|
total
|
||||||
total_diatas_sla_dispatch
|
|
||||||
total_diatas_sla_recovery
|
|
||||||
total_diatas_sla_response
|
|
||||||
total_dibawah_sla_dispatch
|
|
||||||
total_dibawah_sla_recovery
|
|
||||||
total_dibawah_sla_response
|
|
||||||
total_inproses
|
|
||||||
total_selesai
|
total_selesai
|
||||||
|
persen_selesai
|
||||||
|
total_inproses
|
||||||
|
persen_inproses
|
||||||
|
avg_durasi_response
|
||||||
|
min_durasi_response
|
||||||
|
max_durasi_response
|
||||||
|
total_dibawah_sla_response
|
||||||
|
total_diatas_sla_response
|
||||||
|
avg_durasi_recovery
|
||||||
|
min_durasi_recovery
|
||||||
|
max_durasi_recovery
|
||||||
|
total_dibawah_sla_recovery
|
||||||
|
total_diatas_sla_recovery
|
||||||
}
|
}
|
||||||
}`;
|
}`;
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
||||||
|
|||||||
@ -18,21 +18,21 @@
|
|||||||
|
|
||||||
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
<DxColumn css-class="custom-table-column" :width="50" alignment="center"
|
||||||
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
:calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
|
||||||
<DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan"
|
<DxColumn :width="170" alignment="center" data-field="kelompok" caption="Kelompok Keluhan"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
<DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
|
<DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
|
<DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
@ -40,36 +40,36 @@
|
|||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Rata-Rata" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
<DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Max" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
|
<DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Min" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption=">SLA" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="≤SLA" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
|
||||||
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
|
<DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Rata-Rata" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
|
<DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Max" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
|
<DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="Min" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
|
<DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption=">SLA" css-class="custom-table-column" />
|
||||||
<DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
|
<DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
|
||||||
css-class="custom-table-column" />
|
caption="≤SLA" css-class="custom-table-column" />
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
</DxColumn>
|
</DxColumn>
|
||||||
|
|
||||||
@ -147,27 +147,22 @@ query rekapitulasiKeluhanPerKelompokKeluhan
|
|||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
) {
|
) {
|
||||||
avg_durasi_dispatch
|
kelompok
|
||||||
avg_durasi_recovery
|
|
||||||
avg_durasi_response
|
|
||||||
max_durasi_dispatch
|
|
||||||
max_durasi_recovery
|
|
||||||
max_durasi_response
|
|
||||||
min_durasi_dispatch
|
|
||||||
min_durasi_recovery
|
|
||||||
min_durasi_response
|
|
||||||
persen_inproses
|
|
||||||
persen_selesai
|
|
||||||
tipe_permasalahan
|
|
||||||
total
|
total
|
||||||
total_diatas_sla_dispatch
|
|
||||||
total_diatas_sla_recovery
|
|
||||||
total_diatas_sla_response
|
|
||||||
total_dibawah_sla_dispatch
|
|
||||||
total_dibawah_sla_recovery
|
|
||||||
total_dibawah_sla_response
|
|
||||||
total_inproses
|
|
||||||
total_selesai
|
total_selesai
|
||||||
|
persen_selesai
|
||||||
|
total_inproses
|
||||||
|
persen_inproses
|
||||||
|
avg_durasi_response
|
||||||
|
min_durasi_response
|
||||||
|
max_durasi_response
|
||||||
|
total_dibawah_sla_response
|
||||||
|
total_diatas_sla_response
|
||||||
|
avg_durasi_recovery
|
||||||
|
min_durasi_recovery
|
||||||
|
max_durasi_recovery
|
||||||
|
total_dibawah_sla_recovery
|
||||||
|
total_diatas_sla_recovery
|
||||||
}
|
}
|
||||||
}`;
|
}`;
|
||||||
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
caption="NO" css-class="custom-table-column" />
|
caption="NO" css-class="custom-table-column" />
|
||||||
<DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
|
<DxColumn :width="170" alignment="center" data-field="tanggal_lapor" caption="Tanggal Lapor"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
@ -153,29 +153,22 @@ const GET_DATA = gql`
|
|||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
) {
|
) {
|
||||||
avg_durasi_dispatch
|
tanggal_lapor
|
||||||
avg_durasi_recovery
|
|
||||||
avg_durasi_response
|
|
||||||
id_uid
|
|
||||||
id_up3
|
|
||||||
max_durasi_dispatch
|
|
||||||
max_durasi_recovery
|
|
||||||
max_durasi_response
|
|
||||||
min_durasi_dispatch
|
|
||||||
min_durasi_recovery
|
|
||||||
min_durasi_response
|
|
||||||
persen_inproses
|
|
||||||
persen_selesai
|
|
||||||
tanggal
|
|
||||||
total
|
total
|
||||||
total_diatas_sla_dispatch
|
|
||||||
total_diatas_sla_recovery
|
|
||||||
total_diatas_sla_response
|
|
||||||
total_dibawah_sla_dispatch
|
|
||||||
total_dibawah_sla_recovery
|
|
||||||
total_dibawah_sla_response
|
|
||||||
total_inproses
|
|
||||||
total_selesai
|
total_selesai
|
||||||
|
persen_selesai
|
||||||
|
total_inproses
|
||||||
|
persen_inproses
|
||||||
|
avg_durasi_response
|
||||||
|
min_durasi_response
|
||||||
|
max_durasi_response
|
||||||
|
total_dibawah_sla_response
|
||||||
|
total_diatas_sla_response
|
||||||
|
avg_durasi_recovery
|
||||||
|
min_durasi_recovery
|
||||||
|
max_durasi_recovery
|
||||||
|
total_dibawah_sla_recovery
|
||||||
|
total_diatas_sla_recovery
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|||||||
@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
<DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
|
||||||
caption="NO" css-class="custom-table-column" />
|
caption="NO" css-class="custom-table-column" />
|
||||||
<DxColumn :width="170" alignment="center" data-field="idUlp" caption="Unit" css-class="custom-table-column" />
|
<DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Unit" css-class="custom-table-column" />
|
||||||
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
<DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
|
||||||
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
<DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
|
||||||
css-class="custom-table-column" />
|
css-class="custom-table-column" />
|
||||||
@ -152,29 +152,23 @@ const GET_DATA = gql`
|
|||||||
idUid: $idUid
|
idUid: $idUid
|
||||||
idUp3: $idUp3
|
idUp3: $idUp3
|
||||||
) {
|
) {
|
||||||
avg_durasi_dispatch
|
id_ulp
|
||||||
avg_durasi_recovery
|
nama_ulp
|
||||||
avg_durasi_response
|
|
||||||
id_uid
|
|
||||||
id_up3
|
|
||||||
max_durasi_dispatch
|
|
||||||
max_durasi_recovery
|
|
||||||
max_durasi_response
|
|
||||||
min_durasi_dispatch
|
|
||||||
min_durasi_recovery
|
|
||||||
min_durasi_response
|
|
||||||
persen_inproses
|
|
||||||
persen_selesai
|
|
||||||
idUlp
|
|
||||||
total
|
total
|
||||||
total_diatas_sla_dispatch
|
|
||||||
total_diatas_sla_recovery
|
|
||||||
total_diatas_sla_response
|
|
||||||
total_dibawah_sla_dispatch
|
|
||||||
total_dibawah_sla_recovery
|
|
||||||
total_dibawah_sla_response
|
|
||||||
total_inproses
|
|
||||||
total_selesai
|
total_selesai
|
||||||
|
persen_selesai
|
||||||
|
total_inproses
|
||||||
|
persen_inproses
|
||||||
|
avg_durasi_response
|
||||||
|
min_durasi_response
|
||||||
|
max_durasi_response
|
||||||
|
total_dibawah_sla_response
|
||||||
|
total_diatas_sla_response
|
||||||
|
avg_durasi_recovery
|
||||||
|
min_durasi_recovery
|
||||||
|
max_durasi_recovery
|
||||||
|
total_dibawah_sla_recovery
|
||||||
|
total_diatas_sla_recovery
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
//deploy vm
|
||||||
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
|
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
|
||||||
|
|
||||||
export const apolloClient = () => {
|
export const apolloClient = () => {
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
//deploy vm
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
|
||||||
const url = import.meta.env.VITE_APP_REST_ENDPOINT
|
const url = import.meta.env.VITE_APP_REST_ENDPOINT
|
||||||
|
|||||||
@ -3,7 +3,6 @@ import { fileURLToPath, URL } from 'node:url'
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||||
import utwm from 'unplugin-tailwindcss-mangle/vite'
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
@ -16,12 +15,17 @@ export default defineConfig({
|
|||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
vueJsx(),
|
vueJsx(),
|
||||||
// process.env.NODE_ENV === 'production' && utwm({})
|
|
||||||
],
|
],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||||
// 'inferno': 'inferno/dist/index.dev.esm.js',
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
build: {
|
||||||
|
outDir: 'build',
|
||||||
|
emptyOutDir: true,
|
||||||
|
chunkSizeWarningLimit: 4096,
|
||||||
|
// cssCodeSplit: true,
|
||||||
|
// cssMinify: true,
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user