630 lines
13 KiB
Vue
630 lines
13 KiB
Vue
<!--
|
|
filename: index.vue
|
|
author: liubin
|
|
date: 2023-08-04 14:44:58
|
|
description: 检测统计数据
|
|
-->
|
|
|
|
<template>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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
|
|
dialogTitle="数据总览"
|
|
:dialogVisible="summaryOpen"
|
|
width="50%"
|
|
@close="handleSummaryClose"
|
|
@cancel="handleSummaryClose"
|
|
@confirm="handleSummaryClose">
|
|
<summaryTable :list="summaryList" />
|
|
</base-dialog> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import GraphPage from './graphPage.vue';
|
|
import summaryTable from './components/summaryTable.vue';
|
|
|
|
class DateGetter {
|
|
constructor() {
|
|
this.today = new Date();
|
|
this.y = this.today.getFullYear();
|
|
this.m = this.today.getMonth();
|
|
this.d = this.today.getDate();
|
|
}
|
|
getWeekRange() {
|
|
const weekStart = new Date(this.y, this.m, this.d - this.today.getDay());
|
|
const weekEnd = new Date(
|
|
this.y,
|
|
this.m,
|
|
this.d + (6 - this.today.getDay()),
|
|
23,
|
|
59,
|
|
59
|
|
);
|
|
// console.log('week', [weekStart, weekEnd]);
|
|
return [weekStart, weekEnd];
|
|
}
|
|
|
|
getMonthRange() {
|
|
const monthStart = new Date(this.y, this.m, 1);
|
|
const monthEnd = new Date(this.y, this.m + 1, 0, 23, 59, 59);
|
|
// console.log('month', [monthStart, monthEnd]);
|
|
return [monthStart, monthEnd];
|
|
}
|
|
|
|
getQuarterRange() {
|
|
const quarterStart = new Date(this.y, this.m - (this.m % 3), 1);
|
|
const quarterEnd = new Date(
|
|
this.y,
|
|
this.m - (this.m % 3) + 3,
|
|
0,
|
|
23,
|
|
59,
|
|
59
|
|
);
|
|
// console.log('quarter', [quarterStart, quarterEnd]);
|
|
return [quarterStart, quarterEnd];
|
|
}
|
|
}
|
|
|
|
export default {
|
|
name: 'QualityStatistics',
|
|
components: { GraphPage, summaryTable },
|
|
props: {},
|
|
data() {
|
|
const dateGetter = new DateGetter();
|
|
return {
|
|
// mode: 'table', // defaults to 'table'
|
|
activeName: 'table', // defaults to 'table'
|
|
searchBarFormConfig: [
|
|
{
|
|
type: 'datePicker',
|
|
label: '时间段',
|
|
dateType: 'daterange', // datetimerange
|
|
// format: 'yyyy-MM-dd HH:mm:ss',
|
|
format: 'yyyy-MM-dd',
|
|
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
|
valueFormat: 'timestamp',
|
|
rangeSeparator: '-',
|
|
startPlaceholder: '开始日期',
|
|
endPlaceholder: '结束日期',
|
|
defaultSelect: [],
|
|
defaultTime: ['00:00:00', '23:59:59'],
|
|
param: 'timerange',
|
|
pickerOptions: {
|
|
shortcuts: [
|
|
{
|
|
text: '本周',
|
|
onClick(picker) {
|
|
picker.$emit('pick', dateGetter.getWeekRange());
|
|
},
|
|
},
|
|
{
|
|
text: '本月',
|
|
onClick(picker) {
|
|
picker.$emit('pick', dateGetter.getMonthRange());
|
|
},
|
|
},
|
|
{
|
|
text: '本季',
|
|
onClick(picker) {
|
|
picker.$emit('pick', dateGetter.getQuarterRange());
|
|
},
|
|
},
|
|
],
|
|
},
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
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',
|
|
// },
|
|
],
|
|
// 动态的 props
|
|
dynamicProps: [],
|
|
// 查询参数
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
param: null,
|
|
},
|
|
summaryList: [],
|
|
summaryOpen: false,
|
|
list: [
|
|
/** mock data */
|
|
// {
|
|
// content: 'asdfasdf',
|
|
// line1: '',
|
|
// line2: '',
|
|
// line3: '',
|
|
// line4: '',
|
|
// line5: '',
|
|
// line6: '',
|
|
// line7: '',
|
|
// line8: '',
|
|
// line9: '',
|
|
// line10: '',
|
|
// typeTotal: 100,
|
|
// ratio: '93%',
|
|
// },
|
|
// {
|
|
// content: 'fdasfs',
|
|
// line1: '',
|
|
// line2: '',
|
|
// line3: '',
|
|
// line4: '',
|
|
// line5: '',
|
|
// line6: '',
|
|
// line7: '',
|
|
// line8: '',
|
|
// line9: '',
|
|
// line10: '',
|
|
// typeTotal: 100,
|
|
// ratio: '93%',
|
|
// },
|
|
// {
|
|
// content: 'asdfdfffffff',
|
|
// line1: '',
|
|
// line2: '',
|
|
// line3: '',
|
|
// line4: '',
|
|
// line5: '',
|
|
// line6: '',
|
|
// line7: '',
|
|
// line8: '',
|
|
// line9: '',
|
|
// line10: '',
|
|
// typeTotal: 100,
|
|
// ratio: '93%',
|
|
// },
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
mode() {
|
|
return this.activeName;
|
|
},
|
|
tableProps() {
|
|
return [
|
|
{
|
|
// width: 160,
|
|
prop: 'inspectionContent',
|
|
label: '检测内容',
|
|
},
|
|
...this.dynamicProps,
|
|
{
|
|
// width: 128,
|
|
prop: 'sumInput',
|
|
label: '检测类型总数',
|
|
},
|
|
{
|
|
// width: 128,
|
|
prop: 'ratio',
|
|
label: '比例',
|
|
// subcomponent: {
|
|
// name: 'TextOnly',
|
|
// props: {
|
|
// injectData: {
|
|
// type: Object,
|
|
// default: () => ({}),
|
|
// },
|
|
// },
|
|
// data() {
|
|
// return {
|
|
// text: '比例',
|
|
// };
|
|
// },
|
|
// methods: {
|
|
// handleEmit(payload) {
|
|
// console.log('handleEmit', payload);
|
|
// },
|
|
// },
|
|
// render(h) {
|
|
// return h('el-button', { props: { type: 'text' } }, this.text);
|
|
// },
|
|
// },
|
|
},
|
|
];
|
|
},
|
|
},
|
|
mounted() {
|
|
if (this.$route.params.startTime && this.$route.params.endTime) {
|
|
this.searchBarFormConfig[0].defaultSelect = [
|
|
this.$route.params.startTime,
|
|
this.$route.params.endTime,
|
|
];
|
|
this.queryParams.param = {};
|
|
this.$set(
|
|
this.queryParams.param,
|
|
'startTime',
|
|
this.$route.params.startTime
|
|
);
|
|
this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime);
|
|
} else {
|
|
this.searchBarFormConfig[0].defaultSelect = [];
|
|
}
|
|
this.getList();
|
|
},
|
|
watch: {
|
|
$route: 'initData',
|
|
},
|
|
methods: {
|
|
initData(to) {
|
|
// console.log(to)
|
|
if (to.name === 'QualityStatistics') {
|
|
if (this.$route.params.startTime && this.$route.params.endTime) {
|
|
this.searchBarFormConfig[0].defaultSelect = [
|
|
this.$route.params.startTime,
|
|
this.$route.params.endTime,
|
|
];
|
|
this.queryParams.param = {};
|
|
this.$set(
|
|
this.queryParams.param,
|
|
'startTime',
|
|
this.$route.params.startTime
|
|
);
|
|
this.$set(
|
|
this.queryParams.param,
|
|
'endTime',
|
|
this.$route.params.endTime
|
|
);
|
|
} else {
|
|
this.searchBarFormConfig[0].defaultSelect = [];
|
|
}
|
|
this.getList();
|
|
}
|
|
},
|
|
getList() {
|
|
this.getSummaryList();
|
|
this.getDetailedList();
|
|
},
|
|
/** 获取 检测总数 列表 */
|
|
async getSummaryList() {
|
|
const response = await this.$axios({
|
|
url: '/monitoring/statistical-data/getUpPart',
|
|
method: 'post',
|
|
data: this.queryParams.param
|
|
? {
|
|
// startTime: new Date(2022, 6, 1, 0, 0, 0).getTime(), // '2023-07-01 00:00:00',
|
|
// endTime: new Date(2023, 7, 10, 0, 0, 0).getTime(), // '2023-08-10 00:00:00',
|
|
startTime: this.queryParams.param.startTime,
|
|
endTime: this.queryParams.param.endTime,
|
|
}
|
|
: {},
|
|
});
|
|
this.summaryList = response.data;
|
|
},
|
|
/** 获取 检测内容和产线关联 列表 */
|
|
async getDetailedList() {
|
|
const {
|
|
data: { data, otherList, otherMap, nameData },
|
|
} = await this.$axios({
|
|
url: '/monitoring/statistical-data/getDownPart',
|
|
method: 'post',
|
|
data: this.queryParams.param
|
|
? {
|
|
// startTime: new Date(2023, 6, 1).getTime(), // '2023-07-01 00:00:00',
|
|
// endTime: new Date(2023, 7, 22).getTime(), // '2023-08-10 00:00:00',
|
|
startTime: this.queryParams.param.startTime,
|
|
endTime: this.queryParams.param.endTime,
|
|
}
|
|
: {},
|
|
});
|
|
// this.list = response.data;
|
|
// console.log('data', data);
|
|
// console.log('otherList', otherList);
|
|
// console.log('otherMap', otherMap);
|
|
// console.log('nameData', nameData);
|
|
|
|
this.dynamicProps = this.filterNameData(nameData);
|
|
this.list = this.filterData(data);
|
|
},
|
|
filterNameData(nameData) {
|
|
const ndSet = new Set();
|
|
nameData.forEach((nd) => {
|
|
ndSet.add(nd.name);
|
|
});
|
|
return Array.from(ndSet.values())
|
|
.sort()
|
|
.map((name) => ({
|
|
prop: name,
|
|
label: name,
|
|
}));
|
|
},
|
|
filterData(data) {
|
|
return data.map((item) => {
|
|
const { data: innerData } = item;
|
|
const keyValuePairs = {};
|
|
innerData.map((d) => {
|
|
keyValuePairs[d.dynamicName] = d.dynamicValue;
|
|
});
|
|
return {
|
|
inspectionContent: item.inspectionContent,
|
|
...keyValuePairs,
|
|
sumInput: item.sumInput,
|
|
};
|
|
});
|
|
},
|
|
handleTabClick(tab, event) {
|
|
const { name } = tab;
|
|
if (name == 'graph') {
|
|
// 展示柱状图
|
|
} else {
|
|
// 展示表格
|
|
}
|
|
},
|
|
/** 总览关闭 */
|
|
handleSummaryClose() {
|
|
this.summaryOpen = false;
|
|
},
|
|
/** 搜索按钮 */
|
|
handleSearchBarBtnClick(btn) {
|
|
console.log('bnt, ', btn);
|
|
switch (btn.btnName) {
|
|
case 'search':
|
|
if (btn.timerange && typeof btn.timerange === 'object') {
|
|
this.queryParams.param = {};
|
|
this.$set(this.queryParams.param, 'startTime', btn.timerange[0]);
|
|
this.$set(this.queryParams.param, 'endTime', btn.timerange[1]);
|
|
}
|
|
this.handleQuery();
|
|
break;
|
|
case 'summary':
|
|
this.summaryOpen = true;
|
|
break;
|
|
case 'tableVersion':
|
|
this.mode = 'table';
|
|
break;
|
|
case 'graphVersion':
|
|
this.mode = 'graph';
|
|
break;
|
|
case 'reset':
|
|
this.$refs['search-bar'].resetForm();
|
|
// this.resetQuery();
|
|
break;
|
|
}
|
|
},
|
|
handleQuery() {
|
|
this.getSummaryList();
|
|
this.getDetailedList();
|
|
},
|
|
/** 处理表格事件 */
|
|
handleEmitFun() {},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.searchBar) {
|
|
.el-button.btn-table {
|
|
color: rgb(0, 130, 130);
|
|
border: 1px solid rgb(0, 130, 130);
|
|
padding: 8px 10px;
|
|
border: 1px solid rgb(0, 130, 130);
|
|
padding: 8px 10px;
|
|
|
|
&:hover {
|
|
border-color: #fff;
|
|
color: #fff;
|
|
background: rgb(0, 130, 130);
|
|
}
|
|
}
|
|
.el-button.btn-graph {
|
|
color: rgb(130, 0, 130);
|
|
border: 1px solid rgb(130, 0, 130);
|
|
padding: 8px 10px;
|
|
|
|
&:hover {
|
|
border-color: #fff;
|
|
color: #fff;
|
|
background: rgb(130, 0, 130);
|
|
}
|
|
}
|
|
}
|
|
|
|
.fade-down-enter-active,
|
|
.fade-down-leave-active {
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.fade-down-enter,
|
|
.fade-down-leave-to {
|
|
transform: translateY(20%);
|
|
opacity: 0;
|
|
}
|
|
|
|
.fade-down-enter-to,
|
|
.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>
|
|
|
|
<!--
|
|
// {
|
|
// width: 128,
|
|
// prop: 'line1',
|
|
// label: '产线1',
|
|
// ,
|
|
// },
|
|
// {
|
|
// width: 128,
|
|
// prop: 'line2',
|
|
// label: '产线2',
|
|
// ,
|
|
// },
|
|
// {
|
|
// width: 128,
|
|
// prop: 'line3',
|
|
// label: '产线3',
|
|
// ,
|
|
// },
|
|
// {
|
|
// width: 128,
|
|
// prop: 'line4',
|
|
// label: '产线4',
|
|
// ,
|
|
// },
|
|
// {
|
|
// width: 128,
|
|
// prop: 'line5',
|
|
// label: '产线5',
|
|
// ,
|
|
// },
|
|
// {
|
|
// width: 128,
|
|
// prop: 'line6',
|
|
// label: '产线6',
|
|
// ,
|
|
// },
|
|
// {
|
|
// width: 128,
|
|
// prop: 'line7',
|
|
// label: '产线7',
|
|
// ,
|
|
// },
|
|
// {
|
|
// width: 128,
|
|
// prop: 'line8',
|
|
// label: '产线8',
|
|
// ,
|
|
// }, -->
|