|
|
@@ -2,28 +2,128 @@ |
|
|
|
filename: index.vue |
|
|
|
author: liubin |
|
|
|
date: 2023-08-04 14:44:58 |
|
|
|
description: |
|
|
|
description: 检测统计数据 |
|
|
|
--> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<h1>Quality Statistics</h1> |
|
|
|
</div> |
|
|
|
<div class="app-container"> |
|
|
|
<!-- 搜索工作栏 --> |
|
|
|
<SearchBar |
|
|
|
:formConfigs="searchBarFormConfig" |
|
|
|
ref="search-bar" |
|
|
|
@headBtnClick="handleSearchBarBtnClick" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
name: "QualityStatistics", |
|
|
|
components: {}, |
|
|
|
props: {}, |
|
|
|
data() { |
|
|
|
return {} |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
methods: {}, |
|
|
|
} |
|
|
|
name: 'QualityStatistics', |
|
|
|
components: {}, |
|
|
|
props: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
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', |
|
|
|
rangeSeparator: '-', |
|
|
|
startPlaceholder: '开始日期', |
|
|
|
endPlaceholder: '结束日期', |
|
|
|
defaultTime: ['00:00:00', '23:59:59'], |
|
|
|
param: 'checkTime', |
|
|
|
}, |
|
|
|
{ |
|
|
|
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', |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
methods: { |
|
|
|
handleSearchBarBtnClick(btn) { |
|
|
|
switch (btn.btnName) { |
|
|
|
case 'search': |
|
|
|
this.queryParams[key] = btn[key] || null; |
|
|
|
// this.handleQuery(); |
|
|
|
break; |
|
|
|
case 'summary': |
|
|
|
alert('数据总览') |
|
|
|
break; |
|
|
|
case 'tableVersion': |
|
|
|
alert('表格版') |
|
|
|
break; |
|
|
|
case 'graphVersion': |
|
|
|
alert('图形版') |
|
|
|
break; |
|
|
|
case 'reset': |
|
|
|
this.$refs['search-bar'].resetForm(); |
|
|
|
// this.resetQuery(); |
|
|
|
break; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</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); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |