You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.6 KiB
100 lines
2.6 KiB
<template>
|
|
<div class="company-shore-power">
|
|
<div class="left" style="width: 40%;">
|
|
<!-- <div class="card digital-twin-card--deep-blue ">
|
|
<div class="card-title">
|
|
<div class="vertical-line"></div>
|
|
<img src="@/assets/svgs/data.svg" class="title-icon" />
|
|
<span class="title-text">港口企业岸电使用</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<BarChart :chart-data="companyComparisonData" title="企业岸电使用对比" color="#4CAF50" />
|
|
</div>
|
|
</div> -->
|
|
<div class="card digital-twin-card--deep-blue ">
|
|
<div class="card-title">
|
|
<div class="vertical-line"></div>
|
|
<img src="@/assets/svgs/data.svg" class="title-icon" />
|
|
<span class="title-text">码头详情</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<!-- 下拉框和饼图组件 -->
|
|
<div class="company-selector">
|
|
<el-select v-model="selectedCompany" placeholder="请选择公司" @change="handleCompanyChange"
|
|
style="width: 100%; margin-bottom: 20px;">
|
|
<el-option v-for="item in companyComparisonData" :key="item.name" :label="item.name" :value="item.name" />
|
|
</el-select>
|
|
|
|
<PieChart :chart-data="pieChartData" :title="`${selectedCompany}子项占比`" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import PieChart from './charts/PieChart.vue'
|
|
|
|
// 定义组件属性
|
|
interface ChartDataItem {
|
|
name: string;
|
|
value: number;
|
|
children?: ChartDataItem[];
|
|
}
|
|
|
|
interface Props {
|
|
companyComparisonData: ChartDataItem[];
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
// 组件内部状态
|
|
const selectedCompany = ref<string>(props.companyComparisonData[0]?.name || '')
|
|
|
|
// 饼图数据
|
|
const pieChartData = computed(() => {
|
|
// 根据选中的公司找到对应的数据
|
|
const selectedCompanyData = props.companyComparisonData.find(item => item.name === selectedCompany.value)
|
|
return selectedCompanyData?.children || []
|
|
})
|
|
|
|
// 处理公司选择变化
|
|
const handleCompanyChange = (company: string) => {
|
|
selectedCompany.value = company
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.company-shore-power {
|
|
display: flex;
|
|
height: 100%;
|
|
gap: 10px;
|
|
}
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.card-content {
|
|
flex: 1;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.company-selector {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|