1251 lines
33 KiB
Vue
1251 lines
33 KiB
Vue
<template>
|
|
<view class="container">
|
|
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
|
<view class="search-view">
|
|
<view class="search-input-wrapper" @click="handlePerson">
|
|
<u--input
|
|
v-model="queryParams.personName"
|
|
border="surround"
|
|
readonly
|
|
placeholder="请选择人员"
|
|
placeholderStyle="color: #909399"
|
|
color="#333333"
|
|
customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
|
|
class="search-input">
|
|
</u--input>
|
|
<uni-icons
|
|
type="search"
|
|
size="18"
|
|
color="#667eea"
|
|
class="search-icon">
|
|
</uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="search-view">
|
|
<view class="search-input-wrapper" @click="handleHealthRecord">
|
|
<u--input
|
|
v-model="queryParams.healthRecordName"
|
|
border="surround"
|
|
readonly
|
|
placeholder="请选择健康档案"
|
|
placeholderStyle="color: #909399"
|
|
color="#333333"
|
|
customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
|
|
class="search-input">
|
|
</u--input>
|
|
<uni-icons
|
|
type="search"
|
|
size="18"
|
|
color="#667eea"
|
|
class="search-icon">
|
|
</uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="search-view">
|
|
<view class="search-input-wrapper">
|
|
<u--input
|
|
v-model="queryParams.time"
|
|
border="surround"
|
|
readonly
|
|
placeholder="请选择测量日期"
|
|
placeholderStyle="color: #909399"
|
|
color="#333333"
|
|
customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
|
|
class="search-input">
|
|
</u--input>
|
|
<uni-icons
|
|
type="calendar"
|
|
size="18"
|
|
color="#667eea"
|
|
class="search-icon">
|
|
</uni-icons>
|
|
</view>
|
|
<view class="filter-btn" @click="filterPanel = !filterPanel">
|
|
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
|
<text>筛选</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 统计卡片 -->
|
|
<view class="app-container">
|
|
<view class="header-con">
|
|
<view class="item">
|
|
<view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
|
|
<uni-icons type="fire-filled" size="20" color="#ffffff"></uni-icons>
|
|
</view>
|
|
<view class="info-sum">
|
|
<view class="title">发烧天数</view>
|
|
<view class="num">{{ temp.feverDay }}<span>天</span></view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-icon" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);">
|
|
<uni-icons type="fire-filled" size="20" color="#ffffff"></uni-icons>
|
|
</view>
|
|
<view class="info-sum">
|
|
<view class="title">最高体温</view>
|
|
<view class="num">{{ temp.maxTemp }}<span>℃</span></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="header-con">
|
|
<view class="item">
|
|
<view class="item-icon" style="background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);">
|
|
<uni-icons type="snow" size="20" color="#ffffff"></uni-icons>
|
|
</view>
|
|
<view class="info-sum">
|
|
<view class="title">最低体温</view>
|
|
<view class="num">{{ temp.minTemp }}<span>℃</span></view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
|
<uni-icons type="star-filled" size="20" color="#ffffff"></uni-icons>
|
|
</view>
|
|
<view class="info-sum">
|
|
<view class="title">平均体温</view>
|
|
<view class="num">{{ temp.averageTemp }}<span>℃</span></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="header-con">
|
|
<view class="item">
|
|
<view class="item-icon" style="background: linear-gradient(135deg, #059669 0%, #047857 100%);">
|
|
<uni-icons type="checkmarkempty" size="20" color="#ffffff"></uni-icons>
|
|
</view>
|
|
<view class="info-sum">
|
|
<view class="title">正常(低于36.9℃)</view>
|
|
<view class="num">{{ temp.normalTempCount }}<span>次</span></view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
|
|
<uni-icons type="compose" size="20" color="#ffffff"></uni-icons>
|
|
</view>
|
|
<view class="info-sum">
|
|
<view class="title">低烧(36.9~37.5℃)</view>
|
|
<view class="num">{{ temp.lowerTempCount }}<span>次</span></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="header-con">
|
|
<view class="item">
|
|
<view class="item-icon" style="background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);">
|
|
<uni-icons type="fire" size="20" color="#ffffff"></uni-icons>
|
|
</view>
|
|
<view class="info-sum">
|
|
<view class="title">中烧(37.5~38.5℃)</view>
|
|
<view class="num">{{ temp.middleTempCount }}<span>次</span></view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="item-icon" style="background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);">
|
|
<uni-icons type="fire-filled" size="20" color="#ffffff"></uni-icons>
|
|
</view>
|
|
<view class="info-sum">
|
|
<view class="title">高烧(高于38.5℃)</view>
|
|
<view class="num">{{ temp.higherTempCount }}<span>次</span></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 视图切换 -->
|
|
<view class="section-title" v-show="hasSecondListData">
|
|
<view class="title-decorator"></view>
|
|
<text class="title-text">体温统计</text>
|
|
<view class="view-switch">
|
|
<view
|
|
:class="['switch-item', { 'active': !tabShow }]"
|
|
@click="btFirstClick"
|
|
>
|
|
<uni-icons type="list" size="16" :color="!tabShow ? '#667eea' : '#999'"></uni-icons>
|
|
<text>列表</text>
|
|
</view>
|
|
<view
|
|
:class="['switch-item', { 'active': viewMode === 'line' }]"
|
|
@click="viewMode = 'line'"
|
|
>
|
|
<uni-icons type="loop" size="16" :color="viewMode === 'line' ? '#667eea' : '#999'"></uni-icons>
|
|
<text>曲线图</text>
|
|
</view>
|
|
<view
|
|
:class="['switch-item', { 'active': viewMode === 'column' }]"
|
|
@click="viewMode = 'column'"
|
|
>
|
|
<uni-icons type="bars" size="16" :color="viewMode === 'column' ? '#667eea' : '#999'"></uni-icons>
|
|
<text>柱状图</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-sticky>
|
|
|
|
<!-- 筛选面板 -->
|
|
<u-transition :show="filterPanel" mode="fade">
|
|
<view class="filter-panel" :style="{ height: windowHeight + 'px' }">
|
|
<view class="filter-panel-content">
|
|
<view class="filter-title">测量日期</view>
|
|
<view class="selcet-content" style="padding: 0 24rpx">
|
|
<u-input
|
|
:disabled="true"
|
|
:disabledColor="'#fff'"
|
|
class="dateInput"
|
|
@click="openOrCloseDate(true)"
|
|
border="surround"
|
|
v-model="queryParams.startTime"
|
|
placeholder="请选择开始时间"
|
|
>
|
|
<template v-slot:suffix>
|
|
<u-icon name="calendar" @click.stop="openOrCloseDate(true)"></u-icon>
|
|
</template>
|
|
</u-input>
|
|
<u-input
|
|
:disabled="true"
|
|
:disabledColor="'#fff'"
|
|
class="dateInput"
|
|
@click="openOrCloseDate(false)"
|
|
border="surround"
|
|
v-model="queryParams.endTime"
|
|
placeholder="请选择结束时间"
|
|
>
|
|
<template v-slot:suffix>
|
|
<u-icon name="calendar" @click.stop="openOrCloseDate(false)"></u-icon>
|
|
</template>
|
|
</u-input>
|
|
</view>
|
|
</view>
|
|
<view class="btn-box">
|
|
<view class="btn-reset" @click="resetQuery()">
|
|
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
|
<text>重置</text>
|
|
</view>
|
|
<view class="btn-confirm" @click="searchSubmit()">
|
|
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
|
<text>确定</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-transition>
|
|
|
|
<!-- 日期选择器 -->
|
|
<u-datetime-picker
|
|
:closeOnClickOverlay="true"
|
|
:show="timeShow"
|
|
v-model="time"
|
|
mode="date"
|
|
:minDate="-2209017600000"
|
|
@close="openOrCloseDate"
|
|
@cancel="openOrCloseDate"
|
|
@confirm="confirm"
|
|
></u-datetime-picker>
|
|
|
|
<!-- 曲线图展示 -->
|
|
<view class="chart-container" v-if="chartVisible && hasSecondListData && viewMode === 'line'">
|
|
<qiun-data-charts
|
|
type="line"
|
|
:canvasId="canvasIdPrefix + '_line'"
|
|
:chartData="chartData"
|
|
:opts="lineChartOpts"
|
|
:loadingType="1"
|
|
:ontouch="true"
|
|
:inScrollView="true"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 柱状图展示 -->
|
|
<view class="chart-container" v-if="chartVisible && hasSecondListData && viewMode === 'column'">
|
|
<qiun-data-charts
|
|
type="column"
|
|
:canvasId="canvasIdPrefix + '_column'"
|
|
:chartData="chartData"
|
|
:opts="columnChartOpts"
|
|
:loadingType="1"
|
|
:ontouch="true"
|
|
:inScrollView="true"
|
|
/>
|
|
</view>
|
|
<!-- 列表展示 -->
|
|
<u-list v-if="!tabShow && viewMode === 'list'" :spaceHeight="720" lowerThreshold="100">
|
|
<u-list-item v-for="(item, index) in listData" :key="index">
|
|
<view class="list-item">
|
|
<view class="item-header">
|
|
<view class="header-left">
|
|
<view class="time-badge">
|
|
<uni-icons type="loop" size="16" color="#ffffff"></uni-icons>
|
|
<text>{{ item.time }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="header-right">
|
|
<text class="amount-label">测量次数</text>
|
|
<text class="amount-value">{{ item.count }}次</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-body">
|
|
<view class="detail-row">
|
|
<text class="row-label">最高体温</text>
|
|
<text class="row-value">{{ item.max }} ℃</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="row-label">最低体温</text>
|
|
<text class="row-value">{{ item.min }} ℃</text>
|
|
</view>
|
|
<view class="detail-row">
|
|
<text class="row-label">平均体温</text>
|
|
<text class="row-value">{{ item.average }} ℃</text>
|
|
</view>
|
|
<view class="detail-label">
|
|
<uni-icons type="list" size="14" color="#667eea"></uni-icons>
|
|
<text>测量明细</text>
|
|
</view>
|
|
<view class="detail-content">
|
|
<text>{{ formatMultiLineData(item.detail) || '-' }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-list-item>
|
|
<view>
|
|
</view>
|
|
</u-list>
|
|
|
|
<u-picker itemHeight="88" :show="settingPickShow" :columns="settingColumns" keyName="settingName"
|
|
@confirm="settingConfirm" @cancel="settingCancel"></u-picker>
|
|
<u-picker itemHeight="88" :show="showPerson" :columns="personList" keyName="name" @cancel="handlePersonCancel"
|
|
@confirm="handlePersonConfirm"></u-picker>
|
|
<u-picker itemHeight="88" :show="showHealthRecord" :columns="healthRecordList" keyName="name" @cancel="handleHealthRecordCancel"
|
|
@confirm="handleHealthRecordConfirm"></u-picker>
|
|
</view>
|
|
<!-- 悬停按钮返回工作台-->
|
|
<suspend></suspend>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getTemperatureAnalysis } from '@/api/health/statisticAnalysis'
|
|
import { listPerson } from '@/api/health/person'
|
|
import { listHealthRecord } from '@/api/health/healthRecord'
|
|
import { getDicts } from '@/api/system/dict/data.js'
|
|
import dayjs from 'dayjs'
|
|
import { timeHandler } from '@/utils/common.ts'
|
|
import {onLoad,onShow} from "@dcloudio/uni-app";
|
|
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
|
|
import {reactive ,toRefs,ref,computed,getCurrentInstance }from "vue";
|
|
|
|
// 获取当前实例
|
|
const { proxy } = getCurrentInstance()
|
|
|
|
// 生成唯一的canvas ID,避免微信小程序多实例冲突
|
|
const canvasIdPrefix = 'temp_' + Date.now()
|
|
|
|
const pageNum = ref(1)
|
|
const listData = ref([])
|
|
const isShow = ref(false)
|
|
const personList = ref([])
|
|
|
|
const showHealthRecord = ref(false)
|
|
const healthRecordList = ref([])
|
|
|
|
const personTypeList = ref([])
|
|
const settingPickShow = ref(false)
|
|
const settingColumns = ref([])
|
|
const showPerson = ref(false)
|
|
const timeShow= ref(false)
|
|
const time =ref( Number(new Date()))
|
|
const flag= ref(true)
|
|
const temp = ref({})
|
|
|
|
const tabShow = ref(false)
|
|
const viewMode = ref('list') // 'list', 'line', 'column'
|
|
const firstType = ref("primary")
|
|
const secondType = ref("default")
|
|
const secondListData = ref([])
|
|
|
|
// 计算属性 - 判断是否有数据
|
|
const hasSecondListData = computed(() => {
|
|
return secondListData.value && secondListData.value.length > 0
|
|
})
|
|
|
|
// 曲线图配置
|
|
const lineChartOpts = computed(() => {
|
|
const dataCount = secondListData.value ? secondListData.value.length : 0
|
|
const showXAxisLabel = dataCount <= 10
|
|
|
|
return {
|
|
color: ['#667eea'],
|
|
padding: [15, 15, 30, 5],
|
|
enableScroll: false,
|
|
enableMarkLine: false,
|
|
dataLabel: false,
|
|
dataPointShape: true,
|
|
legend: {
|
|
show: false
|
|
},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
boundaryGap: 'justify',
|
|
axisLine: false,
|
|
scrollShow: true,
|
|
itemCount: 5,
|
|
fontSize: showXAxisLabel ? 10 : 0,
|
|
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
|
rotateLabel: true,
|
|
rotateAngle: 30,
|
|
disabled: !showXAxisLabel
|
|
},
|
|
yAxis: {
|
|
gridType: 'dash',
|
|
dashLength: 4,
|
|
gridColor: '#EEEEEE',
|
|
splitNumber: 5,
|
|
fontSize: 10,
|
|
fontColor: '#999999',
|
|
format: (val) => {
|
|
return val.toFixed(1) + '℃'
|
|
},
|
|
data: [
|
|
{
|
|
min: 35
|
|
}
|
|
]
|
|
},
|
|
extra: {
|
|
line: {
|
|
type: 'curve',
|
|
width: 3,
|
|
activeType: 'hollow',
|
|
linearType: 'custom',
|
|
linearOpacity: 0.2,
|
|
onShadow: true,
|
|
animation: true
|
|
},
|
|
tooltip: {
|
|
showBox: true,
|
|
showArrow: true,
|
|
showCategory: false,
|
|
bgColor: '#000000',
|
|
bgOpacity: 0.7,
|
|
gridType: 'dash',
|
|
dashLength: 4,
|
|
gridColor: '#CCCCCC',
|
|
fontColor: '#FFFFFF',
|
|
fontSize: 11,
|
|
lineHeight: 16,
|
|
borderRadius: 4,
|
|
borderWidth: 0,
|
|
borderColor: '#000000',
|
|
padding: [8, 10, 8, 10],
|
|
splitLine: false,
|
|
horizentalLine: false,
|
|
xAxisLabel: true,
|
|
yAxisLabel: true,
|
|
labelBgColor: '#000000',
|
|
labelBgOpacity: 0.7,
|
|
labelFontColor: '#FFFFFF'
|
|
},
|
|
markLine: {
|
|
type: 'dash',
|
|
dashLength: 5,
|
|
data: [
|
|
{
|
|
value: 37,
|
|
lineColor: '#f59e0b',
|
|
showLabel: true,
|
|
labelText: '37',
|
|
labelFontSize: 10,
|
|
labelFontColor: '#f59e0b',
|
|
labelOffsetX: 5,
|
|
labelOffsetY: -5
|
|
},
|
|
{
|
|
value: 38.5,
|
|
lineColor: '#dc2626',
|
|
showLabel: true,
|
|
labelText: '38.5',
|
|
labelFontSize: 10,
|
|
labelFontColor: '#dc2626',
|
|
labelOffsetX: 5,
|
|
labelOffsetY: -5
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// 柱状图配置
|
|
const columnChartOpts = computed(() => {
|
|
const dataCount = secondListData.value ? secondListData.value.length : 0
|
|
const showXAxisLabel = dataCount <= 10
|
|
|
|
return {
|
|
color: ['#667eea'],
|
|
padding: [15, 15, 30, 5],
|
|
enableScroll: false,
|
|
dataLabel: false,
|
|
legend: {
|
|
show: false
|
|
},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
boundaryGap: 'center',
|
|
axisLine: false,
|
|
scrollShow: true,
|
|
itemCount: 5,
|
|
fontSize: showXAxisLabel ? 10 : 0,
|
|
fontColor: showXAxisLabel ? '#999999' : 'transparent',
|
|
rotateLabel: true,
|
|
rotateAngle: 30,
|
|
disabled: !showXAxisLabel
|
|
},
|
|
yAxis: {
|
|
gridType: 'dash',
|
|
dashLength: 4,
|
|
gridColor: '#EEEEEE',
|
|
splitNumber: 5,
|
|
fontSize: 10,
|
|
fontColor: '#999999',
|
|
showTitle: false,
|
|
disabled: false,
|
|
format: (val) => {
|
|
return val.toFixed(1) + '℃'
|
|
},
|
|
data: [
|
|
{
|
|
min: 35
|
|
}
|
|
]
|
|
},
|
|
extra: {
|
|
column: {
|
|
type: 'group',
|
|
width: 20,
|
|
activeBgColor: '#764ba2',
|
|
activeBgOpacity: 0.08,
|
|
linearType: 'none',
|
|
barBorderCircle: true,
|
|
seriesGap: 2
|
|
},
|
|
tooltip: {
|
|
showBox: true,
|
|
showArrow: true,
|
|
showCategory: false,
|
|
bgColor: '#000000',
|
|
bgOpacity: 0.7,
|
|
gridType: 'dash',
|
|
dashLength: 4,
|
|
gridColor: '#CCCCCC',
|
|
fontColor: '#FFFFFF',
|
|
fontSize: 11,
|
|
lineHeight: 16,
|
|
borderRadius: 4,
|
|
borderWidth: 0,
|
|
borderColor: '#000000',
|
|
padding: [8, 10, 8, 10],
|
|
splitLine: false,
|
|
horizentalLine: false,
|
|
xAxisLabel: true,
|
|
yAxisLabel: true,
|
|
labelBgColor: '#000000',
|
|
labelBgOpacity: 0.7,
|
|
labelFontColor: '#FFFFFF'
|
|
},
|
|
markLine: {
|
|
type: 'dash',
|
|
dashLength: 5,
|
|
data: [
|
|
{
|
|
value: 37,
|
|
lineColor: '#f59e0b',
|
|
showLabel: true,
|
|
labelText: '37',
|
|
labelFontSize: 10,
|
|
labelFontColor: '#f59e0b',
|
|
labelOffsetX: 5,
|
|
labelOffsetY: -5
|
|
},
|
|
{
|
|
value: 38.5,
|
|
lineColor: '#dc2626',
|
|
showLabel: true,
|
|
labelText: '38.5',
|
|
labelFontSize: 10,
|
|
labelFontColor: '#dc2626',
|
|
labelOffsetX: 5,
|
|
labelOffsetY: -5
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// 图表数据
|
|
const chartData = computed(() => {
|
|
if (!secondListData.value || secondListData.value.length === 0) {
|
|
return {
|
|
categories: [],
|
|
series: []
|
|
}
|
|
}
|
|
|
|
// 过滤和验证数据
|
|
const validData = secondListData.value.filter(item => {
|
|
return item && item.time && item.value !== undefined && item.value !== null
|
|
})
|
|
|
|
return {
|
|
categories: validData.map(item => item.time || ''),
|
|
series: [
|
|
{
|
|
name: '体温',
|
|
data: validData.map(item => {
|
|
const value = parseFloat(item.value)
|
|
return isNaN(value) ? 0 : value
|
|
})
|
|
}
|
|
]
|
|
}
|
|
})
|
|
|
|
const data = reactive({
|
|
filterPanel: false,
|
|
queryPersonParams: {
|
|
pageNum: 1,
|
|
pageSize: 100
|
|
},
|
|
queryParams: {
|
|
type: 1,
|
|
time: null,
|
|
dataType: null,
|
|
recordId: null,
|
|
id: null
|
|
} ,
|
|
queryHealthRecordParams: {
|
|
pageNum: 1,
|
|
personId:null,
|
|
pageSize: 1000
|
|
}
|
|
})
|
|
|
|
const { filterPanel, queryPersonParams,queryHealthRecordParams, queryParams} = toRefs(data)
|
|
|
|
// 修复微信小程序windowHeight计算
|
|
const windowHeight = ref(0)
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
windowHeight.value = res.windowHeight - 50
|
|
}
|
|
})
|
|
const chartVisible = computed(() => !filterPanel.value && !timeShow.value && !settingPickShow.value && !showPerson.value && !showHealthRecord.value)
|
|
onLoad(() => {
|
|
getDict()
|
|
// getList()
|
|
});
|
|
|
|
onShow(() => {
|
|
if (isShow.value) {
|
|
listData.value=[]
|
|
getList()
|
|
isShow.value = false
|
|
}
|
|
});
|
|
|
|
function btFirstClick() {
|
|
tabShow.value = false
|
|
viewMode.value = 'list'
|
|
firstType.value = "primary"
|
|
secondType.value = "default"
|
|
}
|
|
|
|
function btSecondClick() {
|
|
secondType.value = "primary"
|
|
firstType.value = "default"
|
|
tabShow.value = true
|
|
}
|
|
|
|
function formatMultiLineData(data) {
|
|
if (data != null) {
|
|
return data.replace(/<br\/>/g, '\n')
|
|
}
|
|
}
|
|
function openOrCloseDate(data) {
|
|
if (typeof data === 'boolean') {
|
|
flag.value = data
|
|
timeShow.value = true
|
|
} else {
|
|
timeShow.value = false
|
|
}
|
|
}
|
|
function confirm(e) {
|
|
const date = timeHandler(new Date(e.value), '-', ':')
|
|
let formatValue = 'YYYY-MM-DD'
|
|
dayjs(date).format(formatValue)
|
|
if (flag.value) {
|
|
queryParams.value.startTime = dayjs(date).format(formatValue)
|
|
} else {
|
|
queryParams.value.endTime = dayjs(date).format(formatValue)
|
|
}
|
|
timeShow.value = false
|
|
}
|
|
function searchSubmit() {
|
|
if(queryParams.value.startTime!=''&&queryParams.value.startTime!=undefined&&queryParams.value.endTime!=''&&queryParams.value.endTime!=undefined){
|
|
queryParams.value.time = queryParams.value.startTime+'-'+queryParams.value.endTime
|
|
}
|
|
pageNum.value = 1
|
|
listData.value = []
|
|
getList()
|
|
filterPanel.value = false
|
|
}
|
|
function resetQuery() {
|
|
queryParams.value.type = '1'
|
|
queryParams.value.startTime = ''
|
|
queryParams.value.endTime = ''
|
|
queryParams.value.time = ''
|
|
}
|
|
function getList() {
|
|
|
|
getTemperatureAnalysis({...queryParams.value }).then(res => {
|
|
temp.value = { ...res.data }
|
|
listData.value=[]
|
|
secondListData.value=[]
|
|
listData.value = listData.value.concat(res.data.tableList)
|
|
secondListData.value = secondListData.value.concat(res.data.temperatureList.slice().reverse())
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
function getDict() {
|
|
listPerson(queryPersonParams.value).then((response) => {
|
|
personList.value = [response.rows]
|
|
if(response.rows.length>0){
|
|
queryParams.value.personName= response.rows[0].name
|
|
queryParams.value.id = response.rows[0].id
|
|
queryHealthRecordParams.value.personId=response.rows[0].id
|
|
listHealthRecord(queryHealthRecordParams.value).then((response) => {
|
|
healthRecordList.value = [response.rows]
|
|
if(response.rows.length>0){
|
|
queryParams.value.healthRecordName= response.rows[0].name
|
|
queryParams.value.recordId = response.rows[0].id
|
|
}
|
|
getTemperatureAnalysis({...queryParams.value }).then(res => {
|
|
temp.value = { ...res.data }
|
|
listData.value=[]
|
|
secondListData.value=[]
|
|
listData.value = listData.value.concat(res.data.tableList)
|
|
secondListData.value = secondListData.value.concat(res.data.temperatureList.slice().reverse())
|
|
}).catch(() => {
|
|
})
|
|
|
|
|
|
})
|
|
}
|
|
})
|
|
|
|
}
|
|
function settingConfirm(e) {
|
|
queryParams.value.settingId = e.value[0].settingId
|
|
queryParams.value.settingName = e.value[0].settingName
|
|
settingPickShow.value = false
|
|
}
|
|
function settingCancel() {
|
|
settingPickShow.value = false
|
|
}
|
|
function handlePerson() {
|
|
if (personList.value[0].length === 0) {
|
|
uni.showToast({
|
|
title: '人员为空',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
} else {
|
|
showPerson.value = true
|
|
}
|
|
}
|
|
function handlePersonConfirm(e) {
|
|
queryParams.value.personName = e.value[0].name
|
|
queryParams.value.id= e.value[0].id
|
|
queryParams.value.healthRecordName = ''
|
|
queryParams.value.recordId = ''
|
|
queryHealthRecordParams.value.personId=e.value[0].id
|
|
listHealthRecord(queryHealthRecordParams.value).then((response) => {
|
|
healthRecordList.value = [response.rows]
|
|
showPerson.value = false
|
|
pageNum.value = 1
|
|
listData.value = []
|
|
getList()
|
|
})
|
|
}
|
|
function handlePersonCancel() {
|
|
// queryParams.value.personName = ''
|
|
// queryParams.value.id=''
|
|
|
|
showPerson.value = false
|
|
listData.value = []
|
|
getList()
|
|
filterPanel.value = false
|
|
}
|
|
function handleHealthRecord() {
|
|
if (healthRecordList.value[0].length === 0) {
|
|
uni.showToast({
|
|
title: '健康档案为空',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
} else {
|
|
showHealthRecord.value = true
|
|
}
|
|
}
|
|
function handleHealthRecordConfirm(e) {
|
|
queryParams.value.healthRecordName = e.value[0].name
|
|
queryParams.value.recordId = e.value[0].id
|
|
showHealthRecord.value = false
|
|
pageNum.value = 1
|
|
listData.value = []
|
|
getList()
|
|
}
|
|
function handleHealthRecordCancel() {
|
|
queryParams.value.healthRecordName = ''
|
|
queryParams.value.recordId = ''
|
|
showHealthRecord.value = false
|
|
listData.value = []
|
|
getList()
|
|
filterPanel.value = false
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.app-container {
|
|
background-color: #f5f7fa;
|
|
padding: 0;
|
|
overflow: visible;
|
|
|
|
.header-con {
|
|
width: calc(100% - 32rpx);
|
|
margin: 0 16rpx 8rpx 16rpx;
|
|
background-color: transparent;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
padding: 0;
|
|
gap: 12rpx;
|
|
|
|
.item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 16rpx;
|
|
transition: all 0.3s ease;
|
|
border: 2rpx solid #e8edf3;
|
|
border-radius: 16rpx;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.item-icon {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 16rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-sum {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.title {
|
|
color: #7f8c8d;
|
|
margin-bottom: 8rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.num {
|
|
color: #2c3e50;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
|
|
span {
|
|
font-size: 20rpx;
|
|
color: #95a5a6;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.section-title {
|
|
display: flex;
|
|
margin-top: -10rpx;
|
|
align-items: center;
|
|
padding: 24rpx 32rpx 16rpx;
|
|
background-color: #f5f7fa;
|
|
|
|
.title-decorator {
|
|
width: 6rpx;
|
|
height: 32rpx;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 3rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
line-height: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.view-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4rpx;
|
|
background: #ffffff;
|
|
border-radius: 12rpx;
|
|
padding: 4rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
|
|
|
|
.switch-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4rpx;
|
|
padding: 6rpx 12rpx;
|
|
border-radius: 8rpx;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
|
|
text {
|
|
font-size: 22rpx;
|
|
color: #999999;
|
|
line-height: 1;
|
|
}
|
|
|
|
&.active {
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
|
|
|
text {
|
|
color: #667eea;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart-container {
|
|
margin: 16rpx 24rpx 30rpx;
|
|
padding: 16rpx;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
width: calc(100% - 48rpx);
|
|
height: 550rpx;
|
|
overflow: visible;
|
|
position: relative;
|
|
}
|
|
|
|
.search-view {
|
|
padding: 12rpx 32rpx;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 100;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.search-input-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.search-icon {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
z-index: 10;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.search-input {
|
|
background: rgba(102, 126, 234, 0.08);
|
|
color: #333333;
|
|
width: 100%;
|
|
margin-right: 0;
|
|
border-radius: 24rpx;
|
|
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
|
height: 66rpx !important;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
/* H5端placeholder样式 */
|
|
:deep(input::placeholder) {
|
|
color: #909399 !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
:deep(input::-webkit-input-placeholder) {
|
|
color: #909399 !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
:deep(input::-moz-placeholder) {
|
|
color: #909399 !important;
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
/* 输入文字颜色 */
|
|
:deep(.u-input__content__field-wrapper__field) {
|
|
color: #333333 !important;
|
|
}
|
|
|
|
:deep(input) {
|
|
color: #333333 !important;
|
|
}
|
|
}
|
|
|
|
.filter-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6rpx;
|
|
padding: 12rpx 24rpx;
|
|
background: rgba(102, 126, 234, 0.08);
|
|
border-radius: 24rpx;
|
|
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
|
transition: all 0.3s ease;
|
|
flex-shrink: 0;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
background: rgba(102, 126, 234, 0.12);
|
|
}
|
|
|
|
text {
|
|
color: #667eea;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
uni-icons {
|
|
color: #667eea;
|
|
}
|
|
}
|
|
}
|
|
|
|
.filter-panel {
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 270rpx;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 9999;
|
|
|
|
.filter-panel-content {
|
|
background-color: #ffffff;
|
|
padding: 0 30rpx 30rpx;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
|
|
.filter-title {
|
|
color: #2c3e50;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
padding: 32rpx 0 24rpx 20rpx;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&::before {
|
|
content: '';
|
|
width: 6rpx;
|
|
height: 32rpx;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 3rpx;
|
|
margin-right: 12rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-box {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
padding: 24rpx 30rpx;
|
|
background-color: #fff;
|
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
|
|
|
.btn-reset,
|
|
.btn-confirm {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8rpx;
|
|
height: 88rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
text {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
.btn-reset {
|
|
flex: 1;
|
|
background: #f5f7fa;
|
|
border: 2rpx solid #dcdfe6;
|
|
|
|
text {
|
|
color: #606266;
|
|
}
|
|
}
|
|
|
|
.btn-confirm {
|
|
flex: 1;
|
|
background: #667eea;
|
|
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
|
border: none;
|
|
|
|
text {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-item {
|
|
margin: 0 24rpx 16rpx;
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
|
|
.item-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 24rpx;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
.header-left {
|
|
flex: 1;
|
|
|
|
.time-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
padding: 8rpx 16rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 12rpx;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
|
|
.amount-label {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
line-height: 1;
|
|
}
|
|
|
|
.amount-value {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-body {
|
|
padding: 24rpx;
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 12rpx 0;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
&:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.row-label {
|
|
font-size: 26rpx;
|
|
color: #7f8c8d;
|
|
}
|
|
|
|
.row-value {
|
|
font-size: 26rpx;
|
|
color: #2c3e50;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.detail-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6rpx;
|
|
margin: 16rpx 0 12rpx;
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
color: #667eea;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.detail-content {
|
|
padding: 16rpx;
|
|
background: #f8f9fb;
|
|
border-radius: 12rpx;
|
|
border-left: 4rpx solid #667eea;
|
|
|
|
text {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
line-height: 1.8;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |