feat: 增加表格

src/hooks/commonDataComponents/usePointTableRes.ts

@@ -0,0 +1,17 @@
+import moment from "moment";
+import { publicInterface } from "@/api/path";
+import { DateTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { commonDataType, PointTableType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { CreateComponentType } from '@/packages/index.d'
+import { ResultErrcode } from '@/enums/httpEnum'
+import dataJson from './data.json'
+
+export const handlePointTable = (targetComponent: CreateComponentType) => {
+    let { ids, enable } = (targetComponent.commonData as commonDataType).pointTable as PointTableType
+    if(!enable) return {
+        errcode: ResultErrcode.SUCCESS,
+        data: { ...dataJson },
+        errmsg: ''
+    }
+    return publicInterface('/dcim/system/custom_large_screen', 'get_table_point_value', ids)
+}

src/hooks/useChartCommonData.hook.ts

@@ -13,6 +13,7 @@ import { handlePointRealTime } from './commonDataComponents/usePointRealTimeRes'
 import { handleSinglePoint } from './commonDataComponents/useSinglePointRes'
 import { handleMonthAlarmClass } from './commonDataComponents/useMonthAlarmClassRes'
 import { handleDeviceClass } from './commonDataComponents/useDeviceClassRes'
+import { handlePointTable } from "./commonDataComponents/usePointTableRes";
 import { handleNoParam } from './commonDataComponents/useNoParamRes'
 import { ResultErrcode } from '@/enums/httpEnum'
 
@@ -77,6 +78,9 @@ export const useChartCommonData = (
                 }
             }
         }
+        else if(chartFrame === ChartFrameEnum.COMMON) {
+            targetComponent.option.dataset = dataset
+        }
     }
     let stopWatch = false
     const requestIntervalFn = () => {
@@ -122,6 +126,9 @@ export const useChartCommonData = (
                     case CurrentSourceEnum.DEVICECLASS:
                         res = await handleDeviceClass(targetComponent)
                         break;
+                    case CurrentSourceEnum.POINTTABLE:
+                        res = await handlePointTable(targetComponent)
+                        break;
                     default:
                         // res = await handleNoParam(targetComponent)
                         break;

src/packages/components/Tables/Tables/TablesBasic/config.ts

@@ -7,21 +7,26 @@ import dataJson from './data.json'
 
 const { dimensions, source } = dataJson
 export const option = {
-  dataset: { dimensions, source },
+  dataset: { dimensions: [], source: [] },
+  // 展示列
+  header: {
+    value: [],
+    options: []
+  },
   pagination: {
     page: 1,
     pageSize: 5
   },
   align: 'center',
   style: {
-    border: 'on',
+    border: 'off',
     singleColumn: 'off',
     singleLine: 'off',
-    bottomBordered: 'on',
+    bottomBordered: 'off',
     striped: 'on',
     fontSize: 16,
     borderWidth: 0,
-    borderColor: 'black',
+    borderColor: 'rgba(0, 0, 0, 1)',
     borderStyle: 'solid'
   },
   inputShow: 'none'

src/packages/components/Tables/Tables/TablesBasic/config.vue

@@ -1,6 +1,19 @@
 <template>
   <collapse-item name="表格设置" :expanded="true">
     <n-tag type="primary">若配置无响应，请在预览页面查看效果</n-tag>
+    <setting-item-box name="表头" :alone="true">
+      <div class="rows" v-for="(row, i) in optionData.header.options" :key="i">
+        <div class="columns">{{ row.value }}</div>
+        <n-input class="columns" v-model:value="row.label" size="small"/>
+      </div>
+    </setting-item-box>
+    <setting-item-box name="展示列" :alone="true">
+      <n-select
+        v-model:value="optionData.header.value"
+        :options="optionData.header.options"
+        multiple
+      />
+    </setting-item-box>
     <setting-item-box :alone="true" name="对齐方式">
       <setting-item :alone="true">
         <n-select
@@ -16,19 +29,19 @@
     </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>
+        <n-input-number v-model:value="optionData.pagination.page" :min="1" 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="表头名称" class="form_name">
-        <div style="width: 260px">
-          <n-input v-model:value="header" size="small" placeholder="表头数据(英文','分割)"></n-input>
-        </div>
-      </SettingItem>
-    </setting-item-box>
+<!--    <setting-item-box :alone="false" name="表格数据">-->
+<!--      <SettingItem name="表头名称" class="form_name">-->
+<!--        <div style="width: 260px">-->
+<!--          <n-input v-model:value="header" size="small" placeholder="表头数据(英文','分割)"></n-input>-->
+<!--        </div>-->
+<!--      </SettingItem>-->
+<!--    </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" />
@@ -127,36 +140,54 @@ const props = defineProps({
   }
 })
 
-const header = ref()
-const median = ref<string[]>([])
-props.optionData.dataset.dimensions.forEach(item => {
-  median.value.push(item.title)
-})
+// const header = ref()
+// const median = ref<string[]>([])
+// props.optionData.dataset.dimensions.forEach(item => {
+//   median.value.push(item.title)
+// })
 
-//转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
-  }
-)
+// //转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]
-      }
-    })
-  }
-})
+// 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>
+
+<style lang="scss" scoped>
+.rows {
+  margin-bottom: 10px;
+  display: flex;
+  &:nth-last-child(1){
+    margin-bottom: 0;
+  }
+  .columns:nth-child(1) {
+    flex: none;
+    width: 40%;
+  }
+  .columns:nth-child(2) {
+    flex: none;
+    width: 60%;
+  }
+}
+</style>

