Merge branch 'master' of http://119.45.132.149:3000/security/go-view-fetch

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

@@ -5,12 +5,25 @@ import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 import * as echarts from 'echarts'
 
-export const includes = ['title']
+export const includes = []
-// 基于准备好的dom，初始化echarts实例
+const otherOption = {
-// var myChart = echarts.init(document.getElementById('main'));
+  unit: '万kwh',
-
+}
 
 const option = {
+  ...otherOption,
+  dataset: dataJson,
+  // 添加标题配置
+  title: {
+    text: '单位：' + otherOption.unit,
+    left: '3%',
+    top: '3%',
+    textStyle: {
+      fontSize: 12,
+      color: 'rgba(255, 255, 255, 0.7)',
+      fontWeight: 'normal'
+    }
+  },
   // 提示框配置
   tooltip: {
     trigger: 'axis',
@@ -23,7 +36,6 @@ const option = {
       color: '#ffffff'
     }
   },
-  dataset: dataJson,
   // 网格配置
   grid: {
     left: '3%',
@@ -38,7 +50,7 @@ const option = {
     type: 'category',
     axisLine: {
       lineStyle: {
-        color: '#eee'
+        color: 'rgba(255, 255, 255, 0.1)',
       }
     },
     axisTick: {
@@ -46,7 +58,7 @@ const option = {
     },
     // 
     axisLabel: {
-      color: '#80b0c4',
+      color: '#eee',
       interval: 0,
       fontSize: 9,
       margin: 20
@@ -60,8 +72,10 @@ const option = {
     min: 0,
     interval: 25,
     axisLine: {
-      show: false,
+      show: true,
-
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+      }
     },
     axisTick: {
       show: false
@@ -83,22 +97,21 @@ const option = {
 
     name: '能源消耗',
     type: 'bar',
-    // data: values.map((value, index) => ({
-    //   value: value,
     itemStyle: {
       color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-        { offset: 0, color: '#1d7b7b' },    // 更暗的左侧颜色，增强阴影效果
+        { offset: 0, color: '#82ffff' },    // 更暗的左侧颜色，增强阴影效果
-        { offset: 0.2, color: '#196b6b' },  // 左侧过渡色
+        { offset: 0.2, color: '#00bfbf' },  // 左侧过渡色
-        { offset: 0.7, color: '#00cccc' },  // 中间主色
+        { offset: 0.5, color: '#008f8f' },  // 中间主色
-        { offset: 0.8, color: '#33dddd' },  // 右侧过渡色
+        { offset: 0.8, color: '#00bfbf' },  // 右侧过渡色
-        { offset: 1, color: '#66ffff' }     // 右侧亮色，增强高光效果
+        { offset: 1, color: '#82ffff' }     // 右侧亮色，增强高光效果
       ]),
+      opacity: 0.60,
       // 添加更强的3D效果
       shadowBlur: 20,
       shadowColor: 'rgba(0, 0, 0, 0.7)',
       shadowOffsetX: -5,
       shadowOffsetY: 5,
-      borderRadius: [0, 0, 6, 6],
+      borderRadius: [0, 0, 4, 4],
       borderWidth: 0,
 
     },
@@ -112,20 +125,21 @@ const option = {
     },
     // })),
 
-    barWidth: '40%',
+    barWidth: '45%',
 
     // 3D圆柱体效果
-    roundCap: true
+    roundCap: false
   }, {
     name: '顶部圆',
     type: 'pictorialBar',
     z: 3,
-    symbolSize: ['57%', '10'],
+    symbolSize: ['62%', '6'],
-    symbolOffset: [0.1, -5],
+    symbolOffset: [0.1, -3],
     symbolPosition: "end",
     itemStyle: {
-      color: "#40ECEC",
+      color: "rgba(51, 221, 221, 0.8)",
     },
+    // opacity: 0.1,
     emphasis: {
       itemStyle: {
         shadowColor: 'rgba(0, 255, 255, 0.8)',
@@ -137,16 +151,6 @@ const option = {
 
   // 图形元素配置
   graphic: [{
-    // 单位标注
-    type: 'text',
-    left: '3%',
-    top: '3%',
-    style: {
-      text: '单位：' + dataJson.unit,
-      fontSize: 12,
-      fill: 'rgba(255, 255, 255, 0.7)',
-    }
-  }, {
     // 左侧阴影效果
     type: 'rect',
     left: 0,

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

@@ -52,6 +52,5 @@
       "month": "12月",
       "value": 67
     }
-  ],
+  ]
-  "unit": "万kwh"
 }

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

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, onMounted, ref } from 'vue'
+import { PropType, computed, onMounted, ref, watch } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import * as echarts from 'echarts'
@@ -48,16 +48,31 @@ use([
 
 const replaceMergeArr = ref<string[]>([])
 
+const updataUnit = () => {
+  option.value.title.text = '单位：' + option.value.unit;
+
+}
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    updataUnit();
+    option.value.dataset = newData
+  }, {
+  immediate: true,
+  deep: false
+}
+)
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   props.chartConfig.option.dataset = newData
 })
 
 onMounted(async () => {
-
+  // 更新显示单位
+  updataUnit();
 })
 
 </script>

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

@@ -3,9 +3,44 @@ import { CreateComponentType } from '@/packages/index.d'
 import { EnergyOverviewConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
+
 //导入数据
+import costIcon from './assets/cost.svg'
 import dataJson from './data.json'
+const otherOption = {
+  gridItems: [
+    {
+      icon: costIcon,
+      label: '费用',
+      field: 'cost',
+      unit: '单位',
+      valueClass: 'value-cost'
+    },
+    {
+      icon: costIcon,
+      label: '市电',
+      field: 'mainsElectricity',
+      unit: '单位',
+      valueClass: 'value-electricity'
+    },
+    {
+      icon: costIcon,
+      label: '供水',
+      field: 'waterSupply',
+      unit: '单位',
+      valueClass: 'value-water'
+    },
+    {
+      icon: costIcon,
+      label: '燃气',
+      field: 'gasSupply',
+      unit: '单位',
+      valueClass: 'value-gas'
+    }
+  ]
+}
 export const option = {
+  ...otherOption,
   dataset: dataJson
 }
 
@@ -13,5 +48,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
   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 }
+  public attr = { ...chartInitConfig, x: 0, y: 0, w: 889, h: 267, zIndex: 1 }
 }

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

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

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

@@ -1,59 +1,48 @@
 <template>
   <div class="go-energy-box">
     <div class="grid-container">
-      <div class="grid-item">
+      <div v-for="(item, index) in configOption.gridItems" :key="index" class="grid-item">
         <span class="item">
-          <img class="icon " src="./assets/cost.svg" alt="">
+          <img class="icon" :src="item.icon" :alt="item.label">
         </span>
-        <span class="label item">费用</span>
+        <div class="item-container item">
-        <span class="value item">{{ option.dataset.cost.toFixed(2) }}</span>
+          <span class="label">{{ item.label }}</span>
-        <span class="unit item">单位</span>
+          <div class="value-container">
-      </div>
+            <div class="value" :class="item.valueClass">
-
+              {{ getDataValue(item.field).toFixed(2) }}
-      <div class="grid-item">
+            </div>
-        <span class="item">
+            <span class="unit">{{ item.unit }}</span>
-          <img class="icon " src="./assets/cost.svg" alt="">
+          </div>
-        </span>
+        </div>
-        <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 { PropType, 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
 })
+
+
+// 获取数据值的方法
+const getDataValue = (field: string) => {
+  return (option.dataset as Record<string, number>)[field] || 0
+}
+
 watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
@@ -70,7 +59,6 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
 })
 </script>
 
