feat: 增加border 列表 文本加颜色控制

src/packages/components/Decorates/Borders/BorderCustom2/config.ts

@@ -0,0 +1,27 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { BorderCustom2Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+// import logo from '@/assets/logo.png'
+import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+
+export const option = {
+  // // 图片路径
+  // dataset: '',
+  // // 适应方式
+  // fit: 'contain',
+  // // 圆角
+  // borderRadius: 0
+  dataset: {status: 0}
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType
+{
+  constructor() {
+    super();
+    this.commonData.currentSource = CurrentSourceEnum.SINGLEPOINT
+  }
+  public key = BorderCustom2Config.key
+  public chartConfig = cloneDeep(BorderCustom2Config)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Borders/BorderCustom2/config.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/components/Decorates/Borders/BorderCustom2/index.ts

@@ -0,0 +1,15 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Decorates/index.d'
+
+export const BorderCustom2Config: ConfigType = {
+  key: 'BorderCustom2',
+  chartKey: 'VBorderCustom2',
+  conKey: 'VCBorderCustom2',
+  // conDataKey: 'VCDBorderCustom2',
+  title: '边框-自定义2',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'BorderCustom1.png'
+}

src/packages/components/Decorates/Borders/BorderCustom2/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="box" :style="{borderLeft: `2px solid ${computeColor(dataset.status).remark}`}"></div>
+</template>
+
+<script setup lang="ts">
+import { useOriginStore } from "@/store/modules/originStore/originStore";
+import { PropType, computed } from "vue";
+import { CreateComponentType } from '@/packages/index.d'
+import {useChartCommonData} from "@/hooks";
+import {useChartEditStore} from "@/store/modules/chartEditStore/chartEditStore";
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const originStore = useOriginStore()
+const node_status = originStore?.getOriginStore?.user?.systemConstant?.node_status
+
+const computeColor = (status: number | undefined | null) => {
+  type ItemType = {
+    value: string,
+    remark: string,
+    label: string
+  }
+  if(node_status.length && typeof status === 'number') {
+    return node_status.find((_: ItemType) => _.value == status.toString())
+  }
+  else {
+    return {
+      remark: '#aaaaaa',
+      label: '无'
+    }
+  }
+}
+
+const dataset = computed(() => props.chartConfig.option.dataset)
+
+useChartCommonData(props.chartConfig, useChartEditStore, (resData: {}) => {
+  props.chartConfig.option.dataset = resData
+})
+</script>
+
+<style lang="scss" scoped>
+.box{
+  background: rgba(65, 150, 255, 0.08);
+  display: flex;
+  align-items: center;
+}
+</style>

src/packages/components/Decorates/Borders/index.ts

@@ -1,4 +1,5 @@
 import { BorderCustom1Config } from './BorderCustom1/index';
+import { BorderCustom2Config } from './BorderCustom2/index';
 import { Border01Config } from './Border01/index'
 import { Border02Config } from './Border02/index'
 import { Border03Config } from './Border03/index'
@@ -15,6 +16,7 @@ import { Border13Config } from './Border13/index'
 
 export default [
   BorderCustom1Config,
+  BorderCustom2Config,
   Border01Config,
   Border02Config,
   Border03Config,

src/packages/components/Informations/Texts/TextCommon/config.ts

@@ -29,6 +29,7 @@ export const option = {
   linkHead: 'http://',
   dataset: '我是文本',
   showUnit: false,
+  showStatusColor: false,
   fontSize: 20,
   fontColor: '#ffffff',
   paddingX: 10,

src/packages/components/Informations/Texts/TextCommon/config.vue

@@ -35,6 +35,12 @@
       <setting-item name="颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
       </setting-item>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.showStatusColor" size="small" />
+          <n-text>展示状态颜色,将覆盖原颜色</n-text>
+        </n-space>
+      </SettingItem>
       <setting-item name="字体大小">
         <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
       </setting-item>

src/packages/components/Informations/Texts/TextCommon/index.vue

@@ -2,7 +2,7 @@
   <div class="go-text-box">
     <div class="content">
       <span
-        :style="{cursor: link ? 'pointer' : 'unset'}"
+        :style="{cursor: link ? 'pointer' : 'unset', color: option.showStatusColor ? computeColor(dataStatus).remark : ''}"
         style="cursor: pointer; white-space: pre-wrap"
         @click="link ? click : () => {}"
       >
@@ -25,6 +25,27 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { option as configOption } from './config'
 import { useChartCommonData } from '@/hooks'
 import { resultType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import {useOriginStore} from "@/store/modules/originStore/originStore";
+
+const originStore = useOriginStore()
+const node_status = originStore?.getOriginStore?.user?.systemConstant?.node_status
+
+const computeColor = (status: number | undefined) => {
+  type ItemType = {
+    value: string,
+    remark: string,
+    label: string
+  }
+  if(node_status.length && typeof status === 'number') {
+    return node_status.find((_: ItemType) => _.value == status.toString())
+  }
+  else {
+    return {
+      remark: '#aaaaaa',
+      label: '无'
+    }
+  }
+}
 
 const props = defineProps({
   chartConfig: {
@@ -52,15 +73,17 @@ const {
 
 const option = shallowReactive({
   dataset: configOption.dataset,
-  showUnit: configOption.showUnit
+  showUnit: configOption.showUnit,
+  showStatusColor: configOption.showStatusColor
 })
 
 // 手动更新
 watch(
-  [() => props.chartConfig.option.dataset, () => props.chartConfig.option.showUnit],
-  ([newData, newShowUnit]: [any, boolean]) => {
+  [() => props.chartConfig.option.dataset, () => props.chartConfig.option.showUnit, () => props.chartConfig.option.showStatusColor],
+  ([newData, newShowUnit, showStatusColor]: [any, boolean, boolean]) => {
     option.dataset = newData
     option.showUnit = newShowUnit
+    option.showStatusColor = showStatusColor
   },
   {
     immediate: true,
@@ -71,6 +94,7 @@ watch(
 const dataEnable = ref()
 const dataValue = ref()
 const dataUnit = ref()
+const dataStatus = ref()
 watch(
   () => props.chartConfig.commonData,
   newData => {
@@ -79,6 +103,7 @@ watch(
       dataEnable.value = data.enable
       dataValue.value = data.result.value
       dataUnit.value = data.result.unit
+      dataStatus.value = data.result.status
     } catch (error) {
       console.log(error)
     }

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

@@ -0,0 +1,33 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TableList1Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+// import logo from '@/assets/logo.png'
+
+export const option = {
+  // // 图片路径
+  // dataset: '',
+  // // 适应方式
+  // fit: 'contain',
+  // // 圆角
+  // borderRadius: 0
+  dataset: {
+    "dimensions": [],
+    "source": []
+  },
+  timeout: 3000
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType
+{
+  constructor() {
+    super();
+    this.request.requestInterval = 15
+  }
+  public key = TableList1Config.key
+  public chartConfig = cloneDeep(TableList1Config)
+  public option = cloneDeep(option)
+  // public customData = cloneDeep({
+  //   showInterval: true,
+  // })
+}

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

@@ -0,0 +1,33 @@
+<template>
+  <CollapseItem name="列表" :expanded="true">
+    <SettingItemBox name="基础">
+      <SettingItem name="轮播时间(ms)">
+        <n-input-number
+          v-model:value="optionData.timeout"
+          :min="1"
+          size="small"
+          placeholder="请输入轮播时间"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from "vue/dist/vue";
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,17 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+
+export const TableList1Config: ConfigType = {
+  key: 'TableList1',
+  chartKey: 'VTableList1',
+  conKey: 'VCTableList1',
+  // // VCD开头
+  // conDataKey: 'VCDTableList1',
+  title: '列表',
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
+  package: PackagesCategoryEnum.TABLES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'TableList1.png'
+}

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

@@ -0,0 +1,164 @@
+<template>
+  <div class="box">
+    <div ref="list" class="list" :style="{transform: `translateY(${translateY}px)`}">
+      <template v-if="isPointTable">
+        <div class="item" v-for="(item, i) in datasetSource" :key="i">
+          <img class="img" :src="Snow">
+          <div class="label">{{item.name}}</div>
+          <n-tag
+            class="tag"
+            size="small"
+            :color="{textColor: computeColor(item.status).remark, borderColor: computeColor(item.status).remark}"
+          >
+            {{computeColor(item.status).label}}
+          </n-tag>
+        </div>
+      </template>
+      <template v-else>
+        <div class="item" v-for="(item, i) in datasetSource" :key="i">
+          <img class="img" :src="Snow">
+          <div class="label" v-for="(col, ci) in datasetDimensions" :key="ci">{{item[col]}}</div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Snow from '@/assets/images/icons/snow.png'
+import { useOriginStore } from '@/store/modules/originStore/originStore'
+import { PropType, toRefs, ref, onMounted, watch, onUnmounted, computed } from "vue"
+import { CreateComponentType } from '@/packages/index.d'
+import { debounce } from 'lodash'
+import { useChartCommonData } from "@/hooks";
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const originStore = useOriginStore()
+const node_status = originStore?.getOriginStore?.user?.systemConstant?.node_status
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const list = ref()
+let translateY = ref(0)
+let timer: any = ref(null)
+let timeout = computed(() => props.chartConfig.option.timeout)
+
+watch(() => h.value, () => {
+  roll()
+})
+const roll = debounce(() => {
+  translateY.value = 0
+  clearTimeout(timer.value)
+  if(list.value) {
+    // let listHeight = list.value.offsetHeight
+    let itemHeight = 40
+    if(h.value < list.value.offsetHeight) {
+      let fun = () => {
+        if(Math.abs(translateY.value) > (list.value.offsetHeight - h.value)) {
+          translateY.value = 0
+          timer.value = setTimeout(fun, timeout.value)
+          return
+        }
+        translateY.value -= itemHeight
+        timer.value = setTimeout(fun, timeout.value)
+      }
+      timer.value = setTimeout(fun, timeout.value)
+    }
+  }
+}, 200)
+
+const option = computed(() => props.chartConfig.option)
+
+const commonData = computed(() => props.chartConfig.commonData)
+
+const isPointTable = computed(() => {
+  return commonData.value.currentSource === CurrentSourceEnum.POINTTABLE
+})
+
+const datasetDimensions = computed(() => {
+  return option.value.dataset.dimensions
+})
+const datasetSource = computed(() => {
+  return option.value.dataset.source
+})
+
+const computeColor = (status: number | undefined) => {
+  type ItemType = {
+    value: string,
+    remark: string,
+    label: string
+  }
+  if(node_status.length && typeof status === 'number') {
+    return node_status.find((_: ItemType) => _.value == status.toString())
+  }
+  else {
+    return {
+      remark: '#aaaaaa',
+      label: '无'
+    }
+  }
+}
+
+watch(() => h.value, () => {
+  roll()
+})
+
+onMounted(() => {
+  roll()
+})
+onUnmounted(() => {
+  if(timer.value) clearTimeout(timer.value)
+})
+
+useChartCommonData(props.chartConfig, useChartEditStore, (resData: {}) => {
+  props.chartConfig.option.dataset = resData
+})
+</script>
+
+<style lang="scss" scoped>
+.box{
+  overflow-y: hidden;
+  .list{
+    color: #fff;
+    transform: translateY(40px);
+    transition: all 1s;
+    .item{
+      height: 35px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      padding: 10px;
+      margin-bottom: 5px;
+      background: rgba(65, 150, 255, 0.08);
+      border-radius: 4px;
+      &:nth-last-child(1) {
+        margin-bottom: 0;
+      }
+      .img{
+        flex: none;
+        width: 16px;
+        height: 16px;
+      }
+      .label{
+        flex: 1;
+        color: #4196ff;
+        padding: 0 10px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .tag{
+        flex: none;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,5 +1,6 @@
 import { TableListConfig } from './TableList'
 import { TableScrollBoardConfig } from './TableScrollBoard'
 import { TablesBasicConfig } from "./TablesBasic/index";
+import { TableList1Config } from './TableList1'
 
-export default [TableScrollBoardConfig, TablesBasicConfig]
+export default [TableScrollBoardConfig, TablesBasicConfig, TableList1Config]

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

@@ -81,6 +81,8 @@ import { TextCommonConfig } from "@/packages/components/Informations/Texts/TextC
 import { TextGradientConfig } from "@/packages/components/Informations/Texts/TextGradient/index";
 import { WaterPoloConfig } from "@/packages/components/Charts/Mores/WaterPolo/index";
 import { DashboardConfig } from '@/packages/components/CustomComponents/CustomComponents/Dashboard/index'
+import { BorderCustom2Config } from '@/packages/components/Decorates/Borders/BorderCustom2/index'
+
 // const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue'))
 
 const { targetData } = useTargetData() as { targetData: Ref<CreateComponentType | CreateComponentGroupType> }
@@ -106,6 +108,7 @@ const IsCommonSingle = computed(() => {
     TextGradientConfig,
     WaterPoloConfig,
     DashboardConfig,
+    BorderCustom2Config,
   ]
   const { package:packageStr, category, key } = targetData.value.chartConfig
   const flag = singleCharArr.some(_ => {