From 1045234b984545068dd58c45a6632880b69ea771 Mon Sep 17 00:00:00 2001
From: lucashu <6125220@qq.com>
Date: Wed, 20 Aug 2025 12:21:54 +0800
Subject: [PATCH] 123123

---
 .../MyComponents/DetailedScene/config.ts      |  27 ++++
 .../MyComponents/DetailedScene/config.vue     |  31 ++++
 .../MyComponents/DetailedScene/data.json      |  20 +++
 .../MyComponents/DetailedScene/index.ts       |  14 ++
 .../MyComponents/DetailedScene/index.vue      | 140 ++++++++++++++++++
 .../components/Charts/MyComponents/index.ts   |   4 +-
 6 files changed, 235 insertions(+), 1 deletion(-)
 create mode 100644 src/packages/components/Charts/MyComponents/DetailedScene/config.ts
 create mode 100644 src/packages/components/Charts/MyComponents/DetailedScene/config.vue
 create mode 100644 src/packages/components/Charts/MyComponents/DetailedScene/data.json
 create mode 100644 src/packages/components/Charts/MyComponents/DetailedScene/index.ts
 create mode 100644 src/packages/components/Charts/MyComponents/DetailedScene/index.vue

diff --git a/src/packages/components/Charts/MyComponents/DetailedScene/config.ts b/src/packages/components/Charts/MyComponents/DetailedScene/config.ts
new file mode 100644
index 0000000..650446d
--- /dev/null
+++ b/src/packages/components/Charts/MyComponents/DetailedScene/config.ts
@@ -0,0 +1,27 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { DetailedSceneConfig } from './index'
+import dataJson from './data.json'
+
+export const option = {
+  dataset: dataJson.source,
+  title: '场景分布概况',
+  titleColor: '#ffffff',
+  titleSize: 20,
+  linkColor: '#00E5FF',
+  linkText: '查看更多>>',
+  sceneNameColor: '#ffffff',
+  sceneNameSize: 18,
+  labelColor: '#B0E0E6',
+  labelSize: 14,
+  valueColor: '#ffffff',
+  valueSize: 24,
+  pointColor1: '#00E5FF',
+  pointColor2: '#FFD700'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = DetailedSceneConfig.key
+  public chartConfig = DetailedSceneConfig
+  public option = option
+}
diff --git a/src/packages/components/Charts/MyComponents/DetailedScene/config.vue b/src/packages/components/Charts/MyComponents/DetailedScene/config.vue
new file mode 100644
index 0000000..9dfed08
--- /dev/null
+++ b/src/packages/components/Charts/MyComponents/DetailedScene/config.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="go-detailed-scene-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.sceneNameSize" />
+    </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>
diff --git a/src/packages/components/Charts/MyComponents/DetailedScene/data.json b/src/packages/components/Charts/MyComponents/DetailedScene/data.json
new file mode 100644
index 0000000..4e82f9e
--- /dev/null
+++ b/src/packages/components/Charts/MyComponents/DetailedScene/data.json
@@ -0,0 +1,20 @@
+{
+  "source": [
+    {
+      "name": "危化品库",
+      "icon": "warehouse",
+      "metrics": [
+        { "label": "场景总数", "value": 262 },
+        { "label": "智控场景", "value": 6852 }
+      ]
+    },
+    {
+      "name": "危废品库",
+      "icon": "trash",
+      "metrics": [
+        { "label": "智控场景", "value": 6852 },
+        { "label": "场景总数", "value": 262 }
+      ]
+    }
+  ]
+}
diff --git a/src/packages/components/Charts/MyComponents/DetailedScene/index.ts b/src/packages/components/Charts/MyComponents/DetailedScene/index.ts
new file mode 100644
index 0000000..fad2a98
--- /dev/null
+++ b/src/packages/components/Charts/MyComponents/DetailedScene/index.ts
@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+
+export const DetailedSceneConfig: ConfigType = {
+  key: 'DetailedScene',
+  chartKey: 'VDetailedScene',
+  conKey: 'VCDetailedScene',
+  title: '详细场景',
+  category: 'MyComponents',
+  categoryName: '自定义组件',
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'detailed_scene.png'
+}
+export default DetailedSceneConfig
diff --git a/src/packages/components/Charts/MyComponents/DetailedScene/index.vue b/src/packages/components/Charts/MyComponents/DetailedScene/index.vue
new file mode 100644
index 0000000..3b3d54b
--- /dev/null
+++ b/src/packages/components/Charts/MyComponents/DetailedScene/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="go-detailed-scene">
+    <div class="header">
+      <div class="title">
+        <svg-icon icon-class="rocket" class="title-icon"></svg-icon>
+        <span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
+      </div>
+      <a class="link" :style="{ color: option.linkColor }">{{ option.linkText }}</a>
+    </div>
+    <div class="content">
+      <div v-for="(scene, index) in option.dataset" :key="index" class="scene-row">
+        <div class="scene-icon-container">
+          <svg-icon :icon-class="scene.icon" class="scene-icon"></svg-icon>
+        </div>
+        <div class="scene-name" :style="{ color: option.sceneNameColor, fontSize: option.sceneNameSize + 'px' }">{{ scene.name }}</div>
+        <div class="metrics-container">
+          <div v-for="(metric, mIndex) in scene.metrics" :key="mIndex" class="metric">
+            <div class="metric-label">
+              <span class="point" :style="{ backgroundColor: mIndex === 0 ? option.pointColor1 : option.pointColor2 }"></span>
+              <span :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ metric.label }}</span>
+            </div>
+            <div class="metric-value" :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ metric.value }}</div>
+          </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-detailed-scene {
+  width: 100%;
+  height: 100%;
+  background-color: #0F1C3D;
+  padding: 15px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #1A385A;
+    padding: 5px 15px;
+    border-radius: 5px;
+    margin-bottom: 20px;
+
+    .title {
+      display: flex;
+      align-items: center;
+      .title-icon {
+        font-size: 24px;
+        margin-right: 10px;
+        color: #00E5FF;
+      }
+    }
+
+    .link {
+      cursor: pointer;
+      font-size: 14px;
+    }
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  .scene-row {
+    display: flex;
+    align-items: center;
+    background-color: rgba(26, 56, 90, 0.5);
+    border-radius: 50px;
+    padding: 10px 20px;
+    margin: 10px 0;
+  }
+
+  .scene-icon-container {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: radial-gradient(circle, #00E5FF 0%, rgba(15, 28, 61, 0) 70%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 15px;
+
+    .scene-icon {
+      font-size: 32px;
+      color: #ffffff;
+    }
+  }
+
+  .scene-name {
+    font-weight: bold;
+    margin-right: auto;
+  }
+
+  .metrics-container {
+    display: flex;
+    .metric {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 20px;
+      .metric-label {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+        .point {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          margin-right: 5px;
+        }
+      }
+      .metric-value {
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/packages/components/Charts/MyComponents/index.ts b/src/packages/components/Charts/MyComponents/index.ts
index 872c7dc..b4ca756 100644
--- a/src/packages/components/Charts/MyComponents/index.ts
+++ b/src/packages/components/Charts/MyComponents/index.ts
@@ -5,6 +5,7 @@ import { SmartCampusMetricsConfig } from './SmartCampusMetrics/index'
 import { SceneDistributionConfig } from './SceneDistribution/index'
 import { TopAlarmsConfig } from './TopAlarms/index'
 import { AlarmTrendConfig } from './AlarmTrend'
+import { DetailedSceneConfig } from './DetailedScene'
  
 export default [
   Componet1,
@@ -13,5 +14,6 @@ export default [
   SmartCampusMetricsConfig,
   SceneDistributionConfig,
   TopAlarmsConfig,
-  AlarmTrendConfig
+  AlarmTrendConfig,
+  DetailedSceneConfig
 ]