界面美化

This commit is contained in:
zhangshun
2026-05-29 16:32:43 +08:00
parent ebfa6f0458
commit 42dab65fed
26 changed files with 2000 additions and 1072 deletions

View File

@@ -1,9 +1,19 @@
<template> <template>
<el-breadcrumb class="app-breadcrumb" separator="/"> <el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path"> <el-breadcrumb-item
<span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{ translateMenuTitle(item.meta.title) }}</span> v-for="(item, index) in filteredLevelList"
<router-link v-else :to="item.redirect||item.path">{{ translateMenuTitle(item.meta.title) }}</router-link> :key="item.path"
>
<span
v-if="item.redirect === 'noredirect' || index === filteredLevelList.length - 1"
class="no-redirect"
>
{{ translateMenuTitle(item.meta.title) }}
</span>
<router-link v-else :to="item.redirect || item.path">
{{ translateMenuTitle(item.meta.title) }}
</router-link>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>
</el-breadcrumb> </el-breadcrumb>
@@ -18,6 +28,12 @@ export default {
levelList: null levelList: null
} }
}, },
computed: {
// 过滤掉没有 title 的项
filteredLevelList() {
return this.levelList.filter(item => item.meta?.title)
}
},
watch: { watch: {
$route() { $route() {
this.getBreadcrumb() this.getBreadcrumb()

View File

@@ -37,6 +37,7 @@ export default {
secondLevelMenuName: 'Second-Level Menu', secondLevelMenuName: 'Second-Level Menu',
roleName: 'Role Name', roleName: 'Role Name',
role: 'Role:', role: 'Role:',
roleMenuData: 'Role Menu Data',
selectPlaceholder: 'Please select', selectPlaceholder: 'Please select',
sequence: 'No.', sequence: 'No.',
addFirstLevelModule: 'Add First-Level Menu', addFirstLevelModule: 'Add First-Level Menu',
@@ -361,6 +362,11 @@ export default {
qualified: 'Qualified', qualified: 'Qualified',
unqualified: 'Unqualified', unqualified: 'Unqualified',
all: 'All', all: 'All',
detailTitle: 'Assembly Quality Details',
detailSubtitle: 'Inspect measurements, limits, and quality status after multi-filter search',
summaryTotal: 'Total Results',
summaryPageSize: 'Page Size',
summaryFilters: 'Active Filters',
noData: 'No data' noData: 'No data'
}, },
inquiryTransitInformation: { inquiryTransitInformation: {
@@ -406,11 +412,17 @@ export default {
productModel: 'Product Model', productModel: 'Product Model',
offlineTime: 'Offline Time', offlineTime: 'Offline Time',
trendTitle: 'Offline Output Trend Analysis', trendTitle: 'Offline Output Trend Analysis',
trendSubtitle: 'Monitor output fluctuations and abnormal offline periods within the selected range',
detailTitle: 'Offline Detail Records',
detailSubtitle: 'Shows production offline details matching the current filters',
saveAsImage: 'Save as Image', saveAsImage: 'Save as Image',
dateAxis: 'Date', dateAxis: 'Date',
hourAxis: 'Hour', hourAxis: 'Hour',
offlineQuantityAxis: 'Offline Engine Qty', offlineQuantityAxis: 'Offline production Qty',
offlineQuantitySeries: 'Offline Qty', offlineQuantitySeries: 'Offline Qty',
summaryTotal: 'Offline Total',
summaryTrendPoints: 'Trend Points',
summaryGranularity: 'Granularity',
selectDateRange: 'Please select start date and end date!', selectDateRange: 'Please select start date and end date!',
noData: 'No data' noData: 'No data'
}, },
@@ -431,9 +443,16 @@ export default {
station: 'Station', station: 'Station',
totalAverageBeat: 'Total Avg Beat (s)', totalAverageBeat: 'Total Avg Beat (s)',
totalAverageBeatChartTitle: 'Total Average Beat Bar Chart', totalAverageBeatChartTitle: 'Total Average Beat Bar Chart',
chartSubtitle: 'Quickly identify bottleneck stations with higher average beat',
detailTitle: 'Station Beat Details',
detailSubtitle: 'Review average beat by station across each date',
totalAverageBeatAxis: 'Total Avg Beat (s)', totalAverageBeatAxis: 'Total Avg Beat (s)',
totalAverageBeatSeries: 'Total Avg Beat', totalAverageBeatSeries: 'Total Avg Beat',
saveAsImage: 'Save as Image', saveAsImage: 'Save as Image',
summaryStations: 'Stations',
summaryDays: 'Days',
summarySelectedStations: 'Selected Stations',
allStations: 'All',
noData: 'No data' noData: 'No data'
}, },
stationJph: { stationJph: {
@@ -453,12 +472,20 @@ export default {
historyTab: 'History', historyTab: 'History',
realtimeChartTitle: 'Realtime Hourly Output by Station', realtimeChartTitle: 'Realtime Hourly Output by Station',
historyChartTitle: 'Historical Hourly Output by Station', historyChartTitle: 'Historical Hourly Output by Station',
realtimeSubtitle: 'Auto-refreshing view of today\'s hourly output distribution',
historySubtitle: 'Review hourly output changes by date',
detailTitle: 'Historical Output Details',
detailSubtitle: 'Tabular breakdown of output for each date and hour slot',
saveAsImage: 'Save as Image', saveAsImage: 'Save as Image',
sequence: 'No.', sequence: 'No.',
date: 'Date', date: 'Date',
station: 'Station', station: 'Station',
hourSlot: 'Hour Slot', hourSlot: 'Hour Slot',
outputQty: 'Output Qty', outputQty: 'Output Qty',
summaryRealtimePoints: 'Realtime Hours',
summaryRealtimeTotal: 'Realtime Total',
summaryRefreshMode: 'Refresh Mode',
autoRefresh: 'Auto Polling',
noData: 'No data' noData: 'No data'
}, },
materialDataQuery: { materialDataQuery: {

View File

@@ -37,6 +37,7 @@ export default {
secondLevelMenuName: '二级菜单名称', secondLevelMenuName: '二级菜单名称',
roleName: '角色名称', roleName: '角色名称',
role: '角色:', role: '角色:',
roleMenuData: '角色菜单树',
selectPlaceholder: '请选择', selectPlaceholder: '请选择',
sequence: '序号', sequence: '序号',
addFirstLevelModule: '新增一级菜单', addFirstLevelModule: '新增一级菜单',
@@ -361,6 +362,11 @@ export default {
qualified: '合格', qualified: '合格',
unqualified: '不合格', unqualified: '不合格',
all: '全部', all: '全部',
detailTitle: '装配质量明细',
detailSubtitle: '多维筛选后查看测量结果、上下限与合格状态',
summaryTotal: '结果总数',
summaryPageSize: '每页条数',
summaryFilters: '已启用筛选',
noData: '暂无数据' noData: '暂无数据'
}, },
inquiryTransitInformation: { inquiryTransitInformation: {
@@ -406,11 +412,17 @@ export default {
productModel: '产品型号', productModel: '产品型号',
offlineTime: '下线时间', offlineTime: '下线时间',
trendTitle: '下线产量趋势分析', trendTitle: '下线产量趋势分析',
trendSubtitle: '用于监控指定时间范围内的下线产量波动与异常时段',
detailTitle: '下线明细记录',
detailSubtitle: '展示符合筛选条件产品下线明细',
saveAsImage: '保存为图片', saveAsImage: '保存为图片',
dateAxis: '日期', dateAxis: '日期',
hourAxis: '小时', hourAxis: '小时',
offlineQuantityAxis: '下线发动机数量', offlineQuantityAxis: '下线产品数量',
offlineQuantitySeries: '下线数量', offlineQuantitySeries: '下线数量',
summaryTotal: '下线总数',
summaryTrendPoints: '趋势点数',
summaryGranularity: '统计粒度',
selectDateRange: '请选择开始时间与结束时间!', selectDateRange: '请选择开始时间与结束时间!',
noData: '暂无数据' noData: '暂无数据'
}, },
@@ -431,9 +443,16 @@ export default {
station: '工位', station: '工位',
totalAverageBeat: '总平均节拍(秒)', totalAverageBeat: '总平均节拍(秒)',
totalAverageBeatChartTitle: '总平均节拍横向柱状图', totalAverageBeatChartTitle: '总平均节拍横向柱状图',
chartSubtitle: '快速识别平均节拍偏高的瓶颈工位',
detailTitle: '工位节拍明细',
detailSubtitle: '按日期展开查看各工位平均节拍',
totalAverageBeatAxis: '总平均节拍(秒)', totalAverageBeatAxis: '总平均节拍(秒)',
totalAverageBeatSeries: '总平均节拍', totalAverageBeatSeries: '总平均节拍',
saveAsImage: '保存为图片', saveAsImage: '保存为图片',
summaryStations: '工位数量',
summaryDays: '统计天数',
summarySelectedStations: '已选工位',
allStations: '全部',
noData: '暂无数据' noData: '暂无数据'
}, },
stationJph: { stationJph: {
@@ -453,12 +472,20 @@ export default {
historyTab: '历史', historyTab: '历史',
realtimeChartTitle: '工位每小时实时产量', realtimeChartTitle: '工位每小时实时产量',
historyChartTitle: '工位每小时历史产量', historyChartTitle: '工位每小时历史产量',
realtimeSubtitle: '自动刷新今日每小时产量分布',
historySubtitle: '按日期回看每小时产量变化',
detailTitle: '历史产量明细',
detailSubtitle: '表格展示每个日期每小时段的产量结果',
saveAsImage: '保存为图片', saveAsImage: '保存为图片',
sequence: '序号', sequence: '序号',
date: '日期', date: '日期',
station: '工位', station: '工位',
hourSlot: '小时段', hourSlot: '小时段',
outputQty: '产量', outputQty: '产量',
summaryRealtimePoints: '实时小时点',
summaryRealtimeTotal: '实时总产量',
summaryRefreshMode: '刷新模式',
autoRefresh: '自动轮询',
noData: '暂无数据' noData: '暂无数据'
}, },
materialDataQuery: { materialDataQuery: {

View File

@@ -23,8 +23,14 @@
padding: 10px 10px; padding: 10px 10px;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
.el-dialog__title { .el-dialog__title {
color: #fff; color: #203247 !important;
font-size: 1.2rem; font-size: 16px;
font-weight: 700;
}
.el-dialog__title,
.el-dialog__title * {
color: #203247 !important;
font-weight: 700;
} }
.el-dialog__headerbtn { .el-dialog__headerbtn {
top: 13px; top: 13px;
@@ -162,4 +168,3 @@
border: 1px solid gray!important; border: 1px solid gray!important;
}*/ }*/

View File

@@ -2,6 +2,7 @@
@use './mixin.scss'; @use './mixin.scss';
@use './transition.scss'; @use './transition.scss';
@use './element-ui.scss'; @use './element-ui.scss';
@use './mes-admin-pages.scss';
@use './sidebar.scss'; @use './sidebar.scss';
body { body {

View File

@@ -0,0 +1,215 @@
:root {
--mes-page-bg: linear-gradient(180deg, #f6f9fc 0%, #edf3f8 100%);
--mes-surface: rgba(255, 255, 255, 0.96);
--mes-surface-soft: linear-gradient(135deg, #f9fbfd 0%, #f1f6fb 100%);
--mes-border: #d6e1ec;
--mes-border-strong: #c3d3e4;
--mes-text: #243447;
--mes-text-soft: #5f7186;
--mes-primary: #1f78d1;
--mes-primary-soft: #eef6ff;
--mes-success-soft: #edf8f1;
--mes-warning-soft: #fff5e9;
--mes-shadow: 0 10px 24px rgba(31, 57, 90, 0.08);
--mes-radius-lg: 16px;
--mes-radius-md: 12px;
}
.mes-admin-page {
min-height: calc(100vh - 84px);
padding: 14px !important;
background:
radial-gradient(circle at top right, rgba(31, 120, 209, 0.08), transparent 28%),
radial-gradient(circle at top left, rgba(38, 166, 154, 0.06), transparent 24%),
var(--mes-page-bg);
.el-card {
border: 1px solid var(--mes-border);
border-radius: var(--mes-radius-lg);
background: var(--mes-surface);
box-shadow: var(--mes-shadow);
overflow: hidden;
}
.el-card__body {
padding: 16px !important;
margin: 0 !important;
}
.topCard,
> .el-card {
margin: 0 !important;
}
.topDiv,
.toolbarRow {
//display: flex;
//flex-wrap: wrap;
//align-items: center;
//gap: 10px 12px;
//margin-bottom: 14px;
//padding: 14px 16px;
//border: 1px solid var(--mes-border);
//border-radius: var(--mes-radius-md);
//background: var(--mes-surface-soft);
}
.promptText,
.topDiv > span,
.toolbarRow > span {
color: var(--mes-text);
font-weight: 600;
letter-spacing: 0.02em;
}
.el-input__inner,
.el-textarea__inner {
border-color: var(--mes-border);
border-radius: 10px;
color: var(--mes-text);
background: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.el-input__inner:hover,
.el-textarea__inner:hover {
border-color: var(--mes-border-strong);
}
.el-input__inner:focus,
.el-textarea__inner:focus {
border-color: var(--mes-primary) !important;
box-shadow: 0 0 0 3px rgba(31, 120, 209, 0.12);
}
.el-select,
.el-date-editor {
max-width: 100%;
}
.el-button {
min-height: 34px;
border-radius: 10px;
font-weight: 600;
letter-spacing: 0.01em;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.el-button:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(31, 57, 90, 0.08);
}
.el-button--primary.is-plain {
color: var(--mes-primary);
border-color: rgba(31, 120, 209, 0.22);
background: var(--mes-primary-soft);
}
.el-button--info.is-plain,
.el-button--info {
border-color: rgba(86, 119, 153, 0.2);
background: #f3f7fb;
color: #4a627d;
}
.el-button--warning {
border-color: rgba(236, 160, 71, 0.22);
background: var(--mes-warning-soft);
color: #b66f10;
}
.el-button--distribution {
border-color: rgba(236, 122, 57, 0.26);
background: #fff2e8;
color: #d16a21;
}
.el-button--success,
.el-button--success.is-plain {
border-color: rgba(46, 174, 96, 0.22);
background: var(--mes-success-soft);
color: #1f8a4c;
}
.el-table {
margin-top: 6px;
border: 1px solid var(--mes-border) !important;
border-radius: 14px;
overflow: hidden;
background: #fff;
}
.el-table::before,
.el-table--border::after,
.el-table--group::after {
background-color: var(--mes-border) !important;
}
.el-table th {
background: linear-gradient(180deg, #f7fafc 0%, #edf3f8 100%) !important;
color: var(--mes-text) !important;
font-weight: 700;
}
.el-table td {
color: #31465c;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: #f8fbfd;
}
.el-table__body tr:hover > td {
background-color: #f0f7ff !important;
}
.el-table__body tr.current-row > td {
background: linear-gradient(90deg, #2f8be5 0%, #57a5ec 100%) !important;
color: #fff !important;
}
.block,
.el-pagination {
padding-top: 10px;
}
.el-pagination button,
.el-pagination .el-pager li {
border-radius: 8px;
}
.chartCard {
border: 1px solid var(--mes-border);
border-radius: 14px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 249, 252, 0.98) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.el-tabs__item {
height: 38px;
line-height: 38px;
font-weight: 600;
color: var(--mes-text-soft);
}
.el-tabs__item.is-active {
color: var(--mes-primary);
}
.el-dialog {
border-radius: 16px;
overflow: hidden;
}
.el-dialog__header {
background: linear-gradient(180deg, #f8fbfd 0%, #eef4f9 100%);
border-bottom: 1px solid var(--mes-border);
}
.el-dialog__title {
color: var(--mes-text);
font-weight: 700;
}
}

View File

@@ -1,16 +1,36 @@
<template> <template>
<div class="app-container"> <div class="app-container mes-admin-page menu-management-page">
<el-row> <!-- <div class="heroCard">-->
<!-- <div class="heroContent">-->
<!-- <div class="heroText">-->
<!-- <div class="heroTitle">菜单权限编排</div>-->
<!-- <div class="heroSubtitle">围绕角色完成一级菜单二级菜单的分配回收与排序维护</div>-->
<!-- </div>-->
<!-- <div class="heroActions">-->
<!-- <el-button size="small" type="primary" plain icon="el-icon-plus" @click="addFisrtLevel">-->
<!-- {{ $t('menuManagement.addFirstLevelModule') }}-->
<!-- </el-button>-->
<!-- <div class="roleStatus">-->
<!-- <span class="roleStatusLabel">{{ $t('menuManagement.role') }}</span>-->
<!-- <span class="roleStatusValue">{{ roleName || '&#45;&#45;' }}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<el-row :gutter="18" class="workspaceRow">
<el-col :span="7"> <el-col :span="7">
<!-- <el-card style="margin-bottom: 10px">--> <el-card class="boardCard">
<!-- <el-button size="small" type="distribution" @click="addFisrtLevel">创建一级菜单</el-button>--> <div slot="header" style="padding: 5px 11px">
<!-- </el-card>--> <div class="panelHeader">
<el-card style="height: 550px"> <div class="panelTitle">{{ $t('menuManagement.firstLevelMenuName') }}</div>
<div slot="header"> <div class="panelCount">{{ fisrtLevelFilter.length }}</div>
</div>
<el-input v-model="filterTextLeft" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small"/> <el-input v-model="filterTextLeft" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small"/>
</div> </div>
<el-table <el-table
ref="multipleTableLeft" ref="multipleTableLeft"
class="panelTable"
:data="fisrtLevelFilter" :data="fisrtLevelFilter"
height="500" height="500"
highlight-current-row highlight-current-row
@@ -28,44 +48,51 @@
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="1"> <el-col :span="1">
<el-tooltip class="item" :content="$t('menuManagement.assignFirstLevelTooltip')" effect="dark" placement="top-start"> <div class="transferRail">
<el-button <el-tooltip class="item" :content="$t('menuManagement.assignFirstLevelTooltip')" effect="dark" placement="top-start">
:disabled="!roleName || selectLeft.length === 0" <el-button
icon="el-icon-right" :disabled="!roleName || selectLeft.length === 0"
size="mini" class="transferButton"
style="margin: 300px auto 0 auto;display: block" icon="el-icon-right"
type="primary" size="mini"
@click="giveFirstLevel"/> type="primary"
</el-tooltip> @click="giveFirstLevel"/>
</el-tooltip>
</div>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<!-- <el-card style="margin-bottom: 10px">--> <el-card class="boardCard centerBoardCard">
<!-- --> <div slot="header" style="padding: 5px 11px">
<!-- </el-card>--> <div class="panelHeader">
<el-card style="height: 550px"> <div class="panelTitle">{{ $t('menuManagement.roleMenuData') }}</div>
<div slot="header"> <div class="panelCount">{{ moduleTree.length }}</div>
<span>{{ $t('menuManagement.role') }}</span> </div>
<el-select <div class="panelControls">
v-model="roleName" <div class="roleSelector">
filterable <span class="fieldLabel">{{ $t('menuManagement.role') }}</span>
:placeholder="$t('menuManagement.selectPlaceholder')" <el-select
size="small" v-model="roleName"
style="width:150px;margin-left:10px" filterable
@change="getModule"> :placeholder="$t('menuManagement.selectPlaceholder')"
<el-option size="small"
v-for="item in roleNames" style="width: 150px"
:key="item.value" @change="getModule">
:label="item.label" <el-option
:value="item.value"/> v-for="item in roleNames"
</el-select> :key="item.value"
<el-input v-model="filterText" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small" style="width:200px;margin-left:10px"/> :label="item.label"
:value="item.value"/>
</el-select>
</div>
<el-input v-model="filterText" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small" style="width: 200px"/>
</div>
</div> </div>
<el-tree <el-tree
ref="moduleTree" ref="moduleTree"
:data="moduleTree" :data="moduleTree"
:filter-node-method="filterNode" :filter-node-method="filterNode"
check-strictly check-strictly
class="moduleTree" class="moduleTree panelTree"
default-expand-all default-expand-all
node-key="id" node-key="id"
show-checkbox show-checkbox
@@ -98,29 +125,32 @@
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="1"> <el-col :span="1">
<el-tooltip class="item" :content="$t('menuManagement.assignSecondLevelTooltip')" effect="dark" placement="top-start"> <div class="transferRail">
<el-button <el-tooltip class="item" :content="$t('menuManagement.assignSecondLevelTooltip')" effect="dark" placement="top-start">
:disabled="treeCheckList.length !== 1 || selectRight.length === 0 || treeCheckListJudge" <el-button
icon="el-icon-back" :disabled="treeCheckList.length !== 1 || selectRight.length === 0 || treeCheckListJudge"
size="mini" class="transferButton"
style="margin: 300px auto 0 auto;display: block" icon="el-icon-back"
type="primary" size="mini"
@click="giveSecondLevel"/> type="primary"
</el-tooltip> @click="giveSecondLevel"/>
</el-tooltip>
</div>
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
<!-- <el-card style="margin-bottom: 10px">--> <el-card class="boardCard">
<!-- <el-button size="small" type="distribution" @click="addSecondLevel">创建二级菜单</el-button>--> <div slot="header" style="padding: 5px 11px">
<!-- <el-button size="small" style="float: right" type="success" @click="RoleNameasdShow=!RoleNameasdShow">--> <div class="panelHeader">
<!-- 模块分配情况-->
<!-- </el-button>--> <div class="panelTitle">{{ $t('menuManagement.secondLevelMenuName') }}</div>
<!-- </el-card>-->
<el-card style="height: 550px;"> <div class="panelCount">{{ secondLevelFilter.length }}</div>
<div slot="header"> </div>
<el-input v-model="filterTextRight" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small"/> <el-input v-model="filterTextRight" clearable :placeholder="$t('menuManagement.filterPlaceholder')" size="small"/>
</div> </div>
<el-table <el-table
ref="multipleTableRight" ref="multipleTableRight"
class="panelTable"
:data="secondLevelFilter" :data="secondLevelFilter"
height="500" height="500"
highlight-current-row highlight-current-row
@@ -139,24 +169,30 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row v-show="RoleNameasdShow"> <el-row v-show="RoleNameasdShow" class="statusRow">
<el-card> <el-card class="statusCard">
<div slot="header"> <div slot="header">
<el-select <div class="panelHeader">
v-model="TitleValue" <div>
filterable <div class="panelTitle">模块分配情况</div>
:placeholder="$t('menuManagement.selectPlaceholder')" <div class="panelSubtitle">按菜单查看已分配角色</div>
size="small" </div>
style="width:200px;margin-left:10px" <el-select
@change="getTitle"> v-model="TitleValue"
<el-option filterable
v-for="item in Title" :placeholder="$t('menuManagement.selectPlaceholder')"
:key="item.value" size="small"
:label="translateMenuTitle(item.label)" style="width: 220px"
:value="item.value"/> @change="getTitle">
</el-select> <el-option
v-for="item in Title"
:key="item.value"
:label="translateMenuTitle(item.label)"
:value="item.value"/>
</el-select>
</div>
</div> </div>
<el-table :data="RoleNameasd" border height="200" size="mini" stripe style="width: 465px"> <el-table :data="RoleNameasd" border class="statusTable" height="200" size="mini" stripe style="width: 100%">
<el-table-column align="center" :label="$t('menuManagement.sequence')" type="index" width="50"/> <el-table-column align="center" :label="$t('menuManagement.sequence')" type="index" width="50"/>
<el-table-column align="center" :label="$t('menuManagement.roleName')" width="400"> <el-table-column align="center" :label="$t('menuManagement.roleName')" width="400">
<template slot-scope="scope"> <template slot-scope="scope">
@@ -535,12 +571,225 @@ export default {
</script> </script>
<style scoped> <style scoped>
.menu-management-page {
min-height: calc(100vh - 84px);
}
.heroCard {
margin-bottom: 18px;
padding: 18px 22px;
border: 1px solid rgba(207, 220, 232, 0.9);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 247, 252, 0.98) 100%);
box-shadow: 0 14px 34px rgba(31, 57, 90, 0.08);
}
.heroContent {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.heroTitle {
color: #203247;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.01em;
}
.heroSubtitle {
margin-top: 6px;
color: #667a90;
font-size: 13px;
}
.heroActions {
display: flex;
align-items: center;
gap: 12px;
}
.roleStatus {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 0 14px;
border: 1px solid rgba(31, 120, 209, 0.18);
border-radius: 999px;
background: rgba(239, 247, 255, 0.92);
}
.roleStatusLabel {
color: #5f7186;
font-size: 12px;
font-weight: 600;
}
.roleStatusValue {
color: #1f78d1;
font-size: 13px;
font-weight: 700;
}
.workspaceRow {
margin-top: 2px;
}
.panelHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.panelTitle {
color: #203247;
font-size: 15px;
font-weight: 700;
}
.panelSubtitle {
margin-top: 4px;
color: #6e8197;
font-size: 12px;
}
.panelCount {
min-width: 38px;
height: 28px;
padding: 0 10px;
border-radius: 999px;
background: linear-gradient(135deg, #edf6ff 0%, #dbeeff 100%);
color: #1f78d1;
font-size: 13px;
font-weight: 700;
line-height: 28px;
text-align: center;
}
.panelControls {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
flex-wrap: nowrap;
}
.roleSelector {
display: inline-flex;
align-items: center;
gap: 10px;
}
.fieldLabel {
color: #203247;
font-weight: 600;
}
.transferRail {
display: flex;
align-items: center;
justify-content: center;
min-height: 550px;
}
.transferButton {
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 12px 24px rgba(31, 120, 209, 0.16);
}
.panelTree {
min-height: 500px;
max-height: 500px;
overflow: auto;
padding: 6px 4px 0;
}
.panelTable,
.statusTable {
width: 100% !important;
}
.statusRow {
margin-top: 18px;
}
.custom-tree-node { .custom-tree-node {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 14px; font-size: 14px;
padding-right: 8px; gap: 12px;
padding: 6px 8px 6px 2px;
}
::v-deep .boardCard > .el-card__header,
::v-deep .statusCard > .el-card__header {
padding-bottom: 10px;
}
::v-deep .boardCard > .el-card__body,
::v-deep .statusCard > .el-card__body {
//display: flex;
//flex-direction: column;
}
::v-deep .centerBoardCard > .el-card__body {
overflow: visible;
}
::v-deep .panelTree .el-tree-node__content {
height: auto;
min-height: 34px;
border-radius: 10px;
}
::v-deep .panelTree .el-tree-node__content:hover {
background: #eef6ff;
}
::v-deep .custom-tree-node .el-button--text {
padding: 4px 6px;
color: #1f78d1;
}
@media (max-width: 1400px) {
.heroContent {
flex-direction: column;
align-items: flex-start;
}
.heroActions {
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}
}
@media (max-width: 1200px) {
.workspaceRow {
display: block;
}
.workspaceRow .el-col {
width: 100%;
margin-bottom: 16px;
}
.transferRail {
min-height: auto;
padding: 4px 0;
}
.transferButton {
transform: rotate(90deg);
}
} }
</style> </style>

View File

@@ -809,6 +809,7 @@ export default {
return this.group[i].label return this.group[i].label
} }
} }
return ''
} }
}, },
watch: { watch: {

View File

@@ -1,20 +1,21 @@
<template> <template>
<div class="app-container"> <div class="app-container mes-admin-page">
<el-row> <el-row class="personnel-shell">
<el-col :span="6"> <el-col :span="6">
<el-card> <el-card class="actionCard">
<el-button <el-button
icon="el-icon-circle-plus-outline" icon="el-icon-circle-plus-outline"
size="small" size="small"
type="distribution" type="distribution"
@click="handleAdd('department_Form')">{{ $t('personnelManagement.add') }} @click="handleAdd('department_Form')"
>{{ $t('personnelManagement.add') }}
</el-button> </el-button>
<el-button icon="el-icon-edit" plain size="small" type="warning" @click="handleEdit()">{{ $t('personnelManagement.edit') }}</el-button> <el-button icon="el-icon-edit" plain size="small" type="warning" @click="handleEdit()">{{ $t('personnelManagement.edit') }}</el-button>
<el-button icon="el-icon-delete" plain size="small" type="danger" @click="deleteTable()">{{ $t('personnelManagement.delete') }}</el-button> <el-button icon="el-icon-delete" plain size="small" type="danger" @click="deleteTable()">{{ $t('personnelManagement.delete') }}</el-button>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<el-card> <el-card class="actionCard searchCard">
<span>{{ $t('personnelManagement.peopleName') }}</span> <span>{{ $t('personnelManagement.peopleName') }}</span>
<el-input <el-input
v-model="Name" v-model="Name"
@@ -22,7 +23,8 @@
clearable clearable
:placeholder="$t('personnelManagement.peopleNamePlaceholder')" :placeholder="$t('personnelManagement.peopleNamePlaceholder')"
size="small" size="small"
style="width: 200px; margin-right: 15px"> style="width: 200px; margin-right: 15px"
>
<el-button slot="append" icon="el-icon-search" @click="fetchPeopleForName"/> <el-button slot="append" icon="el-icon-search" @click="fetchPeopleForName"/>
</el-input> </el-input>
<el-button icon="el-icon-circle-plus-outline" size="small" type="distribution" @click="addPeople()">{{ $t('personnelManagement.add') }} <el-button icon="el-icon-circle-plus-outline" size="small" type="distribution" @click="addPeople()">{{ $t('personnelManagement.add') }}
@@ -37,7 +39,8 @@
plain plain
size="small" size="small"
type="success" type="success"
@click="moveGroup">{{ $t('personnelManagement.move') }} @click="moveGroup"
>{{ $t('personnelManagement.move') }}
</el-button> </el-button>
<!--<el-button size="small" @click="postMaintain()">岗位维护</el-button>--> <!--<el-button size="small" @click="postMaintain()">岗位维护</el-button>-->
<el-popover <el-popover
@@ -46,13 +49,15 @@
placement="bottom" placement="bottom"
trigger="click" trigger="click"
width="178" width="178"
@hide="hide()"> @hide="hide()"
>
<el-dropdown placement="right-start" size="small" style="margin-right: 0"> <el-dropdown placement="right-start" size="small" style="margin-right: 0">
<el-input <el-input
v-model="nodeName1" v-model="nodeName1"
:disabled="true" :disabled="true"
:placeholder="$t('personnelManagement.selectDepartmentPlaceholder')" :placeholder="$t('personnelManagement.selectDepartmentPlaceholder')"
size="small"/> size="small"
/>
<el-button size="small" style="margin-left: 50px; margin-top: 15px" type="text" @click="moveGroupConfim"> <el-button size="small" style="margin-left: 50px; margin-top: 15px" type="text" @click="moveGroupConfim">
{{ $t('common.confirm') }} {{ $t('common.confirm') }}
</el-button> </el-button>
@@ -64,7 +69,8 @@
accordion accordion
node-key="id" node-key="id"
style="width: 200px;margin: 10px" style="width: 200px;margin: 10px"
@node-click="NodeClick"/> @node-click="NodeClick"
/>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</el-popover> </el-popover>
@@ -72,10 +78,10 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row class="personnel-shell contentRow">
<el-col :span="6"> <el-col :span="6">
<el-card class="box-card" style="min-height: 600px; max-height: 650px"> <el-card class="box-card departmentCard" style="min-height: 600px; max-height: 650px">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix" style="display: flex; align-items: center;justify-content: space-between;">
<span>{{ $t('personnelManagement.departmentMaintenance') }}</span> <span>{{ $t('personnelManagement.departmentMaintenance') }}</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="expandALL()">{{ $t('personnelManagement.expand') }}</el-button> <el-button style="float: right; padding: 3px 0" type="text" @click="expandALL()">{{ $t('personnelManagement.expand') }}</el-button>
</div> </div>
@@ -88,12 +94,13 @@
default-expand-all default-expand-all
node-key="id" node-key="id"
show-checkbox show-checkbox
@check-change="handleClick"/> @check-change="handleClick"
/>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<el-card> <el-card class="tableCard">
<el-table <el-table
ref="multipleTable" ref="multipleTable"
:data="List" :data="List"
@@ -102,11 +109,13 @@
size="mini" size="mini"
style="width: 100%" style="width: 100%"
tooltip-effect="dark" tooltip-effect="dark"
@selection-change="handleSelectionChange"> @selection-change="handleSelectionChange"
>
<el-table-column <el-table-column
align="center" align="center"
type="selection" type="selection"
width="50"/> width="50"
/>
<el-table-column align="center" type="index" :label="$t('personnelManagement.sequence')" /> <el-table-column align="center" type="index" :label="$t('personnelManagement.sequence')" />
<!--<el-table-column align="center" label="照片" width="200">--> <!--<el-table-column align="center" label="照片" width="200">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
@@ -171,11 +180,11 @@
<!-- {{ scope.row.身份证号 }}--> <!-- {{ scope.row.身份证号 }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="学历" width="100">--> <!-- <el-table-column align="center" label="学历" width="100">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.学历名称 }}--> <!-- {{ scope.row.学历名称 }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="入职时间" width="100">--> <!-- <el-table-column align="center" label="入职时间" width="100">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{--> <!-- {{-->
@@ -190,16 +199,16 @@
<!-- }}--> <!-- }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="联系方式" width="110">--> <!-- <el-table-column align="center" label="联系方式" width="110">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.联系电话 }}--> <!-- {{ scope.row.联系电话 }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="班组" width="110">--> <!-- <el-table-column align="center" label="班组" width="110">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.班组名称 }}--> <!-- {{ scope.row.班组名称 }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="民族" width="100">--> <!-- <el-table-column align="center" label="民族" width="100">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.民族 }}--> <!-- {{ scope.row.民族 }}-->
@@ -222,7 +231,8 @@
icon="el-icon-edit" icon="el-icon-edit"
size="mini" size="mini"
type="primary" type="primary"
@click="handleEditPeople(scope.row)">{{ $t('personnelManagement.edit') }} @click="handleEditPeople(scope.row)"
>{{ $t('personnelManagement.edit') }}
</el-button> </el-button>
<!--<el-button--> <!--<el-button-->
<!--size="mini"--> <!--size="mini"-->
@@ -240,7 +250,8 @@
:total="total" :total="total"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange"/> @current-change="handleCurrentChange"
/>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@@ -253,14 +264,16 @@
:visible.sync="department_DFV" :visible.sync="department_DFV"
center center
style="min-height: 200px" style="min-height: 200px"
width="400px"> width="400px"
>
<el-form <el-form
ref="department_Form" ref="department_Form"
:model="department_Form" :model="department_Form"
:rules="rules" :rules="rules"
class="demo-ruleForm" class="demo-ruleForm"
label-position="left" label-position="left"
label-width="110px"> label-width="110px"
>
<el-form-item :label="$t('personnelManagement.departmentName')" prop="DepartmentName"> <el-form-item :label="$t('personnelManagement.departmentName')" prop="DepartmentName">
<el-input v-model="department_Form.DepartmentName" size="small" style="width:200px"/> <el-input v-model="department_Form.DepartmentName" size="small" style="width:200px"/>
</el-form-item> </el-form-item>
@@ -271,13 +284,15 @@
v-if="department_Title==='add'" v-if="department_Title==='add'"
:disabled="handleAdd_disable" :disabled="handleAdd_disable"
type="primary" type="primary"
@click="submitAdd('department_Form')">{{ $t('common.confirm') }} @click="submitAdd('department_Form')"
>{{ $t('common.confirm') }}
</el-button> </el-button>
<el-button <el-button
v-else-if="department_Title==='edit'" v-else-if="department_Title==='edit'"
:disabled="handleAdd_disable" :disabled="handleAdd_disable"
type="primary" type="primary"
@click="submitEdit('department_Form')">{{ $t('common.confirm') }} @click="submitEdit('department_Form')"
>{{ $t('common.confirm') }}
</el-button> </el-button>
</div> </div>
</el-dialog> </el-dialog>
@@ -288,14 +303,16 @@
:visible.sync="people_DFV" :visible.sync="people_DFV"
center center
style="min-height: 200px" style="min-height: 200px"
width="400px"> width="400px"
>
<el-form <el-form
ref="people_form" ref="people_form"
:model="people_form" :model="people_form"
:rules="rules" :rules="rules"
class="demo-ruleForm" class="demo-ruleForm"
label-position="left" label-position="left"
label-width="110px"> label-width="110px"
>
<el-row> <el-row>
<el-form-item :label="$t('personnelManagement.employeeName')" prop="Name"> <el-form-item :label="$t('personnelManagement.employeeName')" prop="Name">
<el-input v-model="people_form.Name" size="small" style="width:200px"/> <el-input v-model="people_form.Name" size="small" style="width:200px"/>
@@ -307,76 +324,75 @@
<el-input v-model="people_form.Password" size="small" style="width:200px"/> <el-input v-model="people_form.Password" size="small" style="width:200px"/>
</el-form-item> </el-form-item>
<!-- <el-col :span="12">-->
<!-- <el-col :span="12">--> <!-- <el-form-item label="性别" prop="Sex">-->
<!-- <el-form-item label="性别" prop="Sex">--> <!-- <el-select v-model="people_form.Sex" clearable placeholder="请选择性别" size="small" style="width: 200px">-->
<!-- <el-select v-model="people_form.Sex" clearable placeholder="请选择性别" size="small" style="width: 200px">--> <!-- <el-option-->
<!-- <el-option--> <!-- v-for="item in SexData"-->
<!-- v-for="item in SexData"--> <!-- :key="item.value"-->
<!-- :key="item.value"--> <!-- :label="item.label"-->
<!-- :label="item.label"--> <!-- :value="item.value"/>-->
<!-- :value="item.value"/>--> <!-- </el-select>-->
<!-- </el-select>--> <!-- </el-form-item>-->
<!-- </el-form-item>--> <!-- </el-col>-->
<!-- </el-col>--> <!-- <el-col :span="12">-->
<!-- <el-col :span="12">--> <!-- <el-form-item label="出生日期" prop="Birthday">-->
<!-- <el-form-item label="出生日期" prop="Birthday">--> <!-- <el-date-picker-->
<!-- <el-date-picker--> <!-- v-model="people_form.Birthday"-->
<!-- v-model="people_form.Birthday"--> <!-- placeholder="请选择出生日期"-->
<!-- placeholder="请选择出生日期"--> <!-- size="small"-->
<!-- size="small"--> <!-- style="width: 200px"-->
<!-- style="width: 200px"--> <!-- type="date"-->
<!-- type="date"--> <!-- value-format="yyyy-MM-dd"/>-->
<!-- value-format="yyyy-MM-dd"/>--> <!-- </el-form-item>-->
<!-- </el-form-item>--> <!-- </el-col>-->
<!-- </el-col>--> <!-- <el-col :span="12">-->
<!-- <el-col :span="12">--> <!-- <el-form-item label="身份证号" prop="IDcard">-->
<!-- <el-form-item label="身份证号" prop="IDcard">--> <!-- <el-input v-model="people_form.IDcard" size="small" style="width:200px"/>-->
<!-- <el-input v-model="people_form.IDcard" size="small" style="width:200px"/>--> <!-- </el-form-item>-->
<!-- </el-form-item>--> <!-- </el-col>-->
<!-- </el-col>--> <!-- <el-col :span="12">-->
<!-- <el-col :span="12">--> <!-- <el-form-item label="入职时间" prop="TimeOfEntry">-->
<!-- <el-form-item label="入职时间" prop="TimeOfEntry">--> <!-- <el-date-picker-->
<!-- <el-date-picker--> <!-- v-model="people_form.TimeOfEntry"-->
<!-- v-model="people_form.TimeOfEntry"--> <!-- placeholder="请选择入职时间"-->
<!-- placeholder="请选择入职时间"--> <!-- size="small"-->
<!-- size="small"--> <!-- style="width: 200px"-->
<!-- style="width: 200px"--> <!-- type="date"-->
<!-- type="date"--> <!-- value-format="yyyy-MM-dd"/>-->
<!-- value-format="yyyy-MM-dd"/>--> <!-- </el-form-item>-->
<!-- </el-form-item>--> <!-- </el-col>-->
<!-- </el-col>--> <!-- <el-col :span="12">-->
<!-- <el-col :span="12">--> <!-- <el-form-item label="联系方式" prop="ContactInformation">-->
<!-- <el-form-item label="联系方式" prop="ContactInformation">--> <!-- <el-input v-model="people_form.ContactInformation" size="small" style="width:200px"/>-->
<!-- <el-input v-model="people_form.ContactInformation" size="small" style="width:200px"/>--> <!-- </el-form-item>-->
<!-- </el-form-item>--> <!-- </el-col>-->
<!-- </el-col>--> <!-- <el-col :span="12">-->
<!-- <el-col :span="12">--> <!-- <el-form-item label="学历" prop="Education">-->
<!-- <el-form-item label="学历" prop="Education">--> <!-- <el-select-->
<!-- <el-select--> <!-- v-model="people_form.Education"-->
<!-- v-model="people_form.Education"--> <!-- clearable-->
<!-- clearable--> <!-- placeholder="请选择学历"-->
<!-- placeholder="请选择学历"--> <!-- size="small"-->
<!-- size="small"--> <!-- style="width: 200px">-->
<!-- style="width: 200px">--> <!-- <el-option-->
<!-- <el-option--> <!-- v-for="item in EducationDate"-->
<!-- v-for="item in EducationDate"--> <!-- :key="item.value"-->
<!-- :key="item.value"--> <!-- :label="item.label"-->
<!-- :label="item.label"--> <!-- :value="item.value"/>-->
<!-- :value="item.value"/>--> <!-- </el-select>-->
<!-- </el-select>--> <!-- </el-form-item>-->
<!-- </el-form-item>--> <!-- </el-col>-->
<!-- </el-col>--> <!-- <el-col :span="12">-->
<!-- <el-col :span="12">--> <!-- <el-form-item label="家庭住址" prop="Address">-->
<!-- <el-form-item label="家庭住址" prop="Address">--> <!-- <el-input v-model="people_form.Address" size="small" style="width:200px"/>-->
<!-- <el-input v-model="people_form.Address" size="small" style="width:200px"/>--> <!-- </el-form-item>-->
<!-- </el-form-item>--> <!-- </el-col>-->
<!-- </el-col>--> <!-- <el-col :span="12">-->
<!-- <el-col :span="12">--> <!-- <el-form-item label="民族" prop="Nation">-->
<!-- <el-form-item label="民族" prop="Nation">--> <!-- <el-input v-model="people_form.Nation" size="small" style="width:200px"/>-->
<!-- <el-input v-model="people_form.Nation" size="small" style="width:200px"/>--> <!-- </el-form-item>-->
<!-- </el-form-item>--> <!-- </el-col>-->
<!-- </el-col>-->
<!--<el-col :span="12">--> <!--<el-col :span="12">-->
<!-- <el-form-item label="职称" prop="Post">--> <!-- <el-form-item label="职称" prop="Post">-->
<!-- <el-select--> <!-- <el-select-->
@@ -413,14 +429,16 @@
:disabled="addPeople_disable" :disabled="addPeople_disable"
:loading="btnLoading" :loading="btnLoading"
type="primary" type="primary"
@click="submitAddPeople">{{ $t('common.confirm') }} @click="submitAddPeople"
>{{ $t('common.confirm') }}
</el-button> </el-button>
<el-button <el-button
v-else-if="people_title === 'edit'" v-else-if="people_title === 'edit'"
:disabled="addPeople_disable" :disabled="addPeople_disable"
:loading="btnLoading" :loading="btnLoading"
type="primary" type="primary"
@click="submitEditPeople">{{ $t('common.confirm') }} @click="submitEditPeople"
>{{ $t('common.confirm') }}
</el-button> </el-button>
</div> </div>
</el-dialog> </el-dialog>
@@ -432,7 +450,8 @@
center center
style="height: 800px" style="height: 800px"
:title="$t('personnelManagement.resignedList')" :title="$t('personnelManagement.resignedList')"
width="40%"> width="40%"
>
<el-table <el-table
:data="LeavingList" :data="LeavingList"
border border
@@ -441,7 +460,8 @@
size="mini" size="mini"
stripe stripe
style="width: 100%" style="width: 100%"
tooltip-effect="dark"> tooltip-effect="dark"
>
<el-table-column align="center" type="index" :label="$t('personnelManagement.sequence')" /> <el-table-column align="center" type="index" :label="$t('personnelManagement.sequence')" />
<el-table-column align="center" :label="$t('personnelManagement.departmentName')" width="100"> <el-table-column align="center" :label="$t('personnelManagement.departmentName')" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
@@ -463,62 +483,63 @@
{{ scope.row.姓名 }} {{ scope.row.姓名 }}
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column align="center" label="性别" width="100">--> <!-- <el-table-column align="center" label="性别" width="100">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.性别 }}--> <!-- {{ scope.row.性别 }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="身份证号" width="165">--> <!-- <el-table-column align="center" label="身份证号" width="165">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.身份证号 }}--> <!-- {{ scope.row.身份证号 }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="学历" width="100">--> <!-- <el-table-column align="center" label="学历" width="100">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.学历名称 }}--> <!-- {{ scope.row.学历名称 }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="入职时间" width="100">--> <!-- <el-table-column align="center" label="入职时间" width="100">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{--> <!-- {{-->
<!-- scope.row.入公司时间 !== '' && scope.row.入公司时间 !== null ? scope.row.入公司时间 = scope.row.入公司时间.split(' ')[0] : scope.row.入公司时间--> <!-- scope.row.入公司时间 !== '' && scope.row.入公司时间 !== null ? scope.row.入公司时间 = scope.row.入公司时间.split(' ')[0] : scope.row.入公司时间-->
<!-- }}--> <!-- }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="出生日期" width="100">--> <!-- <el-table-column align="center" label="出生日期" width="100">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{--> <!-- {{-->
<!-- scope.row.出生日期 !== '' && scope.row.出生日期 !== null ? scope.row.出生日期 = scope.row.出生日期.split(' ')[0] : scope.row.出生日期--> <!-- scope.row.出生日期 !== '' && scope.row.出生日期 !== null ? scope.row.出生日期 = scope.row.出生日期.split(' ')[0] : scope.row.出生日期-->
<!-- }}--> <!-- }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="联系方式" width="110">--> <!-- <el-table-column align="center" label="联系方式" width="110">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.联系电话 }}--> <!-- {{ scope.row.联系电话 }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="岗位工种" width="100">--> <!-- <el-table-column align="center" label="岗位工种" width="100">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.岗位名称 }}--> <!-- {{ scope.row.岗位名称 }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="民族" width="100">--> <!-- <el-table-column align="center" label="民族" width="100">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.民族 }}--> <!-- {{ scope.row.民族 }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column align="center" label="家庭住址">--> <!-- <el-table-column align="center" label="家庭住址">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.家庭住址 }}--> <!-- {{ scope.row.家庭住址 }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<el-table-column align="center" :label="$t('personnelManagement.operation')" width="100"> <el-table-column align="center" :label="$t('personnelManagement.operation')" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
icon="el-icon-circle-close-outline" icon="el-icon-circle-close-outline"
size="mini" size="mini"
type="danger" type="danger"
@click="deletePeople(scope.row)">{{ $t('personnelManagement.delete') }} @click="deletePeople(scope.row)"
>{{ $t('personnelManagement.delete') }}
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
@@ -531,7 +552,8 @@
:total="totalN" :total="totalN"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChangeN" @size-change="handleSizeChangeN"
@current-change="handleCurrentChangeN"/> @current-change="handleCurrentChangeN"
/>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog <el-dialog
@@ -540,7 +562,8 @@
center center
style="height: 800px" style="height: 800px"
:title="$t('personnelManagement.uploadPicture')" :title="$t('personnelManagement.uploadPicture')"
width="300px"> width="300px"
>
<el-upload <el-upload
id="invoiceScan" id="invoiceScan"
ref="upload" ref="upload"
@@ -556,7 +579,8 @@
:on-remove="handelLimitStyle" :on-remove="handelLimitStyle"
:on-success="uploadSuccess" :on-success="uploadSuccess"
list-type="picture-card" list-type="picture-card"
style="margin-left: 60px"> style="margin-left: 60px"
>
<i class="el-icon-plus"/> <i class="el-icon-plus"/>
</el-upload> </el-upload>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@@ -1257,5 +1281,49 @@ export default {
</script> </script>
<style scoped> <style scoped>
.personnel-shell {
margin-bottom: 14px;
}
.actionCard,
.departmentCard,
.tableCard {
border-radius: 14px;
}
.searchCard {
min-height: 64px;
}
.contentRow ::v-deep .el-card__body {
padding: 14px !important;
}
.departmentCard {
background: linear-gradient(180deg, rgba(252, 253, 255, 0.98) 0%, rgba(244, 248, 252, 0.98) 100%);
}
.tableCard {
min-height: 650px;
}
::v-deep .departmentCard .el-card__header {
display: flex;
align-items: center;
justify-content: space-between;
}
::v-deep .departmentCard .el-tree {
padding: 4px 2px;
background: transparent;
}
::v-deep .departmentCard .el-tree-node__content,
::v-deep .departmentCard .el-tree-node__label {
font-size: 13px;
}
::v-deep .tableCard .el-table {
margin-top: 0;
}
</style> </style>

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="app-container"> <div class="app-container mes-admin-page">
<el-card> <el-card>
<!--<el-input v-model="RoleFunctioning" size="small" clearable placeholder="请输入角色功能" style="width:200px"/>--> <!--<el-input v-model="RoleFunctioning" size="small" clearable placeholder="请输入角色功能" style="width:200px"/>-->
<!--<el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 15px" plain @click="searchData()">查询</el-button>--> <!--<el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 15px" plain @click="searchData()">查询</el-button>-->

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="app-container"> <div class="app-container mes-admin-page">
<el-card> <el-card>
<div style="margin-top: 7px; margin-bottom: 7px"> <div style="margin-top: 7px; margin-bottom: 7px">
<el-input v-model="staffName" :placeholder="$t('workshopPersonnelRoleMana.staffName')" size="small" clearable style="width:200px"/> <el-input v-model="staffName" :placeholder="$t('workshopPersonnelRoleMana.staffName')" size="small" clearable style="width:200px"/>

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="app-container"> <div class="app-container mes-admin-page">
<el-card> <el-card>
<el-table <el-table
v-loading="loading" v-loading="loading"

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="app-container"> <div class="app-container mes-admin-page">
<el-card class="topCard"> <el-card class="topCard">
<div class="topDiv"> <div class="topDiv materialToolbar">
<span style="margin-left: 10px">{{ $t('materialVerificationMaintenance.stationNumberLabel') }}</span> <span style="margin-left: 10px">{{ $t('materialVerificationMaintenance.stationNumberLabel') }}</span>
<el-select v-model="stationNumberValue" clearable :placeholder="$t('materialVerificationMaintenance.selectStationNumber')" size="small" style="width: 250px" @change="searchOrder"> <el-select v-model="stationNumberValue" clearable :placeholder="$t('materialVerificationMaintenance.selectStationNumber')" size="small" style="width: 250px" @change="searchOrder">
<el-option <el-option
@@ -46,6 +46,7 @@
<!-- <el-button type="info" plain size="small" icon="el-icon-upload2" @click="importOrder('form')">物料导入</el-button>--> <!-- <el-button type="info" plain size="small" icon="el-icon-upload2" @click="importOrder('form')">物料导入</el-button>-->
<el-button type="warning" plain size="small" icon="el-icon-download" @click="exportExcel()">{{ $t('materialVerificationMaintenance.exportMaterial') }}</el-button> <el-button type="warning" plain size="small" icon="el-icon-download" @click="exportExcel()">{{ $t('materialVerificationMaintenance.exportMaterial') }}</el-button>
</div> </div>
<div class="tablePanel">
<el-table <el-table
v-loading="loading" v-loading="loading"
ref="multipleTable" ref="multipleTable"
@@ -149,6 +150,7 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div>
</el-card> </el-card>
<el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" :title="$t('materialVerificationMaintenance.createMaterial')" center style="min-height: 200px;" width="800px"> <el-dialog v-el-drag-dialog :visible.sync="dialogFormVisible" :title="$t('materialVerificationMaintenance.createMaterial')" center style="min-height: 200px;" width="800px">
<el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="120px">
@@ -1239,6 +1241,16 @@ export default {
.topDiv{ .topDiv{
margin-bottom: 10px; margin-bottom: 10px;
} }
.materialToolbar {
align-items: flex-end;
}
.tablePanel {
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.52) 0%, rgba(243,248,252,0.92) 100%);
}
.el-select{ .el-select{
width:200px width:200px
} }
@@ -1273,4 +1285,8 @@ export default {
::v-deep.el-input.is-disabled .el-input__inner{ ::v-deep.el-input.is-disabled .el-input__inner{
background-color: white!important; background-color: white!important;
} }
::v-deep .materialToolbar .el-button {
margin-bottom: 2px;
}
</style> </style>

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="app-container"> <div class="app-container mes-admin-page">
<el-card class="topCard"> <el-card class="topCard">
<div class="topDiv"> <div class="topDiv queryToolbar">
<div> <div>
<!--<span style="margin-left: 10px">制造编号</span>--> <!--<span style="margin-left: 10px">制造编号</span>-->
<!--<el-input v-model="workCode" placeholder="制造编号" clearable size="small" style="width: 200px; margin-left: 13px"/>--> <!--<el-input v-model="workCode" placeholder="制造编号" clearable size="small" style="width: 200px; margin-left: 13px"/>-->
@@ -123,116 +123,118 @@
<!-- size="mini"/>--> <!-- size="mini"/>-->
<!-- </el-select>--> <!-- </el-select>-->
</div> </div>
<el-table <div class="tablePanel">
v-loading="loading" <el-table
ref="multipleTable" v-loading="loading"
:data="tableData" ref="multipleTable"
:header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="tableData"
:cell-class-name="tableRowClassName" :header-cell-style="{background:'#eef1f6',color:'#606266'}"
:element-loading-text="$t('assemblyQualitydataQuery.loadingData')" :cell-class-name="tableRowClassName"
element-loading-spinner="el-icon-loading" :element-loading-text="$t('assemblyQualitydataQuery.loadingData')"
element-loading-background="rgba(0, 0, 0, 0.2)" element-loading-spinner="el-icon-loading"
class="main" element-loading-background="rgba(0, 0, 0, 0.2)"
tooltip-effect="dark" class="main assemblyTable"
height="600px" tooltip-effect="dark"
style="width: 100%" height="600px"
border style="width: 100%"
size="mini"> border
<!-- <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>--> size="mini">
<el-table-column type="index" width="60" :label="$t('assemblyQualitydataQuery.sequence')" align="center"/> <!-- <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.orderNumber')"> <el-table-column type="index" width="60" :label="$t('assemblyQualitydataQuery.sequence')" align="center"/>
<template slot-scope="scope"> <el-table-column align="center" :label="$t('assemblyQualitydataQuery.orderNumber')">
{{ scope.row.订单号 }} <template slot-scope="scope">
</template> {{ scope.row.订单号 }}
</el-table-column> </template>
<el-table-column align="center" width="100px" :label="$t('assemblyQualitydataQuery.stationNumber')"> </el-table-column>
<template slot-scope="scope"> <el-table-column align="center" width="100px" :label="$t('assemblyQualitydataQuery.stationNumber')">
{{ scope.row.工位号 }} <template slot-scope="scope">
</template> {{ scope.row.工位号 }}
</el-table-column> </template>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.productNumber')"> </el-table-column>
<template slot-scope="scope"> <el-table-column align="center" :label="$t('assemblyQualitydataQuery.productNumber')">
{{ scope.row.发动机号 }} <template slot-scope="scope">
</template> {{ scope.row.发动机号 }}
</el-table-column> </template>
</el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.productModel')"> <el-table-column align="center" :label="$t('assemblyQualitydataQuery.productModel')">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.发动机型号 }} {{ scope.row.发动机型号 }}
</template> </template>
</el-table-column> </el-table-column>
<!--<el-table-column align="center" label="制造编号">--> <!--<el-table-column align="center" label="制造编号">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.制造编号 }}--> <!-- {{ scope.row.制造编号 }}-->
<!-- </template>--> <!-- </template>-->
<!--</el-table-column>--> <!--</el-table-column>-->
<!--<el-table-column align="center" label="项目名称">--> <!--<el-table-column align="center" label="项目名称">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.项目名称 }}--> <!-- {{ scope.row.项目名称 }}-->
<!-- </template>--> <!-- </template>-->
<!--</el-table-column>--> <!--</el-table-column>-->
<!--<el-table-column align="center" label="间隔号">--> <!--<el-table-column align="center" label="间隔号">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.间隔号 }}--> <!-- {{ scope.row.间隔号 }}-->
<!-- </template>--> <!-- </template>-->
<!--</el-table-column>--> <!--</el-table-column>-->
<!--<el-table-column align="center" label="DS/ES编号">--> <!--<el-table-column align="center" label="DS/ES编号">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.单元号 }}--> <!-- {{ scope.row.单元号 }}-->
<!-- </template>--> <!-- </template>-->
<!--</el-table-column>--> <!--</el-table-column>-->
<!--<el-table-column align="center" label="工位名称">--> <!--<el-table-column align="center" label="工位名称">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.工位名称 }}--> <!-- {{ scope.row.工位名称 }}-->
<!-- </template>--> <!-- </template>-->
<!--</el-table-column>--> <!--</el-table-column>-->
<el-table-column align="center" width="150px" :label="$t('assemblyQualitydataQuery.measuringPosition')"> <el-table-column align="center" width="150px" :label="$t('assemblyQualitydataQuery.measuringPosition')">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.测量位置 }} {{ scope.row.测量位置 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" width="100px" :label="$t('assemblyQualitydataQuery.measuringProject')"> <el-table-column align="center" width="100px" :label="$t('assemblyQualitydataQuery.measuringProject')">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.测量项目 }} {{ scope.row.测量项目 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.measuringValue')" width="120px"> <el-table-column align="center" :label="$t('assemblyQualitydataQuery.measuringValue')" width="120px">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.测量值 }} {{ scope.row.测量值 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.measuringUnit')" width="80px"> <el-table-column align="center" :label="$t('assemblyQualitydataQuery.measuringUnit')" width="80px">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.测量单位 }} {{ scope.row.测量单位 }}
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column align="center" label="理论值" width="80px">--> <!-- <el-table-column align="center" label="理论值" width="80px">-->
<!-- <template slot-scope="scope">--> <!-- <template slot-scope="scope">-->
<!-- {{ scope.row.理论值 }}--> <!-- {{ scope.row.理论值 }}-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.upperLimit')" width="100px"> <el-table-column align="center" :label="$t('assemblyQualitydataQuery.upperLimit')" width="100px">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.上限值 }} {{ scope.row.上限值 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.lowerLimit')" width="100px"> <el-table-column align="center" :label="$t('assemblyQualitydataQuery.lowerLimit')" width="100px">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.下限值 }} {{ scope.row.下限值 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" width="150px" :label="$t('assemblyQualitydataQuery.productionDate')"> <el-table-column align="center" width="150px" :label="$t('assemblyQualitydataQuery.productionDate')">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.生产日期 }} {{ scope.row.生产日期 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" :label="$t('assemblyQualitydataQuery.qualifiedFlag')" width="110px"> <el-table-column align="center" :label="$t('assemblyQualitydataQuery.qualifiedFlag')" width="110px">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.合格标志 }} {{ scope.row.合格标志 }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div>
<div class="block" style="margin-top: 10px;"> <div class="block" style="margin-top: 10px;">
<el-pagination <el-pagination
v-if="!loading" v-if="!loading"
@@ -600,4 +602,41 @@ export default {
.topDiv{ .topDiv{
margin-bottom: 10px; margin-bottom: 10px;
} }
.queryToolbar {
align-items: flex-end;
}
.tablePanel {
width: 100%;
max-width: 100%;
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(243,247,251,0.94) 100%);
overflow-x: auto;
}
.assemblyTable {
width: 100% !important;
max-width: 100%;
}
.panelHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.panelTitle {
color: #203247;
font-size: 15px;
font-weight: 700;
}
.panelSubtitle {
color: #6b7f93;
font-size: 12px;
margin-top: 3px;
}
.compactHeader {
padding: 0 2px;
}
::v-deep .queryToolbar .el-button {
margin-bottom: 2px;
}
</style> </style>

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="app-container"> <div class="app-container mes-admin-page">
<el-card class="topCard"> <el-card class="topCard">
<div class="topDiv"> <div class="topDiv queryToolbar">
<!--<div>--> <!--<div>-->
<!-- <span style="margin-left: 10px">制造编号</span>--> <!-- <span style="margin-left: 10px">制造编号</span>-->
<!-- <el-input v-model="workCode" placeholder="制造编号" clearable size="small" style="width: 150px; margin-left: 5px"/>--> <!-- <el-input v-model="workCode" placeholder="制造编号" clearable size="small" style="width: 150px; margin-left: 5px"/>-->
@@ -103,97 +103,98 @@
</el-button> </el-button>
<el-button icon="el-icon-download" size="small" type="info" @click="exportExcel()">Excel</el-button> <el-button icon="el-icon-download" size="small" type="info" @click="exportExcel()">Excel</el-button>
</div> </div>
<el-table
v-loading="loading"
ref="multipleTable"
:cell-class-name="tableRowClassName"
:data="tableData"
:header-cell-style="{background:'#eef1f6',color:'#606266'}"
border
class="main"
element-loading-background="rgba(0, 0, 0, 0.2)"
element-loading-spinner="el-icon-loading"
:element-loading-text="$t('inquiryTransitInformation.loadingData')"
height="600px"
size="mini"
style="width: 100%;max-height: 650px;margin-top: 10px"
tooltip-effect="dark">
<!-- <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
<el-table-column align="center" :label="$t('inquiryTransitInformation.sequence')" type="index" width="60"/>
<el-table-column align="center" :label="$t('inquiryTransitInformation.stationNumber')" width="120">
<template slot-scope="scope">
{{ scope.row.工位号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.orderNumber')">
<template slot-scope="scope">
{{ scope.row.订单号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.productNumber')">
<template slot-scope="scope">
{{ scope.row.发动机号 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.productModel')">
<template slot-scope="scope">
{{ scope.row.机型 }}
</template>
</el-table-column>
<div class="tablePanel">
<!--<el-table-column align="center" label="制造编号">--> <el-table
<!-- <template slot-scope="scope">--> v-loading="loading"
<!-- {{ scope.row.制造编号 }}--> ref="multipleTable"
<!-- </template>--> :cell-class-name="tableRowClassName"
<!--</el-table-column>--> :data="tableData"
<!--<el-table-column align="center" label="项目名称">--> :header-cell-style="{background:'#eef1f6',color:'#606266'}"
<!-- <template slot-scope="scope">--> border
<!-- {{ scope.row.项目名称 }}--> class="main transitTable"
<!-- </template>--> element-loading-background="rgba(0, 0, 0, 0.2)"
<!--</el-table-column>--> element-loading-spinner="el-icon-loading"
<!--<el-table-column align="center" label="间隔号">--> :element-loading-text="$t('inquiryTransitInformation.loadingData')"
<!-- <template slot-scope="scope">--> height="600px"
<!-- {{ scope.row.间隔号 }}--> size="mini"
<!-- </template>--> style="width: 100%"
<!--</el-table-column>--> tooltip-effect="dark">
<!--<el-table-column align="center" label="DS/ES编号">--> <!-- <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
<!-- <template slot-scope="scope">--> <el-table-column align="center" :label="$t('inquiryTransitInformation.sequence')" type="index" width="60"/>
<!-- {{ scope.row.单元号 }}--> <el-table-column align="center" :label="$t('inquiryTransitInformation.stationNumber')" width="120">
<!-- </template>--> <template slot-scope="scope">
<!--</el-table-column>--> {{ scope.row.工位号 }}
<el-table-column align="center" :label="$t('inquiryTransitInformation.arrivalTime')"> </template>
<template slot-scope="scope"> </el-table-column>
{{ scope.row.到达时间 }} <el-table-column align="center" :label="$t('inquiryTransitInformation.orderNumber')">
</template> <template slot-scope="scope">
</el-table-column> {{ scope.row.订单号 }}
<el-table-column align="center" :label="$t('inquiryTransitInformation.departureTime')"> </template>
<template slot-scope="scope"> </el-table-column>
{{ scope.row.离开时间 }} <el-table-column align="center" :label="$t('inquiryTransitInformation.productNumber')">
</template> <template slot-scope="scope">
</el-table-column> {{ scope.row.发动机号 }}
<el-table-column align="center" :label="$t('inquiryTransitInformation.onlineTimeSeconds')"> </template>
<template slot-scope="scope"> </el-table-column>
{{ scope.row.在线时间 }} <el-table-column align="center" :label="$t('inquiryTransitInformation.productModel')">
</template> <template slot-scope="scope">
</el-table-column> {{ scope.row.机型 }}
<el-table-column align="center" :label="$t('inquiryTransitInformation.isQualified')" width="80px"> </template>
<template slot-scope="scope"> </el-table-column>
{{ scope.row.是否合格 }} <!--<el-table-column align="center" label="制造编号">-->
</template> <!-- <template slot-scope="scope">-->
</el-table-column> <!-- {{ scope.row.制造编号 }}-->
<!-- <el-table-column align="center" label="是否报工" width="80px">--> <!-- </template>-->
<!-- <template slot-scope="scope">--> <!--</el-table-column>-->
<!-- {{ scope.row.是否完成报工 ? '是' : '否' }}--> <!--<el-table-column align="center" label="项目名称">-->
<!-- </template>--> <!-- <template slot-scope="scope">-->
<!-- </el-table-column>--> <!-- {{ scope.row.项目名称 }}-->
<!-- <el-table-column align="center" label="操作时间">--> <!-- </template>-->
<!-- <template slot-scope="scope">--> <!--</el-table-column>-->
<!-- {{ scope.row.操作时间 }}--> <!--<el-table-column align="center" label="间隔号">-->
<!-- </template>--> <!-- <template slot-scope="scope">-->
<!-- </el-table-column>--> <!-- {{ scope.row.间隔号 }}-->
</el-table> <!-- </template>-->
<div class="block" style="margin-top: 10px;"> <!--</el-table-column>-->
<!--<el-table-column align="center" label="DS/ES编号">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.单元号 }}-->
<!-- </template>-->
<!--</el-table-column>-->
<el-table-column align="center" :label="$t('inquiryTransitInformation.arrivalTime')">
<template slot-scope="scope">
{{ scope.row.到达时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.departureTime')">
<template slot-scope="scope">
{{ scope.row.离开时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.onlineTimeSeconds')">
<template slot-scope="scope">
{{ scope.row.在线时间 }}
</template>
</el-table-column>
<el-table-column align="center" :label="$t('inquiryTransitInformation.isQualified')" width="80px">
<template slot-scope="scope">
{{ scope.row.是否合格 }}
</template>
</el-table-column>
<!-- <el-table-column align="center" label="是否报工" width="80px">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.是否完成报工 ? '是' : '否' }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column align="center" label="操作时间">-->
<!-- <template slot-scope="scope">-->
<!-- {{ scope.row.操作时间 }}-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</div>
<div class="block paginationWrap">
<el-pagination <el-pagination
v-if="!loading" v-if="!loading"
:current-page="pageCurrent" :current-page="pageCurrent"
@@ -456,7 +457,45 @@ export default {
margin: 5px; margin: 5px;
} }
::v-deep .topCard > .el-card__body {
display: block !important;
width: 100%;
}
.topDiv { .topDiv {
margin-bottom: 10px; //margin-bottom: 10px;
}
.queryToolbar {
//align-items: flex-end;
}
.contentStack {
display: block;
width: 100%;
clear: both;
}
.tablePanel {
display: block;
width: 100%;
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(243,247,251,0.94) 100%);
overflow-x: auto;
}
.transitTable {
width: 100% !important;
max-width: 100%;
}
.paginationWrap {
display: block;
width: 100%;
}
::v-deep .queryToolbar .el-button {
margin-bottom: 2px;
} }
</style> </style>

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="app-container"> <div class="app-container mes-admin-page">
<el-card class="topCard"> <el-card class="topCard">
<div class="topDiv"> <div class="topDiv queryToolbar">
<div> <div>
<span style="margin-left: 10px;margin-right: 1px;letter-spacing: 3px">{{ $t('materialDataQuery.stationNumberLabel') }}</span> <span style="margin-left: 10px;margin-right: 1px;letter-spacing: 3px">{{ $t('materialDataQuery.stationNumberLabel') }}</span>
<el-select <el-select
@@ -111,21 +111,23 @@
<!-- size="mini"/>--> <!-- size="mini"/>-->
<!-- </el-select>--> <!-- </el-select>-->
</div> </div>
<el-table <div class="contentStack">
v-loading="loading" <div class="tablePanel">
ref="multipleTable" <el-table
:cell-class-name="tableRowClassName" v-loading="loading"
:data="tableData" ref="multipleTable"
:header-cell-style="{background:'#eef1f6',color:'#606266'}" :cell-class-name="tableRowClassName"
border :data="tableData"
class="main" :header-cell-style="{background:'#eef1f6',color:'#606266'}"
element-loading-background="rgba(0, 0, 0, 0.2)" border
element-loading-spinner="el-icon-loading" class="main materialTable"
:element-loading-text="$t('materialDataQuery.loadingData')" element-loading-background="rgba(0, 0, 0, 0.2)"
height="560px" element-loading-spinner="el-icon-loading"
size="mini" :element-loading-text="$t('materialDataQuery.loadingData')"
style="width: 100%" height="560px"
tooltip-effect="dark"> size="mini"
style="width: 100%"
tooltip-effect="dark">
<!-- <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>--> <!-- <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
<el-table-column align="center" :label="$t('materialDataQuery.sequence')" type="index" width="60"/> <el-table-column align="center" :label="$t('materialDataQuery.sequence')" type="index" width="60"/>
<el-table-column align="center" :label="$t('materialDataQuery.orderNumber')" width="120px"> <el-table-column align="center" :label="$t('materialDataQuery.orderNumber')" width="120px">
@@ -195,17 +197,19 @@
{{ scope.row.操作时间 }} {{ scope.row.操作时间 }}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="block" style="margin-top: 10px;"> </div>
<el-pagination <div class="block paginationWrap">
v-if="!loading" <el-pagination
:current-page="pageCurrent" v-if="!loading"
:page-size="pageSize" :current-page="pageCurrent"
:page-sizes="[15, 30, 40]" :page-size="pageSize"
:total="total" :page-sizes="[15, 30, 40]"
layout="total, sizes, prev, pager, next, jumper" :total="total"
@size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"/> @size-change="handleSizeChange"
@current-change="handleCurrentChange"/>
</div>
</div> </div>
</div> </div>
</el-card> </el-card>
@@ -524,7 +528,48 @@ export default {
margin: 5px; margin: 5px;
} }
::v-deep .topCard > .el-card__body {
display: block !important;
width: 100%;
}
.topDiv { .topDiv {
margin-bottom: 10px; margin-bottom: 10px;
} }
.queryToolbar {
align-items: flex-end;
}
.contentStack {
display: block;
width: 100%;
clear: both;
}
.tablePanel {
display: block;
width: 100%;
max-width: 100%;
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(243,247,251,0.94) 100%);
overflow-x: auto;
}
.materialTable {
width: 100% !important;
max-width: 100%;
}
.paginationWrap {
display: block;
width: 100%;
margin-top: 10px;
text-align: right;
}
::v-deep .queryToolbar .el-button {
margin-bottom: 2px;
}
</style> </style>

View File

@@ -1,128 +1,142 @@
<template> <template>
<el-card class="topCard"> <div class="app-container mes-admin-page">
<el-row class="toolbarRow"> <el-card class="topCard">
<span class="promptText">{{ $t('offLinePartCount.productionTimeLabel') }}</span> <el-row>
<el-date-picker <div class="toolbarRow">
v-model="dateTime" <span class="promptText">{{ $t('offLinePartCount.productionTimeLabel') }}</span>
:clearable="false" <el-date-picker
align="center" v-model="dateTime"
:end-placeholder="$t('offLinePartCount.endDate')" :clearable="false"
format="yyyy-MM-dd"
:range-separator="$t('offLinePartCount.dateRangeSeparator')"
size="small"
:start-placeholder="$t('offLinePartCount.startDate')"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
/>
<span style="margin-left: 10px">{{ $t('offLinePartCount.orderNumberLabel') }}</span>
<el-input
v-model="orderNumberValue"
:placeholder="$t('offLinePartCount.orderNumberPlaceholder')"
clearable
size="small"
style="width: 150px"
/>
<span class="promptText">{{ $t('offLinePartCount.productModelLabel') }}</span>
<el-select
v-model="engineTypeValue"
:placeholder="$t('offLinePartCount.selectProductModel')"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="item in engineType"
:key="item.value"
:label="item.label"
:value="item.value"
size="mini"
/>
</el-select>
<span class="promptText">{{ $t('offLinePartCount.trendGranularityLabel') }}</span>
<el-radio-group v-model="trendMode" size="small">
<el-radio-button label="day">{{ $t('offLinePartCount.byDay') }}</el-radio-button>
<el-radio-button label="hour">{{ $t('offLinePartCount.byHour') }}</el-radio-button>
</el-radio-group>
<el-button
class="functionButton"
type="primary"
size="small"
icon="el-icon-search"
plain
@click="searchTable(true)"
>{{ $t('offLinePartCount.search') }}</el-button>
<el-button
type="info"
style="margin-left: 0"
icon="el-icon-document"
size="small"
plain
@click="exportExcel()"
>{{ $t('offLinePartCount.export') }}</el-button>
<span v-show="isExporting" style="color: #16a188">{{ $t('offLinePartCount.exporting') }}</span>
</el-row>
<el-row>
<div class="chartCard">
<div id="offlineTrendChart" class="chartDom" />
</div>
</el-row>
<el-row>
<div>
<el-table
v-loading="loading"
:data="tableData"
highlight-current-row
border
stripe
class="tableCustomization"
height="600px"
style="width: 100%"
>
<el-table-column
type="index"
align="center" align="center"
:label="$t('offLinePartCount.sequence')" :end-placeholder="$t('offLinePartCount.endDate')"
width="90px" format="yyyy-MM-dd"
:range-separator="$t('offLinePartCount.dateRangeSeparator')"
size="small"
:start-placeholder="$t('offLinePartCount.startDate')"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
/> />
<el-table-column width="200px" :label="$t('offLinePartCount.orderNumber')" align="center"> <span style="margin-left: 10px">{{ $t('offLinePartCount.orderNumberLabel') }}</span>
<template slot-scope="scope"> <el-input
{{ scope.row.订单号 }} v-model="orderNumberValue"
</template> :placeholder="$t('offLinePartCount.orderNumberPlaceholder')"
</el-table-column> clearable
<el-table-column min-width="240px" :label="$t('offLinePartCount.productNumber')" align="center"> size="small"
<template slot-scope="scope"> style="width: 150px"
{{ scope.row.发动机号 }}
</template>
</el-table-column>
<el-table-column :label="$t('offLinePartCount.productModel')" width="200px" align="center">
<template slot-scope="scope">
{{ scope.row.机型 }}
</template>
</el-table-column>
<el-table-column :label="$t('offLinePartCount.offlineTime')" width="250px" align="center">
<template slot-scope="scope">
{{ scope.row.离开时间 }}
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px">
<el-pagination
:current-page="pageCurrent"
:page-sizes="[15, 30, 40]"
:page-size="pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChanges"
@current-change="handleCurrentChanges"
/> />
<span class="promptText" style="margin-left: 10px">{{ $t('offLinePartCount.productModelLabel') }}</span>
<el-select
v-model="engineTypeValue"
:placeholder="$t('offLinePartCount.selectProductModel')"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="item in engineType"
:key="item.value"
:label="item.label"
:value="item.value"
size="mini"
/>
</el-select>
</div> </div>
</div> <div style="margin-top: 10px" class="toolbarRow">
</el-row> <span class="promptText">{{ $t('offLinePartCount.trendGranularityLabel') }}</span>
</el-card> <el-radio-group v-model="trendMode" size="small">
<el-radio-button label="day">{{ $t('offLinePartCount.byDay') }}</el-radio-button>
<el-radio-button label="hour">{{ $t('offLinePartCount.byHour') }}</el-radio-button>
</el-radio-group>
<el-button
class="functionButton"
type="primary"
size="small"
icon="el-icon-search"
plain
@click="searchTable(true)"
style="margin-left: 10px"
>{{ $t('offLinePartCount.search') }}</el-button>
<el-button
type="info"
style="margin-left: 10px"
icon="el-icon-document"
size="small"
plain
@click="exportExcel()"
>{{ $t('offLinePartCount.export') }}</el-button>
</div>
<span v-show="isExporting" style="color: #16a188">{{ $t('offLinePartCount.exporting') }}</span>
</el-row>
<el-row>
<div class="chartCard">
<div id="offlineTrendChart" class="chartDom" />
</div>
</el-row>
<el-row>
<div class="tablePanel">
<div class="panelHeader compactHeader">
<div>
<div class="panelTitle">{{ $t('offLinePartCount.detailTitle') }}</div>
<div class="panelSubtitle">{{ $t('offLinePartCount.detailSubtitle') }}</div>
</div>
</div>
<el-table
v-loading="loading"
:data="tableData"
highlight-current-row
border
stripe
class="tableCustomization"
height="600px"
style="width: 100%"
>
<el-table-column
type="index"
align="center"
:label="$t('offLinePartCount.sequence')"
width="90px"
/>
<el-table-column width="200px" :label="$t('offLinePartCount.orderNumber')" align="center">
<template slot-scope="scope">
{{ scope.row.订单号 }}
</template>
</el-table-column>
<el-table-column min-width="240px" :label="$t('offLinePartCount.productNumber')" align="center">
<template slot-scope="scope">
{{ scope.row.发动机号 }}
</template>
</el-table-column>
<el-table-column :label="$t('offLinePartCount.productModel')" width="200px" align="center">
<template slot-scope="scope">
{{ scope.row.机型 }}
</template>
</el-table-column>
<el-table-column :label="$t('offLinePartCount.offlineTime')" width="250px" align="center">
<template slot-scope="scope">
{{ scope.row.离开时间 }}
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top: 10px">
<el-pagination
:current-page="pageCurrent"
:page-sizes="[15, 30, 40]"
:page-size="pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChanges"
@current-change="handleCurrentChanges"
/>
</div>
</div>
</el-row>
</el-card>
</div>
</template> </template>
<script> <script>
@@ -417,4 +431,33 @@ export default {
width: 100%; width: 100%;
height: 360px; height: 360px;
} }
.panelHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.panelTitle {
color: #203247;
font-size: 15px;
font-weight: 700;
}
.panelSubtitle {
color: #6b7f93;
font-size: 12px;
margin-top: 3px;
}
.compactHeader {
padding: 0 2px;
}
.tablePanel {
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.54) 0%, rgba(243,247,251,0.94) 100%);
}
</style> </style>

View File

@@ -1,109 +1,115 @@
<template> <template>
<el-card class="topCard"> <div class="app-container mes-admin-page">
<el-row class="toolbarRow"> <el-card class="topCard">
<span class="promptText">{{ $t('stationBeat.productionTimeLabel') }}</span> <el-row class="toolbarRow">
<el-date-picker <span class="promptText">{{ $t('stationBeat.productionTimeLabel') }}</span>
v-model="dateTime" <el-date-picker
:clearable="false" v-model="dateTime"
align="center" :clearable="false"
:end-placeholder="$t('stationBeat.endDate')"
format="yyyy-MM-dd"
:range-separator="$t('stationBeat.dateRangeSeparator')"
size="small"
:start-placeholder="$t('stationBeat.startDate')"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
/>
<span class="promptText">{{ $t('stationBeat.stationLabel') }}</span>
<el-select
v-model="stationValues"
:placeholder="$t('stationBeat.selectStation')"
clearable
filterable
collapse-tags
multiple
size="small"
style="width: 320px"
>
<el-option
v-for="item in stationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<span style="margin-left: 10px">{{ $t('stationBeat.orderNumberLabel') }}</span>
<el-input
v-model="orderNumberValue"
:placeholder="$t('stationBeat.orderNumberPlaceholder')"
clearable
size="small"
style="width: 150px"
/>
<span class="promptText">{{ $t('stationBeat.productModelLabel') }}</span>
<el-select
v-model="engineTypeValue"
:placeholder="$t('stationBeat.selectProductModel')"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="item in engineType"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button
class="functionButton"
type="primary"
size="small"
icon="el-icon-search"
plain
@click="searchTable()"
>{{ $t('stationBeat.search') }}</el-button>
<el-button
type="info"
size="small"
icon="el-icon-download"
plain
@click="exportExcel()"
>{{ $t('stationBeat.excel') }}</el-button>
</el-row>
<el-row>
<div class="chartCard">
<div id="stationBeatChart" class="chartDom" />
</div>
</el-row>
<el-row>
<el-table
v-loading="loading"
:data="tableData"
border
stripe
class="tableCustomization"
height="650px"
style="width: 100%"
>
<el-table-column type="index" align="center" :label="$t('stationBeat.sequence')" width="80" />
<el-table-column prop="工位" :label="$t('stationBeat.station')" align="center" min-width="140" />
<el-table-column prop="总平均节拍" :label="$t('stationBeat.totalAverageBeat')" align="center" min-width="140" />
<el-table-column
v-for="item in dynamicDateColumns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
align="center" align="center"
min-width="130" :end-placeholder="$t('stationBeat.endDate')"
format="yyyy-MM-dd"
:range-separator="$t('stationBeat.dateRangeSeparator')"
size="small"
:start-placeholder="$t('stationBeat.startDate')"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
/> />
</el-table> <span class="promptText" style="margin-left: 10px">{{ $t('stationBeat.stationLabel') }}</span>
</el-row> <el-select
</el-card> v-model="stationValues"
:placeholder="$t('stationBeat.selectStation')"
clearable
filterable
collapse-tags
multiple
size="small"
style="width: 270px"
>
<el-option
v-for="item in stationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<span style="margin-left: 10px">{{ $t('stationBeat.orderNumberLabel') }}</span>
<el-input
v-model="orderNumberValue"
:placeholder="$t('stationBeat.orderNumberPlaceholder')"
clearable
size="small"
style="width: 150px"
/>
<span class="promptText" style="margin-left: 10px">{{ $t('stationBeat.productModelLabel') }}</span>
<el-select
v-model="engineTypeValue"
:placeholder="$t('stationBeat.selectProductModel')"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="item in engineType"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button
class="functionButton"
type="primary"
size="small"
icon="el-icon-search"
plain
@click="searchTable()"
style="margin-left: 10px"
>{{ $t('stationBeat.search') }}</el-button>
<el-button
type="info"
size="small"
icon="el-icon-download"
plain
@click="exportExcel()"
>{{ $t('stationBeat.excel') }}</el-button>
</el-row>
<el-row>
<div class="chartCard">
<div id="stationBeatChart" class="chartDom" />
</div>
</el-row>
<el-row>
<div class="tablePanel">
<el-table
v-loading="loading"
:data="tableData"
border
stripe
class="tableCustomization"
height="650px"
style="width: 100%"
>
<el-table-column type="index" align="center" :label="$t('stationBeat.sequence')" width="80" />
<el-table-column prop="工位" :label="$t('stationBeat.station')" align="center" min-width="140" />
<el-table-column prop="总平均节拍" :label="$t('stationBeat.totalAverageBeat')" align="center" min-width="140" />
<el-table-column
v-for="item in dynamicDateColumns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
align="center"
min-width="130"
/>
</el-table>
</div>
</el-row>
</el-card>
</div>
</template> </template>
<script> <script>
@@ -375,4 +381,38 @@ export default {
width: 100%; width: 100%;
height: 360px; height: 360px;
} }
.panelHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.panelTitle {
color: #203247;
font-size: 15px;
font-weight: 700;
}
.panelSubtitle {
color: #6b7f93;
font-size: 12px;
margin-top: 3px;
}
.compactHeader {
padding: 0 2px;
}
.tablePanel {
width: 100%;
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.54) 0%, rgba(243,247,251,0.94) 100%);
}
::v-deep .toolbarRow .el-button {
margin-bottom: 2px;
}
</style> </style>

