party-admin/inspur-ui/src/views/party_work/meeting/info.vue

<template>
  <div class="meeting">
    <div style="display: flex;flex-direction: row;justify-content: space-between;">
      <div class="display-row display-center">
        <el-image :src="logo" fit="contain" style="width: 20px;height: 20px;" />
        <div class="title">浪潮智屏投控-会议管理</div>
      </div>
      <div class="display-row display-center" style="margin-right: 15px;" @click="closePage">
        <el-image :src="logoExit" fit="contain" class="icon" />
        <div class="text-fontsize-14" style="margin-left: 4px;">退出会议</div>
      </div>
    </div>

    <div class="display-row" style="display: flex;align-items: center;margin-top: 27px;">
      <div class="text-fontsize-14" style="font-weight: bold;;">{{ form.title }}</div>
      <el-image :src="iconAddress" fit="contaion" class="icon" style="margin-left: 15px;" />
      <div class="text-fontsize-14" style="margin-left: 4px;">地点：</div>
      <div class="text-fontsize-14" style="margin-left: 4px;">{{form.address}}</div>
      <el-image :src="iconHost" fit="contaion" class="icon" style="margin-left: 15px;" />
      <div class="text-fontsize-14" style="margin-left: 4px;">主持：</div>
      <div class="text-fontsize-14" style="margin-left: 4px;">{{form.host}}</div>
      <el-image :src="iconOrganization" fit="contaion" class="icon" style="margin-left: 15px;" />
      <div class="text-fontsize-14" style="margin-left: 4px;">发起组织：</div>
      <div class="text-fontsize-14" style="margin-left: 4px;">{{form.fromOrg}}</div>
      <el-image :src="iconTime" fit="contaion" class="icon" style="margin-left: 15px;" />
      <div class="text-fontsize-14" style="margin-left: 4px;">时间：</div>
      <div class="text-fontsize-14" style="margin-left: 4px;">{{form.beginTime}} - {{form.endTime}}</div>
    </div>

    <div class="display-row"
      style="width: 85%; display: flex;align-items: center;justify-content: space-between; margin-top: 15px;">
      <div class="display-row" style="display: flex;align-items: center;">
        <div class="text-fontsize-14">请选择会议设备</div>
        <el-select v-model="deviceId" placeholder="请选择会议设备" style="margin-left: 8px;" :popper-append-to-body="false" class="elselect">
          <el-option v-for="device in deviceList" :label="device.deviceName" :value="device.id" />
        </el-select>
      </div>
      <!-- 开始播放后显示 -->
      <div v-if="selectedFileIndex>=0" class="display-row" style="display: flex;align-items: center;">
        <div class="text-fontsize-14">党组织建设工作汇报.pptx</div>
        <div class="text-fontsize-14" style="margin-left: 15px;">缩放比例</div>
        <el-select v-model="scaleId" placeholder="请选择" style="margin-left: 8px;width: 90px;"
          :popper-append-to-body="false" @change="scaleChange">
          <el-option v-for="scale in scaleList" :label="scale.label" :value="scale.value" />
        </el-select>
        <div class="text-fontsize-14" style="margin-left: 15px;">移动距离</div>
        <el-select v-model="moveId" placeholder="请选择" style="margin-left: 8px;width: 90px;"
          :popper-append-to-body="false">
          <el-option v-for="move in moveList" :label="move.label" :value="move.value" />
        </el-select>
        <el-button class="btn no-active" style="margin-left: 18px;" @click="moveUp">上移</el-button>
        <el-button class="btn no-active" style="margin-left: 18px;" @click="moveDown">下移</el-button>
        <el-button class="btn no-active" style="margin-left: 18px;" @click="lastPage">上一页</el-button>
        <el-button class="btn no-active" style="margin-left: 18px;" @click="nextPage">下一页</el-button>
      </div>
    </div>

    <div class="display-row" style="margin-top: 16px;height: 83vh">
      <div style="width: 85%;height: 83vh;" class="screen_nocontent display-center">
        <div v-if="fileType == 1 && null == pageSrc" class="display-cloumn display-center">
          <el-image :src="iconScreen" class="icon-40"></el-image>
          <div class="text-fontsize-18" style="margin-top: 8px;">此处展示投屏画面</div>
        </div>
        <div v-else-if="fileType == 2 && null == material" class="display-cloumn display-center">
          <el-image :src="iconScreen" class="icon-40"></el-image>
          <div class="text-fontsize-18" style="margin-top: 8px;">此处展示投屏画面</div>
        </div>
        <div v-else style="height: 83vh;width: 100%;overflow: hidden;" class="display-center">
          <iframe v-if="fileType == 2" :src="material" ref="iframe" style="width: 100%; height: 83vh;"></iframe>
          <el-image v-else :src="pageSrc.fileUrl" @load="handleImageLoad"
            :style="{ height: imageHeight +'%',transform: 'translateY(' + imageOffset + 'px)'}" />
          <!-- <div v-else class="image-container" @mousedown="startMove" @mousemove="doMove" @mouseup="endMove"
            style="height: 97%;" :style="{ transform: `scale(${scale}) translate(${position.x}px, ${position.y}px)` }">
            <el-image :src="pageSrc.fileUrl" />
          </div> -->


        </div>
      </div>
      <div style="width: 15%;height: 100%;" class="display-cloumn">
        <!-- 会议资料 -->
        <div class="display-cloumn" style="height: 38%;padding-bottom: 5px;">
          <div class="display-row"
            style="display: flex;justify-content: space-between;align-items: center;margin: 0 16px;">
            <div class="display-row" style="display: flex;align-items: center;">
              <div class="text-fontsize-18">会议资料</div>
              <el-image :src="iconFresh" fit="contaion" class="icon" @click="getMeetingInfo()"
                style="margin-left: 8px;"></el-image>
            </div>
            <div class="display-row">
              <el-image :src="iconStartPlay" class="icon-40" @click="beginPlay()">开始播放</el-image>
              <el-image :src="iconStopPlay" class="icon-40" style="margin-left:10px" @click="endPlay()">结束播放</el-image>
            </div>

          </div>
          <div style="margin-top: 16px;height:240px;overflow-y: auto" class="no-scrollbar">
            <div v-for="(item,index) in fileList" @click="selectFileItem(index)">
              <div class="fileItem text-fontsize-14 single-line"
                :class="{ 'is-selected': selectedFileIndex === index }">{{item.fileName}}</div>
            </div>
          </div>
        </div>
        <div class="line" />
        <!-- 图片抓拍 -->
        <div class="display-cloumn" style="height: 21%;padding: 16px;">
          <div class="display-row" style="display: flex;justify-content: space-between;align-items: center;">
            <div class="display-row" style="display: flex;align-items: center;">
              <div class="text-fontsize-18">图片抓拍</div>
              <el-image :src="iconFresh" class="icon" style="margin-left: 8px;" @click="refreshPhoto" />
            </div>
            <el-button class="more" @click="dialogPhotoVisible = true">更多</el-button>
          </div>
          <div class="display-cloumn" style="margin-top:10px;height: 75%;">
            <div class="display-row" style="display: flex;justify-content: space-between;">
              <el-image v-if="firstPhoto !=null" style="width: 157px;height: 90px;" :src="firstPhoto.picPath"
                :preview-src-list="firstPhotoList" />
              <el-image v-else :src="imgEmpty" style="width: 157px;height: 90px;" />
              <div class="display-cloumn" style="display: flex;justify-content: space-between;">
                <el-image :src="iconPhoto" class="icon-40" style="margin-left: 8px;" @click="takePhoto" />
                <el-image v-if="firstPhoto!=null" :src="iconDelete" class="icon-40" style="margin-left: 8px;"
                  @click="deletePhoto([0])" />
              </div>
            </div>
            <div v-if="firstPhoto!=null" style="width: 157px;margin-top: 5px;" class="display-center text-fontsize-14">
              {{firstPhoto.createTime}}
            </div>
            <div v-else style="width: 157px;margin-top: 5px;" class="display-center text-fontsize-14">暂无图片</div>
          </div>
        </div>
        <div class="line" />
        <!-- 人脸签到 -->
        <div class="display-cloumn" style="height: 21%;padding: 16px;">
          <div class="display-row" style="display: flex;justify-content: space-between;align-items: center;">
            <div class="display-row" style="display: flex;align-items: center;">
              <div class="text-fontsize-18">人脸签到</div>
              <el-image :src="iconFresh" class="icon" style="margin-left: 8px;" @click="refreshPhotoSign" />
            </div>
            <el-button class="more" @click="dialogFaceSignVisible = true">更多</el-button>
          </div>
          <div class="display-cloumn" style="height: 75%;margin-top:10px">
            <div class="display-row" style="display: flex;justify-content: space-between;">
              <div v-if="faceSignUrl && faceSignUrl.length>0" class="display-cloumn" style="width: 157px;">
                <el-image style="width: 157px;height: 90px;" :src="faceSignUrl" :preview-src-list="faceSignList" />
                <div style="width: 157px;margin-top: 5px;" class="display-center text-fontsize-14">
                  {{faceSign.createTime}}
                </div>
              </div>
              <div v-else class="display-cloumn" style="width: 157px;">
                <el-image :src="imgEmpty" style="width: 157px;height: 90px;" />
                <div style="width: 157px;margin-top: 5px;" class="display-center text-fontsize-14">暂无图片
                </div>
              </div>

              <div class="display-cloumn" style="display: flex;justify-content: space-between;align-items: end;">
                <el-image :src="iconPhoto" class="icon-40" style="margin-left: 8px;" @click="photoSign" />
                <div v-if="faceSignUrl && faceSignUrl.length>0" class="display-cloumn"
                  style="display: flex;align-items: end;">
                  <div class="display-row"
                    style="margin-bottom:8px ;display: flex;align-items: center;justify-content: center;">
                    <div class="text-fontsize-14">本次</div>
                    <div class="text-fontsize-14" style="color: #FFE59E;">+{{faceSign.newAddNum}}</div>
                  </div>
                  <progress :value="signedNum" :max="attendanceList.length"></progress>
                  <div class="display-row display-center" style="margin-top:8px ;">
                    <div class="text-fontsize-14" style="color: #FFE59E;">{{signedNum}}</div>
                    <div class="text-fontsize-14">/{{attendanceList.length}} 已签到</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="line" />
        <!-- 会议纪要 -->
        <div class="display-cloumn" style="height: 20%;padding: 16px;">
          <div class="display-row" style="display: flex;justify-content: space-between;align-items: center;">
            <div class="display-row" style="display: flex;align-items: center;">
              <div class="text-fontsize-18">会议纪要</div>
              <el-image :src="iconFresh" class="icon" style="margin-left: 8px;" />
            </div>
            <el-button class="more" @click="dialogMeetVisible = true">更多</el-button>
          </div>
          <div class="display-row" style="margin-top: 10px;">
            <div style="width: 70%;overflow-y: auto;height: 120px;" class="no-scrollbar">
              <div v-for="(item, index) in audioList">
                <div class="text-fontsize-14 single-line" style="padding:10px 0 ;">{{item.fileName}}</div>
              </div>
            </div>

            <div v-if="timerRunning == false" class="display-cloumn display-center" style="width: 30%;">
              <el-image :src="iconStartRecord" class="icon-40" @click="startTimer" />
              <div class="text-fontsize-16" style="margin-top:12px ;">录音</div>
            </div>
            <div v-else class="display-cloumn display-center" style="width: 30%;">
              <el-image :src="iconStopRecord" class="icon-40" @click="pauseTimer" />
              <div class="text-fontsize-16" style="margin-top:12px ;">{{formatTime}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图片抓拍 -更多弹框 -->
    <el-dialog title="图片抓拍" :visible.sync="dialogPhotoVisible" center>
      <span>
        <div class="display-cloumn">
          <!-- <div class="line-grey" /> -->
          <div style="display: flex;flex-wrap: wrap;overflow: auto;margin-left:5px;">
            <div v-for="(item, index) in photoList" :key="index" class="imageDiv">
              <div class="display-cloumn" :style="{ backgroundColor: item.isSelected ? '#FFF3F3' : 'white' }">
                <div style="margin-left: 10px;">
                  <input type="checkbox" align="left" :value="index" v-model="selectedItems">
                </div>
                <el-image style="width: 206px;height: 114px;margin: 5px" :src="item.picPath"
                  :preview-src-list="photoPreviewList" />
                <div class="text-fontsize-14 display-center" style="margin-top:5px;color:#000000;width: 208px;">
                  {{item.createTime}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </span>
      <span slot="footer" class="display-row" style="display: flex;align-items: center;justify-content: space-between;">
        <div></div>
        <div class="display-row display-center" style="margin-left: 80px;">
          <div class="display-cloumn display-center" style="margin-left:24px">
            <el-image :src="iconPhotoGrey" class="icon-40" @click="takePhoto" />
            <div class="text-fontsize-14" style="margin-top: 5px;color: #545454;">拍照</div>
          </div>
          <div class="display-cloumn display-center" style="margin-left:24px">
            <el-image :src="iconFreshGrey" class="icon-40" @click="refreshPhoto" />
            <div class="text-fontsize-14" style="margin-top: 5px;color: #545454;">刷新列表</div>
          </div>


        </div>
        <div>
          <el-button @click="dialogPhotoVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteDialogPhoto">删 除</el-button>
        </div>
      </span>
    </el-dialog>

    <!-- 人脸签到 - 更多弹框 -->
    <el-dialog title="人脸签到" :visible.sync="dialogFaceSignVisible" center>
      <div class="display-cloumn">
        <div class="line-grey" />
        <div class="display-row">
          <div class="display-cloumn" style="width: 37%;height: calc(70vh - 51px);padding: 16px 0px 24px 20px;">
            <div class="text-fontsize-16" style="color: #545454;margin-left: 4px;">人员列表</div>
            <div style="height: 93%;margin-top: 10px;">
              <el-table v-loading="loading" class="no-border" :data="attendanceList" height="100%" row-key="id">
                <el-table-column label="姓名" align="left" prop="memberName" width="100" />
                <el-table-column label="出勤情况" align="left" prop="attendanceStatus" width="100">
                  <template slot-scope="scope">
                    <!-- <dict-tag :options="dict.type.sys_attendance_type" :value="scope.row.attendanceStatus" /> -->
                    <div v-if="scope.row.attendanceStatus == 0" style="color:#F53F3F ;">未签到</div>
                    <div v-else>已签到</div>
                  </template>
                </el-table-column>
                <el-table-column label="签到时间" align="left" prop="signTime" />
              </el-table>
            </div>
          </div>
          <div class="line-grey-column" />
          <div class="display-cloumn" style="width: 62%;height: calc(70vh - 51px);padding: 16px;">
            <div class="text-fontsize-16" style="color: #545454;margin-bottom: 10px;">人脸签到</div>
            <el-image v-if="faceSignUrl && faceSignUrl.length>0" style="width: 100%;height:65%" :src="faceSignUrl" />
            <el-image v-else style="width: 100%;height:65%" :src="dialogimgEmpty"></el-image>
            <div class="display-row display-center" style="margin-top: 32px;">
              <div class="display-cloumn display-center">
                <el-image :src="iconPhotoGrey" class="icon-40" @click="photoSign" />
                <div class="text-fontsize-14" style="margin-top: 5px;color: #545454;">拍照</div>
              </div>
              <div class="display-cloumn display-center" style="margin-left:24px">
                <el-image :src="iconFreshGrey" class="icon-40" @click="refreshPhotoSign" />
                <div class="text-fontsize-14" style="margin-top: 5px;color: #545454;">刷新列表</div>
              </div>


            </div>
            <div class="display-row display-center" style="margin-top: 32px;">

              <div class="text-fontsize-14" style="color: #545454;">本次</div>
              <div v-if="faceSign.newAddNum" class="text-fontsize-14" style="color: #FF5455;">+{{faceSign.newAddNum}}
              </div>
              <div v-else class="text-fontsize-14" style="color: #FF5455;">+0</div>
              <el-progress :stroke-width="8" :percentage="percentage" :color="customColor" :show-text="false"
                style="height: 8px;width: 104px;margin-left: 16px;" :define-back-color="customColor2"></el-progress>
              <!-- <progress value="14" max="18" style="margin-left: 16px;" class="dialogprogress"></progress> -->
              <div class="text-fontsize-14" style="color: #FF5455;margin-left: 16px;">{{signedNum}}</div>
              <div class="text-fontsize-14" style="color: #545454;">/{{attendanceList.length}} 已签到</div>

            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 会议纪要 - 更多弹框 -->
    <el-dialog title="会议纪要" :visible.sync="dialogMeetVisible" center>
      <div class="display-cloumn">
        <div class="line-grey" />
        <div class="display-row">
          <div class="display-cloumn" style="width: 43%;height: calc(70vh - 51px);padding: 16px 0px 24px 20px;">
            <div class="text-fontsize-16" style="color: #545454;margin-left:4px">会议录音</div>
            <div style="height: 93%;margin-top: 10px;" class="display-cloumn">
              <el-table v-loading="loading" class="no-border" :data="audioList" height="83%" row-key="id"
                @row-click="showAudioTxt" @selection-change="handleSelectionChange">
                <el-table-column label="序号" align="left" prop="sort" width="50" />
                <el-table-column label="文件名称" align="left" prop="fileName" :show-overflow-tooltip="true" />
                <el-table-column label="文本准换" align="left" prop="isTranslate" width="80">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.sys_asr_status" :value="scope.row.isTranslate" />
                  </template>
                </el-table-column>
                <el-table-column label="创建时间" align="left" prop="createTime" width="150" />
              </el-table>
              <div style="height: 17%;margin-top:10px" class="display-row display-center">
                <div class="display-cloumn display-center">
                  <el-image :src="iconFreshGrey" class="icon-40" @click="refreshAudio" />
                  <div class="text-fontsize-14" style="color: #545454;margin-top: 5px;">刷新列表</div>
                </div>

                <div v-if="timerRunning == false" class="display-cloumn display-center" style="margin-left:32px">
                  <el-image :src="iconStartRecordRed" class="icon-40" @click="startTimer" />
                  <div class="text-fontsize-14" style="color: #545454;margin-top: 5px;">录音</div>
                </div>
                <div v-else class="display-cloumn display-center" style="margin-left:32px">
                  <el-image :src="iconStopRecordRed" class="icon-40" @click="pauseTimer" />
                  <div class="text-fontsize-14" style="color: #545454;margin-top: 5px;">{{ formatTime }}</div>
                </div>

                <div class="display-cloumn display-center" style="margin-left:32px">
                  <el-image :src="iconYjsc" class="icon-40" @click="summaryGenerate" />
                  <div class="text-fontsize-14" style="color: #545454;margin-top: 5px;">生成会议纪要</div>
                </div>
              </div>

            </div>
          </div>
          <div class="line-grey-column" />
          <div class="display-cloumn" style="width: 57%;height: calc(70vh - 51px);padding: 16px;">
            <div class="text-fontsize-16" style="color: #545454;margin-bottom: 10px;">录音内容</div>
            <el-input resize="none" v-model="audioTxt" style="margin-left: 10px" type="textarea"
              :readonly="audioReadOnly" :rows="21" placeholder="请输入内容" />
            <div style="margin-top: 35px;display: flex;justify-content: center;align-items: center;">
              <el-button type="primary" @click="audioTxtEdit">文本编辑</el-button>
              <el-button type="primary" @click="audioTxtSave">文本保存</el-button>
            </div>

          </div>
        </div>
      </div>
    </el-dialog>

  </div>
  <!-- <div class="appNew-container">
    <el-card shadow="never" class="" style="">
      <div style="overflow: hidden">
        <div style="font-weight: bolder;float: left">
          {{ form.title }}
        </div>
        <div style="float: right">
          请选择会议设备：
          <el-select v-model="deviceId" placeholder="请选择会议设备" style="">
            <el-option v-for="device in deviceList" :key="device.id" :label="device.deviceName"
                       :value="device.id" />
          </el-select>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="" style="">
      <el-tabs type="border-card" style="height: calc(100vh - 150px)">
        <el-tab-pane label="会议文件">
          <div style="display: flex;justify-content: center">
            <div style="width: 30%;">
              <el-table v-loading="loading" :data="fileList" height="calc(100vh - 220px)" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column prop="fileName" label="文件名" :show-overflow-tooltip="true"/>
              </el-table>
            </div>
            <div style="width: 70%;border-left: 1px solid #e6e6e6;">
              <div v-if="null == pageSrc" style="height: calc(100vh - 300px);">
                <el-empty description=""></el-empty>
              </div>
              <div v-else style="height: calc(100vh - 300px);display: flex;justify-content: center;align-items: center;" >
                <el-image :src="pageSrc.fileUrl" style="height: 100%"/>
              </div>
              <div style="height: 10%;display: flex;justify-content: center;align-items: center;">
                <el-button type="primary" :disabled="single" @click="showFile">立即播放</el-button>
                <el-button type="primary" @click="lastPage">上一页</el-button>
                <el-button type="primary" @click="nextPage">下一页</el-button>
                <el-button type="warning" :disabled="single" @click="endShowFile">结束播放</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="资料链接">
          <div style="display: flex;justify-content: center">
            <div style="width: 30%;height: calc(100vh - 220px)">
              <div v-for="(item,index) in materialOptions">
                <div style="display: flex;flex-direction: column;justify-content: center;">
                  <span>
                    <span style="font-weight: bolder;">链接地址：</span>
                    <span style="word-break: break-all;word-wrap: break-word">{{ item }}</span>
                  </span>
                  <span style="margin-right: 10px;margin-top: 10px;margin-bottom: 10px">
                    <el-button type="primary" @click="showUrl(item)">开始播放</el-button>
                    <el-button type="warning" @click="endShowUrl(item)">结束播放</el-button>
                  </span>
                </div>
              </div>
            </div>
            <div v-if="material == null" style="width: 70%;border-left: 1px solid #e6e6e6;">
              <el-empty description=""></el-empty>
            </div>
            <div v-else style="width: 70%;border-left: 1px solid #e6e6e6;">
              <iframe :src="material" style="width: 100%;height: calc(100vh - 220px);border: 0;"></iframe>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="图片抓拍">
          <div style="height: calc(100vh - 260px);display: flex;flex-wrap: wrap;overflow: auto">
            <div v-for="(item, index) in this.photoList" :key="index" class="imageDiv">

              <div>
                <el-image style="width: 320px;height: 180px;margin: 5px" :src="item"/>
              </div>
              <div style="margin: 5px;display: flex;justify-content: center;align-items: center;">
                <el-button type="warning" @click="deletePhoto(index)">删除图片</el-button>
              </div>
            </div>
          </div>
          <div style="margin-top: 5px;display: flex;justify-content: center;align-items: center;">
            <el-button @click="refreshPhoto" type="primary" >刷新</el-button>
            <el-button @click="takePhoto" type="primary" >拍照</el-button>
            <el-button @click="savePhoto" type="primary" >保存</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="人脸签到">
          <div style="display: flex;justify-content: center">
            <div style="width: 30%;height: calc(100vh - 220px)">
              <div style="font-size: medium;margin-bottom: 10px">人员列表</div>
              <div style="height: 85%;">
                <el-table v-loading="loading" :data="attendanceList" height="calc(100vh - 250px)" row-key="id">
                  <el-table-column label="姓名" align="left" prop="memberName" />
                  <el-table-column label="出勤情况" align="left" prop="attendanceStatus">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.sys_attendance_type" :value="scope.row.attendanceStatus"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="签到时间" align="left" prop="signTime" />
                </el-table>
              </div>
            </div>
            <div style="width: 70%;border-left: 1px solid #e6e6e6;">
              <div style="font-size: medium;margin-bottom: 10px;margin-left: 20px">人脸签到</div>
              <div v-if="null == faceSignUrl" style="height: calc(100vh - 350px);">
                <el-empty description=""></el-empty>
              </div>
              <div v-else style="height: calc(100vh - 350px);display: flex;justify-content: center;align-items: center;" >
                <div style="width: 100%; height: calc(100vh - 350px)">
                  <el-image style="width: 100%;height: 100%;margin: 5px" :src="faceSignUrl"/>
                </div>
              </div>
              <div style="height: 10%;display: flex;justify-content: center;align-items: center;">
                <el-button  type="primary" @click="photoSign">拍照</el-button>
                <el-button  type="primary" @click="refreshPhotoSign">刷新</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="会议纪要">
          <div style="display: flex;justify-content: center">
            <div style="width: 30%;height: calc(100vh - 220px)">
              <div style="font-size: medium;margin-bottom: 10px">会议录音</div>
              <div style="height: 85%;">
                <el-table v-loading="loading" :data="audioList" height="100%" row-key="id" @row-click="showAudioTxt" @selection-change="handleSelectionChange">
                  <el-table-column label="序号" align="center" prop="sort" width="50" />
                  <el-table-column label="文件名称" align="left" prop="fileName" :show-overflow-tooltip="true" />
                  <el-table-column label="文本准换" align="center" prop="isTranslate" width="80" >
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.sys_asr_status" :value="scope.row.isTranslate"/>
                    </template>
                  </el-table-column>
                  <el-table-column label="创建时间" align="left" prop="createTime" width="150" />
                </el-table>
              </div>
              <div style="height: 5%;display: flex;justify-content: center;align-items: center;font-weight: bolder;font-size: large">
                {{ formatTime }}
              </div>
              <div style="margin-top: 5px;display: flex;justify-content: center;align-items: center;">
                <el-button @click="startTimer" type="primary" :disabled="timerRunning">开始录音</el-button>
                <el-button @click="pauseTimer" type="warning" :disabled="!timerRunning">暂停录音</el-button>
                <el-button @click="refreshAudio" type="primary" >刷新列表</el-button>
                <el-button @click="summaryGenerate" type="primary" >一键生成</el-button>
              </div>
            </div>
            <div v-if="audioTxt == null" style="width: 70%;border-left: 1px solid #e6e6e6;">
              <div style="font-size: medium;margin-bottom: 10px;margin-left: 20px">录音内容</div>
              <el-empty description=""></el-empty>
            </div>
            <div v-else style="width: 70%;border-left: 1px solid #e6e6e6;">
              <div style="font-size: medium;margin-bottom: 10px;margin-left: 20px">录音内容</div>
              <el-input resize="none" v-model="audioTxt" style="margin-left: 10px" type="textarea" :readonly="audioReadOnly" :rows = "29" placeholder="请输入内容" />
              <div style="margin-top: 35px;display: flex;justify-content: center;align-items: center;">
                <el-button  type="primary" @click="audioTxtEdit">文本编辑</el-button>
                <el-button  type="primary" @click="audioTxtSave">文本保存</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="AI问答">
          <div style="display: flex;flex-direction: column; height: calc(100vh - 150px)">
            <el-input v-model="sourceWord" resize="none" type="textarea" :rows = "12" placeholder="请输入内容" />
            <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;">
              <el-button  type="primary" @click="rsWord">提交问题</el-button>
              <el-button  type="waring" @click="resetWord">文本重置</el-button>
            </div>
            <el-divider style="margin-top: 10px;margin-bottom: 10px"></el-divider>
            <el-input id="targetWord" resize="none" v-model="targetWord"  type="textarea" :readonly="true" :rows = "14" placeholder="请输入内容" />
            <div style="margin-top: 20px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
              <el-button  type="primary" @click="copyWord">文本复制</el-button>
            </div>
          </div>
        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div> -->
</template>
<script>
  import {
    getMeeting,
    getMeetingFileImage,
    updateMeeting
  } from "@/api/partywork/meeting";
  import {
    endAudio,
    endFilePlay,
    filePlay,
    startAudio,
    takePhoto,
    takePhotoSign,
    urlControl,
    imageMove,
    imageScale
  } from "@/api/partywork/remoteControl";
  import {
    getToken
  } from "@/utils/auth";
  import {
    getAudio,
    listAudio,
    summaryMeeting,
    updateAudioTxt
  } from "@/api/partywork/meeting_audio";
  import {
    listDevice
  } from "@/api/pc/device";
  import {
    listAttendance
  } from "@/api/partywork/attendance";
  import {
    photoSignRecord
  } from "@/api/partywork/face";

  import logoImg from '@/assets/logo/party.png'
  import logoExitImg from '@/assets/logo/icon_exit.png'
  import iconAddressImg from '@/assets/icons/icon_address.png'
  import iconHostImg from '@/assets/icons/icon_host.png'
  import iconOrganizationImg from '@/assets/icons/icon_organization.png'
  import iconTimeImg from '@/assets/icons/icon_time.png'
  import iconScreenImg from '@/assets/icons/icon_screen.png'
  import iconFreshImg from '@/assets/icons/icon_fresh.png'
  import iconFreshGreyImg from '@/assets/icons/icon_fresh_grey.png'
  import iconYjscImg from '@/assets/icons/icon_yjsc.png'
  import iconPhotoImg from '@/assets/icons/icon_photo.png'
  import iconPhotoGreyImg from '@/assets/icons/icon_photo_grey.png'
  import iconDeleteImg from '@/assets/icons/icon_delete.png'
  import iconStartRecordImg from '@/assets/icons/icon_startrecord.png'
  import iconStartRecordRedImg from '@/assets/icons/icon_startrecord_red.png'
  import iconStopRecordImg from '@/assets/icons/icon_stoprecord.png'
  import iconStopRecordRedImg from '@/assets/icons/icon_stoprecord_red.png'
  import imgEmptyImg from '@/assets/images/img_empty.png'
  import dialogimgEmptyImg from '@/assets/images/dialog_img_empty.png'
  import iconStartPlayImg from '@/assets/icons/btn_startplay.png'
  import iconStopPlayImg from '@/assets/icons/btn_stopplay.png'

  export default {
    dicts: ['sys_asr_status', 'sys_attendance_type'],
    data() {
      return {
        logo: logoImg,
        logoExit: logoExitImg,
        iconAddress: iconAddressImg,
        iconHost: iconHostImg,
        iconOrganization: iconOrganizationImg,
        iconTime: iconTimeImg,
        iconScreen: iconScreenImg,
        iconFresh: iconFreshImg,
        iconFreshGrey: iconFreshGreyImg,
        iconYjsc: iconYjscImg,
        iconPhoto: iconPhotoImg,
        iconPhotoGrey: iconPhotoGreyImg,
        iconDelete: iconDeleteImg,
        iconStartRecord: iconStartRecordImg,
        iconStopRecord: iconStopRecordImg,
        iconStartRecordRed: iconStartRecordRedImg,
        iconStopRecordRed: iconStopRecordRedImg,
        imgEmpty: imgEmptyImg,
        dialogimgEmpty: dialogimgEmptyImg,
        iconStartPlay: iconStartPlayImg,
        iconStopPlay: iconStopPlayImg,
        meetingId: null,
        form: {},
        fileList: [],
        imageList: [],
        // 遮罩层
        loading: true,
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        totalPage: null,
        currentPage: 1,
        pageSrc: null,
        // 学习资料网站
        materialOptions: [],
        sourceWord: null,
        targetWord: null,
        websocket: null,
        material: null,
        timer: null, // 记录经过的时间秒数
        intervalId: null, // 定时器的ID
        timerRunning: false, // 状态标示，是否正在计时
        elapsed: 0, // 经过时间（毫秒）
        audioList: [],
        audioTxt: null,
        photoList: [],
        deviceList: [],
        deviceId: null,
        scaleId: null,
        moveId: null,
        audioReadOnly: true,
        audioId: null,
        attendanceList: [],
        signedNum: 0,
        faceSignUrl: null,
        faceSignList: [],
        scaleList: [{
          value: '25',
          label: '25%'
        }, {
          value: '50',
          label: '50%'
        }, {
          value: '75',
          label: '75%'
        }, {
          value: '100',
          label: '100%'
        }, {
          value: '125',
          label: '125%'
        }, {
          value: '150',
          label: '150%'
        }, {
          value: '175',
          label: '175%'
        }, {
          value: '200',
          label: '200%'
        }],
        moveList: [{
          value: '10',
          label: '10%'
        }, {
          value: '20',
          label: '20%'
        }, {
          value: '30',
          label: '30%'
        }, {
          value: '40',
          label: '40%'
        }, {
          value: '50',
          label: '50%'
        }, {
          value: '60',
          label: '60%'
        }, {
          value: '70',
          label: '70%'
        }, {
          value: '80',
          label: '80%'
        }, {
          value: '90',
          label: '90%'
        }, {
          value: '100',
          label: '100%'
        }],
        firstPhoto: null,
        firstPhotoList: [],
        selectedFileIndex: -1,
        fileType: 1,
        dialogPhotoVisible: false,
        selectedItems: [],
        dialogFaceSignVisible: false,
        customColor: '#FF5455',
        customColor2: 'rgba(0, 0, 0, 0.3)',
        percentage: 20,
        faceSign: {},
        dialogMeetVisible: false,
        isMeetPlay: false,
        imageHeight: 100,
        imageOffset: 0,
        imageHeightPx: 0,
        imageHeightPxChange: 0,
      }
    },
    watch: {
      selectedItems(newValue, oldValue) {
        // 当message变化时，会执行这里的代码
        console.log(`message changed from ${oldValue} to ${newValue}`);
        for (let j = 0; j < this.photoList.length; j++) {
          this.photoList[j].isSelected = false;
        }
        for (let i = 0; i < newValue.length; i++) {
          this.photoList[newValue[i]].isSelected = true;
        }

      }
    },


    // mounted:{
    //   let checkboxes = document.getElementsByName("myCheckbox");
    //   for (let i = 0; i < checkboxes.length; i++) {
    //     console.log(checkboxes[i].checked); // 输出 true 或 false
    //   }
    // },
    computed: {
      formatTime() {
        let remaining = this.elapsed;
        let milliseconds = remaining % 1000;
        remaining = Math.floor(remaining / 1000);
        let seconds = remaining % 60;
        remaining = Math.floor(remaining / 60);
        let minutes = remaining % 60;
        let hours = Math.floor(remaining / 60);
        return `${hours.toString().padStart(2, '0')}:${minutes
        .toString()
        .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`;
      },
    },
    created() {
      this.getRouterParam();
      this.getMeetingInfo();
      this.socketConnect();
      this.refreshAudio();
      this.getDeviceList();
      this.getAttendanceList();
    },
    destroyed() {
      this.websocket.close();
      if (this.timerRunning) {
        this.pauseTimer();
        clearInterval(this.timer);
      }
    },
    methods: {
      closePage() {
        this.$router.back();
      },
      refreshPhotoSign() {
        let param = {
          meetingId: this.meetingId,
        }
        photoSignRecord(param).then(response => {
          let reqParam = JSON.parse(response.data.reqParam);
          console.log('reqParam:', response.data);
          this.faceSign = response.data;
          if (response.data.rspCode === "200") {
            this.faceSignUrl = reqParam.url + ".1.png";
          } else {
            this.faceSignUrl = reqParam.url;
          }
          this.faceSignList = [];
          this.faceSignList.push(this.faceSignUrl);
          this.getAttendanceList();
        });
      },

      photoSign() {
        if (!this.validDeviceId()) {
          return;
        }
        let param = {
          meetingId: this.meetingId,
          deviceId: this.deviceId
        }
        takePhotoSign(param).then(response => {
          this.$modal.msgSuccess("下发拍照成功，请刷新！");
        });
      },
      getAttendanceList() {
        this.loading = true;
        let param = {
          meetingId: this.meetingId,
          pageNum: 1,
          pageSize: 200,
          type: 1
        }
        listAttendance(param).then(response => {
          this.attendanceList = response.rows;
          this.loading = false;
          console.log('attendanceList:', this.attendanceList);
          this.signedNum = 0;
          if (this.attendanceList != null && this.attendanceList.length > 0) {
            for (let i = 0; i < this.attendanceList.length; i++) {
              if (this.attendanceList[i].attendanceStatus == 1) {
                this.signedNum++;
              }
            }

            this.percentage = (this.signedNum / this.attendanceList.length) * 100;
            console.log('percentage:', this.percentage);
          }
        });
      },
      audioTxtEdit() {
        this.audioReadOnly = false;
        this.$message({
          message: '您现在可以对录音内容进行编辑',
          type: 'success'
        });
      },
      validDeviceId() {
        if (this.deviceId == null || this.deviceId === '') {
          this.$message({
            message: '请先选择会议设备',
            type: 'error'
          });
          return false;
        }
        return true;
      },
      getDeviceList() {
        let param = {
          pageSize: 100
        }
        listDevice(param).then(response => {
          this.deviceList = response.rows;
          this.deviceList.forEach(item => {
            let online = item.onlineStatus == "1" ? "在线" : "离线";
            item.deviceName = item.deviceName + "(" + online + ")";
          });
        })
      },
      summaryGenerate() {
        if (this.timerRunning) {
          this.$message({
            message: '请先暂停录音',
            type: 'warning'
          });
        } else {
          summaryMeeting(this.meetingId).then(response => {
            this.$message({
              message: response.msg,
              type: 'success'
            });
          });
          /*this.$modal.confirm('确认通过AI一键生成会议纪要？').then(function() {
            return summaryMeeting(this.meetingId);
          }).then(() => {
            this.$modal.msgSuccess("任务提交成功，请稍后刷新列表！");
          }).catch(() => {});*/
        }
      },
      savePhoto() {
        this.form.picsPath = this.photoList.join(",");
        console.log('保存后的photoList:', this.photoList);
        // this.form.imageList = this.photoList;
        // console.log('保存后的imageList:', this.form.imageList);
        updateMeeting(this.form).then(response => {
          if (this.photoList && this.photoList.length > 0) {
            this.firstPhoto = this.photoList[0];
            this.firstPhotoList = [];
            this.firstPhotoList.push(this.firstPhoto.picPath);

            this.photoPreviewList = [];
            for (let i = 0; i < this.photoList.length; i++) {
              this.photoPreviewList.push(this.photoList[i].picPath);
            }

          } else {
            this.firstPhoto = null;
            this.firstPhotoList = [];
            this.photoPreviewList = [];
          }
          this.selectedItems = [];
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        });
      },
      refreshPhoto() {
        const id = this.meetingId;
        getMeeting(id).then(response => {
          // 会议照片集合
          this.selectedItems = [];
          if (response.data.imageList != null && response.data.imageList.length > 0) {
            this.photoList = response.data.imageList;
            console.log('photoList', this.photoList)
            if (this.photoList != null && this.photoList.length > 0) {
              this.firstPhoto = this.photoList[0];
              this.firstPhotoList = [];
              this.firstPhotoList.push(this.firstPhoto.picPath);

              this.photoPreviewList = [];
              for (let i = 0; i < this.photoList.length; i++) {
                this.photoPreviewList.push(this.photoList[i].picPath);
              }
            } else {
              this.firstPhoto = null;
              this.firstPhotoList = [];
              this.photoPreviewList = [];
            }
          }
        });
      },
      deletePhoto(index) {
        this.$modal.confirm('是否确认删除图片？').then(() => {
          // 用户点击确认后执行的代码
          for (let i = 0; i < index.length; i++) {
            this.photoList.splice(index[i], 1);
          }
          console.log('新photoList:', this.photoList);
          this.savePhoto();
          // this.$modal.msgSuccess("删除成功");
        }).catch(() => {
          // 用户点击取消后执行的代码
        });
      },
      takePhoto() {
        if (!this.validDeviceId()) {
          return;
        }
        let id = this.meetingId;
        takePhoto(id, this.deviceId).then(response => {
          this.$message({
            message: '发送拍照指令成功',
            type: 'success'
          });
        });
      },
      showAudioTxt(row) {
        if (row.isTranslate == 0 || row.isTranslate == 2 || row.isTranslate == 3) {
          this.$message({
            message: '当前无文本内容可供查看，请稍后！',
            type: 'warning'
          });
          return;
        }
        let id = row.id;
        this.audioId = id;
        getAudio(id).then(response => {
          this.audioTxt = response.data.audioTxt;
        });
      },
      audioTxtSave() {
        this.audioReadOnly = true;
        let id = this.audioId;
        let audioTxt = this.audioTxt;
        let param = {
          id: id,
          audioTxt: audioTxt
        }
        updateAudioTxt(param).then(response => {
          this.$message({
            message: '文本内容保存成功！',
            type: 'success'
          });
          this.showAudioTxt(param);
        });
      },
      refreshAudio() {
        let queryParam = {
          meetingId: this.meetingId,
          pageNum: 1,
          pageSize: 100
        };
        this.loading = true;
        listAudio(queryParam).then(response => {
          this.audioList = response.rows;
          console.log('audioList', this.audioList);
          this.loading = false;
        });
      },

      // 开始计时
      startTimer() {
        if (!this.validDeviceId()) {
          return;
        }
        if (!this.timer) {
          this.timerRunning = true;
          this.timer = setInterval(() => {
            this.elapsed += 10; // 我们每10毫秒更新一次时钟
          }, 10);
          startAudio(this.meetingId, this.deviceId).then(response => {
            this.$message({
              message: '开始录制成功',
              type: 'success'
            });
          });
        }
      },
      // 暂停计时
      pauseTimer() {
        if (!this.validDeviceId()) {
          return;
        }
        this.timerRunning = false;
        clearInterval(this.timer);
        this.timer = null;
        endAudio(this.meetingId, this.deviceId).then(response => {
          this.$message({
            message: '暂停录制成功',
            type: 'success'
          });
        });
      },
      showUrl(url) {
        // if (!this.validDeviceId()) {
        //   return;
        // }
        this.material = url;
        let param = {
          material: url,
          type: 1,
          deviceId: this.deviceId,
          meetingId: this.meetingId
        };
        urlControl(param).then(response => {
          this.$message({
            message: '播放成功',
            type: 'success'
          });
        });
      },
      endShowUrl(url) {
        if (!this.validDeviceId()) {
          return;
        }
        this.material = null;
        let param = {
          material: url,
          type: 2,
          deviceId: this.deviceId
        };
        urlControl(param).then(response => {
          this.$message({
            message: '结束成功',
            type: 'success'
          });
        });
      },

      copyWord() {
        let textToCopy = document.getElementById("targetWord").value;
        navigator.clipboard.writeText(textToCopy).then(function() {

        }, function(err) {
          console.error('无法复制文本：', err);
        });
        this.$message({
          message: '文本复制成功',
          type: 'success'
        });
      },
      resetWord() {
        this.sourceWord = "";
        let inputElement = document.getElementById("targetWord");
        inputElement.value = "";
      },
      getRouterParam() {
        this.meetingId = this.$route.query.meetingId;
        console.log(this.meetingId);
      },
      getMeetingInfo() {
        const id = this.meetingId;
        this.loading = true;
        getMeeting(id).then(response => {
          this.form = response.data;
          console.log(this.form);
          this.fileList = this.form.followList;
          this.materialOptions = this.form.materialOptions;
          console.log('fileList:', this.fileList);
          this.loading = false;
          // 会议照片集合
          if (this.form.imageList != null && this.form.imageList.length > 0) {
            this.photoList = this.form.imageList;
            console.log('phtotList', this.photoList);
            if (this.photoList != null && this.photoList.length > 0) {
              this.firstPhoto = this.photoList[0];
              this.firstPhotoList = [];
              this.firstPhotoList.push(this.firstPhoto.picPath);

              this.photoPreviewList = [];
              for (let i = 0; i < this.photoList.length; i++) {
                this.photoPreviewList.push(this.photoList[i].picPath);
              }
            } else {
              this.firstPhoto = null;
              this.firstPhotoList = [];
              this.photoPreviewList = [];
            }
            console.log('firstPhoto', this.firstPhoto);
          }
        });
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      // 开始播放会议文件
      showFile() {
        const id = this.fileList[this.selectedFileIndex].id;
        this.currentPage = 1;
        getMeetingFileImage(id).then(response => {
          this.imageList = response.data;
          this.totalPage = this.imageList.length;
          this.getPageSrc();
        });
        this.controlFilePlay();
      },
      getPageSrc() {
        this.imageList.forEach((item, index) => {
          if (index === this.currentPage - 1) {
            this.pageSrc = item;
          }
        })
      },
      //缩放
      scaleChange() {
        if (!this.validDeviceId()) {
          this.scaleId = null;
          return;
        }
        if (this.totalPage == null) {
          this.$message({
            message: '请先选择文件开始文件播放',
            type: 'warning'
          });
          this.scaleId = null;
          return;
        }
        let param = {
          meetingId: this.meetingId,
          scale: this.scaleId,
          deviceId: this.deviceId,
          imageIndex: this.currentPage
        }
        imageScale(param).then(response => {
          console.log('缩放：', response);

          this.imageHeight = 100 * (this.scaleId / 100);
          this.this.imageHeightPxChange = this.imageHeightPx * (this.scaleId / 100);

          this.$message({
            message: "缩放成功",
            type: 'success'
          });
        });

      },
      //上移
      moveUp() {
        console.log('moveId', this.moveId);
        if (!this.validDeviceId()) {
          return;
        }
        if (this.fileType == 1) {
          if (this.totalPage == null) {
            this.$message({
              message: '请先选择文件开始文件播放',
              type: 'warning'
            });
            return;
          }
        }

        if (this.moveId == null) {
          this.$message({
            message: '请先选择移动距离',
            type: 'warning'
          });
          return;
        }
        let param = {
          direction: 1,
          meetingId: this.meetingId,
          distance: this.moveId,
          deviceId: this.deviceId,
          imageIndex: this.currentPage
        }
        imageMove(param).then(response => {
          console.log('上移：', response);
          this.imageOffset = this.imageOffset - ((this.moveId / 100) * this.imageHeightPxChange);
          this.$message({
            message: '上移成功',
            type: 'success'
          });
        });
      },
      //下移
      moveDown() {
        if (!this.validDeviceId()) {
          return;
        }
        if (this.fileType == 1) {
          if (this.totalPage == null) {
            this.$message({
              message: '请先选择文件开始文件播放',
              type: 'warning'
            });
            return;
          }
        }

        if (this.moveId == null) {
          this.$message({
            message: '请先选择移动距离',
            type: 'warning'
          });
          return;
        }
        let param = {
          direction: 2,
          meetingId: this.meetingId,
          distance: this.moveId,
          deviceId: this.deviceId,
          imageIndex: this.currentPage
        }
        imageMove(param).then(response => {
          console.log('下移：', response);
          this.imageOffset = this.imageOffset + (this.moveId / 100) * this.imageHeightPxChange;
          this.$message({
            message: '下移成功',
            type: 'success'
          });
        });
      },
      // 上一页
      lastPage() {
        if (!this.validDeviceId()) {
          return;
        }
        if (this.currentPage === 1) {
          this.$message({
            message: '已经是第一页',
            type: 'warning'
          });
        } else {
          this.currentPage--;
          this.getPageSrc();
          this.controlFilePlay();
        }
      },
      controlFilePlay() {
        const id = this.fileList[this.selectedFileIndex].id;
        filePlay(id, this.currentPage, this.deviceId).then(response => {
          this.$message({
            message: response.msg,
            type: 'success'
          });
        });
      },
      endFilePlay() {
        const id = this.ids[0];
        endFilePlay(id, this.deviceId).then(response => {
          this.$message({
            message: response.msg,
            type: 'success'
          });
        });
      },
      // 下一页
      nextPage() {
        if (!this.validDeviceId()) {
          return;
        }
        if (this.totalPage == null) {
          this.$message({
            message: '请先选择文件开始文件播放',
            type: 'warning'
          });
          return;
        }
        if (this.currentPage === this.totalPage) {
          this.$message({
            message: '已经是最后一页',
            type: 'warning'
          });
        } else {
          this.currentPage++;
          this.getPageSrc();
          this.controlFilePlay();
        }
      },
      // 结束播放
      endShowFile() {
        if (!this.validDeviceId()) {
          return;
        }
        this.endFilePlay();
        this.currentPage = null;
        this.pageSrc = null;
        this.imageList = [];
        // this.fileList = [];
        this.totalPage = null;
        this.currentPage = 1;
      },
      rsWord() {
        if (this.sourceWord === null || this.sourceWord === '') {
          this.$message({
            message: '文本内容不能为空',
            type: 'warning'
          });
        } else {
          // 调用接口
          /*let word = {
            message : this.sourceWord
          };
          rsWord(word).then(response => {
            this.targetWord = response.data.result;
          });*/
          let inputElement = document.getElementById("targetWord");
          inputElement.value = "";
          this.socketSend()
        }
      },
      socketSend() {
        let message = this.sourceWord;
        this.websocket.send(message);
      },
      socketConnect() {
        let socketUrl = "ws://117.73.13.40:8080/party-admin/ws/server/" + getToken();
        this.websocket = new WebSocket(socketUrl);
        this.websocket.onopen = function(event) {
          console.log("连接成功");
        };
        this.websocket.onmessage = function(event) {
          let message = event.data;
          let decodedMessage = decodeURIComponent(message); // 将消息转换为UTF-8编码
          let inputElement = document.getElementById("targetWord");
          inputElement.value = inputElement.value + decodedMessage;
        };

        this.websocket.onclose = function(event) {
          console.log("连接关闭");
        };

        this.websocket.onerror = function(event) {
          console.log("链接错误");
        };
      },

      //点击会议资料
      selectFileItem(index) {
        this.selectedFileIndex = index;
      },
      //开始播放
      beginPlay() {
        if (!this.validDeviceId()) {
          return;
        }
        if (this.selectedFileIndex < 0) {
          this.$message({
            message: '请先选择会议资料',
            type: 'warning'
          });
          return;
        }
        if (this.fileList[this.selectedFileIndex].fileType == 1) {
          this.fileType = 1;
          this.showFile();
        } else if (this.fileList[this.selectedFileIndex].fileType == 2) {
          this.fileType = 2;
          this.showUrl(this.fileList[this.selectedFileIndex].fileUrl);
        }
        this.isMeetPlay = true;
      },
      endPlay() {
        if (this.fileList[this.selectedFileIndex].fileType == 1) {
          this.fileType = 1;
          this.endShowFile();
        } else if (this.fileList[this.selectedFileIndex].fileType == 2) {
          this.fileType = 2;
          this.endShowUrl(this.fileList[this.selectedFileIndex].fileUrl);
        }
        this.isMeetPlay = false;
        this.imageOffset = 0;
        this.imageHeight = 100;
        this.imageHeightPxChange = this.imageHeightPx;
        this.scaleId = null;
        this.moveId = null;

      },
      deleteDialogPhoto() {
        console.log('selectedItems:', this.selectedItems);

        if (this.selectedItems != null && this.selectedItems.length > 0) {
          this.deletePhoto(this.selectedItems);
        } else {
          this.$message({
            message: '请先选择需要删除的图片',
            type: 'warning'
          });
        }
      },

      handleImageLoad(event) {
        this.imageHeightPx = event.target.offsetHeight;
        this.imageHeightPxChange = this.imageHeightPx;
        console.log('Image height:', this.imageHeightPx);
      }


    }
  }
</script>
<style>
  .imageDiv {
    /* margin-left: 40px;
    margin-right: 30px;
    margin-bottom: 10px; */
    margin-left: 5px;
    margin-rignt: 5px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .meeting {
    width: 100%;
    height: 100%;
    background-image: url("../../../assets/images/bg_metting.png");
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .title {
    font-family: Microsoft YaHei;
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
    letter-spacing: -1px;
    color: #FFFFFF;
    margin-left: 8px;
  }

  .display-row {
    display: flex;
    flex-direction: row;
  }

  .display-cloumn {
    display: flex;
    flex-direction: column;
  }

  .display-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text-fontsize-14 {
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.01em;
    color: #FFFFFF;
  }

  .text-fontsize-16 {
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.01em;
    color: #FFFFFF;
  }

  .text-fontsize-18 {
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 0.01em;
    color: #FFFFFF;
  }

  .icon {
    width: 18px;
    height: 18px;
  }

  .icon-40 {
    width: 40px;
    height: 40px;
  }

  /* 如果你想要更改下拉菜单的背景色 */
  .el-select .el-input__inner {
    background-color: rgba(0, 0, 0, 0);
    /* 你想要的背景色 */
    border: 1px solid rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0px;
    color: #FFFFFF;
  }

  .el-select .el-input__inner:focus {
    border-color: rgba(255, 255, 255, 0.85) !important;
  }

  /* 下拉框*/
  .el-select-dropdown {}

  /* 修改el-select下拉菜单选项的文字颜色 */
  .el-select-dropdown__item {
    color: #000000;
    /* 将#your-color-here替换为你想要的颜色代码 */
    font-weight: normal;
    font-size: 14px;
  }

  .el-select-dropdown__item.selected {
    color: #CA0001;
    font-weight: normal;
    font-size: 14px;
  }

  .is-selected {
    background: rgba(255, 255, 255, 0.15);
  }

  .btn {
    background-color: transparent;
    border-color: #FFFFFF;
    color: #FFFFFF;
  }

  .screen_nocontent {
    border: 1px dashed #FFFFFF;
  }


  .fileItem {
    padding: 10px 20px;
  }

  .single-line {
    white-space: nowrap;
    /* 保证文本不会换行 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    text-overflow: ellipsis;
    /* 添加省略号表示文本被截断 */
  }

  .line {
    height: 1px;
    width: 100%;
    background-color: #FFFFFF;
  }

  .line-grey {
    height: 1px;
    width: 100%;
    background-color: #E5E6EB;
  }

  .line-grey-column {
    width: 1px;
    height: calc(70vh - 51px);
    background-color: #E5E6EB;
  }



  progress {
    width: 82px;
    height: 8px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.3);
  }

  /* 已完成部分的样式 */
  progress::-webkit-progress-value {
    border-radius: 10px;
    background: #FFE59E;
  }

  /* 未完成部分的样式 */
  progress::-webkit-progress-bar {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
    /* 对于WebKit浏览器，如Chrome，Safari */
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    /* 对于IE和Edge */
    scrollbar-width: none;
    /* 对于Firefox */
  }

  .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 70vh;
    width: 60vw;
    max-height: calc(100% - 200px);
    max-width: calc(100% - 30px);
  }

  .el-dialog__header {
    height: 50px;
    /* 设置你想要的高度 */
  }

  .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
    padding: 0px;
  }


  /* table th,
  table td {
    border-bottom: none !important;
  } */

  .no-border th,
  .no-border td {
    border-bottom: none !important;
  }

  .custom-text-color {
    color: red;
  }

  .no-active.el-button:focus,
  .no-active.el-button:hover,
  .no-active.el-button:active {
    background-color: transparent !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
  }

  .playBtn.el-button:focus,
  .playBtn.el-button:hover,
  .playBtn.el-button:active {
    background-color: #FFE59E !important;
    color: #CA0001 !important;
  }

  .playBtn {
    background: #FFE59E;
    color: #CA0001;
    padding: 5px;
  }

  .more {
    color: #FFE59E;
    background: transparent;
    border-color: transparent;
    padding: 0;
    font-size: 14px;
  }

  .more.el-button:focus,
  .more.el-button:hover,
  .more.el-button:active {
    background-color: transparent !important;
    color: #FFE59E !important;
    border-color: transparent !important;
  }

  .el-select .el-input__inner::placeholder{
    color: #FFFFFF;
  }
</style>