Compare commits
5 Commits
33ff942fc6
...
8fd1504dc0
| Author | SHA1 | Date | |
|---|---|---|---|
| 8fd1504dc0 | |||
| 1c7e908d2e | |||
| 291197a28d | |||
| c7c89e2243 | |||
| 14a626b766 |
29
src/views/quality/monitoring/qualityRecentHours/index.vue
Normal file
29
src/views/quality/monitoring/qualityRecentHours/index.vue
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-04 14:44:58
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<h1>Recent 24 hours</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "QualityRecentHours",
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<!--
|
||||||
|
filename: detailGraph.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-04 16:36:21
|
||||||
|
description: 图表
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="detail-graph">
|
||||||
|
detail graph (echarts)
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "DetailGraph",
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
configs: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
<!--
|
||||||
|
filename: summaryDialog.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-04 16:25:49
|
||||||
|
description:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"></base-table>
|
||||||
|
<!-- @emit-fun="handleEmitFun"> -->
|
||||||
|
<!-- <method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
fixed="right"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" /> -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'SummaryTable',
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
prop: 'pl',
|
||||||
|
label: '产线',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'upTotal',
|
||||||
|
label: '上片总数',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'downTotal',
|
||||||
|
label: '下片总数',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'total',
|
||||||
|
label: '检测总数',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'ratio',
|
||||||
|
label: '比例(%)',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
372
src/views/quality/monitoring/qualityStatistics/index.vue
Normal file
372
src/views/quality/monitoring/qualityStatistics/index.vue
Normal file
@ -0,0 +1,372 @@
|
|||||||
|
<!--
|
||||||
|
filename: index.vue
|
||||||
|
author: liubin
|
||||||
|
date: 2023-08-04 14:44:58
|
||||||
|
description: 检测统计数据
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<SearchBar
|
||||||
|
:formConfigs="searchBarFormConfig"
|
||||||
|
ref="search-bar"
|
||||||
|
@headBtnClick="handleSearchBarBtnClick" />
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<base-table
|
||||||
|
v-if="mode == 'table'"
|
||||||
|
:table-props="tableProps"
|
||||||
|
:page="queryParams.pageNo"
|
||||||
|
:limit="queryParams.pageSize"
|
||||||
|
:table-data="list"
|
||||||
|
@emit-fun="handleEmitFun">
|
||||||
|
<!-- <method-btn
|
||||||
|
v-if="tableBtn.length"
|
||||||
|
slot="handleBtn"
|
||||||
|
label="操作"
|
||||||
|
fixed="right"
|
||||||
|
:method-list="tableBtn"
|
||||||
|
@clickBtn="handleTableBtnClick" /> -->
|
||||||
|
</base-table>
|
||||||
|
|
||||||
|
<p v-if="mode == 'graph'">图形版</p>
|
||||||
|
|
||||||
|
<!-- todo: 数据总览，用弹窗包裹的 table 实现 -->
|
||||||
|
<base-dialog
|
||||||
|
dialogTitle="数据总览"
|
||||||
|
:dialogVisible="summaryOpen"
|
||||||
|
width="50%"
|
||||||
|
@close="handleSummaryClose"
|
||||||
|
@cancel="handleSummaryClose"
|
||||||
|
@confirm="handleSummaryClose">
|
||||||
|
<summaryTable :list="summaryList" />
|
||||||
|
</base-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import summaryTable from './components/summaryTable.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'QualityStatistics',
|
||||||
|
components: { summaryTable },
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
mode: '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',
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableProps: [
|
||||||
|
{
|
||||||
|
width: 160,
|
||||||
|
prop: 'content',
|
||||||
|
label: '检测内容',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'line1',
|
||||||
|
label: '产线1',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'line2',
|
||||||
|
label: '产线2',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'line3',
|
||||||
|
label: '产线3',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'line4',
|
||||||
|
label: '产线4',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'line5',
|
||||||
|
label: '产线5',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'line6',
|
||||||
|
label: '产线6',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'line7',
|
||||||
|
label: '产线7',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'line8',
|
||||||
|
label: '产线8',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'typeTotal',
|
||||||
|
label: '检测类型总数',
|
||||||
|
align: 'center',
|
||||||
|
// 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);
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: 128,
|
||||||
|
prop: 'ratio',
|
||||||
|
label: '比例',
|
||||||
|
align: 'center',
|
||||||
|
// 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);
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
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: {},
|
||||||
|
mounted() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
this.getSummaryList();
|
||||||
|
this.getDetailedList();
|
||||||
|
},
|
||||||
|
/** 获取 检测总数 列表 */
|
||||||
|
async getSummaryList() {
|
||||||
|
const response = await this.$axios(
|
||||||
|
'/monitoring/statistical-data/getUpPart',
|
||||||
|
{
|
||||||
|
params: {
|
||||||
|
startTime: '2023-07-01 00:00:00',
|
||||||
|
endTime: '2023-08-10 00:00:00',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
this.summaryList = response.data;
|
||||||
|
},
|
||||||
|
/** 获取 检测内容和产线关联 列表 */
|
||||||
|
async getDetailedList() {
|
||||||
|
const {
|
||||||
|
data: { data, otherList, otherMap, nameData },
|
||||||
|
} = await this.$axios('/monitoring/statistical-data/getDownPart', {
|
||||||
|
params: {
|
||||||
|
startTime: '2023-07-01 00:00:00',
|
||||||
|
endTime: '2023-08-10 00:00:00',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// this.list = response.data;
|
||||||
|
console.log("data", data);
|
||||||
|
console.log("otherList", otherList);
|
||||||
|
console.log("otherMap", otherMap);
|
||||||
|
console.log("nameData", nameData);
|
||||||
|
},
|
||||||
|
/** 总览关闭 */
|
||||||
|
handleSummaryClose() {
|
||||||
|
this.summaryOpen = false;
|
||||||
|
},
|
||||||
|
/** 搜索按钮 */
|
||||||
|
handleSearchBarBtnClick(btn) {
|
||||||
|
switch (btn.btnName) {
|
||||||
|
case 'search':
|
||||||
|
this.queryParams[key] = btn[key] || null;
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 处理表格事件 */
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user