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