2025-08-21 20:23:25 +08:00
12 changed files with 1066 additions and 95 deletions
--- a/src/packages/components/Charts/MyComponents/AlarmList/config.ts
+++ b/src/packages/components/Charts/MyComponents/AlarmList/config.ts
@ -2,29 +2,55 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { AlarmListConfig } from './index'
 import dataJson from './data.json'
+import { chartInitConfig } from '@/settings/designSetting'
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗',
+}

+export enum FontStyleEnum {
+  NORMAL = '常规',
+  ITALIC = '斜体',
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold',
+}
+
+export const FontStyleObject = {
+  [FontStyleEnum.NORMAL]: 'normal',
+  [FontStyleEnum.ITALIC]: 'italic',
+}
 export const option = {
  dataset: dataJson.source,
  header: ['报警事件', '时间', '所属企业', '状态'],
  headerTextColor: '#B4B4B4',
  textColor: '#ffffff',
  headerBackgroundColor: '#17325F',
-  itemBackgroundColor: '#0F233E',
+  itemBackgroundColor: '#242834',
  statusColors: {
    '未解决': '#FF4D4F',
    '已解决': '#ffffff'
  },
-  headerHeight: 40,
-  itemHeight: 35,
-  fontSize: 14,
+  headerHeight: 30,
+  itemHeight: 30,
+  fontSize: 17,
  title: '近60分钟报警信息',
  titleSize: 18,
  titleColor: '#ffffff',
-  iconColor: '#00E5FF'
+  iconColor: '#00E5FF',
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  paddingX: 40,
+  paddingY: -16,
+  letterSpacing: 2
 }

 export default class Config extends PublicConfigClass implements CreateComponentType {
  public key = AlarmListConfig.key
  public chartConfig = AlarmListConfig
  public option = option
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
+
 }
--- a/src/packages/components/Charts/MyComponents/AlarmList/config.vue
+++ b/src/packages/components/Charts/MyComponents/AlarmList/config.vue
@ -1,31 +1,70 @@
 <template>
-  <div class="go-alarm-list-config">
-    <n-form-item label="标题">
-      <n-input v-model:value="option.title" />
-    </n-form-item>
-    <n-form-item label="标题大小">
-      <n-input-number v-model:value="option.titleSize" />
-    </n-form-item>
-    <n-form-item label="字体大小">
-      <n-input-number v-model:value="option.fontSize" />
-    </n-form-item>
-    <n-form-item label="表头高度">
-      <n-input-number v-model:value="option.headerHeight" />
-    </n-form-item>
-    <n-form-item label="行高度">
-      <n-input-number v-model:value="option.itemHeight" />
-    </n-form-item>
-  </div>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="标题" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.title" type="textarea" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="标题">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.titleColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.titleSize" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="字体粗细">
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
+      </setting-item>
+      <setting-item name="字体风格">
+        <n-select v-model:value="optionData.fontStyle" size="small" :options="fontStyleOptions" />
+      </setting-item>
+      <setting-item name="X轴内边距">
+        <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴内边距">
+        <n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+
+
+      <setting-item name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 </template>

 <script setup lang="ts">
 import { PropType } from 'vue'
-import { option } from './config'
-
-defineProps({
-  option: {
+import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+const props = defineProps({
+  optionData: {
    type: Object as PropType<typeof option>,
    required: true
  }
 })
+
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL]
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD]
+  }
+]
+const fontStyleOptions = [
+  {
+    label: FontStyleEnum.NORMAL,
+    value: FontStyleObject[FontStyleEnum.NORMAL]
+  },
+  {
+    label: FontStyleEnum.ITALIC,
+    value: FontStyleObject[FontStyleEnum.ITALIC]
+  }
+]
 </script>
--- a/src/packages/components/Charts/MyComponents/AlarmList/index.vue
+++ b/src/packages/components/Charts/MyComponents/AlarmList/index.vue
@ -1,40 +1,41 @@
 <template>
