perf(src/packages): 重写基础分页表格，支持告警列表或设备列表搜索

@@ -21,6 +21,7 @@ enum Api {
   GET_ATTRBUTELIST = '/device/attributes/',
   GET_DEVICE_LATEST = '/plugins/telemetry/DEVICE/',
   DEVICE_ATTR = '/device/attributes',
+  ALARM_LIST = '/alarm',
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -152,3 +153,10 @@ export const getProfileAttrs = (params: { deviceProfileId: string; dataType?: st
     params: { dataType },
   });
 };
+
+//获取告警列表
+export const getAlarmList = (params?: object) =>
+  defHttp.get({
+    url: Api.ALARM_LIST,
+    params
+  })

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { OverrideTablesBasicConfig } from './index'
+import dataJson from './data.json'
+
+const { dimensions, source } = dataJson
+export const option = {
+  dynamicForm: {
+    keys: [
+      { 
+        key: '测试,test',
+      }
+    ]
+  },
+  dataset: { dimensions, source },
+  pagination: {
+    page: 1,
+    pageSize: 10
+  },
+  align: 'center',
+  style: {
+    border: 'on',
+    singleColumn: 'off',
+    singleLine: 'off',
+    bottomBordered: 'on',
+    striped: 'on',
+    fontSize: 16,
+    borderWidth: 0,
+    borderColor: 'black',
+    borderStyle: 'solid'
+  },
+  inputShow: false
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideTablesBasicConfig.key
+  public attr = { ...chartInitConfig, w: 600, h: 300, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideTablesBasicConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="表格设置" :expanded="true">
+    <n-tag type="primary">配置分页接口查询参数键，以逗号分隔键名和键值</n-tag>
+    <n-tag type="primary">例如：设备名称,deviceName</n-tag>
+    <setting-item-box :alone="true" name="搜索字段">
+      <SettingItem name="表格搜索" :alone="true">
+        <n-switch v-model:value="optionData.inputShow"></n-switch>
+      </SettingItem>
+      <setting-item v-if="optionData.inputShow" :alone="true">
+        <n-form ref="formRef" :model="dynamicForm" :style="{ maxWidth: '640px' }">
+          <n-form-item
+            v-for="(item, index) in dynamicForm.keys"
+            :key="index"
+            :label="`字段${index + 1}`"
+            :path="`keys[${index}].key`"
+          >
+            <n-input v-model:value="item.key" clearable />
+            <n-button style="margin-left: 12px" @click="removeItem(index)" v-if="dynamicForm.keys.length > 1">
+              删除
+            </n-button>
+          </n-form-item>
+          <n-form-item>
+            <n-space>
+              <n-button attr-type="button" @click="addItem" v-if="dynamicForm.keys.length < 2"> 增加 </n-button>
+            </n-space>
+          </n-form-item>
+        </n-form>
+      </setting-item>
+    </setting-item-box>
+    <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
+    <setting-item-box :alone="true" name="对齐方式">
+      <setting-item :alone="true">
+        <n-select
+          v-model:value="optionData.align"
+          size="small"
+          :options="[
+            { label: '靠左', value: 'left' },
+            { label: '居中', value: 'center' },
+            { label: '靠右', value: 'right' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box :alone="false" name="分页设置">
+      <setting-item name="默认页码" :alone="true">
+        <n-input-number v-model:value="optionData.pagination.page" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="分页" :alone="true">
+        <n-select v-model:value="optionData.pagination.pageSize" size="small" :options="page" />
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box :alone="false" name="表格样式">
+      <SettingItem name="显示边框" :alone="true">
+        <n-select v-model:value="(optionData as any).style.border" size="small" :options="borderFlag" />
+      </SettingItem>
+      <SettingItem name="底部边框" :alone="true">
+        <n-select
+          v-model:value="(optionData as any).style.bottomBordered"
+          size="small"
+          :options="bottom_borderedFlag"
+        />
+      </SettingItem>
+      <SettingItem name="列分割线" :alone="true">
+        <n-select v-model:value="(optionData as any).style.singleLine" size="small" :options="columnFlag" />
+      </SettingItem>
+      <SettingItem name="行分割线" :alone="true">
+        <n-select v-model:value="(optionData as any).style.singleColumn" size="small" :options="lineFlag" />
+      </SettingItem>
+      <SettingItem name="斑马条纹" :alone="true">
+        <n-select v-model:value="(optionData as any).style.striped" size="small" :options="stripedFlag" />
+      </SettingItem>
+      <setting-item name="字体大小" :alone="true">
+        <n-input-number
+          v-model:value="optionData.style.fontSize"
+          :min="12"
+          size="small"
+          placeholder="字体大小"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="边框宽度" :alone="true">
+        <n-input-number
+          v-model:value="optionData.style.borderWidth"
+          :min="0"
+          size="small"
+          placeholder="字体大小"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="边框颜色" :alone="true">
+        <n-color-picker size="small" :modes="['rgb']" v-model:value="optionData.style.borderColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="边框样式" :alone="true">
+        <n-select v-model:value="optionData.style.borderStyle" size="small" :options="borderStyleFlag" />
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, watch, ref, toRefs } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { FormInst } from 'naive-ui'
+
+const page = [
+  { label: '2', value: 2 },
+  { label: '5', value: 5 },
+  { label: '10', value: 10 },
+  { label: '15', value: 15 },
+  { label: '30', value: 30 }
+]
+const borderFlag = [
+  { label: '显示', value: 'on' },
+  { label: '不显示', value: 'off' }
+]
+const columnFlag = [
+  { label: '显示', value: 'off' },
+  { label: '不显示', value: 'on' }
+]
+const lineFlag = [
+  { label: '显示', value: 'off' },
+  { label: '不显示', value: 'on' }
+]
+const bottom_borderedFlag = [
+  { label: '显示', value: 'on' },
+  { label: '不显示', value: 'off' }
+]
+const stripedFlag = [
+  { label: '显示', value: 'on' },
+  { label: '不显示', value: 'off' }
+]
+const borderStyleFlag = [
+  { label: '实线边框', value: 'solid' },
+  { label: '虚线边框', value: 'dashed' },
+  { label: '点状边框', value: 'dotted' },
+  { label: '双线边框', value: 'double' }
+]
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const header = ref()
+const median = ref<string[]>([])
+props.optionData.dataset.dimensions.forEach(item => {
+  median.value.push(item.title)
+})
+
+const { dynamicForm } = toRefs(props.optionData)
+
+const formRef = ref<FormInst | null>(null)
+
+const removeItem = (index: number) => {
+  dynamicForm.value.keys.splice(index, 1)
+}
+
+const addItem = () => {
+  dynamicForm.value.keys.push({ key: '' })
+}
+
+//转string
+watch(
+  () => props.optionData,
+  () => {
+    median.value = []
+    props.optionData.dataset.dimensions.forEach(item => {
+      median.value.push(item.title)
+    })
+    header.value = median.value.toString()
+  },
+  {
+    deep: false,
+    immediate: true
+  }
+)
+
+//更新columns
+watch([header], ([headerNew], [headerOld]) => {
+  if (headerNew !== headerOld) {
+    headerNew.split(',').forEach((item: string, index: number) => {
+      if (index + 1 <= props.optionData.dataset.dimensions.length) {
+        props.optionData.dataset.dimensions[index].title = headerNew.split(',')[index]
+      }
+    })
+  }
+})
+</script>

+{
+  "dimensions": [
+    {
+      "title": "产品名称",
+      "key": "productName"
+    },
+    {
+      "title": "产品销量（万）",
+      "key": "totalSum"
+    },
+    {
+      "title": "销售额（万）",
+      "key": "totalAmount"
+    }
+  ],
+  "source": [
+    {
+      "key": 0,
+      "productName": "产品A1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 1,
+      "productName": "产品B1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 2,
+      "productName": "产品C1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 3,
+      "productName": "产品D1",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 4,
+      "productName": "产品A2",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 5,
+      "productName": "产品D2",
+      "totalSum": 10,
+      "totalAmount": 10
+    },
+    {
+      "key": 6,
+      "productName": "产品A3",
+      "totalSum": 10,
+      "totalAmount": 10
+    }
+  ]
+}

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Tables/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideTablesBasic', true)
+
+export const OverrideTablesBasicConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '分页表格（适合告警或者设备列表）',
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
+  package: PackagesCategoryEnum.TABLES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'tables_basic.png'
+}

+<template>
+  <div class="go-tables-basic">
+    <n-space>
+      <n-form v-if="inputShow" :model="dynamicForm" :style="{ maxWidth: '640px' }" inline>
+        <n-form-item v-for="(item, index) in dynamicForm.keys" :key="index" :label="`${item.key.split(',').at(-2)}`">
+          <n-input v-model:value="item.value" clearable>
+            <template #prefix>
+              <n-icon :component="SearchIcon" />
+            </template>
+          </n-input>
+        </n-form-item>
+      </n-form>
+    </n-space>
+    <n-data-table
+      remote
+      :style="`
+      width: ${w}px;
+      height: ${h}px;
+      font-size: ${option.style.fontSize}px;
+      border-width: ${option.style.border === 'on' ? option.style.borderWidth : 0}px;
+      border-color: ${option.style.borderColor};
+      border-style: ${option.style.borderStyle}`"
+      :bordered="option.style.border === 'on'"
+      :single-column="option.style.singleColumn === 'on'"
+      :single-line="option.style.singleLine === 'on'"
+      :bottom-bordered="option.style.bottomBordered === 'on'"
+      :striped="option.style.striped === 'on'"
+      :max-height="h"
+      size="small"
+      :columns="option.dataset.dimensions"
+      :data="option.dataset.source"
+      :pagination="pagination"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, watch, reactive, ref, onMounted } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { icon } from '@/plugins'
+import { getAlarmList, getDeviceList } from '@/api/external/common'
+import { useFilterFn } from '@/hooks/external/useFilterFn'
+import dataJson from './data.json'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { SearchIcon } = icon.ionicons5
+
+const { align, pagination, inputShow, dynamicForm } = toRefs(props.chartConfig.option)
+
+pagination.value.onChange = (page: number) => {
+  pagination.value.page = page
+}
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const option = reactive({
+  dataset: props.chartConfig.option.dataset,
+  style: props.chartConfig.option.style
+})
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: Recordable) => {
+    option.dataset = newData
+    option?.dataset?.dimensions?.forEach((header: Recordable) => {
+      header.align = align.value
+    })
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+const alarmParams = ref({})
+
+watch(
+  () => props.chartConfig.option,
+  newData => {
+    const { dynamicForm } = newData
+    const { keys } = dynamicForm
+    alarmParams.value = keys.reduce((acc: Recordable, curr: Recordable) => {
+      const param = {
+        [curr.key.split(',').at(-1)]: curr.value
+      }
+      Object.assign(acc, param)
+      return acc
+    }, {})
+    fetchAlarmList(props.chartConfig.filter!, props.chartConfig.request!, {
+      ...alarmParams.value,
+      page: pagination.value.page,
+      pageSize: pagination.value.pageSize
+    })
+  },
+  {
+    deep: true
+  }
+)
+
+const fetchAlarmList = async (filterStr: string, request: Recordable, params: Recordable) => {
+  const { requestUrl } = request
+  let res = null
+  if (requestUrl === '/api/yt/alarm') {
+    res = await getAlarmList(params)
+  } else if (requestUrl === '/api/yt/device') {
+    const { page, pageSize, ...rest } = params
+    res = await getDeviceList(
+      {
+        page: params.page,
+        pageSize: params.pageSize
+      },
+      Object.keys(rest).length === 0 ? {"name": ""} : rest
+    )
+  }
+  if (filterStr) {
+    const filterRes = useFilterFn(filterStr, res)
+    const { value } = filterRes
+    option.dataset = value
+    pagination.value.itemCount = res.total
+  } else {
+    option.dataset = dataJson
+  }
+}
+
+onMounted(() => {
+  fetchAlarmList(props.chartConfig.filter!, props.chartConfig.request!, {
+    page: pagination.value.page,
+    pageSize: pagination.value.pageSize
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('tables-basic') {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-items: flex-end;
+}
+</style>

@@ -69,6 +69,7 @@ import { Decorates24Config } from '@/packages/components/external/Decorates/Deco
 import { Decorates25Config } from '@/packages/components/external/Decorates/Decorates/Decorates25'
 import { Decorates26Config } from '@/packages/components/external/Decorates/Decorates/Decorates26'
 import { OverrideTableScrollBoardConfig } from '@/packages/components/external/Tables/Tables/OverrideTableScrollBoard'
+import { OverrideTablesBasicConfig } from '@/packages/components/external/Tables/Tables/OverrideTablesBasic'
 
 
 /**
@@ -156,6 +157,7 @@ export function useInjectLib(packagesList: EPackagesType) {
 
   //列表
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.TABLES, OverrideTableScrollBoardConfig)//重写列表下的轮播列表
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.TABLES, OverrideTablesBasicConfig)//重写列表下的轮播列表
   //
 }