123

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

@@ -0,0 +1,24 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { DeviceStatusConfig } from './index'
+import dataJson from './data.json'
+
+export const option = {
+  dataset: dataJson.source,
+  title: '智慧园区',
+  titleColor: '#ffffff',
+  titleSize: 22,
+  labelColor: '#B0E0E6',
+  labelSize: 16,
+  valueColor: '#00E5FF',
+  valueSize: 32,
+  unitColor: '#B0E0E6',
+  unitSize: 14,
+  borderColor: '#4A90E2'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = DeviceStatusConfig.key
+  public chartConfig = DeviceStatusConfig
+  public option = option
+}

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

@@ -0,0 +1,28 @@
+<template>
+  <div class="go-device-status-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.labelSize" />
+    </n-form-item>
+    <n-form-item label="数值大小">
+      <n-input-number v-model:value="option.valueSize" />
+    </n-form-item>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+
+defineProps({
+  option: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Charts/MyComponents/DeviceStatus/data.json

@@ -0,0 +1,8 @@
+{
+  "source": [
+    { "label": "设备总数", "value": 108, "unit": "个", "icon": "database" },
+    { "label": "在线设备", "value": 100, "unit": "个", "icon": "wifi" },
+    { "label": "离线设备", "value": 8, "unit": "个", "icon": "exclamation-circle" },
+    { "label": "故障设备", "value": 2, "unit": "个", "icon": "tool" }
+  ]
+}

src/packages/components/Charts/MyComponents/DeviceStatus/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+
+export const DeviceStatusConfig: ConfigType = {
+  key: 'DeviceStatus',
+  chartKey: 'VDeviceStatus',
+  conKey: 'VCDeviceStatus',
+  title: '设备状态',
+  category: 'MyComponents',
+  categoryName: '自定义组件',
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'device_status.png'
+}
+export default DeviceStatusConfig

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

@@ -0,0 +1,95 @@
+<template>
+  <div class="go-device-status">
+    <div class="title" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</div>
+    <div class="status-grid">
+      <div v-for="(item, index) in option.dataset" :key="index" class="status-item" :style="{ borderColor: option.borderColor }">
+        <div class="item-icon-wrapper">
+          <svg-icon :icon-class="item.icon" class="item-icon"></svg-icon>
+        </div>
+        <div class="item-details">
+          <div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label }}</div>
+          <div class="item-value">
+            <span :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ item.value }}</span>
+            <span :style="{ color: option.unitColor, fontSize: option.unitSize + 'px' }">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<{ option: typeof configOption }>,
+    required: true
+  }
+})
+
+const option = computed(() => props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+.go-device-status {
+  width: 100%;
+  height: 100%;
+  background-color: #0F1C3D;
+  padding: 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .title {
+    font-weight: bold;
+    margin-bottom: 20px;
+  }
+
+  .status-grid {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 20px;
+  }
+
+  .status-item {
+    display: flex;
+    align-items: center;
+    background-color: rgba(26, 56, 90, 0.5);
+    border: 1px solid;
+    padding: 15px;
+    border-radius: 5px;
+  }
+
+  .item-icon-wrapper {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: rgba(0, 229, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 15px;
+
+    .item-icon {
+      font-size: 28px;
+      color: #00E5FF;
+    }
+  }
+
+  .item-details {
+    .item-label {
+      margin-bottom: 5px;
+    }
+    .item-value {
+      span:first-child {
+        font-weight: bold;
+        margin-right: 5px;
+      }
+    }
+  }
+}
+</style>

src/packages/components/Charts/MyComponents/index.ts

@@ -7,7 +7,8 @@ import { TopAlarmsConfig } from './TopAlarms/index'
 import { AlarmTrendConfig } from './AlarmTrend'
 import { DetailedSceneConfig } from './DetailedScene/index'
 import { ParkingSceneConfig } from './ParkingScene/index'
-import { WorkshopSceneConfig } from './WorkshopScene'
+import { WorkshopSceneConfig } from './WorkshopScene/index'
+import { DeviceStatusConfig } from './DeviceStatus'
  
 export default [
   Componet1,
@@ -19,5 +20,6 @@ export default [
   AlarmTrendConfig,
   DetailedSceneConfig,
   ParkingSceneConfig,
-  WorkshopSceneConfig
+  WorkshopSceneConfig,
+  DeviceStatusConfig
 ]