+  <SmallBorder class="SmallBorder">
    <div class="go-alarm-list">
      <div class="header">
        <div class="title">
-        <div class="title-prefix">
+          <!-- <div class="title-prefix">
            <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
-        </div>
+          </div> -->
          <div class="title-text">
-          <span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
+            <span :style="{
+              color: option.titleColor,
+              fontSize: option.titleSize + 'px',
+              fontWeight: option.fontWeight,
+              fontStyle: option.fontStyle,
+              marginLeft: option.paddingX + 'px',
+              marginTop: option.paddingY + 'px',
+              letterSpacing: option.letterSpacing + 'px'
+            }">{{ option.title }}</span>
          </div>
        </div>
-      <div class="header-right-squares">
-        <div class="square" style="background-color: #2e69e0"></div>
+        <div v-if="false" class="header-right-squares">
+          <!-- <div class="square" style="background-color: #2e69e0"></div>
          <div class="square" style="background-color: #2e9bf0"></div>
-        <div class="square" style="background-color: #2ef0b3"></div>
+          <div class="square" style="background-color: #2ef0b3"></div> -->
        </div>
      </div>
-    <div
-      class="table-header"
-      :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }"
-    >
-      <div
-        v-for="header in option.header"
-        :key="header"
-        class="header-item"
-        :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }"
-      >
+      <div class="table-header" :style="{
+        //  backgroundColor: option.headerBackgroundColor,
+        height: option.headerHeight + 'px'
+      }">
+        <div v-for="header in option.header" :key="header" class="header-item"
+          :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
          {{ header }}
        </div>
      </div>
      <div class="table-body">
-      <div
-        v-for="(item, index) in option.dataset"
-        :key="index"
-        class="table-row"
-        :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }"
-      >
+        <div v-for="(item, index) in option.dataset" :key="index" class="table-row"
+          :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
            {{ item.event }}
          </div>
@ -50,12 +51,15 @@
        </div>
      </div>
    </div>
+  </SmallBorder>
+
 </template>

 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { option as configOption } from './config'
