zhgdyun/src/views/projectFront/aiAnalysis/warningList.vue

<template>
  <div class="fullHeight">
    <div class="fullHeight">
      <div class="searchBox whiteBlock">
        <el-form :inline="true" size="medium" :model="formInline" class="demo-form-inline">
          <el-form-item :label="$t('message.sixComplete.fence.warnType')">
            <el-select v-model="formInline.alarmType">
              <el-option :label="$t('message.sixComplete.fence.all')" value=""></el-option>
              <el-option :label="item.name" :value="item.data" v-for="(item, index) in alarmTypeArrList" :key="item.data"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.sixComplete.happenTime')">
            <el-date-picker
              @change="changeTime"
              v-model="dateRangeArr"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              :range-separator="$t('message.sixComplete.to')"
              :start-placeholder="$t('message.sixComplete.start')"
              :end-placeholder="$t('message.sixComplete.end')"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('message.sixComplete.fence.devNo')">
            <el-input v-model="formInline.hardwareId" :placeholder="$t('message.sixComplete.fence.placeholder')"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList(1)" plain>{{ $t('message.sixComplete.query') }}</el-button>
            <el-button type="warning" @click="refresh" plain>{{ $t('message.sixComplete.fresh') }}</el-button>
          </el-form-item>
        </el-form>
        <!-- <el-button type="primary" size="medium" @click="addFn"
          >新增课程</el-button
        >
        <el-button type="warning" plain size="medium" @click="refresh">{{
          $t("message.alarmValueSet.refresh")
        }}</el-button> -->
      </div>
      <div class="table_wrap">
        <div class="listContent">
          <vue-scroll>
            <div class="listBox" v-for="(item, index) in workerList" :key="index">
              <div class="inner whiteBlock">
                <div class="videoBox">
                  <!-- <video
                    class=""
                    :src="$store.state.FILEURL + item.eduVideo"
                    controls
                  ></video> -->
                  <img
                    :src="$store.state.FILEURL + item.imageUrl"
                    :alt="$t('message.sixComplete.carDense.takePhoto')"
                    :preview="$store.state.FILEURL + item.imageUrl"
                  />
                  <div class="desc">
                    <span class="time">{{ getTypeName(item.alarmType) }}</span>
                    <span>{{ item.createTime }}</span>
                  </div>
                </div>
                <!-- 来源 -->
                <div class="title">{{ $t('message.sixComplete.carDense.from') + ':' }}{{ item.location }}</div>
                <!-- 去处置 -->
                <div class="toDisposeOf" @click="openDialog(item)" v-if="!item.handleResult">
                  <el-button type="primary" size="small">去处置</el-button>
                </div>
                <div class="toDisposeDetail" @click="openDialogDetail(item)" v-else>
                  <el-button type="info" size="small">已闭合</el-button>
                </div>
                <!-- <div @click.stop="deleteBefore(item)" class="deleteBtn">
                        <img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
                    </div> -->
              </div>
            </div>
          </vue-scroll>
        </div>
        <div class="placeholderBox" v-if="workerList.length == 0">
          <img src="@/assets/images/noData.png" alt="" />
          <p>{{ $t('message.sixComplete.carDense.noWarn') }}</p>
        </div>
        <!-- <el-table class="tables" :data="workerList">
                    <el-table-column
                    type="index"
                    width="50"
                    align="center"
                    :label="$t('message.personnelPosition.beaconManage.table.index')"
                    ></el-table-column>
                    <el-table-column prop="eduCourseName" :label="'课程名称'"></el-table-column>
                    <el-table-column prop="passScore" :label="'及格分数'"></el-table-column>
                    <el-table-column prop="eduWorkerNum" :label="'考试人数'"></el-table-column>
                    <el-table-column prop="passWorkerNum" :label="'及格人数'"></el-table-column>
                    <el-table-column prop="addTime" :label="'创建时间'"></el-table-column>
                    <el-table-column width="200">
                        <template slot-scope="scope">
                            <div class="tableBtns">
                                <div @click="editBefore(scope.row)" class="operationText">
                                    <span>详细</span>
                                </div>
                                <div @click="deleteBefore(scope.row)" class="operationText">
                                    <img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
                                    <span>{{$t('message.workType.delete')}}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table> -->
        <el-pagination
          class="pagerBox"
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="pageInfo.pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(pageInfo.total)"
          background
        ></el-pagination>
      </div>
    </div>
    <!-- 处置记录弹框-->
    <el-dialog :modal-append-to-body="false" @close="close" title="处置详情" :visible.sync="recordShow" width="667px">
      <div class="dialog_content">
        <el-form size="medium" ref="addEditForm" :model="addEditForm" :rules="addEditRules" label-width="120px" class="dialogFormBox">
          <el-form-item label="处置结果" prop="handleResult">
            <el-radio :disabled="isDetail" v-model="addEditForm.handleResult" :label="1">已处置</el-radio>
            <el-radio :disabled="isDetail" v-model="addEditForm.handleResult" :label="2">误报忽略</el-radio>
          </el-form-item>
          <el-form-item label="描述" prop="desc" v-if="addEditForm.handleResult != 2">
            <el-input
              :autosize="{ minRows: 2, maxRows: 6 }"
              :disabled="isDetail"
              type="textarea"
              v-model="addEditForm.desc"
              :placeholder="'请输入'"
            ></el-input>
          </el-form-item>
          <el-form-item label="选择违章人员" prop="workerInfoList" v-if="addEditForm.handleResult != 2">
            <el-select :disabled="isDetail" multiple v-model="selectList" placeholder="请选择" clearable @change="dutySelectChange">
              <el-option v-for="(item, index) in workerListOptions" :key="index" :label="item.workerName" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <div class="dialog-footer" v-if="!isDetail">
            <el-button class="cancleBtn" icon="el-icon-circle-close" size="medium" @click="recordShow = false">取消 </el-button>
            <el-button @click="addBtn" type="primary" icon="el-icon-circle-check" size="medium">确定 </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  aiAnalyseHardWareAlarmRecordApi,
  aiAnalyseHardWareAlarmRecordEdit,
  getViolatorList
} from '@/assets/js/api/equipmentCenter/electricBox'
import { getDictionaryItemApi } from '@/assets/js/api/companyDiagram.js'
import { getWorkerInfoList } from '@/assets/js/api/laborPerson.js'

