jg-chemical-client2/src/views/Data.vue

<template>
  <div class="realtime-data" style="height: auto">
    <navigation-name :msg="companyName" show-time show-other>
      <div style="margin-left: 20px;">
        <el-select
          v-model="localAcquisitionStationId"
          popper-class="jg-select"
          :popper-append-to-body="false"
          placeholder="采集站数据"
          @change="changeAcquisitionStation"
        >
          <el-option
            v-for="(item, index) in acquisitionStationList"
            :key="index"
            :label="item.name"
            :value="item.id"/>
        </el-select>
      </div>
    </navigation-name>
    <div style="font-weight: bolder;font-size: 30px;padding-top: 16px;text-align: center">
      {{ factoryName }}
      <!--数据显示-->
    </div>
    <br/>
<!--    <div>{{ tableLoading }}</div>-->
    <el-table
      :data="tableData"
      height="100%"
      :span-method="objectSpanMethod"
      :header-cell-style="{
        background: '#BFBFBF',
        boxShadow: 'inset grey 0px -1px',
        color: '#333333',
        borderColor: '#eaeaea',
        fontSize: '20px',
      }"
      :cell-style="{
        background: '#f6f5f5',
        color: '#333333',
        borderColor: '#eaeaea',
        fontSize: '18px',
        cursor: 'pointer',
      }"
      @row-click="rowClick"
      row-key="id"
      border
      stripe
      style="width: 100%; background-color: inherit;min-height: 820px;">
      <el-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :column-key="item.prop"
        :label="item.label"
        :width="item.width"
        :class-name="item.className"
        :align="item.align ? item.align : 'center'"
      >
        <template slot-scope="scope">
          <div v-if="item.prop === 'status'" style="display: flex;justify-content: center">
            <div v-if="scope.row[item.prop] === 1" style="display: flex;align-items: center;">
              <div style="height: 16px;width: 16px;border-radius: 50%;background-color: #5daf34"/>
              <div style="margin-left: 16px">正在运行</div>
            </div>
            <div v-else-if="scope.row[item.prop] === 0" style="display: flex;align-items: center;">
              <div style="height: 16px;width: 16px;border-radius: 50%;background-color: #f1092b"/>
              <div style="margin-left: 16px">停止运行</div>
            </div>
            <div v-else-if="scope.row[item.prop] === -1" style="display: flex;align-items: center;">
              <div style="height: 16px;width: 16px;border-radius: 50%;background-color: #0930f1"/>
              <div style="margin-left: 16px">RTU模块连接异常</div>
            </div>
          </div>
          <div v-else>{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>

    </el-table>
    <position-modal ref="positionModal" :message="realtimeData"/>
  </div>
</template>

<script>
import NavigationName from '@/components/NavigationName'
import PositionModal from '@/components/PositionModal'

import { mapState, mapMutations } from 'vuex'
import { findEntityByAcqId } from '@/api/CollectEntity'
import { findColumnsByTableName } from '@/api/TableConfig'
import { findAll, updateAcquisitionStation } from '@/api/AcquisitionStation'

export default {
  name: 'Data',
  components: {
    PositionModal,
    NavigationName
  },
  data() {
    return {
      tableColumns: [],
      tableDataWrapper: [],
      acquisitionStationList: [],
      localAcquisitionStationId: null,
    }
  },
  mounted () {
    this.fetchData()
  },
  watch: {
    acquisitionStationId: {
      handler(newVal) {
        this.localAcquisitionStationId = newVal
      },
      immediate: true
    }
  },
  computed: {
    ...mapState({
      clientCode: (state, getter) => state.company.clientCode,
      companyName: (state, getter) => state.company.companyName,
      factoryName: (state, getter) => state.company.factoryName,
      realtimeData: (state, getter) => state.queue.realtimeData,
      acquisitionStationId: state => state.company.acquisitionStationId,
    }),
    tableData() {
      const tableDataWrapper = this.tableDataWrapper
      if (this.realtimeData) {
        for (const item of tableDataWrapper) {
          for (const msg of this.realtimeData) {
            if (msg.collectEntityId === item.id + '') {
              item[msg.tableColumn] = msg.value
            }
          }
          item.status = item.FEEDBACK
        }
        return tableDataWrapper
      } else {
        return []
      }
    },
    tableLoading() {
      return !this.tableData || this.tableData.length <= 0
    },
  },
  methods: {
    ...mapMutations(['SET_ACQUISITION_STATION_ID', 'SET_ACQUISITION_STATION', 'SET_WORKSHOP_NAME']),
    getPositionArr() {
      const obj = {}
      this.tableData.forEach(e => {
        if (obj[e.first]) {
          obj[e.first] += 1
        } else {
          obj[e.first] = 1
        }
      })
      const arr = []
      for (const key in obj) {
        const cc = new Array(obj[key]).fill(0)
        cc[0] = obj[key]
        arr.push(...cc)
      }
      return arr
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const rowspan = this.getPositionArr()[rowIndex]
        return {
          rowspan,
          colspan: 1
        }
      }
    },

    objectSpanMethod261({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const rowspan = this.getPositionArr()[rowIndex]
        return {
          rowspan,
          colspan: 1
        }
      }
      if (columnIndex === 1 || columnIndex === 5) {
        if (rowIndex === 0 || rowIndex === 3) {
          return {
            rowspan: 2,
            colspan: 1
          }
        }
        if (rowIndex === 1 || rowIndex === 4) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    objectSpanMethod262({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const rowspan = this.getPositionArr()[rowIndex]
        return {
          rowspan,
          colspan: 1
        }
      }
      if (columnIndex === 1 || columnIndex === 5) {
        if (rowIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        }
        if (rowIndex === 1) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
        if (rowIndex === 2) {
          return {
            rowspan: 3,
            colspan: 1
          }
        }
        if (rowIndex === 3 || rowIndex === 4) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    objectSpanMethod275({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const rowspan = this.getPositionArr()[rowIndex]
        return {
          rowspan,
          colspan: 1
        }
      }
      if (columnIndex === 1 || columnIndex === 5) {
        if (rowIndex === 1 || rowIndex === 5 || rowIndex === 7) {
          return {
            rowspan: 2,
            colspan: 1
          }
        }
        if (rowIndex === 2 || rowIndex === 6 || rowIndex === 8) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    rowClick(row, column, event) {
      // console.log(row, column, event)
      let entity = {}
      for (const e of this.tableDataWrapper) {
        if (e.id === row.id) {
          entity = { ...row }
        }
      }
      this.$refs.positionModal.showModal(row.id, entity)
    },
    async fetchData() {
      await findAll().then(res => {
        this.acquisitionStationList = res.data
      })
      await findColumnsByTableName({
        tableName: 'Data',
        clientCode: this.clientCode
      }).then(res => {
        console.log('findColumnsByTableName =>', res.data)
        if (res && res.code === '200') {
          this.tableColumns = res.data
        } else {
          this.$message.error(res.message)
        }
      })
      await this.getCollectEntity()
    },
    getCollectEntity() {
      const entityParams = {
        acquisitionStationId: this.acquisitionStationId
      }
      findEntityByAcqId(entityParams).then(res => {
        console.log('findEntityByAcqId =>', res.data)
        // 按照实体分类, 对应第二列
        const tableDataWrapper = []
        handleData(tableDataWrapper, res.data)
        setOperate275(tableDataWrapper)
        this.tableDataWrapper = tableDataWrapper
      })
      const handleData = (dataArr, data) => {
        for (const item of data) {
          const obj = {
            id: item.id,
            first: item.acquisitionStationName,
            second: item.entityName,
            startType: item.startType,
            limitValue: item.limitValue,
            tagList: item.collectEntityTagVoList,
          }
          if (item.collectEntityTagVoList && item.collectEntityTagVoList.length > 0) {
            for (const e of item.collectEntityTagVoList) {
              obj[e.tableColumn] = '0.9'
            }
            dataArr.push(obj)
          }
        }
      }
      const setOperate275 = tableDataWrapper => {
        tableDataWrapper.forEach((tableData, index) => {
          switch (index) {
            case 0:
              tableData.remark = '硝化一间'
              break
            case 1:
              tableData.remark = '硝化二间'
              break
            case 3:
              tableData.remark = '转晶一间'
              break
            case 4:
              tableData.remark = '转晶二间'
              break
            case 5:
              tableData.remark = '球形一间'
              break
            case 7:
              tableData.remark = '球形二间'
              break
            default:
              break
          }
        })
      }
      const setOperate262 = tableDataWrapper => {
        tableDataWrapper.forEach((tableData, index) => {
          switch (index) {
            case 0:
              tableData.remark = '东间'
              break
            case 2:
              tableData.remark = '西间'
              break
            default:
              break
          }
        })
      }
      const setOperate261 = tableDataWrapper => {
        tableDataWrapper.forEach((tableData, index) => {
          switch (index) {
            case 0:
              tableData.remark = '硝化一间'
              break
            case 2:
              tableData.remark = '硝化二间'
              break
            case 3:
              tableData.remark = '转晶一间'
              break
            case 5:
              tableData.remark = '转晶二间'
              break
            default:
              break
          }
        })
      }
    },
    async changeAcquisitionStation(acquisitionStationId) {
      console.log('切换采集站', acquisitionStationId)
      this.SET_ACQUISITION_STATION_ID(acquisitionStationId)
      const params = {
        id: acquisitionStationId,
        status: 1
      }
      await updateAcquisitionStation(params).then(res => {
        this.getCollectEntity()
        this.SET_ACQUISITION_STATION(res.data)
        this.SET_WORKSHOP_NAME(res.data.name)
      })
    },
  },
}
</script>

<style lang="less" scoped>
  .realtime-data {
    padding: 0 40px;
    height: 80vh;

    .el-table {
      box-shadow: 1px 1px 1px #BFBFBF, -1px -1px -1px #666666;
    }

    /deep/ .el-table .cell {
      white-space: pre-line;
    }

    .el-table--border, .el-table--group {
      border-radius: 10px;
    }

    /deep/ .el-table__row {
      .first-column {
        background-color: #d9d9d9 !important;
        box-shadow: inset #BFBFBF -1px -1px;
        cursor: default;
        // 取消点击事件
        pointer-events: none;
      }
    }

    /deep/ .el-dialog {
      position: relative;
      margin: 0 !important;
      background: #FFF;
      border-radius: 2px;
      box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
      box-sizing: border-box;
      width: 50%;
      height: 100%;
    }
  }
  /deep/ .el-input__inner {
    background-color: #ebebeb;
    box-shadow: inset 0.1rem 0.1rem 0.1rem #AAA7A7, inset -0.1rem -0.1rem 0.1rem #FFFFFF;
    border: none;
    font-size: 16px;
    color: #666666;
  }

  /deep/ .el-input-group__append, .el-input-group__prepend {
    background-color: transparent;
    font-size: 14px;
    box-shadow: 0.1rem 0.1rem 0.1rem #aaa7a7, -0.05rem -0.05rem 0.05rem #FFFFFF;
    color: #333333;
    border: none;
    border-radius: 4px;
    padding: 0 10px;
    width: 1px;
    white-space: nowrap;
  }

  /deep/ .jg-select {
    padding: 10px;
    background-color: #ebebeb;
    box-shadow: 0.1rem 0.1rem 0.1rem #AAA7A7, -0.1rem -0.1rem 0.1rem #FFFFFF;

    .el-select-dropdown__item {
      box-shadow: 0.1rem 0.1rem 0.1rem #AAA7A7, -0.1rem -0.1rem 0.1rem #FFFFFF;
      margin: 8px 3px;
      border-radius: 5px;
    }
  }

  /deep/ .el-select-dropdown__item.selected {
    font-weight: normal;
    color: #FFFFFF;
    background-color: #A20D13;
    border-radius: 5px;
    box-shadow: inset 0.2rem 0.2rem 0.5rem #6E090C, inset -0.2rem -0.2rem 0.5rem #C71016;
  }

  /deep/ .popper__arrow {
    display: none;
  }

</style>