You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
227 lines
6.0 KiB
227 lines
6.0 KiB
<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 style="margin-top: 10px;">
|
|
此电梯对重块总数为
|
|
<el-input v-model="ysjlParam.duizhongkuaishu" style="width: 100px" />
|
|
块,对重块总高度为
|
|
<el-input v-model="ysjlParam.duizhongkuaigaodu" style="width: 100px" />
|
|
m,电梯平衡系数为
|
|
<el-input v-model="ysjlParam.pinghengxishu" style="width: 100px" />
|
|
%。
|
|
</div>
|
|
<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
|
|
},
|
|
ysjlParam: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
type: '1',
|
|
options: [
|
|
{
|
|
value: '√',
|
|
id: '1'
|
|
},
|
|
{
|
|
value: '×',
|
|
id: '2'
|
|
},
|
|
{
|
|
value: '/',
|
|
id: '3'
|
|
}
|
|
],
|
|
multipleSelection: [],
|
|
chart: undefined,
|
|
phxsX: [],
|
|
phxsY: [],
|
|
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
|
|
}
|
|
}
|
|
this.$set(this.ysjlParam, 'pinghengxishu', 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.chart.on('finished', () => {
|
|
this.$emit('loadPhxsImage', this.chart.getDataURL({
|
|
type: 'png',
|
|
pixelRatio: 1,
|
|
backgroundColor: '#fff'
|
|
}))
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|
|
|