test #47

Merged
gtz217 merged 273 commits from test into master 2023-10-17 08:53:54 +08:00
9 changed files with 534 additions and 263 deletions
Showing only changes of commit 97f9b52e87 - Show all commits

View File

@ -1,8 +1,8 @@
### ###
# @Author: Do not edit # @Author: Do not edit
# @Date: 2023-08-29 09:40:39 # @Date: 2023-08-29 09:40:39
# @LastEditTime: 2023-09-11 15:55:29 # @LastEditTime: 2023-09-12 14:01:15
# @LastEditors: DY # @LastEditors: zhp
# @Description: # @Description:
### ###
# 开发环境配置 # 开发环境配置
@ -12,7 +12,7 @@ ENV = 'development'
VUE_APP_TITLE = 芋道管理系统 VUE_APP_TITLE = 芋道管理系统
# 芋道管理系统/开发环境 # 芋道管理系统/开发环境
VUE_APP_BASE_API = 'http://192.168.1.49:48080' VUE_APP_BASE_API = 'http://192.168.1.188:48080'
# VUE_APP_BASE_API = 'http://192.168.1.8:48080' # VUE_APP_BASE_API = 'http://192.168.1.8:48080'
# VUE_APP_BASE_API = 'http://192.168.0.33:48080' # VUE_APP_BASE_API = 'http://192.168.0.33:48080'
# VUE_APP_BASE_API = 'http://192.168.1.188:48080' # VUE_APP_BASE_API = 'http://192.168.1.188:48080'

View File

@ -0,0 +1,24 @@
/*
* @Author: zhp
* @Date: 2023-09-12 14:07:04
* @LastEditTime: 2023-09-13 09:53:45
* @LastEditors: zhp
* @Description:
*/
import request from '@/utils/request'
export function getYieldAnalysisPageData(data) {
return request({
url: '/analysis/production-analysis/getOutput',
method: 'post',
data: data
})
}
export function getCT(data) {
return request({
url: '/analysis/production-analysis/getCT',
method: 'post',
data: data
})
}

View File

@ -0,0 +1,16 @@
/*
* @Author: zhp
* @Date: 2023-09-12 14:07:04
* @LastEditTime: 2023-09-13 09:46:44
* @LastEditors: zhp
* @Description:
*/
import request from '@/utils/request'
export function getSectionDataSearch(data) {
return request({
url: '/monitoring/production-monitor/getSectionDataSearch',
method: 'post',
data: data
})
}

View File

