接口缓存验证

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.editorconfig

@@ -0,0 +1,8 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 140
+root = true

.env

@@ -0,0 +1,3 @@
+VUE_APP_MODE=production
+VUE_APP_PREVIEW=false
+VUE_APP_URL=http://www.tall.wiki/

.env.development

@@ -0,0 +1,10 @@
+VUE_APP_MODE=development
+VUE_APP_NODE_ENV=development
+VUE_APP_SCENE=wisdomcar
+VUE_APP_BASE_URL=http://www.tall.wiki/
+VUE_APP_API_URL=http://www.tall.wiki/gateway
+VUE_APP_PROXY_URL=/gateway
+VUE_APP_PUBLIC_PATH=/wisdomcar
+VUE_APP_MSG_URL=wss://www.tall.wiki/websocket/message/v4.0/ws
+VUE_APP_TITLE=盐湖区人民医院数字看板
+VUE_APP_DESCRIPTION=盐湖区人民医院数字看板s

.env.production

@@ -0,0 +1,10 @@
+VUE_APP_MODE=production
+VUE_APP_NODE_ENV=production
+VUE_APP_SCENE=wisdomcar
+VUE_APP_BASE_URL=http://www.tall.wiki/
+VUE_APP_API_URL=http://www.tall.wiki/gateway
+VUE_APP_PROXY_URL=/gateway
+VUE_APP_PUBLIC_PATH=/wisdomcar
+VUE_APP_MSG_URL=wss://www.tall.wiki/websocket/message/v4.0/ws
+VUE_APP_TITLE=盐湖区人民医院数字看板
+VUE_APP_DESCRIPTION=盐湖区人民医院数字看板

.eslintrc.js

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2019.
+ * author: wally
+ * email: 18603454788@163.com
+ */
+
+module.exports = {
+  root: true,
+  env: { browser: true, node: true },
+  extends: ['plugin:vue/recommended', 'plugin:vue/essential'],
+
+  rules: {
+    'vue/html-self-closing': 'off',
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-param-reassign': ['error', { props: true, ignorePropertyModificationsFor: ['state'] }],
+    'max-len': ['error', { code: 140, tabWidth: 2 }],
+    'object-curly-newline': ['error', { multiline: true }],
+    'arrow-parens': ['error', 'as-needed'],
+    'linebreak-style': 'off',
+    'vue/attributes-order': 'off',
+    'no-param-reassign': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/html-indent': 'off',
+  },
+
+  parserOptions: { parser: 'babel-eslint' },
+
+  overrides: [
+    {
+      files: ['**/__tests__/*.{j,t}s?(x)'],
+      env: { jest: true },
+    },
+  ],
+
+  globals: {
+    Vue: true,
+    VueRouter: true,
+    Vuex: true,
+    axios: true,
+    _: true,
+    Vuetify: true,
+    vuetify: true,
+  },
+};

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "printWidth": 140,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "proseWrap": "always",
+  "endOfLine": "lf"
+}

README.md

@@ -0,0 +1,24 @@
+# 盐湖区人民医院数字看板
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: "ant-design-vue",
+        libraryDirectory: "es",
+        style: true
+      }
+    ]
+  ]
+};

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = {extends: ['./node_modules/vue-cli-plugin-commitlint/lib/lint']};

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "salt-lake-hospital",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "ant-design-vue": "^1.2.4",
+    "compression-webpack-plugin": "^6.1.1",
+    "core-js": "^3.6.5",
+    "echarts": "^4.9.0",
+    "echarts-gl": "^1.1.1",
+    "js-md5": "^0.7.3",
+    "moment": "^2.29.1",
+    "register-service-worker": "^1.7.1",
+    "stylus": "^0.54.8",
+    "vue": "^2.6.11",
+    "vue-dompurify-html": "^2.3.0",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-pwa": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "axios": "^0.18.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-import": "^1.11.0",
+    "css-loader": "^5.0.1",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "less": "^2.7.3",
+    "less-loader": "^4.1.0",
+    "prettier": "^1.19.1",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "svg-sprite-loader": "^5.0.0",
+    "vue-cli-plugin-ant-design": "^1.0.1",
+    "vue-cli-plugin-axios": "^0.0.4",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

public/img/icons/safari-pinned-tab.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
+</svg>

public/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="./favicon.ico">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

rest/http-client.env.json

@@ -0,0 +1,15 @@
+{
+  "$shared": {
+    "version": "v1",
+    "identifier": "wally",
+    "credential": "111111"
+  },
+  "dev": {
+    "name": "dev",
+    "url": "http://192.168.0.99/gateway"
+  },
+  "local": {
+    "version": "v2",
+    "url": "http://192.168.0.99/gateway"
+  }
+}

rest/project.http

@@ -0,0 +1,72 @@
+# @tall = {{url}}/tall/v1.0
+@tall = http://www.tall.wiki/gateway/tall/v1.0
+@greenvalley = http://www.sxwikionline.com/gateway/greenvalley
+@record = https://www.tall.wiki/gateway/wisdomcar
+@type = content-type: application/json;charset=utf-8
+
+### login
+
+# @name login
+POST {{tall}}/users/signin
+{{type}}
+
+{
+  "client": 1,
+  "type": 3,
+  "data": {
+    "identifier": "song",
+    "credential": "999999"
+  }
+}
+
+### send code
+
+GET {{tall}}/users/smscode?phone=16603418748
+
+
+### phone login
+
+# @name phonelogin
+POST {{tall}}/users/signin
+{{type}}
+
+{
+  "client": 1,
+  "type": 1,
+  "data": {
+    "identifier": "16603418748",
+    "credential": "1111"
+  }
+}
+
+### 根据团队id查看研发团队相关信息
+
+POST {{greenvalley}}/researchTeam/selectTeam
+{{type}}
+Authorization: Bearer {{login.response.body.$.data.token}}
+
+{
+  "param": {
+    "company": "",
+    "researchDirection": "",
+    "teamId": 0,
+    "teamIntroduce": "",
+    "teamLeaderName": "",
+    "teamName": ""
+  }
+}
+
+### 根据团队id查看研发团队相关信息
+
+POST {{record}}/debug/record
+{{type}}
+# Authorization: Bearer {{login.response.body.$.data.token}}
+
+{
+  "param":{
+    "authId": "1",
+    "type": "2",
+    "value":"21",
+    "time":"1607937529000"
+  }
+}

