fj-dc-ui/.svn/pristine/08/087abd4e1af2386580d8a19e499a46432080a27a.svn-base

<template>
    <el-dialog title="任务处理详细"
               :visible.sync="dialogVisible"
               :close-on-click-modal="false"
               width="800px"
              @close="closeDialog">
      <div class="sysContent">
        <el-tabs type="border-card" class="tab-container">
          <el-tab-pane label="问题信息">
            <el-divider content-position="left">问题基本信息</el-divider>
            <el-row type="flex">
              <el-col :span="4" class="title">对象代码</el-col>
              <el-col :span="8">{{form.code}}</el-col>
              <el-col :span="4" class="title">对象名称</el-col>
              <el-col :span="8">{{form.name}}</el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="4" class="title">所属行政区代码</el-col>
              <el-col :span="8">{{form.adCode}}</el-col>
              <el-col :span="4" class="title">发现时间</el-col>
              <el-col :span="8">{{form.pblmTm}}</el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="4" class="title">问题类别</el-col>
              <el-col :span="20">{{form.pblmNameBz}}</el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="4" class="title">检查项目</el-col>
              <el-col :span="20">{{form.checkPointBz}}</el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="4" class="title">问题描述</el-col>
              <el-col :span="20">{{form.pblmDescBz}}</el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="4" class="title">详细描述</el-col>
              <el-col :span="20">{{form.inspPblmDesc}}</el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="4" class="title">备注</el-col>
              <el-col :span="20">{{form.note}}</el-col>
            </el-row>
            <el-divider content-position="left">问题附件信息</el-divider>
            <el-tabs type="border-card" style="height:240px;" class="fileTab">
              <el-tab-pane :label="picturetabName">
                <el-row>
                  <el-carousel  :interval="4000"  style="height:100%;" id="imgView">
                    <el-carousel-item v-for="(item,index) in pictureArray" :key="index" >
                      <img style="width:100%;height:100%;" :src="`${hostUrl}/${item.filePath}`" alt>
                    </el-carousel-item>
                    <el-carousel-item v-if="pictureArray.length==0" style="display: flex;justify-content: center;align-items: center">
                      <p>暂无图片信息</p>
                    </el-carousel-item>
                  </el-carousel>
                </el-row>
              </el-tab-pane>

              <el-tab-pane :label="audiotabName">
                <el-table border :data="audioArray" style="width: 100%;margin: 0 auto;">
                  <el-table-column header-align="center" align="center" label="音频" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <elaudio
                        style="margin-left:15%;width:100px;height:30px;"
                        :theUrl="`${hostUrl}/${scope.row.filePath}`"
                      ></elaudio>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane :label="videotabName">
                <el-table border :data="videoArray" style="width: 100%;margin: 0 auto;">
                  <el-table-column header-align="center" align="center" label="视频" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <video-player
                        class="vjs-custom-skin"
                        ref="videoPlayer"
                        :options="scope.row"
                        :playsinline="true"
                      ></video-player>
                    </template>
                  </el-table-column>
                </el-table>
              </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="文档" show-overflow-tooltip>
                    <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>
          </el-tab-pane>
          <el-tab-pane label="反馈信息">
            <el-divider content-position="left">反馈基本信息</el-divider>
            <el-row type="flex">
              <el-col :span="4" class="title">整改结果</el-col>
              <el-col :span="8">{{formMend.pblmState=='0'?'未销号':formMend.pblmState=='1'?'销号':''}}</el-col>
              <el-col :span="4" class="title">整改时间</el-col>
              <el-col :span="8">{{formMend.pblmRectTm}}</el-col>
            </el-row>
            <el-divider content-position="left">反馈流程信息</el-divider>
            <el-table
              :data="tableData"
              border
              height="300px"
              style="width: 100%">
              <el-table-column
                prop="pblmRectNote"
                show-overflow-tooltip
                align="center"
                label="反馈内容">
              </el-table-column>
              <el-table-column
                prop="pblmRectDuty"
                show-overflow-tooltip
                align="center"
                label="反馈单位">
              </el-table-column>
              <el-table-column
                prop="pblmRectName"
                show-overflow-tooltip
                align="center"
                label="反馈人姓名">
              </el-table-column>
              <el-table-column
                prop="pblmRectTm"
                show-overflow-tooltip
                align="center"
                label="反馈时间">
              </el-table-column>
            </el-table>
            <el-divider content-position="left">反馈附件</el-divider>
            <el-tabs type="border-card" style="height:240px;" class="fileTab">
              <el-tab-pane :label="picturetabName1">
                <el-row>
                  <el-carousel  :interval="4000"  style="height:100%;" id="imgView1">
                    <el-carousel-item v-for="(item,index) in pictureArray1" :key="index" >
                      <img style="width:100%;height:100%;" :src="`${hostUrl}/${item.filePath}`" alt>
                    </el-carousel-item>
                    <el-carousel-item v-if="pictureArray.length==0" style="display: flex;justify-content: center;align-items: center">
                      <p>暂无图片信息</p>
                    </el-carousel-item>
                  </el-carousel>
                </el-row>
              </el-tab-pane>

              <el-tab-pane :label="audiotabName1">
                <el-table border :data="audioArray1" style="width: 100%;margin: 0 auto;">
                  <el-table-column header-align="center" align="center" label="音频" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <elaudio
                        style="margin-left:15%;width:100px;height:30px;"
                        :theUrl="`${hostUrl}/${scope.row.filePath}`"
                      ></elaudio>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane :label="videotabName1">
                <el-table border :data="videoArray1" style="width: 100%;margin: 0 auto;">
                  <el-table-column header-align="center" align="center" label="视频" show-overflow-tooltip>
                    <template slot-scope="scope">
                      <video-player
                        class="vjs-custom-skin"
                        ref="videoPlayer"
                        :options="scope.row"
                        :playsinline="true"
                      ></video-player>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane :label="filetabName1">
                <el-table border :data="fileArray1" style="width: 100%;margin: 0 auto;">
                  <el-table-column header-align="center" align="center" label="文档" show-overflow-tooltip>
                    <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>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
