fix: 开放站点分析界面，但功能还未完善。

src/router/record.ts

@@ -40,33 +40,33 @@ export const routeRecordRaw: MergeMenuMixedOptions[] = [
     component: 'sites-monitor/index',
     show: false,
   },
-  // {
-  //   path: 'sites-analysis-manage',
-  //   name: 'sitesAnalysisManage',
-  //   icon: 'i-carbon:data-analytics',
-  //   label: '站点分析管理',
-  //   meta: {
-  //     componentName: 'SitesAnalysisManage',
-  //     showTab: true,
-  //   },
-  //   component: 'sites-analysis/manage',
-  // },
-  // {
-  //   path: 'sites-analysis/:name?',
-  //   name: 'sitesAnalysis',
-  //   icon: 'i-carbon:data-analytics',
-  //   label: '站点分析',
-  //   meta: {
-  //     componentName: 'SitesAnalysis',
-  //     showTab: true,
-  //     enableMultiTab: true,
-  //     renderTabLabel({ name }) {
-  //       return `站点分析${name ? '-' + name : ''}`
-  //     },
-  //   },
-  //   component: 'sites-analysis/index',
-  //   show: false,
-  // },
+  {
+    path: 'sites-analysis-manage',
+    name: 'sitesAnalysisManage',
+    icon: 'i-carbon:data-analytics',
+    label: '站点分析管理',
+    meta: {
+      componentName: 'SitesAnalysisManage',
+      showTab: true,
+    },
+    component: 'sites-analysis/manage',
+  },
+  {
+    path: 'sites-analysis/:name',
+    name: 'sitesAnalysis',
+    icon: 'i-carbon:data-analytics',
+    label: '站点分析',
+    meta: {
+      componentName: 'SitesAnalysis',
+      showTab: true,
+      enableMultiTab: true,
+      renderTabLabel({ name }) {
+        return `站点分析${name ? '-' + name : ''}`
+      },
+    },
+    component: 'sites-analysis/index',
+    show: false,
+  },
   // {
   //   path: 'data-show',
   //   name: 'dataShow',

src/service/sitesAnalysis/index.ts

@@ -43,26 +43,26 @@ export const createManageConfig = async (config: AnalysisConfig) => {
 }
 
 // GET 指定id的配置