src/App.vue

@@ -0,0 +1,50 @@
+<template>
+  <a-config-provider :locale="zh_CN">
+    <div id="app">
+      <router-view></router-view>
+    </div>
+  </a-config-provider>
+</template>
+
+<script>
+import { mapState, mapActions, mapMutations } from 'vuex';
+import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
+
+export default {
+  name: 'App',
+  data() {
+    return { zh_CN };
+  },
+
+  computed: mapState('home', ['anyringToken']),
+
+  created() {
+    // const userId = '1338747522436435968';
+    // const params = { userId };
+    // this.getUserId(params);
+  },
+
+  methods: mapActions('home', ['getUserId']),
+};
+</script>
+
+<style>
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
+#app {
+  background: transparent;
+}
+body::-webkit-scrollbar {
+  width: 0;
+}
+</style>
+
+
+<style lang="stylus">
+@import './common/portrait.styl';
+@import './common/index.styl';
+</style>

src/common/index.styl

@@ -0,0 +1,130 @@
+.wrap{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background-size: 100% 100%;
+}
+
+.wrap .bg-left{
+    position: absolute;
+    pointer-events: auto;
+    left: 10px;
+    top: 16px;
+    width: 12px;
+    height: 96%;
+}
+
+.wrap .bg-top{
+    position: absolute;
+    width: 97%;
+    margin: 0 auto;
+    height: 100.64px;
+    left: 1.5%;
+    top: 0;
+    z-index: 9;
+}
+
+.wrap .bg-top .animation{
+    position: absolute;
+    top: -1px;
+    left: 14%;
+    width: 72%;
+    height: 162px;
+}
+
+// .wrap .bg-top .animation video{
+//     width: 1346px;
+//     height: 162px;
+//     object-fit: fill;
+//     mix-blend-mode: screen;
+//     filter: saturate(200%);
+// }
+
+.wrap .bg-top .bg-title{
+    position: absolute;
+    left: 33%;
+    top: 1px;
+    width: 34%;
+    height: 66px;
+    line-height: 60px;
+    font-size: 50px;
+    color: #fff;
+    text-align: center;
+    overflow: hidden;
+    cursor: pointer;
+    pointer-events: auto;
+    transform: rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(0.8) translate(0px, 0px);
+    text-shadow: #0075ff 0px 0px 8px;
+}
+
+@media (max-width: 1500px){
+    .wrap .bg-top .bg-title{
+        font-size: 38px;
+    }
+}
+
+.wrap .bg-right{
+    position: absolute;
+    pointer-events: auto;
+    right: 10px;
+    top: 16px;
+    width: 12px;
+    height: 96%;
+}
+
+.wrap .bg-bottom{
+    position: absolute;
+    pointer-events: auto;
+    left: 34px;
+    top: 96%;
+    width: 96%;
+    height: 13px;
+}
+
+.wrap .pic{
+    width: 100%;
+    height: 100%;
+}
+
+.content{
+    position: absolute;
+    top: 9%;
+    left: 2%;
+    width: 96%;
+    height: 87%;
+}
+
+.box-top{
+    width:100%;
+    height: 10px;
+    background-size: 100% 100%;
+    text-align: center;
+}
+
+.box-top span{
+    display: inline-block;
+    position: relative;
+    top: -10px;
+    z-index: 999;
+    text-shadow: rgb(0, 117, 255) 0px 0px 8px;
+    font-family: SourceHanSansCN-Bold;
+    font-size: 1.2rem;
+    font-weight: bold;
+    text-align: center;
+    letter-spacing: 0px;
+}
+
+.box-bottom{
+    width:100%;
+}
+
+.s-pic{
+    width:191.85px;
+    height: 107.85px;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    border-radius: 6px;
+    overflow: hidden;
+}

src/common/portrait.styl

