feat:语音播报

package-lock.json

@@ -13,6 +13,8 @@
         "dayjs": "^1.11.10",
         "echarts": "^5.5.0",
         "element-ui": "^2.15.14",
+        "net": "^1.0.2",
+        "stompjs": "^2.3.3",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
         "vuex": "^3.6.2"
@@ -4083,6 +4085,19 @@
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
       "dev": true
     },
+    "node_modules/bufferutil": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
+      "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -5047,6 +5062,19 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/d": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
+      "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
+      "optional": true,
+      "dependencies": {
+        "es5-ext": "^0.10.64",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
@@ -5638,6 +5666,46 @@
       "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
       "dev": true
     },
+    "node_modules/es5-ext": {
+      "version": "0.10.64",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
+      "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "es6-iterator": "^2.0.3",
+        "es6-symbol": "^3.1.3",
+        "esniff": "^2.0.1",
+        "next-tick": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "optional": true,
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "node_modules/es6-symbol": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
+      "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
+      "optional": true,
+      "dependencies": {
+        "d": "^1.0.2",
+        "ext": "^1.7.0"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
@@ -6182,6 +6250,21 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/esniff": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
+      "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
+      "optional": true,
+      "dependencies": {
+        "d": "^1.0.1",
+        "es5-ext": "^0.10.62",
+        "event-emitter": "^0.3.5",
+        "type": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/espree": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
@@ -6305,6 +6388,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
+      "optional": true,
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
     "node_modules/event-pubsub": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/event-pubsub/-/event-pubsub-4.3.0.tgz",
@@ -6404,6 +6497,15 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
+    "node_modules/ext": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+      "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+      "optional": true,
+      "dependencies": {
+        "type": "^2.7.2"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7532,6 +7634,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
+      "optional": true
+    },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -8509,6 +8617,17 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/net": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/net/-/net-1.0.2.tgz",
+      "integrity": "sha512-kbhcj2SVVR4caaVnGLJKmlk2+f+oLkjqdKeQlmUtz6nGzOpbcobwVIeSURNgraV/v3tlmGIX82OcPCl0K6RbHQ=="
+    },
+    "node_modules/next-tick": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
+      "optional": true
+    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -8554,6 +8673,17 @@
         "node": ">= 6.13.0"
       }
     },