</template>
<script>
    import Viewer from 'viewerjs';
    import 'viewerjs/dist/viewer.css';
    import request from '@util/gw_ajax_request.js'
    import { hostUrl } from "@util/global_variable.js";
    import { deleteFileById } from "@api/duChaAPI.js";
    export default {
        props: {
            systemId: {
                type: String
            }
        },
        data() {
            return {
                dialogVisible:true,
                pictureArray: [],
                audioArray: [],
                videoArray: [],
                fileArray: [],
                audiotabName: "音频资料(0)",
                videotabName: "视频资料(0)",
                picturetabName: "图片资料(0)",
                filetabName: "其他资料(0)",
                pictureArray1: [],
                audioArray1: [],
                videoArray1: [],
                fileArray1: [],
                audiotabName1: "音频资料(0)",
                videotabName1: "视频资料(0)",
                picturetabName1: "图片资料(0)",
                filetabName1: "其他资料(0)",
                form:{},
                formMend:{},
                tableData:[]
            }
        },
        components: {

        },
        computed: {
            hostUrl(){
                return hostUrl
            }
        },
        mounted() {
           this.getBasePblm();
           this.getMendBase();
           this.getFileList();

        },
        methods: {
            getBasePblm(){
                this.form = {};
                request.get(`/gw/pblm/shr/getGwPblmShr/${this.systemId}`).then(res => {
                    if (res.success) {
                       this.form = res.data;
                    }
                })
            },
            getMendBase(){
                this.formMend = {};
                request.get(`/gw/pblm/shr/getGwPblmRect/${this.systemId}`).then(res => {
                    if (res.success) {
                        this.formMend = res.data;
                        if(res.data.id){
                            this.getMendfllow(res.data.id);
                            this.getMendFileList(res.data.id);
                        }
                    }
                })
            },
            getMendfllow(id){
                this.tableData = [];
                request.get(`/gw/pblm/shr/getGwPblmRectRecord/${id}`).then(res => {
                    if (res.success) {
                        this.tableData = res.data;
                    }
                })
            },
            getFileList() {
                const _this = this;
                request.get(`/gw/pblm/shr/getGwPblmShrFile/${this.systemId}`).then(res => {
                    if (res.success) {
                        this.pictureArray = [];
                        this.audioArray = [];
                        this.videoArray = [];
                        this.fileArray = [];
                        res.data.forEach(item => {
                            if (
                                item.fileExt == "jpg" ||
                                item.fileExt == "JPG" ||
                                item.fileExt == "png" ||
                                item.fileExt == "PNG" ||
                                item.fileExt == "JPEG" ||
                                item.fileExt == "jpeg"
                            ) {
                                this.pictureArray.push(item);
                            } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                                this.videoArray.push({
                                    height: "320",
                                    width: "500",
                                    id: item.id,
                                    bizId: item.bizId,
                                    autoplay: false,
                                    muted: true,
                                    language: "en",
                                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                                    sources: [
                                        {
                                            type: "video/mp4",
                                            src: this.hostUrl + item.filePath
                                        }
                                    ]
                                });
                            }else if (
                                item.fileExt == "mp3" ||
                                item.fileExt == "MP3" ||
                                item.fileExt == "m4a"
                            ) {
                                this.audioArray.push(item);
                            }else{
                                this.fileArray.push(item);
                            }
                        });
                        _this.$nextTick(function(){
                            const  ViewerDom = document.getElementById('imgView');
                            const  viewer = new Viewer(ViewerDom, {})
                        });
                        this.filetabName = this.fileArray.length ? "其他资料(" + this.fileArray.length + ")" : "其他资料";
                        this.picturetabName = this.pictureArray.length ? "图片资料(" + this.pictureArray.length + ")" : "图片资料";
                        this.audiotabName = this.audioArray.length ? "音频资料(" + this.audioArray.length + ")" : "音频资料";
                        this.videotabName = this.videoArray.length ? "视频资料(" + this.videoArray.length + ")" : "视频资料";
                    }
                })
            },
            getMendFileList(id) {
                const _this = this;
                request.get(`/gw/pblm/shr/getGwPblmRectFile/${id}`).then(res => {
                    if (res.success) {
                        this.pictureArray1 = [];
                        this.audioArray1 = [];
                        this.videoArray1 = [];
                        this.fileArray1 = [];
                        res.data.forEach(item => {
                            if (
                                item.fileExt == "jpg" ||
                                item.fileExt == "JPG" ||
                                item.fileExt == "png" ||
                                item.fileExt == "PNG" ||
                                item.fileExt == "JPEG" ||
                                item.fileExt == "jpeg"
                            ) {
                                this.pictureArray1.push(item);
                            } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                                this.videoArray1.push({
                                    height: "320",
                                    width: "500",
                                    id: item.id,
                                    bizId: item.bizId,
                                    autoplay: false,
                                    muted: true,
                                    language: "en",
                                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                                    sources: [
                                        {
                                            type: "video/mp4",
                                            src: this.hostUrl + item.filePath
                                        }
                                    ]
                                });
                            }else if (
                                item.fileExt == "mp3" ||
                                item.fileExt == "MP3" ||
                                item.fileExt == "m4a"
                            ) {
                                this.audioArray1.push(item);
                            }else{
                                this.fileArray1.push(item);
                            }
                        });
                        _this.$nextTick(function(){
                            const  ViewerDom = document.getElementById('imgView1');
                            const  viewer = new Viewer(ViewerDom, {})
                        });
                        this.filetabName1 = this.fileArray1.length ? "其他资料(" + this.fileArray1.length + ")" : "其他资料";
                        this.picturetabName1 = this.pictureArray1.length ? "图片资料(" + this.pictureArray1.length + ")" : "图片资料";
                        this.audiotabName1 = this.audioArray1.length ? "音频资料(" + this.audioArray1.length + ")" : "音频资料";
                        this.videotabName1 = this.videoArray1.length ? "视频资料(" + this.videoArray1.length + ")" : "视频资料";
                    }
                })
            },
            closeDialog(){
                this.$emit("closeDialog");
            }
        }
    }
</script>
<style lang="scss" scoped>
  .title{
    text-align: center;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-col{
    padding: 8px;
    border: 1px solid #f0e6e6;
  }
  .sysContent{
     width: 100%;
  }
  .tab-container{
     width:100%;
  }
  .tab-container /deep/.el-tabs__content{
    width: calc(100% - 30px);
    height: calc(100% - 70px);
    padding: 10px;
    overflow: auto;
  }
  .fileTab{
     height:240px;
  }
  .fileTab /deep/.el-tabs__content{
    height: calc(100% - 70px);
    padding: 10px;
    overflow: auto;
  }
  .fileTab /deep/.el-tab-pane{
     height:100%;
  }
  .fileTab /deep/.el-row{
    height:100%;
  }
  .fileTab /deep/.el-carousel__container{
     height:100%;
  }
</style>