src/packages/components/Tables/Tables/TablesBasic/index.vue

@@ -11,6 +11,7 @@
       </template>
     </n-input>
     <n-data-table
+      style="box-sizing: border-box"
       :style="`
       width: ${w}px;
       height: ${h}px;
@@ -25,7 +26,7 @@
       :striped="option.style.striped === 'on'"
       :max-height="h"
       size="small"
-      :columns="option.dataset.dimensions"
+      :columns="columns"
       :data="filterData"
       :pagination="pagination"
     />
@@ -36,6 +37,9 @@
 import { computed, PropType, toRefs, watch, reactive, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { icon } from '@/plugins'
+import {useChartCommonData} from "@/hooks";
+import {useChartEditStore} from "@/store/modules/chartEditStore/chartEditStore";
+import { cloneDeep } from 'lodash'
 
 const props = defineProps({
   chartConfig: {
@@ -67,22 +71,48 @@ const { w, h } = toRefs(props.chartConfig.attr)
 
 const option = reactive({
   dataset: props.chartConfig.option.dataset,
-  style: props.chartConfig.option.style
+  style: props.chartConfig.option.style,
+  header: props.chartConfig.option.header
 })
 
 watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
     option.dataset = newData
-    option?.dataset?.dimensions?.forEach((header: any) => {
-      header.align = align.value
-    })
+    option.header.value = newData.dimensions
+    console.log(newData.dimensions.toString(), option.header.options.map((_: {value: string}) => _.value).toString())
+    if(newData.dimensions.toString() === option.header.options.map((_: {value: string}) => _.value).toString()) return
+    option.header.options = newData.dimensions.map((_: string) => ({label: _, value: _}))
+    // option?.dataset?.dimensions?.forEach((header: any) => {
+    //   header.align = align.value
+    // })
   },
   {
     immediate: true,
     deep: true
   }
 )
+
+watch(() => props.chartConfig.option.header, v => {
+  option.header = v
+}, {
+  immediate: true,
+  deep: true
+})
+
+const columns = computed(() => {
+  let dimensions = option.header.options.filter((_: {label: string, value: string}) => option.header.value.includes(_.value))
+  dimensions = dimensions.map((_: {label: string, value: string}) => {
+    return {
+      title: _.label,
+      key: _.value,
+      align: align.value
+    }
+  })
+  return dimensions
+})
+
+useChartCommonData(props.chartConfig, useChartEditStore)
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Tables/Tables/index.ts

@@ -2,4 +2,4 @@ import { TableListConfig } from './TableList'
 import { TableScrollBoardConfig } from './TableScrollBoard'
 import { TablesBasicConfig } from "./TablesBasic/index";
 
-export default [TableListConfig, TableScrollBoardConfig,TablesBasicConfig]
+export default [TableScrollBoardConfig, TablesBasicConfig]

src/packages/index.d.ts

@@ -214,7 +214,7 @@ export enum FetchComFlagType {
 export type PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ConfigType[]
   [PackagesCategoryEnum.INFORMATIONS]: ConfigType[]
-  // [PackagesCategoryEnum.TABLES]: ConfigType[]
+  [PackagesCategoryEnum.TABLES]: ConfigType[]
   [PackagesCategoryEnum.PHOTOS]: ConfigType[]
   [PackagesCategoryEnum.ICONS]: ConfigType[]
   [PackagesCategoryEnum.DECORATES]: ConfigType[]

src/packages/index.ts

@@ -1,7 +1,7 @@
 import { ChartList } from '@/packages/components/Charts/index'
 import { DecorateList } from '@/packages/components/Decorates/index'
 import { InformationList } from '@/packages/components/Informations/index'
-// import { TableList } from '@/packages/components/Tables/index'
+import { TableList } from '@/packages/components/Tables/index'
 import { PhotoList } from '@/packages/components/Photos/index'
 import { IconList } from '@/packages/components/Icons/index'
 import { CustomComponentsList } from '@/packages/components/CustomComponents/index'
@@ -24,7 +24,7 @@ const imagesModules: Record<string, { default: string }> = import.meta.glob('../
 export let packagesList: PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ChartList,
   [PackagesCategoryEnum.INFORMATIONS]: InformationList,
-  // [PackagesCategoryEnum.TABLES]: TableList,
+  [PackagesCategoryEnum.TABLES]: TableList,
   [PackagesCategoryEnum.DECORATES]: DecorateList,
   [PackagesCategoryEnum.PHOTOS]: PhotoList,
   [PackagesCategoryEnum.ICONS]: IconList,

src/packages/public/publicConfig.ts

@@ -83,6 +83,10 @@ const commonData: commonDataType = {
     enable: false,
     space_complete_id: ''
   },
+  pointTable: {
+    enable: false,
+    ids: []
+  },
   singlePoint: {
     enable: false,
     pointId: '',

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -265,7 +265,9 @@ export enum CurrentSourceEnum {
   // 设备分类统计
   DEVICECLASS = 'deviceClass',
   // 当月告警分类统计
-  MONTHALARMCLASS = 'monthAlarmClass'
+  MONTHALARMCLASS = 'monthAlarmClass',
+  // 测点表格
+  POINTTABLE = 'pointTable'
 }
 
 // 测点历史参数
@@ -341,6 +343,12 @@ export interface DeviceClassType {
   space_complete_id: string
 }
 
+// 测点表格值
+export interface PointTableType {
+  enable: boolean
+  ids: string[]
+}
+
 // 通用组件数据
 export interface commonDataType {
   // 多数据
@@ -350,6 +358,7 @@ export interface commonDataType {
   recordValueHistory: RecordValueHistoryType
   pointRealTime: PointRealTimeType
   monthAlarmClass: MonthAlarmClassType
+  pointTable: PointTableType
   // 多数据无参数
   // 设备分类统计
   deviceClass: DeviceClassType

src/views/chart/ContentConfigurations/components/ChartDataV2/components/PointTable.vue

@@ -0,0 +1,84 @@
+<template>
+  <setting-item-box name="启用数据" :alone="true">
+    <n-space justify="start">
+      <n-switch v-model:value="pointTable.enable" />
+    </n-space>
+  </setting-item-box>
+  <setting-item-box name="测点ID" :alone="true">
+    <n-space vertical>
+      <n-space v-for="(item, i) in computeIds" :key="item.id" align="center" :wrap="false">
+        <n-input
+          :value="item.value"
+          @update:value="(v: string) => handleChange(v, i)"
+          placeholder="请输入测点ID"
+          size="small"
+          clearable
+        />
+        <n-button @click="handleDelete(i)" circle size="tiny">
+          <template #icon>
+            <n-icon><CloseIcon /></n-icon>
+          </template>
+        </n-button>
+        <n-button v-if="i === computeIds.length - 1" @click="handleAdd" circle size="tiny">
+          <template #icon>
+            <n-icon><AddIcon /></n-icon>
+          </template>
+        </n-button>
+        <div v-else style="width: 22px"></div> 
+      </n-space>
+    </n-space>
+  </setting-item-box>
+</template>
+
+<script lang="ts" setup>
+import { watch, reactive, computed } from 'vue'
+import type { Ref } from 'vue'
+import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { useTargetData } from '../../hooks/useTargetData.hook'
+import { icon } from '@/plugins/icon'
+import { commonDataType, PointTableType } from '@/store/modules/chartEditStore/chartEditStore.d'
+
+const { CloseIcon, AddIcon } = icon.ionicons5
+
+const { targetData } = useTargetData() as { targetData: Ref<{ commonData: commonDataType, id: string }> }
+
+const pointTable: Ref<PointTableType> = computed(() => targetData.value.commonData.pointTable)
+
+type computeIdsItemType = {
+  id: string,
+  value: string
+}
+
+const computeIds: computeIdsItemType[] = reactive([])
+
+watch(() => [targetData.value.id, pointTable.value], () => {
+  if(!pointTable.value.ids.length) targetData.value.commonData.pointTable.ids.push('')
+  let arr = pointTable.value.ids.map((item, i) => {
+    return {
+      id: `${targetData.value.id}_${i}`,
+      value: item
+    }
+  })
+  computeIds.splice(0, computeIds.length, ...arr)
+}, {
+  deep: true,
+  immediate: true
+})
+
+const handleChange = (v: string, i: number) => {
+  targetData.value.commonData.pointTable.ids[i] = v
+}
+
+const handleAdd = () => {
+  targetData.value.commonData.pointTable.ids.push('')
+}
+
+const handleDelete = (i: number) => {
+  targetData.value.commonData.pointTable.ids.splice(i, 1)
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/chart/ContentConfigurations/components/ChartDataV2/index.d.ts

@@ -155,6 +155,11 @@ export const sourceOptions: sourceOptionsItemType[] = [
     value: CurrentSourceEnum.MONTHALARMCLASS,
     type: optionTypeEnum.MULTIPLE,
   },
+  {
+    label: '测点表格值',
+    value: CurrentSourceEnum.POINTTABLE,
+    type: optionTypeEnum.MULTIPLE,
+  },
   {
     label: '单测点实时值',
     value: CurrentSourceEnum.SINGLEPOINT,

src/views/chart/ContentConfigurations/components/ChartDataV2/index.vue

@@ -10,6 +10,7 @@
       <PointRealTime v-else-if="matchComponent(CurrentSourceEnum.POINTREALTIME)"/>
       <MonthAlarmClass v-else-if="matchComponent(CurrentSourceEnum.MONTHALARMCLASS)"/>
       <DeviceClass v-else-if="matchComponent(CurrentSourceEnum.DEVICECLASS)"/>
+      <PointTable v-else-if="matchComponent(CurrentSourceEnum.POINTTABLE)"/>
     </template>
     <template v-else-if="IsCommonSingle">
       <setting-item-box name="数据源" :alone="true">
@@ -64,6 +65,7 @@ import PointRealTime from './components/PointRealTime.vue'
 import SinglePoint from './components/SinglePoint.vue'
 import MonthAlarmClass from './components/MonthAlarmClass.vue'
 import DeviceClass from './components/DeviceClass.vue'
+import PointTable from './components/PointTable.vue'
 import NoParam from './components/NoParam.vue'
 import { computed } from 'vue'
 import type { Ref } from 'vue'