-
 <style lang="scss" scoped>
 @include go('energy-box') {
   width: 100%;
@@ -84,63 +72,99 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
     grid-gap: 10px;
 
     .grid-item {
-      background-color: #043951;
+      // background-color: #043951;
-      // padding: 20px;
       padding: 10px 20px 5px 20px;
       font-size: 30px;
-
       display: flex;
       align-items: center;
-      /* 默认垂直居中对齐 */
       gap: 0px;
 
-      .item {
+
+      .item-container {
         display: flex;
-        align-items: center;
+        flex-direction: column;
-        font-family: 'CustomFont';
-        // background-color: beige;
-      }
-
-      .label {
-        color: #07A1C8;
-        font-size: 22px;
-        flex-shrink: 0;
         margin-left: 20px;
-        align-self: flex-start;
+        margin-right: 20px;
+        width: 100%;
+        height: auto;
+        font-family: 'CustomFont';
+
+
+        .value-container {
+          display: flex;
+          align-items: flex-end;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+
+          .value {
+            font-size: 35px;
+            letter-spacing: 3px;
+            // flex-grow: 1;
+            // flex-shrink: 0;
+            align-self: flex-end;
+            white-space: nowrap;
+            overflow: hidden;
+            margin-right: 20px;
+            // -webkit-background-clip: text;
+            // background-clip: text;
+            // color: transparent;
+            // -webkit-text-fill-color: transparent;
+          }
+
+          .unit {
+            font-size: 18px;
+            flex-shrink: 0;
+            color: #eee;
+            margin-bottom: 10px;
+          }
+        }
+
+        .label {
+          color: #07A1C8;
+          font-size: 22px;
+          align-self: flex-start;
+
+          // 使用渐变背景色
+          background: linear-gradient(to right, rgba(255, 255, 255, 0.624) 0%, rgba(255, 255, 255, 1) 100%);
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+          color: transparent; // 兼容性处理
+        }
+
+
+
+        // 为每个value定义不同的颜色
+        .value-cost {
+          color: #479FFE;
+        }
+
+        .value-electricity {
+          color: #90FFAD;
+        }
+
+        .value-water {
+          color: #0DBBF4;
+        }
+
+        .value-gas {
+          color: #E5B55B;
+        }
+
+
+
       }
 
-      .value {
+      .item {}
-        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;
+        width: 60px;
-        height: 50px;
+        height: 60px;
         flex-shrink: 0;
+        object-fit: contain;
       }
     }
   }