update 质量检测统计数据
This commit is contained in:
parent
e0cc022e34
commit
24a0857808
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
<!--
|
||||
|
||||
Loading…
Reference in New Issue
Block a user