@ -1,6 +1,13 @@
/*
* @Author: zhp
* @Date: 2023-09-11 16:18:44
* @LastEditTime: 2023-09-12 14:25:01
* @LastEditors: zhp
* @Description:
*/
import Mock from 'mockjs'; import Mock from 'mockjs';
const baseURL = 'http://192.168.1.49:48080/admin-api'; const baseURL = 'http://192.168.1.188:48080/admin-api';
Mock.setup({ Mock.setup({
timeout: 200, timeout: 200,

View File

@ -0,0 +1,93 @@
<!--
* @Author: zhp
* @Date: 2023-09-13 09:02:25
* @LastEditTime: 2023-09-13 10:33:20
* @LastEditors: zhp
* @Description:
-->
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
// import resize from './mixins/resize'
export default {
// mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
// autoResize: {
// type: Boolean,
// default: true
// }
},
data() {
return {
chart: null
}
},
// watch: {
// chartData: {
// deep: true,
// handler(val) {
// this.setOptions(val)
// }
// }
// },
mounted() {
// this.$nextTick(() => {
// this.initChart()
// })
},
// beforeDestroy() {
// if (!this.chart) {
// return
// }
// this.chart.dispose()
// this.chart = null
// },
methods: {
initChart(xData, yData,lineName) {
console.log(xData,yData);
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(xData, yData, lineName)
},
setOptions(xData, yData, lineName) {
let seriesData = []
lineName.forEach((item,index) => {
seriesData.push({
name: item,
data: yData[index],
type: 'line',
})
})
this.chart.setOption({
xAxis: {
type: 'category',
data: xData
},
legend: {
data:lineName
},
yAxis: {
type: 'value'
},
series: seriesData
})
}
}
}
</script>

View File

@ -1,159 +1,200 @@
<!--
* @Author: zhp
* @Date: 2023-09-11 14:21:21
* @LastEditTime: 2023-09-11 14:26:04
* @LastEditors: zhp
* @Description:
-->
<template> <template>
<div class="app-container"> <div class="app-container">
<search-bar <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
:formConfigs="formConfig" <base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" />
ref="searchBarForm" <line-chart ref="lineChart" />
@headBtnClick="buttonClick" /> <!-- <pagination
<base-table
v-loading="dataListLoading"
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-data="tableData" />
<pagination
:limit.sync="listQuery.pageSize" :limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo" :page.sync="listQuery.pageNo"
:total="listQuery.total" :total="listQuery.total"
@pagination="getDataList" /> @pagination="getDataList" /> -->
</div> </div>
</template> </template>
<script> <script>
import basicPage from '../../mixins/basic-page'; // import basicPage from '../../mixins/basic-page';
import { parseTime } from '../../mixins/code-filter'; import { parseTime } from '../../mixins/code-filter';
import { getLineBindProductLogPage } from '@/api/core/base/lineBindProductLog'; import { getCT } from '@/api/core/analysis/index';
import { getProductionLinePage } from '@/api/core/base/productionLine'; import { getProductionLinePage } from '@/api/core/base/productionLine';
import { getWorkshopSectionPage } from '@/api/core/base/workshopSection'; import lineChart from '../LineChart'
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
const tableProps = [ // const tableProps = [
{ // // {
prop: 'productionLineName', // // prop: 'lineName',
label: '产线名称', // // label: '线',
align: 'center', // // align: 'center',
}, // // },
{ // // {
prop: '', // // prop: 'sum',
label: '工段名称', // // label: '',
align: 'center', // // align: 'center',
}, // // },
{ // // {
prop: '', // // prop: 'dynamicValue',
label: '进片数量/片', // // label: 'dynamicName',
align: 'center', // // align: 'center',
}, // // children:[
{
prop: '', // // ]
label: '出片数量/片', // // }
align: 'center', // ];
},
{
prop: '',
label: '损耗数量/片',
align: 'center',
},
{
prop: '',
label: '损耗面积/m²',
align: 'center',
},
{
prop: '',
label: '损耗比例/%',
align: 'center',
}
];
export default { export default {
mixins: [basicPage], components: {
data() { lineChart,
return { },
urlOptions: { // mixins: [basicPage],
getDataListURL: getLineBindProductLogPage, data() {
}, return {
tableProps, urlOptions: {
tableData: [], getDataListURL: getCT,
optionArrUrl: [getProductionLinePage, getWorkshopSectionPage], },
formConfig: [ tableProps: [],
{ dataListLoading: false,
type: 'select', tableData: [],
label: '产线', listQuery: {
selectOptions: [], // time: ''
param: 'productionLineId', endTime: undefined,
defaultSelect: '', lineId:undefined,
filterable: true, startTime:undefined
}, },
{ xData: [],
type: 'datePicker', yData: [],
label: '时间', optionArrUrl: [getProductionLinePage],
dateType: 'daterange', formConfig: [
format: 'yyyy-MM-dd', {
valueFormat: 'yyyy-MM-dd HH:mm:ss', type: 'select',
rangeSeparator: '-', label: '产线',
startPlaceholder: '开始时间', selectOptions: [],
endPlaceholder: '结束时间', param: 'lineIds',
param: 'createTime', defaultSelect: '',
}, multiple: true,
{ filterable: true,
type: 'button', },
btnName: '搜索', {
name: 'search', type: 'datePicker',
color: 'primary', label: '时间',
}, dateType: 'datetime',
{ format: 'yyyy-MM-dd',
type: 'button', valueFormat: 'yyyy-MM-dd HH:mm:ss',
btnName: '导出', rangeSeparator: '-',
name: 'export', startPlaceholder: '开始时间',
}, endPlaceholder: '结束时间',
], param: 'time',
}; },
}, {
components: { type: 'button',
}, btnName: '搜索',
created() { name: 'search',
this.getArr(); color: 'primary',
}, }
methods: { ],
getArr() { };
const params = { },
page: 1, created() {
limit: 500, this.getArr();
}; },
this.optionArrUrl.forEach((item, index) => { methods: {
item(params).then((response) => { getArr() {
this.formConfig[index].selectOptions = response.data.list; const params = {
}); page: 1,
}); limit: 500,
}, };
buttonClick(val) { this.optionArrUrl.forEach((item, index) => {
switch (val.btnName) { item(params).then((response) => {
case 'search': this.formConfig[index].selectOptions = response.data.list
this.listQuery.pageNo = 1; });
this.listQuery.pageSize = 10; });
this.listQuery.productionLineId = val.productionLineId; },
this.listQuery.productId = val.productId; getData() {
this.listQuery.createTime = val.createTime; this.listQuery.lineId = '1672847052717821953'
this.getDataList(); this.listQuery.startTime = '1693497600000';
break; this.listQuery.endTime = '1693843200000';
case 'reset': this.urlOptions.getDataListURL(this.listQuery).then(res => {
this.$refs.searchBarForm.resetForm(); console.log(res)
this.listQuery = { let arr = [
pageSize: 10, {
pageNo: 1, prop: 'sectionName',
total: 1, label: '工段',
}; align: 'center',
this.getDataList(); },
break; {
default: prop: 'equName',
console.log(val); label: '设备',
} align: 'center',
}, },
}, ]
let eqArr= []
res.data.data.forEach((ele, index) => {
console.log(ele);
eqArr.push(ele.equName)
})
console.log(eqArr)
// console.log(res.data.nameData.slice(1))
res.data.nameData.forEach(item => {
if (eqArr[0] === item.parentId) {
const props = {
'prop': item.name,
'label': item.name,
'align': 'center'
}
}
arr[2].children.push(props)
})
let obj = {
lineName: res.data.data[0].lineName,
sum: res.data.data[0].sum,
}
res.data.data[0].data[0].children.forEach((item, index) => {
console.log(item)
// let data = 'data' + Number(index+1)
obj['' + item.dynamicName + ''] = item.dynamicValue
})
this.tableData = [obj]
console.log(this.tableData)
console.log(arr)
this.tableProps = arr
let xData = []
res.data.nameData.forEach(item => {
xData.push(item.name)
// arr[2].children.push(props)
})
let yData = []
res.data.data[0].data[0].children.forEach((item, index) => {
// console.log(item)
yData.push(item.dynamicValue)
// let data = 'data' + Number(index+1)
// obj['' + item.dynamicName + ''] = item.dynamicValue
})
console.log(this.yData)
this.$refs.lineChart.initChart(xData, yData)
// this.total = response.data.total;
// this.dataListLoading = false;
});
},
buttonClick(val) {
// console.log(val)
switch (val.btnName) {
case 'search':
// this.listQuery.pageNo = 1;
// this.listQuery.pageSize = 10;
this.getData()
break;
case 'reset':
this.$refs.searchBarForm.resetForm();
this.listQuery = {
pageSize: 10,
pageNo: 1,
total: 1,
};
this.getDataList();
break;
default:
console.log(val);
}
},
},
}; };
</script> </script>

View File

@ -1,114 +1,95 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<search-bar <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
:formConfigs="formConfig" <base-table v-loading="dataListLoading" :table-props="tableProps" :table-data="tableData" />
ref="searchBarForm" <line-chart ref="lineChart" />
@headBtnClick="buttonClick" /> <!-- <pagination
<base-table
v-loading="dataListLoading"
:table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-data="tableData" />
<pagination
:limit.sync="listQuery.pageSize" :limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo" :page.sync="listQuery.pageNo"
:total="listQuery.total" :total="listQuery.total"
@pagination="getDataList" /> @pagination="getDataList" /> -->
</div> </div>
</template> </template>
<script> <script>
import basicPage from '../../mixins/basic-page'; // import basicPage from '../../mixins/basic-page';
import { parseTime } from '../../mixins/code-filter'; import { parseTime } from '../../mixins/code-filter';
import { getLineBindProductLogPage } from '@/api/core/base/lineBindProductLog'; import { getYieldAnalysisPageData } from '@/api/core/analysis/index';
import { getProductionLinePage } from '@/api/core/base/productionLine'; import { getProductionLinePage } from '@/api/core/base/productionLine';
import { getWorkshopSectionPage } from '@/api/core/base/workshopSection'; import lineChart from '../LineChart'
// import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
const tableProps = [ // const tableProps = [
{ // // {
prop: 'productionLineName', // // prop: 'lineName',
label: '产线', // // label: '线',
align: 'center', // // align: 'center',
}, // // },
{ // // {
prop: '', // // prop: 'sum',
label: '合计', // // label: '',
align: 'center', // // align: 'center',
}, // // },
{ // // {
prop: '', // // prop: 'dynamicValue',
label: '进片数量/片', // // label: 'dynamicName',
align: 'center', // // align: 'center',
}, // // children:[
{
prop: '', // // ]
label: '出片数量/片', // // }
align: 'center', // ];
},
{
prop: '',
label: '损耗数量/片',
align: 'center',
},
{
prop: '',
label: '损耗面积/m²',
align: 'center',
},
{
prop: '',
label: '损耗比例/%',
align: 'center',
}
];
export default { export default {
mixins: [basicPage], components: {
lineChart,
},
// mixins: [basicPage],
data() { data() {
return { return {
urlOptions: { urlOptions: {
getDataListURL: getLineBindProductLogPage, getDataListURL: getYieldAnalysisPageData,
}, },
tableProps, tableProps:[],
tableData: [], dataListLoading:false,
optionArrUrl: [getProductionLinePage, getWorkshopSectionPage], tableData: [],
listQuery: {
lineIds: [],
time: ''
},
xData: [],
yData:[],
optionArrUrl: [getProductionLinePage ],
formConfig: [ formConfig: [
{ {
type: 'select', type: 'select',
label: '产线', label: '产线',
selectOptions: [], selectOptions: [],
param: 'productionLineId', param: 'lineIds',
defaultSelect: '', defaultSelect: '',
multiple:true,
filterable: true, filterable: true,
}, },
{ {
type: 'datePicker', type: 'datePicker',
label: '时间', label: '时间',
dateType: 'daterange', dateType: 'datetime',
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
param: 'createTime', param: 'time',
}, },
{ {
type: 'button', type: 'button',
btnName: '搜索', btnName: '搜索',
name: 'search', name: 'search',
color: 'primary', color: 'primary',
}, }
{
type: 'button',
btnName: '导出',
name: 'export',
},
], ],
}; };
}, },
components: {
},
created() { created() {
this.getArr(); this.getArr();
}, },
@ -120,19 +101,109 @@ export default {
}; };
this.optionArrUrl.forEach((item, index) => { this.optionArrUrl.forEach((item, index) => {
item(params).then((response) => { item(params).then((response) => {
this.formConfig[index].selectOptions = response.data.list; this.formConfig[index].selectOptions = response.data.list
}); });
}); });
}, },
buttonClick(val) { getData() {
// this.listQuery.lineIds = ['1672847052717821953']
// this.listQuery.productId = val.productId;
// this.listQuery.time = '1694486098000';
this.urlOptions.getDataListURL(this.listQuery).then(res => {
let arr = [
{
prop: 'lineName',
label: '产线',
align: 'center',
},
{
prop: 'sum',
label: '合计',
align: 'center',
},
{
prop: res.data.nameData[0].name,
label: res.data.nameData[0].name,
align: 'center',
children:[
]
}
]
console.log(res.data.nameData.slice(1))
res.data.nameData.slice(1).forEach(item => {
const props = {
'prop': item.name,
'label': item.name,
'align': 'center'
}
arr[2].children.push(props)
})
let tableDataArr =[]
res.data.data.forEach(item => {
let obj = {}
obj.lineName= item.lineName,
obj.sum= item.sum,
item.data.forEach((ele, index) => {
// console.log(ele)
ele.children.forEach((e) => {
console.log(e.dynamicName)
obj['' + e.dynamicName + ''] = e.dynamicValue
console.log(obj['' + e.dynamicName + '']);
})
})
tableDataArr.push(obj)
});
this.tableData = tableDataArr
console.log(this.tableData)
console.log(arr)
this.tableProps = arr
let xData = []
res.data.nameData.slice(1).forEach(item => {
xData.push(item.name)
// arr[2].children.push(props)
})
let yAllData = []
let lineName = []
res.data.data.forEach(item => {
let yData = []
lineName.push(item.lineName)
// let obj = {}
// obj.lineName = item.lineName,
// obj.sum = item.sum,
item.data.forEach((ele, index) => {
// console.log(ele)
ele.children.forEach((e) => {
// let yData = []
yData.push(e.dynamicValue)
})
})
yAllData.push(yData)
});
console.log(lineName)
// res.data.data[0].data[0].children.forEach((item, index) => {
// // console.log(item)
// yData.push(item.dynamicValue)
// // let data = 'data' + Number(index+1)
// // obj['' + item.dynamicName + ''] = item.dynamicValue
// })
// console.log(this.yData)
this.$refs.lineChart.initChart(xData, yAllData, lineName)
// this.total = response.data.total;
// this.dataListLoading = false;
});
},
buttonClick(val) {
// console.log(val)
switch (val.btnName) { switch (val.btnName) {
case 'search': case 'search':
this.listQuery.pageNo = 1; this.listQuery.lineIds = val.lineIds ? val.lineIds :undefined
this.listQuery.pageSize = 10; // this.listQuery.productId = val.productId;
this.listQuery.productionLineId = val.productionLineId; this.listQuery.time = val.time ? new Date(val.time).getTime() : undefined
this.listQuery.productId = val.productId; // this.listQuery.pageNo = 1;
this.listQuery.createTime = val.createTime; // this.listQuery.pageSize = 10;
this.getDataList(); this.getData()
break; break;
case 'reset': case 'reset':
this.$refs.searchBarForm.resetForm(); this.$refs.searchBarForm.resetForm();

View File

@ -7,78 +7,82 @@
<base-table <base-table
v-loading="dataListLoading" v-loading="dataListLoading"
:table-props="tableProps" :table-props="tableProps"
:page="listQuery.pageNo"
:limit="listQuery.pageSize"
:table-data="tableData" /> :table-data="tableData" />
<pagination <!-- <pagination
:limit.sync="listQuery.pageSize" :limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo" :page.sync="listQuery.pageNo"
:total="listQuery.total" :total="listQuery.total"
@pagination="getDataList" /> @pagination="getDataList" /> -->
</div> </div>
</template> </template>
<script> <script>
import basicPage from '../../mixins/basic-page'; // import basicPage from '../../mixins/basic-page';
import { parseTime } from '../../mixins/code-filter'; import { parseTime } from '../../mixins/code-filter';
import { getLineBindProductLogPage } from '@/api/core/base/lineBindProductLog'; import { getSectionDataSearch } from '@/api/core/monitoring';
import { getProductionLinePage } from '@/api/core/base/productionLine'; import { getProductionLinePage } from '@/api/core/base/productionLine';
import { getWorkshopSectionPage } from '@/api/core/base/workshopSection'; import { getWorkshopSectionPage } from '@/api/core/base/workshopSection';
const tableProps = [ const tableProps = [
{ {
prop: 'productionLineName', prop: 'proLineName',
label: '产线名称', label: '产线名称',
align: 'center', align: 'center',
}, },
{ {
prop: '', prop: 'sectionName',
label: '工段名称', label: '工段名称',
align: 'center', align: 'center',
}, },
{ {
prop: '', prop: 'inputNum',
label: '进片数量/片', label: '进片数量/片',
align: 'center', align: 'center',
}, },
{ {
prop: '', prop: 'outputNum',
label: '出片数量/片', label: '出片数量/片',
align: 'center', align: 'center',
}, },
{ {
prop: '', prop: 'lossNum',
label: '损耗数量/片', label: '损耗数量/片',
align: 'center', align: 'center',
}, },
{ {
prop: '', prop: 'lossArea',
label: '损耗面积/m²', label: '损耗面积/m²',
align: 'center', align: 'center',
}, },
{ {
prop: '', prop: 'lossRate',
label: '损耗比例/%', label: '损耗比例/%',
align: 'center', align: 'center',
} }
]; ];
export default { export default {
mixins: [basicPage], // mixins: [basicPage],
data() { data() {
return { return {
urlOptions: { urlOptions: {
getDataListURL: getLineBindProductLogPage, getDataListURL: getSectionDataSearch,
}, },
tableProps, tableProps,
tableData: [], tableData: [],
listQuery: {
proLineId:undefined,
sectionId: undefined,
startTime: undefined,
endTime: undefined,
},
optionArrUrl: [getProductionLinePage, getWorkshopSectionPage], optionArrUrl: [getProductionLinePage, getWorkshopSectionPage],
formConfig: [ formConfig: [
{ {
type: 'select', type: 'select',
label: '产线', label: '产线',
selectOptions: [], selectOptions: [],
param: 'productionLineId', param: 'proLineId',
defaultSelect: '', defaultSelect: '',
filterable: true, filterable: true,
}, },
@ -86,7 +90,7 @@ export default {
type: 'select', type: 'select',
label: '工段', label: '工段',
selectOptions: [], selectOptions: [],
param: 'productId', param: 'sectionId',
defaultSelect: '', defaultSelect: '',
filterable: true, filterable: true,
}, },
@ -99,7 +103,7 @@ export default {
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
param: 'createTime', param: 'timeSlot',
}, },
{ {
type: 'button', type: 'button',
@ -118,7 +122,8 @@ export default {
components: { components: {
}, },
created() { created() {
this.getArr(); this.getArr();
this.getDataList()
}, },
methods: { methods: {
getArr() { getArr() {
@ -131,16 +136,30 @@ export default {
this.formConfig[index].selectOptions = response.data.list; this.formConfig[index].selectOptions = response.data.list;
}); });
}); });
}, },
buttonClick(val) { getDataList() {
switch (val.btnName) { // this.listQuery.proLineId = '1672847052717821953';
case 'search': // this.listQuery.startTime = '1690626657000'
this.listQuery.pageNo = 1; // this.listQuery.endTime = '1693564257000'
this.listQuery.pageSize = 10; this.urlOptions.getDataListURL(this.listQuery).then(res => {
this.listQuery.productionLineId = val.productionLineId; this.tableData = res.data
this.listQuery.productId = val.productId; // this.total = response.data.total;
this.listQuery.createTime = val.createTime; this.dataListLoading = false;
this.getDataList(); });
},
buttonClick(val) {
console.log(val)
switch (val.btnName) {
case 'search':
console.log(val.timeSlot);
// this.listQuery.pageNo = 1;
// this.listQuery.pageSize = 10;
this.listQuery.proLineId = val.proLineId ? val.proLineId : undefined
this.listQuery.sectionId = val.sectionId ? val.sectionId : undefined
this.listQuery.startTime = val.timeSlot ? new Date(val.timeSlot[0]).getTime() : undefined
this.listQuery.endTime = val.timeSlot ? new Date(val.timeSlot[1]).getTime() : undefined
this.getDataList();
break; break;
case 'reset': case 'reset':
this.$refs.searchBarForm.resetForm(); this.$refs.searchBarForm.resetForm();