cssd-doc/cssd-front
1
0
Fork 0
mirror of https://git.meshkee.com/cssd/cssd-front.git synced 2026-10-13 12:43:16 +03:30
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
sajjad
2023-10-18 01:22:06 -07:00
parent b16da8ab41
commit 98aa208766
157 changed files with 28673 additions and 13308 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Statistics/Chart.vue
+195
View File
@@ -0,0 +1,195 @@
<template>
<div>
<v-form ref="form">
<v-container grid-list-xs>
<material-card color="black" title="Search Result">
<v-layout align-center justify-center wrap class="px-5 my-3">
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="medicalCenters" item-text="name" item-value="id" v-model="form.medicalCenterId" @change="fillUsers" label="Hospital" color="black" class="pa-2"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fa fa-user mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="users" item-text="name" item-value="id" v-model="form.userId" label="User" color="black" class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="testTypes" item-text="name" item-value="id" v-model="form.testTypeId" label="TestType" color="black" class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="result" v-model="form.result" label="Result" color="black" class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-angle-right mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="verify" v-model="form.verify" label="Verify" color="black" class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm4 md4 class="WM-FlexCenter pl-3">
<v-icon class="fas fa-line-chart mr-2 WM-Margin-B-8"></v-icon>
<v-autocomplete :items="type" v-model="form.type" label="Type" color="black" class="py-3 pr-3"></v-autocomplete>
</v-flex>
<v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2"></v-icon>
<v-menu
lazy
:close-on-content-click="true"
transition="v-scale-transition"
offset-y
v-model="fromMenu"
>
<v-text-field
required
slot="activator"
label="FromDate"
color="black"
v-model="form.fromPicker">
</v-text-field>
<v-date-picker
color="pink"
no-title
v-model="form.fromPicker"
:date-format="date => new Date(date).toDateString()"
></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
<v-icon class="far fa-calendar-alt mr-2"></v-icon>
<v-menu
lazy
:close-on-content-click="true"
transition="v-scale-transition"
offset-y
v-model="upToMenu"
>
<v-text-field
required
slot="activator"
label="UpToDate"
color="black"
v-model="form.upToPicker">
</v-text-field>
<v-date-picker
color="pink"
no-title
v-model="form.upToPicker"
:date-format="date => new Date(date).toDateString()"
></v-date-picker>
</v-menu>
</v-flex>
<v-spacer></v-spacer>
<v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-right">
<v-btn
class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
style="padding:10px 60px;"
@click="submitForm"
>
<v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
<span class="black--text">GO</span>
</v-btn>
</v-flex>
</v-layout>
<v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult">
<v-divider></v-divider>
</v-layout>
</material-card>
</v-container>
</v-form>
<div v-if="chart" class="small">
<pie-chart v-if="form.type === 'PieChart'" :chart-data="datacollection"></pie-chart>
<bar-chart v-else :chart-data="datacollection"></bar-chart>
</div>
</div>
</template>
<script>
import BarChart from "@/plugins/chart/BarChart.js";
import PieChart from "@/plugins/chart/PieChart.js";
import { ApiService } from "@/services";
import { urls } from "@/config/urls";
export default {
components: {
BarChart,
PieChart
},
data() {
return {
datacollection: null,
fromMenu: '',
upToMenu: '',
verify: ['Verified', 'NotVerified'],
result: ['Accept', 'Failed'],
type: ['BarChart', 'PieChart'],
users: [],
medicalCenters: [],
testTypes: [],
form: {
medicalCenterId: null,
userId: null,
testTypeId: null,
result: null,
verify: null,
type: 'PieChart',
fromPicker: '',
upToPicker: '',
},
chart: false
};
},
created() {
this.load();
},
methods: {
fillData(options) {
this.datacollection = {
labels: options.labels,
// labels: [this.getRandomInt(), this.getRandomInt()],
datasets: [
{
label: "Data One",
backgroundColor: ["#f87979", "#ccc"],
data: options.data,
// data: [this.getRandomInt(), this.getRandomInt()],
}
]
};
},
async load() {
const result = await ApiService.get(urls.listFilterItemsTestResult);
if (result && result.status == 200) {
this.medicalCenters = result.data.data.MedicalCenters;
this.testTypes = result.data.data.TestTypes;
}
},
async fillUsers() {
const result = await ApiService.get(urls.listOpertorMedicalCenter(this.form.medicalCenterId));
if (result && result.status == 200) {
this.users = result.data.data.users;
}
},
async submitForm() {
const result = await ApiService.post(urls.statistics, this.form);
if (result && result.status == 200) {
this.fillData(result.data.data);
this.chart = true;
}
},
}
};
</script>
<style>
.small {
max-width: 600px;
margin: 150px auto;
}
.v-btn--floating {
padding: 0!important;
}
.theme--light.v-btn.v-btn--flat {
color: rgba(0,0,0,.87)!important;
}
.v-btn--floating, .v-btn--icon:before {
border-radius: 50%!important;
}
</style>