Initial import
This commit is contained in:
sas.fajri
32
one-ui/system/one-replication/components/oneChart.vue
Normal file
32
one-ui/system/one-replication/components/oneChart.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="example">
|
||||
<apexcharts width="500" height="350" type="bar" :options="chartOptions" :series="series"></apexcharts>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from './components/oneChart.vue'
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
components: {
|
||||
apexcharts: VueApexCharts,
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
chartOptions: {
|
||||
chart: {
|
||||
id: 'basic-bar'
|
||||
},
|
||||
xaxis: {
|
||||
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'series-1',
|
||||
data: [30, 40, 45, 50, 49, 60, 70, 91]
|
||||
}]
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
159
one-ui/system/one-replication/components/oneSales.vue
Normal file
159
one-ui/system/one-replication/components/oneSales.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<v-layout wrap>
|
||||
<v-flex xs12 and-down>
|
||||
<v-layout row>
|
||||
<v-flex sm12 and-down>
|
||||
<v-card color="#C8DFC3">
|
||||
<v-card-title class="pa-1" style="background:#3F848F" >
|
||||
|
||||
</v-card-title>
|
||||
<v-card-text class="pt-1">
|
||||
<v-layout row>
|
||||
<v-flex class="text-xs-left" sm6 and-down>
|
||||
<p class="mb-0 caption mono" style="color:#616161">PASIEN</p>
|
||||
<p class="mb-1 text--primary"><span class="display-1 font-weight-black">3.500</span> <span class="subtitle-2 font-weight-light">org</span></p>
|
||||
</v-flex>
|
||||
<v-flex class="text-xs-right" sm6 and-down>
|
||||
<p class="mb-0 caption mono" style="color:#616161">PENJUALAN</p>
|
||||
<p class="mb-1 text--primary"><span class="display-1 font-weight-black">1.500</span> <span class="subtitle-2 font-weight-light">jt</span></p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider style="border-color:#0D7F8B"></v-divider>
|
||||
<v-layout mt-2 align-center row>
|
||||
<v-flex sm6 d-flex>
|
||||
<p class="mb-0">bandung raya</p>
|
||||
</v-flex>
|
||||
<v-flex sm6 class="text-xs-right" d-flex>
|
||||
<p class="mb-0">april 2020</p>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout row>
|
||||
<v-flex sm12 and-down>
|
||||
<v-card color="#C8DFC3">
|
||||
<v-card-title class="pa-1" style="background:#3F848F" >
|
||||
|
||||
</v-card-title>
|
||||
<v-card-text class="pt-1">
|
||||
<v-layout row>
|
||||
<v-flex class="text-xs-left" sm12 and-down>
|
||||
<div id="chart">
|
||||
<apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.searchbox .v-input.v-text-field .v-input__slot {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.searchbox .v-btn {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
table.v-table tbody td,
|
||||
table.v-table tbody th {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
table.v-table thead tr {
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.Promise ||
|
||||
document.write(
|
||||
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
|
||||
)
|
||||
window.Promise ||
|
||||
document.write(
|
||||
'<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
|
||||
)
|
||||
window.Promise ||
|
||||
document.write(
|
||||
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
|
||||
)
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
|
||||
<script>
|
||||
|
||||
module.exports = {
|
||||
|
||||
components: {
|
||||
'apexchart': VueApexCharts,
|
||||
'one-dialog-info': httpVueLoader('../../../common/oneDialogInfo.vue'),
|
||||
'one-dialog-alert': httpVueLoader('../../../common/oneDialogAlert.vue')
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
reHTMLAddress(xxaddresses){
|
||||
var rtn = ''
|
||||
if(xxaddresses && xxaddresses !== ''){
|
||||
var peraddress = xxaddresses.split("+")
|
||||
peraddress.forEach(function(entry) {
|
||||
var perpart = entry.split("^")
|
||||
rtn += "<p class='mb-0 font-weight-black' style='font-size:11px'>"+perpart[0].toUpperCase()+"</p>"
|
||||
rtn += "<p class='mb-1 caption mono'>"+perpart[1]+"</p>"
|
||||
})
|
||||
}
|
||||
|
||||
return rtn
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
in_saving: {
|
||||
get() {
|
||||
return this.$store.state.sales.in_saving
|
||||
},
|
||||
set(val) {
|
||||
this.$store.commit("sales/update_in_saving", val)
|
||||
}
|
||||
}
|
||||
},
|
||||
data: {
|
||||
|
||||
series: [{
|
||||
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
|
||||
}],
|
||||
chartOptions: {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
|
||||
'United States', 'China', 'Germany'
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user