使用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 回復體溫單