dev
This commit is contained in:
parent
4ab0ccbf17
commit
e34f2712e4
|
|
@ -3,7 +3,7 @@ import Panel from '../common/Panel.vue';
|
|||
import {defineEmits, defineModel,defineProps} from 'vue'
|
||||
|
||||
const {status}=defineProps(['status'])
|
||||
const emit = defineEmits(['save','deleteItem','openCheckOut',"openSettlement"]);
|
||||
const emit = defineEmits(['save','deleteItem','openCheckOut',"openSettlement","print","refund"]);
|
||||
const save = () => {
|
||||
emit('save');
|
||||
};
|
||||
|
|
@ -28,10 +28,6 @@ const openSettlement =()=>{
|
|||
<span class="default-btn" @click="openSettlement" style="margin-left: 24px">收费</span>
|
||||
|
||||
</div>
|
||||
<div class="btn-group" v-else>
|
||||
<span class="default-btn" @click="">打印</span>
|
||||
<span class="default-btn" @click="" style="margin-left: 24px">退款</span>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -79,13 +79,56 @@
|
|||
<div class="statistics-chart">
|
||||
<div class="business-map">
|
||||
<Panel title="营业收入趋势">
|
||||
<div v-if="data.payTypeRevenue.length" ref="chartRef" style="width: 100%;height: 100%"></div>
|
||||
<template #tools>
|
||||
<div class="time">
|
||||
<div class="time_box"
|
||||
v-for="(item,index) in weekAndMonth"
|
||||
:key="index"
|
||||
:class="{active:curIncomeDate?.name==item.name}"
|
||||
@click="changeIncomeDate(item)"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<el-date-picker
|
||||
v-model="selectIncomeDate"
|
||||
type="daterange"
|
||||
@change="changeSelectIncomeDate"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
style="margin-left: 24px"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="data.payTypeRevenue.length" id="incomeChart" ref="chartRef" style="width: 100%;height: 100%"></div>
|
||||
<el-empty v-else description="暂无数据"/>
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="consumption-map">
|
||||
<Panel title="消费人次趋势">
|
||||
<div v-if="data.payTypeRevenue.length" ref="mainRef" style="width: 100%;height: 100%"></div>
|
||||
<template #tools>
|
||||
<div class="time">
|
||||
<div class="time_box"
|
||||
v-for="(item,index) in weekAndMonth"
|
||||
:key="index"
|
||||
:class="{active:curCountDate?.name==item.name}"
|
||||
@click="changeCountDate(item)"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
<el-date-picker
|
||||
v-model="selectCountDate"
|
||||
type="daterange"
|
||||
@change="changeSelectCountDate"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
style="margin-left: 24px"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="data.payTypeRevenue.length" id="countChart" ref="mainRef" style="width: 100%;height: 100%"></div>
|
||||
<el-empty v-else description="暂无数据"/>
|
||||
</Panel>
|
||||
</div>
|
||||
|
|
@ -128,6 +171,10 @@ const dataSelector = [
|
|||
{name: '本周', func: getThisWeek()},
|
||||
{name: '本月', func: getThisMonth()},
|
||||
]
|
||||
const weekAndMonth = [
|
||||
{name: '本周', func: getThisWeek()},
|
||||
{name: '本月', func: getThisMonth()},
|
||||
]
|
||||
const formatDate = (dateString: any) => {
|
||||
const date = new Date(dateString);
|
||||
const year = date.getFullYear();
|
||||
|
|
@ -142,6 +189,8 @@ const chartRef = ref<HTMLElement | null>(null)
|
|||
const mainRef = ref<HTMLElement | null>(null)
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
initIncomeChart()
|
||||
initCountChart()
|
||||
})
|
||||
const getDateRange = () => {
|
||||
let beginTime = ''
|
||||
|
|
@ -268,7 +317,7 @@ const initChart = () => {
|
|||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['患者', '普通',]
|
||||
data: ['普通',]
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
|
|
@ -279,33 +328,17 @@ const initChart = () => {
|
|||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: [
|
||||
'2024-04-01',
|
||||
'2024-03-30',
|
||||
'2024-03-26',
|
||||
'2024-03-22',
|
||||
'2024-03-18',
|
||||
'2024-03-14',
|
||||
'2024-03-10',
|
||||
'2024-03-06',
|
||||
'2024-03-02',
|
||||
]
|
||||
data: incomeDateList.value
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '患者',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '普通',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
data: incomeCommonData.value
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -319,14 +352,14 @@ const initChart = () => {
|
|||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
|
||||
data: countDateList.value
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
data: countDataList.value
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
@ -349,6 +382,134 @@ const changeCheckDate = (dateItem: any) => {
|
|||
selectDate.value = null
|
||||
initChart()
|
||||
}
|
||||
const incomeDateList = ref([
|
||||
'2024-04-01',
|
||||
'2024-03-30',
|
||||
'2024-03-26',
|
||||
'2024-03-22',
|
||||
'2024-03-18',
|
||||
])
|
||||
const incomeCommonData = ref([220, 182, 191, 234, 290, 330, 310]);
|
||||
const initIncomeChart = () => {
|
||||
let date = {start: null, end: null}
|
||||
if (curIncomeDate.value) {
|
||||
date = curIncomeDate.value.func
|
||||
}
|
||||
if (selectIncomeDate.value) {
|
||||
date.start = selectIncomeDate.value[0]
|
||||
date.end = selectIncomeDate.value[1]
|
||||
}
|
||||
|
||||
post("statistics/getPersonPayOverview", {beginTime: date.start, endTime: date.end}).then((res: any) => {
|
||||
incomeDateList.value = res.dateList
|
||||
incomeCommonData.value = res.commonPrice
|
||||
const newChart = echarts.init(document.getElementById('incomeChart'));
|
||||
newChart.setOption({
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: incomeDateList.value
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '普通',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: incomeCommonData.value
|
||||
}
|
||||
]
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
const curIncomeDate = ref<any>(weekAndMonth[0]);
|
||||
const selectIncomeDate = ref();
|
||||
const changeIncomeDate = (dateItem: any) => {
|
||||
curIncomeDate.value = dateItem
|
||||
selectIncomeDate.value = null
|
||||
initIncomeChart()
|
||||
|
||||
}
|
||||
|
||||
const changeSelectIncomeDate = (date: any) => {
|
||||
curIncomeDate.value = null
|
||||
selectIncomeDate.value = date
|
||||
let temp = formatDateArray(date)
|
||||
selectIncomeDate.value[0] = temp[0]
|
||||
selectIncomeDate.value[1] = getEndOfDay(temp[1])
|
||||
|
||||
initIncomeChart()
|
||||
}
|
||||
|
||||
|
||||
|
||||
const curCountDate = ref<any>(weekAndMonth[0]);
|
||||
const selectCountDate = ref();
|
||||
const changeCountDate = (dateItem: any) => {
|
||||
curCountDate.value = dateItem
|
||||
selectCountDate.value = null
|
||||
initCountChart()
|
||||
|
||||
}
|
||||
const countDateList = ref([
|
||||
'2024-04-01',
|
||||
'2024-03-30',
|
||||
'2024-03-26',
|
||||
'2024-03-22',
|
||||
'2024-03-18',
|
||||
'2024-03-14',
|
||||
'2024-03-10',
|
||||
'2024-03-06',
|
||||
'2024-03-02',
|
||||
])
|
||||
const countDataList = ref([5, 20, 36, 10, 10, 20])
|
||||
const changeSelectCountDate = (date: any) => {
|
||||
curCountDate.value = null
|
||||
selectCountDate.value = date
|
||||
let temp = formatDateArray(date)
|
||||
selectCountDate.value[0] = temp[0]
|
||||
selectCountDate.value[1] = getEndOfDay(temp[1])
|
||||
|
||||
initCountChart()
|
||||
}
|
||||
const initCountChart = () => {
|
||||
let date = {start: null, end: null}
|
||||
if (curCountDate.value) {
|
||||
date = curCountDate.value.func
|
||||
}
|
||||
if (selectCountDate.value) {
|
||||
date.start = selectCountDate.value[0]
|
||||
date.end = selectCountDate.value[1]
|
||||
}
|
||||
|
||||
post("statistics/getSalesVolumeOverview", {beginTime: date.start, endTime: date.end}).then((res: any) => {
|
||||
countDateList.value = res.dateList
|
||||
countDataList.value = res.countList
|
||||
const newChart = echarts.init(document.getElementById('countChart'));
|
||||
newChart.setOption({
|
||||
|
||||
xAxis: {
|
||||
data: countDateList.value
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
data: countDataList.value
|
||||
}
|
||||
]
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -365,6 +526,7 @@ const changeCheckDate = (dateItem: any) => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #409EFF;
|
||||
|
|
@ -372,10 +534,12 @@ const changeCheckDate = (dateItem: any) => {
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #fff !important;
|
||||
background: #409EFF;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -55,8 +55,13 @@
|
|||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="bottom">
|
||||
<TotalPrice v-model="formData.totalPrice" @save="charge" :status="formData.status ==0" @openSettlement="charge"
|
||||
@openCheckOut="openCheckoutDetail(formData.goodsDetail,formData.patientRegistration.psnNo)"></TotalPrice>
|
||||
<TotalPrice v-model="formData.totalPrice"
|
||||
@save="charge"
|
||||
:status="formData.status ==0"
|
||||
@openSettlement="charge"
|
||||
@openCheckOut="openCheckoutDetail(formData.goodsDetail,formData.patientRegistration.psnNo)"
|
||||
|
||||
></TotalPrice>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
|
|
@ -338,6 +343,7 @@ const getStatus = (status: any) => {
|
|||
patientRegistration: {}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
Loading…
Reference in New Issue