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,
+  headerHeight: 30,
-  itemHeight: 35,
+  itemHeight: 30,
-  fontSize: 14,
+  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 }
+
 }

src/packages/components/Charts/MyComponents/AlarmList/config.vue

@@ -1,31 +1,70 @@
 <template>
-  <div class="go-alarm-list-config">
+  <collapse-item name="信息" :expanded="true">
-    <n-form-item label="标题">
+    <setting-item-box name="标题" :alone="true">
-      <n-input v-model:value="option.title" />
+      <setting-item>
-    </n-form-item>
+        <n-input v-model:value="optionData.title" type="textarea" size="small"></n-input>
-    <n-form-item label="标题大小">
+      </setting-item>
-      <n-input-number v-model:value="option.titleSize" />
+    </setting-item-box>
-    </n-form-item>
+  </collapse-item>
-    <n-form-item label="字体大小">
+
-      <n-input-number v-model:value="option.fontSize" />
+  <collapse-item name="样式" :expanded="true">
-    </n-form-item>
+    <setting-item-box name="标题">
-    <n-form-item label="表头高度">
+      <setting-item name="颜色">
-      <n-input-number v-model:value="option.headerHeight" />
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.titleColor"></n-color-picker>
-    </n-form-item>
+      </setting-item>
-    <n-form-item label="行高度">
+      <setting-item name="字体大小">
-      <n-input-number v-model:value="option.itemHeight" />
+        <n-input-number v-model:value="optionData.titleSize" size="small" placeholder="字体大小"></n-input-number>
-    </n-form-item>
+      </setting-item>
-  </div>
+      <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'
+import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
-
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-defineProps({
+const props = defineProps({
-  option: {
+  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>

src/packages/components/Charts/MyComponents/AlarmList/index.vue

@@ -1,61 +1,65 @@
 <template>
-  <div class="go-alarm-list">
+  <SmallBorder class="SmallBorder">
-    <div class="header">
+    <div class="go-alarm-list">
-      <div class="title">
+      <div class="header">
-        <div class="title-prefix">
+        <div class="title">
-          <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
+          <!-- <div class="title-prefix">
+            <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
+          </div> -->
+          <div class="title-text">
+            <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="title-text">
+        <div v-if="false" class="header-right-squares">
-          <span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
+          <!-- <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>
       </div>
-      <div class="header-right-squares">
+      <div class="table-header" :style="{
-        <div class="square" style="background-color: #2e69e0"></div>
+        //  backgroundColor: option.headerBackgroundColor,
-        <div class="square" style="background-color: #2e9bf0"></div>
+        height: option.headerHeight + 'px'
-        <div class="square" style="background-color: #2ef0b3"></div>
+      }">
+        <div v-for="header in option.header" :key="header" class="header-item"
+          :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
+          {{ header }}
+        </div>
       </div>
-    </div>
+      <div class="table-body">
-    <div
+        <div v-for="(item, index) in option.dataset" :key="index" class="table-row"
-      class="table-header"
+          :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
-      :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }"
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
-    >
+            {{ item.event }}
-      <div
+          </div>
-        v-for="header in option.header"
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
-        :key="header"
+            {{ item.time }}
-        class="header-item"
+          </div>
-        :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }"
+          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
-      >
+            {{ item.enterprise }}
-        {{ header }}
+          </div>
-      </div>
+          <div class="row-item" :style="{ color: getStatusColor(item.status), fontSize: option.fontSize + 'px' }">
-    </div>
+            {{ item.status }}
-    <div class="table-body">
+          </div>
-      <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>
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
-          {{ item.time }}
-        </div>
-        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
-          {{ item.enterprise }}
-        </div>
-        <div class="row-item" :style="{ color: getStatusColor(item.status), fontSize: option.fontSize + 'px' }">
-          {{ item.status }}
         </div>
       </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 {
+      margin-top: -5px;
-        width: 40px;
+
-        height: 35px;
+      // .title-prefix {
-        background-image: linear-gradient(to bottom, #2e69e0, #1e55a7);
+      //   width: 40px;
-        clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
+      //   height: 35px;
-        display: flex;
+      //   // background-image: linear-gradient(to bottom, #2e69e0, #1e55a7);
-        justify-content: center;
+      //   clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
-        align-items: center;
+      //   display: flex;
-        .title-icon {
+      //   justify-content: center;
-          font-size: 22px;
+      //   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;
+      flex: 1 0 25%;
-      text-align: center;
+      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;
+        flex: 1 0 25%;
-        text-align: center;
+        margin-right: 1.5em;
+
+        text-align: left;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

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)
+}

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>

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

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 }
+
+}

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>

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

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,
 ]