feat: 任务中心

src/api/iot/task.ts

@@ -1,9 +1,53 @@
 import request from '@/service/request'
 
-export const getTaskPage = (params: {page: number, pageSize: number, taskLabel?: string, status?: boolean}) => {
-  return request<IOT.API.DEVICE.Device[]>({
+export const getTaskPage = (params: {page: number, pageSize: number, taskLabel?: string, status?: boolean | string}) => {
+  return request<IOT.API.TASK.Task[]>({
     url: '/task/page',
     method: 'GET',
     params
   })
 }
+
+export const postTask = (data: any) => {
+  return request<string>({
+    url: '/task',
+    method: 'POST',
+    data
+  })
+}
+
+export const updateTask = (data: any) => {
+  return request<string>({
+    url: '/task',
+    method: 'PUT',
+    data
+  })
+}
+
+export const getTaskCount = () => {
+  return request<IOT.API.TASK.Statistics>({
+    url: '/task/cout',
+    method: 'GET'
+  })
+}
+
+export const getTaskById = (id: string) => {
+  return request<IOT.API.TASK.Task>({
+    url: `/task/${id}`,
+    method: 'GET'
+  })
+}
+
+export const updateTaskStatus = (id: string, status: boolean) => {
+  return request<IOT.API.TASK.Task>({
+    url: `/task/status?id=${id}&status=${status}`,
+    method: 'PUT'
+  })
+}
+
+export const delTask = (id: string) => {
+  return request<string>({
+    url: `/task/${id}`,
+    method: 'DELETE'
+  })
+}

src/controller/iot/task.ts

@@ -1,7 +1,36 @@
-import { getTaskPage } from '@/api/iot/task'
+import { delTask, getTaskById, getTaskCount, getTaskPage, postTask, updateTask, updateTaskStatus } from '@/api/iot/task'
+import { message } from 'ant-design-vue'
 
 export class TaskController {
-  static async taskPage (params: {page: number, pageSize: number, taskLabel?: string, status?: boolean}) {
+  static async page (params: {page: number, pageSize: number, taskLabel?: string, status?: boolean | string}) {
     return getTaskPage(params)
   }
+
+  static async del (id: string) {
+    await delTask(id)
+    message.success('删除成功')
+  }
+
+  static async byId (id: string) {
+    return await getTaskById(id)
+  }
+
+  static async statistics () {
+    return getTaskCount()
+  }
+
+  static async add (data: any) {
+    await postTask(data)
+    message.success('新增成功')
+  }
+
+  static async update (data: any) {
+    await updateTask(data)
+    message.success('修改成功')
+  }
+
+  static async updateStatus (id: string, status: boolean) {
+    await updateTaskStatus(id, status)
+    message.success('修改成功')
+  }
 }

src/pages/Iot/device/index.vue

@@ -49,7 +49,6 @@
       :pagination="searchState"
       @change="changePage"
     >
-
       <template #bodyCell="{column, record}">
         <template v-if="column.key === 'id'" >
           <a @click="goDetailPage(record.id)">{{record.id}}</a>

src/pages/Iot/model/models.vue

@@ -1,9 +1,86 @@
 <template>
 <a-card>
+  <a-table
+    style="margin-top: 20px;"
+    :columns="columns"
+    :data-source="state.dataSource"
+    :loading="state.loading"
+    :pagination="queryParamsState"
+    @change="changePage"
+  >
+  <template #bodyCell="{column, record}">
+        <template v-if="column.key === 'action'" >
+          <a-space>
+            <a >编辑</a>
+            <a >删除</a>
+          </a-space>
+        </template>
+      </template>
+  </a-table>
 </a-card>
 </template>
 <script lang='ts' setup >
+import { ModelController } from '@/controller'
+import { onMounted, reactive } from 'vue'
 
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    key: 'id'
+  },
+  {
+    title: '模型名称',
+    dataIndex: 'templateLabel',
+    key: 'templateLabel'
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createAt',
+    key: 'createAt'
+  },
+  {
+    title: '修改时间',
+    dataIndex: 'updateAt',
+    key: 'updateAt'
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action'
+  }
+]
+
+const queryParamsState = reactive({
+  page: 1,
+  pageSize: 10,
+  total: 0,
+  templateLabel: ''
+})
+
+const state = reactive({
+  dataSource: [],
+  loading: false,
+  opraState: 'add',
+  visible: false
+})
+
+const changePage = ({ current }) => {
+  queryParamsState.page = current
+  getModelsPage()
+}
+
+const getModelsPage = async () => {
+  state.loading = true
+  const { data, sum } = await ModelController.modelTemplate(queryParamsState)
+  state.loading = false
+  state.dataSource = data
+  queryParamsState.total = sum
+}
+
+onMounted(() => {
+  getModelsPage()
+})
 </script>
 <style lang='less' scoped >
 </style>

src/pages/Iot/task/manage.vue

@@ -0,0 +1,162 @@
+<template>
+<a-card>
+  <a-row justify="space-between" >
+    <a-col span="12" >
+      <a-form layout="inline" >
+          <a-form-item label="任务名称" >
+            <a-input v-model:value="queryParamsState.taskLabel" placeholder="请输入任务名称"/>
+          </a-form-item>
+          <a-form-item  label='任务状态' >
+            <a-select
+              style="width: 170px"
+              v-model:value="queryParamsState.status"
+              @change="changeStatus"
+            >
+              <a-select-option
+                v-for="item in statusList"
+                :key="item.key"
+                :value="item.key"
+              >
+                {{item.label}}
+              </a-select-option>
+            </a-select>
+          </a-form-item >
+          <a-form-item>
+            <a-button type="primary" @click="getTaskPage">搜索</a-button>
+          </a-form-item>
+      </a-form>
+    </a-col>
+    <a-col span="12" >
+      <a-space>
+        <a-button type="primary" >新增任务</a-button>
+      </a-space>
+    </a-col>
+  </a-row>
+
+  <a-table
+    style="margin-top: 20px;"
+    :columns="columns"
+    :data-source="state.dataSource"
+    :loading="state.loading"
+    :pagination="queryParamsState"
+    @change="changePage"
+  >
+  <template #bodyCell="{column, record}">
+        <template v-if="column.key === 'action'" >
+          <a-space>
+            <a >编辑</a>
+            <a >删除</a>
+          </a-space>
+        </template>
+      </template>
+  </a-table>
+
+  <modal-pro
+    :label="modalTitle"
+    :visible="state.visible"
+    @cancel="state.visible = false"
+    @ok="ok"
+  >
+
+  </modal-pro>
+</a-card>
+</template>
+<script lang='ts' setup >
+import { TaskController } from '@/controller/iot/task'
+import { computed, onMounted, reactive } from 'vue'
+import { Form } from 'ant-design-vue'
+
+const columns = [
+  {
+    title: '任务名称',
+    dataIndex: 'taskLabel',
+    key: 'taskLabel'
+  },
+  {
+    title: '任务配置',
+    dataIndex: 'taskConfig',
+    key: 'taskConfig'
+  },
+  {
+    title: '任务状态',
+    dataIndex: 'status',
+    key: 'status'
+  },
+  {
+    title: '任务描述',
+    dataIndex: 'taskDescription',
+    key: 'taskDescription'
+  },
+  {
+    title: 'corn',
+    dataIndex: 'cornDescr',
+    key: 'cornDescr'
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action'
+  }
+]
+
+const useForm = Form.useForm
+
+const statusList = [
+  { key: true, label: '开启' },
+  { key: false, label: '关闭' },
+  { key: true, label: '' }
+]
+
+const queryParamsState = reactive({
+  page: 1,
+  pageSize: 10,
+  total: 0,
+  taskLabel: '',
+  status: ''
+})
+
+const modalTitle = computed(() => state.opraState === 'add' ? '新增标题' : '编辑标题')
+
+const state = reactive({
+  dataSource: [],
+  loading: false,
+  opraState: 'add',
+  visible: false
+})
+
+const modalRef = reactive({
+
+})
+
+const { resetFields, validate, validateInfos } = useForm(modalRef, reactive({
+
+}))
+
+const ok = () => {
+
+}
+
+const changeStatus = (value) => {
+  queryParamsState.status = value
+}
+
+const getTaskPage = async () => {
+  state.loading = true
+  const { data, sum } = await TaskController.page(queryParamsState)
+  state.loading = false
+  state.dataSource = data
+  queryParamsState.total = sum
+}
+
+const changePage = ({ current }) => {
+  queryParamsState.page = current
+  getTaskPage()
+}
+
+onMounted(() => {
+  getTaskPage()
+})
+
+</script>
+<style lang='less' scoped >
+</style>

src/pages/Iot/task/track.vue

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

src/router/index.ts

@@ -30,7 +30,7 @@ export const routes: Array<ROUTER.RoutesProps> = [
           {
             path: '/product/models',
             name: '产品模型库',
-            component: () => import('@/pages/iot/model/index.vue')
+            component: () => import('@/pages/iot/model/models.vue')
           },
           {
             path: '/product/detail',
@@ -133,6 +133,24 @@ export const routes: Array<ROUTER.RoutesProps> = [
           }
         ]
       },
+      {
+        path: '/task',
+        name: '任务中心',
+        redirect: '/task/manage',
+        icon: 'DatabaseOutlined',
+        children: [
+          {
+            path: '/task/manage',
+            name: '任务管理',
+            component: () => import('@/pages/iot/task/manage.vue')
+          },
+          {
+            path: '/task/track',
+            name: '任务追踪',
+            component: () => import('@/pages/iot/task/track.vue')
+          }
+        ]
+      },
       {
         path: '/deviceDoc',
         name: '设备接入文档',

src/type/iot.d.ts

@@ -329,6 +329,12 @@ declare namespace IOT {
         'taskDescription': string,
         'cornDescr': string // corn 表达式
       }
+
+      interface Statistics {
+        'TOTAL': number,
+        'DISABLE': number,
+        'ENABLE': number
+      }
     }
 }