Skip to content

aa.gusti / eis

Go to a project
Commit e0efc019 by aa.gustiana@gmail.com
Options

Add new template for PCPD LRA with charts and data tables 

- Implemented HTML structure for the PCPD LRA page.
- Included CSS styles for layout and design.
- Added JavaScript for dynamic data handling and chart rendering.
- Integrated DataTables for displaying target and realization data.
- Set up AJAX calls for data refresh every 5 minutes.
1 parent 798956a1
Inline Side-by-side
Showing 5 changed files with 1529 additions and 255 deletions
eispajak/scripts/data/routes.csv
...@@ -16,8 +16,9 @@ eis-minerba,Minerba,/eis/minerba,1,0,1,eis-pajak,pcpd,Views,view_minerba,eis,pcp ...@@ -16,8 +16,9 @@ eis-minerba,Minerba,/eis/minerba,1,0,1,eis-pajak,pcpd,Views,view_minerba,eis,pcp
eis-reklame,Reklame,/eis/reklame,1,0,1,eis-pajak,pcpd,Views,view_reklame,eis,pcpd.pt eis-reklame,Reklame,/eis/reklame,1,0,1,eis-pajak,pcpd,Views,view_reklame,eis,pcpd.pt
eis-atd,Air Tanah,/eis/atd,1,0,1,eis-pajak,pcpd,Views,view_atd,eis,pcpd.pt eis-atd,Air Tanah,/eis/atd,1,0,1,eis-pajak,pcpd,Views,view_atd,eis,pcpd.pt
eis-opsen,Opsen,/eis/opsen,1,0,1,eis-pajak,pcpd,Views,view_opsen,eis,pcpd.pt eis-opsen,Opsen,/eis/opsen,1,0,1,eis-pajak,pcpd,Views,view_opsen,eis,pcpd.pt
eis-webr,WebR,/eis/webr,1,0,1,,pcpd,Views,view_webr,eis,pcpd_retribusi.pt eis-webr,Retribusi,/eis/webr,1,0,1,,pcpd,Views,view_webr,eis,pcpd_retribusi.pt
eis-lra,LRA Lain2,/eis/lra,0,0,1,,pcpd,Views,view_lra,eis,pcpd_lra.pt eis-hpkdd,HPKDD,/eis/hpkdd,1,0,1,,pcpd,Views,view_hpkdd,eis,pcpd_hpkdd.pt
eis-lra,Lain-lain PAD yang sah,/eis/lra,1,0,1,,pcpd,Views,view_lra,eis,pcpd_lra.pt
eis,EIS,/eis,1,0,0 eis,EIS,/eis,1,0,0
eis-carousel,Carousel,/eis/carousel,1,0,0 eis-carousel,Carousel,/eis/carousel,1,0,0
eis-carousel-act,Carousel Action,/eis/carousel/{act}/act,1,0 eis-carousel-act,Carousel Action,/eis/carousel/{act}/act,1,0
......
eispajak/views/pcpd.py
...@@ -10,6 +10,7 @@ from sqlalchemy import func, and_, String ...@@ -10,6 +10,7 @@ from sqlalchemy import func, and_, String
from sqlalchemy.sql.expression import cast from sqlalchemy.sql.expression import cast
from ..models.payment import PaymentPBB, PaymentPAD, PaymentBPHTB, PaymentWEBR, Targets from ..models.payment import PaymentPBB, PaymentPAD, PaymentBPHTB, PaymentWEBR, Targets
from opensipkd.pbb.monitoring.models import PembayaranSppt, Kecamatan, Kelurahan, Sppt from opensipkd.pbb.monitoring.models import PembayaranSppt, Kecamatan, Kelurahan, Sppt
from opensipkd.webr.models.lra import LraModel
from datetime import timedelta from datetime import timedelta
from ..models.payment import PCDBSession from ..models.payment import PCDBSession
from opensipkd.webr.models import WebrAnggaran, WebrArPayment from opensipkd.webr.models import WebrAnggaran, WebrArPayment
...@@ -468,49 +469,27 @@ class Views(BaseView): ...@@ -468,49 +469,27 @@ class Views(BaseView):
today = datetime.now().date() today = datetime.now().date()
result = [] result = []
tahun = today.year tahun = today.year
from opensipkd.webr.models.lra import LraModel return LraModel.sum_rinci(tahun, '4.1.04')
realisasi = LraModel.sum_rinci(tahun)
for row in realisasi:
target = row[2] and float(row[2]) or 0
realisasi = row[3] and float(row[3]) or 0
result.append({"kode": row[0],
"nama": row[1],
"target": target,
"realisasi": realisasi,
"persen": round(realisasi/target * 100, 2) if target > 0 else 0,
"sisa": target - realisasi,
}
)
# realisasi = WebrArPayment.sum_rekening(tahun)
# for dept in realisasi:
# found = False
# for res in result:
# if dept.rekening_kode == res["kode"]:
# found = True
# res["realisasi"] = float(dept.total_pokok) or 0
# res["sisa"] = res["target"] - res["realisasi"]
# res["persen"] = round(
# res["realisasi"]/res["target"] * 100, 2) if res["target"] > 0 else 0
# if not found:
# result.append({"kode": dept.rekening_kode,
# "nama": dept.rekening_nama,
# "target": 0,
# "realisasi": float(dept.total_pokok) or 0,
# "sisa": 0 - (float(dept.total_pokok) or 0),
# "persen": 0,
# }
# )
return result
def get_lrar_data(self): def get_lrar_data(self):
today = datetime.now().date() today = datetime.now().date()
result = [] result = []
tahun = today.year tahun = today.year
from opensipkd.webr.models.lra import LraModel return LraModel.sum_rekap(tahun, '4.1.04')
return LraModel.sum_rekap(tahun)
def get_hpkdd_data(self):
today = datetime.now().date()
result = []
tahun = today.year
return LraModel.sum_rinci(tahun, '4.1.03')
def get_hpkddr_data(self):
today = datetime.now().date()
result = []
tahun = today.year
return LraModel.sum_rekap(tahun, '4.1.03')
def loop_data(self, src, dst): def loop_data(self, src, dst):
for key, val in enumerate(src): for key, val in enumerate(src):
...@@ -802,6 +781,10 @@ class Views(BaseView): ...@@ -802,6 +781,10 @@ class Views(BaseView):
elif act == 'lrar': elif act == 'lrar':
return self.get_lrar_data() return self.get_lrar_data()
elif act == 'hpkdd':
return self.get_hpkdd_data()
elif act == 'hpkddr':
return self.get_hpkddr_data()
else: else:
resp = self.get_pad_data(act) resp = self.get_pad_data(act)
...@@ -863,3 +846,11 @@ class Views(BaseView): ...@@ -863,3 +846,11 @@ class Views(BaseView):
def view_walet(self): def view_walet(self):
return {"module": 'walet', return {"module": 'walet',
"title": "Pajak Sarang Burung Walet"} "title": "Pajak Sarang Burung Walet"}
def view_lra(self):
return {"module": 'lra',
"title": "Pendapatan Lain-Lain yang Sah"}
def view_hpkdd(self):
return {"module": 'hpkdd',
"title": "Hasil Pengelolaan Kekayaan Daerah yang Dipisahkan"}
eispajak/views/templates/pcpd_hpkdd.pt 0 → 100644
<html metal:use-macro="load: eis-base.pt" tal:define="url request.route_url('eis-pcpd-act', act=module);">
<metal:css fill-slot="css_files">
<link rel="stylesheet" href="${home}/eis/static/css/odometer-theme-plaza.css">
<link href="${home}/eis/static/css/pcpd.css" rel="stylesheet">
</metal:css>
<style metal:fill-slot="styles">
</style>
<div metal:fill-slot="content">
<div class="row ">
<div class="col-md-12">
<div class="panel panel-default text-center main-panel uppercase">
<div class="panel-body">
<h1 class="title-panel"><b>${title}</b></h1>
<!--<div class="padding-top-sm">
<h5 id="time">Rab, 4 Jun 2025 - 14:11:05</h5>
</div>
<h4 class="odoometer-head">
<b>Rp.<h4 class="odometer bold" id="today"></h4></b>
</h4>
<h5 class="padding-top-sm"><b><span id="trx"></span> Transaksi</b></h5>
-->
</div>
</div>
</div>
</div>
<!--
<div class="row">
<div class="col-md-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-money-transfer.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">
Total Realisasi s.d Hari Ini
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container">
<h2 class="primary">
<b>Rp. <h2 class="odometer sub-odometer bold primary" id="ytd">0</h2></b>
</h2>
<h3 class="primary bold"><span id="trxYtd">1067</span> Transaksi</h3>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default hide">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-pie-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Jumlah Transaksi
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center">
<canvas id="chartPie"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-2">
<select class="form-control rounded" id="rangeType">
<option value="3">Bulanan</option>
<option value="2">Mingguan</option>
<option value="1">Harian</option>
</select>
</div>
<hr>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-gantt-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Realiasi (Rp)
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartRealisasi"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Realiasi Kumulatif (Rp)
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartKumulatif" width="200" height="200"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Transaksi
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartRealisasiCnt"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-line-chart-icon.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Transaksi Kumulatif
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartKumulatifCnt" width="200" height="200"></canvas>
</div>
</div>
</div>
</div>
</div>
-->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Target dan Realisasi Rekap
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<table class="table table-bordered table-sm" id="tableRekap">
<thead>
<tr>
<th class="align-middle text-center">Kode</th>
<th class="align-middle text-center">Jenis</th>
<th class="text-center">Target</th>
<th class="text-center">Realisasi</th>
<th class="text-center">Selisih</th>
<th class="text-center">%</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class=""></td>
<td class=""></td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
</tr>
</tbody>
<tfoot>
<td colspan="2" class="text-right">Jumlah</td>
<td><span id="targetRekap"></span></td>
<td><span id="realisasiRekap"></span></td>
<td><span id="sisaRekap"></span></td>
<td><span id="persenRekap"></span></td>
</tfoot>
</table>
</div>
</div>
</div>
<hr>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Target dan Realisasi Rinci
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<table class="table table-bordered table-sm" id="tableRinci">
<thead>
<tr>
<th class="align-middle text-center">Kode</th>
<th class="align-middle text-center">Jenis</th>
<th class="text-center">Target</th>
<th class="text-center">Realisasi</th>
<th class="text-center">Selisih</th>
<th class="text-center">%</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class=""></td>
<td class=""></td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
</tr>
</tbody>
<tfoot>
<td colspan="2" class="text-right">Jumlah</td>
<td><span id="targetRinci"></span></td>
<td><span id="realisasiRinci"></span></td>
<td><span id="sisaRinci"></span></td>
<td><span id="persenRinci"></span></td>
</tfoot>
</table>
</div>
</div>
</div>
<hr>
</div>
</div>
<metal:js fill-slot="js_files">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> -->
<script src="${home}/eis/static/js/chart.js"></script>
<script src="${home}/eis/static/js/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="${home}/eis/static/js/odometer.js"></script>
<script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.min.js"></script>
<script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.ext.js"></script>
</metal:js>
<script metal:fill-slot="scripts">
// {# var pieChart;
// var amtTrendChart;
// var trxTrendChart;
// var amtKumulatifChart;
// var trxKumulatifChart;
//
// var newData;
$(document).ready(function () {
// var ctx = document.getElementById('chartPie').getContext('2d');
// var canvas = document.getElementById('chartPie');
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight / 3.8;
// const pie_data = {
// labels: [
// 'Pajak',
// 'Retribusi',
// ],
// datasets: [{
// data: [300, 100],
// backgroundColor: [
// '#16a75c', //'rgb(255, 99, 132)',
// '#ffb900', // 'rgb(54, 162, 235)'
//
// ],
// hoverOffset: 4
// }]
// };
//
// pieChart = new Chart(ctx,
// {
// type: 'pie',
// data: pie_data,
// options: {
// responsive: true,
// maintainAspectRatio: false,
// plugins: {
// legend: {
// position: 'bottom'
// }
// }
// }
// }
// );
//
// var ctx = document.getElementById('chartRealisasi').getContext('2d');
// var canvas = document.getElementById('chartRealisasi');
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight / 3.38;
// var realisasi_data = {
// labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
// datasets: [{
// label: 'Tren Realiasi',
// data: [100, 50, 300, 250, 100, 150, 2000],
// borderColor: '#16a75c',// 'rgb(75, 192, 192)',
// backgroundColor: '#16a75c8a',
// fill: true,
// tension: 0.5
// }]
// };
// amtTrendChart = new Chart(ctx, {
// type: 'line',
// data: realisasi_data,
// options: {
// responsive: true,
// maintainAspectRatio: false,
// scales: {
// x: {
// grid: {
// display: false,
// drawBorder: false,
// }
// }
// }
// }
// });
//
// var transaksi_data = {
// labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
// datasets: [{
// label: 'Tren Transaksi',
// data: [100, 50, 300, 250, 100, 150, 2000],
// borderColor: '#16a75c',// 'rgb(75, 192, 192)',
// backgroundColor: '#16a75c8a',
// fill: true,
// tension: 0.5
// }]
// };
//
// var ctx = document.getElementById('chartRealisasiCnt').getContext('2d');
// var canvas = document.getElementById('chartRealisasiCnt');
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight / 3.38;
// trxTrendChart = new Chart(ctx, {
// type: 'line',
// data: transaksi_data,
// options: {
// responsive: true,
// maintainAspectRatio: false,
// }
// });
//
// var ctx = document.getElementById('chartKumulatif').getContext('2d');
// var canvas = document.getElementById('chartKumulatif');
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight / 3.38;
// var kumulatif_data = {
// labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
// datasets: [{
// label: 'Tren Kumulatif',
// data: [100, 150, 400, 650, 900, 950, 1100],
// borderColor: '#ffb900', //'rgb(75, 192, 192)',
// backgroundColor: '#debd68ad',
// fill: true,
// tension: 0.5
// }]
// };
//
// amtKumulatifChart = new Chart(ctx, {
// type: 'line',
// data: kumulatif_data,
// options: {
// responsive: true,
// maintainAspectRatio: false,
// }
// });
//
// var ctx = document.getElementById('chartKumulatifCnt').getContext('2d');
// var canvas = document.getElementById('chartKumulatifCnt');
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight / 3.38;
// trxKumulatifChart = new Chart(ctx, {
// type: 'line',
// data: kumulatif_data,
// options: {
// responsive: true,
// maintainAspectRatio: false,
// }
// });
//
// $("#rangeType").change(function () {
// trendChart();
// });
$().datarefresh();
});
//
// function addData(chart, data) {
// labels = [];
// aData = [];
// backgroundColor = [];
// data.forEach(element => {
// labels.push(element[0]);
// aData.push(element[1]);
// if (element.length > 2)
// backgroundColor.push(element[2]);
// });
// chart.data.labels.length = 0;
// chart.data.datasets[0].data.length = 0;
// if (backgroundColor.length != 0) {
// chart.data.datasets[0].data.backgroundColor = 0;
// chart.data.datasets[0].backgroundColor = backgroundColor;
// }
// chart.data.labels = labels;
// chart.data.datasets[0].data = aData;
// chart.update();
// }
//
// trendChart = function () {
// if (rangeType.value == 1) {
// amtTrendChartData = newData.daily;
// trxTrendChartData = newData.dailyTrx;
// amtKumulatifChartData = newData.dailyAcc;
// trxKumulatifChartData = newData.dailyAccTrx;
// }
// else if (rangeType.value == 2) {
// amtTrendChartData = newData.weekly;
// trxTrendChartData = newData.weeklyTrx;
// amtKumulatifChartData = newData.weeklyAcc;
// trxKumulatifChartData = newData.weeklyAccTrx;
// }
// else {
// amtTrendChartData = newData.monthly;
// trxTrendChartData = newData.monthlyTrx;
// amtKumulatifChartData = newData.monthlyAcc;
// trxKumulatifChartData = newData.monthlyAccTrx;
//
// }
// addData(amtTrendChart, amtTrendChartData);
// addData(trxTrendChart, trxTrendChartData);
// addData(amtKumulatifChart, amtKumulatifChartData);
// addData(trxKumulatifChart, trxKumulatifChartData);
// }
// const formatter = new Intl.DateTimeFormat('id-ID', { dateStyle: 'full', timeStyle: 'medium' });
// var today_el = document.getElementById('today');
// odtoday = new Odometer({
// el: today_el,
// value: 0,
// format: '(.ddd)',
// });
//
// var ytd_el = document.getElementById('ytd');
// odytd = new Odometer({
// el: ytd_el,
// value: 0,
// format: '(.ddd)',
// });
// //Ditambahkan atas permintaan 2025-10-28
// //grid per dinas
// var tableDinas = $('#tableDinas').DataTable(
// {
// "destroy": true,
// "paging": false,
// "searching": false,
// "info": false,
// "autoWidth": false,
// "scrollX": true,
// "order": [[0, 'asc']],
// "columnDefs": [
// { className: 'text-center', width: "50px", targets: [0] },
// { className: 'text-left', targets: [1] },
// { className: 'text-right', width: "100px", targets: [2, 3, 4], render: $.fn.dataTable.render.number('.', ',', 0, '') },
// { className: 'text-right', width: "100px", targets: [5], render: $.fn.dataTable.render.number('.', ',', 2, '') },
// ]
// }
// );
// var dinasRefresh = function () {
//
// tableDinas.clear();
// var dinasUrl = "${url}".replace("/webr/", "/rdinas/");
// $.get(dinasUrl, {}, function (data, status) {
// if (status === "success") {
// console.log("Data:", data);
// var sum_target = 0;
// var sum_realisasi = 0;
// var sum_sisa = 0;
// var sum_persen = 0;
// data.forEach(function (row) {
// console.log(row);
// tableDinas.row.add([
// row.kode,
// row.nama,
// row.target,
// row.realisasi,
// row.sisa,
// row.persen.toFixed(2)
// ]);
// sum_target += row.target;
// sum_realisasi += row.realisasi;
// sum_sisa += row.sisa;
// sum_persen += row.persen;
// });
// $('#sum_target').html(sum_target.toLocaleString("id-ID"));
// $('#sum_realisasi').html(sum_realisasi.toLocaleString("id-ID"));
// $('#sum_sisa').html(sum_sisa.toLocaleString("id-ID"));
// if (sum_target > 0)
// $('#sum_persen').html((sum_realisasi / sum_target * 100).toFixed(2));
// else
// $('#sum_persen').html("0.00");
//
// tableDinas.draw();
// } else {
// console.log("Request failed.");
// tableDinas.draw();
//
// }
// }).fail(function () {
// console.log("Request failed.");
// tableDinas.draw();
//
// });
// }
// //grid per jenis
// var tableJenis = $('#tableJenis').DataTable(
// {
// "destroy": true,
// "paging": false,
// "searching": false,
// "info": false,
// "autoWidth": false,
// "scrollX": true,
// "order": [[0, 'asc']],
// "columnDefs": [
// { className: 'text-center', width: "50px", targets: [0] },
// { className: 'text-left', targets: [1] },
// { className: 'text-right', width: "100px", targets: [2, 3, 4], render: $.fn.dataTable.render.number('.', ',', 0, '') },
// { className: 'text-right', width: "100px", targets: [5], render: $.fn.dataTable.render.number('.', ',', 2, '') },
// ]
// }
// );
//
//
// var jenisRefresh = function () {
// tableJenis.clear();
// var jenisUrl = "${url}".replace("/webr/", "/rjenis/");
// $.get(jenisUrl, {}, function (data, status) {
// if (status === "success") {
// console.log(data);
// var jns_target = 0;
// var jns_realisasi = 0;
// var jns_sisa = 0;
// var jns_persen = 0;
// data.forEach(function (row) {
// console.log(row);
// tableJenis.row.add([
// row.kode,
// row.nama,
// row.target,
// row.realisasi,
// row.sisa,
// row.persen.toFixed(2)
// ]);
// jns_target += row.target;
// jns_realisasi += row.realisasi;
// jns_sisa += row.sisa;
// jns_persen += row.persen;
// });
// $('#jns_target').html(jns_target.toLocaleString("id-ID"));
// $('#jns_realisasi').html(jns_realisasi.toLocaleString("id-ID"));
// $('#jns_sisa').html(jns_sisa.toLocaleString("id-ID"));
// if (jns_target > 0)
// $('#jns_persen').html((jns_realisasi / jns_target * 100).toFixed(2));
// else
// $('#jns_persen').html("0.00");
//
// tableJenis.draw();
// } else {
// console.log("Request failed.");
// tableJenis.draw();
//
// }
// }).fail(function () {
// console.log("Request failed.");
// tableJenis.draw();
//
// });
// } #}
var tableRinci = $('#tableRinci').DataTable(
{
"destroy": true,
"paging": false,
"searching": false,
"info": false,
"autoWidth": false,
"scrollX": true,
"order": [[0, 'asc']],
"columnDefs": [
{ className: 'text-center', width: "50px", targets: [0] },
{ className: 'text-left', targets: [1] },
{ className: 'text-right', width: "100px", targets: [2, 3, 4], render: $.fn.dataTable.render.number('.', ',', 0, '') },
{ className: 'text-right', width: "100px", targets: [5], render: $.fn.dataTable.render.number('.', ',', 2, '') },
]
}
);
var rinciRefresh = function () {
tableRinci.clear();
var rinciUrl = "${url}";
$.get(rinciUrl, {}, function (data, status) {
if (status === "success") {
console.log(data);
var rinci_target = 0;
var rinci_realisasi = 0;
var rinci_sisa = 0;
var rinci_persen = 0;
data.forEach(function (row) {
console.log(row);
tableRinci.row.add([
row.kode,
row.nama,
row.target,
row.realisasi,
row.sisa,
row.persen.toFixed(2)
]);
rinci_target += row.target;
rinci_realisasi += row.realisasi;
rinci_sisa += row.sisa;
rinci_persen += row.persen;
;
$('#targetRinci').html(rinci_target.toLocaleString("id-ID"));
$('#realisasiRinci').html(rinci_realisasi.toLocaleString("id-ID"));
$('#sisaRinci').html(rinci_sisa.toLocaleString("id-ID"));
if (rinci_target > 0)
$('#persenRinci').html((rinci_realisasi / rinci_target * 100).toFixed(2));
else
$('#persenRinci').html("0.00");
tableRinci.draw();
});
} else {
console.log("Request failed.");
tableRinci.draw();
}
}).fail(function () {
console.log("Request failed.");
tableRinci.draw();
});
}
var tableRekap = $('#tableRekap').DataTable(
{
"destroy": true,
"paging": false,
"searching": false,
"info": false,
"autoWidth": false,
"scrollX": true,
"order": [[0, 'asc']],
"columnDefs": [
{ className: 'text-center', width: "50px", targets: [0] },
{ className: 'text-left', targets: [1] },
{ className: 'text-right', width: "100px", targets: [2, 3, 4], render: $.fn.dataTable.render.number('.', ',', 0, '') },
{ className: 'text-right', width: "100px", targets: [5], render: $.fn.dataTable.render.number('.', ',', 2, '') },
]
}
);
var rekapRefresh = function () {
tableRekap.clear();
var rekapUrl = "${url}".replace("/hpkdd/", "/hpkddr/");
$.get(rekapUrl, {}, function (data, status) {
if (status === "success") {
console.log(data);
var rekap_target = 0;
var rekap_realisasi = 0;
var rekap_sisa = 0;
var rekap_persen = 0;
data.forEach(function (row) {
console.log(row);
tableRekap.row.add([
row.kode,
row.nama,
row.target,
row.realisasi,
row.sisa,
row.persen.toFixed(2)
]);
rekap_target += row.target;
rekap_realisasi += row.realisasi;
rekap_sisa += row.sisa;
rekap_persen += row.persen;
$('#targetRekap').html(rekap_target.toLocaleString("id-ID"));
$('#realisasiRekap').html(rekap_realisasi.toLocaleString("id-ID"));
$('#sisaRekap').html(rekap_sisa.toLocaleString("id-ID"));
if (rekap_target > 0)
$('#persenRekap').html((rekap_realisasi / rekap_target * 100).toFixed(2));
else
$('#persenRekap').html("0.00");
tableRekap.draw();
});
} else {
console.log("Request failed.");
tableRinci.draw();
}
}).fail(function () {
console.log("Request failed.");
tableRekap.draw();
});
}
$.fn.datarefresh = function () {
console.log("data_refresh");
console.log("${url}");
$.get("${url}", {}, function (data, status) {
if (status === "success") {
newData = data;
date = new Date(newData.time);
//odtoday.update(newData.today);
//trx.innerHTML = parseInt(newData.trx).toLocaleString("id-ID");
//odytd.update(newData.ytd);
//trxYtd.innerHTML = parseInt(newData.trxYtd).toLocaleString("id-ID");
//ytdTarget.innerHTML = parseInt(newData.ytdTarget).toLocaleString("id-ID");
//ytdPersen.innerHTML = parseFloat(newData.ytdPersen).toFixed(2) + "%";
//time.innerHTML = formatter.format(date);
//time.style.fontWeight = 'bold';
//addData(pieChart, newData.pie);
//trendChart();
rekapRefresh();
rinciRefresh();
} else {
console.log("Request failed.");
}
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 300000);
}).fail(function () {
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 300000);
});
// $().get_realisasi();
// $().get_harian();
// $().get_tabel();
// $().get_series();
}
</script>
</html>
\ No newline at end of file \ No newline at end of file
eispajak/views/templates/pcpd_lra.pt 0 → 100644
<html metal:use-macro="load: eis-base.pt" tal:define="url request.route_url('eis-pcpd-act', act=module);">
<metal:css fill-slot="css_files">
<link rel="stylesheet" href="${home}/eis/static/css/odometer-theme-plaza.css">
<link href="${home}/eis/static/css/pcpd.css" rel="stylesheet">
</metal:css>
<style metal:fill-slot="styles">
</style>
<div metal:fill-slot="content">
<div class="row ">
<div class="col-md-12">
<div class="panel panel-default text-center main-panel uppercase">
<div class="panel-body">
<h1 class="title-panel"><b>${title}</b></h1>
<!--<div class="padding-top-sm">
<h5 id="time">Rab, 4 Jun 2025 - 14:11:05</h5>
</div>
<h4 class="odoometer-head">
<b>Rp.<h4 class="odometer bold" id="today"></h4></b>
</h4>
<h5 class="padding-top-sm"><b><span id="trx"></span> Transaksi</b></h5>
-->
</div>
</div>
</div>
</div>
<!--
<div class="row">
<div class="col-md-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-money-transfer.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">
Total Realisasi s.d Hari Ini
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container">
<h2 class="primary">
<b>Rp. <h2 class="odometer sub-odometer bold primary" id="ytd">0</h2></b>
</h2>
<h3 class="primary bold"><span id="trxYtd">1067</span> Transaksi</h3>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default hide">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-pie-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Jumlah Transaksi
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center">
<canvas id="chartPie"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-md-2">
<select class="form-control rounded" id="rangeType">
<option value="3">Bulanan</option>
<option value="2">Mingguan</option>
<option value="1">Harian</option>
</select>
</div>
<hr>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-gantt-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Realiasi (Rp)
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartRealisasi"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Realiasi Kumulatif (Rp)
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartKumulatif" width="200" height="200"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Transaksi
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartRealisasiCnt"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-line-chart-icon.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Transaksi Kumulatif
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartKumulatifCnt" width="200" height="200"></canvas>
</div>
</div>
</div>
</div>
</div>
-->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Target dan Realisasi Rekap
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<table class="table table-bordered table-sm" id="tableRekap">
<thead>
<tr>
<th class="align-middle text-center">Kode</th>
<th class="align-middle text-center">Jenis</th>
<th class="text-center">Target</th>
<th class="text-center">Realisasi</th>
<th class="text-center">Selisih</th>
<th class="text-center">%</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class=""></td>
<td class=""></td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
</tr>
</tbody>
<tfoot>
<td colspan="2" class="text-right">Jumlah</td>
<td><span id="targetRekap"></span></td>
<td><span id="realisasiRekap"></span></td>
<td><span id="sisaRekap"></span></td>
<td><span id="persenRekap"></span></td>
</tfoot>
</table>
</div>
</div>
</div>
<hr>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Target dan Realisasi Rinci
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<table class="table table-bordered table-sm" id="tableRinci">
<thead>
<tr>
<th class="align-middle text-center">Kode</th>
<th class="align-middle text-center">Jenis</th>
<th class="text-center">Target</th>
<th class="text-center">Realisasi</th>
<th class="text-center">Selisih</th>
<th class="text-center">%</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class=""></td>
<td class=""></td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
</tr>
</tbody>
<tfoot>
<td colspan="2" class="text-right">Jumlah</td>
<td><span id="targetRinci"></span></td>
<td><span id="realisasiRinci"></span></td>
<td><span id="sisaRinci"></span></td>
<td><span id="persenRinci"></span></td>
</tfoot>
</table>
</div>
</div>
</div>
<hr>
</div>
</div>
<metal:js fill-slot="js_files">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> -->
<script src="${home}/eis/static/js/chart.js"></script>
<script src="${home}/eis/static/js/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="${home}/eis/static/js/odometer.js"></script>
<script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.min.js"></script>
<script src="${home}/static/v3/plugin/datatables/1.10/media/js/jquery.dataTables.ext.js"></script>
</metal:js>
<script metal:fill-slot="scripts">
// {# var pieChart;
// var amtTrendChart;
// var trxTrendChart;
// var amtKumulatifChart;
// var trxKumulatifChart;
//
// var newData;
$(document).ready(function () {
// var ctx = document.getElementById('chartPie').getContext('2d');
// var canvas = document.getElementById('chartPie');
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight / 3.8;
// const pie_data = {
// labels: [
// 'Pajak',
// 'Retribusi',
// ],
// datasets: [{
// data: [300, 100],
// backgroundColor: [
// '#16a75c', //'rgb(255, 99, 132)',
// '#ffb900', // 'rgb(54, 162, 235)'
//
// ],
// hoverOffset: 4
// }]
// };
//
// pieChart = new Chart(ctx,
// {
// type: 'pie',
// data: pie_data,
// options: {
// responsive: true,
// maintainAspectRatio: false,
// plugins: {
// legend: {
// position: 'bottom'
// }
// }
// }
// }
// );
//
// var ctx = document.getElementById('chartRealisasi').getContext('2d');
// var canvas = document.getElementById('chartRealisasi');
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight / 3.38;
// var realisasi_data = {
// labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
// datasets: [{
// label: 'Tren Realiasi',
// data: [100, 50, 300, 250, 100, 150, 2000],
// borderColor: '#16a75c',// 'rgb(75, 192, 192)',
// backgroundColor: '#16a75c8a',
// fill: true,
// tension: 0.5
// }]
// };
// amtTrendChart = new Chart(ctx, {
// type: 'line',
// data: realisasi_data,
// options: {
// responsive: true,
// maintainAspectRatio: false,
// scales: {
// x: {
// grid: {
// display: false,
// drawBorder: false,
// }
// }
// }
// }
// });
//
// var transaksi_data = {
// labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
// datasets: [{
// label: 'Tren Transaksi',
// data: [100, 50, 300, 250, 100, 150, 2000],
// borderColor: '#16a75c',// 'rgb(75, 192, 192)',
// backgroundColor: '#16a75c8a',
// fill: true,
// tension: 0.5
// }]
// };
//
// var ctx = document.getElementById('chartRealisasiCnt').getContext('2d');
// var canvas = document.getElementById('chartRealisasiCnt');
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight / 3.38;
// trxTrendChart = new Chart(ctx, {
// type: 'line',
// data: transaksi_data,
// options: {
// responsive: true,
// maintainAspectRatio: false,
// }
// });
//
// var ctx = document.getElementById('chartKumulatif').getContext('2d');
// var canvas = document.getElementById('chartKumulatif');
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight / 3.38;
// var kumulatif_data = {
// labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
// datasets: [{
// label: 'Tren Kumulatif',
// data: [100, 150, 400, 650, 900, 950, 1100],
// borderColor: '#ffb900', //'rgb(75, 192, 192)',
// backgroundColor: '#debd68ad',
// fill: true,
// tension: 0.5
// }]
// };
//
// amtKumulatifChart = new Chart(ctx, {
// type: 'line',
// data: kumulatif_data,
// options: {
// responsive: true,
// maintainAspectRatio: false,
// }
// });
//
// var ctx = document.getElementById('chartKumulatifCnt').getContext('2d');
// var canvas = document.getElementById('chartKumulatifCnt');
// canvas.width = window.innerWidth;
// canvas.height = window.innerHeight / 3.38;
// trxKumulatifChart = new Chart(ctx, {
// type: 'line',
// data: kumulatif_data,
// options: {
// responsive: true,
// maintainAspectRatio: false,
// }
// });
//
// $("#rangeType").change(function () {
// trendChart();
// });
$().datarefresh();
});
//
// function addData(chart, data) {
// labels = [];
// aData = [];
// backgroundColor = [];
// data.forEach(element => {
// labels.push(element[0]);
// aData.push(element[1]);
// if (element.length > 2)
// backgroundColor.push(element[2]);
// });
// chart.data.labels.length = 0;
// chart.data.datasets[0].data.length = 0;
// if (backgroundColor.length != 0) {
// chart.data.datasets[0].data.backgroundColor = 0;
// chart.data.datasets[0].backgroundColor = backgroundColor;
// }
// chart.data.labels = labels;
// chart.data.datasets[0].data = aData;
// chart.update();
// }
//
// trendChart = function () {
// if (rangeType.value == 1) {
// amtTrendChartData = newData.daily;
// trxTrendChartData = newData.dailyTrx;
// amtKumulatifChartData = newData.dailyAcc;
// trxKumulatifChartData = newData.dailyAccTrx;
// }
// else if (rangeType.value == 2) {
// amtTrendChartData = newData.weekly;
// trxTrendChartData = newData.weeklyTrx;
// amtKumulatifChartData = newData.weeklyAcc;
// trxKumulatifChartData = newData.weeklyAccTrx;
// }
// else {
// amtTrendChartData = newData.monthly;
// trxTrendChartData = newData.monthlyTrx;
// amtKumulatifChartData = newData.monthlyAcc;
// trxKumulatifChartData = newData.monthlyAccTrx;
//
// }
// addData(amtTrendChart, amtTrendChartData);
// addData(trxTrendChart, trxTrendChartData);
// addData(amtKumulatifChart, amtKumulatifChartData);
// addData(trxKumulatifChart, trxKumulatifChartData);
// }
// const formatter = new Intl.DateTimeFormat('id-ID', { dateStyle: 'full', timeStyle: 'medium' });
// var today_el = document.getElementById('today');
// odtoday = new Odometer({
// el: today_el,
// value: 0,
// format: '(.ddd)',
// });
//
// var ytd_el = document.getElementById('ytd');
// odytd = new Odometer({
// el: ytd_el,
// value: 0,
// format: '(.ddd)',
// });
// //Ditambahkan atas permintaan 2025-10-28
// //grid per dinas
// var tableDinas = $('#tableDinas').DataTable(
// {
// "destroy": true,
// "paging": false,
// "searching": false,
// "info": false,
// "autoWidth": false,
// "scrollX": true,
// "order": [[0, 'asc']],
// "columnDefs": [
// { className: 'text-center', width: "50px", targets: [0] },
// { className: 'text-left', targets: [1] },
// { className: 'text-right', width: "100px", targets: [2, 3, 4], render: $.fn.dataTable.render.number('.', ',', 0, '') },
// { className: 'text-right', width: "100px", targets: [5], render: $.fn.dataTable.render.number('.', ',', 2, '') },
// ]
// }
// );
// var dinasRefresh = function () {
//
// tableDinas.clear();
// var dinasUrl = "${url}".replace("/webr/", "/rdinas/");
// $.get(dinasUrl, {}, function (data, status) {
// if (status === "success") {
// console.log("Data:", data);
// var sum_target = 0;
// var sum_realisasi = 0;
// var sum_sisa = 0;
// var sum_persen = 0;
// data.forEach(function (row) {
// console.log(row);
// tableDinas.row.add([
// row.kode,
// row.nama,
// row.target,
// row.realisasi,
// row.sisa,
// row.persen.toFixed(2)
// ]);
// sum_target += row.target;
// sum_realisasi += row.realisasi;
// sum_sisa += row.sisa;
// sum_persen += row.persen;
// });
// $('#sum_target').html(sum_target.toLocaleString("id-ID"));
// $('#sum_realisasi').html(sum_realisasi.toLocaleString("id-ID"));
// $('#sum_sisa').html(sum_sisa.toLocaleString("id-ID"));
// if (sum_target > 0)
// $('#sum_persen').html((sum_realisasi / sum_target * 100).toFixed(2));
// else
// $('#sum_persen').html("0.00");
//
// tableDinas.draw();
// } else {
// console.log("Request failed.");
// tableDinas.draw();
//
// }
// }).fail(function () {
// console.log("Request failed.");
// tableDinas.draw();
//
// });
// }
// //grid per jenis
// var tableJenis = $('#tableJenis').DataTable(
// {
// "destroy": true,
// "paging": false,
// "searching": false,
// "info": false,
// "autoWidth": false,
// "scrollX": true,
// "order": [[0, 'asc']],
// "columnDefs": [
// { className: 'text-center', width: "50px", targets: [0] },
// { className: 'text-left', targets: [1] },
// { className: 'text-right', width: "100px", targets: [2, 3, 4], render: $.fn.dataTable.render.number('.', ',', 0, '') },
// { className: 'text-right', width: "100px", targets: [5], render: $.fn.dataTable.render.number('.', ',', 2, '') },
// ]
// }
// );
//
//
// var jenisRefresh = function () {
// tableJenis.clear();
// var jenisUrl = "${url}".replace("/webr/", "/rjenis/");
// $.get(jenisUrl, {}, function (data, status) {
// if (status === "success") {
// console.log(data);
// var jns_target = 0;
// var jns_realisasi = 0;
// var jns_sisa = 0;
// var jns_persen = 0;
// data.forEach(function (row) {
// console.log(row);
// tableJenis.row.add([
// row.kode,
// row.nama,
// row.target,
// row.realisasi,
// row.sisa,
// row.persen.toFixed(2)
// ]);
// jns_target += row.target;
// jns_realisasi += row.realisasi;
// jns_sisa += row.sisa;
// jns_persen += row.persen;
// });
// $('#jns_target').html(jns_target.toLocaleString("id-ID"));
// $('#jns_realisasi').html(jns_realisasi.toLocaleString("id-ID"));
// $('#jns_sisa').html(jns_sisa.toLocaleString("id-ID"));
// if (jns_target > 0)
// $('#jns_persen').html((jns_realisasi / jns_target * 100).toFixed(2));
// else
// $('#jns_persen').html("0.00");
//
// tableJenis.draw();
// } else {
// console.log("Request failed.");
// tableJenis.draw();
//
// }
// }).fail(function () {
// console.log("Request failed.");
// tableJenis.draw();
//
// });
// } #}
var tableRinci = $('#tableRinci').DataTable(
{
"destroy": true,
"paging": false,
"searching": false,
"info": false,
"autoWidth": false,
"scrollX": true,
"order": [[0, 'asc']],
"columnDefs": [
{ className: 'text-center', width: "50px", targets: [0] },
{ className: 'text-left', targets: [1] },
{ className: 'text-right', width: "100px", targets: [2, 3, 4], render: $.fn.dataTable.render.number('.', ',', 0, '') },
{ className: 'text-right', width: "100px", targets: [5], render: $.fn.dataTable.render.number('.', ',', 2, '') },
]
}
);
var rinciRefresh = function () {
tableRinci.clear();
var rinciUrl = "${url}";
$.get(rinciUrl, {}, function (data, status) {
if (status === "success") {
console.log(data);
var rinci_target = 0;
var rinci_realisasi = 0;
var rinci_sisa = 0;
var rinci_persen = 0;
data.forEach(function (row) {
console.log(row);
tableRinci.row.add([
row.kode,
row.nama,
row.target,
row.realisasi,
row.sisa,
row.persen.toFixed(2)
]);
rinci_target += row.target;
rinci_realisasi += row.realisasi;
rinci_sisa += row.sisa;
rinci_persen += row.persen;
;
$('#targetRinci').html(rinci_target.toLocaleString("id-ID"));
$('#realisasiRinci').html(rinci_realisasi.toLocaleString("id-ID"));
$('#sisaRinci').html(rinci_sisa.toLocaleString("id-ID"));
if (rinci_target > 0)
$('#persenRinci').html((rinci_realisasi / rinci_target * 100).toFixed(2));
else
$('#persenRinci').html("0.00");
tableRinci.draw();
});
} else {
console.log("Request failed.");
tableRinci.draw();
}
}).fail(function () {
console.log("Request failed.");
tableRinci.draw();
});
}
var tableRekap = $('#tableRekap').DataTable(
{
"destroy": true,
"paging": false,
"searching": false,
"info": false,
"autoWidth": false,
"scrollX": true,
"order": [[0, 'asc']],
"columnDefs": [
{ className: 'text-center', width: "50px", targets: [0] },
{ className: 'text-left', targets: [1] },
{ className: 'text-right', width: "100px", targets: [2, 3, 4], render: $.fn.dataTable.render.number('.', ',', 0, '') },
{ className: 'text-right', width: "100px", targets: [5], render: $.fn.dataTable.render.number('.', ',', 2, '') },
]
}
);
var rekapRefresh = function () {
tableRekap.clear();
var rekapUrl = "${url}".replace("/lra/", "/lrar/");
$.get(rekapUrl, {}, function (data, status) {
if (status === "success") {
console.log(data);
var rekap_target = 0;
var rekap_realisasi = 0;
var rekap_sisa = 0;
var rekap_persen = 0;
data.forEach(function (row) {
console.log(row);
tableRekap.row.add([
row.kode,
row.nama,
row.target,
row.realisasi,
row.sisa,
row.persen.toFixed(2)
]);
rekap_target += row.target;
rekap_realisasi += row.realisasi;
rekap_sisa += row.sisa;
rekap_persen += row.persen;
$('#targetRekap').html(rekap_target.toLocaleString("id-ID"));
$('#realisasiRekap').html(rekap_realisasi.toLocaleString("id-ID"));
$('#sisaRekap').html(rekap_sisa.toLocaleString("id-ID"));
if (rekap_target > 0)
$('#persenRekap').html((rekap_realisasi / rekap_target * 100).toFixed(2));
else
$('#persenRekap').html("0.00");
tableRekap.draw();
});
} else {
console.log("Request failed.");
tableRinci.draw();
}
}).fail(function () {
console.log("Request failed.");
tableRekap.draw();
});
}
$.fn.datarefresh = function () {
console.log("data_refresh");
console.log("${url}");
$.get("${url}", {}, function (data, status) {
if (status === "success") {
newData = data;
date = new Date(newData.time);
//odtoday.update(newData.today);
//trx.innerHTML = parseInt(newData.trx).toLocaleString("id-ID");
//odytd.update(newData.ytd);
//trxYtd.innerHTML = parseInt(newData.trxYtd).toLocaleString("id-ID");
//ytdTarget.innerHTML = parseInt(newData.ytdTarget).toLocaleString("id-ID");
//ytdPersen.innerHTML = parseFloat(newData.ytdPersen).toFixed(2) + "%";
//time.innerHTML = formatter.format(date);
//time.style.fontWeight = 'bold';
//addData(pieChart, newData.pie);
//trendChart();
rekapRefresh();
rinciRefresh();
} else {
console.log("Request failed.");
}
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 300000);
}).fail(function () {
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 300000);
});
// $().get_realisasi();
// $().get_harian();
// $().get_tabel();
// $().get_series();
}
</script>
</html>
\ No newline at end of file \ No newline at end of file
eispajak/views/templates/pcpd_retribusi.pt
...@@ -222,95 +222,7 @@ ...@@ -222,95 +222,7 @@
</div> </div>
<hr> <hr>
</div> </div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Target dan Realisasi Pendapatan Lain-lain Rekap
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<table class="table table-bordered table-sm" id="tableLraRekap">
<thead>
<tr>
<th class="align-middle text-center">Kode</th>
<th class="align-middle text-center">Jenis</th>
<th class="text-center">Target</th>
<th class="text-center">Realisasi</th>
<th class="text-center">Selisih</th>
<th class="text-center">%</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class=""></td>
<td class=""></td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
</tr>
</tbody>
<tfoot>
<td colspan="2" class="text-right">Jumlah</td>
<td><span id="lra_rekap_target"></span></td>
<td><span id="lra_rekap_realisasi"></span></td>
<td><span id="lra_rekap_sisa"></span></td>
<td><span id="lra_rekap_persen"></span></td>
</tfoot>
</table>
</div>
</div>
</div>
<hr>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Target dan Realisasi Pendapatan Lain-lain
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<table class="table table-bordered table-sm" id="tableLra">
<thead>
<tr>
<th class="align-middle text-center">Kode</th>
<th class="align-middle text-center">Jenis</th>
<th class="text-center">Target</th>
<th class="text-center">Realisasi</th>
<th class="text-center">Selisih</th>
<th class="text-center">%</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class=""></td>
<td class=""></td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
</tr>
</tbody>
<tfoot>
<td colspan="2" class="text-right">Jumlah</td>
<td><span id="lra_target"></span></td>
<td><span id="lra_realisasi"></span></td>
<td><span id="lra_sisa"></span></td>
<td><span id="lra_persen"></span></td>
</tfoot>
</table>
</div>
</div>
</div>
<hr>
</div>
</div> </div>
<metal:js fill-slot="js_files"> <metal:js fill-slot="js_files">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> --> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> -->
...@@ -658,133 +570,7 @@ ...@@ -658,133 +570,7 @@
}); });
} }
var tableLra = $('#tableLra').DataTable(
{
"destroy": true,
"paging": false,
"searching": false,
"info": false,
"autoWidth": false,
"scrollX": true,
"order": [[0, 'asc']],
"columnDefs": [
{ className: 'text-center', width: "50px", targets: [0] },
{ className: 'text-left', targets: [1] },
{ className: 'text-right', width: "100px", targets: [2, 3, 4], render: $.fn.dataTable.render.number('.', ',', 0, '') },
{ className: 'text-right', width: "100px", targets: [5], render: $.fn.dataTable.render.number('.', ',', 2, '') },
]
}
);
var lraRefresh = function () {
tableLra.clear();
var lraUrl = "${url}".replace("/webr/", "/lra/");
$.get(lraUrl, {}, function (data, status) {
if (status === "success") {
console.log(data);
var lra_target = 0;
var lra_realisasi = 0;
var lra_sisa = 0;
var lra_persen = 0;
data.forEach(function (row) {
console.log(row);
tableLra.row.add([
row.kode,
row.nama,
row.target,
row.realisasi,
row.sisa,
row.persen.toFixed(2)
]);
lra_target += row.target;
lra_realisasi += row.realisasi;
lra_sisa += row.sisa;
lra_persen += row.persen;
;
$('#lra_target').html(lra_target.toLocaleString("id-ID"));
$('#lra_realisasi').html(lra_realisasi.toLocaleString("id-ID"));
$('#lra_sisa').html(lra_sisa.toLocaleString("id-ID"));
if (lra_target > 0)
$('#lra_persen').html((lra_realisasi / lra_target * 100).toFixed(2));
else
$('#lra_persen').html("0.00");
tableLra.draw();
});
} else {
console.log("Request failed.");
tableLra.draw();
}
}).fail(function () {
console.log("Request failed.");
tableLra.draw();
});
}
var tableLraRekap = $('#tableLraRekap').DataTable(
{
"destroy": true,
"paging": false,
"searching": false,
"info": false,
"autoWidth": false,
"scrollX": true,
"order": [[0, 'asc']],
"columnDefs": [
{ className: 'text-center', width: "50px", targets: [0] },
{ className: 'text-left', targets: [1] },
{ className: 'text-right', width: "100px", targets: [2, 3, 4], render: $.fn.dataTable.render.number('.', ',', 0, '') },
{ className: 'text-right', width: "100px", targets: [5], render: $.fn.dataTable.render.number('.', ',', 2, '') },
]
}
);
var lraRekapRefresh = function () {
tableLraRekap.clear();
var lraRUrl = "${url}".replace("/webr/", "/lrar/");
$.get(lraRUrl, {}, function (data, status) {
if (status === "success") {
console.log(data);
var lra_rekap_target = 0;
var lra_rekap_realisasi = 0;
var lra_rekap_sisa = 0;
var lra_rekap_persen = 0;
data.forEach(function (row) {
console.log(row);
tableLraRekap.row.add([
row.kode,
row.nama,
row.target,
row.realisasi,
row.sisa,
row.persen.toFixed(2)
]);
lra_rekap_target += row.target;
lra_rekap_realisasi += row.realisasi;
lra_rekap_sisa += row.sisa;
lra_rekap_persen += row.persen;
;
$('#lra_rekap_target').html(lra_rekap_target.toLocaleString("id-ID"));
$('#lra_rekap_realisasi').html(lra_rekap_realisasi.toLocaleString("id-ID"));
$('#lra_rekap_sisa').html(lra_rekap_sisa.toLocaleString("id-ID"));
if (lra_rekap_target > 0)
$('#lra_rekap_persen').html((lra_rekap_realisasi / lra_rekap_target * 100).toFixed(2));
else
$('#lra_rekap_persen').html("0.00");
tableLraRekap.draw();
});
} else {
console.log("Request failed.");
tableLra.draw();
}
}).fail(function () {
console.log("Request failed.");
tableLra.draw();
});
}
$.fn.datarefresh = function () { $.fn.datarefresh = function () {
console.log("data_refresh"); console.log("data_refresh");
...@@ -805,8 +591,6 @@ ...@@ -805,8 +591,6 @@
trendChart(); trendChart();
dinasRefresh(); dinasRefresh();
jenisRefresh(); jenisRefresh();
lraRefresh();
lraRekapRefresh();
} else { } else {
console.log("Request failed."); console.log("Request failed.");
} }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!