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

<!-- 核心设备报表 -->
<template>
  <div class="core-device-report">
    <div class="main-left">
      <Select 
        class="system-select"
        width="217"
        :isReadOnly="true" 
        tipPlace="top" 
        caption="系统名称："
        @change="changeCurSystem" 
        v-model="systemId" 
        :selectdata="systemList"
        :placeholder="'请选择'"
      />
      <div class="system-content">
        <div v-for="(item) in systemContentData" :key="'key_' + item.category_code" class="item-content" :class="{'active': item.isActive}" @click="changeEquipment(item.category_code)">
          <div class="first-row">
            <div>{{item.name}}</div>
            <div>{{item.isMaintenance?'维保中' : ''}}</div>
          </div>
          <div class="sec-row">
            <div>{{item.num}}<span>台</span></div>
            <span :class="{'abnormal': item.abnormal}">{{item.statusNum !== 0?item.statusNum : ''}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="main-right">
      <div class="search-container">
        <Input iconType="search" v-model="searchKey" placeholder="搜索" width="192" @pressEnter="getTableData" @clear="getTableData"/>
      </div>
      <el-table :data="tableData" style="width: 100%;margin-bottom: 63px;" @row-click="showEquipmentStatus">
        <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
        <el-table-column prop="sbjc" label="设备简称"></el-table-column>
        <el-table-column prop="sbjbm" label="设备编号"></el-table-column>
        <el-table-column prop="is_exception" label="状态">
          <template slot-scope="scope">
            <span style="display: inline-block;width: 6px;height:6px;border-radius: 3px;background: #0091FF;" :style="{'background': !scope.row.is_exception?'#0091FF' : '#F54E45'}"></span>
            <span style="margin-left: 10px">{{ !scope.row.is_exception?'正常' : '异常' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="photos_num" label="照片">
          <template slot-scope="scope">
            <span style="color: #025BAA" @click="showPicturesDetail(scope.row, 'equip')">{{ scope.row.photos_num?(scope.row.photos_num + '张') : '—' }}</span>
            <!-- <span style="color: #025BAA" @click="showPicturesDetail(scope.row)">1张</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="attachments_num" label="报告">
          <template slot-scope="scope">
            <span style="color: #025BAA" @click="showReportDetail(scope.row, 'equip')">{{ scope.row.attachments_num?(scope.row.attachments_num+ '张') : '—'}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="tatol"
          :current-page="curPage"
          :page-size="pageSize"
          @current-change="changeTablePage">
        </el-pagination>
      </div>
      <el-dialog :title="equipTitle" :visible.sync="dialogTableVisible" width="1260px">
        <el-date-picker
          style="margin-bottom: 12px;"
          v-model="dialogTime"
          type="daterange"
          range-separator="至"
          @change="changeTime"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-table :data="historyTableData" style="margin-bottom: 55px;" max-height="500">
          <el-table-column width="200" property="finishDate" label="日期"></el-table-column>
          <el-table-column width="100" property="typeName" label="事项类型"></el-table-column>
          <el-table-column property="taskName" label="事项名称"></el-table-column>
          <el-table-column width="100" property="photosNum" label="照片">
            <template slot-scope="scope">
              <span style="color: #025BAA" @click="showPicturesDetail(scope.row, 'his')">{{ scope.row.photosNum || scope.row.photosNum === 0?(scope.row.photosNum + '张') : '—' }}</span>
              <!-- <span style="color: #025BAA" @click="showPicturesDetail(scope.row)">1张</span> -->
            </template>
          </el-table-column>
          <el-table-column width="100" property="attachmentsNum" label="报告">
            <template slot-scope="scope">
              <span style="color: #025BAA" @click="showReportDetail(scope.row, 'his')">{{ scope.row.attachmentsNum?(scope.row.attachmentsNum+ '张') : '—'}}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="hisCurPage"
            :page-size="hisPageSize"
            :total="hisTotal"
            @current-change="changeHisTablePage">
          </el-pagination>
        </div>
      </el-dialog>
      <div class="img-detail-container">
        <el-dialog :title="detailTitle" :visible.sync="showDetail" width="1260px">
          <div class="detail-container">
            <div class="pictures-menu">
              <div v-for="(item) in pictureList" :key="'id_' + item.id" class="item" @click="changeCurImg(item.id)" :class="{'active': item.isActive}">
                <img :src="item.url" alt="">
                <div class="name" :title="item.name">{{item.name}}</div>
              </div>
            </div>
            <div class="cur-img-container">
              <img :src="curImg.url" alt="">
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { Select, Input } from 'meri-design';
import { querySystemList, queryEquipmentList, queryTableData, queryHistoryTableData, queryDetailData } from '../../api/coreDeviceReport';
import _ from 'lodash';
import moment from 'moment';
import { log } from 'util';
export default {
  data () {
    return {
      systemId: '', // 当前系统Id
      systemList: [], // 系统
      systemContentData: [
        // {id: 1, name: '高压配电柜', isMaintenance: true, num: 95, statusNum: 0, abnormal: false, isActive: true},
        // {id: 2, name: '变压器', isMaintenance: false, num: 256, statusNum: 12, abnormal: true, isActive: false},
        // {id: 3, name: '低压配电柜', isMaintenance: false, num: 354, statusNum: 0, abnormal: false, isActive: false},
        // {id: 4, name: '直流屏', isMaintenance: false, num: 175, statusNum: 0, abnormal: false, isActive: false},
        // {id: 5, name: '柴油发电机组', isMaintenance: false, num: 186, status: 0, abnormal: false, isActive: false},
      ], // 系统下的各种组成
      searchKey: '', // 搜索关键字
      tableData: [
        // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '正常', photo: 5, report: 6},
        // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '异常', photo: 5, report: 6},
        // {serialNumber: 1, equipmentName: 2, equipmentNumber: 3, status: '正常', photo: 5, report: 6},
      ], // 表数据
      curPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      tatol: 0, // 总数据
      dialogTableVisible: false, // 弹窗显示状态

      // 核心设备实例
      equipTitle: '', // 核心设备弹窗名称
      assetnum: null, // 设备台账编码
      historyTableData: [], // 核心设备实例的所有历史事项信息
      dialogTime: null, // 弹框内的时间
      hisCurPage: 1, // 当前页码
      hisPageSize: 8, // 当前页码
      hisTotal: 0, // 总条数
      startTime: null, // 开始时间
      endTime: null, // 结束事件

      showDetail: false, // 显示照片、报告详情
      detailTitle: '图片预览', // 弹窗名称
      pictureList: [
        // {id: 1, url: require('../../assets/images/login_back.png'), name: '图层名称1.jpg'},
        // {id: 2, url: require('../../assets/images/matter_pop3.png'), name: '图层名称2.jpg'},
        // {id: 3, url: require('../../assets/images/login_back.png'), name: '图层名称3.jpg'},
      ], // 图片列表
      curImg: {}, // 当前图片
    }
  },

    components: {
        Select,
        Input
    },

    computed: {},

  mounted() {
    this.getSystemList();
    // this.getEquipmentOfSystem();
    
  },

  methods: {
    /**
     * 获取系统列表数据
     */
    getSystemList() {
      querySystemList().then((res) => {
        if (res.result === 'success') {
          let data = res.data;
          let newData = [];
          _.forEach(data, (item) => {
            newData.push({
              id: item.code,
              name: item.name
            })
          })
          this.systemList = newData;
          const { query } = this.$route;
          if (!_.isEmpty(query)) {
            this.systemId = query.smsxt || newData[0].id;
          } else {
            this.systemId = newData[0].id;
          }
          this.getEquipmentOfSystem();
        }
      })
    },
    /**
     * 切换系统名称
     */
    changeCurSystem(val) {
      console.log('val', val)
      this.getEquipmentOfSystem();
    },
    /**
     * 获取系统下的设备
     */
    getEquipmentOfSystem() {
      let param = {
        plazaId: 1000423,
        ccode: 1002347,
        smsxt: this.systemId
      }
      queryEquipmentList('/data/home/querySystemCard', param).then((res) => {
        const { result, data } = res;
        if (result === 'success') {
          let newData = [], abnormalList = [];

          _.forEach(data[0].assetTypeList, (item, index) => {
            let itemData = {
              name: item.category_name,
              isMaintenance: item.is_detecting,
              statusNum: item.is_exception_num,
              num: item.asset_num,
              abnormal: item.is_exception_num !== 0,
              category_code: item.category_code
            }
            if (item.is_exception_num === 0) {
              newData.push(itemData)
            } else {
              abnormalList.push(itemData);
            }
          })
          newData = abnormalList.concat(newData);
          _.map(newData, (o, i) => {return o.isActive = i === 0});
          const { query } = this.$route;
          this.systemContentData = newData;
          if (!_.isEmpty(query) && query.equipId) {
            _.map(this.systemContentData, (o) => {return o.isActive = o.id == query.equipId});
          }
          this.getTableData();
        }
      })
    },
    /**
     * 切换系统下的设备
     */
    changeEquipment(id) {
      _.map(this.systemContentData, (o) => {return o.isActive = o.category_code === id});
      this.getTableData();
    },
    /**
     * 获取表数据
     */
    getTableData() {
      let query = {
        category_code: _.find(this.systemContentData, (o) => {return o.isActive}).category_code
      }
      let url = `/data/glsms_asset/query?plazaId=1000423&page=${this.curPage}&size=${this.pageSize}&orderBy=is_exception,0`;
      if (_.trim(this.searchKey) !== '') {
        url = `${url}&keyword=${this.searchKey}:sbjc,sbjbm`
      }
      queryTableData(url, query).then((res) => {
        const { result, count, data } = res;
        if (result === 'success') {
          this.tatol = count;
          this.tableData = data;
        }
      })
    },
    /**
     * 表第一列序号
     */
    indexMethod(index) {
      return index + 1;
    },
    /**
     * 切换页码
     */
    changeTablePage(page) {
      this.curPage = page;
      this.getTableData();
    },
    /**
     * 显示设备实例的维保、专维等状态
     */
    showEquipmentStatus(row, column, e) {
      setTimeout(() => {
        if (this.showDetail) return
        this.equipTitle = row.sbjc;
        this.dialogTableVisible = true;
        this.assetnum = row.assetnum;
        this.initTimePicker();
      }, 36)
    },
    /**
     * 获取核心设备实例的所有历史事项信息
     */
    getEquipmentHistoryMsg() {
      this.historyTableData = [];
      let param = {
        page: this.hisCurPage,
        size: this.hisPageSize,
        plazaId: 1000423,
        // assetnum: this.assetnum,
        assetnum: 24071,
        // startDate: this.startTime,
        startDate: 20000101000000,
        // endDate: this.endTime
        endDate: 20200201000000
      }
      queryHistoryTableData('/data/base/queryDateByAssetNum', param).then((res) => {
        const { result, data, count } = res;
        if (result === 'success') {
          this.historyTableData = data;
          this.hisTotal = count;
          _.forEach(this.historyTableData, (item) => {
            let name;
            switch (item.type) {
              case 0:
                name = '专维'
                break
              case 1:
                name = '维保专业'
                break
              case 2:
                name = '第三方视图'
                break
            }
            item.typeName = name;
            item.finishDate = moment.unix(item.finishDate / 1000).format('YYYY.MM.DD');
          })
        }
      })
    },
    /**
     * 初始化时间选择器
     */
    initTimePicker() {
      let endTime = new Date(),
          startTime = new Date(endTime.getTime() - 1000*60*60*24*30);
      this.dialogTime = [startTime, endTime];
      this.changeTime();
    },
    /**
     * 切换时间
     */
    changeTime() {
      this.hisCurPage = 1;
      if (this.dialogTime) {
        this.startTime = moment.unix(new Date(this.dialogTime[0]).getTime() / 1000).format('YYYYMMDDHHmmss');
        this.endTime = moment.unix(new Date(this.dialogTime[1]).getTime() / 1000).format('YYYYMMDDHHmmss');
      } else {
        this.initTimePicker();
      }
      this.getEquipmentHistoryMsg();
    },
    /**
     * 切换设备台账下所有历史事项信息页码
     */
    changeHisTablePage(page) {
      this.hisCurPage = page;
      this.getEquipmentHistoryMsg();
    },
    /**
     * 显示图片详情
     */
    showPicturesDetail(val, type) {
      console.log('val', val)
      if (type === 'equip') {
        if (!val.file_type || !val.file_type_id) {
          return
        }
      } else {
        if (!val.photosNum) {
          return
        }
      }
      this.showDetail = true;
      this.detailTitle = '图片预览';
      this.getDetailData(val);
    },
    /**
     * 显示附件详情
     */
    showReportDetail(val) {
      console.log('val', val)
      if (type === 'equip') {
        if (!val.file_type || !val.file_type_id) {
          return
        }
      } else {
        if (!val.attachments_num) {
          return
        }
      }
      this.showDetail = true;
      this.detailTitle = '附件预览';
      this.getDetailData(val);
    },
    /**
     * 获取图片/报告详情
     */
    getDetailData(val, type) {
      let param = {
        file_type: type === 'equip'?val.file_type : val.type, 
        // file_type: 0,
        file_type_id: type === 'equip'?val.file_type_id : val.id,
        // file_type_id: 2914,
        type: this.detailTitle === '图片预览'? 0 : 1
      }
      queryDetailData('/data/base/queryFileDetails', param).then((res) => {
        console.log('res', res)
        const { result, data } = res;
        if (result === 'success') {
          let newData = [];
          _.forEach(data, (item, index) => {
            newData.push({
              id: item.id,
              url: item.urlname,
              isActive: index === 0,
              name: item.description
            })
          })
          if (this.detailTitle === '图片预览') {
            this.pictureList = newData;
            this.curImg = this.pictureList[0];
          } else {
            
          }
        }
      })
    },
    /**
     * 切换当前预览大图
     */
    changeCurImg(id) {
      _.map(this.pictureList, (o) => {return o.isActive = o.id === id});
      this.curImg = _.find(this.pictureList, (o) => {return o.isActive});
    }
  }
}
</script>

<style lang='less' scoped>
.core-device-report {
    display: flex;
    width: 100%;
    height: 100%;
    .main-left {
        padding-left: 16px;
        padding-right: 14px;
        padding-top: 12px;
        padding-bottom: 12px;
        width: 247px;
        border-top: 1px solid #e4e6e7;
        border-right: 1px solid #e4e6e7;
        .system-select {
            margin-bottom: 16px;
        }
        .item-content {
            padding-left: 12px;
            padding-right: 21px;
            padding-top: 7px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e4e6e7;
            cursor: pointer;
            > div {
                display: flex;
            }
            .first-row {
                margin-bottom: 6px;
                display: flex;
                justify-content: space-between;
                > div:first-child {
                    font-size: 14px;
                    color: #1f2429;
                    line-height: 19px;
                }
                > div:nth-of-type(2) {
                    margin-left: 8px;
                    font-size: 12px;
                    color: #cd981d;
                    line-height: 20px;
                }
            }
            .sec-row {
                margin-bottom: 6px;
                > div:first-child {
                    font-size: 14px;
                    color: #1f2429;
                    line-height: 19px;
                    > span {
                        font-size: 12px;
                        color: #646c73;
                    }
                }
                // >div:nth-of-type(2){
                //   padding-left: 8px;
                //   padding-right: 8px;
                //   font-size: 12px;
                //   color: #0065B3;
                //   line-height: 22px;
                //   background: #E1F2FF;
                // }
                .abnormal {
                    margin-left: 11px;
                    padding-left: 3px;
                    padding-right: 3px;
                    font-size: 12px;
                    color: #f54e45 !important;
                    background: #fde3e2 !important;
                    border-radius: 9px;
                }
            }
        }
        .system-content {
            .active {
                background: #e5eef5;
                border-radius: 2px;
                .first-row > div:first-child,
                .sec-row > div {
                    color: #025baa;
                    > span {
                        color: #025baa;
                    }
                }
            }
        }
    }
    .main-right {
        flex: 1;
        background: #fff;
        padding-left: 15px;
        padding-right: 13px;
        padding-top: 13px;
        padding-bottom: 25px;
        .search-container {
            margin-bottom: 12px;
        }
        .page {
            display: flex;
            justify-content: flex-end;
        }
    }
    .el-dialog{
      min-height: 600px;
    }
    .detail-container{
      display: flex;
      height: 600px
    }
    .pictures-menu{
      margin-right: 21px;
      padding-top: 16px;
      padding-bottom: 16px;
      width: 180px;
      height: 100%;
      overflow: auto;
      .item{
        >img{
          width: 180px;
          border: 4px solid rgba(245,246,247,1);
          border-radius: 4px;
        }
        .name{
          font-size: 12px;
          color: #1F2429;
          line-height: 16px;
          margin-top: 12px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &:not(:last-of-type){
          margin-bottom: 20px;
        }
      }
      .active>img{
        border-color: rgba(31, 35, 41, 0.15);
      }
    }
    .cur-img-container{
      padding: 20px;
      flex: 1;
      height: 100%;
      background: #F5F6F7;
      display: flex;
      justify-content: center;
      align-items: center;
      >img{
        max-width: 730px;
        max-height: 530px;
      }
    }
  }
</style>