+    "node_modules/node-gyp-build": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.1.tgz",
+      "integrity": "sha512-OSs33Z9yWr148JZcbZd5WiAXhh/n9z8TxQcdMhIOlpN9AhWpLfvVFO73+m77bBABQMaY9XSvIa+qk0jlI7Gcaw==",
+      "optional": true,
+      "bin": {
+        "node-gyp-build": "bin.js",
+        "node-gyp-build-optional": "optional.js",
+        "node-gyp-build-test": "build-test.js"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -10926,6 +11056,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stompjs": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/stompjs/-/stompjs-2.3.3.tgz",
+      "integrity": "sha512-5l/Ogz0DTFW7TrpHF0LAETGqM/so8UxNJvYZjJKqcX31EVprSQgnGkO80tZctPC/lFBDUrSFiTG3xd0R27XAIA==",
+      "optionalDependencies": {
+        "websocket": "latest"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -11503,6 +11641,12 @@
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
       "dev": true
     },
+    "node_modules/type": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz",
+      "integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==",
+      "optional": true
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -11537,6 +11681,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "optional": true,
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
@@ -11640,6 +11793,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/utf-8-validate": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
+      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">=6.14.2"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -12374,6 +12540,23 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/websocket": {
+      "version": "1.0.35",
+      "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.35.tgz",
+      "integrity": "sha512-/REy6amwPZl44DDzvRCkaI1q1bIiQB0mEFQLUrhz3z2EK91cp3n72rAjUlrTP0zV22HJIUOVHQGPxhFRjxjt+Q==",
+      "optional": true,
+      "dependencies": {
+        "bufferutil": "^4.0.1",
+        "debug": "^2.2.0",
+        "es5-ext": "^0.10.63",
+        "typedarray-to-buffer": "^3.1.5",
+        "utf-8-validate": "^5.0.2",
+        "yaeti": "^0.0.6"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
@@ -12397,6 +12580,21 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/websocket/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "optional": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/websocket/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "optional": true
+    },
     "node_modules/whatwg-fetch": {
       "version": "3.6.20",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz",
@@ -12568,6 +12766,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/yaeti": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.32"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

package.json

@@ -14,6 +14,8 @@
     "dayjs": "^1.11.10",
     "echarts": "^5.5.0",
     "element-ui": "^2.15.14",
+    "net": "^1.0.2",
+    "stompjs": "^2.3.3",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

public/webConfig.js

@@ -1,3 +1,10 @@
 window.globalUrl = {
   baseURL: 'http://139.196.204.68:7015/',
 };
+
+// mqtt服务
+window.globalMQ = {
+  MQTT_SERVICE: 'ws://192.168.2.104:15674/ws', // mqtt服务地址(https需要用wss协议)
+  MQTT_USERNAME: 'admin', // mqtt连接用户名
+  MQTT_PASSWORD: 'admin', //mqtt连接密码
+};

src/views/scheduleList/index.vue

@@ -71,7 +71,7 @@
 
       <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex">
         <template v-for="(item, index) in patientList">
-          <div class="w-3 h-3 rounded-full bg-[#D8D8D8] mx-1" :class="{ 'bg-[#8C8D92]': index == activeIndex }" :key="index" />
+          <div class="w-3 h-3 rounded-full bg-[#D8D8D8] mx-1" :class="{ '!bg-[#8C8D92]': index == activeIndex }" :key="index" />
         </template>
       </div>
     </main>
@@ -97,14 +97,14 @@ export default {
     return {
       isLoading: true,
       mainRefHeight: 0,
-      showItemNum: 8,
+      showItemNum: 12,
       carouselNav: {},
       carouselWrap: {},
       carouselItemStyle: {},
       patientList: [],
       currentDateTime: dayjs().format('YYYY-MM-DD HH:mm dddd'),
       dateTimer: null,
-      carouselCountDown: 10,
+      carouselCountDown: 3,
       carouselTimer: null,
       activeIndex: 0,
       getDataTimer: null,
@@ -115,6 +115,7 @@ export default {
     textToColor,
     onGetPageData() {
       let today = dayjs().format('YYYY-MM-DD');
+      today = '2024-06-06';
       getAnesPatientList({
         ScheduledDateTime: today,
         Status: -1,

src/views/waitList/index.vue

@@ -51,7 +51,7 @@
 
       <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex">
         <template v-for="(item, index) in patientList">
-          <div class="w-3 h-3 rounded-full bg-[#D8D8D8] mx-1" :class="{ 'bg-[#8C8D92]': index == activeIndex }" :key="index" />
+          <div class="w-3 h-3 rounded-full bg-[#D8D8D8] mx-1" :class="{ '!bg-[#8C8D92]': index == activeIndex }" :key="index" />
         </template>
       </div>
     </main>
@@ -68,9 +68,11 @@
 
 <script>
 import { getAnesPatientList } from '@/api/waitList';
-import { Carousel, CarouselItem } from 'element-ui';
+import { Carousel, CarouselItem, Notification } from 'element-ui';
 import dayjs from 'dayjs';
 import { statusToTxt, textToColor } from '@/utils/common';
+import Stomp from 'stompjs';
+const { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } = window.globalMQ;
 
 export default {
   data() {
@@ -84,10 +86,11 @@ export default {
       patientList: [],
       currentDateTime: dayjs().format('YYYY-MM-DD HH:mm dddd'),
       dateTimer: null,
-      carouselCountDown: 10,
+      carouselCountDown: 3,
       carouselTimer: null,
       activeIndex: 0,
       getDataTimer: null,
+      popupMsg: '',
     };
   },
   methods: {
@@ -95,6 +98,7 @@ export default {
     textToColor,
     onGetPageData() {
       let today = dayjs().format('YYYY-MM-DD');
+      today = '2024-06-06';
       getAnesPatientList({
         ScheduledDateTime: today,
         Status: -1,
@@ -106,6 +110,7 @@ export default {
         IsPostoperativeAnalgesia: false,
         IsSurgicalFreezing: false,
         IsType: false,
+        client: null,
       })
         .then(res => {
           this.patientList = [];
@@ -158,6 +163,38 @@ export default {
     onCarouselChange(index) {
       this.activeIndex = index;
     },
+    setRabitMQ() {
+      this.client = Stomp.client(MQTT_SERVICE);
+      this.connect();
+    },
+    connect: function () {
+      const headers = {
+        login: MQTT_USERNAME,
+        passcode: MQTT_PASSWORD,
+      };
+      this.client.connect(headers, this.onConnected, this.onFailed);
+    },
+    onConnected: function () {
+      this.client.subscribe('/exchange/DeviceExchange/SignsNonStandard', this.responseCallback);
+    },
+    responseCallback: function (frame) {
+      try {
+        if (frame.body) {
+          let data = JSON.parse(frame.body);
+          this.popupMsg = data['msg'];
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    onFailed: function (frame) {
+      console.log('MQ Failed: ' + frame);
+      setTimeout(() => {
+        this.client = Stomp.client(MQTT_SERVICE);
+        Stomp.over(this.client);
+        this.connect();
+      }, 5000);
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -173,12 +210,37 @@ export default {
         this.onGetPageData();
       }, 35000);
       window.addEventListener('resize', this.onCalculate);
+      this.setRabitMQ();
     });
   },
   components: {
     'el-carousel': Carousel,
     'el-carousel-item': CarouselItem,
   },
+  watch: {
+    popupMsg(newVal) {
+      if (newVal) {
+        const h = this.$createElement;
+        Notification({
+          title: '呼叫患者',
+          message: h('i', { style: 'color: teal;font-size:24px' }, newVal),
+          duration: 10000,
+        });
+        if ('speechSynthesis' in window) {
+          const utterance = new SpeechSynthesisUtterance([newVal, newVal, newVal].join(''));
+          utterance.onend = function () {
+            Notification.closeAll();
+            this.newVal = '';
+          };
+          window.speechSynthesis.speak(utterance);
+        } else {
+          alert('您的浏览器不支持语音合成');
+        }
+
+        console.log(newVal);
+      }
+    },
+  },
   computed: {
     formatDate() {
       const timeArr = this.currentDateTime.split(' ');