View File

@@ -1,106 +1,57 @@
<template> <template>
<el-card class="topCard"> <div class="app-container mes-admin-page">
<el-tabs v-model="activeTab" @tab-click="handleTabChange"> <el-card class="topCard">
<el-tab-pane :label="$t('stationJph.realtimeTab')" name="realtime"> <el-tabs v-model="activeTab" @tab-click="handleTabChange">
<div class="chartCard"> <el-tab-pane :label="$t('stationJph.realtimeTab')" name="realtime">
<div id="stationJphRealtimeChart" class="chartDom" /> <div class="chartCard realtimeChartCard">
</div> <div id="stationJphRealtimeChart" class="chartDom" />
</el-tab-pane> </div>
</el-tab-pane>
<el-tab-pane :label="$t('stationJph.historyTab')" name="history"> <el-tab-pane :label="$t('stationJph.historyTab')" name="history">
<el-row class="toolbarRow"> <el-row class="toolbarRow">
<span class="promptText">{{ $t('stationJph.productionTimeLabel') }}</span> <span class="promptText">{{ $t('stationJph.productionTimeLabel') }}</span>
<el-date-picker <el-date-picker
v-model="dateTime" v-model="dateTime"
:clearable="false" :clearable="false"
align="center" align="center"
:end-placeholder="$t('stationJph.endDate')" :end-placeholder="$t('stationJph.endDate')"
format="yyyy-MM-dd" format="yyyy-MM-dd"
:range-separator="$t('stationJph.dateRangeSeparator')" :range-separator="$t('stationJph.dateRangeSeparator')"
size="small" size="small"
:start-placeholder="$t('stationJph.startDate')" :start-placeholder="$t('stationJph.startDate')"
style="width: 240px" style="width: 240px"
type="daterange" type="daterange"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd"
/>
<span class="promptText">{{ $t('stationJph.stationLabel') }}</span>
<el-select
v-model="stationValues"
:placeholder="$t('stationJph.selectStation')"
clearable
filterable
collapse-tags
multiple
size="small"
style="width: 320px"
>
<el-option
v-for="item in stationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/> />
</el-select> <span class="promptText" style="margin-left: 10px;">{{ $t('stationJph.stationLabel') }}</span>
<span style="margin-left: 10px">{{ $t('stationJph.orderNumberLabel') }}</span>
<el-input
v-model="orderNumberValue"
:placeholder="$t('stationJph.orderNumberPlaceholder')"
clearable
size="small"
style="width: 150px"
/>
<span class="promptText">{{ $t('stationJph.productModelLabel') }}</span>
<el-select
v-model="engineTypeValue"
:placeholder="$t('stationJph.selectProductModel')"
filterable
clearable
size="small"
style="width: 150px"
>
<el-option
v-for="item in engineType"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button
class="functionButton"
type="primary"
size="small"
icon="el-icon-search"
plain
@click="handleSearch()"
>{{ $t('stationJph.search') }}</el-button>
<el-button
type="info"
size="small"
icon="el-icon-download"
plain
@click="exportExcel()"
>{{ $t('stationJph.export') }}</el-button>
</el-row>
<div class="chartCard"> <el-select v-model="stationValues" :placeholder="$t('stationJph.selectStation')" clearable filterable collapse-tags multiple size="small" style="width: 320px">
<div id="stationJphHistoryChart" class="chartDom" /> <el-option v-for="item in stationOptions" :key="item.value" :label="item.label" :value="item.value" />
</div> </el-select>
<el-table <span class="promptText" style="margin-left: 10px;">{{ $t('stationJph.orderNumberLabel') }}</span>
v-loading="historyLoading"
:data="historyTableData" <el-input v-model="orderNumberValue" :placeholder="$t('stationJph.orderNumberPlaceholder')" clearable size="small" style="width: 150px" />
border <span class="promptText" style="margin-left: 10px;">{{ $t('stationJph.productModelLabel') }}</span>
stripe
height="560px" <el-select v-model="engineTypeValue" :placeholder="$t('stationJph.selectProductModel')" filterable clearable size="small" style="width: 150px">
style="width: 100%" <el-option v-for="item in engineType" :key="item.value" :label="item.label" :value="item.value" /></el-select>
> <el-button class="functionButton" type="primary" size="small" icon="el-icon-search" plain @click="handleSearch()">{{ $t('stationJph.search') }}</el-button>
<el-table-column type="index" align="center" :label="$t('stationJph.sequence')" width="80" /> <el-button type="info" size="small" icon="el-icon-download" plain @click="exportExcel()">{{ $t('stationJph.export') }}</el-button>
<el-table-column prop="日期" :label="$t('stationJph.date')" align="center" min-width="120" /> </el-row>
<el-table-column prop="小时段" :label="$t('stationJph.hourSlot')" align="center" min-width="120" /> <div class="chartCard historyChartCard">
<el-table-column prop="产量" :label="$t('stationJph.outputQty')" align="center" min-width="100" /> <div id="stationJphHistoryChart" class="chartDom" /></div>
</el-table> <div class="tablePanel">
</el-tab-pane> <el-table v-loading="historyLoading" :data="historyTableData" border stripe height="560px" style="width: 100%">
</el-tabs> <el-table-column type="index" align="center" :label="$t('stationJph.sequence')" width="80" />
</el-card> <el-table-column prop="日期" :label="$t('stationJph.date')" align="center" min-width="120" />
<el-table-column prop="小时段" :label="$t('stationJph.hourSlot')" align="center" min-width="120" />
<el-table-column prop="产量" :label="$t('stationJph.outputQty')" align="center" min-width="100" />
</el-table>
</div>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template> </template>
<script> <script>
@@ -126,6 +77,12 @@ export default {
realtimeTimer: null realtimeTimer: null
} }
}, },
watch: {
'$i18n.locale'() {
this.renderRealtimeChart()
this.renderHistoryChart()
}
},
created() { created() {
this.dateTime = [getNowShotTime(), getNowShotTime()] this.dateTime = [getNowShotTime(), getNowShotTime()]
this.getStationOptions() this.getStationOptions()
@@ -155,12 +112,6 @@ export default {
this.historyChart = null this.historyChart = null
} }
}, },
watch: {
'$i18n.locale'() {
this.renderRealtimeChart()
this.renderHistoryChart()
}
},
methods: { methods: {
getStationOptions() { getStationOptions() {
const param = [] const param = []
@@ -465,6 +416,7 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px 0; gap: 8px 0;
margin-bottom: 12px; margin-bottom: 12px;
margin-top: 10px;
} }
.chartCard { .chartCard {
@@ -480,4 +432,43 @@ export default {
width: 100%; width: 100%;
height: 360px; height: 360px;
} }
.tablePanel {
padding-top: 4px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.54) 0%, rgba(243,247,251,0.94) 100%);
}
.panelHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.panelTitle {
color: #203247;
font-size: 15px;
font-weight: 700;
}
.panelSubtitle {
color: #6b7f93;
font-size: 12px;
margin-top: 3px;
}
.compactHeader {
padding: 0 2px;
}
.realtimeChartCard,
.historyChartCard {
position: relative;
}
::v-deep .toolbarRow .el-button {
margin-bottom: 2px;
}
</style> </style>

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="app-container"> <div class="app-container mes-admin-page">
<el-card class="topCard"> <el-card class="topCard">
<div class="topDiv"> <div class="topDiv">
<span style="margin-left: 10px">{{ $t('recipeManagement.productModelLabel') }}</span> <span style="margin-left: 10px">{{ $t('recipeManagement.productModelLabel') }}</span>

View File

@@ -1,9 +1,9 @@
<template> <template>
<div class="app-container"> <div class="app-container mes-admin-page">
<el-card class="topCard"> <el-card class="topCard">
<div class="topDiv"> <div class="topDiv topToolbar">
<span style="margin-left: 10px">{{ $t('releaseOfProductionPlan.orderNumberLabel') }}</span> <span style="margin-left: 10px">{{ $t('releaseOfProductionPlan.orderNumberLabel') }}</span>
<el-input v-model="orderNumberValue" clearable :placeholder="$t('releaseOfProductionPlan.filterOrderNumber')" size="small" style="width: 200px"/> <el-input v-model="orderNumberValue" clearable :placeholder="$t('releaseOfProductionPlan.filterOrderNumber')" size="small" style="width: 200px"/>
<span style="margin-left: 10px">{{ $t('releaseOfProductionPlan.productModelLabel') }}</span> <span style="margin-left: 10px">{{ $t('releaseOfProductionPlan.productModelLabel') }}</span>
<el-select <el-select
v-model="engineTypeValue" v-model="engineTypeValue"
@@ -57,185 +57,189 @@
<!-- <el-button type="info" plain size="small" icon="el-icon-upload2" @click="importOrder('form')">订单导入</el-button>--> <!-- <el-button type="info" plain size="small" icon="el-icon-upload2" @click="importOrder('form')">订单导入</el-button>-->
<!-- <el-button type="info" plain size="small" icon="el-icon-download" @click="exportExcel()">订单导出</el-button>--> <!-- <el-button type="info" plain size="small" icon="el-icon-download" @click="exportExcel()">订单导出</el-button>-->
</div> </div>
<el-table <div class="tablePanel">
ref="multipleTable" <el-table
v-loading="loading" ref="multipleTable"
:data="tableData" v-loading="loading"
:header-cell-style="{ background: '#eef1f6', color: '#606266' }" :data="tableData"
:cell-class-name="tableRowClassName" :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
:expand-row-keys="expandsDetail" :cell-class-name="tableRowClassName"
:row-key="getRowKeys" :expand-row-keys="expandsDetail"
:element-loading-text="$t('releaseOfProductionPlan.loadingData')" :row-key="getRowKeys"
element-loading-spinner="el-icon-loading" :element-loading-text="$t('releaseOfProductionPlan.loadingData')"
element-loading-background="rgba(0, 0, 0, 0.2)" element-loading-spinner="el-icon-loading"
class="main" element-loading-background="rgba(0, 0, 0, 0.2)"
tooltip-effect="dark" class="main"
style="width: 100%; max-height: 700px" tooltip-effect="dark"
border style="width: 100%; max-height: 700px"
height="800px" border
size="mini" height="800px"
@expand-change="selectPlan" size="mini"
@selection-change="handleSelectionChange" @expand-change="selectPlan"
> @selection-change="handleSelectionChange"
<el-table-column align="center" type="index" :label="$t('releaseOfProductionPlan.sort')" /> >
<el-table-column align="center" type="expand" label="" fixed width="35"> <el-table-column align="center" type="index" :label="$t('releaseOfProductionPlan.sort')" />
<template slot-scope="scope"> <el-table-column align="center" type="expand" label="" fixed width="35">
<div style="display: flex"> <template>
<!-- 详细数据盒子 --> <div style="display: flex">
<div style="margin: 5px 10px; width: 1000px; z-index: 99"> <!-- 详细数据盒子 -->
<el-table <div style="margin: 5px 10px; width: 1000px; z-index: 99">
:data="tableDataPrintDetail" <el-table
:header-cell-style="{ :data="tableDataPrintDetail"
background: '#e5e7f8', :header-cell-style="{
color: '#606266', background: '#e5e7f8',
}" color: '#606266',
:element-loading-text="$t('releaseOfProductionPlan.loadingData')" }"
element-loading-spinner="el-icon-loading" :element-loading-text="$t('releaseOfProductionPlan.loadingData')"
element-loading-background="rgba(0, 0, 0, 0.2)" element-loading-spinner="el-icon-loading"
class="main" element-loading-background="rgba(0, 0, 0, 0.2)"
tooltip-effect="dark" class="main"
style="width: 100%; z-index: 99" tooltip-effect="dark"
max-height="400px" style="width: 100%; z-index: 99"
border max-height="400px"
size="mini" border
> size="mini"
<el-table-column align="center" type="index" :label="$t('releaseOfProductionPlan.sequence')" /> >
<el-table-column align="center" :label="$t('releaseOfProductionPlan.crankcaseAssemblyNo')" width="250"> <el-table-column align="center" type="index" :label="$t('releaseOfProductionPlan.sequence')" />
<template slot-scope="scope"> <el-table-column align="center" :label="$t('releaseOfProductionPlan.crankcaseAssemblyNo')" width="250">
{{ scope.row.发动机号 }} <template slot-scope="scope">
</template> {{ scope.row.发动机号 }}
</el-table-column> </template>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.onlineTime')" width="150"> </el-table-column>
<template slot-scope="scope"> <el-table-column align="center" :label="$t('releaseOfProductionPlan.onlineTime')" width="150">
{{ scope.row.上线时间 }} <template slot-scope="scope">
</template> {{ scope.row.上线时间 }}
</el-table-column> </template>
<el-table-column align="center" :label="$t('releaseOfProductionPlan.offlineTime')" width="150"> </el-table-column>
<template slot-scope="scope"> <el-table-column align="center" :label="$t('releaseOfProductionPlan.offlineTime')" width="150">
{{ scope.row.下线时间 }} <template slot-scope="scope">
</template> {{ scope.row.下线时间 }}
</el-table-column> </template>
</el-table> </el-table-column>
</el-table>
</div>
</div> </div>
</div> </template>
</template> </el-table-column>
</el-table-column> <el-table-column align="center" :label="$t('releaseOfProductionPlan.orderNumber')">
<el-table-column align="center" :label="$t('releaseOfProductionPlan.orderNumber')"> <template slot-scope="scope">
<template slot-scope="scope"> {{ scope.row.订单号 }}
{{ scope.row.订单号 }} </template>
</template> </el-table-column>
</el-table-column> <el-table-column align="center" :label="$t('releaseOfProductionPlan.productModel')">
<el-table-column align="center" :label="$t('releaseOfProductionPlan.productModel')"> <template slot-scope="scope">
<template slot-scope="scope"> {{ scope.row.产品型号 }}
{{ scope.row.产品型号 }} </template>
</template> </el-table-column>
</el-table-column> <!-- <el-table-column align="center" label="总成号">-->
<!-- <el-table-column align="center" label="总成号">--> <!-- <template slot-scope="scope">-->
<!-- <template slot-scope="scope">--> <!-- {{ scope.row.零件号 }}-->
<!-- {{ scope.row.零件号 }}--> <!-- </template>-->
<!-- </template>--> <!-- </el-table-column>-->
<!-- </el-table-column>--> <el-table-column align="center" :label="$t('releaseOfProductionPlan.planQuantity')">
<el-table-column align="center" :label="$t('releaseOfProductionPlan.planQuantity')"> <template slot-scope="scope">
<template slot-scope="scope"> {{ scope.row.计划数量 }}
{{ scope.row.计划数量 }} </template>
</template> </el-table-column>
</el-table-column> <!-- <el-table-column align="center" label="完成数量">-->
<!-- <el-table-column align="center" label="完成数量">--> <!-- <template slot-scope="scope">-->
<!-- <template slot-scope="scope">--> <!-- {{ scope.row.完成数量 }}-->
<!-- {{ scope.row.完成数量 }}--> <!-- </template>-->
<!-- </template>--> <!-- </el-table-column>-->
<!-- </el-table-column>--> <!-- <el-table-column align="center" label="状态">-->
<!-- <el-table-column align="center" label="状态">--> <!-- <template slot-scope="scope">-->
<!-- <template slot-scope="scope">--> <!-- <el-tag v-if="parseInt(scope.row.订单状态) === 0" effect="plain" style="width: 70px" type="info">已结束</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 0" effect="plain" style="width: 70px" type="info">已结束</el-tag>--> <!-- <el-tag v-if="parseInt(scope.row.订单状态) === 1" effect="plain" style="width: 70px" type="success">生产中</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 1" effect="plain" style="width: 70px" type="success">生产中</el-tag>--> <!-- <el-tag v-if="parseInt(scope.row.订单状态) === 2" effect="plain" style="width: 70px" type="text">未上线</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 2" effect="plain" style="width: 70px" type="text">上线</el-tag>--> <!-- <el-tag v-if="parseInt(scope.row.订单状态) === 3" effect="plain" style="width: 70px" type="warning">完成</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 3" effect="plain" style="width: 70px" type="warning">未完成</el-tag>--> <!-- <el-tag v-if="parseInt(scope.row.订单状态) === 4" effect="plain" style="width: 70px" type="danger">已超额</el-tag>-->
<!-- <el-tag v-if="parseInt(scope.row.订单状态) === 4" effect="plain" style="width: 70px" type="danger">已超额</el-tag>--> <!-- </template>-->
<!-- </template>--> <!-- </el-table-column>-->
<!-- </el-table-column>--> <el-table-column align="center" :label="$t('releaseOfProductionPlan.planStartDate')">
<el-table-column align="center" :label="$t('releaseOfProductionPlan.planStartDate')"> <template slot-scope="scope">
<template slot-scope="scope"> {{ scope.row.计划开始时间 }}
{{ scope.row.计划开始时间 }} </template>
</template> </el-table-column>
</el-table-column> <el-table-column align="center" :label="$t('releaseOfProductionPlan.planEndDate')">
<el-table-column align="center" :label="$t('releaseOfProductionPlan.planEndDate')"> <template slot-scope="scope">
<template slot-scope="scope"> {{ scope.row.计划完成时间 }}
{{ scope.row.计划完成时间 }} </template>
</template> </el-table-column>
</el-table-column> <el-table-column align="center" :label="$t('releaseOfProductionPlan.productionStatus')">
<el-table-column align="center" :label="$t('releaseOfProductionPlan.productionStatus')"> <template slot-scope="scope">
<template slot-scope="scope"> <el-tag
<el-tag v-if="Number(scope.row.订单状态) === 1"
v-if="Number(scope.row.订单状态) === 1" size="mini"
size="mini" type="info"
type="info" >{{ $t('releaseOfProductionPlan.notStarted') }}</el-tag>
>{{ $t('releaseOfProductionPlan.notStarted') }}</el-tag> <el-tag
<el-tag v-if="Number(scope.row.订单状态) === 2"
v-if="Number(scope.row.订单状态) === 2" size="mini"
size="mini" type="warning"
type="warning" >{{ $t('releaseOfProductionPlan.inProduction') }}</el-tag>
>{{ $t('releaseOfProductionPlan.inProduction') }}</el-tag> <el-tag
<el-tag v-if="Number(scope.row.订单状态) === 3"
v-if="Number(scope.row.订单状态) === 3" size="mini"
size="mini" type="success"
type="success" >{{ $t('releaseOfProductionPlan.completed') }}</el-tag>
>{{ $t('releaseOfProductionPlan.completed') }}</el-tag> </template>
</template> </el-table-column>
</el-table-column> <el-table-column align="center" :label="$t('releaseOfProductionPlan.operation')" min-width="150">
<el-table-column align="center" :label="$t('releaseOfProductionPlan.operation')" min-width="150"> <template slot-scope="scope">
<template slot-scope="scope"> <el-button
<el-button v-if="parseInt(scope.row.订单状态) === 2"
v-if="parseInt(scope.row.订单状态) === 2" size="mini"
size="mini" type="text"
type="text" icon="el-icon-check"
icon="el-icon-check" @click="competeOrder(scope.row)"
@click="competeOrder(scope.row)" >{{ $t('releaseOfProductionPlan.completeOrder') }}</el-button>
>{{ $t('releaseOfProductionPlan.completeOrder') }}</el-button> <el-button
<el-button v-if="parseInt(scope.row.订单状态) === 1"
v-if="parseInt(scope.row.订单状态) === 1" size="mini"
size="mini" type="text"
type="text" icon="el-icon-edit"
icon="el-icon-edit" @click="handleEdit(scope.row)"
@click="handleEdit(scope.row)" >{{ $t('releaseOfProductionPlan.modify') }}</el-button>
>{{ $t('releaseOfProductionPlan.modify') }}</el-button> <el-button
<el-button v-if="parseInt(scope.row.订单状态) === 1"
v-if="parseInt(scope.row.订单状态) === 1" size="mini"
size="mini" type="text"
type="text" icon="el-icon-delete"
icon="el-icon-delete" style="color: red"
style="color: red" @click="deleteOrder(scope.row)"
@click="deleteOrder(scope.row)" >{{ $t('releaseOfProductionPlan.delete') }}</el-button>
>{{ $t('releaseOfProductionPlan.delete') }}</el-button> <el-button
<el-button v-if="parseInt(scope.row.是否下发) === 0"
v-if="parseInt(scope.row.是否下发) === 0" size="mini"
size="mini" type="text"
type="text" icon="el-icon-download"
icon="el-icon-download" @click="ordersIssuedEditor(scope.row)"
@click="ordersIssuedEditor(scope.row)" >{{ $t('releaseOfProductionPlan.issue') }}</el-button>
>{{ $t('releaseOfProductionPlan.issue') }}</el-button> <el-button
<el-button v-if="parseInt(scope.row.是否下发) === 1 && parseInt(scope.row.订单状态) === 1"
v-if="parseInt(scope.row.是否下发) === 1 && parseInt(scope.row.订单状态) === 1" size="mini"
size="mini" type="text"
type="text" icon="el-icon-upload2"
icon="el-icon-upload2" @click="ordersIssuedEditor1(scope.row)"
@click="ordersIssuedEditor1(scope.row)" >{{ $t('releaseOfProductionPlan.withdraw') }}</el-button>
>{{ $t('releaseOfProductionPlan.withdraw') }}</el-button> <el-button
<el-button v-if="parseInt(scope.row.是否下发) === 0 && parseInt(scope.row.订单状态) === 1"
v-if="parseInt(scope.row.是否下发) === 0 && parseInt(scope.row.订单状态) === 1" size="mini"
size="mini" type="text"
type="text" icon="el-icon-top"
icon="el-icon-top" @click="topOrder(scope.row)"
@click="topOrder(scope.row)">{{ $t('releaseOfProductionPlan.moveUp') }}</el-button> >{{ $t('releaseOfProductionPlan.moveUp') }}</el-button>
<el-button <el-button
v-if="parseInt(scope.row.是否下发) === 0 && parseInt(scope.row.订单状态) === 1" v-if="parseInt(scope.row.是否下发) === 0 && parseInt(scope.row.订单状态) === 1"
size="mini" size="mini"
type="text" type="text"
icon="el-icon-bottom" icon="el-icon-bottom"
@click="downOrder(scope.row)">{{ $t('releaseOfProductionPlan.moveDown') }}</el-button> @click="downOrder(scope.row)"
</template> >{{ $t('releaseOfProductionPlan.moveDown') }}</el-button>
</el-table-column> </template>
</el-table> </el-table-column>
</el-table>
</div>
<div class="block" style="margin-top: 10px"> <div class="block" style="margin-top: 10px">
<el-pagination <el-pagination
v-if="!loading" v-if="!loading"
@@ -395,34 +399,34 @@
:placeholder="$t('releaseOfProductionPlan.enterPlanQuantity')" :placeholder="$t('releaseOfProductionPlan.enterPlanQuantity')"
/> />
</el-form-item> </el-form-item>
<!-- <el-form-item--> <!-- <el-form-item-->
<!-- label="桥壳上线数"--> <!-- label="桥壳上线数"-->
<!-- prop="planQuantity"--> <!-- prop="planQuantity"-->
<!-- style="display: inline-block"--> <!-- style="display: inline-block"-->
<!-- >--> <!-- >-->
<!-- <el-input-number--> <!-- <el-input-number-->
<!-- v-model="form1.qiaoKeOverNumber"--> <!-- v-model="form1.qiaoKeOverNumber"-->
<!-- :min="0"--> <!-- :min="0"-->
<!-- :step="1"--> <!-- :step="1"-->
<!-- size="small"--> <!-- size="small"-->
<!-- style="width: 200px"--> <!-- style="width: 200px"-->
<!-- placeholder="请输入计划数量"--> <!-- placeholder="请输入计划数量"-->
<!-- />--> <!-- />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item--> <!-- <el-form-item-->
<!-- label="轮毂上线数"--> <!-- label="轮毂上线数"-->
<!-- prop="planQuantity"--> <!-- prop="planQuantity"-->
<!-- style="display: inline-block"--> <!-- style="display: inline-block"-->
<!-- >--> <!-- >-->
<!-- <el-input-number--> <!-- <el-input-number-->
<!-- v-model="form1.lunGuOverNumber"--> <!-- v-model="form1.lunGuOverNumber"-->
<!-- :min="0"--> <!-- :min="0"-->
<!-- :step="1"--> <!-- :step="1"-->
<!-- size="small"--> <!-- size="small"-->
<!-- style="width: 200px"--> <!-- style="width: 200px"-->
<!-- placeholder="请输入计划数量"--> <!-- placeholder="请输入计划数量"-->
<!-- />--> <!-- />-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item <el-form-item
:label="$t('releaseOfProductionPlan.planStartTime')" :label="$t('releaseOfProductionPlan.planStartTime')"
prop="startPlanTime" prop="startPlanTime"
@@ -738,6 +742,11 @@ export default {
loading: false loading: false
} }
}, },
watch: {
'$i18n.locale'() {
this.initValidationRules()
}
},
created() { created() {
this.initValidationRules() this.initValidationRules()
this.getOrderNumber() this.getOrderNumber()
@@ -779,11 +788,6 @@ export default {
// } // }
// } // }
}, },
watch: {
'$i18n.locale'() {
this.initValidationRules()
}
},
methods: { methods: {
initValidationRules() { initValidationRules() {
this.printRules = { this.printRules = {
@@ -1747,6 +1751,16 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
} }
.topToolbar {
align-items: center;
}
.tablePanel {
padding: 4px 2px 0;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(244,248,252,0.92) 100%);
}
.el-select { .el-select {
width: 200px; width: 200px;
} }
@@ -1777,4 +1791,12 @@ export default {
.el-table .success-row { .el-table .success-row {
background: #f0f9eb; background: #f0f9eb;
} }
::v-deep .topToolbar .el-button {
margin-bottom: 2px;
}
::v-deep .tablePanel .el-table__expanded-cell {
background: #f8fbfe !important;
}
</style> </style>

View File

@@ -1,37 +1,33 @@
<template> <template>
<el-card style="min-height:calc(100vh - 84px);background: white;background-size:100% 100%"> <el-card style="min-height:calc(100vh - 84px);background: white;background-size:100% 100%">
<div class="dashboard-container"> <div class="dashboard-container">
<div class="sudoku_row" > <div class="sudoku_row">
<svg-icon icon-class="人员" style="width: 35px;height: 35px"/> <svg-icon icon-class="人员" style="width: 35px;height: 35px"/>
<div class="dashboard-text" style="color:black">/{{ name }}</div> <div class="dashboard-text" style="color:black">/{{ name }}</div>
<el-divider content-position="right" style="margin:24px"/> <el-divider content-position="right" style="margin:24px"/>
<!-- <div v-for="(sudoku,index) in sudokus" :class="curSelect === sudoku.id?'opacity':''" :key="index+9999" shadow="hover" class="sudoku_item" style="background: white;border: 2px solid rgb(208,222,234)">-->
<!-- <router-link v-if="sudoku.router!=undefined" :to="sudoku.router" style="width: 100%">-->
<!-- <el-badge :value="sudoku.value" class="dashbadge" style="width: 100%;text-align:center">-->
<!-- <svg-icon :icon-class="sudoku.icon" :style="{color:colors[index]}" style="width: 25px;height: 25px"/>-->
<!-- <h2 :style="{color:colors[index]}" style="margin: 0px;height: 30px;display: inline-block;line-height: 30px">{{ sudoku.name }}</h2>-->
<!-- </el-badge>-->
<!-- </router-link>-->
<!-- </div>-->
<div v-for="(value1,index1) in fathers" :key="index1" style="width:100%;background: white;margin-bottom: 15px"> <div v-for="(father, index1) in fathers" :key="index1" style="width:100%;background: white;margin-bottom: 15px">
<div style="width: 100%;height: 40px;line-height: 40px;background: rgb(127,172,237);color:white"> <div style="width: 100%;height: 40px;line-height: 40px;background: rgb(127,172,237);color:white">
<svg-icon :icon-class="value1.icon" style="color: white;margin: 5px 5px 0px 10px;border: 0 solid black;width:20px;height:20px"/> <svg-icon :icon-class="father.icon" style="color: white;margin: 5px 5px 0px 10px;border: 0 solid black;width:20px;height:20px"/>
{{ translateMenuTitle(value1.title) }} {{ translateMenuTitle(father.title) }}
</div> </div>
<router-link v-for="(value2,index2) in sons" v-if="value2.pid === value1.id" :key="index2" :to="value2.path">
<!-- 使用计算属性后的 sonsMap不再有 v-if -->
<router-link
v-for="(son, index2) in getSonsByPid(father.id)"
:key="index2"
:to="son.path"
>
<el-card shadow="hover" class="sudoku_item1" style="height:130px;width:175px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4);border: 2px solid rgb(208,222,234)"> <el-card shadow="hover" class="sudoku_item1" style="height:130px;width:175px;margin: 5px;display: inline-block;background: rgba(255,255,255,0.4);border: 2px solid rgb(208,222,234)">
<svg-icon :icon-class="value2.icon" class="bgc" style="color: rgb(37,89,164);display:block;margin: auto;border: 0px solid black;width:40px;height:40px"/> <svg-icon :icon-class="son.icon" class="bgc" style="color: rgb(37,89,164);display:block;margin: auto;border: 0px solid black;width:40px;height:40px"/>
<h4 style="margin-top: 10px;color:rgb(37,89,164);text-align:center">{{ translateMenuTitle(value2.title) }}</h4> <h4 style="margin-top: 10px;color:rgb(37,89,164);text-align:center">{{ translateMenuTitle(son.title) }}</h4>
</el-card> </el-card>
</router-link> </router-link>
</div> </div>
</div> </div>
</div> </div>
</el-card> </el-card>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import request from '@/utils/request' import request from '@/utils/request'
@@ -53,7 +49,19 @@ export default {
...mapGetters([ ...mapGetters([
'name', 'name',
'token' 'token'
]) ]),
// 预先按 pid 分组,避免每次渲染都过滤
sonsByPid() {
const map = {}
for (const son of this.sons) {
const pid = son.pid
if (!map[pid]) {
map[pid] = []
}
map[pid].push(son)
}
return map
}
}, },
mounted() { mounted() {
this.getFileList() this.getFileList()
@@ -65,6 +73,9 @@ export default {
clearInterval(this.timer) clearInterval(this.timer)
}, },
methods: { methods: {
getSonsByPid(pid) {
return this.sonsByPid[pid] || []
},
translateMenuTitle, translateMenuTitle,
async initFirstModule() { async initFirstModule() {
await request({ await request({

View File

@@ -1,28 +1,29 @@
<template> <template>
<div v-if="!item.hidden&&item.children" class="menu-wrapper"> <div v-if="!item.hidden && item.children" class="menu-wrapper">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> <template v-if="hasOneShowingChild(visibleChildren, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
<a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path,$event)"> <a :href="onlyOneChild.path" target="_blank" @click="clickLink(onlyOneChild.path, $event)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown': !isNest}">
<item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" /> <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon || item.meta.icon" :title="onlyOneChild.meta.title" />
</el-menu-item> </el-menu-item>
</a> </a>
</template> </template>
<el-submenu v-else :index="item.name||item.path"> <el-submenu v-else :index="item.name || item.path">
<template slot="title"> <template slot="title">
<item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" /> <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
</template> </template>
<template v-for="child in item.children" v-if="!child.hidden"> <template v-for="child in visibleChildren">
<sidebar-item <sidebar-item
v-if="child.children&&child.children.length>0" v-if="child.children && child.children.length > 0"
:key="child.path"
:is-nest="true" :is-nest="true"
:item="child" :item="child"
:key="child.path"
:base-path="resolvePath(child.path)" :base-path="resolvePath(child.path)"
class="nest-menu" /> class="nest-menu"
<a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path,$event)"> />
<a v-else :href="child.path" :key="child.name" target="_blank" @click="clickLink(child.path, $event)">
<el-menu-item :index="resolvePath(child.path)" style="padding-left: 58px!important;"> <el-menu-item :index="resolvePath(child.path)" style="padding-left: 58px!important;">
<item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" /> <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
</el-menu-item> </el-menu-item>
@@ -32,7 +33,6 @@
</div> </div>
</template> </template>
<script> <script>
import path from 'path' import path from 'path'
import { validateURL } from '@/utils/validate' import { validateURL } from '@/utils/validate'
@@ -61,6 +61,13 @@ export default {
onlyOneChild: null onlyOneChild: null
} }
}, },
computed: {
// 过滤掉 hidden 的 children
visibleChildren() {
if (!this.item.children) return []
return this.item.children.filter(child => !child.hidden)
}
},
methods: { methods: {
hasOneShowingChild(children, parent) { hasOneShowingChild(children, parent) {
const showingChildren = children.filter(item => { const showingChildren = children.filter(item => {

View File

@@ -1,36 +1,50 @@
<template> <template>
<div class="menu-wrapper"> <div class="menu-wrapper">
<template v-for="item in routes" v-if="!item.hidden&&item.children"> <!-- 一级菜单过滤掉 hidden 的路由 -->
<!--一级--> <template v-for="item in visibleRoutes">
<router-link v-if="item.children.length===1 && !item.children[0].children" :key="item.children[0].name" :to="item.path+'/'+item.children[0].path"> <!-- 情况1只有一个子菜单且没有孙子菜单 显示为一级菜单项 -->
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}"> <router-link
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"/> v-if="shouldShowAsMenuItem(item)"
<span v-if="item.children[0].meta&&item.children[0].meta.title">{{ translateMenuTitle(item.children[0].meta.title) }}</span> :key="getMenuItemKey(item)"
:to="getMenuItemPath(item)"
>
<el-menu-item :index="getMenuItemPath(item)" :class="{'submenu-title-noDropdown': !isNest}">
<svg-icon v-if="getFirstChild(item).meta && getFirstChild(item).meta.icon" :icon-class="getFirstChild(item).meta.icon" />
<span v-if="getFirstChild(item).meta && getFirstChild(item).meta.title">
{{ translateMenuTitle(getFirstChild(item).meta.title) }}
</span>
</el-menu-item> </el-menu-item>
</router-link> </router-link>
<!--二级-->
<el-submenu v-else :key="item.name" :index="item.name||item.path"> <!-- 情况2有多个子菜单或有孙子菜单 显示为下拉菜单 -->
<el-submenu v-else :key="item.name || item.path" :index="item.name || item.path">
<template slot="title"> <template slot="title">
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"/> <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon" />
<span v-if="item.meta&&item.meta.title">{{ translateMenuTitle(item.meta.title) }}</span> <span v-if="item.meta && item.meta.title">{{ translateMenuTitle(item.meta.title) }}</span>
</template> </template>
<template v-for="child in item.children" v-if="!child.hidden"> <!-- 二级菜单使用计算属性过滤后的 children -->
<sidebar-item v-if="child.children&&child.children.length>0" :key="child.path" :routes="[child]" :is-nest="true" class="nest-menu"/> <template v-for="child in visibleChildren(item)">
<router-link v-else :key="child.name" :to="item.path+child.path"> <!-- 有子菜单 递归 -->
<el-menu-item :index="item.path+'/'+child.path"> <sidebar-item
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"/> v-if="child.children && child.children.length > 0"
<span v-if="child.meta&&child.meta.title">{{ translateMenuTitle(child.meta.title) }}</span> :key="child.path"
{{ item.path+'/'+child.path }} :routes="[child]"
:is-nest="true"
class="nest-menu"
/>
<!-- 无子菜单 直接显示 -->
<router-link v-else :key="child.name" :to="getChildPath(item, child)">
<el-menu-item :index="getChildPath(item, child)">
<svg-icon v-if="child.meta && child.meta.icon" :icon-class="child.meta.icon" />
<span v-if="child.meta && child.meta.title">{{ translateMenuTitle(child.meta.title) }}</span>
</el-menu-item> </el-menu-item>
</router-link> </router-link>
</template> </template>
</el-submenu> </el-submenu>
</template> </template>
</div> </div>
</template> </template>
<script> <script>
import { translateMenuTitle } from '@/utils/i18n' import { translateMenuTitle } from '@/utils/i18n'
@@ -46,8 +60,59 @@ export default {
default: false default: false
} }
}, },
computed: {
// ✅ 过滤掉 hidden 的路由,同时过滤掉没有 children 的路由
visibleRoutes() {
return this.routes.filter(route => {
return !route.hidden && route.children && route.children.length > 0
})
}
},
methods: { methods: {
translateMenuTitle translateMenuTitle,
// ✅ 获取第一个子菜单
getFirstChild(item) {
return item.children[0]
},
// ✅ 判断是否应该显示为单菜单项(没有孙子菜单,且只有一个子菜单)
shouldShowAsMenuItem(item) {
const firstChild = this.getFirstChild(item)
return item.children.length === 1 && (!firstChild.children || firstChild.children.length === 0)
},
// ✅ 获取菜单项的 key
getMenuItemKey(item) {
const firstChild = this.getFirstChild(item)
return firstChild.name
},
// ✅ 获取菜单项的路径(处理斜杠重复问题)
getMenuItemPath(item) {
const firstChild = this.getFirstChild(item)
return this.joinPath(item.path, firstChild.path)
},
// ✅ 获取子菜单路径
getChildPath(parent, child) {
return this.joinPath(parent.path, child.path)
},
// ✅ 智能拼接路径,避免双斜杠
joinPath(parentPath, childPath) {
if (!parentPath) return childPath
if (!childPath) return parentPath
// 去除首尾多余的斜杠后拼接
const cleanParent = parentPath.replace(/\/$/, '')
const cleanChild = childPath.replace(/^\//, '')
return `${cleanParent}/${cleanChild}`
},
// ✅ 过滤当前菜单的可见子菜单(用于二级菜单)
visibleChildren(item) {
if (!item.children) return []
return item.children.filter(child => !child.hidden)
}
} }
} }
</script> </script>

View File

@@ -264,6 +264,7 @@ export default {
font-size: 12px; font-size: 12px;
margin-left: 5px; margin-left: 5px;
margin-top: 4px; margin-top: 4px;
border-radius: 5px;
&:first-of-type { &:first-of-type {
margin-left: 15px; margin-left: 15px;
} }