使用vue+zrender繪制體溫單三測單(1)-有解無憂

先上預覽地址 http://106.12.212.110:8077/#/

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://www.uj5u.com/qiye/51742.html

標籤：JavaScript

上一篇：js陣列當前行添加資料

下一篇：react 插入html

使用vue+zrender繪制體溫單 三測單(1)

使用vue+zrender繪制體溫單三測單(1)