feat: ota

src/pages/Iot/model/components/plugins.vue

@@ -70,7 +70,7 @@ const state = reactive({
   input: '',
   pluginId: '',
   modelPluginBody: '',
-  pluginBody: 'function encode(payload) {\n  var jsonObj = {};   return JSON.stringify(jsonObj);\n }\n function decode(json) {\n var payload = [];\n return payload;\n }',
+  pluginBody: 'function encode(payload, topic) {\n  var jsonObj = {};   return JSON.stringify(jsonObj);\n }\n function decode(json) {\n var payload = [];\n return payload;\n }',
   result: ''
 })
 
@@ -105,7 +105,7 @@ const getPlugin = async () => {
   * @param byte[] payload   设备上报的原始码流
   * @return string json     符合产品模型定义的JSON格式字符串
   */
-function decode(payload) {
+function decode(payload, topic) {
   let jsonObj = {};
   return JSON.stringify(jsonObj);
 }

src/pages/Iot/model/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <a-card>
   <template #title>
-    <a-row :gutter="[8, 8]">
+    <a-row :gutter="[8, 8]" align="middle" >
       <a-col> <h1>{{state.model?.modelLabel}}</h1> </a-col>
       <a-col>
           <span class="subtitle" >ID: {{state.model?.id}}</span>

src/pages/Iot/ota/index.vue

@@ -0,0 +1,9 @@
+<template>
+<a-card>
+  ota
+</a-card>
+</template>
+<script lang='ts' setup >
+</script>
+<style lang='less' scoped >
+</style>

src/pages/task/compoentns/configArea.vue

@@ -0,0 +1,241 @@
+<template>
+  <modal-pro
+    label="配置区域"
+    :open="IProps.visible"
+    @cancel="emits('close')"
+    width="1100px"
+  >
+    <a-row :gutter="[8, 8]" >
+      <a-col span="13" >
+        <a-card title="绘制区域" >
+          <a-space>
+            <a-button @click="setDrawType(DrawTypeEnum.line)">线段</a-button>
+            <a-button type="primary" @click="setDrawType(DrawTypeEnum.rect)"  >区域</a-button>
+          </a-space>
+          <a-row style="width: 600px;height: 400px;" >
+            <img style="width: 100%;margin-top: 20px;" :src="'data:image/jpg;base64,' + state.taskImg " />
+            <canvas
+              ref="canvasRef"
+              id='canvas'
+              width="600"
+              height="400"
+              style="position: absolute; userSelect: none;"
+            ></canvas>
+          </a-row>
+        </a-card>
+
+      </a-col>
+      <a-col span="10">
+        <a-card title="绘制记录" >
+          <a-table
+            :columns="columns"
+          >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'AreaType'">
+              {{record.RuleType==2?(record.AreaType=='1'?'方向线':'辅助线'):(record.AreaType=='0'?'兴趣区域':(record.AreaType=='1'?'禁入区域':'岗位区域'))}}
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a >  {{record.isLineHeight ? '取消' : '高亮'}} </a>
+                <a-popconfirm
+                  title="确定要删除这个记录吗"
+                  ok-text="Yes"
+                  cancel-text="No"
+                  @confirm="delDrawRecord"
+                >
+                  <a >删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+        </template>
+        </a-table>
+        </a-card>
+      </a-col>
+    </a-row>
+  </modal-pro>
+<modal-pro
+  label="保存"
+  :open="state.saveModalVisible"
+  @cancel="state.saveModalVisible = false"
+  @ok="saveDrawRecord"
+>
+<a-form
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 14 }"
+  >
+    <a-form-item
+      label="标识"
+      v-bind="validateInfos.RuleId"
+    >
+      <a-input  v-model:value="drawRecordState.RuleId" />
+    </a-form-item>
+    <a-form-item
+      label="区域类别"
+      v-bind="validateInfos.AreaType"
+    >
+      <a-select
+        v-model:value="drawRecordState.AreaType"
+      >
+        <a-select-option
+          v-for="item in drawTypeMap.get(state.drawType)"
+          :key="item.value"
+          :value="item.value"
+        >
+          {{item.label}}
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item
+      label="关联算法"
+
+    >
+    <!--  v-bind="validateInfos.algorithm" -->
+      <!-- <a-select
+        v-model:value="drawRecordState.AreaType"
+      >
+        <a-select-option
+          v-for="item in itemData.taskAbility"
+          :key="item.value"
+          :value="item.value"
+        >
+          {{item.label}}
+        </a-select-option>
+      </a-select> -->
+    </a-form-item>
+</a-form>
+</modal-pro>
+</template>
+
+<script setup lang="ts" >
+import { TaskController } from '@/controller'
+import { onMounted, reactive, ref, watch } from 'vue'
+import { DrawController, DrawTypeEnum } from '@/utils/drawController'
+import { message, Form } from 'ant-design-vue'
+
+const IProps = defineProps<{
+  visible: boolean,
+  itemData: any
+}>()
+
+const drawTypeMap = new Map([
+  [0, [{ value: '0', label: '兴趣区域' }]],
+  [2, [{ value: '0', label: '辅助线' }, { value: '1', label: '方向线' }]]
+])
+
+const emits = defineEmits(['close'])
+
+const ctxProperty = {
+  0: {
+    lineWidth: 6,
+    fillStyle: 'rgba(235, 185, 216, 0.46)',
+    strokeStyle: '#A6D2E6',
+    lineCap: 'round',
+    lineJoin: 'round',
+    lineHeightStyle: 'rgba(255, 215, 0, 0.46)',
+    lineHeightLine: [10, 10]
+  },
+  2: {
+    lineWidth: 6,
+    strokeStyle: 'rgba(235, 143, 200, 0.46)',
+    lineCap: 'round',
+    lineHeightStyle: 'rgba(255, 215, 0, 0.46)',
+    lineHeightLine: [10, 10]
+  }
+}
+
+const columns = [
+  {
+    title: '标识',
+    dataIndex: 'RuleId',
+    key: 'RuleId'
+  },
+  {
+    title: '类型',
+    dataIndex: 'RuleTypeName',
+    key: 'RuleTypeName'
+  },
+  {
+    title: '关联算法',
+    dataIndex: 'algorithm',
+    key: 'algorithm'
+  },
+  {
+    title: '区域类型',
+    dataIndex: 'AreaType',
+    key: 'AreaType'
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action'
+  }
+]
+
+const drawControllerRef = ref<DrawController>()
+
+const canvasRef = ref()
+// const ref
+
+const state = reactive({
+  taskImg: '',
+  saveModalVisible: false,
+  drawType: 0
+})
+
+const drawRecordState = reactive({
+  RuleId: '',
+  AreaType: '',
+  algorithm: ''
+})
+
+const useForm = Form.useForm
+
+const { resetFields, validate, validateInfos } = useForm(drawRecordState, reactive({
+  RuleId: [{ required: true, message: '请输入区域标识' }],
+  AreaType: [{ required: true, message: '请选择区域类别' }],
+  algorithm: [{ required: true, message: '请选择关联算法' }]
+}))
+
+const saveDrawRecord = () => {
+
+}
+
+const setDrawType = (key: DrawTypeEnum) => {
+  drawControllerRef.value?.start()
+  drawControllerRef.value?.setDrawType(key)
+  state.drawType = key
+  message.info('开始绘画')
+}
+
+const delDrawRecord = () => {
+
+}
+
+const getTaskImg = async () => {
+  const data = await TaskController.getImg(IProps.itemData.taskStream)
+
+  state.taskImg = data
+}
+
+// 绘制结束
+const drawEndCallBack = () => {
+  state.saveModalVisible = true
+}
+
+watch(
+  () => IProps.itemData.taskStream,
+  () => {
+    // getTaskImg()
+  }
+)
+
+onMounted(() => {
+  drawControllerRef.value = new DrawController(canvasRef)
+  drawControllerRef.value.setProperty(ctxProperty[0])
+  drawControllerRef.value.drawEnd(drawEndCallBack)
+})
+
+</script>
+
+<style lang="less" scoped >
+</style>

src/router/index.ts

@@ -161,6 +161,12 @@ const iot = {
         }
       ]
     },
+    {
+      path: '/ota',
+      name: 'ota包管理',
+      icon: 'FolderAddOutlined',
+      component: () => import('@/pages/iot/ota/index.vue')
+    },
     {
       path: '/sys',
       name: '系统设置',