V4修复: 组件改用VolPro框架proxy.http调用

web.vite/src/views/warehouse/device_manager/base_device/components/DeviceControlPanel.vue

@@ -11,16 +11,15 @@
   </el-dialog>
 </template>
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
 const props = defineProps({ modelValue: Boolean, device: Object })
 const emit = defineEmits(['update:modelValue'])
 const visible = computed({ get: () => props.modelValue, set: v => emit('update:modelValue', v) })
 const pointIndex = ref(0), value = ref(0)
-const send = async () => {
+const send = () => {
-  await fetch(`/api/gateway/realtime/${props.device?.adapterCode}/control`, {
+  const url = `api/gateway/realtime/${props.device?.adapterCode}/control`
-    method: 'POST', headers: {'Content-Type':'application/json'},
+  proxy.http.post(url, { deviceId: props.device?.sourceId, pointIndex: pointIndex.value, value: value.value })
-    body: JSON.stringify({ deviceId: props.device?.sourceId, pointIndex: pointIndex.value, value: value.value })
-  })
   visible.value = false
 }
 </script>

web.vite/src/views/warehouse/device_manager/base_device/components/DeviceLivePreview.vue

@@ -8,23 +8,19 @@
   </el-dialog>
 </template>
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, getCurrentInstance } from 'vue'
-
+const { proxy } = getCurrentInstance()
 const props = defineProps({ modelValue: Boolean, device: Object })
 const emit = defineEmits(['update:modelValue'])
 const visible = computed({ get: () => props.modelValue, set: v => emit('update:modelValue', v) })
 const stream = ref(null), loading = ref(false)
 const wsFlv = computed(() => stream.value?.wsFlv || stream.value?.httpFlv)
 const stop = () => { stream.value = null }
-
 watch(() => props.device, async (d) => {
   if (d && visible.value) {
     loading.value = true
-    try {
+    const url = `api/gateway/streams/${d.adapterCode}/${d.sourceId}/live`
-      const resp = await fetch(`/api/gateway/streams/${d.adapterCode}/${d.sourceId}/live`)
+    proxy.http.get(url, {}, true).then(r => { stream.value = r }).finally(() => loading.value = false)
-      stream.value = await resp.json()
-    } catch(e) {}
-    finally { loading.value = false }
   }
 }, { immediate: true })
 </script>

web.vite/src/views/warehouse/device_manager/base_device/components/PtzControlPanel.vue

@@ -16,16 +16,15 @@
   </el-dialog>
 </template>
 <script setup>
-import { computed } from 'vue'
+import { computed, getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
 const props = defineProps({ modelValue: Boolean, device: Object })
 const emit = defineEmits(['update:modelValue'])
 const visible = computed({ get: () => props.modelValue, set: v => emit('update:modelValue', v) })
 const send = (direction, speed = 0.5) => {
-  fetch(`/api/gateway/streams/${props.device?.adapterCode}/${props.device?.sourceId}/ptz`, {
+  const url = `api/gateway/streams/${props.device?.adapterCode}/${props.device?.sourceId}/ptz`
-    method: 'POST', headers: {'Content-Type':'application/json'},
+  proxy.http.post(url, { direction, action: direction === 'stop' ? 'stop' : 'continuous', speed })
-    body: JSON.stringify({ direction, action: 'continuous', speed })
-  })
 }
-const go = (d) => d === 'stop' ? send('stop') : send(d)
+const go = (d) => send(d)
 const stop = () => send('stop')
 </script>

web.vite/src/views/warehouse/device_manager/base_device/components/RealtimeDataPanel.vue

@@ -2,9 +2,7 @@
   <el-dialog v-model="visible" title="实时数据" width="600px">
     <el-table :data="values" v-loading="loading" stripe>
       <el-table-column prop="pointIndex" label="点位" width="80" />
-      <el-table-column prop="value" label="当前值" width="120">
+      <el-table-column prop="value" label="当前值" width="120" />
-        <template #default="{row}">{{ row.value }}{{ row.unit || '' }}</template>
-      </el-table-column>
       <el-table-column prop="updateTime" label="更新时间" min-width="160" />
       <el-table-column prop="interval" label="采集间隔(s)" width="100" />
     </el-table>
@@ -12,23 +10,19 @@
   </el-dialog>
 </template>
 <script setup>
-import { ref, computed, watch, onUnmounted } from 'vue'
+import { ref, computed, watch, onUnmounted, getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
 const props = defineProps({ modelValue: Boolean, device: Object })
 const emit = defineEmits(['update:modelValue'])
 const visible = computed({ get: () => props.modelValue, set: v => emit('update:modelValue', v) })
 const values = ref([]), loading = ref(false)
 let timer = null
-
+const fetchData = () => {
-const fetchData = async () => {
   if (!props.device) return
   loading.value = true
-  try {
+  const url = `api/gateway/realtime/${props.device.adapterCode}/${props.device.sourceId}`
-    const resp = await fetch(`/api/gateway/realtime/${props.device.adapterCode}/${props.device.sourceId}`)
+  proxy.http.get(url, {}, false).then(r => { values.value = r || [] }).finally(() => loading.value = false)
-    values.value = await resp.json()
-  } catch {}
-  finally { loading.value = false }
 }
-
 watch(visible, v => { if (v) { fetchData(); timer = setInterval(fetchData, 5000) } else { clearInterval(timer) } })
 onUnmounted(() => clearInterval(timer))
 </script>