-export const getManageConfig = async (id: number): Promise<AnalysisConfig> => {
+export const getManageConfig = async (id: string): Promise<AnalysisConfig> => {
   const url = API_List.manageConfigWithID.replace('{id}', encodeURIComponent(id))
   const res = await http.get<AnalysisConfig>(url)
   return res
 }
 
 // POST 更新指定id配置
-export const updateManageConfig = async (id: number, config: AnalysisConfig) => {
+export const updateManageConfig = async (id: string, config: AnalysisConfig) => {
   const url = API_List.manageConfigWithID.replace('{id}', encodeURIComponent(id))
   const res = await http.post(url, config)
 }
 
 // DELETE 删除指定id配置
-export const deleteManageConfig = async (id: number) => {
+export const deleteManageConfig = async (id: string) => {
   const url = API_List.manageConfigWithID.replace('{id}', encodeURIComponent(id))
   const res = await http.delete(url)
 }
 
 // GET 获取分析数据
-export const getAnalysisData = async (id: number): Promise<AnalysisResultData> => {
+export const getAnalysisData = async (id: string): Promise<AnalysisResultData> => {
   const url = API_List.analysisData.replace('{id}', encodeURIComponent(id))
   const res = await http.get<AnalysisResultData>(url)
   return res

src/service/sitesAnalysis/interface.ts

@@ -9,7 +9,7 @@ export interface AnalysisConfig {
   id: string
   sn: string
   description: string
-  timePeriod: [string, string]
+  timePeriod: [string, string] | null
 
   enableEventAndAlarm: boolean
   enableCloudLog: boolean

src/views/sites-analysis/ModalData.vue

@@ -1,11 +1,59 @@
+<template>
+  <div class="p-2">
+    <NForm :model="form" :rules="rules" label-placement="left" style="width: 100%" ref="formRef" label-width="88px"
+      size="small">
+      <NFormItem label="SN" path="sn">
+        <NInput v-model:value="form.sn" :allow-input="handleAllowInput" />
+      </NFormItem>
+      <NFormItem label="描述" path="description">
+        <NInput type="textarea" v-model:value="form.description" />
+      </NFormItem>
+      <NFormItem label="时间" path="timePeriod">
+        <NDatePicker v-model:formatted-value="form.timePeriod" value-format="yyyy.MM.dd HH:mm:ss" type="datetimerange"
+          clearable />
+      </NFormItem>
+
+      <NCollapse :trigger-areas="['arrow']">
+        <NCollapseItem :disable="!form.enableEventAndAlarm" title="事件&告警">
+          <template #header-extra>
+            <NSwitch v-model:value="form.enableEventAndAlarm" size="small" />
+          </template>
+        </NCollapseItem>
+        <NCollapseItem :disable="!form.enableCloudLog" title="云通讯日志">
+          <template #header-extra>
+            <NSwitch v-model:value="form.enableCloudLog" size="small" />
+          </template>
+        </NCollapseItem>
+        <NCollapseItem :disable="!form.enableSiteLog" title="设备日志">
+          <template #header-extra>
+            <NSwitch v-model:value="form.enableSiteLog" size="small" />
+          </template>
+        </NCollapseItem>
+      </NCollapse>
+    </NForm>
+    <div class="flex justify-end gap-x-4">
+      <NButton secondary @click="emits('cancel')">
+        取消
+      </NButton>
+      <NButton secondary type="warning" @click="reset">
+        重置
+      </NButton>
+      <NButton type="success" @click="handleSubmitClick">
+        确定
+      </NButton>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
-import { computed, onMounted, useTemplateRef } from 'vue'
-import { NForm, NFormItem, NInput, NButton, NCollapseItem, NSwitch } from 'naive-ui'
+import { onMounted, useTemplateRef } from 'vue'
+import { NForm, NFormItem, NInput, NButton, NCollapseItem, NSwitch, NDatePicker } from 'naive-ui'
 import type { FormRules } from 'naive-ui'
 
 import { useResettableReactive } from '@/composable/useResettable'
 
 import type { AnalysisConfig } from '@/service/sitesAnalysis/interface'
+import { getManageConfig } from '@/service/sitesAnalysis'
 
 interface AnalysisConfigForm extends AnalysisConfig { }
 
@@ -16,7 +64,7 @@ const { id } = defineProps<{
 const formRef = useTemplateRef<InstanceType<typeof NForm>>('formRef')
 
 const emits = defineEmits<{
-  (e: 'submit'): void
+  (e: 'submit', value: AnalysisConfig): void
   (e: 'cancel'): void
 }>()
 
@@ -24,7 +72,7 @@ const [form, setUserForm, reset, updateInitialState] = useResettableReactive<Ana
   id: '',
   sn: '',
   description: '',
-  timePeriod: ["", ""],
+  timePeriod: null,
 
   enableEventAndAlarm: false,
   enableCloudLog: false,
@@ -45,71 +93,20 @@ const rules: FormRules = {
 const handleSubmitClick = () => {
   formRef.value?.validate().then((valid) => {
     if (valid) {
-      emits('submit')
+      emits('submit', form)
     }
   })
 }
 
-onMounted(() => {
+onMounted(async () => {
   if (id !== undefined) {
     // 请求表单数据
+    const cfg = await getManageConfig(id)
 
     // 填入表单数据
-    // setUserForm({ ...data })
+    setUserForm({ ...cfg })
     // 设置表单数据重置状态
-    // updateInitialState({
-    //   name: data.name ?? '',
-    //   description: data.description ?? '',
-    //   siteList: data.siteList ?? ''
-    // })
+    updateInitialState({ ...cfg })
   }
 })
 </script>
-<template>
-  <div class="p-2">
-    <NForm :model="form" :rules="rules" label-placement="left" style="width: 100%" ref="formRef" label-width="88px"
-      size="small">
-      <NFormItem label="SN" path="sn">
-        <NInput v-model:value="form.sn" :allow-input="handleAllowInput" />
-      </NFormItem>
-      <NFormItem label="描述" path="description">
-        <NInput type="textarea" v-model:value="form.description" />
-      </NFormItem>
-      <NFormItem label="时间" path="timePeriod">
-        <NDatePicker v-model:formatted-value="form.timePeriod" type="datetimerange" clearable />
-      </NFormItem>
-
-      <NCollapse :trigger-areas="['arrow']">
-        <NCollapseItem :disable="!form.enableEventAndAlarm">
-          <template #header-extra>
-            <NSwitch v-model:value="form.enableEventAndAlarm" size="small" />
-          </template>
-          <div>事件&告警</div>
-        </NCollapseItem>
-        <NCollapseItem :disable="!form.enableCloudLog">
-          <template #header-extra>
-            <NSwitch v-model:value="form.enableCloudLog" size="small" />
-          </template>
-          <div>云通讯日志</div>
-        </NCollapseItem>
-        <NCollapseItem :disable="!form.enableSiteLog">
-          <template #header-extra>
-            <NSwitch v-model:value="form.enableSiteLog" size="small" />
-          </template>
-          <div>设备日志</div>
-        </NCollapseItem>
-      </NCollapse>
-    </NForm>
-    <div class="flex justify-end gap-x-4">
-      <NButton secondary @click="emits('cancel')">
-        取消
-      </NButton>
-      <NButton secondary type="warning" @click="reset">
-        重置
-      </NButton>
-      <NButton type="success" @click="handleSubmitClick">
-        确定
-      </NButton>
-    </div>
-  </div>
-</template>

src/views/sites-analysis/manage.vue

@@ -49,14 +49,18 @@
 
 <script setup lang="tsx">
 import { h } from 'vue'
+import { useRouter } from 'vue-router'
 import { NButton, NDataTable, NForm, NNumberAnimation, NEllipsis } from 'naive-ui'
 import type { DataTableColumns, PaginationProps, DropdownProps } from 'naive-ui'
 import ModalData from './ModalData.vue'
 import type { AnalysisConfig, AnalysisItemInfo } from '@/service/sitesAnalysis/interface'
+import { getManageList, createManageConfig, updateManageConfig, deleteManageConfig } from '@/service/sitesAnalysis'
 
 import { useDataTable } from '@/composable/comp/useDataTable'
 import { useResettableReactive } from '@/composable/useResettable'
 
+const router = useRouter()
+
 const formRef = useTemplateRef<InstanceType<typeof NForm>>('formRef')
 const dataTableRef = useTemplateRef<InstanceType<typeof NDataTable>>('dataTableRef')
 const { maxHeight } = useDataTable(dataTableRef)
@@ -144,15 +148,13 @@ const dropdownOptions = reactive<DropdownProps>({
 
 const createOrEditAnalysis = (id?: string) => {
   const title = id === undefined ? '新增监控' : '编辑编辑'
-  const isNew = id === undefined
-
-  const handleSubmitClick = () => {
-    // 重新查询数据
-    handleListQuery()
 
-    if (isNew) {
+  const handleSubmitClick = async (data: AnalysisConfig) => {
+    if (id === undefined) {
+      await createSiteAnalysisConfig(data)
       message.success('创建成功')
     } else {
+      await updateSiteAnalysisConfig(id, data)
       message.success('更新成功')
     }
 
@@ -277,13 +279,14 @@ function rowProps(row: AnalysisItemInfo) {
   }
 }
 
-const tableData = ref<AnalysisItemInfo[]>(Array.from({ length: 46 }).map((_, index) => ({
-  id: String(index),
-  sn: `Edward King ${index}`,
-  description: "",
-  item: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
-  progress: 'pending',
-})))
+const tableData = ref<AnalysisItemInfo[]>([])
+// const tableData = ref<AnalysisItemInfo[]>(Array.from({ length: 46 }).map((_, index) => ({
+//   id: String(index),
+//   sn: `Edward King ${index}`,
+//   description: "",
+//   item: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
+//   progress: 'pending',
+// })))
 const tableColumns = createColumns()
 const tablePagination = reactive<PaginationProps>({
   page: 1,
@@ -305,7 +308,9 @@ const tablePagination = reactive<PaginationProps>({
 })
 
 const itemView = (id: string) => {
-
+  router.push({
+    path: `/sites-analysis/${id}`
+  })
 }
 
 const itemEdit = (id: string) => {
@@ -313,7 +318,7 @@ const itemEdit = (id: string) => {
 }
 
 const itemDelete = (id: string) => {
-
+  deleteSiteFromList(id)
 }
 
 interface AnalysisListFilter {
@@ -321,16 +326,24 @@ interface AnalysisListFilter {
   progress?: 'pending' | 'running' | 'error' | 'complete'
 }
 
-const querySitesAnalysisList = (pageSize: number, pageNum: number, filter?: AnalysisListFilter) => {
-
+const querySitesAnalysisList = async (pageSize: number, pageNum: number, filter?: AnalysisListFilter) => {
+  const res = await getManageList(pageSize, pageNum, filter)
+  tableData.value = res.data
 }
 
-const updateSiteAnalysisConfig = (data: AnalysisConfig) => {
-
+const createSiteAnalysisConfig = async (data: AnalysisConfig) => {
+  await createManageConfig(data)
+  handleListQuery()
 }
 
-const deleteSiteFromList = (id: number) => {
+const updateSiteAnalysisConfig = async (id: string, data: AnalysisConfig) => {
+  await updateManageConfig(id, data)
+  handleListQuery()
+}
 
+const deleteSiteFromList = async (id: string) => {
+  await deleteManageConfig(id)
+  handleListQuery()
 }
 
 const handleListQuery = () => {

src/views/xlog/manage.vue

@@ -53,7 +53,7 @@ import { useRouter } from 'vue-router'
 import { NButton, NDataTable, NForm, NNumberAnimation } from 'naive-ui'
 import type { DataTableColumns, PaginationProps, DropdownProps } from 'naive-ui'
 import type { XlogSiteItemInfo } from '@/service/xlog/interface'
-import { getManageList, sendXlogCmd } from '@/service/xlog'
+import { getManageList } from '@/service/xlog'
 
 import { useDataTable } from '@/composable/comp/useDataTable'
 import { useResettableReactive } from '@/composable/useResettable'