update 质量检测统计数据
This commit is contained in:
parent
e0cc022e34
commit
24a0857808
@ -7,9 +7,9 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<!-- 列表 -->
|
<!-- 列表 -->
|
||||||
|
<!-- height="35vh" -->
|
||||||
<base-table
|
<base-table
|
||||||
:table-props="tableProps"
|
:table-props="tableProps"
|
||||||
height="35vh"
|
|
||||||
:page="queryParams.pageNo"
|
:page="queryParams.pageNo"
|
||||||
:limit="queryParams.pageSize"
|
:limit="queryParams.pageSize"
|
||||||
:table-data="list"></base-table>
|
:table-data="list"></base-table>
|
||||||
|
|||||||
@ -6,33 +6,84 @@
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="quality-container" style="background: #f2f4f9; flex: 1">
|
||||||
<!-- 搜索工作栏 -->
|
<el-row
|
||||||
<SearchBar
|
class=""
|
||||||
:formConfigs="searchBarFormConfig"
|
style="
|
||||||
ref="search-bar"
|
margin-bottom: 12px;
|
||||||
@headBtnClick="handleSearchBarBtnClick" />
|
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">
|
<el-row
|
||||||
<template v-if="mode == 'table'">
|
class=""
|
||||||
<!-- 列表 -->
|
style="
|
||||||
<base-table
|
margin-top: 0;
|
||||||
v-if="mode == 'table'"
|
margin-bottom: 12px;
|
||||||
:table-props="tableProps"
|
background: #fff;
|
||||||
:page="queryParams.pageNo"
|
padding: 12px 16px 16px;
|
||||||
:limit="queryParams.pageSize"
|
border-radius: 8px;
|
||||||
:table-data="list"
|
">
|
||||||
@emitFun="handleEmitFun"></base-table>
|
<div class="blue-title">产线检测总览</div>
|
||||||
</template>
|
<summaryTable :list="summaryList" />
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<GraphPage
|
<el-row
|
||||||
v-else
|
class=""
|
||||||
:summary-list="summaryList"
|
style="
|
||||||
:line-data="{ list: list, xProps: dynamicProps.map((v) => v.prop) }" />
|
margin-top: 0;
|
||||||
</transition>
|
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 实现 -->
|
<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->
|
||||||
<base-dialog
|
<!-- <base-dialog
|
||||||
dialogTitle="数据总览"
|
dialogTitle="数据总览"
|
||||||
:dialogVisible="summaryOpen"
|
:dialogVisible="summaryOpen"
|
||||||
width="50%"
|
width="50%"
|
||||||
@ -40,7 +91,7 @@
|
|||||||
@cancel="handleSummaryClose"
|
@cancel="handleSummaryClose"
|
||||||
@confirm="handleSummaryClose">
|
@confirm="handleSummaryClose">
|
||||||
<summaryTable :list="summaryList" />
|
<summaryTable :list="summaryList" />
|
||||||
</base-dialog>
|
</base-dialog> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -54,7 +105,8 @@ export default {
|
|||||||
props: {},
|
props: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
mode: 'table', // defaults to 'table'
|
// mode: 'table', // defaults to 'table'
|
||||||
|
activeName: 'table', // defaults to 'table'
|
||||||
searchBarFormConfig: [
|
searchBarFormConfig: [
|
||||||
{
|
{
|
||||||
type: 'datePicker',
|
type: 'datePicker',
|
||||||
@ -76,33 +128,33 @@ export default {
|
|||||||
name: 'search',
|
name: 'search',
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
type: 'separate',
|
// type: 'separate',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
type: 'button',
|
// type: 'button',
|
||||||
btnName: '数据总览',
|
// btnName: '数据总览',
|
||||||
name: 'summary',
|
// name: 'summary',
|
||||||
color: 'text',
|
// color: 'text',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
type: 'separate',
|
// type: 'separate',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
type: 'button',
|
// type: 'button',
|
||||||
btnName: '表格版',
|
// btnName: '表格版',
|
||||||
name: 'tableVersion',
|
// name: 'tableVersion',
|
||||||
color: 'text btn-table',
|
// color: 'text btn-table',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
type: 'separate',
|
// type: 'separate',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
type: 'button',
|
// type: 'button',
|
||||||
btnName: '图形版',
|
// btnName: '图形版',
|
||||||
name: 'graphVersion',
|
// name: 'graphVersion',
|
||||||
color: 'text btn-graph',
|
// color: 'text btn-graph',
|
||||||
},
|
// },
|
||||||
],
|
],
|
||||||
// 动态的 props
|
// 动态的 props
|
||||||
dynamicProps: [],
|
dynamicProps: [],
|
||||||
@ -165,6 +217,9 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
mode() {
|
||||||
|
return this.activeName;
|
||||||
|
},
|
||||||
tableProps() {
|
tableProps() {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
@ -287,6 +342,14 @@ export default {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
handleTabClick(tab, event) {
|
||||||
|
const { name } = tab;
|
||||||
|
if (name == 'graph') {
|
||||||
|
// 展示柱状图
|
||||||
|
} else {
|
||||||
|
// 展示表格
|
||||||
|
}
|
||||||
|
},
|
||||||
/** 总览关闭 */
|
/** 总览关闭 */
|
||||||
handleSummaryClose() {
|
handleSummaryClose() {
|
||||||
this.summaryOpen = false;
|
this.summaryOpen = false;
|
||||||
@ -371,6 +434,42 @@ export default {
|
|||||||
.fade-down-leave {
|
.fade-down-leave {
|
||||||
transform: translateY(0);
|
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>
|
</style>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user