dev

src/components/charge/TotalPrice.vue

@@ -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>

src/components/statistics/over/Revenue.vue

@@ -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: [
+              data: incomeDateList.value
-                '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',
-              ]
             },
             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;

src/views/charge/index.vue

@@ -55,8 +55,13 @@
         </div>
       </el-scrollbar>
       <div class="bottom">
-        <TotalPrice v-model="formData.totalPrice" @save="charge" :status="formData.status ==0" @openSettlement="charge"
+        <TotalPrice v-model="formData.totalPrice"
-                    @openCheckOut="openCheckoutDetail(formData.goodsDetail,formData.patientRegistration.psnNo)"></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">