17 changed files with 392 additions and 578 deletions
@ -1,183 +1,218 @@ |
|||||
<template> |
<template> |
||||
<div class="app-container"> |
<div class="app-container"> |
||||
<el-table :data="tableData" style="width: 100%" border> |
<el-table :data.sync="tableData" style="width: 100%" border> |
||||
<el-table-column label="电动机电流载重量百分比" prop="name" /> |
<el-table-column label="电动机电流载重量百分比" prop="name" /> |
||||
<el-table-column label="30%" prop="D5"> |
<el-table-column label="30%" prop="D5"> |
||||
<template slot-scope="scope"> |
<template slot-scope="scope"> |
||||
<el-input v-model="scope.row.D5" /> |
<el-input v-model="scope.row.D5" /> |
||||
</template> |
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
<el-table-column label="40%" prop="D4"> |
<el-table-column label="40%" prop="D4"> |
||||
<template slot-scope="scope"> |
<template slot-scope="scope"> |
||||
<el-input v-model="scope.row.D4" /> |
<el-input v-model="scope.row.D4" /> |
||||
</template> |
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
<el-table-column label="45%" prop="D3"> |
<el-table-column label="45%" prop="D3"> |
||||
<template slot-scope="scope"> |
<template slot-scope="scope"> |
||||
<el-input v-model="scope.row.D3" /> |
<el-input v-model="scope.row.D3" /> |
||||
</template> |
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
<el-table-column label="50%" prop="D2"> |
<el-table-column label="50%" prop="D2"> |
||||
<template slot-scope="scope"> |
<template slot-scope="scope"> |
||||
<el-input v-model="scope.row.D2" /> |
<el-input v-model="scope.row.D2" /> |
||||
</template> |
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
<el-table-column label="60%" prop="D1"> |
<el-table-column label="60%" prop="D1"> |
||||
<template slot-scope="scope"> |
<template slot-scope="scope"> |
||||
<el-input v-model="scope.row.D1" /> |
<el-input v-model="scope.row.D1" /> |
||||
</template> |
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
</el-table> |
</el-table> |
||||
<div id="chart" style="width:600px;height:500px;margin-top:50px" /> |
<div id="chart" style="width:600px;height:500px;margin-top:50px" /> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
import * as echarts from 'echarts' |
import * as echarts from 'echarts' |
||||
require('echarts/theme/macarons') // echarts theme |
require('echarts/theme/macarons') // echarts theme |
||||
export default { |
import resize from '@/utils/mixins/resize' |
||||
name: 'Table', |
|
||||
components: {}, |
export default { |
||||
props: { |
name: 'Phxsb', |
||||
tabelHeader: { |
mixins: [resize], |
||||
type: Array, |
props: { |
||||
require: true, |
/** |
||||
default: () => { |
* [ { name: '上行（A）', D1: '', D2: '', D3: '', D4: '', D5: '' }, { name: '下行（A）', D1: '', D2: '', D3: '', D4: '', D5: '' } ] |
||||
return [] |
*/ |
||||
} |
tableData: { |
||||
}, |
type: Array, |
||||
tableData: { |
required: true |
||||
type: Array, |
}, |
||||
require: true, |
pic: { |
||||
default: () => { |
type: String, |
||||
return [] |
default: '' |
||||
} |
} |
||||
}, |
}, |
||||
pic: { |
data() { |
||||
type: String, |
return { |
||||
require: true, |
type: '1', |
||||
default: '' |
options: [ |
||||
} |
{ |
||||
}, |
value: '√', |
||||
data() { |
id: '1' |
||||
return { |
}, |
||||
type: '1', |
{ |
||||
options: [ |
value: 'X', |
||||
{ |
id: '2' |
||||
value: '√', |
}, |
||||
id: '1' |
{ |
||||
}, |
value: '/', |
||||
{ |
id: '3' |
||||
value: 'X', |
} |
||||
id: '2' |
], |
||||
}, |
multipleSelection: [], |
||||
{ |
chart: undefined, |
||||
value: '/', |
phxsX: [], |
||||
id: '3' |
phxsY: [], |
||||
} |
imgPath: '', |
||||
], |
xAxis: ['30', '40', '45', '50', '60'], |
||||
multipleSelection: [], |
chartDataX: [], |
||||
data: [], |
chartDataY: [] |
||||
data1: [], |
} |
||||
imgPath: '' |
}, |
||||
} |
watch: { |
||||
}, |
tableData: { |
||||
computed: {}, |
handler: function(val) { |
||||
watch: { |
this.initTableData() |
||||
tableData: { |
this.phxsX = [] |
||||
handler: function(val) { |
this.phxsY = [] |
||||
this.data = Object.values(val[0]).slice(1) |
this.chartDataX = [] |
||||
this.data1 = Object.values(val[1]).slice(1) |
this.chartDataY = [] |
||||
this.initChart() |
for (let i = 5; i > 0; i--) { |
||||
}, |
const key = 'D' + i |
||||
deep: true |
const xValue = Number(val[0][key]) |
||||
} |
const yValue = Number(val[1][key]) |
||||
}, |
this.chartDataX.push(xValue) |
||||
created() { |
this.chartDataY.push(yValue) |
||||
this.tableData = [ |
this.phxsX.push([this.xAxis[5 - i], xValue]) |
||||
{ |
this.phxsY.push([this.xAxis[5 - i], yValue]) |
||||
name: '上行（A）', |
} |
||||
D1: '', |
this.buildPhxs() |
||||
D2: '', |
this.initChart() |
||||
D3: '', |
}, |
||||
D4: '', |
deep: true |
||||
D5: '' |
} |
||||
}, |
}, |
||||
{ |
created() { |
||||
name: '下行（A）', |
this.initTableData() |
||||
D1: '', |
}, |
||||
D2: '', |
mounted() { |
||||
D3: '', |
this.initChart() |
||||
D4: '', |
}, |
||||
D5: '' |
methods: { |
||||
} |
initTableData() { |
||||
] |
if (this.tableData.length) { |
||||
}, |
return |
||||
mounted() { |
} |
||||
this.initChart() |
this.tableData.push({ |
||||
}, |
name: '上行（A）', |
||||
methods: { |
D1: '', |
||||
initChart() { |
D2: '', |
||||
const myChart = echarts.init(document.getElementById('chart')) |
D3: '', |
||||
const option = { |
D4: '', |
||||
title: { |
D5: '' |
||||
text: '电流（A）' |
}) |
||||
}, |
this.tableData.push({ |
||||
tooltip: { |
name: '下行（A）', |
||||
trigger: 'axis' |
D1: '', |
||||
}, |
D2: '', |
||||
legend: { |
D3: '', |
||||
data: ['上行', '下行'] |
D4: '', |
||||
}, |
D5: '' |
||||
grid: { |
}) |
||||
left: '3%', |
}, |
||||
right: '4%', |
buildPhxs() { |
||||
bottom: '3%', |
let phxs = 0 |
||||
containLabel: true |
let phxsTemp = 0 |
||||
}, |
for (let i = 0; i < this.phxsX.length - 1; i++) { |
||||
toolbox: { |
phxsTemp = parseInt(this.crossPointX(parseFloat(this.phxsX[i][0]), parseFloat(this.phxsX[i][1]), parseFloat(this.phxsX[i + 1][0]), |
||||
feature: { |
parseFloat(this.phxsX[i + 1][1]), parseFloat(this.phxsY[i][0]), parseFloat(this.phxsY[i][1]), parseFloat(this.phxsY[i + 1][0]), |
||||
saveAsImage: {} |
parseFloat(this.phxsY[i + 1][1]))) |
||||
} |
if (phxsTemp > parseFloat(this.phxsX[i][0]) && phxsTemp < parseFloat(this.phxsX[i + 1][0])) { |
||||
}, |
phxs = phxsTemp |
||||
xAxis: { |
} |
||||
type: 'category', |
} |
||||
boundaryGap: false, |
console.log('平衡系数', phxs) |
||||
data: ['0', '10', '20', '30', '40', '45', '50', '60'] |
this.$emit('loadPhxs', phxs) |
||||
}, |
}, |
||||
yAxis: { |
crossPointX(line1x1, line1y1, line1x2, line1y2, line2x1, line2y1, line2x2, line2y2) { |
||||
type: 'value' |
return (line1x1 * (line1y2 - line1y1) / (line1x2 - line1x1) - line2x1 * (line2y2 - line2y1) / (line2x2 - line2x1) + line2y1 - line1y1) / |
||||
}, |
((line1y2 - line1y1) / (line1x2 - line1x1) - (line2y2 - line2y1) / (line2x2 - line2x1)) |
||||
series: [ |
}, |
||||
{ |
initChart() { |
||||
name: '上行', |
let option |
||||
type: 'line', |
if (this.chart) { |
||||
stack: '总量', |
option = this.chart.getOption() |
||||
data: this.data |
option.series[0].data = this.chartDataX |
||||
}, |
option.series[1].data = this.chartDataY |
||||
{ |
this.chart.setOption(option) |
||||
name: '下行', |
return |
||||
type: 'line', |
} |
||||
stack: '总量', |
this.chart = echarts.init(document.getElementById('chart')) |
||||
data: this.data1 |
option = { |
||||
} |
title: { |
||||
] |
text: '电流（A）' |
||||
} |
}, |
||||
myChart.setOption(option) |
tooltip: { |
||||
this.imgPath = myChart.getDataURL({ |
trigger: 'axis' |
||||
type: 'png', |
}, |
||||
pixelRatio: 1, |
legend: { |
||||
backgroundColor: '#fff' |
data: ['上行', '下行'] |
||||
}) |
}, |
||||
} |
grid: { |
||||
|
left: '3%', |
||||
} |
right: '4%', |
||||
} |
bottom: '3%', |
||||
</script> |
containLabel: true |
||||
|
}, |
||||
<style scoped> |
toolbox: { |
||||
.searchBox { |
feature: { |
||||
display: flex; |
saveAsImage: {} |
||||
flex-direction: row; |
} |
||||
margin-bottom: 20px; |
}, |
||||
} |
xAxis: { |
||||
</style> |
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
data: this.xAxis |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
min: 0, |
||||
|
max: 30, |
||||
|
splitNumber: 15 |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '上行', |
||||
|
type: 'line', |
||||
|
data: this.chartDataX |
||||
|
}, |
||||
|
{ |
||||
|
name: '下行', |
||||
|
type: 'line', |
||||
|
data: this.chartDataY |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
this.chart.setOption(option) |
||||
|
this.imgPath = this.chart.getDataURL({ |
||||
|
type: 'png', |
||||
|
pixelRatio: 1, |
||||
|
backgroundColor: '#fff' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -1,82 +1,45 @@ |
|||||
<template> |
<template> |
||||
<div class="app-container"> |
<div class="app-container"> |
||||
<el-table :data="tableData" style="width: 50%" border> |
<el-table :data="tableData" style="width: 50%"> |
||||
<el-table-column label="" prop="D2" /> |
<el-table-column label="" prop="D2" /> |
||||
<el-table-column label="制停距离（m）" prop="D1"> |
<el-table-column label="制停距离（m）" prop="D1"> |
||||
<template slot-scope="scope"> |
<template slot-scope="scope"> |
||||
<el-input v-model="scope.row.D1" /> |
<el-input v-model="scope.row.D1" /> |
||||
</template> |
</template> |
||||
</el-table-column> |
</el-table-column> |
||||
</el-table> |
</el-table> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: 'Table2', |
name: 'ZdftFb', |
||||
components: {}, |
components: {}, |
||||
props: { |
props: { |
||||
tabelHeader: { |
tableData: { |
||||
type: Array, |
type: Array, |
||||
require: true, |
required: true |
||||
default: () => { |
} |
||||
return [] |
}, |
||||
} |
data() { |
||||
}, |
return { |
||||
tableData: { |
options: [ |
||||
type: Array, |
{ |
||||
require: true, |
value: '√', |
||||
default: () => { |
id: '1' |
||||
return [] |
}, |
||||
} |
{ |
||||
} |
value: 'X', |
||||
}, |
id: '2' |
||||
data() { |
}, |
||||
return { |
{ |
||||
options: [ |
value: '/', |
||||
{ |
id: '3' |
||||
value: '√', |
} |
||||
id: '1' |
] |
||||
}, |
} |
||||
{ |
} |
||||
value: 'X', |
} |
||||
id: '2' |
</script> |
||||
}, |
|
||||
{ |
<style scoped> |
||||
value: '/', |
</style> |
||||
id: '3' |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
}, |
|
||||
computed: {}, |
|
||||
created() { |
|
||||
this.tableData = [ |
|
||||
{ |
|
||||
D1: '', |
|
||||
D2: '第一行' |
|
||||
}, |
|
||||
{ |
|
||||
D1: '', |
|
||||
D2: '第二行' |
|
||||
}, |
|
||||
{ |
|
||||
D1: '', |
|
||||
D2: '第三行' |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.searchBox { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
margin-bottom: 20px; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue