wanda-bm-guide/src/views/analysis/SpecificationUpdateRecord.vue

<!-- 说明书更新记录 -->
<template>
  <div class="specification-update-record">
    <div class="screening-condition">
      <Select 
        style="margin-right: 12px;"
        width="200"
        :isReadOnly="true" 
        tipPlace="top" 
        caption="事件类型："
        @change="changeTablePage(1)"
        v-model="incidentType" 
        :selectdata="incidentList" 
        :placeholder="'请选择'"
        hideClear
      />
      <el-date-picker
        v-model="timeVal"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="changeTime">
      </el-date-picker>
    </div>
    <el-table :data="tableData" style="margin-bottom: 19px" @row-click="changeToSystem">
      <el-table-column property="time" label="日期"></el-table-column>
      <el-table-column property="evenType" label="事项类型"></el-table-column>
      <el-table-column property="objid" label="编号"></el-table-column>
      <el-table-column property="content" label="更新内容"></el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="curPage"
        :page-size="pageSize"
        :total="tatol"
        @current-change="changeTablePage">
      </el-pagination>
    </div>
  </div>
  
</template>

<script>
import { getSpecificaltionData, queryEventypes } from '../../api/specificationUpdateRecord';
import moment from 'moment';
import _ from 'lodash';
export default {
  data () {
    return {
      plazaId: 1000423, // 广场id
      incidentList: [], // 事件列表
      oraginIncidentList: [
        {id: 'all', name: '全部'},
        {id: 0, name: '专维'},
        {id: 1, name: '维保'},
        {id: 2, name: '第三方检测'},
        {id: 3, name: '重点关注'},
      ], // 事件列表字典表
      incidentType: 'all', // 事件类型
      timeVal: '', // 时间
      tableData: [], // 表数据
      curPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      tatol: 0, // 数据总量
      startTime: null, // 开始时间
      endTime: null, // 结束事件
    }
  },

  components: {},

  computed: {},
  beforeMount() {
    let PLAZAID = localStorage.getItem('PLAZAID');
    this.plazaId = Number(PLAZAID) || 1000423;
  },
  mounted() {
    this.initTimePicker();
    this.getEvenType();
  },

  methods: {
    /**
     * 初始化时间
     */
    initTimePicker() {
      let endTime = new Date(),
          startTime = new Date(endTime.getTime() - 1000*60*60*24*30);
      this.timeVal = [startTime, endTime];
      this.startTime = moment.unix(new Date(startTime).getTime() / 1000).format('YYYYMMDDHHmmss');
      this.endTime = moment.unix(new Date(endTime).getTime() / 1000).format('YYYYMMDDHHmmss');
    },
    /**
     * 获取事件类型
     */
    getEvenType() {
      let query = {
        tableName: 'rpt_change_record',
        columnName: {
          objtype: 'objtype'
        }
      }
      queryEventypes(`/data/base/queryOptions?plazaId=${this.plazaId}`, [query]).then((res) => {
        const { result, data } = res;
        if (result === 'success') {
          let newData = [this.oraginIncidentList[0]];
          if (!_.isEmpty(data)) {
            _.forEach(data.rpt_change_record.objtype, (item) => {
              newData.push({
                id: item.key,
                name: _.find(this.oraginIncidentList, (o) => {return item.key === o.id}).name
              })
            })
            this.incidentList = newData;
            this.getTableData();
          }
        }
      })
    },
    /**
     * 获取表数据
     */
    getTableData() {
      let param = {
        page: this.curPage,
        size: this.pageSize,
        plazaId: this.plazaId,
        changeDateStartDate: this.startTime,
        changeDateEndDate: this.endTime,
      }
      if (this.incidentType !== 'all') {
        param.objtype = this.incidentType;
      }
      getSpecificaltionData('/data/rpt_change_record/query', param).then((res) => {
        const { result, data, count } = res;
        if (result === 'success') {
          this.tatol = count;
          _.map(data, (item) => {
            let text = _.find(this.incidentList, (o) => {return o.id === item.objtype}).name
            item.evenType = text;
            item.time = moment.unix(item.changedate / 1000).format('YYYY.MM.DD')
            return
          })
          this.tableData = data;
        }
      })
    },
    /**
     * 切换页码
     */
    changeTablePage(page) {
      this.curPage = page;
      this.getTableData();
    },
    /**
     * 切换时间
     */
    changeTime() {
      this.curPage = 1;
      if (this.timeVal) {
        this.startTime = moment.unix(new Date(this.timeVal[0]).getTime() / 1000).format('YYYYMMDDHHmmss');
        this.endTime = moment.unix(new Date(this.timeVal[1]).getTime() / 1000).format('YYYYMMDDHHmmss');
      } else {
        this.startTime = 20171027000000;
        this.endTime = 20171028000000;
      }
      this.getTableData();
    },
    /**
     * 跳转到工程信息化系统
     */
    changeToSystem(row) {
      const { objtype } = row;
      let url;
      switch (objtype) {
        case 0: // 专维
          url = `http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=GCZXWXLINE&uniqueid=${row.id}`;
          break
        case 1: // 维保
          let value;
          if (row.apptype === '外委' || row.apptype === '自维') {
            value = 'WB_GZGL';
          } else if (row.apptype === '安全维保') {
            value = 'AQ_WB_GZGL';
          } else {
            return
          }
          url = `http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=${value}&uniqueid=${row.id}`;
          break
        case 2: // 第三方视图
          url = `http://gcgl.wanda.cn/maximo/ui/?event=loadapp&value=DSF_GZGL&uniqueid=${row.id}`;
          break
      }
      window.open(url, '_blank');
    }
  },
}
</script>

<style lang='less' scoped>
.specification-update-record{
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 12px;
  padding-bottom: 20px;
  background: #fff;
  height: 100%;
  width: 100%;
  .screening-condition{
    margin-bottom: 13px;
    display: flex;
  }
  .page{
    display: flex;
    justify-content: flex-end;
  }
}
</style>