使用vue+zrender绘制体温单三测单(1)

先上预览地址 http://132.232.99.217:8090/#/

1.创建项目

使用vue init webpack temperaure 创建一个vue项目然后安装axios zrender

命令分别是 npm install axios -S npm install zrender安装这2个组件

2.创建公共文件

在以后的使用中会出现本地调试和先上地址这是我们就创建以下目录

src/components这个目录放置我们的页面文件

src/js 这里放置我们以后绘制折线图 阴影图等公共方法

src/mock 这里放置我们的模拟数据

src/store 这里放置请求的是本地还是线上的方法

router就是路由
　
首先我们在src/store 文件下创建http.js文件在里面添加以下代码

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'Vue.use(Vuex)
//configUrl这里写线上地址 httpType 这里是请求本地还是线上 线上换成http 本地换成 mock data未传递的数据可根据自己需要自行修改
const store = new Vuex.Store({state:{configUrl:'',httpType:"mock",data:JSON.parse(localStorage.getItem('patientData')),},mutations:{},actions:{getUrlData(context){context.commit('setUrlData',data)}}
})export default store

然后我们在main.js文件里写

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import store from './store/http'
import axios from 'axios'
Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.prototype.$axios = axios/* eslint-disable no-new */
new Vue({el: '#app',router,store,components: { App },template: '<App/>'
})

这是我们写请求方法

this.$axios({method:'',url:``,data:{},}).then(res => {})

然后我们先创建后面需要的一些文件

src/components/Render.vue 这个文件就是我们绘制体温单的画板页面也是最核心的一个文件

src/compontents/SeparateTd.vue 这个文件是用来生成血压这个表格的

Table.vue 就是这个体温单页面包含了表格病人信息

timeCon.vue 这个页面是生成每日时间的文件

项目的基础构建我们准备完毕下一节我们开始绘制一个体温单

需要源码的伙伴可以加我qq 896705559 咨询

也可以关注我的微信公众号 web少年QAQ 回复体温单

源码下载地址https://download.csdn.net/download/qq_37347787/37274072

使用vue+zrender绘制体温单三测单(1)相关推荐

医疗系统--体温单(三测单)系统（体温单控件）
不同区域的体温单格式不尽相同,本文以江苏某地体温单为范例,介绍完整的体温单系统开发. 1.名词解释体温单:又叫三测单,是护理病历的一部分.体温单主要用于记录患者的生命体征及有关情况,内容包括患者姓名 ...
关于java的提问单_使用vue+zrender绘制体温单三测单(1)
1.创建项目使用vue init webpack temperaure 创建一个vue项目然后安装axios zrender 命令分别是 npm install axios -S npm ins ...
使用vue+zrender绘制体温单三测单(2)
预览地址 http://132.232.99.217:8090/#/ 上期我们说了如何创建项目并把各个项目的文件结构创建好后这期我们来说如何画出图中代写线段首先我们在src/components/R ...
react svg 实现体温单三测单
技术栈:react svg 效果图: 开发电子病历可以用此控件
体温单源码 delphi体温单源码又叫三测单
体温单:又叫三测单,是护理病历的一部分.体温单主要用于记录患者的生命体征及有关情况,内容包括患者姓名.年龄.性别.科别.床号.入院日期.住院号(或病案号).日期.住院天数.手术后天数.脉搏.呼吸.体温 ...
最新医疗系统三测单控件（体温单控件）
最新实现的医疗系统中的三测单控件,很早之前(好像2年前),实现了一个体温单控件,那个时候,由于刚刚做Delphi没多久,所以,做的不是很灵活,很多东西都写死了,最终还是依靠东拼西凑的,凑了一个控件出来 ...
html 体温单源码,体温单三色单
[实例简介] 根据护理记录数据绘出体温单,三色单,附带源码 [实例截图] [核心代码] 体温单控件源码 └── 体温单控件源码 ├── TemperatureChart.dll ├── 体温单源码+数 ...
vue 绘制体温单与三测单组件实现前端js打印
更新: 代码开源 https://github.com/mydaoyuan/my-development 有帮助请帮忙点个 start .企鹅:1534815114 如何使用chatGPT辅助开发复杂 ...
html 绘制体温单,使用zrender.js绘制体温单效果
今天我们来画折线图效果图以下为模拟数据 [{"time":19,"text":"入\n院\n19\n时\n11\n分","po ...

使用vue+zrender绘制体温单三测单(1)

使用vue+zrender绘制体温单三测单(1)相关推荐

最新文章

热门文章

使用vue+zrender绘制体温单 三测单(1)

使用vue+zrender绘制体温单 三测单(1)相关推荐

最新文章

热门文章

使用vue+zrender绘制体温单三测单(1)

使用vue+zrender绘制体温单三测单(1)相关推荐