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 {
},
{
path: 'trendchartOfTankParameters',
component: () => import('@/views/Laboratory/Pretreatment/trendchartOfTankParameters'),
component: () => import('@/views/Laboratory/trendchartOfTankParameters/list'),
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>
<div class="chart-pack">
<div :id="sendData.id" class="chart">
<div :id="propsId" class="chart">
</div>
</div>
</template>
......@@ -10,27 +10,38 @@ import Echarts from 'echarts'
export default {
props: {
sendData: {
type: Object,
type: Array,
default: () => {
return {}
return []
}
},
timesArrList: {
type: Array,
default: () => {
return []
}
},
propsId: {
type: Number,
default: () => {
return null
}
}
},
data () {
return {
sampleCharts: ''
}
},
watch: {
sendData: {
handler (newVal, oldVal) {
this.renderEcharts();
},
deep: true
// 图表Y轴数据
chartsYdata:[],
// 下限值
rangeLower: null,
// 上限值
rangeUpper: null,
// Y轴名字
nameY: null
}
},
mounted () {
if (this.sendData.hasOwnProperty('id')) {
if (this.sendData.length > 0 && this.propsId !== null) {
this.$nextTick(() => {
this.renderEcharts();
})
......@@ -38,17 +49,20 @@ export default {
},
methods: {
renderEcharts () {
let domItem = document.getElementById(`${this.sendData.id}`);
this.sampleCharts = Echarts.init(domItem);
let data = this.sendData.value;
let top = this.sendData.top;
let down = this.sendData.down;
// this.sampleCharts.clear();
// echarts.dispose(domItem)
// let echart = echarts.init(domItem)
// 数据解析
for (let item of this.sendData) {
this.chartsYdata.push(item.checkResult)
this.rangeLower = item.rangeLower
this.rangeUpper = item.rangeUpper
this.nameY = item.name
};
let domItem = document.getElementById(`${this.propsId}`);
// 清空div中的内容和结构
domItem.innerHTML = '';
let sampleCharts = Echarts.init(domItem);
var charts = {
// unit: '户数',
names: ['进给轴倍率', '主轴负载']
// names: ['进给轴倍率', '主轴负载']
// lineX:new Date(this.createTime).getTime(),
};
let opt = {
......@@ -65,7 +79,7 @@ export default {
// name: '日期',
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
data: this.timesArrList,
nameTextStyle: {
// fontWeight: 'bold',
fontSize: 18,
......@@ -73,8 +87,8 @@ export default {
}
},
yAxis: {
name: this.nameY,
type: 'value',
name: this.sendData.argumentName,
nameTextStyle: {
// fontWeight: 'bold',
fontSize: 16,
......@@ -83,13 +97,13 @@ export default {
},
series: [
{
name: '邮件营销',
name: this.nameY,
type: 'line',
lineStyle: {
color: '#8cd2ff'
},
stack: '总量',
data: data,
data: this.chartsYdata,
markLine: {
label: {
show: true,
......@@ -107,17 +121,17 @@ export default {
silent: true,
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 {
height: 100%;
}
}
</style>
\ No newline at end of file
</style>
src/views/Laboratory/Pretreatment/trendchartOfTankParameters.vue → src/views/Laboratory/TrendchartOfTankParameters/list.vue
View file @ 8338b99d
<template>
<div class="page-pack">
<div class="page-pack" id="pagePack">
<div class="title-pack clear-float pl-15 pr-15">
<div class="float-left">
<span class="page-title-text">电泳槽液日常检测报告</span>
......@@ -14,9 +14,9 @@
<div class="tool-pack clear-float pl-15 pr-15">
<div
class="card-content-pack"
>
<div class="content">
<div class="content" id="content">
<!-- 搜索栏 -->
<el-form
:inline="true"
......@@ -27,7 +27,6 @@
class="timeForm"
label="统计时间"
>
<!-- format="23232323" -->
<el-date-picker
v-model="searchData.chooseMonDate"
type="month"
......@@ -54,8 +53,9 @@
class="timeForm"
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
style="height: 30px !important;"
v-for="item in searchData.arguments"
:key="item.id"
:label="item.name"
......@@ -71,7 +71,7 @@
@click="doSearchMonClick"
>搜索</el-button>
</el-form-item>
<el-form-item class="form-btn">
<el-form-item class="form-btn">
<el-button
size="mini"
class="bt-class"
......@@ -82,20 +82,30 @@
<el-button
size="small"
@click="getPdf()"
type="primary"
type="primary"
>
导出
</el-button>
</el-button>
<!-- 图表 -->
<div class="many_charts">
<div class="charts" v-for="(item, index) in chartsAbout.chartsData" :key="index" >
<div class="charts_title">{{'磷化槽液参数（FA、TA、AC、T、F-）变化趋势'}}</div>
<div
v-if="chartRenderToggle"
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">
<ChartsLine :sendData="item"></ChartsLine>
<ChartsLine
:propsId="item.id"
:sendData="item.itemRecords"
:timesArrList="parsingTimeList"
></ChartsLine>
<!-- <ChartsLine :sendData="item"></ChartsLine> -->
</div>
</div>
</div>
<div class="haveno" id="haveno" v-if="chartsData.length === 0">
<div class="haveno_data" >暂无数据...</div>
</div>
</div>
</div>
</div>
......@@ -111,6 +121,8 @@ export default {
},
data () {
return {
// 图表dom重载开关
chartRenderToggle: true,
// 导出pdf文件的名字
htmlTitle: '化验室槽液参数变化趋势图',
// 搜索栏数据
......@@ -125,23 +137,14 @@ export default {
arguments: [],
// 默认显示的参数
normalArguments: []
},
// 图表相关数据
chartsAbout: {
chartsTitle: [],
chartsData: [
{
id: 0,
top: 80,
down: 20,
value: ['40', '32', '34', '76', '65'],
argumentName: '诶嘿~'
}
]
},
chartsData: [],
// 参数下拉框禁用状态
argumentSelecteStatus: true
argumentSelecteStatus: true,
// 解析后台返回数据的每一条的时间都放到这个数组里
parsingTimeList: [],
temNum:1,
}
},
mounted () {
......@@ -149,15 +152,16 @@ export default {
this.getBathSolutionData()
this.getArgumentData()
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: {
// 获取图表默认数据
getNormalChartsData () {},
// 获取槽液类型数据
getBathSolutionData () {
console.log('222222222')
this.$fetch('daily-check-controller/getCheckModel-get').then(res => {
console.log(res)
for (let item of res) {
if (item.type === 'PRETREATMENT') {
item.name = '前处理槽液'
......@@ -170,69 +174,86 @@ export default {
}
this.searchData.bathSolution.push(item)
}
console.log(this.searchData.bathSolution, 'this.searchData.bathSolution')
})
},
// 获取参数数据
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 () {
let nowYeraMonth = new Date();
console.log(nowYeraMonth.getMonth() + 1);
console.log(nowYeraMonth.getFullYear());
this.searchData.chooseMonDate = (nowYeraMonth.getFullYear()).toString() + '-' + (nowYeraMonth.getMonth() + 1) + '-' + '01'.toString()
console.log(' this.searchData.chooseMonDate', this.searchData.chooseMonDate)
},
// 选择时间
yearMonthChange (val) {
// console.log(val)
console.log(this.$moment(val).format('YYYY-MM-DD'))
this.searchData.chooseMonDate = this.$moment(val).format('YYYY-MM-DD')
},
// formatMonth (val) {
// },
// 槽液类型选择内容改变
bathSolutionChange (val) {
this.searchData.arguments.length = 0
this.searchData.normalArguments = []
console.log(val)
this.$fetch('daily-check-controller/id-get', {id: val}).then(res => {
console.log(res, '槽液类型选择')
this.searchData.arguments = res
})
this.argumentSelecteStatus = false
},
// 参数选择内容改变
argumentsChange (val) {
console.log(val)
},
// 搜索
doSearchMonClick () {
if (this.searchData.normalBathSolution === '') {
if ( !this.searchData.normalBathSolution) {
this.$message.warning('请选择槽液类型')
return
}
// console.log(this.searchData)
let params = {
currentMonth: this.searchData.chooseMonDate,
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 => {
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 () {
this.searchData = {}
this.chartsAbout = {}
this.searchData.normalBathSolution = ''
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>
......@@ -274,5 +295,19 @@ export default {
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>
\ No newline at end of file
</style>
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