fj-dc-ui/.svn/pristine/2d/2d2ac56db5b945727682ea4c5dbae95f6b29ddc5.svn-base

<template>

  <div id="eventDetailBody" style="padding: 3px;" :style="{'height':testHeight+'px',}">
    <div :style="{'height':testHeight+'px',}" style="width:46%;float:left;border:1px solid #d5d5ff;margin-right:5px;">
      <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">基本信息</p>
      <el-form label-position="right" label-width="120px" :style="{'max-height':testHeight-30+'px',}"
               style="overflow-y: auto;height:100%;margin:5px;" :model="problemDetail">
        <!--<el-form-item label="督查对象名称:">-->
        <!--<p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{problemDetail.pnm}}</p>-->
        <!--</el-form-item>-->
        <el-form-item label="问题类别:">
          <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{problemDetail.inspPblmName}}</p>
        </el-form-item>
        <el-form-item label="检查项目:">
          <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{problemDetail.checkPoint}}</p>
        </el-form-item>
        <el-form-item label="问题描述:">
          <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{problemDetail.pblmDesc}}</p>
        </el-form-item>
        <el-form-item label="详细描述:">
          <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);">{{problemDetail.inspPblmDesc}}</p>
        </el-form-item>
        <!-- <el-form-item label="严重程度:">
            <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{problemDetail.ifCasePblm | inspPblmCate}}</p>
        </el-form-item> -->
        <!--<el-form-item label="是否典型问题:">-->
        <!--<p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{problemDetail.ifCasePblm == '1' ? '典型' : '非典型'}}</p>-->
        <!--</el-form-item>-->
        <el-form-item label="上报人:">
          <p style="font-weight: bold;border-bottom:1px dashed rgb(198, 226, 255);;">{{problemDetail.persName}}</p>
        </el-form-item>
      </el-form>
    </div>
    <div :style="{'height':testHeight+'px',}" style="width:50%;float:left;border:1px solid #d5d5ff;">
      <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">多媒体信息</p>
      <el-tabs style="overflow-y: auto;margin:5px;" :style="{'max-height':testHeight-40 +'px',}">

        <el-tab-pane :label="picturetabName" style="height: 350px;">

          <el-carousel :interval="4000" height="350px">
            <el-carousel-item v-for="(item,index) in pictureArray" :key="index">
              <a :href="`${hostUrl}/${item.filePath}`" target="_blank">

                <img style="height:100%;" :src="`${hostUrl}/${item.filePath}`" alt>

              </a>
            </el-carousel-item>
            <el-carousel-item v-if="pictureArray.length==0">
              <p>暂无图片信息</p>
            </el-carousel-item>
          </el-carousel>
        </el-tab-pane>

        <el-tab-pane :label="audiotabName">
          <elaudio v-for="(audio,index) in audioArray" :key="index" style="margin-left:15%"
                   :theUrl="`${hostUrl}/${audio.filePath}`"></elaudio>
          <p v-if="audioArray.length==0">暂无音频信息</p>
        </el-tab-pane>
        <el-tab-pane :label="videotabName">
          <el-carousel :interval="4000" height="350px">
            <el-carousel-item v-for="(item,index) in videoArray" :key="index">
              <video-player class="vjs-custom-skin"
                            ref="videoPlayer"

                            :options="item"
                            :playsinline="true"
              >
              </video-player>
            </el-carousel-item>
            <el-carousel-item v-if="videoArray.length==0">
              <p>暂无视频信息</p>
            </el-carousel-item>
          </el-carousel>
        </el-tab-pane>
        <el-tab-pane :label="filetabName">
          <el-table border :data="fileArray" style="width: 100%;margin: 0 auto;">
            <el-table-column header-align="center" align="center" label="文档">
              <template slot-scope="scope">
                <p>
                  <a :href="`${hostUrl}/${scope.row.filePath}`" target="_blank" rel="noopener noreferrer">
                    {{scope.row.fileName}}
                  </a>
                </p>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

</template>

<script>
  import {getsuperviseinspect,} from "@api/duChaAPI.js";
  // import elaudio from '../widgets/elAudio.vue'
  import request from '@util/gw_ajax_request'
  import { hostUrl } from "@util/global_variable.js";
  export default {
    props: ["details", 'problemId', 'objType'],
    components: {

      elaudio: resolve => {
        require(["../../../widgets/elAudio.vue"], resolve);
      },

    },
    data() {
      return {
        testHeight: window.innerHeight * 0.5,
        activeName: "0",
        superviseinspect: {},
        fileList: [],
        groupingList: [],
        fileListloading: false,
        groupListloading: false,
        problemDetail: {
          checkPoint: '',
          collTime: '',
          commonFileIds: '',
          cwsCode: '',
          cwsName: '',
          dataStat: '',
          endTime: '',
          fileNo: '',
          fileNoNumber: '',
          gwComFiles: '',
          ifCasePblm: '',
          inspAddDesc: '',
          inspGroupId: '',
          inspPblmCate: '',
          inspPblmCode: '',
          inspPblmDesc: '',
          inspPblmName: '',
          inspPblmOrgName: '',
          inspPblmType: '',
          inspPblmsName: '',
          nm: '',
          note: '',
          objId: '',
          objNm: '',
          objType: '',
          pblmDesc: '',
          pblmId: '',
          pblmLat: '',
          pblmLong: '',
          pblmPersName: '',
          pblmStat: '',
          pblmsId: '',
          pblmsTypeId: '',
          persName: '',
          pguid: '',
          recPers: '',
          regid: '',
          reviConc: '',
          reviOpin: '',
          reviOrgGuid: '',
          srcDesc: '',
          startTime: '',
          state: '',
          villType: '',
          villageCode: '',
        },
        pictureArray: [],
        audioArray: [],
        videoArray: [],
        fileArray: [],
        audiotabName: "",
        videotabName: "",
        picturetabName: "",
        filetabName: "",
        playerOptions: {
          height: '120',
          autoplay: true,
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          labelName: '',
          sources: [{
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4",
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
            {
              type: "video/mp4",
              // mp4
              src: "http://vjs.zencdn.net/v/oceans.mp4",
              // webm
              // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
            },
            {
              type: "video/mp4",
              // mp4
              src: "http://vjs.zencdn.net/v/oceans.mp4",
              // webm
              // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
            },
            {
              type: "video/mp4",
              // mp4
              src: "http://vjs.zencdn.net/v/oceans.mp4",
              // webm
              // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
            }],
        },
      };
    },
    computed: {
      hostUrl() {
         return hostUrl
      },

    },
    mounted: function () {
      this.problemDetail = {};
      this.pictureArray = [];
      this.audioArray = [];
      this.videoArray = [];
      this.fileArray = [];
      this.showDetails();
    },
    watch: {
      problemId: function () {
        this.problemDetail = {};
        this.pictureArray = [];
        this.audioArray = [];
        this.videoArray = [];
        this.fileArray = [];
        this.showDetails();
      }
    },
    methods: {
      init() {
        this.activeName = "0";
      },
      showDetails() {
        // showDetailsXq(this.problemId).then(res => {
        request.get(`/dc/insp/pblm/${this.problemId}`).then(res => {
          this.problemDetail = res.data;
          console.log(this.hostUrl);
          res.data.gwComFiles.forEach(
            (item) => {
              if (item.fileExt == 'mp3' || item.fileExt == 'MP3' || item.fileExt == 'm4a') {
                this.audioArray.push(item);
              } else if (item.fileExt == 'jpg' || item.fileExt == 'JPEG' || item.fileExt == 'jpeg' || item.fileExt == 'JPG' || item.fileExt == 'png' || item.fileExt == 'PNG') {
                this.pictureArray.push(item);
              } else if (item.fileExt == 'mp4' || item.fileExt == 'MP4') {
                this.videoArray.push(
                  {
                    height: '350',
                    autoplay: false,
                    muted: true,
                    language: 'en',
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    sources: [{
                      type: "video/mp4",
                      // mp4
                      src: `${this.hostUrl}/${item.filePath}`,
                      // webm
                      // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                    }],

                  },
                );
              } else {
                this.fileArray.push(item);
              }
            }
          );
          this.picturetabName = "图片资料(" + this.pictureArray.length + ")";
          this.audiotabName = "音频资料(" + this.audioArray.length + ")";
          this.videotabName = "视频资料(" + this.videoArray.length + ")";
          this.filetabName = "其它资料(" + this.fileArray.length + ")";
        });
      },
      timestampToTime(detail) {
        if (detail) {
          var date = new Date(detail);
          var Y = date.getFullYear() + "-";
          var M =
            (date.getMonth() + 1 < 10 ?
              "0" + (date.getMonth() + 1) :
              date.getMonth() + 1) + "-";
          var D =
            (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
          var h =
            (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
          var m =
            date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
          return Y + M + D + h + m;
        } else {
          return "";
        }


      }
    },
    filters: {
      zgqk(val) {
        switch (val) {
          case '0':
            return '未整改';
          case '1':
            return '整改中';
          case '2':
            return '已整改';
        }
      },
      inspPblmCate(val) {
        if (!val || val == '') {
          return ''
        }
        if (val == '0') {
          return '一般'
        } else if (val == '1') {
          return '较重'
        } else if (val == '2') {
          return '严重'
        } else {
          return val
        }
      },
    }
  };
</script>

<style scoped>
  .name {
    background-color: #ebf8ff;
  }

  .details >>> .el-tabs__content {
    height: 360px;
    overflow-y: auto;
  }

  .flexbody > div {
    display: flex;
    align-items: flex-start;
    line-height: 30px;
  }

  .flexbody div span:first-child {
    width: 100px;
    flex-shrink: 0;
  }

  .flexbody div span:first-child {
    color: blue;
  }

  .fileList span {
    margin-right: 10px;
    cursor: pointer;
  }

  .fileList span:hover {
    color: blueviolet;
  }

  .el-form-item {
    width: 100%;
    margin-bottom: 0;
  }
</style>