mt-fe-group/yudao-dev
12
0
Förgrening 0
Kod Ärenden Pull-förfrågningar Släpp Wiki Aktiviteter

update 质量检测统计数据

Bläddra i källkod
This commit is contained in:
lb 2023-09-20 09:50:38 +08:00
förälder e0cc022e34
incheckning 24a0857808
2 ändrade filer med 152 tillägg och 53 borttagningar
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/quality/monitoring/qualityStatistics/components/summaryTable.vue
Visa fil

@ -7,9 +7,9 @@
<template>
<!-- 列表 -->
<!-- height="35vh" -->
<base-table
:table-props="tableProps"
height="35vh"
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-data="list"></base-table>

203
src/views/quality/monitoring/qualityStatistics/index.vue
Visa fil

@ -6,33 +6,84 @@
-->
<template>
<div class="app-container">
<!-- 搜索工作栏 -->
<SearchBar
:formConfigs="searchBarFormConfig"
ref="search-bar"
@headBtnClick="handleSearchBarBtnClick" />
<div class="quality-container" style="background: #f2f4f9; flex: 1">
<el-row
class=""
style="
margin-bottom: 12px;
background: #fff;
padding: 16px 16px 0;
border-radius: 8px;
">
<!-- 搜索工作栏 -->
<SearchBar
:formConfigs="searchBarFormConfig"
ref="search-bar"
@headBtnClick="handleSearchBarBtnClick" />
</el-row>
<transition mode="out-in" name="fade-down">
<template v-if="mode == 'table'">
<!-- 列表 -->
<base-table
v-if="mode == 'table'"
:table-props="tableProps"
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-data="list"
@emitFun="handleEmitFun"></base-table>
</template>
<el-row
class=""
style="
margin-top: 0;
margin-bottom: 12px;
background: #fff;
padding: 12px 16px 16px;
border-radius: 8px;
">
<div class="blue-title">产线检测总览</div>
<summaryTable :list="summaryList" />
</el-row>
<GraphPage
v-else
:summary-list="summaryList"
:line-data="{ list: list, xProps: dynamicProps.map((v) => v.prop) }" />
</transition>
<el-row
class=""
style="
margin-top: 0;
margin-bottom: 12px;
background: #fff;
padding: 12px 16px 16px;
border-radius: 8px;
">
<el-row style="display: flex; align-items: center">
<div class="blue-title">产线检测详细</div>
<div class="custom-tabs">
<el-tabs
v-model="activeName"
:stretch="true"
@tab-click="handleTabClick">
<el-tab-pane
:label="'\u2002数据列表\u2002'"
name="table"></el-tab-pane>
<el-tab-pane
:label="'\u3000柱状图\u3000'"
name="graph"></el-tab-pane>
</el-tabs>
</div>
</el-row>
<transition mode="out-in" name="fade-down">
<template v-if="mode == 'table'">
<base-table
v-if="mode == 'table'"
:table-props="tableProps"
:page="queryParams.pageNo"
:limit="queryParams.pageSize"
:table-data="list"
@emitFun="handleEmitFun"></base-table>
</template>
<GraphPage
v-else
:summary-list="summaryList"
:line-data="{
list: list,
xProps: dynamicProps.map((v) => v.prop),
}" />
</transition>
</el-row>
<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->
<base-dialog
<!-- <base-dialog
dialogTitle="数据总览"
:dialogVisible="summaryOpen"
width="50%"
@ -40,7 +91,7 @@
@cancel="handleSummaryClose"
@confirm="handleSummaryClose">
<summaryTable :list="summaryList" />
</base-dialog>
</base-dialog> -->
</div>
</template>
@ -54,7 +105,8 @@ export default {
props: {},
data() {
return {
mode: 'table', // defaults to 'table'
// mode: 'table', // defaults to 'table'
activeName: 'table', // defaults to 'table'
searchBarFormConfig: [
{
type: 'datePicker',
@ -76,33 +128,33 @@ export default {
name: 'search',
color: 'primary',
},
{
type: 'separate',
},
{
type: 'button',
btnName: '数据总览',
name: 'summary',
color: 'text',
},
{
type: 'separate',
},
{
type: 'button',
btnName: '表格版',
name: 'tableVersion',
color: 'text btn-table',
},
{
type: 'separate',
},
{
type: 'button',
btnName: '图形版',
name: 'graphVersion',
color: 'text btn-graph',
},
// {
// type: 'separate',
// },
// {
// type: 'button',
// btnName: '数据总览',
// name: 'summary',
// color: 'text',
// },
// {
// type: 'separate',
// },
// {
// type: 'button',
// btnName: '表格版',
// name: 'tableVersion',
// color: 'text btn-table',
// },
// {
// type: 'separate',
// },
// {
// type: 'button',
// btnName: '图形版',
// name: 'graphVersion',
// color: 'text btn-graph',
// },
],
// 动态的 props
dynamicProps: [],
@ -165,6 +217,9 @@ export default {
};
},
computed: {
mode() {
return this.activeName;
},
tableProps() {
return [
{
@ -287,6 +342,14 @@ export default {
};
});
},
handleTabClick(tab, event) {
const { name } = tab;
if (name == 'graph') {
// 展示柱状图
} else {
// 展示表格
}
},
/** 总览关闭 */
handleSummaryClose() {
this.summaryOpen = false;
@ -371,6 +434,42 @@ export default {
.fade-down-leave {
transform: translateY(0);
}
.blue-title {
position: relative;
padding: 4px 0;
padding-left: 12px;
font-size: 14px;
color: #606266;
font-weight: 700;
margin-bottom: 12px;
&::before {
content: '';
position: absolute;
left: 0;
top: 6px;
height: 16px;
width: 4px;
border-radius: 1px;
background: #0b58ff;
}
}
:deep(.custom-tabs) {
.el-tabs__header {
margin-left: 12px;
margin-bottom: 8px;
display: inline-block;
transform: translateY(-6px);
}
.el-tabs__item {
padding-left: 0 !important;
padding-right: 0 !important;
height: 36px;
}
}
</style>
<!--