@@ -0,0 +1,279 @@
+// padding
+.pa-3 {
+  padding: 12px;
+}
+
+.px-2{
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.px-3{
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.px-10{
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.pb-3 {
+  padding-bottom: 12px;
+}
+
+.pb-4 {
+  padding-bottom: 16px;
+}
+
+.pb-5 {
+  padding-bottom: 20px;
+}
+
+.pb-10 {
+  padding-bottom: 40px;
+}
+
+// margin
+.ma-2 {
+  margin: 8px;
+}
+
+.ma-3 {
+  margin: 12px;
+}
+
+.mx-2{
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.my-2{
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.my-3{
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+.my-4{
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.mt-1{
+  margin-top: 4px;
+}
+
+.mt-2{
+  margin-top: 8px;
+}
+
+.mt-3{
+  margin-top: 12px;
+}
+
+.mt-4{
+  margin-top: 16px;
+}
+
+.mb-1{
+  margin-bottom: 4px;
+}
+
+.mb-2{
+  margin-bottom: 8px;
+}
+
+.mb-3{
+  margin-bottom: 12px;
+}
+
+.mb-4{
+  margin-bottom: 16px;
+}
+
+.ml-2{
+  margin-left: 8px;
+}
+
+.ml-3{
+  margin-left: 12px;
+}
+
+.ml-4{
+  margin-left: 16px;
+}
+
+.ml-5{
+  margin-left: 20px;
+}
+
+.ml-6{
+  margin-left: 24px;
+}
+
+.ml-7{
+  margin-left: 28px;
+}
+
+.ml-8{
+  margin-left: 32px;
+}
+
+.mr-1{
+  margin-right: 4px;
+}
+
+.mr-2{
+  margin-right: 8px;
+}
+
+.mr-3{
+  margin-right: 12px;
+}
+
+.mr-4{
+  margin-right: 16px;
+}
+
+.mr-5{
+  margin-right: 20px;
+}
+
+.mr-6{
+  margin-right: 24px;
+}
+
+// background
+.white {
+  background: white;
+}
+
+// flex
+.d-flex{
+  display: flex;
+}
+
+.flex-wrap{
+  flex-wrap: wrap;
+}
+
+.flex-nowrap{
+  flex-wrap: nowrap;
+}
+
+.flex-column{
+  flex-direction: column;
+}
+
+.flex-column-reverse{
+  flex-direction: column-reverse;
+}
+
+.flex-row{
+  flex-direction: row;
+}
+
+.flex-row-reverse{
+  flex-direction: row-reverse;
+}
+
+.justify-center{
+  justify-content: center;
+}
+
+.justify-space-between{
+  justify-content: space-between;
+}
+
+.align-center{
+  align-items: center;
+}
+
+.flex-1{
+  display: flex;
+  flex: 1;
+}
+
+.flex-2{
+  display: flex;
+  flex: 2;
+}
+// other
+.pointer{
+  cursor:pointer;
+}
+
+.fill-height{
+  height:100%;
+}
+
+// font
+.font-bold-24{
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.font-24{
+  font-size: 24px;
+}
+
+.font-bold-16{
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.font-16{
+  font-size: 16px;
+}
+
+.font-bold-14{
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.font-14{
+  font-size: 14px;
+}
+
+.icon-size{
+  font-size: 20px;
+}
+
+h2{
+  font-size: 24px;
+  font-weight: bold;
+  color: rgba(0,0,0,.85)
+}
+
+.textColor{
+  color: rgba(0,0,0,.65)
+}
+
+.baseColor{
+  color: #13ACC4
+}
+
+.bg{
+  background: #F5F5F5
+}
+
+.ant-btn-primary{
+  background-color: #13ACC4
+  border-color: #13ACC4;
+}
+
+.ant-btn-link:hover, .ant-btn-link:focus{
+  color: #13ACC4;
+}
+
+.fill-width{
+  width:100%;
+}
+
+.fill-height{
+  height:100%;
+}

src/config/api-user.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2020.
+ * author: wally
+ * email: 18603454788@163.com
+ */
+import axios from 'axios';
+let { proxyUrl, msgUrl } = require('@/config/setting');
+
+const tall = `${proxyUrl}/tall/v1.0`;
+const users = `${tall}/users`;
+
+// 查找用户详细信息
+export const getUserId = params => axios.get(`${users}/userId`, params);

src/config/api.js

@@ -0,0 +1,43 @@
+/*
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-06-05 12:16:54
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-05 09:55:21
+ */
+
+import axios from 'axios';
+let { proxyUrl, msgUrl } = require('@/config/setting');
+
+const wisdomcar = `${proxyUrl}/wisdomcar`; // 盐湖医院分路径
+const statistics = `${wisdomcar}/statistics`; // 盐湖医院相关接口
+const rfid = `${wisdomcar}/rfid`; // rfid增删改查界面相关
+
+// websocket基础地址
+export const WS_BASE_URL = msgUrl;
+
+// 按钮模拟信息发送
+export const record = params => axios.post(`${wisdomcar}/debug/record`, params);
+
+// 急救数量统计图数据
+export const selResult = params => axios.post(`${statistics}/get/selResult`, params);
+// 急救时长分析统计图数据
+export const getPointTime = params => axios.post(`${statistics}/getPointTime`, params);
+
+// 环节查询
+export const queryStepList = params => axios.post(`${rfid}/queryStepList`, params);
+
+// 医院查询
+export const queryHospitalList = params => axios.post(`${rfid}/queryHospitalList`, params);
+
+// rfid删除
+export const rfidDel = params => axios.post(`${rfid}/del`, params);
+
+// rfid新增
+export const rfidSave = params => axios.post(`${rfid}/save`, params);
+
+// rfid修改
+export const rfidUpdate = params => axios.post(`${rfid}/update`, params);
+
+// rfid查询
+export const rfidQuery = params => axios.post(`${rfid}/query`, params);

src/config/setting.js

@@ -0,0 +1,30 @@
+const title = process.env.VUE_APP_TITLE;
+const description = process.env.VUE_APP_DESCRIPTION;
+const baseUrl = process.env.VUE_APP_BASE_URL;
+const apiUrl = process.env.VUE_APP_API_URL;
+const proxyUrl = process.env.VUE_APP_PROXY_URL;
+const publicPath = process.env.VUE_APP_PUBLIC_PATH;
+const msgUrl = process.env.VUE_APP_MSG_URL;
+
+module.exports = {
+  // 首页标题
+  title,
+
+  // 首页描述信息
+  description,
+
+  // 基础地址
+  baseUrl,
+
+  // api基础地址
+  apiUrl,
+
+  // 消息系统地址
+  msgUrl,
+
+  // api代理地址
+  proxyUrl,
+
+  // 生成文件目录 publicPath
+  publicPath,
+};

src/config/user.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2019.
+ * author: wally
+ * email: 18603454788@163.com
+ */
+
+// 用户登录client
+export const SIGN_IN_CLIENTS = { mp: 0, h5: 1, android: 2, ios: 3 };
+
+// 用户登录类型
+export const SIGN_IN_TYPES = {
+  mp: 0,
+  phone: 1,
+  email: 2,
+  username: 3,
+  wx: 4,
+  wx_web: 5,
+  wb: 6,
+};

src/main.js

@@ -0,0 +1,29 @@
+/*
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-09 09:10:13
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-09 10:10:58
+ */
+// @ts-ignore
+import Vue from 'vue';
+import './plugins/axios';
+import App from './App.vue';
+import './registerServiceWorker';
+import router from './router';
+import store from './store';
+import './plugins/ant-design-vue.js';
+import 'common/portrait.styl';
+import md5 from 'js-md5';
+// import './assets/icon/iconfont.css';
+// import VueDOMPurifyHTML from 'vue-dompurify-html';
+// import moment from 'moment'; //导入文件
+// Vue.prototype.$moment = moment; //赋值使用
+Vue.prototype.$md5 = md5;
+Vue.config.productionTip = false;
+
+window.vm = new Vue({
+  router,
+  store,
+  render: h => h(App),
+}).$mount('#app');

src/mixins/socket.js

@@ -0,0 +1,237 @@
+import { WS_BASE_URL } from 'config/api';
+import { mapGetters, mapMutations } from 'vuex';
+
+let connected = false; // socket 是否连接
+let socket = null; // websocket 实例
+let lockSocket = false;
+let socketMsgQueue = []; //  socket消息队列
+let prevTimestamp = 0; // 上次收到消息的时间戳
+let sendHeartTimer = null; // 💓的timer计时器
+
+const mixin = {
+  // computed: mapGetters('home', ['projectId']),
+
+  mounted() {
+    socket ? socket.close() : this.initSocket();
+  },
+
+  methods: {
+    ...mapMutations('messages', [
+      'messagesAdd',
+      'messagesAddWeight',
+      'setStartMessages',
+      'messagesAddRfid',
+      'messagesAddWeighSensor1',
+      'messagesAddWeighSensor2',
+      'messagesAddWeighSensor3',
+      'messagesAddWeighSensor4',
+      'messagesAddVibrationSensor',
+      'messagesAddThrombolyticDose',
+      'messagesAddBolusDose',
+      'messagesAddMaintenanceDose',
+    ]),
+    // ...mapMutations('home', ['increaseProjectsRingNum']),
+
+    // 初始化websocket
+    initSocket() {
+      if (lockSocket) return;
+      lockSocket = true;
+      // const token = sessionStorage.getItem('anyringToken');
+      // if (!token) return;
+      if ('WebSocket' in window) {
+        socket = new WebSocket(WS_BASE_URL);
+        socket.onopen = this.websocketOpen;
+        socket.onmessage = this.websocketOnMessage;
+        socket.onclose = this.websocketClose;
+        socket.onerror = this.websocketError;
+      } else {
+        // @ts-ignore
+        this.$message.error('当前浏览器不支持 websocket');
+      }
+      lockSocket = false;
+    },
+
+    /**
+     * 处理收到的消息内容
+     * @param {object} item 单个消息体对象
+     */
+    handleMessagesData(item) {
+      const data = JSON.parse(item.data);
+      switch (data.type) {
+        case 'ChannelStatus': // 认证消息
+          this.handleAuthMessage(data);
+          break;
+        case 'CarRecord': // 平车
+          // if (!data.data.type) return;
+          switch (data.data.type) {
+            case 0: // 开始
+              // 收到开始消息
+              this.setStartMessages(true);
+              this.messagesAddRfid(null);
+              break;
+            case 1: // 体重
+              // 收到同步消息
+              // 把消息添加到store 的消息栈中
+              this.messagesAddWeight(data.data.value);
+              break;
+            case 2: // RFID
+              this.messagesAddRfid(data.data);
+              console.log('data.data: ', data.data);
+              break;
+            case 3: // 称重传感器一
+              this.messagesAddWeighSensor1(data.data.value);
+              break;
+            case 4: // 称重传感器二
+              this.messagesAddWeighSensor2(data.data.value);
+              break;
+            case 5: // 称重传感器三
+              this.messagesAddWeighSensor3(data.data.value);
+              break;
+            case 6: // 称重传感器四
+              this.messagesAddWeighSensor4(data.data.value);
+              break;
+            case 7: // 震动传感器
+              this.messagesAddVibrationSensor(data.data);
+              break;
+            case 8: // 溶栓剂量（总量）
+              this.messagesAddThrombolyticDose(data.data.value);
+              break;
+            case 9: // 团注剂量
+              this.messagesAddBolusDose(data.data.value);
+              break;
+            case 10: // 维持剂量
+              this.messagesAddMaintenanceDose(data.data.value);
+              break;
+            default:
+              break;
+          }
+
+          break;
+
+        default:
+          break;
+      }
+    },
+    /**
+     *
+     * data:{
+     *  data: {
+     *    value: ''
+     * },
+     *  type: '',
+     * }
+     */
+    /**
+     * 收到ws 消息
+     * @param {object} res 收到的消息数据
+     */
+    async websocketOnMessage(res) {
+      try {
+        prevTimestamp = Date.now();
+        // console.warn('message: ', res, new Date().toLocaleString());
+        if (res && res.data && JSON.parse(res.data)) {
+          const resData = JSON.parse(res.data);
+          const { messageSet, ackId } = resData;
+          // 处理消息体对象
+          messageSet.forEach(item => this.handleMessagesData(item));
+          // console.log('ackId', ackId);
+          // 有ackId 发送ack
+          ackId && this.sendSocketMessage({ type: 'Ack', data: { ackId } });
+        }
+      } catch (error) {
+        console.error('error: ', error);
+      }
+    },
+
+    // 打开socket
+    websocketOpen() {
+      // console.warn('socket 打开成功', new Date().toLocaleString());
+      connected = true;
+      prevTimestamp = Date.now();
+      this.auth();
+      for (let i = 0; i < socketMsgQueue.length; i += 1) {
+        this.sendSocketMessage(socketMsgQueue[i]);
+      }
+      socketMsgQueue = [];
+    },
+
+    // 发送消息
+    sendSocketMessage(data) {
+      // console.warn('send:', data, new Date().toLocaleString());
+      if (connected) {
+        if (socket.readyState === 1) {
+          socket.send(JSON.stringify({ toDomain: 'Server', data: JSON.stringify(data) }));
+        }
+      } else {
+        socketMsgQueue.push(data);
+      }
+    },
+
+    // 关闭socket
+    websocketClose(e) {
+      // console.warn(e);
+      connected = false;
+      if (sendHeartTimer) clearInterval(sendHeartTimer);
+      // console.warn('close:', connected, new Date().toLocaleString());
+      if (!e || e.code !== 1005) {
+        socket.close();
+      }
+
+      setTimeout(() => {
+        // connected 在这里的作用是:
+        // 在发生重连 但是还没连上之前 不要再次重连
+        this.initSocket();
+      }, 300);
+    },
+
+    // 连接失败
+    websocketError() {
+      console.warn('error = ', connected);
+    },
+
+    // websocket发送token进行认证
+    auth() {
+      // const token = sessionStorage.getItem('anyringToken');
+      // if (!token) return;
+      const userId = '1338747522436435968';
+      const data = { type: 'Auth', data: { userId }, major: 1, minor: 1 };
+      this.sendSocketMessage(data);
+    },
+
+    // 心跳检测
+    sendHeart() {
+      if (sendHeartTimer) clearInterval(sendHeartTimer);
+      sendHeartTimer = setInterval(() => {
+        if (Date.now() - prevTimestamp >= 15000) {
+          this.sendSocketMessage({ type: 'Ping' });
+
+          if (Date.now() - prevTimestamp > 20000) {
+            // console.warn('手动断开');
+            socket.close();
+          }
+        }
+      }, 5000);
+    },
+
+    /**
+     * 处理auth认证返回的ChannelStatus消息
+     * @param {object} data 消息内容对象
+     */
+    handleAuthMessage(data) {
+      if (data.data.authed) {
+        // 认证成功
+        this.sendHeart();
+      } else {
+        this.$message.error('消息系统认证失败, 请重新登录');
+        // 清除掉本地无用的token
+        sessionStorage.removeItem('anyringToken');
+        socket = null;
+        setTimeout(() => {
+          this.$router.push('/user/login');
+        }, 1000);
+      }
+    },
+  },
+};
+
+export default mixin;

src/plugins/ant-design-vue.js

@@ -0,0 +1,74 @@
+import Vue from 'vue';
+import {
+  Pagination,
+  Button,
+  Input,
+  message,
+  notification,
+  Modal,
+  Tag,
+  Table,
+  Tabs,
+  Icon,
+  Empty,
+  Form,
+  Select,
+  Upload,
+  Badge,
+  Popconfirm,
+  DatePicker,
+  Switch,
+  Radio,
+  Dropdown,
+  Menu,
+  Row,
+  Col,
+  Timeline,
+  Checkbox,
+  BackTop,
+  Progress,
+  carousel,
+  Spin,
+} from 'ant-design-vue';
+import { ConfigProvider } from 'ant-design-vue';
+Vue.component(ConfigProvider.name, ConfigProvider);
+Vue.use(Pagination);
+Vue.use(Button);
+Vue.use(Input);
+Vue.use(Modal);
+Vue.use(Tag);
+Vue.use(Table);
+Vue.use(Tabs);
+Vue.use(Icon);
+Vue.use(Empty);
+Vue.use(Form);
+Vue.use(Select);
+Vue.use(Upload);
+Vue.use(Badge);
+Vue.use(Popconfirm);
+Vue.use(DatePicker);
+Vue.use(Switch);
+Vue.use(Radio);
+Vue.use(Dropdown);
+Vue.use(Menu);
+Vue.use(Row);
+Vue.use(Col);
+Vue.use(Timeline);
+Vue.use(Checkbox);
+Vue.use(BackTop);
+Vue.use(Progress);
+Vue.use(carousel);
+Vue.use(Spin);
+
+Vue.prototype.$message = message;
+Vue.prototype.$notification = notification;
+Vue.prototype.$info = Modal.info;
+Vue.prototype.$success = Modal.success;
+Vue.prototype.$error = Modal.error;
+Vue.prototype.$warning = Modal.warning;
+Vue.prototype.$confirm = Modal.confirm;
+
+message.config({
+  duration: 3,
+  maxCount: 3,
+});

src/plugins/axios.js

@@ -0,0 +1,77 @@
+'use strict';
+
+import Vue from 'vue';
+import axios from 'axios';
+import router from '../router/index';
+import store from '../store/index';
+
+// Full config:  https://github.com/axios/axios#request-config
+// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
+// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+let config = {
+  // baseURL: process.env.baseURL || process.env.apiUrl || ""
+  timeout: 60 * 1000, // Timeout
+  // withCredentials: true, // Check cross-site Access-Control
+};
+
+const _axios = axios.create(config);
+axios.interceptors.request.use(
+  function(config) {
+    let token = store.state.anyringToken || sessionStorage.getItem('anyringToken');
+
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  function(error) {
+    // Do something with request error
+    return Promise.reject(error);
+  },
+);
+
+// Add a response interceptor
+axios.interceptors.response.use(
+  function(response) {
+    if (response.data && response.data.code >= 400 && response.data.code < 500) {
+      store.commit('user/sign', '');
+      router.replace({
+        path: '/user/login',
+        query: { redirect: router.currentRoute.fullPath },
+      });
+    }
+    // Do something with response data
+    return response;
+  },
+  function(error) {
+    // Do something with response error
+    return Promise.reject(error);
+  },
+);
+
+Plugin.install = function(Vue) {
+  Vue.axios = _axios;
+  window.axios = _axios;
+  Object.defineProperties(Vue.prototype, {
+    axios: {
+      get() {
+        return _axios;
+      },
+    },
+    $axios: {
+      get() {
+        return _axios;
+      },
+    },
+    $http: {
+      get() {
+        return _axios;
+      },
+    },
+  });
+};
+
+Vue.use(Plugin);
+
+export default Plugin;

src/registerServiceWorker.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-console */
+
+import { register } from "register-service-worker";
+
+if (process.env.NODE_ENV === "production") {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready() {
+      console.log(
+        "App is being served from cache by a service worker.\n" +
+          "For more details, visit https://goo.gl/AFskqB"
+      );
+    },
+    registered() {
+      console.log("Service worker has been registered.");
+    },
+    cached() {
+      console.log("Content has been cached for offline use.");
+    },
+    updatefound() {
+      console.log("New content is downloading.");
+    },
+    updated() {
+      console.log("New content is available; please refresh.");
+    },
+    offline() {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
+    },
+    error(error) {
+      console.error("Error during service worker registration:", error);
+    }
+  });
+}

src/router/index.js

@@ -0,0 +1,29 @@
+/*
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-06-05 12:16:54
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-09 09:11:07
+ */
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import Home from 'views/Index/Index.vue';
+
+Vue.use(VueRouter);
+
+const routes = [
+  // 首页
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+  },
+];
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;

src/store/index.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2019.
+ * author: wally
+ * email: 18603454788@163.com
+ */
+
+import Vue from 'vue';
+import Vuex from 'vuex';
+import home from './modules/home/index';
+import messages from './modules/messages/index';
+
+Vue.use(Vuex);
+export default new Vuex.Store({ modules: { home, messages } });

src/store/modules/home/actions.js

@@ -0,0 +1,28 @@
+import axios from 'axios';
+import { message } from 'ant-design-vue';
+import { getUserId } from 'config/api-user';
+
+const actions = {
+  /**
+   * 通过userId获取token
+   * @param {any} commit
+   * @param {object} params 提交的参数
+   */
+  async getUserId({ commit }, params) {
+    try {
+      const res = await getUserId({ params });
+      const { code, msg, data } = res.data;
+      if (code === 200) {
+        commit('sign', data.token);
+        commit('setUser', data);
+        return data;
+      } else {
+        throw msg;
+      }
+    } catch (error) {
+      throw error || '获取个人信息失败';
+    }
+  },
+};
+
+export default actions;

src/store/modules/home/getters.js

@@ -0,0 +1,7 @@
+const getters = {};
+// 域定制导航展示形式
+// 0 -> 无特殊导航文字
+// 1 -> 横向定制导航
+// 2 -> 纵向定制导航
+
+export default getters;

src/store/modules/home/index.js

@@ -0,0 +1,6 @@
+import mutations from './mutations';
+import actions from './actions';
+import getters from './getters';
+import state from './state';
+
+export default { namespaced: true, state, getters, mutations, actions };

src/store/modules/home/mutations.js

@@ -0,0 +1,24 @@
+const mutations = {
+  /**
+   * 设置token
+   * @param { object } state
+   * @param { string } token
+   */
+  sign(state, token) {
+    state.anyringToken = token;
+    sessionStorage.setItem('anyringToken', token);
+  },
+
+  /**
+   * 设置user用户信息
+   * @param {object} state
+   * @param {object} user {id, account, phone}
+   */
+  setUser(state, user) {
+    if (!user) return;
+    state.user = { ...user };
+    sessionStorage.setItem('user', JSON.stringify(user));
+  },
+};
+
+export default mutations;

src/store/modules/home/state.js

@@ -0,0 +1,6 @@
+const state = {
+  anyringToken: '',
+  user: { id: '', phone: '', account: '' },
+};
+
+export default state;

src/store/modules/messages/actions.js

@@ -0,0 +1,7 @@
+import http from 'axios';
+import { message } from 'ant-design-vue';
+import {} from 'config/api';
+
+const actions = {};
+
+export default actions;

src/store/modules/messages/getters.js

@@ -0,0 +1,3 @@
+const getters = {};
+
+export default getters;

src/store/modules/messages/index.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2019.
+ * author: wally
+ * email: 18603454788@163.com
+ */
+import mutations from './mutations';
+import actions from './actions';
+import getters from './getters';
+import state from './state';
+
+export default { namespaced: true, state, getters, mutations, actions };

src/store/modules/messages/mutations.js

@@ -0,0 +1,181 @@
+const mutations = {
+  /**
+   * 初始化消息栈
+   * @param {object} state
+   * @param {string} type
+   * type:
+   * syncMessages 同步消息栈
+   * checkMessages 交付物消息栈
+   * faultMessages 故障消息 未处理消息栈
+   * faults 所有的故障消息栈
+   */
+  messagesInit(state, type) {
+    const messages = localStorage.getItem(type) ? JSON.parse(localStorage.getItem(type)) : [];
+    state[type] = messages;
+  },
+
+  /**
+   * 将新 消息添加到 消息栈 最前边
+   * @param { object } state
+   * @param { object } data
+   * data: message, type
+   * message 消息对象
+   * type:
+   * syncMessages 同步消息栈
+   * checkMessages 交付物消息栈
+   * faultMessages 故障消息 未处理消息栈
+   * faults 所有的故障消息栈
+   *
+   * cache: boolean true 本地存储 false 不存储
+   */
+  messagesAdd(state, data) {
+    const messages = state[data.type];
+    if (messages.length > 0) {
+      const result = messages.find(msg => msg.id === data.message.id);
+      if (result) return;
+    }
+    messages.unshift(data.message);
+    // eslint-disable-next-line no-param-reassign
+    state[data.type] = messages;
+    if (data.cache) {
+      localStorage.setItem(data.type, JSON.stringify(messages));
+    }
+  },
+
+  /**
+   * 通过消息id移除指定 同步 消息
+   * @param { object } state
+   * @param { object } data
+   * data: messageId, type
+   * messageId: 要移除的消息的messageId
+   * type:
+   * syncMessages 同步消息栈
+   * checkMessages 交付物消息栈
+   * faultMessages 故障消息 未处理消息栈
+   * faults 所有的故障消息栈
+   * cache: boolean true 本地存储 false 不存储
+   */
+  messagesRemoveById(state, data) {
+    const messages = state[data.type];
+    const index = messages.findIndex(msg => msg.id === data.messageId);
+    if (index < 0) return;
+    messages.splice(index, 1);
+    // eslint-disable-next-line no-param-reassign
+    state[data.type] = messages;
+    if (data.cache) {
+      localStorage.setItem(data.type, JSON.stringify(messages));
+    }
+  },
+
+  /**
+   * 清除指定type的消息
+   * @param {any} state
+   * @param {object} data
+   * data: type, cache
+   */
+  messagesClear(state, data) {
+    state[data.type] = [];
+    if (data.cache) {
+      localStorage.removeItem(data.type);
+    }
+  },
+
+  /**
+   * 添加体重消息
+   * @param {*} state
+   * @param {*} data
+   */
+  messagesAddWeight(state, data) {
+    state.weightMessage = data;
+  },
+
+  /**
+   * 添加RFID消息
+   * @param {*} state
+   * @param {*} data
+   */
+  messagesAddRfid(state, data) {
+    state.rfidMessage = data;
+  },
+
+  /**
+   * 添加称重传感器一消息
+   * @param {*} state
+   * @param {*} data
+   */
+  messagesAddWeighSensor1(state, data) {
+    state.weighSensor1 = data;
+  },
+
+  /**
+   * 添加称重传感器二消息
+   * @param {*} state
+   * @param {*} data
+   */
+  messagesAddWeighSensor2(state, data) {
+    state.weighSensor2 = data;
+  },
+
+  /**
+   * 添加称重传感器三消息
+   * @param {*} state
+   * @param {*} data
+   */
+  messagesAddWeighSensor3(state, data) {
+    state.weighSensor3 = data;
+  },
+
+  /**
+   * 添加称重传感器四消息
+   * @param {*} state
+   * @param {*} data
+   */
+  messagesAddWeighSensor4(state, data) {
+    state.weighSensor4 = data;
+  },
+
+  /**
+   * 添加震动传感器消息
+   * @param {*} state
+   * @param {*} data
+   */
+  messagesAddVibrationSensor(state, data) {
+    state.vibrationSensor = data;
+  },
+
+  /**
+   * 添加溶栓剂量（总量）消息
+   * @param {*} state
+   * @param {*} data
+   */
+  messagesAddThrombolyticDose(state, data) {
+    state.thrombolyticDose = data;
+  },
+
+  /**
+   * 添加团注剂量消息
+   * @param {*} state
+   * @param {*} data
+   */
+  messagesAddBolusDose(state, data) {
+    state.bolusDose = data;
+  },
+
+  /**
+   * 添加维持剂量消息
+   * @param {*} state
+   * @param {*} data
+   */
+  messagesAddMaintenanceDose(state, data) {
+    state.maintenanceDose = data;
+  },
+  /**
+   * 重新开始
+   * @param {*} state
+   * @param {*} data
+   */
+  setStartMessages(state, data) {
+    state.startMessages = data;
+  },
+};
+export default mutations;

src/store/modules/messages/state.js

@@ -0,0 +1,16 @@
+const state = {
+  startMessages: false, // 是否重新开始 true为开始
+  syncMessages: [], // 同步消息
+  weightMessage: 0, // 体重
+  rfidMessage: null, // RFID
+  weighSensor1: 0, // 称重传感器一
+  weighSensor2: 0, // 称重传感器二
+  weighSensor3: 0, // 称重传感器三
+  weighSensor4: 0, // 称重传感器四
+  vibrationSensor: null, // 震动传感器
+  thrombolyticDose: 0, // 溶栓剂量（总量）
+  bolusDose: 0, // 团注剂量
+  maintenanceDose: 0, // 维持剂量
+};
+
+export default state;

src/views/Index/Index.vue

@@ -0,0 +1,166 @@
+<!--
+ * @Author: aBin
+ * @email: binbin0314@126.com
+ * @Date: 2021-07-09 09:10:14
+ * @LastEditors: aBin
+ * @LastEditTime: 2021-07-09 10:24:25
+-->
+<template>
+  <div>1223</div>
+</template>
+
+<script>
+export default {
+  name: 'Index',
+  data() {
+    return {
+      nowTime: new Date(),
+      str: '',
+      showVideo: false,
+    };
+  },
+
+  created() {
+    this.justifyIndexDEB();
+    console.log('hello world', this.$md5('hello world'));
+  },
+  methods: {
+    justifyIndexDEB() {
+      if ('indexedDB' in window) {
+        // 支持
+        console.log(' 支持indexedDB...');
+        this.createindexDB(); //创建数据库，接下来我们就到这里来了嘛
+      } else {
+        // 不支持
+        console.log('不支持indexedDB...');
+        window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
+      }
+    },
+    createindexDB() {
+      const that = this;
+      //1-我们先创建一个对象，放一些数据比如dbInfo ，可以设置数据库名字dbName，数据库的版本dbVersion
+
+      var dbInfo = {
+        dbName: 'DataBase',
+        dbVersion: 2021,
+        dbInstance: {},
+      };
+
+      //2-创建数据库 indexedDB.open方法用于打开数据库。返回的是一个对象，第一个参数是数据库名称，格式为字符串。第二个参数是数据库版本。
+
+      var openRequest = window.indexedDB.open(dbInfo.dbName, dbInfo.dbVersion);
+
+      //3-创建数据库时会处罚三个事件之一，这三个事件，分别是upgradeneeded，success，onerror，意思就不说了吧，不懂得可以用字典查嘛。
+
+      openRequest.onupgradeneeded = function(e) {
+        //第一次打开数据库 ^-*
+
+        console.log('第一次打开该数据库，或者数据库版本发生变化....', new Date().getTime());
+        var db = e.target.result;
+        var storeNames = db.objectStoreNames;
+
+        //创建数据库的表格（或者叫数据库仓库）
+        if (!storeNames.contains('chart')) {
+          db.createObjectStore('chart', { keyPath: 'id' });
+        }
+      };
+
+      openRequest.onsuccess = function(e) {
+        //success：打开成功^-^
+        console.log('数据库打开成功...', new Date().getTime());
+        var db = e.target.result;
+        var trans = db.transaction(['chart'], 'readwrite');
+        var store = trans.objectStore('chart');
+
+        //4-这里面我要写很多要调用的函数了，比如，下面.....wu la wu la.....
+
+        that.addData(db); //数据库中添加数据   ------->xian说这个啦
+        // del_data(db); //数据库中删除数据
+        // deal_data(db); //读取数据
+        // traverse_data(db); //遍历数据
+        that.read(db);
+        that.update_data(db); //更新数据（类似于Add方法）
+      };
+
+      openRequest.onerror = function(e) {
+        //error：打开失败*-*
+        console.log('数据库打开失败...');
+        console.dir(e);
+      };
+    },
+    addData(db) {
+      var name = '添加数据';
+      //1-把前面创建的数据库，传递过来
+      var db = db;
+      //2-返回一个事务对象,indexDB 数据库只有  readwrite 以及readonly两个可爱的状态。
+      var tt = db.transaction(['chart'], 'readwrite');
+      //3-objectStore方法用于返回指定的对象仓库(数据库表格)对象。
+      var store = tt.objectStore('chart');
+      //4-创建一个要添加的对象。
+      let list = [];
+      for (let i = 0; i < 10000; i++) {
+        list.push(i);
+      }
+      var o = {
+        id: 100,
+        list,
+      };
+      //5-添加数据：add方法的第一个参数是所要添加的数据，第二个参数是这条数据对应的键名（key）
+      var request = store.add(o);
+      //6-添加数据：add方法也有两个事件，一个error一个success可以在回调函数中调用。
+      request.onerror = function(e) {
+        console.log('Error', e.target.error.name);
+        // error handler
+        console.log('数据添加失败...');
+      };
+      request.onsuccess = function(e) {
+        // success handler
+        console.log('数据添加成功...', new Date().getTime());
+      };
+    },
+    read(db) {
+      const that = this;
+      var transaction = db.transaction(['chart']);
+      var objectStore = transaction.objectStore('chart');
+      var request = objectStore.get(100);
+
+      request.onerror = function(event) {
+        console.log('事务失败');
+      };
+
+      request.onsuccess = function(event) {
+        if (request.result) {
+          console.log('通过索引获取数据:', request.result, new Date().getTime());
+          console.log(that.$md5(JSON.stringify(request.result)));
+        } else {
+          console.log('未获得数据记录');
+        }
+      };
+    },
+    update_data(db) {
+      //1-把前面创建的数据库，传递过来
+      var db = db;
+      //2-返回一个事务对象,indexDB 数据库只有  readwrite 以及readonly两个可爱的状态。 返回一个事务对象。
+
+      var trans = db.transaction(['chart'], 'readwrite');
+      var store = trans.objectStore('chart');
+
+      //3-创建一个要添加的对象，类似于add方法，但是这里对象的名称一定要和前面一样。
+      let list = [];
+      for (let i = 10000; i < 20000; i++) {
+        list.push(i);
+      }
+      var o = {
+        id: 100,
+        list,
+      };
+      //4-更新记录：put方法。
+      var request = store.put(o);
+      console.log('已更新数据', new Date().getTime());
+      this.read(db);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped></style>

vue.config.js

@@ -0,0 +1,138 @@
+/*
+ * Copyright (c) 2019.
+ * author: wally
+ * email: 18603454788@163.com
+ */
+const path = require('path');
+const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg|ttf|woff|woff2)(\?.*)?$/i;
+const CompressionWebpackPlugin = require('compression-webpack-plugin');
+
+const resolve = dir => path.join(__dirname, dir);
+const isPro = process.env.VUE_APP_NODE_ENV === 'production';
+const publicPath = process.env.VUE_APP_PUBLIC_PATH;
+const proxyUrl = process.env.VUE_APP_PROXY_URL;
+const apiUrl = process.env.VUE_APP_API_URL;
+const title = process.env.VUE_APP_TITLE;
+console.log('proxyUrl: ', proxyUrl);
+console.log('apiUrl: ', apiUrl);
+
+// 本地环境是否需要使用cdn
+const devNeedCdn = true;
+
+// cdn 链接及配置
+const cdn = {
+  css: [
+    'https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css',
+    'https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.6.5/antd.min.css',
+  ],
+  js: [
+    isPro ? 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js' : 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js',
+    'https://cdn.bootcdn.net/ajax/libs/vue-router/3.4.3/vue-router.min.js',
+    'https://cdn.bootcdn.net/ajax/libs/vuex/3.5.1/vuex.min.js',
+    'https://cdn.bootcdn.net/ajax/libs/moment.js/2.9.0/moment.min.js',
+    'https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.min.js',
+    'https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js',
+    'https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.6.5/antd.min.js',
+  ],
+  // externals: {
+  //   vue: 'Vue',
+  //   vuex: 'Vuex',
+  //   'vue-router': 'VueRouter',
+  //   moment: 'moment',
+  //   axios: 'axios',
+  //   'ant-design-vue': 'antd',
+  //   lodash: '_',
+  // },
+};
+
+module.exports = {
+  lintOnSave: true,
+  publicPath: isPro ? publicPath : '/',
+  devServer: {
+    open: true,
+    overlay: {
+      warnings: false,
+      errors: true,
+    },
+    proxy: {
+      [proxyUrl]: {
+        target: apiUrl, // 代理接口
+        changeOrigin: true,
+        pathRewrite: { [`^${proxyUrl}`]: '' },
+      },
+    },
+  },
+  productionSourceMap: false, // 去掉生产环境的sourcemap 加快构建速度
+
+  configureWebpack: {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+
+    name: title,
+    resolve: {
+      alias: {
+        '~': __dirname,
+        '@': resolve('src'),
+        assets: resolve('src/assets'),
+        views: resolve('src/views'),
+        components: resolve('src/components'),
+        common: resolve('src/common'),
+        config: resolve('src/config'),
+        router: resolve('src/router'),
+        store: resolve('src/store'),
+        util: resolve('src/util'),
+        request: resolve('src/request'),
+      },
+    },
+    plugins: isPro
+      ? [
+          new CompressionWebpackPlugin({
+            test: productionGzipExtensions,
+            threshold: 10240,
+            deleteOriginalAssets: false,
+          }),
+        ]
+      : [],
+    externals: isPro || devNeedCdn ? cdn.externals : {},
+  },
+
+  chainWebpack(config) {
+    if (isPro) {
+      config.optimization
+        .runtimeChunk('single')
+        .minimize(true)
+        .splitChunks({
+          chunks: 'all',
+          maxInitialRequests: Infinity,
+          minSize: 20000, // 依赖包超过20000bit将被单独打包
+          cacheGroups: {
+            vendor: {
+              test: /[\\/]node_modules[\\/]/,
+              name(module) {
+                // get the name. E.g. node_modules/packageName/not/this/part.js
+                // or node_modules/packageName
+                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+                // npm package names are URL-safe, but some servers don't like @ symbols
+                return `npm.${packageName.replace('@', '')}`;
+              },
+            },
+          },
+        });
+    }
+
+    // set svg-sprite-loader
+    // config.module
+    //   .rule('svg')
+    //   .exclude.add(resolve('src/icons'))
+    //   .end();
+    // config.module
+    //   .rule('icons')
+    //   .test(/\.svg$/)
+    //   .include.add(resolve('src/icons'))
+    //   .end()
+    //   .use('svg-sprite-loader')
+    //   .loader('svg-sprite-loader')
+    //   .options({ symbolId: 'icon-[name]' })
+    //   .end();
+  },
+};