feat: 算子升级

src/components/UploadPro/index.tsx

@@ -21,6 +21,10 @@ export default defineComponent({
     accept: {
       type: String,
       default: '.zip,.tar,.gz,.tgz'
+    },
+    customRequest: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['done'],

src/pages/cvs/edge/forward.vue

@@ -9,7 +9,7 @@
 </a-card>
 
 <a-spin :spinning="spinning" >
-  <a-card style="margin-top: 20px;" :title="'转发' + (index + 1)" v-for="(item, index) in forwardList" :key="item.id">
+  <a-card style="margin-top: 20px;" :title="'转发事件' + (index === 0 ? '一' : '二')" v-for="(item, index) in forwardList" :key="item.id">
     <template #extra >
       <a-space>
         <a-popconfirm
@@ -20,17 +20,18 @@
         >
         <a-button >删除</a-button>
         </a-popconfirm>
-
         <a-button type="primary" @click="openRealViewDialog('update', item)">修改</a-button>
       </a-space>
     </template>
-    <a-descriptions :title="'id: ' + item.id">
+    <a-descriptions :column="2" :title="'id: ' + item.id">
       <a-descriptions-item label="创建时间">{{dayjs(item.createAt).format('YYYY/MM/DD HH:MM:ss')}}</a-descriptions-item>
       <a-descriptions-item label="事件类型">{{item.forwardType}}</a-descriptions-item>
       <a-descriptions-item label="Live">{{item.forwardConfig.defaultTimeout}}</a-descriptions-item>
       <a-descriptions-item label="端点地址">{{item.forwardConfig.endpointUrl}}</a-descriptions-item>
       <a-descriptions-item label="请求类型">{{item.forwardConfig.requestMethod}}</a-descriptions-item>
-      <a-descriptions-item label="请求头">{{item.forwardConfig.requestHeaders ? item.forwardConfig.requestHeaders : '-' }}</a-descriptions-item>
+      <a-descriptions-item  label="请求头参数" :span="3">
+        <a-table :pagination="false" :columns="[ { title: 'key', dataIndex: 'key' }, { title: 'value', dataIndex: 'value' }]" :data-source="Object.keys(item.forwardConfig.requestHeaders).map(key => ({key: key, value: item.forwardConfig.requestHeaders[key]})) " size="small" />
+      </a-descriptions-item>
     </a-descriptions>
   </a-card>
 </a-spin>
@@ -72,6 +73,22 @@
         <a-form-item label="默认时间"   >
           <a-input-number id="inputNumber" v-model:value="forwardState.forwardConfig.defaultTimeout" :min="1" />
         </a-form-item>
+        <a-form-item label="请求头参数"   >
+          <a-input-group style="margin-top: 10px;margin-bottom: 20px;" size="large" v-for="(item, index) in forwardState.forwardConfig.requestHeaders" :key="index">
+            <a-row :gutter="8">
+              <a-col :span="5">
+                <a-input allowClear style="height: 30px;" v-model:value="item.key" placeholder="key" />
+              </a-col>
+              <a-col :span="8">
+                <a-input allowClear style="height: 30px;"  v-model:value="item.value" placeholder="value" />
+              </a-col>
+              <a-col>
+                <a-button type="link" danger @click="forwardState.forwardConfig.requestHeaders.splice(index, 1)" >删除</a-button>
+              </a-col>
+            </a-row>
+          </a-input-group  >
+          <a-button  @click="addRequestHeaders" type="primary" >添加参数</a-button>
+        </a-form-item>
       </a-card>
     </a-form>
 
@@ -102,7 +119,7 @@ const forwardState = reactive({
     forwardType: 'HTTP', // HTTP 和KAFKA
     endpointUrl: '',
     requestMethod: 'GET',
-    requestHeaders: {},
+    requestHeaders: [],
     defaultTimeout: 10
   }
 })
@@ -111,6 +128,10 @@ const { resetFields, validate, validateInfos } = useForm(forwardState, {
   endpointUrl: [{ required: true, message: '请填写端点地址' }]
 })
 
+const addRequestHeaders = () => {
+  forwardState.forwardConfig.requestHeaders.push({ key: '', value: '' })
+}
+
 const delforawrd = async (record: CVS.AiBox.Forward) => {
   await AiboxController.delForward(record.id as unknown as string, record)
   getAiBoxForward()
@@ -133,6 +154,12 @@ const openRealViewDialog = (type: 'add' | 'update', record = {}) => {
 
 const ok = () => {
   validate().then(async () => {
+    const requestHeaders = {}
+    forwardState.forwardConfig.requestHeaders.forEach(item => {
+      requestHeaders[item.key] = item.value
+    })
+
+    forwardState.forwardConfig.requestHeaders = requestHeaders
     opraState.value === 'add' ? await AiboxController.addForward(forwardState as any) : await AiboxController.updateForward(forwardState as any)
     visible.value = false
     getAiBoxForward()

src/pages/cvs/edge/list.vue

@@ -84,7 +84,23 @@
         </a-form-item>
 
         <a-form-item label="压缩包" v-bind="validateInfos.file"  >
-          <UploadPro action="/cvs/file/upload" accept=".zip,.tar,.gz,.tgz" @done="uploadDone" />
+          <!--    :customRequest="customRequest" -->
+          <!--   :beforeUpload="customRequest" -->
+          <!--    @change="customRequest" -->
+          <a-upload-dragger
+              value="file"
+              name="file"
+              :showUploadList="false"
+              :maxCount="1"
+              :beforeUpload="customRequest"
+
+            >
+              <p class="ant-upload-drag-icon">
+                <InboxOutlined />
+              </p>
+              <a-button v-if="aiboxState.file">文件 {{aiboxState.fileName}} 上传成功，点击重新上传</a-button>
+              <p class="ant-upload-text" v-else>点击选择文件或者拖拽文件到此处</p>
+            </a-upload-dragger>
         </a-form-item>
     </a-form>
   </modal-pro>
@@ -98,6 +114,8 @@ import { useRouter } from 'vue-router'
 import { Form } from 'ant-design-vue'
 import { CopyTsx, InputTsx, SelectTsx } from '@/components/MicroComponents'
 import UploadPro from '@/components/UploadPro'
+import { InboxOutlined } from '@ant-design/icons-vue'
+import { format } from 'echarts'
 
 const router = useRouter()
 
@@ -150,10 +168,11 @@ const sysVisible = ref<boolean>(false)
 
 const levelUpVisble = ref(false)
 const aiboxState = reactive({
-  devId: '11',
+  clientId: '',
   aiId: '',
   version: '',
-  file: ''
+  file: '',
+  fileName: ''
 })
 
 const useForm = Form.useForm
@@ -164,8 +183,22 @@ const { resetFields, validate, validateInfos } = useForm(aiboxState, {
   aiId: [{ required: true, message: '请选择升级算法' }]
 })
 
-const uploadDone = (url) => {
-  aiboxState.file = url
+const uploadDone = (file) => {
+  console.log(file)
+  // aiboxState.file = url
+
+  const reader = new FileReader()
+  console.log(reader)
+}
+
+const customRequest = (file) => {
+  console.log('file:', file.name)
+
+  const fd = new FormData()
+  fd.append('file', file)
+  aiboxState.file = fd
+  aiboxState.fileName = file.name
+  return false
 }
 
 const getSys = async (record: CVS.AiBox.AiBox) => {
@@ -186,7 +219,7 @@ const pushVideo = (record: CVS.AiBox.AiBox) => {
 }
 
 const levelUpOk = async () => {
-  AiboxController.levelUp({ ...aiboxState })
+  AiboxController.levelUp({ ...aiboxState, devId: aiboxState.clientId })
 }
 
 const openlevelUpModal = (record: CVS.AiBox.AiBox) => {

src/pages/cvs/edge/manage.vue

@@ -1,11 +1,11 @@
 <template>
 <a-card title="事件管理" >
-
   <table-pro
     :service="AiboxController.event"
     :serviceParams="serviceParams"
     :columns="columns"
     ref="tableProDom"
+    :hiddenMeunKeys="['add']"
   >
   <template #search >
     <a-space>
@@ -40,11 +40,36 @@
           {{dayjs(record.saveTs).format('YYYY/MM/DD HH:MM:ss')}}
       </template>
       <template v-if="column.key === 'action'" >
-        <a>查看详情</a>
+        <a @click="openDetailModal(record)" >查看详情</a>
       </template>
     </template>
   </table-pro>
 </a-card>
+
+<modal-pro
+  style="width: 700px;"
+  :label="'事件名称-' + eventState?.EventName"
+  :open="detailVisible"
+  @cancel="detailVisible = false"
+  @ok="detailVisible = false"
+
+>
+  <a-descriptions :column="2">
+    <a-descriptions-item label="事件类型">{{AiboxController.eventTypeMap.get(eventState!.EventType)}}</a-descriptions-item>
+    <a-descriptions-item label="设备ID" >{{eventState?.DevID}}</a-descriptions-item>
+    <a-descriptions-item :span="2" label="摄像头ID">{{eventState?.Data.CameraID}}</a-descriptions-item>
+    <a-descriptions-item label="摄像头名称">{{eventState?.Data.CameraName}}</a-descriptions-item>
+    <a-descriptions-item label="任务名称">{{eventState?.Data.TaskName}}</a-descriptions-item>
+    <a-descriptions-item :span="2" label="记录类型">{{eventState?.Data.RecordType}}</a-descriptions-item>
+    <a-descriptions-item label="进入数量">{{eventState?.Data.EnterSum}}</a-descriptions-item>
+    <a-descriptions-item label="离开数量">{{eventState?.Data.ExitSum}}</a-descriptions-item>
+    <a-descriptions-item label="触发时间">{{eventState?.Data.TriggerTime}}</a-descriptions-item>
+    <a-descriptions-item label="保存时间">{{dayjs(eventState?.saveTs).format('YYYY/MM/DD HH:MM:ss')}}</a-descriptions-item>
+    <a-descriptions-item label="告警图片"><a-image style="width: 100px;" :src="eventState?.Data.WarnPic" ></a-image></a-descriptions-item>
+    <a-descriptions-item label="bkg图片"><a-image style="width: 100px;" :src="eventState?.Data.BkgPic" ></a-image></a-descriptions-item>
+  </a-descriptions>
+</modal-pro>
+
 </template>
 <script lang='ts' setup >
 import { AiboxController, SpaceController } from '@/controller'
@@ -80,6 +105,8 @@ const columns = [
   }
 ]
 
+const detailVisible = ref(false)
+
 const tableProDom = ref()
 
 const times = ref()
@@ -91,6 +118,8 @@ const serviceParams = ref({
   end: ''
 })
 
+const eventState = ref<CVS.AiBox.Event>()
+
 watch(
   () => times.value,
   () => {
@@ -99,6 +128,11 @@ watch(
   }
 )
 
+const openDetailModal = (record) => {
+  eventState.value = record
+  detailVisible.value = true
+}
+
 const search = () => {
   tableProDom.value.reload()
 }

vue.config.js

@@ -3,7 +3,6 @@ const proxy = require('./config/proxy.ts')
 const path = require('path')
 const { resolve } = require('path')
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
-
 module.exports = defineConfig({
   // publicPath: '',
   transpileDependencies: true,
@@ -21,7 +20,7 @@ module.exports = defineConfig({
   chainWebpack: config => {
     config.resolve.alias
       .set('ThingsUi', resolve(__dirname, '/'))
-      .set('AppConfig', resolve(__dirname, '/config/defaultSetting'))
+      .set('AppConfig', resolve(__dirname, './config/defaultSetting'))
     config.stats('none')
     config.mode('development')
   },