go-viee-fetch-Demo/src/packages/components/Charts/IntegratedEnergy/PowerConsumptionRankingSystem/index.vue

<template>
  <div class="flex_column wrapper">
    <!-- 顶部标题栏 -->
    <!-- <div class="title-bar">
      <div class="title">用电量排名</div>
      <div class="tabs">
        <div class="tab active">市电</div>
        <div class="tab">供水</div>
        <div class="tab">燃气</div>
      </div>
      </div> -->

    <div v-for="(item, index) in dataset" :key="index" class="flex_v chart_item">
      <!-- 包裹每行的内容（序号、名称、进度条、数值） -->
      <div class="row-content row-bg-container">
        <div class="left-group ">
          <div v-if="index == 0" class="squareIcon squareIcon1 flex_c ">{{ index + 1 }}</div>
          <div v-else-if="index == 1" class="squareIcon squareIcon1 flex_c">{{ index + 1 }}</div>
          <div v-else-if="index == 2" class="squareIcon squareIcon1 flex_c">{{ index + 1 }}</div>
          <div v-else class="squareIcon squareIcon2 flex_c">{{ index + 1 }}</div>
          <div class="name" :title="item.name">{{ item.name }}</div>
        </div>
        <div class="right-group">
          <div class="bar_wrapper">
            <div class="bar_body" :style="{
              width: item.percentage + '%',
              height: '12px', borderRadius: borderRadius + 'px'
            }">
            </div>
          </div>
          <div class="value">{{ item.value }}{{ item.unit }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs, watch, shallowReactive, onMounted } from 'vue'
import { useChartDataFetch } from '@/hooks'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import config, { option as configOption } from './config'
const props = defineProps({
  chartConfig: {
    type: Object as PropType<config>,
    required: true
  }
})

// 取配置数据
const { w, h } = toRefs(props.chartConfig.attr)
const { color, color2, railColor, railBorderColor, borderRadius, railWidth, dataset } = toRefs(
  props.chartConfig.option
)

// 手动更新
watch(
  () => props.chartConfig.option.dataset,
  (newData: any) => {
    try {
      dataset.value = newData
    } catch (error) {
      console.log(error)
    }
  },
  {
    deep: false
  }
)
// 预览更新
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: Array<{ name: string; value: number, percentage: number, unit: string }>) => {
  dataset.value = newData
})
</script>

<style scoped lang="scss">
.flex_v {
  display: flex;
  align-items: center;
}

.flex_column {
  // background-color: antiquewhite;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex_c {
  display: flex;
  justify-content: center;
  align-items: center;
}

// .wrapper {
//   width: 450px;
//   height: 320px;
//   background: url('./images/背景框_03.png') no-repeat center center; 
//   background-size: cover;
//   padding: 10px;
//   box-sizing: border-box;
// }

// .title-bar {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   margin-bottom: 10px;
//   color: #fff;
// }

// .title {
//   font-size: 16px;
//   font-weight: bold;
//   margin-left: 30px;
//   width: 100px;
//   white-space: nowrap;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   font-family: "思源黑体", sans-serif; 
//   letter-spacing: 2px; 
//   padding-bottom: 2px;

// }

// .tabs {
//   display: flex;
// }

// .tab {
//   padding-right: 6px;
//   margin-left: 6px;
//   cursor: pointer;
//   font-size: 16px;
//   white-space: nowrap;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   font-family: "思源黑体";
//   color: #2A99FF;
// }

// .tab.active {
//   // background-color: #007bff;
// }

// .name {
//   width: 100px;
//   white-space: nowrap;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   padding: 8px;
//   color: #fff;
// }

.value {
  margin: 0 0 0 10px;
  color: #fff;
}

.bar_wrapper {
  width: v-bind('railWidth + "px"');
  height: 12px;
  border: 1px solid v-bind('railBorderColor');
  border-radius: v-bind('borderRadius + "px"');
  background-color: v-bind('railColor');
  position: relative;
  z-index: 0;
}

.bar_body {
  background: linear-gradient(to right, v-bind('color'), v-bind('color2'));
}

.progressClass {
  position: absolute;
  z-index: 1;
}

.squareIcon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: white;
  font-weight: bold;
}

.squareIcon1 {
  background: url('./images/排行底1_03.png') no-repeat center center;
  background-size: cover;
  box-sizing: border-box;
}

.squareIcon2 {
  background: url('./images/排行底2_03.png') no-repeat center center;
  background-size: cover;
  box-sizing: border-box;
}

.chart_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 10px;
  font-size: 12px;
  position: relative;
  padding-left: 30px;
  padding-right: 20px;
}

.row-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.left-group {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 180px;
  // 调整左侧外边距，进一步微调位置
  margin-left: 10px;
}

.right-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-left: auto;
}

.row-bg-container {
  width: 100%;
  background: url('./images/左3条_03.png') no-repeat center center;
  background-size: cover;
  // 增加左侧内边距，使背景更靠左边
  padding: 12px 0 30px 20px;
  height: 35px;
  box-sizing: border-box; // 确保内边距和边框包含在宽度内
}
</style>