首页添加预警信息、每日类型占比
This commit is contained in:
+218
-5
@@ -64,6 +64,40 @@
|
||||
<canvas canvas-id="canvasColumn" id="canvasColumn" disable-scroll=true class="charts" @touchstart="touchColumn"></canvas>
|
||||
<image :src="imgSrc2" style="width: 750upx;height: 500upx;"></image>
|
||||
</view>
|
||||
|
||||
<!-- 预警信息模块 -->
|
||||
<view class="section-header">
|
||||
<view class="header-icon">⚠️</view>
|
||||
<view class="header-title">预警信息</view>
|
||||
</view>
|
||||
<view class="warning-stats">
|
||||
<view class="warning-card warning-today">
|
||||
<view class="warning-icon">🔔</view>
|
||||
<view class="warning-value">{{warningInfo.today_warning || 0}}</view>
|
||||
<view class="warning-label">今日预警数</view>
|
||||
</view>
|
||||
<view class="warning-card warning-history">
|
||||
<view class="warning-icon">📋</view>
|
||||
<view class="warning-value">{{warningInfo.history_warning || 0}}</view>
|
||||
<view class="warning-label">历史预警数</view>
|
||||
</view>
|
||||
<view class="warning-card warning-handled">
|
||||
<view class="warning-icon">✅</view>
|
||||
<view class="warning-value">{{warningInfo.handled_warning || 0}}</view>
|
||||
<view class="warning-label">已处理预警数</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 每日类型占比模块 -->
|
||||
<view class="section-header">
|
||||
<view class="header-icon">📊</view>
|
||||
<view class="header-title">每日类型占比</view>
|
||||
</view>
|
||||
<view class="qiun-charts">
|
||||
<canvas canvas-id="canvasPie" id="canvasPie" disable-scroll=true class="charts" @touchstart="touchPie"></canvas>
|
||||
<image :src="imgSrc3" style="width: 750upx;height: 500upx;"></image>
|
||||
</view>
|
||||
|
||||
<view class="cu-tabbar-height"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -76,6 +110,7 @@
|
||||
var _self;
|
||||
var canvaLineA=null;
|
||||
var canvaColumn=null;
|
||||
var canvaPie=null;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -93,8 +128,10 @@
|
||||
phone: '',
|
||||
hospitalBasisInfo: [],
|
||||
stockBasisInfo: [],
|
||||
warningInfo: [],
|
||||
imgSrc: '',
|
||||
imgSrc2: ''
|
||||
imgSrc2: '',
|
||||
imgSrc3: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -128,12 +165,14 @@
|
||||
this.getHospitalBasisInfo();
|
||||
this.getStockBasisInfo();
|
||||
this.getDepartmentRankList();
|
||||
this.getWarningInfo();
|
||||
this.getDailyTypeRatio();
|
||||
},
|
||||
methods: {
|
||||
getServerData(){
|
||||
let that = this;
|
||||
uni.request({
|
||||
url: 'https://lekapi.opmonitor.com/?c=app_api&a=getMedicalData7Days',
|
||||
url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getMedicalData7Days',
|
||||
data:{
|
||||
hospital: that.hospital,
|
||||
sortHospital: that.sortHospital,
|
||||
@@ -232,7 +271,7 @@
|
||||
getHospitalBasisInfo(){
|
||||
let that = this;
|
||||
uni.request({
|
||||
url: 'https://lekapi.opmonitor.com/?c=app_api&a=getHospitalBasisInfo',
|
||||
url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getHospitalBasisInfo',
|
||||
data: {hospital: that.hospital,sortHospital: that.sortHospital,department: that.department,duty: that.duty},
|
||||
header: {
|
||||
'Content-type': 'application/json'
|
||||
@@ -249,7 +288,7 @@
|
||||
getStockBasisInfo(){
|
||||
let that = this;
|
||||
uni.request({
|
||||
url: 'https://lekapi.opmonitor.com/?c=app_api&a=getStockBasisInfo',
|
||||
url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getStockBasisInfo',
|
||||
data: {hospital: that.hospital, sortHospital: that.sortHospital, department: that.department, duty: that.duty},
|
||||
header: {
|
||||
'Content-type': 'application/json'
|
||||
@@ -266,7 +305,7 @@
|
||||
getDepartmentRankList(){
|
||||
let that = this;
|
||||
uni.request({
|
||||
url: "https://lekapi.opmonitor.com/?c=app_api&a=getDepartmentRankList",
|
||||
url: "https://mtx.mini.opmonitor.com/?c=app_api&a=getDepartmentRankList",
|
||||
data:{
|
||||
hospital: that.hospital,
|
||||
sortHospital: that.sortHospital,
|
||||
@@ -368,6 +407,104 @@
|
||||
uni.navigateTo({
|
||||
url: "/pages/main/inventory_month"
|
||||
})
|
||||
},
|
||||
// 获取预警信息
|
||||
getWarningInfo(){
|
||||
let that = this;
|
||||
uni.request({
|
||||
url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getWarningInfo',
|
||||
data: {hospital: that.hospital, sortHospital: that.sortHospital, department: that.department, duty: that.duty},
|
||||
header: {
|
||||
'Content-type': 'application/json'
|
||||
},
|
||||
success: function(res){
|
||||
that.warningInfo = res.data.data || {}
|
||||
},
|
||||
fail: () => {
|
||||
console.info('获取预警信息失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取每日类型占比
|
||||
getDailyTypeRatio(){
|
||||
let that = this;
|
||||
uni.request({
|
||||
url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getDailyTypeRatio',
|
||||
data: {hospital: that.hospital, sortHospital: that.sortHospital, department: that.department, duty: that.duty},
|
||||
header: {
|
||||
'Content-type': 'application/json'
|
||||
},
|
||||
success: function(res) {
|
||||
let Pie={series:[]};
|
||||
Pie.series=res.data.data.series;
|
||||
_self.showPie("canvasPie",Pie);
|
||||
},
|
||||
fail: () => {
|
||||
_self.tips="网络错误，小程序端请检查合法域名";
|
||||
}
|
||||
})
|
||||
},
|
||||
showPie(canvasId,chartData){
|
||||
canvaPie=new uCharts({
|
||||
$this:_self,
|
||||
canvasId: canvasId,
|
||||
type: 'pie',
|
||||
colors:['#4a90e2', '#1abc9c', '#e67e22', '#9b59b6', '#e74c3c'],
|
||||
fontSize:11,
|
||||
padding:[15,15,0,15],
|
||||
legend:{
|
||||
show:true,
|
||||
padding:5,
|
||||
lineHeight:11,
|
||||
margin:0,
|
||||
position:'bottom',
|
||||
float:'center'
|
||||
},
|
||||
dataLabel:true,
|
||||
background:'#FFFFFF',
|
||||
pixelRatio:_self.pixelRatio,
|
||||
series: chartData.series,
|
||||
animation: true,
|
||||
width: _self.cWidth*_self.pixelRatio,
|
||||
height: _self.cHeight*_self.pixelRatio,
|
||||
extra: {
|
||||
pie:{
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
ringWidth: 0,
|
||||
border: true,
|
||||
borderWidth: 2,
|
||||
borderColor: '#FFFFFF'
|
||||
}
|
||||
}
|
||||
});
|
||||
canvaPie.addEventListener('renderComplete', () => {
|
||||
setTimeout(function(){
|
||||
uni.canvasToTempFilePath({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: _self.cWidth*_self.pixelRatio,
|
||||
height: _self.cHeight*_self.pixelRatio,
|
||||
fileType: 'png',
|
||||
canvasId: 'canvasPie',
|
||||
success: function(res) {
|
||||
_self.imgSrc3=res.tempFilePath;
|
||||
},
|
||||
fail:function(res){
|
||||
console.info(res)
|
||||
}
|
||||
},_self);
|
||||
},50);
|
||||
})
|
||||
},
|
||||
touchPie(e) {
|
||||
canvaPie.showToolTip(e, {
|
||||
format: function (item, category) {
|
||||
return item.name + ':' + item.data + 'kg'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -559,4 +696,80 @@
|
||||
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
|
||||
box-shadow: 0 6rpx 24rpx rgba(231, 76, 60, 0.35);
|
||||
}
|
||||
|
||||
/* 预警统计容器 */
|
||||
.warning-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 30rpx 20rpx;
|
||||
margin: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||||
backdrop-filter: blur(10rpx);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* 预警卡片 */
|
||||
.warning-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
width: 180rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.warning-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 8rpx;
|
||||
filter: drop-shadow(0 2rpx 8rpx rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
.warning-value {
|
||||
font-size: 44rpx;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
margin-bottom: 4rpx;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.warning-label {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 今日预警 - 黄色 */
|
||||
.warning-today {
|
||||
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
|
||||
box-shadow: 0 6rpx 24rpx rgba(243, 156, 18, 0.35);
|
||||
}
|
||||
|
||||
/* 历史预警 - 橙色 */
|
||||
.warning-history {
|
||||
background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
|
||||
box-shadow: 0 6rpx 24rpx rgba(230, 126, 34, 0.35);
|
||||
}
|
||||
|
||||
/* 已处理预警 - 绿色 */
|
||||
.warning-handled {
|
||||
background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
|
||||
box-shadow: 0 6rpx 24rpx rgba(39, 174, 96, 0.35);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user