clinic-v2
/
web
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dev

This commit is contained in:
牛子源 2025-04-24 10:07:20 +08:00
parent 5115886b2f
commit 1a3101a4d7
1 changed files with 0 additions and 682 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

682
src/views/home/111.vue
View File

@ -1,682 +0,0 @@
<template>
<div class="container-wrapper">
<div class="left">
<div class="yuJin">
<Panel title="库存预警" class="kuCun">
<template #tools>
<el-button type="primary" size="small" @click="openInventoryWarnDetail">查看详情</el-button>
</template>
<div style="padding: 0 24px 24px">
<div class="box">
<!-- <div class="item" style="margin-right: 8px">-->
<!-- <img class="image" src="/static/images/home/1-danger.png" alt=""/>-->
<!-- <div class="item-content">-->
<!-- <el-tooltip-->
<!-- effect="dark"-->
<!-- :content="inventoryWarnList[0].name"-->
<!-- placement="bottom-start"-->
<!-- >-->
<!-- <div class="item-name">{{ inventoryWarnList[0].name }}</div>-->
<!-- </el-tooltip>-->
<!-- <div class="item-name-font">剩余库存值</div>-->
<!-- </div>-->
<!-- <div class="item-right">-->
<!-- <div class="wholeNumber">{{ inventoryWarnList[0].inventoryWholeNumber }}-->
<!-- <div class="item-right-num">{{ inventoryWarnList[0].packagingUnit }}</div>-->
<!-- </div>-->
<!-- <div class="wholeNumber" v-if="inventoryWarnList[0].inventoryFragmentNumber>0">{{ inventoryWarnList[0].inventoryFragmentNumber }}-->
<!-- <div class="item-right-num" v-if="inventoryWarnList[0].inventoryFragmentNumber>0">{{ inventoryWarnList[0].minPackagingUnit }}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</Panel>
<Panel title="效期预警" class="xiaoQi">
<template #tools>
<el-button type="primary" size="small" @click="openExpireWarnDetail">查看详情</el-button>
</template>
<div style="padding: 0 24px 24px">
<div class="box">
<div class="item" style="margin-right: 8px" v-for="item in expireDateWarningList">
<img class="image" src="/static/images/home/danger.png" alt="">
<div class="item-content">
<el-tooltip
effect="dark"
:content="item.name"
placement="bottom-start"
>
<div class="item-name">{{ item.name }}</div>
</el-tooltip>
<div class="item-name-font">
<span>{{ item.whole_number }}{{ item.packaging_unit }}</span>
<span v-if="item.fragment_number>0">{{ item.fragment_number }}{{ item.min_packaging_unit }}</span>
</div>
</div>
<div class="item-right">
<div v-if="item.remaining_days<0">已过期<span class="item-right-num">{{
Math.abs(item.remaining_days)
}}</span>天
</div>
<div v-else>剩余<span class="item-right-num">{{ Math.abs(item.remaining_days) }}</span>天</div>
</div>
</div>
<div v-show="expireDateWarningList.length <3" class="item"
style="margin-top: 8px;margin-right: 8px;box-shadow:none"></div>
<div v-show="expireDateWarningList.length <4" class="item" style="margin-top: 8px;box-shadow:none"></div>
</div>
</div>
</Panel>
</div>
<div class="jinYing">
<Panel title="经营概况">
<div class="tu" ref="echart" style="height: 100%;width: 100%"></div>
</Panel>
</div>
<Panel title="支付明细" class="detail-price">
<div class="detail-price-content">
<div class="detail-price-content-item" v-for="(item,index) in payTypeRevenue"
:style="'background:'+item.background">
<img class="detail-price-content-item-image" :src="`/static/images/home/${index+1}.png`" :alt="item.name">
<div class="detail-price-content-item-text">
<div class="detail-price-content-item-text-name">{{ item.name }}</div>
<div class="detail-price-content-item-text-price">￥<span class="price">{{ item.totalRevenue }}</span>
</div>
</div>
</div>
</div>
</Panel>
</div>
<div class="right">
<Panel title="药房基本信息" class="info">
<div class="info-content">
<img class="image" src="/static/images/home/app-head.png" alt="app">
<div class="app_info-content-text">
<el-tooltip
effect="dark"
:content="'仁德大药房连锁有限公司'"
placement="bottom-start"
>
<div class="app_info-title">仁德大药房连锁有限公司</div>
</el-tooltip>
<div>软件版本：V2.5.1</div>
<div style="margin: 10px 0">授权到期：2024-12-31</div>
<div>版本类型：专业版</div>
</div>
</div>
</Panel>
<Panel title="客服支持" class="service">
<div class="service-content">
<img class="image" src="/static/images/home/qr-code.png" alt="">
<div class="service-text">
<div style="margin-bottom: 20px">服务时间：09:00-18:00</div>
<div>服务热线：400-999888</div>
</div>
</div>
</Panel>
<Panel title="系统通知" class="system-notification">
<template #tools>
<el-button type="primary" size="small">查看详情</el-button>
</template>
<div class="system-notification-content">
<el-scrollbar>
<div class="system-notification-item">
<div class="system-notification-item-top">
<span class="system-notification-item-top-title">系统版本更新</span>
<span>2024-04-01</span>
</div>
<div class="system-notification-item-bottom">优化库存管理模块，新增批次</div>
</div>
<div class="system-notification-item">
<div class="system-notification-item-top">
<span class="system-notification-item-top-title">系统版本更新</span>
<span>2024-04-01</span>
</div>
<div class="system-notification-item-bottom">优化库存管理模块，新增批次</div>
</div>
</el-scrollbar>
</div>
</Panel>
<div class="banner">
<el-carousel style="height: 100%">
<el-carousel-item v-for="(item,index) in imageList" :key="index">
<img class="image" :src="item.image" alt="">
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
<ExpireWarnDetail ref="expireWarnDetailRef"></ExpireWarnDetail>
<InventoryWarnDetail ref="inventoryWarnDetailRef"></InventoryWarnDetail>
</template>
<script setup lang="ts">
import {ref, onMounted, onUnmounted, nextTick} from "vue"
import * as echarts from 'echarts';
import {post} from "@/utils/request.ts";
import {getThisWeek, getDaysBetweenDates} from "@/utils/dateUtils.ts";
import InventoryWarnDetail from "@/components/home/InventoryWarnDetail.vue";
import ExpireWarnDetail from "@/components/home/ExpireWarnDetail.vue";
import Panel from "@/components/common/Panel.vue";
const echart = ref<HTMLElement | null>(null)
let myChart: echarts.ECharts | null = null;
const dateList = 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 vipData = ref([120, 132, 101, 134, 90, 230, 210])
const commonData = ref([220, 182, 191, 234, 290, 330, 310])
const initEcharts = (dateList: any[], vipData: any, commonData: any) => {
if (myChart) {
myChart.dispose();
}
myChart = echarts.init(echart.value);
myChart.setOption(
{
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['会员', '普通',]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true,
data: dateList
},
yAxis: {
type: 'value'
},
series: [
{
name: '会员',
type: 'line',
stack: 'Total',
data: vipData
},
{
name: '普通',
type: 'line',
stack: 'Total',
data: commonData
}
]
}
);
}
onMounted(() => {
initEcharts(dateList.value, vipData.value, commonData.value)
getInventoryWarning()
getExpiryDateWarning()
getRevenueOverview()
getPersonPayOverview()
window.addEventListener('resize', handleResize);
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
});
const handleResize = () => {
if (myChart) {
myChart.resize();
}
};
const imageList = [
{
image: '/static/images/home/banner.png'
},
{
image: '/static/images/home/banner1.png'
},
{
image: '/static/images/home/banner2.png'
},
{
image: '/static/images/home/banner3.png'
}
]
const inventoryWarnListSrc = ref<any>([]);
const inventoryWarnList = ref<any>([]);
const expireDateWarningListSrc = ref<any>([]);
const expireDateWarningList = ref<any>([]);
const payTypeRevenue = ref<any>([
{
name: '医保支付',
totalRevenue: 0,
background: '#F0F4FD'
},
{
name: '微信支付',
totalRevenue: 0,
background: '#ECF8FE'
},
{
name: '支付宝',
totalRevenue: 0,
background: '#FFF5EC'
},
{
name: '现金支付',
totalRevenue: 0,
background: '#FFEEEE'
},
{
name: '其他支付',
totalRevenue: 0,
background: '#E5F9FF'
}
]);
const getInventoryWarning = () => {
post("statistics/numberEarlyWarning").then((res: any) => {
inventoryWarnListSrc.value = res
expireDateWarningList.value = res.slice(0, 3)
})
}
const getExpiryDateWarning = () => {
post("statistics/expiryDateWarning").then((res: any) => {
expireDateWarningListSrc.value = res
expireDateWarningList.value = res.slice(0, 3)
console.log(expireDateWarningList)
})
}
const getRevenueOverview = () => {
const thisWeek = getThisWeek();
post("statistics/getRevenueOverview", {beginTime: thisWeek.start, endTime: thisWeek.end}).then((res: any) => {
if (res.payTypeRevenue.length === 0) return
payTypeRevenue.value = res.payTypeRevenue
})
}
const getPersonPayOverview = () => {
const thisWeek = getThisWeek();
post("statistics/getPersonPayOverview", {beginTime: thisWeek.start, endTime: thisWeek.end}).then((res: any) => {
dateList.value = res.dateList
vipData.value = res.vipPrice
commonData.value = res.commonPrice
// initEcharts(dateList.value, vipData.value, commonData.value)
})
}
const expireWarnDetailRef = ref()
const openExpireWarnDetail = () => {
nextTick(() => {
expireWarnDetailRef.value.init(expireDateWarningListSrc.value)
})
}
const inventoryWarnDetailRef = ref()
const openInventoryWarnDetail = () => {
nextTick(() => {
inventoryWarnDetailRef.value.init(inventoryWarnListSrc.value)
})
}
</script>
<style scoped lang="scss">
@use "@/assets/scss/base";
.container-wrapper {
display: flex;
padding: 24px;
background: #F1F5FB;
.left {
flex: 1;
margin-right: 24px;
display: flex;
flex-direction: column;
.yuJin {
height: 208px;
display: flex;
.kuCun {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
margin-right: 24px;
.box {
display: flex;
flex-wrap: wrap;
.item {
height: 58px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: space-between;
flex: 1 1 calc(50% - 8px); //每行显示2个 item，每个 item 占据 33.33% 减去间距
.image {
width: 34px;
height: 34px;
margin: 0 8px 0 16px;
}
.item-content {
flex: 1;
.item-name {
font-weight: 400;
font-size: 14px;
color: #333333;
font-style: normal;
}
.item-name-font {
font-weight: 400;
font-size: 12px;
color: #999999;
font-style: normal;
}
}
.item-right {
width: 70px;
display: flex;
margin-right: 16px;
font-weight: bold;
font-style: normal;
font-size: 28px;
color: #FF282E;
align-items: flex-end;
.wholeNumber {
display: flex;
align-items: flex-end;
.item-right-num {
font-weight: 400;
font-size: 10px;
color: #333333;
font-style: normal;
padding-bottom: 3px;
}
}
}
&:nth-child(2n) {
margin-right: 0 !important;
}
&:nth-child(3) {
margin-top: 8px !important;
}
&:nth-child(4) {
margin-top: 8px !important;
}
}
}
}
.xiaoQi {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
.box {
display: flex;
flex-wrap: wrap;
.item {
height: 58px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
.image {
width: 34px;
height: 34px;
margin: 0 8px 0 16px;
}
.item-content {
flex: 1;
.item-name {
font-weight: 400;
font-size: 14px;
color: #333333;
font-style: normal;
}
}
.item-right {
width: 56px;
margin-right: 16px;
font-weight: 400;
font-size: 10px;
color: #333333;
font-style: normal;
.item-right-num {
font-weight: bold;
font-size: 28px;
color: #FF282E;
font-style: normal;
}
}
&:nth-child(2n) {
margin-right: 0 !important;
}
&:nth-child(3) {
margin-top: 8px !important;
}
&:nth-child(4) {
margin-top: 8px !important;
}
}
}
}
}
.jinYing {
flex: 1;
margin: 24px 0;
background: #fff;
border-radius: 8px 8px 8px 8px;
}
.detail-price {
height: 194px;
&-content {
padding: 0 24px;
display: flex;
&-item {
flex: 1;
height: 110px;
border-radius: 32px;
margin-right: 16px;
display: flex;
align-items: center;
&:last-child {
margin-right: 0;
}
&-image {
width: 40px;
height: 40px;
margin: 0 16px 0 24px;
}
&-text {
font-weight: 500;
font-size: 16px;
color: #333333;
font-style: normal;
margin-right: 24px;
&-price {
font-weight: 400;
font-size: 14px;
.price {
font-weight: bold;
font-size: 32px;
}
}
}
}
}
}
}
.right {
width: 388px;
display: flex;
flex-direction: column;
.info {
height: 208px;
.info-content {
display: flex;
.image {
width: 88px;
height: 88px;
margin: 0 24px;
}
.app_info-content-text {
font-weight: 500;
font-size: 16px;
color: #333333;
font-style: normal;
.app_info-title {
max-width: 220px;
font-weight: bold;
font-size: 20px;
margin-bottom: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.service {
height: 170px;
margin: 24px 0;
padding-bottom: 24px;
.service-content {
display: flex;
.image {
width: 88px;
height: 88px;
margin: 0 24px;
}
.service-text {
font-weight: 500;
font-size: 16px;
color: #333333;
font-style: normal;
display: flex;
flex-direction: column;
justify-content: center;
}
}
}
.system-notification {
flex: 1;
.system-notification-content {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
padding-bottom: 18px;
.system-notification-item {
height: 80px;
width: 100%;
border-bottom: 1px solid #EAEAEC;
display: flex;
flex-direction: column;
justify-content: center;
font-weight: 500;
font-size: 14px;
color: #999999;
font-style: normal;
.system-notification-item-top {
padding: 0 24px;
display: flex;
justify-content: space-between;
&-title {
font-size: 18px;
color: #333333;
}
}
.system-notification-item-bottom {
padding: 0 24px;
}
}
}
}
.banner {
height: 154px;
background: #FFFFFF;
border-radius: 8px 8px 8px 8px;
margin-top: 24px;
.image {
width: 100%;
height: 100%;
border-radius: 8px 8px 8px 8px;
}
}
}
}
@media (max-width: 1920px) {
.item-name {
max-width: 70px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.container-wrapper {
overflow: auto; /* 或者 overflow-y: auto; 如果你只想在垂直方向上显示滚动条 */
}
}
</style>