feat（能源场景组件（无边框））：能源总览

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/cost.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/gasSupply.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/mainsElectricity.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/assets/waterSupply.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/config.ts

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { EnergyOverviewConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+//导入数据
+import dataJson from './data.json'
+export const option = {
+  dataset: dataJson
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = EnergyOverviewConfig.key
+  public chartConfig = cloneDeep(EnergyOverviewConfig)
+  public option = cloneDeep(option)
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 1000, h: 240, zIndex: 1 }
+}

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/config.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    你好
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/data.json

@@ -0,0 +1,6 @@
+{
+  "cost":1000,
+  "mainsElectricity":1000,
+  "waterSupply":1000,
+  "gasSupply":1000
+}

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const EnergyOverviewConfig: ConfigType = {
+  key: 'EnergyOverview',
+  chartKey: 'VEnergyOverview',
+  conKey: 'VCEnergyOverview',
+  title: '能源总览',
+  category: ChatCategoryEnum.IntegratedEnergy,
+  categoryName: ChatCategoryEnumName.IntegratedEnergy,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'EnergyOverview.png'
+}

src/packages/components/Charts/IntegratedEnergy/EnergyOverview/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="go-energy-box">
+    <div class="grid-container">
+      <div class="grid-item">
+        <span class="item">
+          <img class="icon " src="./assets/cost.svg" alt="">
+        </span>
+        <span class="label item">费用</span>
+        <span class="value item">{{ option.dataset.cost.toFixed(2) }}</span>
+        <span class="unit item">单位</span>
+      </div>
+
+      <div class="grid-item">
+        <span class="item">
+          <img class="icon " src="./assets/cost.svg" alt="">
+        </span>
+        <span class="label item">市电</span>
+        <span class="value item">{{ option.dataset.mainsElectricity.toFixed(2) }}</span>
+        <span class="unit item">单位</span>
+      </div>
+      <div class="grid-item">
+        <span class="item">
+          <img class="icon " src="./assets/cost.svg" alt="">
+        </span>
+        <span class="label item">供水</span>
+        <span class="value item">{{ option.dataset.waterSupply.toFixed(2) }}</span>
+        <span class="unit item">单位</span>
+      </div>
+      <div class="grid-item">
+        <span class="item">
+          <img class="icon " src="./assets/cost.svg" alt="">
+        </span>
+        <span class="label item">燃气</span>
+        <span class="value item">{{ option.dataset.gasSupply.toFixed(2) }}</span>
+        <span class="unit item">单位</span>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>
+
+
+<style lang="scss" scoped>
+@include go('energy-box') {
+  width: 100%;
+  height: 100%;
+
+  .grid-container {
+    height: 100%;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 10px;
+
+    .grid-item {
+      background-color: #043951;
+      // padding: 20px;
+      padding: 10px 20px 5px 20px;
+      font-size: 30px;
+
+      display: flex;
+      align-items: center;
+      /* 默认垂直居中对齐 */
+      gap: 0px;
+
+      .item {
+        display: flex;
+        align-items: center;
+        font-family: 'CustomFont';
+        // background-color: beige;
+      }
+
+      .label {
+        color: #07A1C8;
+        font-size: 22px;
+        flex-shrink: 0;
+        margin-left: 20px;
+        align-self: flex-start;
+      }
+
+      .value {
+        color: beige;
+        font-size: 40px;
+        letter-spacing: 3px;
+        // 是否让value挤占单位生存空间
+        flex-grow: 1;
+        flex-shrink: 0;
+        margin-right: 10px;
+        align-self: flex-end;
+
+        background: linear-gradient(to top, #0d78bb, #ffffff);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        -webkit-text-fill-color: transparent;
+      }
+
+      .unit {
+        font-size: 20px;
+
+        /* 防止被压缩 */
+        flex-shrink: 0;
+
+        /* 垂直置底 */
+        align-self: flex-end;
+        margin-bottom: 5px;
+      }
+
+      .icon {
+        width: 50px;
+        height: 50px;
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,4 +1,4 @@
-
+import { EnergyOverviewConfig } from "./EnergyOverview"
 export default [
- 
+  EnergyOverviewConfig
 ]

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

@@ -8,9 +8,11 @@ export enum ChatCategoryEnum {
   MyComponets='MyComponets',
   MORE = 'Mores',
   CONFINE = 'ConfinedSpace',
-  HazardousChemicalsSpace = 'HazardousChemicalsSpace'
+  HazardousChemicalsSpace = 'HazardousChemicalsSpace',
+  IntegratedEnergy = 'IntegratedEnergy'
 }
 
+
 export enum ChatCategoryEnumName {
   BAR = '柱状图',
   PIE = '饼图',
@@ -22,5 +24,6 @@ export enum ChatCategoryEnumName {
   COMBINATION = '组合图',
   MORE = '更多',
   CONFINE = '有限空间组件',
-  HazardousChemicalsSpace = '危化品场景'
+  HazardousChemicalsSpace = '危化品场景',
+  IntegratedEnergy = '能源场景'
 }

src/packages/components/Charts/index.ts

@@ -7,6 +7,6 @@ import Maps from './Maps'
 import MyComponets from './MyComponents'
 import ConfinedSpace from './ConfinedSpace'
 import HazardousChemicalsSpace from './HazardousChemicalsSpace'
+import IntegratedEnergy from './IntegratedEnergy'
 
-
+export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps, ...Mores, ...MyComponets, ...ConfinedSpace, ...HazardousChemicalsSpace, ...IntegratedEnergy]
-export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps, ...Mores, ...MyComponets, ...ConfinedSpace, ...HazardousChemicalsSpace]