rongtong-medical-manage-web/src/views/dangerManage/voiceManage.vue

<template>
  <div class="module-container">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span class="card-title">语音上报记录</span>
          <span>
            <el-button
              size="mini"
              type="primary"
              @click="exportFile"
            >导出</el-button>
          </span>
        </div>
      </template>
      <div class="card-container">
        <el-form
          ref="filterForm"
          :model="filterForm"
          label-width="0"
          size="small"
          class="filter-form"
        >
          <el-row :gutter="16">
            <el-col :span="4">
              <el-form-item prop="troubleCode">
                <el-input
                  v-model="filterForm.troubleCode"
                  placeholder="隐患单号"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="userName">
                <el-input
                  v-model="filterForm.userName"
                  placeholder="上报人"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="phone">
                <el-input
                  v-model="filterForm.phone"
                  placeholder="上报人电话"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col
              v-show="!shrinkState"
              :span="12"
            >
              <el-form-item prop="date">
                <el-date-picker
                  v-model="filterForm.date"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="sourceType">
                <el-select
                  v-model="filterForm.sourceType"
                  placeholder="隐患来源"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in $store.state.sourceTypeList"
                    :key="item.code"
                    :label="item.label"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              v-show="!shrinkState"
              :span="4"
            >
              <el-form-item prop="location">
                <el-input
                  v-model="filterForm.location"
                  placeholder="隐患位置"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col
              v-show="!shrinkState"
              :span="4"
            >
              <el-form-item prop="troubleState">
                <el-select
                  v-model="filterForm.troubleState"
                  placeholder="隐患状态"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in $store.state.troubleStateList"
                    :key="item.code"
                    :label="item.label"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              v-show="!shrinkState"
              :span="4"
            >
              <el-form-item prop="voiceState">
                <el-select
                  v-model="filterForm.voiceState"
                  placeholder="语音识别状态"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in $store.state.voiceStateList"
                    :key="item.code"
                    :label="item.label"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button
                  type="primary"
                  @click="handlePageChange(1)"
                >
                  查询
                </el-button>
                <el-button @click="resetFilterForm">
                  重置
                </el-button>
                <el-button @click="shrinkState = !shrinkState">
                  {{ shrinkState ? '展开' : '收缩' }}
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          header-row-class-name="table-head"
          :height="resizeHeight - 346 + (shrinkState ? 50 : 0)"
          stripe
          border
          fit
          @selection-change="tableSelectionChange"
          @row-dblclick="getDetailData"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
            fixed="left"
          />
          <el-table-column
            prop="troubleCode"
            label="隐患单号"
            min-width="120"
            align="center"
          />
          <el-table-column
            prop="createDate"
            label="上报时间"
            min-width="120"
            align="center"
          />
          <el-table-column
            prop="createUserName"
            label="上报人"
            min-width="120"
            align="center"
          />
          <el-table-column
            prop="createUserPhone"
            label="上报人电话"
            min-width="120"
            align="center"
          />
          <el-table-column
            label="隐患来源"
            min-width="120"
            align="center"
          >
            <template #default="scope">
              {{ getDictionaryLabel(scope.row.sourceType, 'sourceTypeList') }}
            </template>
          </el-table-column>
          <el-table-column
            prop="location"
            label="隐患位置"
            min-width="180"
            align="center"
          />
          <el-table-column
            label="语音识别状态"
            min-width="120"
            align="center"
          >
            <template #default="scope">
              {{ getDictionaryLabel(scope.row.voiceState, 'voiceStateList') }}
            </template>
          </el-table-column>
          <el-table-column
            prop="descriptionVoice"
            label="语音识别结果"
            min-width="180"
            align="center"
          />
          <el-table-column
            label="隐患状态"
            min-width="120"
            align="center"
          >
            <template #default="scope">
              {{ getDictionaryLabel(scope.row.troubleState, 'troubleStateList') }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :total="tableTotal"
          :page-sizes="[10, 20, 50, 100]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-card>
    <el-drawer
      v-model="detailFormShow"
      title="详情"
      :size="900"
      custom-class="table-dialog"
    >
      <div class="drawer-body">
        <el-tabs
          v-model="detailTabActive"
          type="border-card"
        >
          <el-tab-pane
            label="基本信息"
            name="1"
          >
            <div class="tab-body">
              <el-form
                ref="detailForm"
                :model="detailForm"
                :rules="detailFormRules"
                label-width="140px"
                class="table-form"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="隐患单号">
                      {{ detailForm.troubleCode }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="隐患状态">
                      {{ detailForm.troubleState }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="位置"
                      prop="location"
                    >
                      <el-input
                        v-if="detailFormEdit"
                        v-model="detailForm.location"
                        placeholder="请输入位置"
                        clearable
                      />
                      <span v-else>{{ detailForm.location }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="隐患内容"
                      prop="description"
                    >
                      <el-input
                        v-if="detailFormEdit"
                        v-model="detailForm.description"
                        placeholder="请输入隐患内容"
                        clearable
                      />
                      <span v-else>{{ detailForm.description }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="下单方式">
                      {{ getDictionaryLabel(detailForm.troubleType, 'troubleTypeList') }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="上报人">
                      {{ detailForm.createUserName }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="上报电话">
                      {{ detailForm.createUserPhone }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="隐患来源">
                      {{ getDictionaryLabel(detailForm.sourceType, 'sourceTypeList') }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="上报时间">
                      {{ detailForm.createDate }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="语音识别状态">
                      {{ getDictionaryLabel(detailForm.voiceState, 'voiceStateList') }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="语音识别结果">
                      {{ detailForm.descriptionVoice }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="语音">
                      <div class="audio-handle">
                        <a
                          v-if="detailForm.troubleType == 2"
                          class="a-link"
                          @click="handleEntrance('audioPlay')"
                        >播放语音</a>
                        <el-button
                          v-if="detailForm.troubleType == 2 && detailForm.voiceState != 2"
                          size="mini"
                          type="primary"
                          @click="speechAudio"
                        >
                          识别语音
                        </el-button>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="处理方式">
                      {{ getDictionaryLabel(detailForm.handleType, 'handleTypeList') }}
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="汇报状态">
                      {{ getDictionaryLabel(detailForm.closeType, 'closeTypeList') }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="处理人">
                      {{ detailForm.orderUserName }}
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item
                      label="补充描述"
                      prop="descriptionExt"
                    >
                      <el-input
                        v-if="detailFormEdit"
                        v-model="detailForm.descriptionExt"
                        placeholder="请输入补充描述"
                        clearable
                      />
                      <span v-else>{{ detailForm.descriptionExt }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="图片">
                      <el-image
                        v-for="(item, index) in detailForm.fileList"
                        :key="index"
                        class="form-preview-image"
                        :src="item"
                        :preview-src-list="detailForm.fileList"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="处理进度"
            name="2"
          >
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in progressList"
                :key="index"
                :timestamp="item.creatorName + '&emsp;&emsp;&emsp;&emsp;' + item.createDate"
              >
                {{ getDictionaryLabel(item.processState, 'processStateList') }}
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="drawer-footer">
        <handleDialog
          ref="handleDialog"
          :form-info="detailForm"
          :detail-form-edit="detailFormEdit"
          :button-edit-loading="buttonLoading"
          @cancelEdit="detailFormEdit = false"
          @submitEdit="submitEdit"
          @closeDetail="detailFormShow = false"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getTableListOfVoice,
  getDetailDataOfVoice,
  downloadTableDataOfVoice
} from 'api/danger'
import viewCurrency from 'utils/viewCurrency'
import editFormCurrency from 'comps/danger/editFormCurrency'
import handleDialog from 'comps/danger/handleDialog.vue'
import {
  ElNotification
} from 'element-plus'

export default {
  name: 'VoiceManage',
  components: {
    handleDialog
  },
  mixins: [
    viewCurrency,
    editFormCurrency
  ],
  props: {
    resizeHeight: {
      type: Number,
      default: 500
    }
  },
  data () {
    return {
      //  过滤
      filterForm: {
        troubleCode: '',
        date: [],
        userName: '',
        phone: '',
        sourceType: '',
        location: '',
        troubleState: '',
        voiceState: ''
      },
      //  字典
      dictionaryList: ['sourceType', 'troubleState', 'voiceState', 'troubleType', 'handleType', 'closeType', 'processState'],
      //  详情
      detailFormShow: false,
      detailTabActive: '1',
      detailForm: {
        troubleCode: '',
        troubleState: '',
        location: '',
        description: '',
        troubleType: '',
        createUserName: '',
        createUserPhone: '',
        sourceType: '',
        createDate: '',
        voiceState: '',
        handleType: '',
        closeType: '',
        fileList: [],
        audioList: []
      },
      //  处理进度
      progressList: []
    }
  },
  mounted () {
  },
  methods: {
    //  获取表格数据
    getTableList () {
      this.tableLoading = true
      getTableListOfVoice({
        ...this.filterForm,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
          this.tableTotal = res.data.total
          this.tableLoading = false
        } else {
          ElNotification({
            title: '获取表格数据失败',
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    //  表格勾选
    tableSelectionChange (data) {
      this.selectTableNode = data.map(site => {
        return site.deviceId
      })
    },
    //  导出文件
    exportFile () {
      downloadTableDataOfVoice({})
    },
    //  获取详情
    getDetailData (row, column, event) {
      this.detailFormShow = true
      getDetailDataOfVoice({
        troubleId: row.id
      }).then(res => {
        if (res.code == 200) {
          this.detailFormShow = true
          this.detailForm = {
            ...res.data,
            fileList: res.data.fileList.filter(item => item.fileType == 2).map(item => {
              return item.filePath
            }),
            audioList: res.data.fileList.filter(item => item.fileType == 1).map(item => {
              return item.filePath
            })
          }
          this.progressList = res.data.processList
        } else {
          ElNotification({
            title: '获取详情失败',
            message: res.msg,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>