-
+import SmallBorder from '../SmallBorder/index.vue'
+import { width } from 'dom-helpers'
 const props = defineProps({
  chartConfig: {
    type: Object as PropType<{ option: typeof configOption }>,
@ -72,48 +76,59 @@ const getStatusColor = (status: string) => {

 <style lang="scss" scoped>
 .go-alarm-list {
+  position: absolute;
+  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
-  background-color: #0a162b;
+  // background-color: #2066df;
  color: #ffffff;
-  padding: 15px;
+  padding: 12px;
+  margin-top:5px;
  box-sizing: border-box;
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    margin-bottom: 15px;
+    margin-bottom: 3px;
+
    .title {
      display: flex;
      align-items: center;
-      .title-prefix {
-        width: 40px;
-        height: 35px;
-        background-image: linear-gradient(to bottom, #2e69e0, #1e55a7);
-        clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        .title-icon {
-          font-size: 22px;
-        }
-      }
+      margin-top: -5px;
+
+      // .title-prefix {
+      //   width: 40px;
+      //   height: 35px;
+      //   // background-image: linear-gradient(to bottom, #2e69e0, #1e55a7);
+      //   clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
+      //   display: flex;
+      //   justify-content: center;
+      //   align-items: center;
+      //   margin-left: 0px;
+
+      //   .title-icon {
+      //     font-size: 22px;
+      //   }
+      // }
+
      .title-text {
        height: 35px;
        display: flex;
        align-items: center;
-        background-image: linear-gradient(to bottom, #17325f, #0e2142);
+        // background-image: linear-gradient(to bottom, #17325f, #0e2142);
        padding: 0 20px 0 20px;
-        margin-left: -10px;
+        // margin-left: -10px;
        clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
      }
    }
+
    .header-right-squares {
      display: flex;
      align-items: center;
+
      .square {
        width: 10px;
        height: 10px;
@ -126,29 +141,48 @@ const getStatusColor = (status: string) => {
    display: flex;
    align-items: center;
    padding: 0 10px;
+    background: linear-gradient(to top, #226493c8, #0f2448);
+    border-bottom: 2px solid #4da6ff;
+
    .header-item {
-      flex: 1;
-      text-align: center;
+      flex: 1 0 25%;
+      margin-right: 1.5em;
+      text-align: left;
    }
  }

  .table-body {
    flex: 1;
    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+      /* 隐藏滚动条 */
+      width: 0;
+      height: 0;
+    }
+
+    scrollbar-width: none;
+
    .table-row {
      display: flex;
      align-items: center;
      padding: 0 10px;
      margin-bottom: 4px;
+
      &:first-child {
        margin-top: 5px;
      }
+
      &:last-child {
        margin-bottom: 0;
      }
+
      .row-item {
-        flex: 1;
-        text-align: center;
+        flex: 1 0 25%;
+        margin-right: 1.5em;
+
+        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
--- a/src/packages/components/Charts/MyComponents/MaxTrim/config.ts
+++ b/src/packages/components/Charts/MyComponents/MaxTrim/config.ts
@ -0,0 +1,58 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { MaxTrimConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export enum WritingModeEnum {
+  HORIZONTAL = '水平',
+  VERTICAL = '垂直'
+}
+
+export const WritingModeObject = {
+  [WritingModeEnum.HORIZONTAL]: 'horizontal-tb',
+  [WritingModeEnum.VERTICAL]: 'vertical-rl'
+}
+
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗',
+}
+
+export enum FontStyleEnum {
+  NORMAL = '常规',
+  ITALIC = '斜体',
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold',
+}
+
+export const FontStyleObject = {
+  [FontStyleEnum.NORMAL]: 'normal',
+  [FontStyleEnum.ITALIC]: 'italic',
+}
+
+export const option = {
+  dataset: '储罐区监控',
+  fontSize: 38,
+  fontColor: '#ffffff',
+  paddingX: 35,
+  paddingY: 6,
+  textAlign: 'start', // 水平对齐方式
+  fontWeight: 'bold',
+  fontStyle: 'italic',
+  // 字间距
+  letterSpacing: 10,
+  writingMode: 'horizontal-tb',
+  backgroundColor: '#00000000'
+}
+
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = MaxTrimConfig.key
+  public chartConfig = cloneDeep(MaxTrimConfig)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 1920, h: 94, zIndex: 1 }
+  public option = cloneDeep(option)
+}
--- a/src/packages/components/Charts/MyComponents/MaxTrim/config.vue
+++ b/src/packages/components/Charts/MyComponents/MaxTrim/config.vue
@ -0,0 +1,96 @@
+<template>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="标题" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="标题">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="阴影颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontShadowColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="字体粗细">
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
+      </setting-item>
+      <setting-item name="字体风格">
+        <n-select v-model:value="optionData.fontStyle" size="small" :options="fontStyleOptions" />
+      </setting-item>
+      <setting-item name="X轴内边距">
+        <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴内边距">
+        <n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+
+      <setting-item name="水平对齐">
+        <n-select v-model:value="optionData.textAlign" size="small" :options="textAlignOptions" />
+      </setting-item>
+      <setting-item name="文本方向">
+        <n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" />
+      </setting-item>
+
+      <setting-item name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const textAlignOptions = [
+  { label: '左对齐', value: 'start' },
+  { label: '居中', value: 'center' },
+  { label: '右对齐', value: 'end' }
+]
+
+const verticalOptions = [
+  {
+    label: WritingModeEnum.HORIZONTAL,
+    value: WritingModeObject[WritingModeEnum.HORIZONTAL]
+  },
+  {
+    label: WritingModeEnum.VERTICAL,
+    value: WritingModeObject[WritingModeEnum.VERTICAL]
+  }
+]
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL]
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD]
+  }
+]
+const fontStyleOptions = [
+  {
+    label: FontStyleEnum.NORMAL,
+    value: FontStyleObject[FontStyleEnum.NORMAL]
+  },
+  {
+    label: FontStyleEnum.ITALIC,
+    value: FontStyleObject[FontStyleEnum.ITALIC]
+  }
+]
+
+</script>
--- a/src/packages/components/Charts/MyComponents/MaxTrim/index.ts
+++ b/src/packages/components/Charts/MyComponents/MaxTrim/index.ts
@ -0,0 +1,14 @@
+import { ConfigType, ChartFrameEnum } from '@/packages/index.d'
+
+export const MaxTrimConfig: ConfigType = {
+  key: 'MaxTrim',
+  chartKey: 'VMaxTrim',
+  conKey: 'VCMaxTrim',
+  title: '最大装饰条',
+  category: 'MyComponents',
+  categoryName: '自定义组件',
+  package: 'Charts',
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'MaxTrim.png'
+}
+export default MaxTrimConfig
--- a/src/packages/components/Charts/MyComponents/MaxTrim/index.vue
+++ b/src/packages/components/Charts/MyComponents/MaxTrim/index.vue
--- a/src/packages/components/Charts/MyComponents/SmallBorder/config.ts
+++ b/src/packages/components/Charts/MyComponents/SmallBorder/config.ts
@ -0,0 +1,18 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { SmallBorderConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  colors: ['#1089ff', '#0000ff'],
+  backgroundColor: '#00000000'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = SmallBorderConfig.key
+  public chartConfig = cloneDeep(SmallBorderConfig)
+  public option = cloneDeep(option)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 }
+
+}
--- a/src/packages/components/Charts/MyComponents/SmallBorder/config.vue
+++ b/src/packages/components/Charts/MyComponents/SmallBorder/config.vue
@ -0,0 +1,54 @@
+<template>
+  <CollapseItem name="边框" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.colors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.colors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.colors[index] = option.colors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+
+  <CollapseItem name="背景" :expanded="true">
+    <SettingItemBox name="颜色">
+      <SettingItem>
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.backgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>
--- a/src/packages/components/Charts/MyComponents/SmallBorder/index.ts
+++ b/src/packages/components/Charts/MyComponents/SmallBorder/index.ts
@ -0,0 +1,17 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+// import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+// 曲线图
+export const SmallBorderConfig: ConfigType = {
+  key: 'SmallBorder',
+  chartKey: 'VSmallBorder',
+  conKey: 'VCSmallBorder',
+  title: '带标题小边框',
+  category: 'MyComponents',
+  categoryName: '自定义组件',
+  package: 'Charts',
+  chartFrame: ChartFrameEnum.COMMON,
+  image: "SmallBorder.png",
+}
+
+// 默认导出配置对象
+export default SmallBorderConfig
--- a/src/packages/components/Charts/MyComponents/SmallBorder/index.vue
+++ b/src/packages/components/Charts/MyComponents/SmallBorder/index.vue
--- a/src/packages/components/Charts/MyComponents/index.ts
+++ b/src/packages/components/Charts/MyComponents/index.ts
@ -6,8 +6,14 @@ import { ParkingSceneConfig } from './ParkingScene/index'
 import { WorkshopSceneConfig } from './WorkshopScene/index'
 import { DeviceStatusConfig } from './DeviceStatus/index'
 import { StorageSceneConfig } from './StorageScene'
+// import { LineGraph01Config } from './LineGraph01/index'
+// import { LineGraph02Config } from './LineGraph02/index'
+import { MaxTrimConfig } from './MaxTrim/index'
+import { SmallBorderConfig } from './SmallBorder/index'
+

 export default [
+  SmallBorderConfig,
  AlarmListConfig,
  SceneDistributionConfig,
  TopAlarmsConfig,
@ -15,5 +21,8 @@ export default [
  ParkingSceneConfig,
  WorkshopSceneConfig,
  DeviceStatusConfig,
-  StorageSceneConfig
+  StorageSceneConfig,
+  MaxTrimConfig,
+  // LineGraph01Config,
+  // LineGraph02Config,
 ]