|
|
@@ -0,0 +1,473 @@
|
|
|
+<template>
|
|
|
+ <div class="formwrap">
|
|
|
+ <el-tabs
|
|
|
+ v-model="InnerActiveName"
|
|
|
+ type="border-card"
|
|
|
+ >
|
|
|
+ <el-tab-pane
|
|
|
+ v-for="group in vitalSignsLogs" :key="group.id"
|
|
|
+ :label="group.vital_signs_name"
|
|
|
+ :name="'vital_signs'+group.id"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ :id="`chart${group.id}`"
|
|
|
+ style="height: 600px; width:800px;"
|
|
|
+ />
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="用户体征日志"
|
|
|
+ :visible.sync="formshow"
|
|
|
+ width="50%"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="editform"
|
|
|
+ label-width="100px"
|
|
|
+ class="form"
|
|
|
+ :model="formmodel"
|
|
|
+ :rules="rules"
|
|
|
+ >
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item
|
|
|
+ label="采集时间"
|
|
|
+ prop="log_time"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="formmodel.log_time"
|
|
|
+ type="datetime"
|
|
|
+ placeholder="选择日期时间"
|
|
|
+ value-format="timestamp"
|
|
|
+ align="right"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-collapse :value="collapseVal">
|
|
|
+ <el-collapse-item
|
|
|
+ v-for="paramsgroup in goodsParams"
|
|
|
+ v-if="paramsgroup"
|
|
|
+ :key="paramsgroup.id"
|
|
|
+ :title="paramsgroup.vital_signs_name"
|
|
|
+ :name="paramsgroup.id"
|
|
|
+ >
|
|
|
+ <el-row>
|
|
|
+ <el-col
|
|
|
+ v-for="(goods_params_list, index) in baseInfoForm.goods_params_list"
|
|
|
+ v-if="goods_params_list && goods_params_list.group_id && paramsgroup.id === goods_params_list.group_id"
|
|
|
+ :key="index"
|
|
|
+ :span="12"
|
|
|
+ >
|
|
|
+ <el-form-item :label="`${goods_params_list.param_name}：`">
|
|
|
+ <el-input-number
|
|
|
+ v-model="goods_params_list.vs_value"
|
|
|
+ :step="goods_params_list.input_type==='整数'?1:0.1"
|
|
|
+ :precision="goods_params_list.input_type==='整数'?0:1"
|
|
|
+ :min="goods_params_list.min_limit_start"
|
|
|
+ :max="goods_params_list.max_limit_end"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+
|
|
|
+ <el-form-item style="margin-top: 20px;">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="SaveVitalSignsLog"
|
|
|
+ >保 存</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <en-table-layout
|
|
|
+ toolbar
|
|
|
+ pagination
|
|
|
+ :tableData="tableData"
|
|
|
+ :height="600">
|
|
|
+ <!--表头-->
|
|
|
+ <template slot="table-columns">
|
|
|
+ <el-table-column type="index" width="55" label="序号" />
|
|
|
+ <el-table-column prop="param_name" label="体征参数" min-width="160">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{scope.row.group_name===scope.row.param_name?scope.row.param_name:scope.row.group_name+'-'+scope.row.param_name}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="vs_value" label="体征值" min-width="120"/>
|
|
|
+ <el-table-column prop="log_time" label="测量时间" min-width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <i class="el-icon-time"></i>
|
|
|
+ <span style="margin-left: 5px">{{ unixToDate(scope.row.log_time,'yyyy-MM-dd hh:mm:ss')}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!--翻页-->
|
|
|
+ <el-pagination
|
|
|
+ slot="pagination"
|
|
|
+ v-if="pageData"
|
|
|
+ :current-page="pageData.page_no"
|
|
|
+ :page-sizes="[20, 30, 50, 100]"
|
|
|
+ :page-size="pageData.page_size"
|
|
|
+ @size-change="handlePageSizeChange"
|
|
|
+ @current-change="handlePageCurrentChange"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="pageData.data_total">
|
|
|
+ </el-pagination>
|
|
|
+ </en-table-layout>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as API_Params from '@/api/vitalSignsParam'
|
|
|
+import * as API_VitalSignsLog from '@/api/vitalSignsLog'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'VitalSignsLog',
|
|
|
+ props: {
|
|
|
+ memberId: {
|
|
|
+ type: String,
|
|
|
+ default: null
|
|
|
+ },
|
|
|
+ activeName: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ vitalSignsLogs: {},
|
|
|
+ formshow: false,
|
|
|
+ /** 图表颜色集合 */
|
|
|
+ colors: ['#5793f3', '#d14a61', '#675bba', '#660099', '#7e0023'],
|
|
|
+
|
|
|
+ /** 请求的参数组列表 */
|
|
|
+ goodsParams: [],
|
|
|
+ params: {
|
|
|
+ page_no: 1,
|
|
|
+ page_size: 10,
|
|
|
+ disabled: 0
|
|
|
+ },
|
|
|
+ collapseVal: [],
|
|
|
+ baseInfoForm: {},
|
|
|
+ InnerActiveName: null,
|
|
|
+ formmodel: {},
|
|
|
+ /** 设备选择项数据 */
|
|
|
+ devices: [],
|
|
|
+ rules: {
|
|
|
+ imei: [
|
|
|
+ { required: true, message: '请选择采集设备', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ log_time: [
|
|
|
+ { required: true, message: '请选择采集时间', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
+ pageData: [],
|
|
|
+ groupId: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.InnerActiveName = this.activeName
|
|
|
+ this.GET_VitalSingsGroupParamLogs()
|
|
|
+ this.GET_VitalSignsParams()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ vitalSignsLogs(val) {
|
|
|
+ if (this.activeName === '' && val.length > 0) {
|
|
|
+ this.InnerActiveName = 'vital_signs' + val[0].id
|
|
|
+ }
|
|
|
+ },
|
|
|
+ InnerActiveName(val) {
|
|
|
+ this.groupId = val.split('vital_signs')[1]
|
|
|
+ this.GET_LogListPage()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ GET_VitalSingsGroupParamLogs() {
|
|
|
+ API_Params.getVitalSignsGroupParamLog(this.memberId).then((response) => {
|
|
|
+ this.vitalSignsLogs = response
|
|
|
+ const option = {// 图表选项option对象
|
|
|
+ color: this.colors, // 颜色集合
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ x: 'center',
|
|
|
+ align: 'right'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'none',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross'
|
|
|
+ }
|
|
|
+ }, // 图表提示
|
|
|
+
|
|
|
+ dataZoom: [],
|
|
|
+
|
|
|
+ legend: {
|
|
|
+ top: 30,
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 90,
|
|
|
+ bottom: 150
|
|
|
+ }, // 图表表格位置
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value'
|
|
|
+ }
|
|
|
+ ], // Y轴设置
|
|
|
+ xAxis: [], // X轴集合
|
|
|
+ series: []// 值数据集合
|
|
|
+ }
|
|
|
+ const xAxi = { // x轴对象
|
|
|
+ type: 'category',
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ onZero: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: this.colors[1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nameLocation: 'middle',
|
|
|
+ offset: 25,
|
|
|
+ position: 'bottom',
|
|
|
+ axisPointer: {
|
|
|
+
|
|
|
+ label: {
|
|
|
+ formatter: function(params) {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ const serie = { // 值对象
|
|
|
+
|
|
|
+ name: '',
|
|
|
+ type: 'line',
|
|
|
+ xAxisIndex: 0,
|
|
|
+ smooth: true,
|
|
|
+ data: [],
|
|
|
+ markLine: {
|
|
|
+ silent: true,
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ const zoomitem =
|
|
|
+ {
|
|
|
+ show: true,
|
|
|
+ type: 'slider',
|
|
|
+ realtime: true,
|
|
|
+ start: 90,
|
|
|
+ end: 100,
|
|
|
+ xAxisIndex: []
|
|
|
+ }
|
|
|
+
|
|
|
+ // 构建图表X轴集合和值集合
|
|
|
+ this.vitalSignsLogs.forEach((key, ix) => {
|
|
|
+ if (key && key.paramlogs) {
|
|
|
+ const op = this.MixinClone(option)
|
|
|
+ const legenddata = [] // 图例集合
|
|
|
+ const zoom = this.MixinClone(zoomitem)
|
|
|
+
|
|
|
+ op.title.text = key.vital_signs_name + '体征参数'
|
|
|
+
|
|
|
+ key.paramlogs.forEach((elem, index) => {
|
|
|
+ const xAxic = this.MixinClone(xAxi)
|
|
|
+ const seriec = this.MixinClone(serie)
|
|
|
+ legenddata.push(elem.param.param_name) // 加入图例
|
|
|
+ op.yAxis.max = elem.param.max_limit_end + 5
|
|
|
+ op.yAxis[0].name = '单位：' + key.unit
|
|
|
+ zoom.xAxisIndex.push(index)
|
|
|
+ xAxic.axisLine.lineStyle.color = this.colors[index] // 设置颜色
|
|
|
+ xAxic.offset = 25 * index // 设置x轴偏移
|
|
|
+ xAxic.axisPointer.label.formatter = function(params) {
|
|
|
+ return elem.param.param_name + params.value +
|
|
|
+ (params.seriesData.length ? '：' + params.seriesData[0].data : '')
|
|
|
+ } // 设置提示信息格式化函数
|
|
|
+
|
|
|
+ seriec.name = elem.param.param_name
|
|
|
+ seriec.xAxisIndex = index
|
|
|
+ seriec.markLine.data.push({ yAxis: elem.param.max_limit_stand })
|
|
|
+ seriec.markLine.data.push({ yAxis: elem.param.min_limit_stand })
|
|
|
+
|
|
|
+ const axidata = []
|
|
|
+ const seriesdata = [] // X轴 值集合data数组
|
|
|
+ if (elem && elem.logs) {
|
|
|
+ zoom.start = 100 - (10 * 100 / elem.logs.length)
|
|
|
+ elem.logs.forEach((log, idx) => {
|
|
|
+ axidata.push(this.unixToDate(log.log_time, 'yyyy-MM-dd hh:mm:ss'))
|
|
|
+
|
|
|
+ seriesdata.push(log.vs_value)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ xAxic.data = axidata
|
|
|
+ seriec.data = seriesdata
|
|
|
+ op.xAxis.push(xAxic) // 推入X轴对象
|
|
|
+ op.series.push(seriec) // 推入值对象
|
|
|
+ })
|
|
|
+
|
|
|
+ op.legend.data = legenddata // 设置图例
|
|
|
+ op.dataZoom.push(zoom)
|
|
|
+ key.option = op
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.vitalSignsLogs.forEach((key, index) => {
|
|
|
+ this.$echarts.init(document.getElementById('chart' + key.id)).setOption(key.option)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ unixToDate(unix, format) {
|
|
|
+ let _format = format || 'yyyy-MM-dd hh:mm:ss'
|
|
|
+ const d = new Date(unix * 1000)
|
|
|
+ const o = {
|
|
|
+ 'M+': d.getMonth() + 1,
|
|
|
+ 'd+': d.getDate(),
|
|
|
+ 'h+': d.getHours(),
|
|
|
+ 'm+': d.getMinutes(),
|
|
|
+ 's+': d.getSeconds(),
|
|
|
+ 'q+': Math.floor((d.getMonth() + 3) / 3),
|
|
|
+ S: d.getMilliseconds()
|
|
|
+ }
|
|
|
+ if (/(y+)/.test(_format)) _format = _format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
|
|
|
+ for (const k in o) if (new RegExp('(' + k + ')').test(_format)) _format = _format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
|
|
|
+ return _format
|
|
|
+ },
|
|
|
+ /** 查询体征参数 */
|
|
|
+ GET_VitalSignsParams() {
|
|
|
+ API_Params.getAllVitalSignsGroup(this.memberId).then((response) => {
|
|
|
+ this.loading = false
|
|
|
+ this.goodsParams = response
|
|
|
+
|
|
|
+ this.collapseVal = this.goodsParams.map(key => {
|
|
|
+ if (key.id) {
|
|
|
+ return key.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (!response || response.length <= 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.baseInfoForm.goods_params_list = []
|
|
|
+ this.goodsParams.forEach(key => {
|
|
|
+ if (key && key.settings) {
|
|
|
+ key.settings.forEach(elem => {
|
|
|
+ this.$set(elem, 'vs_value', null)
|
|
|
+ this.$set(elem, 'member_id', this.memberId)
|
|
|
+ this.$set(elem, 'setting_id', elem.id)
|
|
|
+ this.$set(elem, 'alarm', false)
|
|
|
+
|
|
|
+ this.baseInfoForm.goods_params_list.push(elem)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handlerAdd() {
|
|
|
+ if (this.$refs.editform) {
|
|
|
+ this.$refs.editform.resetFields()
|
|
|
+ }
|
|
|
+ this.formshow = true
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 提交体征日志保存 */
|
|
|
+ SaveVitalSignsLog() {
|
|
|
+ this.$refs['editform'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.baseInfoForm.goods_params_list.forEach((elem) => {
|
|
|
+ elem.memberId = this.memberId
|
|
|
+ elem.log_time = this.formmodel.log_time / 1000
|
|
|
+ })
|
|
|
+ const param = { ...this.baseInfoForm.goods_params_list }
|
|
|
+
|
|
|
+ API_Params.saveVitalSignsLog(this.baseInfoForm.goods_params_list, this.memberId).then((response) => {
|
|
|
+ this.$message.success('添加成功！')
|
|
|
+ this.formshow = false
|
|
|
+ this.GET_VitalSingsGroupParamLogs()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 分页大小发生改变 */
|
|
|
+ handlePageSizeChange(size) {
|
|
|
+ this.params.page_size = size
|
|
|
+ this.GET_LogListPage()
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 分页页数发生改变 */
|
|
|
+ handlePageCurrentChange(page) {
|
|
|
+ this.params.page_no = page
|
|
|
+ this.GET_LogListPage()
|
|
|
+ },
|
|
|
+ GET_LogListPage() {
|
|
|
+ const _this = this
|
|
|
+ const pageParams = {
|
|
|
+ page_no: this.params.page_no,
|
|
|
+ page_size: this.params.page_size,
|
|
|
+ sort: 'log_time',
|
|
|
+ dir: 'desc',
|
|
|
+ groupid: this.groupId,
|
|
|
+ memberid: this.memberId
|
|
|
+ }
|
|
|
+ API_VitalSignsLog.logListPage(pageParams).then(res => {
|
|
|
+ _this.tableData = res.data
|
|
|
+ _this.pageData = {
|
|
|
+ page_no: res.page_no,
|
|
|
+ page_size: res.page_size,
|
|
|
+ data_total: res.data_total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped type="text/scss">
|
|
|
+
|
|
|
+ /*折叠面板*/
|
|
|
+ .el-collapse-item {
|
|
|
+ .el-collapse-item__header {
|
|
|
+ text-align: left;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ margin-left: 5%;
|
|
|
+ width: 25%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__content {
|
|
|
+ margin-left: 120px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ p.goods-group-manager {
|
|
|
+ padding-left: 12%;
|
|
|
+ text-align: left;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-collapse-item__content {
|
|
|
+ padding: 10px 0;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
allen