equipment/src/views/ysjl/3000/dj/common/phxsb.vue

<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>