159 lines
5.7 KiB
Vue
159 lines
5.7 KiB
Vue
<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> |