获取所有配方

src/components/Formula.vue

@@ -9,10 +9,18 @@
         <p>操作</p>
       </div>
       <div
-        :class="dataList?.length == 0 ? 'content_wrap layout' : 'content_wrap'"
+        :class="
+          formulaStore?.formulaList?.length == 0
+            ? 'content_wrap layout'
+            : 'content_wrap'
+        "
       >
-        <div class="line" v-for="item in dataList" :key="item">
-          <div class="username">Admin</div>
+        <div
+          class="line"
+          v-for="item in formulaStore?.formulaList"
+          :key="item.id"
+        >
+          <div class="username">{{ item?.formula_id }}</div>
           <div class="btns">
             <div class="btn" @click="delModalShow">删除</div>
             <div class="btn mg" @click="showSetting">配置</div>
@@ -20,7 +28,7 @@
           </div>
         </div>
         <svg
-          v-if="dataList?.length == 0"
+          v-if="formulaStore?.formulaList?.length == 0"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           fill="none"
@@ -106,12 +114,15 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import DelPreModal from 'cpns/dialogs/DelPreModal'
 import AddPreModal from 'cpns/dialogs/AddPreModal'
 import PreSetting from './PreSetting'
+import { getAllFormulaJSON } from '@/mock/command'
+import { useWebSocketStore, useFormulaStore } from '@/store'
 
-const dataList = ref([{}])
+const webSocketStore = useWebSocketStore()
+const formulaStore = useFormulaStore()
 
 const delPreModalVisible = ref(false)
 
@@ -148,6 +159,10 @@ const hideSettingModal = () => {
 const runConfig = () => {
   console.log('run config')
 }
+
+onMounted(() => {
+  webSocketStore.sendCommandMsg(getAllFormulaJSON)
+})
 </script>
 
 <style lang="scss" scoped>

src/mock/command.js

@@ -241,3 +241,9 @@ export const getUserBehaviorRecordDescJSON = (page, page_size) => {
     messageId: 'getUserBehaviorRecordDescJson',
   }
 }
+
+// 配方
+export const getAllFormulaJSON = {
+  command: 'getAllFormula',
+  messageId: 'getAllFormula',
+}

src/store/index.js

@@ -8,11 +8,13 @@ import { useUserStore } from './modules/user'
 import { useEchartsStore } from './modules/echarts'
 import { usePreStore } from './modules/preinstall'
 import { useAuditStore } from './modules/audit'
+import { useFormulaStore } from './modules/formula'
 const store = createPinia()
 
 export default store
 export {
   useTestStore,
+  useFormulaStore,
   useAuditStore,
   useSettingStore,
   useOperatorStore,

src/store/modules/formula.js

@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+export const useFormulaStore = defineStore({
+  id: 'formula', // id必填，且需要唯一
+  // state
+  state: () => {
+    return {
+      formulaList: [],
+    }
+  },
+  // actions
+  actions: {
+    updateFormulaList(formulaList) {
+      this.formulaList = formulaList
+    },
+  },
+})

src/store/modules/websocket.js

@@ -7,6 +7,7 @@ import { useOperatorStore } from './operator'
 import { useDeviceStore } from './device'
 import { useTestStore } from './test'
 import { useAuditStore } from './audit'
+import { useFormulaStore } from './formula'
 import { useEchartsStore } from './echarts'
 import { showSuccessToast, showFailToast } from 'vant'
 import { saveEchartsDataToLocal } from '@/utils'
@@ -34,6 +35,7 @@ export const useWebSocketStore = defineStore({
       const operatorStore = useOperatorStore()
       const echartsStore = useEchartsStore()
       const auditStore = useAuditStore()
+      const formulaStore = useFormulaStore()
       init.connect()
       init.ws.onmessage = function (ev) {
         const { ackcode, messageId, timeStamp } = JSON.parse(ev.data)
@@ -179,6 +181,10 @@ export const useWebSocketStore = defineStore({
           case 'exportDisinfectionRecord':
             settingStore.updateExportLoading(false)
             break
+          case 'getAllFormula':
+            const { formula } = JSON.parse(ev.data) || {}
+            formulaStore.updateFormulaList(formula || [])
+            break
           case 'getUserBehaviorRecordDescJson':
             const { records } = JSON.parse(ev.data) || {}
             const { iterms } = records || {}