add mode input form

src/components/data-analysis/ControlPanel.vue

@@ -2,13 +2,22 @@
   <div>
     <va-card class="h-full">
       <va-card-content>
+        <!-- {{ simpleSelectModel}} -->
         <va-select
           v-model="simpleSelectModel"
-          :label="'Filter'"
+          :label="'Filter Mode'"
           text-by="description"
           track-by="id"
           :options="simpleOptions"
         />
+        <va-card-content>
+          <div v-if="simpleSelectModel.id === 1">
+            <va-slider v-model="VTModeModel" label="percentage(%)" track-label-visible :min="0" :max="50" />
+          </div>
+          <div v-else-if="simpleSelectModel.id === 2">b</div>
+          <div v-else></div>
+        </va-card-content>
+
         <va-button class="mt-2" @click="filterData">Start</va-button>
         <!-- <div v-if="simpleSelectModel.id === 1">
           <va-button>test</va-button>
@@ -24,11 +33,12 @@
   export default {
     emits: ['filter-data'],
     setup(props, { emit }) {
+      const VTModeModel = 5
       const simpleSelectModel = ref({})
       const simpleOptions = ref([
         {
           id: 1,
-          description: 'First option',
+          description: 'V-T mode',
         },
         {
           id: 2,
@@ -43,7 +53,7 @@
         emit('filter-data')
       }
 
-      return { props, simpleSelectModel, simpleOptions, filterData }
+      return { props, simpleSelectModel, simpleOptions, VTModeModel, filterData }
     },
   }
 </script>

src/pages/admin/data-analysis/DataAnalysis.vue

@@ -19,7 +19,7 @@
     setup() {
       // mqtt init
       const { startMqtt, publish } = useMqtt()
-      const controllerID = 'b8:27:eb:18:f8:cc'
+      const controllerID = 'dc:a6:32:0f:56:9d'
 
       // define subscribe and callback
       startMqtt(`${controllerID}/data_analysis/#`, (topic: string, message: ArrayBuffer) => {
@@ -40,18 +40,26 @@
 
         // stop loading
         linechart_ref.value?.stopLoading()
-
+        let yAxis_list = msg[2].map((x) => ({ yAxis: x }))
+        let coord_list = [{ coord: [msg[3][0][0], msg[3][0][1]] }, { coord: [msg[3][1][0], msg[3][1][1]] }]
+        // yAxis_list.append([{ coord:[ msg[3][0][0],msg[3][0][1]]},{ coord:[ msg[3][1][0], msg[3][1][1]]}])
+        yAxis_list.push(coord_list)
+        console.log('yAxis_list', yAxis_list)
         // draw line
         if (msg.length < 3) return true
         linechart_ref.value.setOption({
           series: [
             {
               markLine: {
-                data: [{ yAxis: msg[2] }, { yAxis: msg[3] }],
+                data: yAxis_list,
               },
             },
           ],
         })
+        // console.log('yAxis_list', yAxis_list)
+        // console.log('coord',coord_list)
+        // yAxis_list.push(coord_list)
+        // console.log('add',yAxis_list)
       })
 
       // reference
@@ -60,6 +68,7 @@
       // methods
       const filterData = function () {
         linechart_ref.value?.startLoading()
+        console.log(linechart_ref)
         publish(`${controllerID}_data_analysis/get_analysis_data`, JSON.stringify({}))
       }