Tmr-Multilingual/src/views/statisticalAnalysis/errorAnalysis/pasture/see.vue

<template>
  <div v-if="visible">
    <el-dialog id="reviseplanDialog" :title="title" :fullscreen="dialogFull" :destroy-on-close="true" :visible.sync="visible" :close-on-click-modal="false" append-to-body :before-close="closeDialog" width="90%">
      <template slot="title">
        <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">
            <span style="display:inline-block;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px" />
            {{ title }}
          </span>
          <div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
            <svg-icon v-if="dialogFull" icon-class="exit-fullscreen" />
            <svg-icon v-else icon-class="fullscreen" />
          </div>
        </div>
      </template>
      <div class="see" style="max-height: 600px;overflow-y: auto;overflow-x: hidden">
        <el-row :gutter="10">
          <el-col :span="10">
            <div class="train">
              <h4>{{ $t('errorAnalysis.ccxx') }}</h4>
              <div class="table">
                <el-table
                  :key="table1.tableKey"
                  v-loading="table1.listLoading"
                  :element-loading-text="$t('common.tableMsg')"
                  :data="table1.list"
                  border
                  fit
                  highlight-current-row
                  style="width: 98%;"
                  :row-style="rowStyle"
                  :cell-style="cellStyle"
                  class="elTable table-fixed"
                  @row-click="rowClick"
                >
                  <el-table-column :label="$t('formulationEvaluation.xh')" align="center" type="index" width="50" />
                  <el-table-column :label="$t('dailyExecutionPlan.jhmc')"  min-width="60px" align="center" prop="projname" />
                  <el-table-column :label="$t('errorAnalysis.tmrnames')" min-width="60px" align="center" prop="tmrtname" />
                  <el-table-column sortable :label="$t('errorAnalysis.zdrq')" min-width="70px" align="center" prop="mydate" />
                  <el-table-column sortable :label="$t('errorAnalysis.startTime')"  min-width="70px" align="center" prop="intime" />
                </el-table>
              </div>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="mixture">
              <h4>{{$t('errorAnalysis.hlxx')}}</h4>
              <div class="table">
                <el-table
                  :key="table2.tableKey"
                  v-loading="table2.listLoading"
                  :element-loading-text="$t('common.tableMsg')"
                  :data="table2.list"
                  border
                  fit
                  highlight-current-row
                  style="width: 98%;"
                  :row-style="rowStyle"
                  :cell-style="cellStyle"
                  class="elTable table-fixed"
                >
                  <el-table-column :label="$t('errorAnalysis.czNum')"  min-width="50px" align="center" prop="sort" />
                  <el-table-column :label="$t('InventoryManagement.silc')"    min-width="50px" align="center" prop="fname" />
                  <el-table-column :label="$t('errorAnalysis.jhzl')" min-width="50px" align="center" prop="lweight" />
                  <el-table-column  :label="$t('errorAnalysis.acWeight')"  min-width="50px" align="center" prop="actualweightminus" />
                  <el-table-column :label="$t('errorAnalysis.wcz')" min-width="50px" align="center" prop="diff" />
                  <el-table-column :label="$t('errorAnalysis.zql')" min-width="50px" align="center" prop="diffRate" />
                  <el-table-column :label="$t('errorAnalysis.wcsj')" min-width="50px" align="center" prop="intime" />
                  <el-table-column :label="$t('errorAnalysis.gcsj')" min-width="50px" align="center" prop="proesstime" />
                  <el-table-column :label="$t('errorAnalysis.ksdqzl')" min-width="50px" align="center" prop="lastactualweight" />
                  <el-table-column :label="$t('errorAnalysis.zhdqzl')" min-width="50px" align="center" prop="actualweight" />
                  <el-table-column :label="$t('errorAnalysis.qlfs')" min-width="50px" align="center" prop="buttontype" />
                </el-table>
              </div>
            </div>
            <div class="spreading">
              <h4>{{$t('errorAnalysis.slxx')}}</h4>
              <div class="table">
                <el-table
                  :key="table3.tableKey"
                  v-loading="table3.listLoading"
                  :element-loading-text="$t('common.tableMsg')"
                  :data="table3.list"
                  border
                  fit
                  highlight-current-row
                  style="width: 98%;"
                  :row-style="rowStyle"
                  :cell-style="cellStyle"
                  class="elTable table-fixed"
                >
                  <el-table-column :label="$t('errorAnalysis.czNum')"  min-width="50px" align="center" prop="sort" />
                  <el-table-column  :label="$t('errorAnalysis.isHouseName')"  min-width="50px" align="center" prop="fname" />
                  <el-table-column :label="$t('errorAnalysis.jhzl')" min-width="50px" align="center" prop="lweight" />
                  <el-table-column  :label="$t('errorAnalysis.acWeight')"  min-width="50px" align="center" prop="actualweightminus" />
                  <el-table-column :label="$t('errorAnalysis.wcz')" min-width="50px" align="center" prop="diff" />
                  <el-table-column :label="$t('errorAnalysis.zql')" min-width="50px" align="center" prop="diffRate" />
                  <el-table-column :label="$t('errorAnalysis.wcsj')" min-width="50px" align="center" prop="intime" />
                  <el-table-column :label="$t('errorAnalysis.gcsj')" min-width="50px" align="center" prop="proesstime" />
                  <el-table-column :label="$t('errorAnalysis.ksdqzl')" min-width="50px" align="center" prop="lastactualweight" />
                  <el-table-column :label="$t('errorAnalysis.zhdqzl')" min-width="50px" align="center" prop="actualweight" />
                  <el-table-column :label="$t('errorAnalysis.qlfs')" min-width="50px" align="center" prop="buttontype" />
                </el-table>
              </div>
            </div>
            <div class="controlChart">
              <h4>{{$t('errorAnalysis.kzt')}}</h4>
              <div id="chartLine" style="width: 100%;height:300px;" />
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelClose cancelClose1" @click="closeDialog()">{{$t('common.closed')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import Cookies from 'js-cookie'
import { GetDataByName, GetReportform, formatNum } from '@/api/common'
export default {
  name: 'See',
  props: {
    show: { type: Boolean, default: false }, // 弹框可见标志
    titleFname: { type: String, defalut: '' },
    methodName:{ type: String, defalut: '' },
    rowPid: { type: String, defalut: '0' },
    optdevice: { type: String, defalut: '' },
    startTime:{ type: String, defalut: '' },
    stopTime:{ type: String, defalut: '' },
    error:{type: String, defalut: '' }
  },
  data() {
    return {
      dialogFull: false,
      visible: this.show,
      title: '',
      pid: '',
      methodname:'',
      optdevice1:'',
      startTime1:'',
      stopTime1:'',
      error1:'',
      table1: {
        getdataListParm: {
          name: '', page: 1, offset: 1, pagecount: '', returntype: 'Map',
          parammaps: { pid: '', optdevice:'', startTime:'', stopTime:'',pastureid: '' }
        },
        tableKey: 0, list: [], total: 0, listLoading: false
      },
      table2: {
        getdataListParm: {
          name: 'getprocessAnalysisHL', page: 1, offset: 1, pagecount: '', returntype: 'Map',
          parammaps: { pid: '', pastureid: '' }
        },
        tableKey: 0, list: [], total: 0, listLoading: false
      },
      table3: {
        getdataListParm: {
          name: 'getprocessAnalysisSL', page: 1, offset: 1, pagecount: '', returntype: 'Map',
          parammaps: { pid: '', pastureid: '' }
        },
        tableKey: 0, list: [], total: 0, listLoading: false
      },
      chart1: {
        getdataListParm: {
          name: 'getprocessAnalysisTB', page: 1, offset: 1, pagecount: '', returntype: 'Map',
          parammaps: {
            pid: '', pastureid: ''
          }
        },
        tableKey: 0, list: [], total: 0, listLoading: false, chartLine_data: []
      },
      chartLine: null, chartLine_data: {}, chartName: '',
      // rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' },
      myHeight: document.documentElement.clientHeight - 85 - 200
    }
  },
  watch: {
    // 监听show,visible 随着show变化而变化
    show: {
      immediate: true,
      handler(show) {
        console.log(show, 'show')
        this.visible = show
        if(show == true){
          setTimeout(() => {
            this.getList1()
          }, 500)
        }
      }
    },
    titleFname: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal, 'titleFname')
        this.title = newVal
      }
    },
    rowPid: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal, 'rowPid')
        this.pid = newVal
      }
    },
    methodName: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal, 'methodname')
        this.methodname = newVal
      }
    },
    optdevice: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal, 'optdevice')
        this.optdevice1 = newVal
      }
    },
    startTime: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal, 'startTime')
        this.startTime1 = newVal
      }
    },
    stopTime: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal, 'stopTime')
        this.stopTime1 = newVal
      }
    },
    error: {
      immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal, 'error')
        this.error1 = newVal
      }
    },
  },
  created() {

  },
  mounted() {

  },
  methods: {
    closeDialog() {
      this.dialogFull = false
      this.$emit('update:show', false)
    },
    // TMR设备列表
    getList1() {
      this.table1.listLoading = true
      this.table1.getdataListParm.name = this.methodname
      this.table1.getdataListParm.parammaps.optdevice = this.optdevice1
      this.table1.getdataListParm.parammaps.startTime = this.startTime1
      this.table1.getdataListParm.parammaps.stopTime = this.stopTime1
      this.table1.getdataListParm.parammaps.pid = this.pid
      this.table1.getdataListParm.parammaps.error = this.error1
      this.table1.getdataListParm.parammaps.pastureid = Cookies.get('pastureid')
      GetDataByName(this.table1.getdataListParm).then(response => {
        console.log('车次信息数据', response.data.list)
        if (response.data !== null && response.data.list !== null) {
          this.table1.list = response.data.list
          this.table2.getdataListParm.parammaps.pid = response.data.list[0].pid
          this.table2.getdataListParm.parammaps.pastureid = response.data.list[0].pastureid
          this.table3.getdataListParm.parammaps.pid = response.data.list[0].pid
          this.table3.getdataListParm.parammaps.pastureid = response.data.list[0].pastureid
          this.chart1.getdataListParm.parammaps.pid = response.data.list[0].pid
          this.chart1.getdataListParm.parammaps.pastureid = response.data.list[0].pastureid
        } else {
          this.table1.list = []
          this.table2.getdataListParm.parammaps.pid = ''
          this.table2.getdataListParm.parammaps.pastureid = ''
          this.table3.getdataListParm.parammaps.pid = ''
          this.table3.getdataListParm.parammaps.pastureid = ''
          this.chart1.getdataListParm.parammaps.pid = ''
          this.chart1.getdataListParm.parammaps.pastureid = ''
        }
        this.getList2()
        this.getList3()
        this.getChart1()
        setTimeout(() => {
          this.table1.listLoading = false
        }, 100)
      })
    },
    getList2() {
      this.table2.listLoading = true
      this.table2.getdataListParm.parammaps.error = this.error
      GetDataByName(this.table2.getdataListParm).then(response => {
        console.log('混料信息数据', response.data.list)
        if (response.data !== null && response.data.list !== null) {
          this.table2.list = response.data.list
          var sumlweight = 0
          var sumactualweightminus = 0
          var sumsweight = 0
          var sumproesstime = ''
          for (let i = 0; i < response.data.list.length; i++) {
            if (response.data.list[i].lweight == undefined) { response.data.list[i].lweight = 0 }
            if (response.data.list[i].actualweightminus == undefined) { response.data.list[i].actualweightminus = 0 }
            if (response.data.list[i].sweight == undefined) { response.data.list[i].sweight = 0 }
            sumlweight += parseFloat(response.data.list[i].lweight)
            sumactualweightminus += parseFloat(response.data.list[i].actualweightminus)
            sumsweight += parseFloat(response.data.list[i].sweight)
            sumproesstime = response.data.list[0].sumproesstime
          }
          sumlweight = formatNum(sumlweight, 2)
          sumactualweightminus = formatNum(sumactualweightminus, 2)
          sumsweight = formatNum(sumsweight, 2)
          this.table2.list.push({ 'sort': this.$t('common.sum'), 'lweight': sumlweight, 'actualweightminus': sumactualweightminus, 'sweight': sumsweight, 'proesstime': sumproesstime })
        } else {
          this.table2.list = []
        }
        setTimeout(() => {
          this.table2.listLoading = false
        }, 100)
      })
    },
    getList3() {
      this.table3.listLoading = true
      this.table3.getdataListParm.parammaps.error = this.error
      GetDataByName(this.table3.getdataListParm).then(response => {
        if (response.data !== null && response.data.list !== null) {
          console.log('撒料信息数据', response.data.list)
          this.table3.list = response.data.list
          var sumlweight = 0
          var sumactualweightminus = 0
          var sumsweight = 0
          var sumproesstime = ''
          for (let i = 0; i < response.data.list.length; i++) {
            if (response.data.list[i].lweight == undefined) { response.data.list[i].lweight = 0 }
            if (response.data.list[i].actualweightminus == undefined) { response.data.list[i].actualweightminus = 0 }
            if (response.data.list[i].sweight == undefined) { response.data.list[i].sweight = 0 }
            sumlweight += parseFloat(response.data.list[i].lweight)
            sumactualweightminus += parseFloat(response.data.list[i].actualweightminus)
            sumsweight += parseFloat(response.data.list[i].sweight)
            sumproesstime = response.data.list[0].sumproesstime
          }
          sumlweight = formatNum(sumlweight, 2)
          sumactualweightminus = formatNum(sumactualweightminus, 2)
          sumsweight = formatNum(sumsweight, 2)
          this.table3.list.push({ 'sort': this.$t('common.sum'), 'lweight': sumlweight, 'actualweightminus': sumactualweightminus, 'sweight': sumsweight, 'proesstime': sumproesstime })
        } else {
          this.table3.list = []
        }
        setTimeout(() => {
          this.table3.listLoading = false
        }, 100)
      })
    },
    getChart1() {
      this.chart1.listLoading = true
      this.chart1.getdataListParm.parammaps.error = this.error
      GetReportform(this.chart1.getdataListParm).then(response => {
        if (response.data !== null && response.data.list !== null) {
          this.chart1.list = response.data.data
          console.log('监控图', response.data.list)
          this.chart1.chartLine_data = response.data.list
          this.chart1.total = response.data.total
          this.roadChartLine1(this.chart1.chartLine_data)
        } else {
          this.chart1.list = []
        }
        setTimeout(() => {
          this.chart1.listLoading = false
        }, 100)
      })
    },
    roadChartLine1(chartLine_data) {
      console.log(chartLine_data.data5, 'chartLine_data')
      if (this.chartLine != null) {
        this.chartLine.dispose()
      }
      this.chartLine = echarts.init(document.getElementById('chartLine'))
      var option = {
        title: { text: '', subtext: '' },
        color: ['#ff0000', '#5199e5', '#fdb06a', '#fb8b73'], // 关键加上这句话，legend的颜色和折线的自定义颜色就一致了
        legend: [{
          itemWidth: 20, itemHeight: 7, right: '25%', textStyle: { fontSize: 12 },
          data: [{ name:this.$t('errorAnalysis.sjzl') }, { name:this.$t('errorAnalysis.sjzl1') }]
        }, {
          itemWidth: 20, itemHeight: 15, right: '0', textStyle: { fontSize: 12 },
          data: [
            { name: this.$t('errorAnalysis.stWeight') },
            { name: this.$t('errorAnalysis.edWeight') }
          ]
        }],
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            console.log(params, 'params')
            var tip = params[0].name
            for (let i = 0; i < params.length; i++) {
              if (params[i].seriesName == '设计重量') {
                tip += '<br>' + params[i].seriesName + ':' + params[i].value[1]
              }
              if (params[i].seriesName == '实际重量') {
                tip += '<br>' + params[i].seriesName + ':' + params[i].value[1]
              }
              if (params[i].seriesName == '开始重量') {
                tip += '<br>' + params[i].seriesName + ':' + params[i].value[1]
              }
              if (params[i].seriesName == '结束重量') {
                tip += '<br>' + params[i].seriesName + ':' + params[i].value[1] + '<br>' + params[i].value[2] + params[i].value[3]
              }
            }
            return tip
          }
        },
        calculable: true,
        xAxis: [
          { type: 'category' }
        ],
        yAxis: [{ type: 'value' }],
        toolbox: {
          show: false,
          feature: {
            dataZoom: { realtime: false, yAxisIndex: 'none', },
            restore: {},
          }
        },
        dataZoom:  [
          {type: 'inside'},        //用于添加滚轮缩放
          {type:'slider' },  //用于添加滑动条缩放，
        ],
        series: [
          { symbol: 'none', name: this.$t('errorAnalysis.sjzl1') , type: 'line', data: chartLine_data.data3, itemStyle: { normal: { lineStyle: { color: '#ff0000' }}}},
          { symbol: 'none', name: this.$t('errorAnalysis.sjzl') , type: 'line', step: 'middle', data: chartLine_data.data2 },
          { name: this.$t('errorAnalysis.stWeight') , symbolSize: 10, type: 'scatter', data: chartLine_data.data4 },
          { name: this.$t('errorAnalysis.edWeight') , symbolSize: 10, type: 'scatter', data: chartLine_data.data5 }
        ]
      }
      this.chartLine.setOption(option)
      if (this.chartLine != null ) {
        window.onresize = ()=> {
          this.chartLine.resize()
        }
      }
    },
    rowClick(row, column, event) {
      this.table2.getdataListParm.parammaps.pid = row.pid
      this.table3.getdataListParm.parammaps.pid = row.pid
      this.chart1.getdataListParm.parammaps.pid = row.pid
      this.getList2()
      this.getList3()
      this.getChart1()
    },
    rowStyle({ row, rowIndex }) {
        let stylejson = {};
        if (row.abnormal == 1) {
            stylejson.background = "#fb8072";// 背景颜色
            stylejson.maxHeight = '30px';// 背景颜色
            stylejson.height = '30px';// 背景颜色
            // 也可以修改文字颜色
            return stylejson;
        } else {
            return "";
        }
    },
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table th>.cell{
    padding-left: 0 !important;;
    padding-right: 0 !important;;
  }
  /deep/ .el-table td>.cell{
    padding-left: 0 !important;;
    padding-right: 0 !important;;
  }
</style>