<template>
<div class="page">
<br />
<div class="header">
<!-- 主容器 -->
<div class="form-button-date-picker-container">
<!-- 场站选择 -->
<BasicForm @register="register" />
<!-- 按钮组 -->
<div class="button-group">
<div
v-for="(item, index) in buttons2"
:key="index"
:class="['btn', { active: type === index }]"
@click="type = index"
>
{{ item }}
</div>
</div>
<!-- 月份选择器 -->
<p style="margin-top: 10px; color: #a6c9e3">
时间区间</p>
<a-month-picker v-model:value="selectedMonth" placeholder="选择月份" class="date-picker" />
</div>
</div>
<TreeTableOnly />
<img class="fpfb" src="/@/assets/images/fj/gl/fpfb.png" alt="" />
<BarChartWithDelayAnimation />
<div class="conent-
echarts">
<div class="conten-ecarts-top">
<div class="conten-ecarts-top-left">
<img src="/@/assets/images/fj/gl/ljfdl.png" alt="" />
<AreaChart />
</div>
<div class="conten-ecarts-top-right">
<img src="/@/assets/images/fj/gl/scjd.png" alt="" />
<!-- <div>生产进度</div> -->
<ProductionProgressChart />
</div>
</div>
<div class="conten-ecarts-button"> </div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicForm, useForm } from '/@/components/Form';
import TreeTableOnly from './components/TreeTableOnly.vue';
import BarChartWithDelayAnimation from './components/BarChartWithDelayAnimation.vue'; // 引入
图表
import AreaChart from './components/AreaChart.vue';
import ProductionProgressChart from './components/ProductionProgressChart.vue';
import dayjs from 'dayjs'; // 引入 dayjs
import { MonthPicker } from 'ant-design-vue'; // 显式引入防止丢失
import h from 'vue';
const aMonthPicker = MonthPicker;
const buttons2 = ['本周', '本月', '本年'];
const type = ref<number>(1);
const selectedMonth = ref<dayjs.Dayjs | null>(null); // 类型安全
const [register] = useForm({
schemas: [
{
label: '场站',
field: 'fengchang',
component: 'Select',
componentProps: {
options: [
{ label: '风场A', value: 'A' },
{ label: '风场B', value: 'B' },
{ label: '风场C', value: 'C' },
],
placeholder: '请选择场站',
},
},
],
labelWidth: 50,
showLabel: false,
compact: true,
size: 'small',
// baseColProps: { span: 6 }, // 关键！不能是 24
baseColProps: { style: { width: '416px' } },
showResetButton: false,
showSubmitButton: false,
});
</script>
<style lang="less" scoped>
.page {
padding: 0 1.5vw;
color: white;
.fpfb {
margin: 30px 0px 7px 0px;
}
.header {
padding-left: 16px;
}
.form-button-date-picker-container {
margin-top: 30px;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 16px;
height: 40px;
min-width: 700px;
}
// 表单控件高度统一
:deep(.ant-select-selector) {
height: 32px !important;
display: flex;
align-items: center;
}
:deep(.ant-select-selection-item),
:deep(.ant-select-arrow) {
line-height: 30px !important;
}
// 按钮组
.button-group {
display: flex;
gap: 8px;
}
.btn {
padding: 6px 12px;
font-size: 14px;
border: none;
border-radius: 4px;
cursor: pointer;
color: #fff;
background: rgba(30, 123, 214, 0.8);
transition: all 0.3s;
}
.btn.active {
background: rgba(17, 75, 160, 0.95);
box-shadow: 0 0 8px rgba(17, 75, 160, 0.6);
color: #d8f0ff;
}
//
时间选择器
:deep(.ant-picker.month-picker) {
height: 32px;
line-height: 32px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
background: transparent;
}
:deep(.ant-picker-input > input) {
color: white !important;
}
}
.conent-
echarts {
width: 100%;
height: 367px;
// background-color: rgb(158, 124, 60);
.conten-ecarts-top {
width: 100%;
height: 335px;
background-color: skyblue;
display: flex;
.conten-ecarts-top-left {
margin-left: 12px;
margin-right: 72px;
background-color: green;
}
.conten-ecarts-top-right {
background-color: #fff;
margin-left: 12px;
margin-right: 72px;
}
}
}
</style>
为啥刷新后下面两个
echarts图表宽度变
很窄很窄
本文探讨了图表在网页中加载时出现异常变窄的问题，可能是由于JS执行速度过快，CSS未能及时渲染所致。通过使用setTimeout()函数实现JS的延迟加载，有效解决了canvas元素默认宽度造成的显示问题。
扫一扫
740
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
