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.
88 lines
2.6 KiB
88 lines
2.6 KiB
1 month ago
|
<template>
|
||
|
|
<div class="company-shore-power">
|
||
|
|
<div class="left">
|
||
|
|
<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}子项占比`" style="height: 300px;" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, computed } from 'vue'
|
||
|
|
import BarChart from './charts/BarChart.vue'
|
||
|
|
import PieChart from './charts/PieChart.vue'
|
||
|
|
|
||
|
|
// 定义组件属性
|
||
|
|
interface ChartDataItem {
|
||
|
|
name: string;
|
||
|
|
value: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
companyComparisonData: ChartDataItem[];
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = defineProps<Props>()
|
||
|
|
|
||
|
|
// 定义事件
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'company-change', company: string): void;
|
||
|
|
}>()
|
||
|
|
|
||
|
|
// 组件内部状态
|
||
|
|
const selectedCompany = ref<string>(props.companyComparisonData[0]?.name || '')
|
||
|
|
|
||
|
|
// 模拟的饼图数据
|
||
|
|
const pieChartData = computed(() => {
|
||
|
|
// 根据选中的公司生成模拟的子项数据
|
||
|
|
return [
|
||
|
|
{ name: '码头1', value: Math.floor(Math.random() * 100) + 50 },
|
||
|
|
{ name: '码头2', value: Math.floor(Math.random() * 100) + 50 },
|
||
|
|
{ name: '码头3', value: Math.floor(Math.random() * 100) + 50 },
|
||
|
|
{ name: '码头4', value: Math.floor(Math.random() * 100) + 50 },
|
||
|
|
]
|
||
|
|
})
|
||
|
|
|
||
|
|
// 处理公司选择变化
|
||
|
|
const handleCompanyChange = (company: string) => {
|
||
|
|
emit('company-change', company)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.company-shore-power {
|
||
|
|
display: flex;
|
||
|
|
height: 100%;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.company-selector {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|