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

来源:https://www.cnblogs.com/hprBlog/archive/2020/06/29/13207923.html

先上預覽地址 http://106.12.212.110:8077/#/ 1.創建項目 使用vue init webpack temperaure 創建一個vue項目 然後安裝axios zrender 命令分別是 npm install axios -S npm install zrender安裝 ...


先上預覽地址 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 回覆體溫單

 


您的分享是我們最大的動力!

更多相關文章
  • Android app 本地設置信息的保存與調用。preferences.getString後面的文本是調用失敗後的預設顯示值。儲存值一定要實例化一個Editor出來,如果直接使用.edit().putString()不是不可以,但會每次調用都多出一個實例。最後記得要editor.apply()執行... ...
  • 基本類型(棧數據) String Number Boolean null undefined symbol(ES6) 引用類型(堆數據) Array Object Function Date RegExp 等 區分 棧小堆大 1.基礎類型是放置在棧裡面,一般基礎類型的數據都比較小,賦值不影響自身 v ...
  • vue是數據驅動視圖更新的框架, 所以對於vue來說組件間的數據通信非常重要,那麼組件之間如何進行數據通信的呢? 首先我們需要知道在vue中組件之間存在什麼樣的關係, 才更容易理解他們的通信方式, 就好像過年回家,坐著一屋子的陌生人,相互之間怎麼稱呼,這時就需要先知道自己和他們之間是什麼樣的關係。 ...
  • 延遲函數delay const delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms)) ​ const getData = status => new Promise((resolve, reject) => { ...
  • 前言 watch 是由用戶定義的數據監聽,當監聽的屬性發生改變就會觸發回調,這項配置在業務中是很常用。在面試時,也是必問知識點,一般會用作和 computed 進行比較。 那麼本文就來帶大家從源碼理解 watch 的工作流程,以及依賴收集和深度監聽的實現。在此之前,希望你能對響應式原理流程、依賴收集 ...
  • 標簽的分類 1. 雙標簽 又叫常規標簽 : 有開始標簽和結束標簽 eg: <div></div> <body></body> … 2. 單標簽 又叫空標簽 : 只有開始標簽 eg : <br> <img> <meta> … 標簽的說明 代碼只有要嵌套就會出現縮進, head 和body可以不縮進在 ...
  • 動態實現簡單的二級菜單 當滑鼠放到一級標簽上時,滑鼠會變成小手的形狀 展示二級菜單,源碼如下,複製即可直接使用 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" ...
  • dangerouslySetInnerHTML dangerouslySetInnerHTML 是 React 為瀏覽器 DOM 提供 innerHTML 的替換方案。通常來講,使用代碼直接設置 HTML 存在風險,因為很容易無意中使用戶暴露於跨站腳本(XSS)的攻擊。因此,你可以直接在 React ...
一周排行
  • C#6.0新特性 C#7.0新特性 C#8.0新特性 ...
  • out變數 可以直接在方法中使用out申明變數 int.TryParse("123", out var result); 元組 元組的申明 var alphaBetaStart = (alpha: "a", beta: "b"); Console.WriteLine($"{alphaBetaStar ...
  • 在我們的項目中,通常會把數據存儲到關係型資料庫中,比如Oracle,SQL Server,Mysql等,但是關係型資料庫對於併發的支持並不是很強大,這樣就會造成系統的性能不佳,而且存儲的數據多為結構化數據,對於非結構數據(比如文本)和半結構化數據(比如JSon) 就顯得不夠靈活,而非關係型資料庫則很 ...
  • 這幾天終於弄懂了async和await的模式,也搞明白了一直在心裡面積壓著的許多問題,所以寫一篇博客來和大家分享一下。 關於非同步機制我認為只要記住的以下幾點,就可以弄明白了: 1.我認為async和awwait兩個修飾符中最關鍵的是await,async是由於方法中包含await修飾符之後才在方法定 ...
  • 實現WCF的步驟如下: 設計服務協議 實現服務協議 配置服務 托管服務 生成客戶端(這步可有可無) 設計或定義服務協議要麼使用介面,要麼使用類。建議介面,使用介面好處一堆例如修改介面的實現,但是服務協定有無需改變。 設計服務協議,介面上使用 ServiceContractAttribute ,方法上 ...
  • 什麼鬼,我的CPF快寫好了,你居然也要搞跨平臺UI框架?什麼Maui? 之前怎麼不早說要搞跨平臺UI框架呢?看到谷歌搞flutter眼紅了?明年年底發佈?又搞這種追別人屁股的爛事情。 什麼MVU模式?模仿Dart?用C#代碼直接寫UI的模式和我的CPF很像啊。 當初我考慮過XML,Json來描述UI ...
  • 寫在前面 Docker作為開源的應用容器引擎,可以讓我們很輕鬆的構建一個輕量級、易移植的容器,通過Docker方式進行持續交付、測試和部署,都是極為方便的,並且對於我們開發來說,最直觀的優點還是解決了日常開發中的環境配置與部署環境配置上的差異所帶來的種種疑難雜症,從此推脫產品的措辭也少了——“我電腦 ...
  • 一、前言 回顧:認證授權方案之授權初識 從上一節中,我們在對授權系統已經有了初步的認識和使用,可以發現,asp.net core為我們提供的授權策略是一個非常強大豐富且靈活的認證授權方案,能夠滿足大部分的授權場景。 在ConfigureServices中配置服務:將授權服務添加到容器 public ...
  • 項目背景: 工作之餘兼職一家公司(方向是工業4.0)給做IM系統,主要功能包括:文字、 圖片、文件傳輸、遠程協助、視頻語音等等。這些功能都是基於群會話, 比如工廠操作工人遇到問題,請求遠程專家,這個初級專家不能解決問題,會邀請一個高級專家進來解決。開發過程中主要遇到的問題是視頻和語音這一塊,像其他的... ...
  • 基礎概念 Microsoft中間語言(MSIL),也成為通用中間語言(CIL),是一組與平臺無關的指令,由特定於語言的編譯器從源代碼生成。MSIL是獨立於平臺的,因此,他可以在任何公共語言基礎架構支持特定的環境上執行。 通過JIT編譯器將MSIL轉換為特定電腦環境的特定機器代碼。這是在執行MSIL ...