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

@@ -2,55 +2,29 @@ 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: '#242834',
+  itemBackgroundColor: '#0F233E',
   statusColors: {
     '未解决': '#FF4D4F',
     '已解决': '#ffffff'
   },
-  headerHeight: 30,
+  headerHeight: 40,
-  itemHeight: 30,
+  itemHeight: 35,
-  fontSize: 17,
+  fontSize: 14,
   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,70 +1,31 @@
 <template>
-  <collapse-item name="信息" :expanded="true">
+  <div class="go-alarm-list-config">
-    <setting-item-box name="标题" :alone="true">
+    <n-form-item label="标题">
-      <setting-item>
+      <n-input v-model:value="option.title" />
-        <n-input v-model:value="optionData.title" type="textarea" size="small"></n-input>
+    </n-form-item>
-      </setting-item>
+    <n-form-item label="标题大小">
-    </setting-item-box>
+      <n-input-number v-model:value="option.titleSize" />
-  </collapse-item>
+    </n-form-item>
-
+    <n-form-item label="字体大小">
-  <collapse-item name="样式" :expanded="true">
+      <n-input-number v-model:value="option.fontSize" />
-    <setting-item-box name="标题">
+    </n-form-item>
-      <setting-item name="颜色">
+    <n-form-item label="表头高度">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.titleColor"></n-color-picker>
+      <n-input-number v-model:value="option.headerHeight" />
-      </setting-item>
+    </n-form-item>
-      <setting-item name="字体大小">
+    <n-form-item label="行高度">
-        <n-input-number v-model:value="optionData.titleSize" size="small" placeholder="字体大小"></n-input-number>
+      <n-input-number v-model:value="option.itemHeight" />
-      </setting-item>
+    </n-form-item>
-      <setting-item name="字体粗细">
+  </div>
-        <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, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject, FontStyleEnum, FontStyleObject } from './config'
+import { option } from './config'
-import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
-const props = defineProps({
+defineProps({
-  optionData: {
+  option: {
     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,65 +1,61 @@
 <template>
-  <SmallBorder class="SmallBorder">
+  <div class="go-alarm-list">
-    <div class="go-alarm-list">
+    <div class="header">
-      <div class="header">
+      <div class="title">
-        <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>
-            <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 v-if="false" class="header-right-squares">
+        <div class="title-text">
-          <!-- <div class="square" style="background-color: #2e69e0"></div>
+          <span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
-          <div class="square" style="background-color: #2e9bf0"></div>
-          <div class="square" style="background-color: #2ef0b3"></div> -->
         </div>
       </div>
-      <div class="table-header" :style="{
+      <div class="header-right-squares">
-        //  backgroundColor: option.headerBackgroundColor,
+        <div class="square" style="background-color: #2e69e0"></div>
-        height: option.headerHeight + 'px'
+        <div class="square" style="background-color: #2e9bf0"></div>
-      }">
+        <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 class="table-body">
+    </div>
-        <div v-for="(item, index) in option.dataset" :key="index" class="table-row"
+    <div
-          :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
+      class="table-header"
-          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
+      :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }"
-            {{ item.event }}
+    >
-          </div>
+      <div
-          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
+        v-for="header in option.header"
-            {{ item.time }}
+        :key="header"
-          </div>
+        class="header-item"
-          <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">
+        :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }"
-            {{ item.enterprise }}
+      >
-          </div>
+        {{ header }}
-          <div class="row-item" :style="{ color: getStatusColor(item.status), fontSize: option.fontSize + 'px' }">
+      </div>
-            {{ item.status }}
+    </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 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>
-  </SmallBorder>
+  </div>
-
 </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 }>,
@@ -76,59 +72,48 @@ 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: #2066df;
+  background-color: #0a162b;
   color: #ffffff;
-  padding: 12px;
+  padding: 15px;
-  margin-top:5px;
   box-sizing: border-box;
-  
+
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 3px;
+    margin-bottom: 15px;
-
     .title {
       display: flex;
       align-items: center;
-      margin-top: -5px;
+      .title-prefix {
-
+        width: 40px;
-      // .title-prefix {
+        height: 35px;
-      //   width: 40px;
+        background-image: linear-gradient(to bottom, #2e69e0, #1e55a7);
-      //   height: 35px;
+        clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
-      //   // background-image: linear-gradient(to bottom, #2e69e0, #1e55a7);
+        display: flex;
-      //   clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
+        justify-content: center;
-      //   display: flex;
+        align-items: center;
-      //   justify-content: center;
+        .title-icon {
-      //   align-items: center;
+          font-size: 22px;
-      //   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;
@@ -141,48 +126,29 @@ 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 0 25%;
+      flex: 1;
-      margin-right: 1.5em;
+      text-align: center;
-      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 0 25%;
+        flex: 1;
-        margin-right: 1.5em;
+        text-align: center;
-
-        text-align: left;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

src/packages/components/Charts/MyComponents/MaxTrim/config.ts

@@ -1,58 +0,0 @@
-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

@@ -1,96 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,54 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-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,14 +6,8 @@ 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,
@@ -21,8 +15,5 @@ export default [
   ParkingSceneConfig,
   WorkshopSceneConfig,
   DeviceStatusConfig,
-  StorageSceneConfig,
+  StorageSceneConfig
-  MaxTrimConfig,
-  // LineGraph01Config,
-  // LineGraph02Config,
 ]