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

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

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

 


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

-Advertisement-
Play Games
更多相關文章
  • 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 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...