[FE]AI任务 进出记录

security-protection-platform/src/api/videoSurveillance/index.js

    return $default.get(`/sp/uploadFile/getFileUrl?fileName=${id}`).then(resp => {
      return resp
    }).catch((err) => { return err })
  },
  // 识别记录
  getDistinguishData(data) {
    return $default.get(`/sp/aiIdenLogManagement/queryAllAiIdenLogPicture`, data).then(resp => {
      return resp
    }).catch((err) => { return err })
  },
  // 识别记录详情
  queryOneAiIdenLog(data) {
    return $default.get('/sp/aiIdenLogManagement/queryOneAiIdenLog?aiIdenLogId=' + data).catch((err) => { return err })
  }
}
export default api

security-protection-platform/src/modules/system/assignment/index.vue

    <t-card class="page-card">
      <div class="select-confidtion-box row">
        <div class="col-3">任务名称：
          <t-select v-model="taskName" width="200px">
            <t-option v-for="item in taskNameList" :key="item.id" :value="item.charSpecValueId">{{ item.description }}</t-option>
          <t-select v-model="taskName" filterable width="200px">
            <t-option v-for="item in taskNameList" :key="item.aiTaskId" :value="item.aiTaskName">{{ item.aiTaskName }}</t-option>
          </t-select>
        </div>
        <div class="col-3">匹配模型：
          <t-select v-model="matchingType" width="200px">
            <t-option v-for="item in matchingTypeList" :key="item.id" :value="item.charSpecValueId">{{ item.description }}</t-option>
            <t-option v-for="item in matchingTypeList" :key="item.aiIdenModel" :value="item.aiIdenModel">{{ item.name }}</t-option>
          </t-select>
        </div>
        <div class="col-3">任务状态：
          <t-select v-model="taskStatus" width="200px">
            <t-option v-for="item in taskStatusList" :key="item.id" :value="item.charSpecValueId">{{ item.description }}</t-option>
            <t-option v-for="item in taskStatusList" :key="item.id" :value="item.id">{{ item.description }}</t-option>
          </t-select>
        </div>
        <div class="col-2 offset-1 select-button-box" align="end">
        </div>
      </div>
      <div class="function-button-box">
        <t-button color="primary">
        <t-button color="primary" @click="addAiTask">
          <t-icon icon="plus-circle-outline" size="16"></t-icon>新增
        </t-button>
        <t-button @click="multDeleteDeviceData">
        <t-button @click="multdeleteAiTaskData">
          <t-icon icon="trash" size="16"></t-icon>删除
        </t-button>
      </div>
            </template>
          </t-table-column>
          <t-table-column prop="aiTaskStatus" align="center" style="background-color:#000" label="状态" width="120">
            <template v-slot="{row}">
              <div :class="getTypecellClass(row.aiTaskStatus)" class="tag-cell">
                <span class="status-ball"></span>{{ row.aiTaskStatus }}
              </div>
            <template slot-scope="scope">
              <t-tag v-if="scope.row.aiTaskStatus=== 'RUN'" state="success">执行中</t-tag>
              <t-tag v-if="scope.row.aiTaskStatus=== 'STO'" state="stoped">已停止</t-tag>
            </template>
          </t-table-column>
          <t-table-column label="操作">
            <template v-slot="{row}">
              <a href="javascript:;" style="color:#0089D4;">编辑</a>
              <a href="javascript:;" style="color:#0089D4;" @click="deleteDeviceData(row)">删除</a>
              <a href="javascript:;" style="color:#0089D4;">执行</a>
              <a href="javascript:;" style="color:#0089D4;">停止</a>
              <a href="javascript:;" style="color:#0089D4;" @click="updAiTask(row)">编辑</a>
              <a href="javascript:;" style="color:#0089D4;" @click="deleteAiTaskData(row)">删除</a>
              <a href="javascript:;" style="color:#0089D4;" @click="changeToRUN(row)">执行</a>
              <a href="javascript:;" style="color:#0089D4;" @click="changeToSTO(row)">停止</a>
            </template>
          </t-table-column>
        </t-table>
      </div>
      <div class="table-pager">
        <t-pager :current.sync="page" :total="total" :page-size="limit" :sizer-range="[10,20,50,100]" show-elevator show-sizer @on-size-change="onSizeChange" @on-change="onChange">>
        <t-pager :current.sync="page" :total="total" :page-size="limit" :sizer-range="[10,20,50,100]"
                 show-elevator show-sizer @on-size-change="onSizeChange" @on-change="onChange">
        </t-pager>
      </div>
    </t-card>
    <!-- <template>
      <send-order-modal :data="currentDeviceData"></send-order-modal>
    </template> -->
    <t-modal :visibled.sync="aiTaskModal" :mask-closable="false" title="AI任务" width="1000px">
      <p style="margin-bottom: 0px;text-align: left;line-height: 18px;font-size: 14px;border-left: 4px solid #147bd1;padding-left: 10px;"><b>基本信息</b></p>
      <p></p>
      <t-form ref="aiTaskModalForm" :model="aiTaskModalForm" :rules="aiTaskModalFormRules" :label-span="2" label-position="right">
        <div class="row">
          <div class="col">
            <t-form-item label="任务名称" prop="aiTaskName">
              <t-input v-model="aiTaskModalForm.aiTaskName" placeholder="请输入任务名称"></t-input>
            </t-form-item>
          </div>
          <div class="col">
            <t-form-item label="匹配模型" prop="aiIdenModel">
              <t-select v-model="aiTaskModalForm.aiIdenModel" >
                <t-option v-for="item in matchingTypeList" :key="item.aiIdenModel" :value="item.aiIdenModel">{{ item.name }}</t-option>
              </t-select>
            </t-form-item>
          </div>
        </div>
      </t-form>
      <p style="margin-bottom: 0px;text-align: left;line-height: 18px;font-size: 14px;border-left: 4px solid #147bd1;padding-left: 10px;"><b>执行设备</b></p>
      <div>
      </div>
      <div class="grid-demo">
        <t-row>
          <t-col span="2" push="10">
            <t-button color="primary" @click="getDeviceData">
              可选设备
            </t-button>
          </t-col>
          <t-col span="4" pull="4">关联执行设备：</t-col>
        </t-row>
      </div>
      <t-table :data="aiTaskModalForm.aiTaskDeviceList" line>
        <t-table-column prop="resourceToolCode" label="设备编号" width="100"></t-table-column>
        <t-table-column prop="resourceToolName" label="设备名称" width="100"></t-table-column>
        <t-table-column prop="resourceToolTypeName" label="设备类型" width="100"></t-table-column>
        <t-table-column label="操作" width="100">
          <template v-slot="{row}">
            <a href="javascript:;" style="color:#0089D4;" @click="deleteDeviceData(row)">删除</a>
          </template>
        </t-table-column>
      </t-table>
      <div slot="footer">
        <t-button :loading="loadingSubmit" color="primary" @click="onSubmit">确认</t-button>
        <t-button type="danger" long @click="aiTaskModal = false">关闭</t-button>
      </div>
    </t-modal>
    <t-modal :visibled.sync="aiTaskDeviceModal" :mask-closable="false" title="AI任务" width="800px">
      <t-table :data="deviceData.list" line @selection-change="deviceDataSelectChange">
        <t-table-column type="selection" width="70"></t-table-column>
        <t-table-column prop="resourceToolCode" label="设备编号" width="110"></t-table-column>
        <t-table-column prop="resourceToolName" label="设备名称" width="120"></t-table-column>
        <t-table-column prop="resourceToolTypeName" label="设备类型" width="120"></t-table-column>
      </t-table>
      <div class="table-pager">
        <t-pager :current.sync="deviceData.page" :total="deviceData.total" :page-size="deviceData.limit" :sizer-range="[10,20,50,100]"
                 show-elevator show-sizer @on-size-change="onDeviceSizeChange" @on-change="onDeviceChange">
        </t-pager>
      </div>
      <div slot="footer">
        <t-button color="primary" @click="addAiTaskDevice">确认</t-button>
        <t-button type="danger" long @click="aiTaskDeviceModal = false">关闭</t-button>
      </div>
    </t-modal>
  </div>
