1.完成生产管理-电量分析静态界面
2.完成综合管理-人员排班管理交互 3.修改部分逻辑和样式
This commit is contained in:
re-JZzzz
@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<!-- 人员排班弹窗 -->
|
||||
<el-dialog
|
||||
:model-value="manageAttendDialogVisible"
|
||||
@update:model-value="handleDialogVisibleChange"
|
||||
title="管理考勤"
|
||||
width="500"
|
||||
>
|
||||
<el-form :model="attendForm" label-width="100px">
|
||||
<el-form-item label="选择日期">
|
||||
<el-date-picker
|
||||
v-model="attendForm.date"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%;"
|
||||
:disabled-date="(time) => time.getTime() < Date.now() - 8.64e7"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 动态排班表单 -->
|
||||
<div v-for="(item, index) in attendForm.shifts" :key="index" class="dynamic-shift-item">
|
||||
<el-form-item :label="index === 0 ? '排班设置' : ''" :required="index === 0">
|
||||
<div class="shift-form-row">
|
||||
<!-- 排班类型选择 -->
|
||||
<el-select
|
||||
v-model="item.type"
|
||||
placeholder="请选择排班类型"
|
||||
style="width: 40%; margin-right: 10px;"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in availableShiftOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 人员选择 -->
|
||||
<el-select
|
||||
v-model="item.personnel"
|
||||
placeholder="请选择人员"
|
||||
style="width: 50%; margin-right: 10px;"
|
||||
multiple
|
||||
filterable
|
||||
>
|
||||
<el-option label="张三" value="1"></el-option>
|
||||
<el-option label="李四" value="2"></el-option>
|
||||
<el-option label="王五" value="3"></el-option>
|
||||
<el-option label="赵六" value="4"></el-option>
|
||||
<el-option label="钱七" value="5"></el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 删除按钮 (仅在不是第一个项目时显示) -->
|
||||
<el-button
|
||||
v-if="index > 0"
|
||||
type="danger"
|
||||
icon="CircleCloseFilled"
|
||||
circle
|
||||
@click="removeShiftItem(index)"
|
||||
></el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- 添加排班类型按钮 -->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="CirclePlusFilled"
|
||||
@click="addShiftItem"
|
||||
:disabled="attendForm.shifts.length >= shiftTypes.length"
|
||||
>
|
||||
添加排班类型
|
||||
</el-button>
|
||||
<div v-if="attendForm.shifts.length > 0" class="form-tip">
|
||||
提示：已添加 {{ attendForm.shifts.length }}/{{ shiftTypes.length }} 种排班类型
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleConfirm">
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
// 定义组件的props
|
||||
const props = defineProps({
|
||||
manageAttendDialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
// 定义组件的emits
|
||||
const emit = defineEmits<{
|
||||
'update:manageAttendDialogVisible': [value: boolean];
|
||||
'confirm': [formData: any];
|
||||
}>();
|
||||
|
||||
// 排班类型列表
|
||||
const shiftTypes = [
|
||||
{ label: '早班', value: '早班' },
|
||||
{ label: '中班', value: '中班' },
|
||||
{ label: '晚班', value: '晚班' },
|
||||
{ label: '休息', value: '休息' }
|
||||
];
|
||||
|
||||
// 考勤表单数据
|
||||
const attendForm = ref({
|
||||
date: '',
|
||||
shifts: [
|
||||
{ type: '', personnel: [] }
|
||||
]
|
||||
});
|
||||
|
||||
// 获取可用的排班类型选项（排除已添加的类型）
|
||||
const availableShiftOptions = ref(shiftTypes);
|
||||
|
||||
// 监听排班类型变化，更新可用选项
|
||||
const setupWatchers = () => {
|
||||
attendForm.value.shifts.forEach((item) => {
|
||||
watch(() => item.type, (newType) => {
|
||||
updateAvailableShiftOptions();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化时设置监听器
|
||||
setupWatchers();
|
||||
|
||||
// 更新可用的排班类型选项
|
||||
const updateAvailableShiftOptions = () => {
|
||||
const usedTypes = attendForm.value.shifts
|
||||
.map(item => item.type)
|
||||
.filter(type => type !== '');
|
||||
|
||||
availableShiftOptions.value = shiftTypes.filter(type =>
|
||||
!usedTypes.includes(type.value)
|
||||
);
|
||||
};
|
||||
|
||||
// 添加新的排班类型项
|
||||
const addShiftItem = () => {
|
||||
// 检查是否还有可用的排班类型
|
||||
if (attendForm.value.shifts.length < shiftTypes.length) {
|
||||
attendForm.value.shifts.push({ type: '', personnel: [] });
|
||||
|
||||
// 为新添加的项添加监听器
|
||||
const newItem = attendForm.value.shifts[attendForm.value.shifts.length - 1];
|
||||
watch(() => newItem.type, (newType) => {
|
||||
updateAvailableShiftOptions();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 删除排班类型项
|
||||
const removeShiftItem = (index: number) => {
|
||||
if (attendForm.value.shifts.length > 1) {
|
||||
attendForm.value.shifts.splice(index, 1);
|
||||
updateAvailableShiftOptions();
|
||||
}
|
||||
};
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
emit('update:manageAttendDialogVisible', false);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
// 处理弹窗可见性变化
|
||||
const handleDialogVisibleChange = (newVisible: boolean) => {
|
||||
emit('update:manageAttendDialogVisible', newVisible);
|
||||
if (!newVisible) {
|
||||
resetForm();
|
||||
}
|
||||
};
|
||||
|
||||
// 处理确认
|
||||
const handleConfirm = () => {
|
||||
// 提交表单数据给父组件
|
||||
emit('confirm', attendForm.value);
|
||||
emit('update:manageAttendDialogVisible', false);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
attendForm.value = {
|
||||
date: '',
|
||||
shifts: [
|
||||
{ type: '', personnel: [] }
|
||||
]
|
||||
};
|
||||
updateAvailableShiftOptions();
|
||||
// 重新设置监听器
|
||||
setupWatchers();
|
||||
};
|
||||
|
||||
// 监听弹窗显示状态变化，在显示时重置表单
|
||||
watch(() => props.manageAttendDialogVisible, (newVisible) => {
|
||||
if (newVisible) {
|
||||
resetForm();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 动态排班表单样式 */
|
||||
.dynamic-shift-item {
|
||||
margin-bottom: 15px;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.shift-form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.shift-form-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.shift-form-row .el-select {
|
||||
width: 100% !important;
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.shift-form-row .el-button {
|
||||
align-self: flex-start;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -26,6 +26,15 @@
|
||||
<div class="week-day">{{ dateInfo.weekDay }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div
|
||||
class="schedule-cell"
|
||||
:style="{ color: getShiftColor(scope.row[`day${index + 1}`]) }"
|
||||
@click="handleCellClick(scope.row, {...dateInfo, index}, scope)"
|
||||
>
|
||||
{{ scope.row[`day${index + 1}`] }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
@ -34,6 +43,10 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
'edit-schedule': [rowData: any, columnData: any, cellEvent: any]
|
||||
}>();
|
||||
|
||||
// 员工列表
|
||||
const employees = [
|
||||
{ name: '张三', position: '水泥工', weeklyHours: 142 },
|
||||
@ -51,6 +64,19 @@ const employees = [
|
||||
// 排班类型
|
||||
const shifts = ['早班', '中班', '晚班', '休息'];
|
||||
|
||||
// 排班类型与颜色的映射关系
|
||||
const shiftColorMap = {
|
||||
'早班': '#67c23a', // 绿色
|
||||
'中班': '#e6a23c', // 橙色
|
||||
'晚班': '#409eff', // 蓝色
|
||||
'休息': '#909399' // 灰色
|
||||
};
|
||||
|
||||
// 根据排班类型获取对应的颜色
|
||||
const getShiftColor = (shiftType: string) => {
|
||||
return shiftColorMap[shiftType as keyof typeof shiftColorMap] || '#333';
|
||||
};
|
||||
|
||||
// 获取当前月的日期信息
|
||||
const currentMonthDates = ref<any[]>([]);
|
||||
|
||||
@ -112,6 +138,11 @@ const scheduleData = computed(() => {
|
||||
onMounted(() => {
|
||||
currentMonthDates.value = getCurrentMonthDates();
|
||||
});
|
||||
|
||||
// 处理单元格点击事件
|
||||
const handleCellClick = (rowData: any, columnData: any, cellEvent: any) => {
|
||||
emit('edit-schedule', rowData, columnData, cellEvent);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -165,6 +196,18 @@ onMounted(() => {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* 排班单元格样式 */
|
||||
.schedule-cell {
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.schedule-cell:hover {
|
||||
background-color: #f5f7fa;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.date-number {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<!-- 考勤管理 -->
|
||||
<div class="model">
|
||||
<!-- 标题栏 -->
|
||||
<el-row :gutter="24">
|
||||
@ -45,8 +46,13 @@
|
||||
<div class="analysis-content">
|
||||
<attendTrend :attendData="attendData"></attendTrend>
|
||||
<el-card>
|
||||
<TitleComponent title="人员排班" :fontLevel="2" />
|
||||
<renyuanpaiban></renyuanpaiban>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<TitleComponent title="人员排班" :fontLevel="2" />
|
||||
<el-button type="primary" @click="manageAttendDialogVisible = true">
|
||||
管理考勤
|
||||
</el-button>
|
||||
</div>
|
||||
<renyuanpaiban @edit-schedule="handleEditSchedule"></renyuanpaiban>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -62,6 +68,40 @@
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 人员排班弹窗组件 -->
|
||||
<renyuanguanliDialog
|
||||
v-model:manageAttendDialogVisible="manageAttendDialogVisible"
|
||||
@confirm="handleAttendConfirm"
|
||||
/>
|
||||
|
||||
<!-- 编辑排班弹窗 -->
|
||||
<el-dialog v-model="editScheduleDialogVisible" title="修改排班" width="400">
|
||||
<el-form :model="editScheduleForm" label-width="100px">
|
||||
<el-form-item label="员工姓名">
|
||||
<el-input v-model="editScheduleForm.name" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="排班日期">
|
||||
<el-input v-model="editScheduleForm.date" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前排班">
|
||||
<el-input v-model="editScheduleForm.currentShift" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="修改为">
|
||||
<el-select v-model="editScheduleForm.newShift" placeholder="请选择排班类型" style="width: 100%;">
|
||||
<el-option v-for="option in shiftOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="editScheduleDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleConfirmEditSchedule">
|
||||
确认修改
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@ -72,8 +112,69 @@ import approval from '@/views/integratedManage/attendManage/components/leftBox/a
|
||||
import calendar from '@/views/integratedManage/attendManage/components/leftBox/calendar.vue'
|
||||
import totalView from '@/views/integratedManage/attendManage/components/totalView.vue'
|
||||
import renyuanpaiban from '@/views/integratedManage/attendManage/components/renyuanpaiban.vue'
|
||||
import renyuanguanliDialog from '@/views/integratedManage/attendManage/components/renyuanguanliDialog.vue'
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 人员排班弹窗
|
||||
const manageAttendDialogVisible = ref(false);
|
||||
|
||||
// 处理考勤管理确认
|
||||
const handleAttendConfirm = (formData: any) => {
|
||||
console.log('考勤表单数据:', formData);
|
||||
// 这里可以添加表单提交逻辑
|
||||
};
|
||||
|
||||
// 编辑排班弹窗
|
||||
const editScheduleDialogVisible = ref(false);
|
||||
|
||||
// 编辑排班表单数据
|
||||
const editScheduleForm = ref({
|
||||
name: '',
|
||||
date: '',
|
||||
currentShift: '',
|
||||
newShift: ''
|
||||
});
|
||||
|
||||
// 排班类型选项
|
||||
const shiftOptions = [
|
||||
{ label: '早班', value: '早班' },
|
||||
{ label: '中班', value: '中班' },
|
||||
{ label: '晚班', value: '晚班' },
|
||||
{ label: '休息', value: '休息' }
|
||||
];
|
||||
|
||||
// 处理编辑排班
|
||||
const handleEditSchedule = (rowData: any, columnData: any) => {
|
||||
// 设置表单数据
|
||||
editScheduleForm.value = {
|
||||
name: rowData.name,
|
||||
date: `${columnData.fullDate}`,
|
||||
currentShift: '',
|
||||
newShift: ''
|
||||
};
|
||||
|
||||
// 查找当前排班
|
||||
Object.keys(rowData).forEach(key => {
|
||||
if (key.startsWith('day')) {
|
||||
const dayIndex = parseInt(key.replace('day', '')) - 1;
|
||||
if (dayIndex === columnData.index) {
|
||||
editScheduleForm.value.currentShift = rowData[key];
|
||||
editScheduleForm.value.newShift = rowData[key];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 显示弹窗
|
||||
editScheduleDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 确认修改排班
|
||||
const handleConfirmEditSchedule = () => {
|
||||
console.log('修改排班数据:', editScheduleForm.value);
|
||||
// 这里可以添加修改排班的逻辑
|
||||
editScheduleDialogVisible.value = false;
|
||||
};
|
||||
|
||||
// 出勤数据 - 用于attendTrend组件
|
||||
const attendData = ref(
|
||||
{
|
||||
@ -92,46 +193,46 @@ const attendData = ref(
|
||||
|
||||
// Mock数据 - 更新为循环生成所需的数据结构
|
||||
const totalData = ref({
|
||||
attendance: {
|
||||
value: 248,
|
||||
change: '+8.2%',
|
||||
isPositive: true,
|
||||
chartData: [150, 230, 224, 218, 135, 300, 220],
|
||||
color: '#FF7D00',
|
||||
title: '总出勤人数',
|
||||
compareText: '较昨日同期',
|
||||
chartType: 'bar'
|
||||
},
|
||||
rest: {
|
||||
value: 8,
|
||||
change: '+8.2%',
|
||||
isPositive: true,
|
||||
chartData: [10, 12, 15, 8, 7, 9, 10],
|
||||
color: '#00C48C',
|
||||
title: '调休',
|
||||
compareText: '较上月同期',
|
||||
chartType: 'line'
|
||||
},
|
||||
leave: {
|
||||
value: 24,
|
||||
change: '-10%',
|
||||
isPositive: false,
|
||||
chartData: [30, 25, 28, 22, 20, 26, 24],
|
||||
color: '#FF5252',
|
||||
title: '本月请假',
|
||||
compareText: '较昨日同期',
|
||||
chartType: 'line'
|
||||
},
|
||||
rate: {
|
||||
value: '96.8%',
|
||||
change: '+10%',
|
||||
isPositive: true,
|
||||
chartData: [90, 92, 94, 95, 97, 98, 96.8],
|
||||
color: '#029CD4',
|
||||
title: '平均出勤率',
|
||||
compareText: '较昨日同期',
|
||||
chartType: 'line'
|
||||
}
|
||||
attendance: {
|
||||
value: 248,
|
||||
change: '+8.2%',
|
||||
isPositive: true,
|
||||
chartData: [150, 230, 224, 218, 135, 300, 220],
|
||||
color: '#FF7D00',
|
||||
title: '总出勤人数',
|
||||
compareText: '较昨日同期',
|
||||
chartType: 'bar'
|
||||
},
|
||||
rest: {
|
||||
value: 8,
|
||||
change: '+8.2%',
|
||||
isPositive: true,
|
||||
chartData: [10, 12, 15, 8, 7, 9, 10],
|
||||
color: '#00C48C',
|
||||
title: '调休',
|
||||
compareText: '较上月同期',
|
||||
chartType: 'line'
|
||||
},
|
||||
leave: {
|
||||
value: 24,
|
||||
change: '-10%',
|
||||
isPositive: false,
|
||||
chartData: [30, 25, 28, 22, 20, 26, 24],
|
||||
color: '#FF5252',
|
||||
title: '本月请假',
|
||||
compareText: '较昨日同期',
|
||||
chartType: 'line'
|
||||
},
|
||||
rate: {
|
||||
value: '96.8%',
|
||||
change: '+10%',
|
||||
isPositive: true,
|
||||
chartData: [90, 92, 94, 95, 97, 98, 96.8],
|
||||
color: '#029CD4',
|
||||
title: '平均出勤率',
|
||||
compareText: '较昨日同期',
|
||||
chartType: 'line'
|
||||
}
|
||||
});
|
||||
|
||||
// 审批数据 - 用于approval组件
|
||||
@ -185,47 +286,49 @@ const approvalData = ref([
|
||||
|
||||
// 今日出勤数据 - 用于todayAttend组件
|
||||
const todayAttendData = ref({
|
||||
attendance: {
|
||||
count: 150,
|
||||
icon: '/src/assets/demo/qin.png'
|
||||
},
|
||||
late: {
|
||||
count: 5,
|
||||
icon: '/src/assets/demo/chi.png'
|
||||
},
|
||||
earlyLeave: {
|
||||
count: 2,
|
||||
icon: '/src/assets/demo/tui.png'
|
||||
},
|
||||
absent: {
|
||||
count: 8,
|
||||
icon: '/src/assets/demo/que.png'
|
||||
}
|
||||
attendance: {
|
||||
count: 150,
|
||||
icon: '/src/assets/demo/qin.png'
|
||||
},
|
||||
late: {
|
||||
count: 5,
|
||||
icon: '/src/assets/demo/chi.png'
|
||||
},
|
||||
earlyLeave: {
|
||||
count: 2,
|
||||
icon: '/src/assets/demo/tui.png'
|
||||
},
|
||||
absent: {
|
||||
count: 8,
|
||||
icon: '/src/assets/demo/que.png'
|
||||
}
|
||||
});
|
||||
|
||||
// 日历数据 - 用于calendar组件
|
||||
const calendarData = ref({
|
||||
// 初始化当前日期
|
||||
today: new Date(),
|
||||
currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
|
||||
selectedDate: new Date(2025, 8, 27),
|
||||
// 初始化当前日期
|
||||
today: new Date(),
|
||||
currentDate: new Date(2025, 8, 27), // 2025年9月27日，截图中显示的日期
|
||||
selectedDate: new Date(2025, 8, 27),
|
||||
|
||||
// 模拟考勤数据
|
||||
attendanceData: {
|
||||
2025: {
|
||||
9: {
|
||||
1: 'normal',
|
||||
4: 'late',
|
||||
8: 'absent',
|
||||
10: 'leave',
|
||||
15: 'normal',
|
||||
20: 'normal',
|
||||
25: 'late',
|
||||
27: 'normal'
|
||||
}
|
||||
// 模拟考勤数据
|
||||
attendanceData: {
|
||||
2025: {
|
||||
9: {
|
||||
1: 'normal',
|
||||
4: 'late',
|
||||
8: 'absent',
|
||||
10: 'leave',
|
||||
15: 'normal',
|
||||
20: 'normal',
|
||||
25: 'late',
|
||||
27: 'normal'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -260,11 +363,11 @@ const calendarData = ref({
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.calendar-content .el-card > * {
|
||||
.calendar-content .el-card>* {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.calendar-content .el-card > *:last-child {
|
||||
.calendar-content .el-card>*:last-child {
|
||||
margin-bottom: 0;
|
||||
flex: 1;
|
||||
}
|
||||
@ -302,7 +405,7 @@ const calendarData = ref({
|
||||
}
|
||||
|
||||
/* 日历卡片内组件间距 */
|
||||
.calendar-content .el-card > * {
|
||||
.calendar-content .el-card>* {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<!--组件温度（℃） 图表内容区域 -->
|
||||
<div ref="chartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -9,64 +9,17 @@
|
||||
<span class="update-time">截止至2025/06/30 12:00</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
<!-- 关键指标卡片区域 -->
|
||||
<el-row class="metrics-container" :gutter="0">
|
||||
<el-col :span="6">
|
||||
<el-col v-for="card in cardData" :key="card.key" :span="6">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">{{ props.dashboardData.todayAlarmTotal }}</div>
|
||||
<div class="metric-label">今日报警总数</div>
|
||||
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.todayAlarmTotal.type">
|
||||
<img v-if="props.dashboardData.updates.todayAlarmTotal.type === 'up'" src="/src/assets/demo/up.png"
|
||||
<div class="metric-value">{{ props.dashboardData[card.key] }}</div>
|
||||
<div class="metric-label">{{ card.label }}</div>
|
||||
<div class="metric-change">较上周 <span :class="props.dashboardData.updates[card.updateKey].type">
|
||||
<img v-if="props.dashboardData.updates[card.updateKey].type === 'up'" src="/src/assets/demo/up.png"
|
||||
class="trend-icon" alt="上升">
|
||||
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
|
||||
props.dashboardData.updates.todayAlarmTotal.value }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">{{ props.dashboardData.unhandledAlarms }}</div>
|
||||
<div class="metric-label">未处理报警</div>
|
||||
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.unhandledAlarms.type">
|
||||
<img v-if="props.dashboardData.updates.unhandledAlarms.type === 'up'" src="/src/assets/demo/up.png"
|
||||
class="trend-icon" alt="上升">
|
||||
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
|
||||
props.dashboardData.updates.unhandledAlarms.value }}
|
||||
</span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">{{ props.dashboardData.handledAlarms }}</div>
|
||||
<div class="metric-label">已处理报警</div>
|
||||
<div class="metric-change">较上周 <span :class="props.dashboardData.updates.handledAlarms.type">
|
||||
<img v-if="props.dashboardData.updates.handledAlarms.type === 'up'" src="/src/assets/demo/up.png"
|
||||
class="trend-icon" alt="上升">
|
||||
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
|
||||
props.dashboardData.updates.handledAlarms.value }}
|
||||
</span></div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="6">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">{{ props.dashboardData.avgProcessTime }}</div>
|
||||
<div class="metric-label">平均处理时长</div>
|
||||
<div class="metric-change">
|
||||
较上周
|
||||
<span :class="props.dashboardData.updates.avgProcessTime.type">
|
||||
<img v-if="props.dashboardData.updates.avgProcessTime.type === 'up'" src="/src/assets/demo/up.png"
|
||||
class="trend-icon" alt="上升">
|
||||
<img v-else src="/src/assets/demo/down.png" class="trend-icon" alt="下降">{{
|
||||
props.dashboardData.updates.avgProcessTime.value }}
|
||||
props.dashboardData.updates[card.updateKey].value }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -176,6 +129,30 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
// 卡片数据配置
|
||||
const cardData = [
|
||||
{
|
||||
key: 'todayAlarmTotal',
|
||||
label: '今日报警总数',
|
||||
updateKey: 'todayAlarmTotal'
|
||||
},
|
||||
{
|
||||
key: 'unhandledAlarms',
|
||||
label: '未处理报警',
|
||||
updateKey: 'unhandledAlarms'
|
||||
},
|
||||
{
|
||||
key: 'handledAlarms',
|
||||
label: '已处理报警',
|
||||
updateKey: 'handledAlarms'
|
||||
},
|
||||
{
|
||||
key: 'avgProcessTime',
|
||||
label: '平均处理时长',
|
||||
updateKey: 'avgProcessTime'
|
||||
}
|
||||
];
|
||||
|
||||
const timeRange = ref('7days');
|
||||
const alarmCountRef = ref(null);
|
||||
const processEfficiencyRef = ref(null);
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<div class="pie-chart-container">
|
||||
<!-- 标题栏 -->
|
||||
<div class="chart-header">
|
||||
<TitleComponent title="报警类型分布" :fontLevel="2" />
|
||||
<el-select v-model="selectedTimeRange" placeholder="选择时间范围" size="small">
|
||||
<el-option label="今日" value="today" />
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 图表 -->
|
||||
<div ref="pieChartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
@ -27,6 +29,7 @@ const selectedTimeRange = ref('today');
|
||||
const pieChartRef = ref(null);
|
||||
let chartInstance = null;
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
@ -1,5 +1,17 @@
|
||||
<template>
|
||||
<div class="detaildata-container">
|
||||
<div class="title-container">
|
||||
<div class="title-left">
|
||||
<TitleComponent title="发电量同比分析" :font-level="2" />
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<el-input
|
||||
placeholder="请输入搜索内容"
|
||||
style="width: 200px;"
|
||||
prefix-icon="Search"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
@ -177,8 +189,24 @@ onMounted(() => {
|
||||
.detaildata-container {
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
|
||||
@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div class="duibifenxi-bar-container">
|
||||
<div ref="chartRef" class="chart" style="width: 100%; height: 300px;"></div>
|
||||
<div class="title">
|
||||
<TitleComponent title="发电量同比分析" :font-level="2" />
|
||||
<el-select placeholder="请选择线路" style="width: 150px;">
|
||||
<el-option label="A线路" value="all"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div ref="chartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -42,7 +48,7 @@ const initChart = () => {
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function(params: any) {
|
||||
formatter: function (params: any) {
|
||||
const current = params[0]
|
||||
const lastYear = params[1]
|
||||
let result = `${current.name}<br/>`
|
||||
@ -78,16 +84,12 @@ const initChart = () => {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: 'kwh',
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
padding: [0, 0, 0, 40]
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666'
|
||||
color: '#666',
|
||||
formatter: '{value} Kwh',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@ -147,28 +149,35 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.duibifenxi-bar-container {
|
||||
padding: 16px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
// 响应式调整
|
||||
@media screen and (max-width: 768px) {
|
||||
.duibifenxi-bar-container {
|
||||
padding: 12px;
|
||||
padding: 5px;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
height: 250px;
|
||||
.chart-container {
|
||||
min-height: 230px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,43 +1,45 @@
|
||||
<template>
|
||||
<div class="tongbifenxi-line-container">
|
||||
<div id="tongbifenxiLineChart" class="chart-container"></div>
|
||||
<div class="title">
|
||||
<TitleComponent title="发电量同比分析" :font-level="2" />
|
||||
<el-select placeholder="请选择线路" style="width: 150px;">
|
||||
<el-option label="A线路" value="all"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div ref="chartDomRef" class="chart-container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onBeforeUnmount, ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||||
|
||||
const chartDomRef = ref<HTMLElement | null>(null);
|
||||
const chartInstance = ref<echarts.ECharts | null>(null);
|
||||
|
||||
const initChart = () => {
|
||||
const chartDom = document.getElementById('tongbifenxiLineChart');
|
||||
if (!chartDom) return;
|
||||
if (!chartDomRef.value) return;
|
||||
|
||||
chartInstance.value = echarts.init(chartDom);
|
||||
chartInstance.value = echarts.init(chartDomRef.value);
|
||||
|
||||
// 写死的数据
|
||||
const dates = ['1号', '2号', '3号', '4号', '5号', '6号', '7号'];
|
||||
const growthRates = ['1.50', '1.20', '0.50', '0.80', '0.90', '0.30', '-2.00'];
|
||||
const growthRates = [1.50, 1.20, 0.50, 0.80, 0.90, 0.30, -2.00];
|
||||
|
||||
const option: echarts.EChartsOption = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||||
borderColor: '#409eff',
|
||||
trigger: 'item',
|
||||
backgroundColor: '#67c23a',
|
||||
borderWidth: 0,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
formatter: (params: any) => {
|
||||
const data = params[0];
|
||||
return `${data.name}:\n环比增长率: ${data.value}%`;
|
||||
return `${params.name}：\n环比增长率：${params.value}%`;
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
padding: [10, 15]
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
@ -51,7 +53,7 @@ const initChart = () => {
|
||||
boundaryGap: false,
|
||||
data: dates,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
@ -90,7 +92,6 @@ const initChart = () => {
|
||||
{
|
||||
name: '环比增长率',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
@ -103,9 +104,6 @@ const initChart = () => {
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#67c23a',
|
||||
width: 3
|
||||
@ -117,6 +115,17 @@ const initChart = () => {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
itemStyle: {
|
||||
color: '#67c23a',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 3,
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(103, 194, 58, 0.5)'
|
||||
},
|
||||
|
||||
},
|
||||
data: growthRates,
|
||||
smooth: true
|
||||
}
|
||||
@ -149,8 +158,14 @@ onBeforeUnmount(() => {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
|
||||
200
src/views/shengchanManage/powerfenxi/components/zonglan.vue
Normal file
200
src/views/shengchanManage/powerfenxi/components/zonglan.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="zonglan-container">
|
||||
<!-- 循环生成统计卡片 -->
|
||||
<div v-for="card in statCards" :key="card.id" class="stat-card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">{{ card.title }}</span>
|
||||
<el-tooltip content="查看详情" placement="top">
|
||||
<el-icon>
|
||||
<Warning />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="stat-value">{{ card.value }}</div>
|
||||
<div class="stat-footer">
|
||||
<span class="trend-indicator up">
|
||||
<img src="/src/assets/demo/up.png" alt="up" class="trend-icon"> {{ card.trendChange }}
|
||||
</span>
|
||||
<el-select v-model="card.selectedTimeRange" placeholder="选择时间范围" style="width: 120px; font-size: 12px;">
|
||||
<el-option label="Today" value="today"></el-option>
|
||||
<el-option label="This Week" value="week"></el-option>
|
||||
<el-option label="This Month" value="month"></el-option>
|
||||
<el-option label="This Year" value="year"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 统计卡片数据
|
||||
interface StatCard {
|
||||
id: string;
|
||||
title: string;
|
||||
value: string;
|
||||
trendChange: string;
|
||||
selectedTimeRange: string;
|
||||
}
|
||||
|
||||
const statCards = ref<StatCard[]>([
|
||||
{
|
||||
id: 'power-total',
|
||||
title: '总发电量',
|
||||
value: '2,456.8',
|
||||
trendChange: '4.2%',
|
||||
selectedTimeRange: 'today'
|
||||
},
|
||||
{
|
||||
id: 'year-on-year',
|
||||
title: '同比增长率',
|
||||
value: '3.8%',
|
||||
trendChange: '0.5%',
|
||||
selectedTimeRange: 'today'
|
||||
},
|
||||
{
|
||||
id: 'month-on-month',
|
||||
title: '环比增长率',
|
||||
value: '2.1%',
|
||||
trendChange: '0.3%',
|
||||
selectedTimeRange: 'today'
|
||||
},
|
||||
{
|
||||
id: 'efficiency',
|
||||
title: '运行效率',
|
||||
value: '98.6%',
|
||||
trendChange: '1.2%',
|
||||
selectedTimeRange: 'today'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.zonglan-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
color: #c0c4cc;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.info-icon:hover {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.2;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.stat-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.trend-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.trend-indicator.up {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.trend-indicator.down {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.trend-indicator i {
|
||||
margin-right: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.trend-icon {
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.time-range {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.zonglan-container {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.zonglan-container {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<DuibifenxiBar></DuibifenxiBar>
|
||||
<tongbifenxiLine></tongbifenxiLine>
|
||||
<detaildata></detaildata>
|
||||
<div class="power-fenxi-container">
|
||||
<!-- 标题栏 -->
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<TitleComponent title="电量分析" subtitle="测量在电解过程中消耗的电荷量" />
|
||||
</el-col>
|
||||
<!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
|
||||
<el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
|
||||
<el-col :span="4">
|
||||
<el-button type="primary">
|
||||
导出数据
|
||||
<el-icon class="el-icon--right">
|
||||
<UploadFilled />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第一排：总览组件 -->
|
||||
<el-row :gutter="20" class="mb-4">
|
||||
<el-col :span="24">
|
||||
<zonglan></zonglan>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="18">
|
||||
<TitleComponent title="发电量对比分析" :font-level="2" />
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select placeholder="请选择时间" style="width: 100%;">
|
||||
<el-option label="今天" value="all"></el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始"
|
||||
end-placeholder="结束" style="width: 100%;" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mb-4">
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<DuibifenxiBar></DuibifenxiBar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<tongbifenxiLine></tongbifenxiLine>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第三排：详细数据组件 -->
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<detaildata></detaildata>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||||
import detaildata from '@/views/shengchanManage/powerfenxi/components/detaildata.vue'
|
||||
import tongbifenxiLine from './components/tongbifenxiLine.vue';
|
||||
import DuibifenxiBar from './components/duibifenxiBar.vue';
|
||||
import tongbifenxiLine from '@/views/shengchanManage/powerfenxi/components/tongbifenxiLine.vue';
|
||||
import DuibifenxiBar from '@/views/shengchanManage/powerfenxi/components/duibifenxiBar.vue';
|
||||
import zonglan from '@/views/shengchanManage/powerfenxi/components/zonglan.vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.power-fenxi-container {
|
||||
padding: 20px;
|
||||
background-color: rgba(242, 248, 252, 1);
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user