export default {
  data() {
    return {
      isDetail: false,
      pageType: 'list',
      workerList: [],
      pageInfo: {
        pageNo: 1, //页数
        pageSize: 10, //条数
        total: 0 //总条数
      },
      itemId: '',
      formInline: {
        alarmType: '',
        endTime: '',
        startTime: '',
        hardwareId: ''
      },
      dateRangeArr: [],
      alarmTypeArrList: [],
      recordShow: false,
      addEditForm: {
        workerInfoList: [],
        handleResult: '',
        desc: ''
      },
      addEditRules: {
        handleResult: [
          {
            required: true,
            message: '必填',
            trigger: 'blur'
          }
        ]
      },
      workerListOptions: [],
      selectList: []
    }
  },
  mounted() {
    this.selectNowDate()
    this.getList()
    this.getDictionaryList()
    this.getDutyPerson()
  },
  methods: {
    //  选择人员下拉回调
    dutySelectChange(e) {
      // const item = this.dutyList.find(item => item.userId === e)
      // this.addEditForm.dutyUserName = item.realName
      const newArray = e.map(item => ({ id: item }))
      this.addEditForm.workerInfoList = newArray
      console.log('下拉选择', newArray)
    },
    close() {
      this.addEditForm = {}
      this.selectList = []
      this.isDetail = false
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate()
      })
    },

    //查询选择人员下拉
    getPersonDetail(itemId) {
      let data = {
        projectSn: this.$store.state.projectSn,
        aiAnalyseHardWareAlarmRecordId: itemId
      }
      getViolatorList(data).then(res => {
        if (res.code == 200) {
          this.selectList = res.result.map(items => items.id)
          console.log('回显选择人员', this.selectList)
        } else {
          this.$message.error(res.message)
        }
      })
    },

    //查询选择人员下拉
    getDutyPerson() {
      let data = {
        projectSn: this.$store.state.projectSn
      }
      getWorkerInfoList(data).then(res => {
        if (res.code == 200) {
          this.workerListOptions = res.result.records
          console.log('获取劳务人员下拉', this.workerListOptions)
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 打开处置弹窗
    openDialog(item) {
      this.recordShow = true
      this.addEditForm = JSON.parse(JSON.stringify(item))
      this.getPersonDetail(item.id)
      console.log('打开处置弹窗', item)
    },

    // 打开 详情处置弹窗
    openDialogDetail(item) {
      this.recordShow = true
      this.isDetail = true
      this.addEditForm = JSON.parse(JSON.stringify(item))
      this.getPersonDetail(item.id)
      console.log('打开处置弹窗', item)
    },

    // 保存
    addBtn() {
      let params = JSON.parse(JSON.stringify(this.addEditForm))
      params.projectSn = this.$store.state.projectSn
      this.$refs.addEditForm.validate(valid => {
        if (valid) {
          console.log('保存', params)
          aiAnalyseHardWareAlarmRecordEdit(params).then(result => {
            if (result.success) {
              this.$message.success(result.message)
              this.getList()
              this.recordShow = false
            }
          })
        } else {
          return false
        }
      })
    },

    //获取字典施工阶段
    getDictionaryList() {
      getDictionaryItemApi({
        dictionaryEncoding: 'ai_analyse_hard_ware_alarm_record_type',
        projectSn: this.$store.state.projectSn
      }).then(res => {
        if (res.result.length > 0) {
          console.log('获取字典施工阶段', res.result)
          this.alarmTypeArrList = res.result
        }
      })
    },
    // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
    selectNowDate() {
      var date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hours = date.getHours(), //获取当前小时数(0-23)
        minutes = date.getMinutes(), //获取当前分钟数(0-59)
        seconds = date.getSeconds()
      month >= 1 && month <= 9 ? (month = '0' + month) : ''
      day >= 0 && day <= 9 ? (day = '0' + day) : ''
      hours >= 0 && hours <= 9 ? (hours = '0' + hours) : ''
      minutes >= 0 && minutes <= 9 ? (minutes = '0' + minutes) : ''
      seconds >= 0 && seconds <= 9 ? (seconds = '0' + seconds) : ''
      var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
      var timer2 = year + '-' + month + '-' + day + ' ' + '00:00:00'
      this.dateRangeArr = [timer2, timer]
      this.formInline.startTime = this.dateRangeArr[0]
      this.formInline.endTime = this.dateRangeArr[1]
      console.log(timer)
      // return timer;
    },
    getTypeName(val) {
      let text = ''
      this.alarmTypeArrList.forEach(item => {
        if (item.data == val) {
          text = item.name
        }
      })
      return text
    },
    changeTime() {
      if (this.dateRangeArr) {
        this.formInline.startTime = this.dateRangeArr[0]
        this.formInline.endTime = this.dateRangeArr[1]
      } else {
        this.formInline.startTime = ''
        this.formInline.endTime = ''
      }
    },
    refresh() {
      this.pageInfo.pageNo = 1
      this.formInline.hardwareId = ''
      this.formInline.startTime = ''
      this.formInline.endTime = ''
      this.formInline.alarmType = ''
      this.dateRangeArr = []
      this.getList()
    },
    getList(val) {
      if (val == 1) {
        this.pageInfo.pageNo = 1
      }
      let json = Object.assign(this.pageInfo, this.formInline)
      json.projectSn = this.$store.state.projectSn
      aiAnalyseHardWareAlarmRecordApi(json).then(res => {
        this.workerList = res.result.records
        this.pageInfo.total = res.result.total
        setTimeout(() => {
          this.$previewRefresh()
        }, 100)
      })
    },
    goBack() {
      this.pageType = 'list'
      this.getList()
    },
    // addFn() {
    //   this.itemId = "";
    //   this.pageType = "add";
    // },
    editBefore(item) {
      this.itemId = item.id
      this.pageType = 'detail'
    },
    deleteBefore(item) {
      this.$confirm(this.$t('message.sixComplete.carWash.tipText') + '?', this.$t('message.sixComplete.carWash.tip'), {
        confirmButtonText: this.$t('message.sixComplete.carWash.confirm'),
        cancelButtonText: this.$t('message.sixComplete.carWash.cancel'),
        type: 'warning'
      })
        .then(() => {
          workerSafeEducationDeleteApi({ id: item.id }).then(res => {
            this.$message({
              type: 'success',
              message: this.$t('message.sixComplete.carWash.deleteSuccess') + '!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('message.sixComplete.carWash.cancelDelete')
          })
        })
    },
    SizeChange(val) {
      console.log(val)
      this.pageInfo.pageSize = val
      this.getList()
    },
    CurrentChange(val) {
      console.log(val)
      this.pageInfo.pageNo = val
      this.getList()
    }
  }
}
</script>
<style lang="less" scoped>
.backText {
  margin: -10px 0 0 0;
}
.jyjzPage .backText {
  margin: 15px 15px 0;
  /deep/.el-page-header__content {
    color: white;
  }
}
.listContent {
  overflow: hidden;
  height: calc(100% - 70px);
}
.listBox {
  float: left;
  width: 20%;
  margin-bottom: 20px;
  .inner {
    margin: 0 10px;
    box-shadow: 0px 2px 16px 0px rgba(131, 183, 255, 0.2);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
  }
  .videoBox {
    position: relative;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
    .desc {
      background-color: rgba(0, 0, 0, 0.5);
      padding: 5px 10px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(100% - 20px);
      color: white;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
    }
  }
  .title {
    width: 70%;
    padding: 10px 10px 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    // cursor: pointer;
    &:hover {
      color: @--color-primary;
    }
  }
  &:hover {
    .deleteBtn {
      display: block;
    }
  }
  .deleteBtn {
    display: none;
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
  }
}
.pagerBox {
  margin: 20px;
}
.table_wrap {
  position: relative;
}
.toDisposeOf {
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  position: absolute;
  right: 3%;
  bottom: 4%;
}
.toDisposeDetail {
  color: #fff;
  cursor: pointer;
  position: absolute;
  right: 3%;
  bottom: 4%;
}
</style>