Merge branch 'consoleWS' into 'master'

首页接入websocket接口

See merge request tian-group/skyeye-admin-fe!85

.env.development

@@ -14,7 +14,7 @@ VITE_DROP_CONSOLE = true
 # VITE_PROXY=[["/skyeye-admin-api","http://172.16.23.144:8800/api"]]
 #VITE_PROXY=[["/skyeye-admin-api","http://58.144.197.158:19980/skyeye-admin-api"],["/eye_api","http://58.144.197.158:19980/eye_api"],["/push_stream_host","http://58.144.197.158:19980/push_stream_host"],["/skyeye-login","http://58.144.197.158:19980/skyeye-login"]]
 # VITE_PROXY=[["/skyeye-admin-api","http://36.133.176.76:19980/skyeye-admin-api"],["/eye_api","http://36.133.176.76:19980/eye_api"],["/push_stream_host","http://36.133.176.76:19980/push_stream_host"],["/skyeye-login","http://36.133.176.76:19980/skyeye-login"]]
-VITE_PROXY=[["/skyeye-admin-api","http://172.16.23.144/skyeye-admin-api"],["/eye_api_bak","http://172.16.23.144/eye_api"],["/push_stream_host","http://172.16.23.144/push_stream_host"],["/skyeye-login","http://172.16.23.144/skyeye-login"]]
+VITE_PROXY=[["/skyeye-admin-api","http://172.16.23.144/skyeye-admin-api"],[],["/eye_api_bak","http://172.16.23.144/eye_api"],["/push_stream_host","http://172.16.23.144/push_stream_host"],["/skyeye-login","http://172.16.23.144/skyeye-login"],["/ws_api_bak","ws://172.16.23.144/ws_api_bak"]]
 # VITE_PROXY=[["/skyeye-admin-api","http://192.168.32.47/skyeye-admin-api"],["/eye_api","http://192.168.32.47/eye_api"],["/push_stream_host","http:/192.168.32.47/push_stream_host"],["/skyeye-login","http://192.168.32.47/skyeye-login"]]
 # API 接口地址
 VITE_GLOB_API_URL = 

src/hooks/setting/useWebsocket.ts

@@ -0,0 +1,54 @@
+/** 创建websocket */
+import { onUnmounted } from 'vue';
+import { useUserStore } from '@/store/modules/user';
+
+interface Params {
+  msg: string;
+  url?: string;
+}
+export const useWebsocket = (onMessage: (data: string) => unknown) => {
+  const userStore = useUserStore();
+
+  let ws: WebSocket;
+
+  function start({ msg, url }: Params) {
+    console.log('start msg', msg);
+    console.log({ url });
+
+    const defaultUrl = `/skyeye/${userStore.info.userId}`;
+
+    const path = url || defaultUrl;
+
+    ws = new WebSocket(
+      `${window.location.protocol.includes('https') ? 'wss://' : 'ws://'}${
+        window.location.host
+      }/ws_api_bak${path}`,
+    );
+
+    //ws = new WebSocket(`ws://172.16.23.144:8800${path}`);
+    ws.onmessage = function (e) {
+      console.log('wx onmessage send params', msg);
+      console.log('ws onmessage from server: ' + e.data);
+      const data = e.data;
+      onMessage(data);
+    };
+    ws.onopen = () => {
+      if (msg) {
+        ws.send(msg);
+      }
+    };
+  }
+
+  function close() {
+    // console.log("ws unmounted", msg);
+    ws?.close();
+  }
+
+  onUnmounted(() => {
+    close();
+  });
+
+  return { start };
+};
+
+export default useWebsocket;

src/views/dashboard/home/components/Score.vue

@@ -15,8 +15,8 @@
     <div class="score-divider"></div>
     <div class="score-right">
       <div class="concern-title">重点关注车间</div>
-      <ul class="concern-workspace">
-        <li v-for="workspace in workspaceList">{{ workspace }}</li>
+      <ul v-if="workshopList.length > 0" class="concern-workspace">
+        <li v-for="workshop in workshopList">{{ workshop }}</li>
       </ul>
       <div class="score-tip">
         <el-icon><Warning /></el-icon>
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
+  import { ref, onMounted } from 'vue';
   import { ScoreTimeList, TimeEnum } from '../types';
   import { computed } from 'vue';
   import VChart from 'vue-echarts';
@@ -42,6 +42,15 @@
     DataZoomComponent,
   } from 'echarts/components';
   import useScore from '../hooks/useScoreInfo';
+  import useWorkshopTop from '../hooks/useWorkshopTop';
+
+  const useTop = useWorkshopTop();
+  const { openTopWs, workshopList } = useTop;
+
+  onMounted(() => {
+    openTopWs();
+    console.log('workshopList', workshopList.value);
+  });
 
   const useHomeScore = useScore();
   const {
@@ -61,7 +70,7 @@
     DataZoomComponent,
   ]);
   const timeSelect = ref<TimeEnum>(TimeEnum.DAY);
-  const workspaceList = ['车间1', '车间2', '车间3'];
+  //const workspaceList = ['车间1', '车间2', '车间3'];
 
   const dataZoomConfig = computed(() => [
     {

src/views/dashboard/home/hooks/useWorkshopTop.ts

@@ -0,0 +1,26 @@
+import { ref } from 'vue';
+import useWebsocket from '@/hooks/setting/useWebsocket.ts';
+
+export const useWorkshopTop = () => {
+  const workshopList = ref<Array<string>>([]);
+  const { start } = useWebsocket(handleWorkshopData);
+  const openTopWs = () => {
+    const msg = JSON.stringify({
+      biz_type: 'workshop_score_ranking',
+    });
+    start({ msg });
+  };
+
+  function handleWorkshopData(data: string) {
+    const res = JSON.parse(data).data;
+    workshopList.value = res['workshopList'];
+    console.log('workshopList', workshopList.value);
+  }
+
+  return {
+    openTopWs,
+    workshopList,
+  };
+};
+
+export default useWorkshopTop;