Skip to content

Z
zhongtong-avi-web
Commit 8338b99d authored by 车宾's avatar 车宾
Browse files
Options

fea（化验室槽液检测参数趋势图）：功能联调

parent 4522ffca
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 83 deletions
src/router/modules/laboratory.js
View file @ 8338b99d
...@@ -25,9 +25,9 @@ export default { ...@@ -25,9 +25,9 @@ export default {
}, },
{ {
path: 'trendchartOfTankParameters', path: 'trendchartOfTankParameters',
component: () => import('@/views/Laboratory/Pretreatment/trendchartOfTankParameters'), component: () => import('@/views/Laboratory/trendchartOfTankParameters/list'),
name: 'TrendchartOfTankParameters', name: 'TrendchartOfTankParameters',
meta: { title: 'TrendchartOfTankParameters', icon: 'template', noCache: false, mark: '/laboratory/pretreatment/trendchartOfTankParameters' } meta: { title: 'TrendchartOfTankParameters', icon: 'template', noCache: false, mark: '/laboratory/trendchartOfTankParameters/list' }
} }
] ]
} }
src/views/Laboratory/Pretreatment/components/ChartsLine.vue → src/views/Laboratory/TrendchartOfTankParameters/components/ChartsLine.vue
View file @ 8338b99d
<template> <template>
<div class="chart-pack"> <div class="chart-pack">
<div :id="sendData.id" class="chart"> <div :id="propsId" class="chart">
</div> </div>
</div> </div>
</template> </template>
...@@ -10,27 +10,38 @@ import Echarts from 'echarts' ...@@ -10,27 +10,38 @@ import Echarts from 'echarts'
export default { export default {
props: { props: {
sendData: { sendData: {
type: Object, type: Array,
default: () => { default: () => {
return {} return []
}
},
timesArrList: {
type: Array,
default: () => {
return []
}
},
propsId: {
type: Number,
default: () => {
return null
} }
} }
}, },
data () { data () {
return { return {
sampleCharts: '' // 图表Y轴数据
} chartsYdata:[],
}, // 下限值
watch: { rangeLower: null,
sendData: { // 上限值
handler (newVal, oldVal) { rangeUpper: null,
this.renderEcharts(); // Y轴名字
}, nameY: null
deep: true
} }
}, },
mounted () { mounted () {
if (this.sendData.hasOwnProperty('id')) { if (this.sendData.length > 0 && this.propsId !== null) {
this.$nextTick(() => { this.$nextTick(() => {
this.renderEcharts(); this.renderEcharts();
}) })
...@@ -38,17 +49,20 @@ export default { ...@@ -38,17 +49,20 @@ export default {
}, },
methods: { methods: {
renderEcharts () { renderEcharts () {
let domItem = document.getElementById(`${this.sendData.id}`); // 数据解析
this.sampleCharts = Echarts.init(domItem); for (let item of this.sendData) {
let data = this.sendData.value; this.chartsYdata.push(item.checkResult)
let top = this.sendData.top; this.rangeLower = item.rangeLower
let down = this.sendData.down; this.rangeUpper = item.rangeUpper
// this.sampleCharts.clear(); this.nameY = item.name
// echarts.dispose(domItem) };
// let echart = echarts.init(domItem) let domItem = document.getElementById(`${this.propsId}`);
// 清空div中的内容和结构
domItem.innerHTML = '';
let sampleCharts = Echarts.init(domItem);
var charts = { var charts = {
// unit: '户数', // unit: '户数',
names: ['进给轴倍率', '主轴负载'] // names: ['进给轴倍率', '主轴负载']
// lineX:new Date(this.createTime).getTime(), // lineX:new Date(this.createTime).getTime(),
}; };
let opt = { let opt = {
...@@ -65,7 +79,7 @@ export default { ...@@ -65,7 +79,7 @@ export default {
// name: '日期', // name: '日期',
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], data: this.timesArrList,
nameTextStyle: { nameTextStyle: {
// fontWeight: 'bold', // fontWeight: 'bold',
fontSize: 18, fontSize: 18,
...@@ -73,8 +87,8 @@ export default { ...@@ -73,8 +87,8 @@ export default {
} }
}, },
yAxis: { yAxis: {
name: this.nameY,
type: 'value', type: 'value',
name: this.sendData.argumentName,
nameTextStyle: { nameTextStyle: {
// fontWeight: 'bold', // fontWeight: 'bold',
fontSize: 16, fontSize: 16,
...@@ -83,13 +97,13 @@ export default { ...@@ -83,13 +97,13 @@ export default {
}, },
series: [ series: [
{ {
name: '邮件营销', name: this.nameY,
type: 'line', type: 'line',
lineStyle: { lineStyle: {
color: '#8cd2ff' color: '#8cd2ff'
}, },
stack: '总量', stack: '总量',
data: data, data: this.chartsYdata,
markLine: { markLine: {
label: { label: {
show: true, show: true,
...@@ -107,17 +121,17 @@ export default { ...@@ -107,17 +121,17 @@ export default {
silent: true, silent: true,
data: [ data: [
{ {
yAxis: top yAxis: this.rangeUpper
}, },
{ {
yAxis: down yAxis: this.rangeLower
} }
] ]
} }
} }
] ]
}; };
this.sampleCharts.setOption(opt); sampleCharts.setOption(opt, true);
} }
} }
} }
...@@ -132,4 +146,4 @@ export default { ...@@ -132,4 +146,4 @@ export default {
height: 100%; height: 100%;
} }
} }
</style> </style>
\ No newline at end of file
src/views/Laboratory/Pretreatment/trendchartOfTankParameters.vue → src/views/Laboratory/TrendchartOfTankParameters/list.vue
View file @ 8338b99d
<template> <template>
<div class="page-pack"> <div class="page-pack" id="pagePack">
<div class="title-pack clear-float pl-15 pr-15"> <div class="title-pack clear-float pl-15 pr-15">
<div class="float-left"> <div class="float-left">
<span class="page-title-text">电泳槽液日常检测报告</span> <span class="page-title-text">电泳槽液日常检测报告</span>
...@@ -14,9 +14,9 @@ ...@@ -14,9 +14,9 @@
<div class="tool-pack clear-float pl-15 pr-15"> <div class="tool-pack clear-float pl-15 pr-15">
<div <div
class="card-content-pack" class="card-content-pack"
> >
<div class="content"> <div class="content" id="content">
<!-- 搜索栏 --> <!-- 搜索栏 -->
<el-form <el-form
:inline="true" :inline="true"
...@@ -27,7 +27,6 @@ ...@@ -27,7 +27,6 @@
class="timeForm" class="timeForm"
label="统计时间" label="统计时间"
> >
<!-- format="23232323" -->
<el-date-picker <el-date-picker
v-model="searchData.chooseMonDate" v-model="searchData.chooseMonDate"
type="month" type="month"
...@@ -54,8 +53,9 @@ ...@@ -54,8 +53,9 @@
class="timeForm" class="timeForm"
label="选择参数" label="选择参数"
> >
<el-select multiple v-model="searchData.normalArguments" :disabled="argumentSelecteStatus" @change="argumentsChange" placeholder="请选择参数" size="mini"> <el-select style="height: 30px !important;" multiple v-model="searchData.normalArguments" :disabled="argumentSelecteStatus" @change="argumentsChange" placeholder="请选择参数" size="mini">
<el-option <el-option
style="height: 30px !important;"
v-for="item in searchData.arguments" v-for="item in searchData.arguments"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
@click="doSearchMonClick" @click="doSearchMonClick"
>搜索</el-button> >搜索</el-button>
</el-form-item> </el-form-item>
<el-form-item class="form-btn"> <el-form-item class="form-btn">
<el-button <el-button
size="mini" size="mini"
class="bt-class" class="bt-class"
...@@ -82,20 +82,30 @@ ...@@ -82,20 +82,30 @@
<el-button <el-button
size="small" size="small"
@click="getPdf()" @click="getPdf()"
type="primary" type="primary"
> >
导出 导出
</el-button> </el-button>
<!-- 图表 --> <!-- 图表 -->
<div class="many_charts"> <div
<div class="charts" v-for="(item, index) in chartsAbout.chartsData" :key="index" > v-if="chartRenderToggle"
<div class="charts_title">{{'磷化槽液参数（FA、TA、AC、T、F-）变化趋势'}}</div> class="many_charts" id="manyCharts">
<div class="charts" v-for="(item, index) in chartsData" :key="index" >
<div class="charts_title">{{item.name}}</div>
<div class="charts_container"> <div class="charts_container">
<ChartsLine :sendData="item"></ChartsLine> <ChartsLine
:propsId="item.id"
:sendData="item.itemRecords"
:timesArrList="parsingTimeList"
></ChartsLine>
<!-- <ChartsLine :sendData="item"></ChartsLine> --> <!-- <ChartsLine :sendData="item"></ChartsLine> -->
</div> </div>
</div> </div>
</div> </div>
<div class="haveno" id="haveno" v-if="chartsData.length === 0">
<div class="haveno_data" >暂无数据...</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -111,6 +121,8 @@ export default { ...@@ -111,6 +121,8 @@ export default {
}, },
data () { data () {
return { return {
// 图表dom重载开关
chartRenderToggle: true,
// 导出pdf文件的名字 // 导出pdf文件的名字
htmlTitle: '化验室槽液参数变化趋势图', htmlTitle: '化验室槽液参数变化趋势图',
// 搜索栏数据 // 搜索栏数据
...@@ -125,23 +137,14 @@ export default { ...@@ -125,23 +137,14 @@ export default {
arguments: [], arguments: [],
// 默认显示的参数 // 默认显示的参数
normalArguments: [] normalArguments: []
}, },
// 图表相关数据 // 图表相关数据
chartsAbout: { chartsData: [],
chartsTitle: [],
chartsData: [
{
id: 0,
top: 80,
down: 20,
value: ['40', '32', '34', '76', '65'],
argumentName: '诶嘿~'
}
]
},
// 参数下拉框禁用状态 // 参数下拉框禁用状态
argumentSelecteStatus: true argumentSelecteStatus: true,
// 解析后台返回数据的每一条的时间都放到这个数组里
parsingTimeList: [],
temNum:1,
} }
}, },
mounted () { mounted () {
...@@ -149,15 +152,16 @@ export default { ...@@ -149,15 +152,16 @@ export default {
this.getBathSolutionData() this.getBathSolutionData()
this.getArgumentData() this.getArgumentData()
this.getNowYearMonth() this.getNowYearMonth()
let height = (document.getElementById('pagePack').offsetHeight) - (document.getElementById('content').offsetHeight)
// console.log((document.getElementById('pagePack').offsetHeight) - (document.getElementById('content').offsetHeight), '23232323232323232')
document.getElementById('haveno').style.height = height - 100+ 'px'
}, },
methods: { methods: {
// 获取图表默认数据 // 获取图表默认数据
getNormalChartsData () {}, getNormalChartsData () {},
// 获取槽液类型数据 // 获取槽液类型数据
getBathSolutionData () { getBathSolutionData () {
console.log('222222222')
this.$fetch('daily-check-controller/getCheckModel-get').then(res => { this.$fetch('daily-check-controller/getCheckModel-get').then(res => {
console.log(res)
for (let item of res) { for (let item of res) {
if (item.type === 'PRETREATMENT') { if (item.type === 'PRETREATMENT') {
item.name = '前处理槽液' item.name = '前处理槽液'
...@@ -170,69 +174,86 @@ export default { ...@@ -170,69 +174,86 @@ export default {
} }
this.searchData.bathSolution.push(item) this.searchData.bathSolution.push(item)
} }
console.log(this.searchData.bathSolution, 'this.searchData.bathSolution')
}) })
}, },
// 获取参数数据 // 获取参数数据
getArgumentData () {}, getArgumentData () {},
// 刷新 // 刷新
doRefreshClick () {}, doRefreshClick () {
this.searchData.normalBathSolution = ''
this.searchData.chooseMonDate = ''
this.searchData.arguments = []
this.searchData.normalArguments = []
this.chartsData = []
this.argumentSelecteStatus = true
this.$message.success('刷新成功')
if(this.chartsData.length === 0){
let height = (document.getElementById('pagePack').offsetHeight) - (document.getElementById('content').offsetHeight)
document.getElementById('haveno').style.height = height - 100+ 'px'
}
},
// 获取当前月份 // 获取当前月份
getNowYearMonth () { getNowYearMonth () {
let nowYeraMonth = new Date(); let nowYeraMonth = new Date();
console.log(nowYeraMonth.getMonth() + 1);
console.log(nowYeraMonth.getFullYear());
this.searchData.chooseMonDate = (nowYeraMonth.getFullYear()).toString() + '-' + (nowYeraMonth.getMonth() + 1) + '-' + '01'.toString() this.searchData.chooseMonDate = (nowYeraMonth.getFullYear()).toString() + '-' + (nowYeraMonth.getMonth() + 1) + '-' + '01'.toString()
console.log(' this.searchData.chooseMonDate', this.searchData.chooseMonDate)
}, },
// 选择时间 // 选择时间
yearMonthChange (val) { yearMonthChange (val) {
// console.log(val)
console.log(this.$moment(val).format('YYYY-MM-DD'))
this.searchData.chooseMonDate = this.$moment(val).format('YYYY-MM-DD') this.searchData.chooseMonDate = this.$moment(val).format('YYYY-MM-DD')
}, },
// formatMonth (val) {
// },
// 槽液类型选择内容改变 // 槽液类型选择内容改变
bathSolutionChange (val) { bathSolutionChange (val) {
this.searchData.arguments.length = 0 this.searchData.arguments.length = 0
this.searchData.normalArguments = [] this.searchData.normalArguments = []
console.log(val)
this.$fetch('daily-check-controller/id-get', {id: val}).then(res => { this.$fetch('daily-check-controller/id-get', {id: val}).then(res => {
console.log(res, '槽液类型选择')
this.searchData.arguments = res this.searchData.arguments = res
}) })
this.argumentSelecteStatus = false this.argumentSelecteStatus = false
}, },
// 参数选择内容改变 // 参数选择内容改变
argumentsChange (val) { argumentsChange (val) {
console.log(val)
}, },
// 搜索 // 搜索
doSearchMonClick () { doSearchMonClick () {
if (this.searchData.normalBathSolution === '') { if ( !this.searchData.normalBathSolution) {
this.$message.warning('请选择槽液类型') this.$message.warning('请选择槽液类型')
return return
} }
// console.log(this.searchData)
let params = { let params = {
currentMonth: this.searchData.chooseMonDate, currentMonth: this.searchData.chooseMonDate,
modelId: this.searchData.normalBathSolution, modelId: this.searchData.normalBathSolution,
itemNames: this.searchData.normalArguments itemNames: this.searchData.normalArguments.join(',')
} }
console.log(params)
this.$fetch('daily-check-controller/getCheckItemRecord-get', params).then(res => { this.$fetch('daily-check-controller/getCheckItemRecord-get', params).then(res => {
console.log(res, '获取到的表格数据') this.chartsData = _.cloneDeep(res)
for(let item of this.chartsData) {
item.id = this.temNum
this.temNum+=1
}
for (let item of res) {
for (let items of item.itemRecords) {
let resolveTimeData = this.$moment(items.createTime).format('YYYY-MM-DD hh:mm:ss');
this.parsingTimeList.push(resolveTimeData.replace(' ', '\n'));
}
}
this.chartRenderToggle = false;
this.$nextTick(() => {
this.chartRenderToggle = true;
})
}) })
}, },
// 重置 // 重置
resetMonClick () { resetMonClick () {
this.searchData = {} this.searchData.normalBathSolution = ''
this.chartsAbout = {} this.searchData.chooseMonDate = ''
this.searchData.normalArguments = []
this.chartsData = []
this.argumentSelecteStatus = true
if(this.chartsData.length === 0){
let height = (document.getElementById('pagePack').offsetHeight) - (document.getElementById('content').offsetHeight)
document.getElementById('haveno').style.height = height - 100+ 'px'
}
}, },
// 导出
exportHandle () {}
} }
} }
</script> </script>
...@@ -274,5 +295,19 @@ export default { ...@@ -274,5 +295,19 @@ export default {
height: 400px height: 400px
} }
} }
.haveno {
display: flex;
width: 100%;
height: 100%;
// height: 400px;
align-items: center;
// margin: 0 auto;
// text-align: center;
// justify-content:center
.haveno_data {
display: inline-block;
margin: 0 auto;
}
}
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment