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="'请选择'"
        hideClear
      />
      <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="assetnum" 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="(e) => showReportDetail(scope.row, 'equip', e)">{{ scope.row.attachments_num?(scope.row.attachments_num+ '张') : '—'}}</span>
            <!-- <span style="color: #025BAA" @click="(e) => showReportDetail(scope.row, 'equip', e)">1张</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="(e) => showReportDetail(scope.row, 'his', e)">{{ scope.row.attachmentsNum?(scope.row.attachmentsNum+ '张') : '—'}}</span>
              <!-- <span style="color: #025BAA" @click="(e) => showReportDetail(scope.row, 'his', e)">1张</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 v-if="curImg.url" :src="curImg.url" alt />
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
    <div v-show="showAccessory" class="accessory-container" :style="{'top': accessoryPos.top + 'px', 'left': accessoryPos.left + 'px'}">
      <div v-for="(item) in accessoryList" :key="'id_' + item.id">
        <a :href="item.url" target="_blank" :title="item.name">{{item.name}}</a>
      </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: {}, // 当前图片

      showAccessory: false, // 附件窗口显示状态
      isClickAccessory: false, // 是否点击的是附件
      accessoryList: [], // 附件
      accessoryPos: {
        top: 0, 
        left: 0
      }, // 附件弹窗位置
    };
  },

  components: {
    Select,
    Input
  },

  computed: {},

  mounted() {
    document.addEventListener('click', () => {
      setTimeout(() => {
        if (this.isClickAccessory) {
          this.isClickAccessory = false;
          return
        }
        this.showAccessory = false;
      }, 20)
    })
    this.getSystemList();
  },

  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
      };
      if (this.systemId !== "") {
        param.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.category_code) {
              console.error("without category_code..", item);
            }
            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.category_code == 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/sms_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 || this.showAccessory) {
          // if (this.showAccessory) {
          //   this.showAccessory = false;
          // }
          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, type, e) {
      console.log("val", val);
      if (type === "equip") {
        if (!val.file_type || !val.file_type_id) {
          // return;
        }
      } else {
        if (!val.attachments_num) {
          // return;
        }
      }
      console.log('e', e)
      this.accessoryPos = {
        top: e.clientY + 5,
        left: e.clientX - 360 -5
      }
      this.isClickAccessory = true;
      this.showAccessory = 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: this.detailTitle === "图片预览" ?2914 : 1136,
        // file_type_id: 9886,
        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;
            if (this.pictureList.length > 0) {
              this.curImg = this.pictureList[0];
            }
          } else {
            this.accessoryList = newData;
          }
        }
      });
    },
    /**
     * 切换当前预览大图
     */
    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;
    padding-right: 5px;
    height: 100%;
    overflow: auto;
    .item {
      > img {
        width: 180px;
        border: 4px solid rgba(245, 246, 247, 1);
        border-radius: 4px;
      }
      .name {
        width: 180px;
        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;
    }
  }
  .accessory-container{
    padding-top: 4px;
    padding-bottom: 4px;
    width: 360px;
    max-height: 166px;
    overflow: auto;
    position: fixed;
    background: #fff;
    box-shadow: 0px 2px 10px 0px rgba(31,35,41,0.1);
    border-radius: 2px;
    border: 1px solid rgba(228,229,231,1);
    z-index: 5000;
    >div>a{
      padding-left: 12px;
      padding-right: 12px;
      display: block;
      height: 38px;
      font-size: 14px;
      line-height: 38px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:hover{
        background: #F5F6F7;
      }
    }
  }
}
</style>