</template>
      // 匹配模型列表
      matchingTypeList: [],
      // 任务状态列表
      taskStatusList: [],
      taskStatusList: [
        {
          id: 'RUN',
          description: '执行中'
        },
        {
          id: 'STO',
          description: '已停止'
        }
      ],
      // 任务数据列表
      taskDataList: [],
      // 匹配模型
      // 当前页的数据个数
      limit: 10,
      // 数据总数
      total: 100,
      total: 0,
      // 批量删除的设备id
      deletetaskStatus: [],
      // 当前设备数据
      currentDeviceData: {}
      currentDeviceData: {},
      // 模态框开关
      aiTaskModal: false,
      aiTaskDeviceModal: false,
      // 模态框表单数据
      aiTaskModalForm: {
        aiTaskName: '',
        aiIdenModel: '',
        aiTaskStatus: '',
        // 配置任务模态框列表数据
        aiTaskDeviceList: []
      },
      // 模态框表单数据验证规则
      aiTaskModalFormRules: {
        aiTaskName: [
          { required: true, message: '任务名称不能为空' }
        ],
        aiIdenModel: [
          { required: true, message: '匹配模型不能为空' }
        ]
      },
      // 设备数据
      deviceData: {
        page: 1,
        limit: 10,
        total: 0,
        list: []
      },
      // 设备列表选中的数据
      deviceDataSelectList: [],
      loadingSubmit: false,
      submitType: 1
    }
  },
  created () {
  },
  methods: {
    getAiTaskData() {
      sysapi.getAiTaskList({params: {aiTaskId: 9}}).then(res => {
      var params = {
        params: {
          workOrgId: null,
          nameAsLike: this.taskName,
          aiIdenModel: this.matchingType,
          aiTaskStatus: this.taskStatus,
          pageNumber: this.page,
          pageSize: this.limit
        }
      }
      sysapi.getAiTaskList(params).then(res => {
        this.taskDataList = res.data.data.data
        this.total = res.data.data.total
        console.log(this.taskDataList)
      })
    },
    // 获取任务名称下拉框
    getTaskName() {
      sysapi.getCharSpecList('AI_TASK_STATUS').then(res => {
        this.taskStatusList = res.data
      var params = {
        params: {
          workOrgId: null,
          name: null,
          nameAsLike: null,
          aiIdenModel: null,
          statusList: null,
          pageNumber: 1,
          pageSize: 10000
        }
      }
      sysapi.getAiTaskList(params).then(res => {
        this.taskNameList = res.data.data.data
      })
      // sysapi.getCharSpecList('AI_TASK_STATUS').then(res => {
      //   this.taskStatusList = res.data
      // })
    },
    // 获取匹配模型下拉框
    getmatchingType() {
      sysapi.getAiTaskModelList().then(res => {
        console.log(res)
        this.matchingTypeList = res.data
        this.matchingTypeList = res.data.data
      })
    },
    getTypecellClass (orderTypeName) {
      let typecellClass = ''
      switch (orderTypeName) {
        case '摄像头':
        case '门禁':
          typecellClass = 'tag-cell-executing'
          break
        case '人脸终端':
          typecellClass = 'tag-cell-stoped'
          break
    // 获取设备列表
    getDeviceData () {
      this.aiTaskDeviceModal = true
      let params = {
        pageNumber: this.deviceData.page,
        pageSize: this.deviceData.limit // 每页条数
      }
      return typecellClass
      sysapi.getResourceTool(params).then((resp) => {
        this.deviceData.list = resp.data.data.data || []
        this.deviceData.total = resp.data.data.total
      })
    },
    addAiTask() {
      this.submitType = 1
      this.aiTaskModal = true
      this.aiTaskModalForm = {
        aiTaskName: '',
        aiIdenModel: '',
        aiTaskStatus: '',
        aiTaskDeviceList: []
      }
    },
    updAiTask(row) {
      this.submitType = 2
      this.aiTaskModal = true
      this.aiTaskModalForm = {
        aiTaskName: '',
        aiIdenModel: '',
        aiTaskStatus: '',
        aiTaskDeviceList: []
      }
      var params = {
        params: {aiTaskId: row.aiTaskId}
      }
      sysapi.getAiTaskById(params).then(res => {
        this.aiTaskModalForm = res.data.data
      })
    },
    // getTypecellClass (orderTypeName) {
    //   let typecellClass = ''
    //   switch (orderTypeName) {
    //     case 'RUN':
    //       typecellClass = 'tag-cell tag-cell-success'
    //       break
    //     case 'INI':
    //       typecellClass = 'tag-cell-stoped'
    //       break
    //   }
    //   return typecellClass
    // },
    // 查询数据
    selectHandle () {
      this.page = 1
      this.getDeviceData()
      this.getAiTaskData()
    },
    // 重置查询数据
    resetData () {
      this.taskName = ''
      this.taskStatus = ''
      this.matchingType = ''
      this.getDeviceData()
      this.getAiTaskData()
    },
    // 当前页改变 触发事件
    onChange (page) {
      this.page = page
      this.getDeviceData()
      this.getAiTaskData()
    },
    // 当前页数据总数改变 触发事件
    onSizeChange (pageSize) {
      this.limit = pageSize
      this.getAiTaskData()
    },
    // 当前页改变 触发事件
    onDeviceChange (page) {
      this.deviceData.page = page
      this.getDeviceData()
    },
    // 当前页数据总数改变 触发事件
    onDeviceSizeChange (pageSize) {
      this.deviceData.limit = pageSize
      this.getDeviceData()
    },
    // 删除数据
    deleteDeviceData (row) {
    deleteAiTaskData (row) {
      this.$Confirm.confirm({
        title: '正在准备删除...',
        content: '<p>确定要删除？</p><p>删除后将无法还原！</p>',
        ok: async () => {
          const res = await sysapi.deleteDeviceData({ taskStatus: row.taskStatus })
          const res = await sysapi.deleteAiTaskData([row.aiTaskId])
          if (res.status === 200) {
            this.getDeviceData()
            this.getAiTaskData()
            this.$Message.success('删除成功！')
          } else {
            this.$Message.danger('删除失败！')
        }
      })
    },
    // 修改状态
    changeToRUN (row) {
      if (row.aiTaskStatus === 'RUN') {
        this.$Message.success('任务正在执行！')
      } else {
        this.changeAiTaskStatus(row, 'RUN')
      }
    },
    changeToSTO (row) {
      if (row.aiTaskStatus === 'STO') {
        this.$Message.success('任务已停止！')
      } else {
        this.changeAiTaskStatus(row, 'STO')
      }
    },
    changeAiTaskStatus(row, status) {
      var params = {
        params: {aiTaskId: row.aiTaskId}
      }
      sysapi.getAiTaskById(params).then(res => {
        params = res.data.data
        params.aiTaskStatus = status
        sysapi.createAiTask(params)
          .then((resp) => {
            if (resp.data.success) {
              this.$Message.success('修改状态成功!')
              this.getAiTaskData()
            } else {
              this.$Message.danger(resp.data.fail.message)
            }
          })
          .catch((error) => {
            this.$Message.danger('修改状态失败!')
          })
      })
    },
    // 当复选框发生改变时 触发事件
    selectChange (data) {
      const arr = []
      data.forEach(item => arr.push(item.taskStatus))
      this.deletetaskStatus = arr
      this.deletetaskStatus = data
    },
    // 当设备列表复选框发生改变时 触发事件
    deviceDataSelectChange (data) {
      this.deviceDataSelectList = data
    },
    // 设备列表模态框确认事件
    addAiTaskDevice () {
      this.aiTaskDeviceModal = false
      this.aiTaskModalForm.aiTaskDeviceList = this.aiTaskModalForm.aiTaskDeviceList.concat(this.deviceDataSelectList)
      this.aiTaskModalForm.aiTaskDeviceList = this.unique(this.aiTaskModalForm.aiTaskDeviceList)
      this.deviceDataSelectList = []
    },
    // 数组去重
    unique: function (arr) {
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].resourceToolId == arr[j].resourceToolId) {
            arr.splice(j, 1)
            j--
          }
        }
      }
      return arr
    },
    // 新增任务提交
    onSubmit() {
      this.loadingSubmit = true
      this.$refs['aiTaskModalForm'].validate((valid) => {
        if (valid) {
          var params
          if (this.submitType === 1) {
            params = {
              aiTaskName: this.aiTaskModalForm.aiTaskName,
              aiIdenModel: this.aiTaskModalForm.aiIdenModel,
              aiTaskStatus: 'RUN',
              aiTaskDeviceList: this.aiTaskModalForm.aiTaskDeviceList
            }
          } else {
            params = {
              aiTaskId: this.aiTaskModalForm.aiTaskId,
              aiTaskName: this.aiTaskModalForm.aiTaskName,
              aiIdenModel: this.aiTaskModalForm.aiIdenModel,
              aiTaskStatus: this.aiTaskModalForm.aiTaskStatus,
              aiTaskDeviceList: this.aiTaskModalForm.aiTaskDeviceList
            }
          }
          sysapi.createAiTask(params)
            .then((resp) => {
              if (resp.data.success) {
                this.$Message.success('提交成功')
                this.aiTaskModal = false
                this.getAiTaskData()
              } else {
                this.$Message.danger(resp.data.fail.message)
              }
            })
            .catch((error) => {
              console.log(error)
              this.$Message.danger('提交失败')
            }).finally(() => {
              this.loadingSubmit = false
            })
        } else {
          console.log('error--------->请输入完整的表单信息！')
          this.loadingSubmit = false
        }
      })
    },
    deleteDeviceData(row) {
      var arr = []
      this.aiTaskModalForm.aiTaskDeviceList.forEach(e => {
        if (e.resourceToolId != row.resourceToolId) {
          arr.push(e)
        }
      })
      this.aiTaskModalForm.aiTaskDeviceList = arr
    },
    // 批量删除数据
    multDeleteDeviceData () {
    multdeleteAiTaskData () {
      if (this.deletetaskStatus.length === 0) {
        return this.$Message.warning('请选择要删除的数据！')
      }
      var idList = []
      this.deletetaskStatus.forEach(e => {
        idList.push(e.aiTaskId)
      })
      this.$Confirm.confirm({
        title: '正在准备删除...',
        content: '<p>确定要删除？</p><p>删除后将无法还原！</p>',
        ok: async () => {
          const res = await sysapi.deleteDeviceData({ taskStatus: this.deletetaskStatus })
          const res = await sysapi.deleteAiTaskData(idList)
          if (res.status === 200) {
            this.getDeviceData()
            this.getAiTaskData()
            this.$Message.success('删除成功！')
          } else {
            this.$Message.danger('删除失败！')

security-protection-platform/src/modules/videoSurveillance/distinguishRecord/index.vue

<template>
  <div class="page-main">
    <div class="page-top row-12">
      <div class="col-4">开始时间：<t-date-picker v-model="startDate" style="width:200px" placeholder="请选择开始时间"></t-date-picker>
      <div class="col-4">开始时间：<t-date-picker v-model="startDate" type="dateTime" style="width:200px" placeholder="请选择开始时间"></t-date-picker>
      </div>
      <div class="col-4">结束时间：<t-date-picker v-model="endDate" style="width:200px" placeholder="请选择结束时间"></t-date-picker>
      <div class="col-4">结束时间：<t-date-picker v-model="endDate" type="dateTime" style="width:200px" placeholder="请选择结束时间"></t-date-picker>
      </div>
      <div class="col-4 button-box" align="end">
        <t-button color="primary" @click="getData">查询</t-button>
        <t-button @click="resetData">重置</t-button>
        <t-button @click="initData">重置</t-button>
      </div>
    </div>
    <div class="page-content">
      <div class="distinguish">
        识别图片<img :src="distinguishUrl" class="distinguish-img">
        <b>识别图片</b>
        <div v-if="distinguishUrl !== ''">
          <img :src="distinguishUrl" class="distinguish-img">
        </div>
        <div v-else>
          <t-empty size="lg"></t-empty>
        </div>
      </div>
      <div class="distinguish">
        识别视频<img :src="distinguishUrl" class="distinguish-img">
        <b>识别视频</b>
        <div v-if="distinguishUrl !== ''">
          <div class="distinguish-video">
            <video-player ref="videoPlayer" :playsinline="true" :options="playerOptions" class="video-player vjs-custom-skin"></video-player>
          </div>
        </div>
        <div v-else>
          <t-empty size="lg"></t-empty>
        </div>
      </div>
    </div>
    <div class="page-bottom">
      <div>
        识别结果
        <b>识别结果</b>
        <div class="bottom-result">
          <div class="page-top row-12">
            <div class="result-txt col-6">设备位置：<span style="color:rgba(0, 0, 0, 0.65)">{{ devicePosition }}</span></div>
        </div>
      </div>
      <div class="img-viewer">
        <div v-for="(item,index) in dataImg" :key="index" :src="item.url" class="image-carousel">
          <img :src="item.url" class="img-viewer-size">
          <span>{{ item.date }}</span>
        <div v-for="(item,index) in dataImg" :key="index" :src="item.idenPictureUrl" class="image-carousel">
          <img :src="'http://10.19.90.34:19000/ai-image/'+item.idenPictureUrl" class="img-viewer-size" @click="getParticularsData(item.aiIdenLogId,index)">
          <span :class="{'fileName' : index === fileNameIndex}" style="width: 132px;margin-right: 14px;text-align:center">{{ item.fileName }}</span>
        </div>
      </div>
    </div>
      captureTIme: '',
      defineResult: '',
      devicePosition: '',
      distinguishUrl: '/static/images/demo.png',
      dataImg: [
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
        },
        {
          url: '/static/images/demo.png'
      distinguishUrl: '',
      dataImg: [],
      fileNameIndex: 0,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '13:10', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        // 是否流体自适应容器宽高
        fluid: false,
        // // 设置视频播放器的显示宽度（以像素为单位）
        // width: '500px',
        // // 设置视频播放器的显示高度（以像素为单位）
        height: 380,
        sources: [{
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: '' // url地址
        }],
        notSupportedMessage: '暂无视频可播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          // durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮,
          pictureInPictureToggle: false
        }
      ]
      }
    }
  },
  mounted() {
    this.videoId = this.$route.query.videoId
    this.getData()
    this.initData()
  },
  methods: {
    // 获取识别记录查询数据
    initData() {
      var date = new Date()
      this.endDate = this.formatDateTime(date)
      date.setDate(date.getDate() - 30)
      this.startDate = this.formatDateTime(date)
      this.getData()
    },
    getData() {
      let obj = {
        startDate: this.startDate,
        endDate: this.endDate,
        videoId: this.videoId
      if (this.startDate === ''|| this.endDate === '') {
        this.$Message.danger('请选择时间段')
      }
      var flag = this.startreend(this.startDate, this.endDate)
      if (flag) {
        var data = { params: { beginDay: this.startDate, endDay: this.endDate, id: this.videoId }}
        sysapi.getDistinguishData(data).then(res => {
          console.log(res.data)
          this.dataImg = res.data.data
          if (res.data.data.length > 0) {
            this.getParticularsData(res.data.data[0].aiIdenLogId, 0)
          } else {
            this.devicePosition = ''
            this.defineResult = ''
            this.captureTIme = ''
            this.distinguishUrl = ''
            this.playerOptions.sources[0].src = ''
            this.$Message.warning('所选时间段没有识别记录')
          }
        })
      } else {
        this.$Message.danger('开始时间不能在结束时间的后面')
      }
      sysapi.getDistinguishData({params: obj}).then(res => {
    },
    // 字符串更改为时间类型
    stringtodate (date) {
      date = date.substring(0, 19)
      date = date.replace(/-/g, '/')
      var timestamp = new Date(date).getTime()
      return timestamp
    },
    // 验证开始时间·和结束时间
    startreend (startdate, enddate) {
      startdate = this.stringtodate(startdate)
      enddate = this.stringtodate(enddate)
      if (startdate > enddate) {
        return false
      } else {
        return true
      }
    },
    getParticularsData(aiIdenLogId, index) {
      this.fileNameIndex = index
      sysapi.queryOneAiIdenLog(aiIdenLogId).then(res => {
        console.log(res.data)
        this.devicePosition = res.data.devicePosition
        this.defineResult = res.data.defineResult
        this.captureTIme = res.data.captureTIme
        this.devicePosition = res.data.data.alarmInfo.monitorSceneName
        this.defineResult = res.data.data.alarmInfo.alarmMemo
        this.captureTIme = res.data.data.pictureInfo.fileDateTimeStr
        this.distinguishUrl = res.data.data.pictureInfo.fileUrl
        this.playerOptions.sources[0].src = res.data.data.videoInfo.videoFileUrl
      })
    },
    // 重置数据
    resetData() {
      this.startDate = ''
      this.endDate = ''
    },
    formatDateTime (date) {
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? ('0' + m) : m
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours()
      h = h < 10 ? ('0' + h) : h
      let minute = date.getMinutes()
      minute = minute < 10 ? ('0' + minute) : minute
      let second = date.getSeconds()
      second = second < 10 ? ('0' + second) : second
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
    }
  }
}
                height: 380px;
                width: 100%;;
            }
            .distinguish-video{
                border-radius: 4px;
                margin-top: 10px;
                height: 380px;
                width: 500px;;
            }
        }
    }
    .page-bottom{
            margin-top: 24px;
            display: flex;
            .image-carousel{
                display: flex;
                flex-direction: column;
                .img-viewer-size{
              display: flex;
              flex-direction: column;
              .img-viewer-size{
                cursor:pointer;
                width: 132px;
                height: 88px;
                margin-right: 14px;
            }
              }
            }
        }
    }
}
.fileName{
  color: #009bf3;
}
</style>