[FE]修改监控布局，视频回放，考勤报表一系列bug

security-protection-platform/src/modules/aialarm/index.vue

@@ -240,7 +240,7 @@ export default {
      loading: false,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
@@ -254,7 +254,7 @@ export default {
        // // 设置视频播放器的显示高度（以像素为单位）
        // height: '300px',
        sources: [{
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          type: 'application/x-mpegURL', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: '' // url地址
        }],
@@ -290,14 +290,7 @@ export default {
        console.log(res.data.data)
        this.alarmDetailData = res.data.data.alarmInfo
        this.pictureDetailData = res.data.data.pictureInfo
        this.videoDetailData = res.data.data.videoInfo
        if (this.videoDetailData) {
          // console.log(2222222222222)
          this.playerOptions.sources[0].src = this.videoDetailData.videoFileUrl
        } else {
          this.playerOptions.sources[0].src = ''
        }
        this.playerOptions.sources[0].src = res.data.data.videoInfo || ''
        // console.log(this.playerOptions.sources[0].src)
      } else { this.$Message.danger('处理失败') }

security-protection-platform/src/modules/attendance/components/AttendanceDialog/index.vue

@@ -3,7 +3,7 @@
    <t-loading v-model="loading" />
    <div class="modal-head">
      <div class="modal-head-left">
        <img class="modal-img" src="@/assets/images/avatar.png">
        <img :src="data.pictureUrl||defaultAvatar" class="modal-img">
        <div class="modal-detail">
          <span class="head-name-txt">{{ data.name }}</span>
          <span class="modal-head-txt">{{ data.org }}{{ data.dep }}</span>
@@ -36,6 +36,7 @@
</template>
<script>
import defaultAvatar from '@/assets/images/avatar.png'
import AttrndanceCalendar from '../AttendanceCalendar'
import formatDateTime from '@/utils/formatDateTime.js'
export default {
@@ -58,7 +59,7 @@ export default {
  },
  data () {
    return {
      defaultAvatar
    }
  },
  computed: {

security-protection-platform/src/modules/system/monitor/HomePageSettings/Card.vue

@@ -48,7 +48,7 @@ export default {
      require: true
    }
  },
  data() {
  data () {
    return {
      showConfirm: false,
      loadingDelete: false
@@ -64,31 +64,31 @@ export default {
      return this.itemWidth * 0.9 - 20 - 6 - 32 + 'px'
    },
    name: function () {
      return this.data.resourceToolName
      return this.data.place || 123
    }
  },
  mounted() {
  mounted () {
    //  console.log(this.$picurl.defaults.baseURL)
  },
  methods: {
    handleChangeName: function (name) {
      // 修改名称
      if (this.data.resourceToolName !== name) {
        this.data.resourceToolName = name
      if (this.data.place !== name) {
        this.data.place = name
        this.$emit('nameChange', this.data)
      }
    },
    handleDelete() {
    handleDelete () {
      this.showConfirm = true
    },
    handleConfirmDelete() {
    handleConfirmDelete () {
      // 把事件抛出去，保持控件的干净
      this.$emit('deleted', this.data)
    },
    handleEdit() {
    handleEdit () {
      this.$emit('edit', this.data)
    },
    handleCancelDelete() {
    handleCancelDelete () {
      this.showConfirm = false
    }
  }
@@ -96,96 +96,96 @@ export default {
</script>
<style lang="scss">
  @import "@/assets/styles/aid-theme/_variable.scss";
@import "@/assets/styles/aid-theme/_variable.scss";
  .div-block {
    display: inline-block;
    .opt {
.div-block {
  display: inline-block;
  .opt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .move {
      color: rgb(255, 255, 255);
      position: absolute;
      top: 12px;
      text-align: center;
    }
    &::before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    .move{
      color: rgb(255, 255, 255);
      position: absolute;
      top: 12px;
      text-align: center;
      background-color: #00000038;
      border-radius: 4px;
      opacity: 0.8;
    }
      &::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #00000038;
        border-radius: 4px;
        opacity: 0.8;
      }
      &::after {
        content: "";
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        border-radius: 4px;
        opacity: 0;
      }
      &>.btn {
        color: rgba(255, 255, 255, 0.65);
        border-color: rgba(0, 0, 0, 0);
        background-color: rgba(0, 0, 0, 0);
    &::after {
      content: "";
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: black;
      border-radius: 4px;
      opacity: 0;
    }
        &:hover {
          color: white;
          background-color: $brand-primary;
        }
      }
    & > .btn {
      color: rgba(255, 255, 255, 0.65);
      border-color: rgba(0, 0, 0, 0);
      background-color: rgba(0, 0, 0, 0);
      &:hover {
        opacity: 1;
        color: white;
        background-color: $brand-primary;
      }
    }
    &.active &__opt {
    &:hover {
      opacity: 1;
    }
  }
    &.lock &__opt::after {
      display: block;
    }
  &.active &__opt {
    opacity: 1;
  }
    .popover {
      width: 213px;
      background-color: white;
      color: rgba(0, 0, 0, 0.65);
      position: absolute;
      bottom: 12px;
      left: 12px;
      padding: 16px 20px;
      border-radius: 4px;
    }
  &.lock &__opt::after {
    display: block;
  }
    .btn-block {
      display: flex;
      flex-direction: row-reverse;
      margin-top: 14px;
    }
  .popover {
    width: 213px;
    background-color: white;
    color: rgba(0, 0, 0, 0.65);
    position: absolute;
    bottom: 12px;
    left: 12px;
    padding: 16px 20px;
    border-radius: 4px;
  }
  .div-footer {
    height: 32px;
    margin-top: 6px;
  .btn-block {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 14px;
  }
}
.div-footer {
  height: 32px;
  margin-top: 6px;
}
</style>

security-protection-platform/src/modules/system/monitor/HomePageSettings/ShiftCameraDialog.vue

@@ -1,39 +1,15 @@
<template>
  <t-modal
    :visibled.sync="visibled"
    :title="title"
    :mask-closable="false"
    :ok="handleSubmit"
    width="780px"
    height="590px"
  >
  <t-modal :visibled.sync="visibled" :title="title" :mask-closable="false" :ok="handleSubmit" width="780px" height="590px">
    <div>
      <div style="display: flex">
        <span style="margin-top: 5px">{{ monitorSceneTypeName }}名称:</span>
        <t-input
          v-model="searchValue"
          placeholder="名称..."
          style="width: 300px; margin: 0px 10px"
          icon="search-outline"
          icon-placement="right"
        ></t-input>
        <t-input v-model="searchValue" placeholder="名称..." style="width: 300px; margin: 0px 10px" icon="search-outline" icon-placement="right"></t-input>
        <t-button color="primary">搜索</t-button>
      </div>
      <div
        v-for="item in cameraList"
        :key="item.resourceToolId"
        :data="item"
        class="masonry__item div-float"
        @click="groupClick(item)"
      >
      <div v-for="item in cameraList" :key="item.resourceToolId" :data="item" class="masonry__item div-float" @click="groupClick(item)">
        <div class="card-has-shadowed" style="width: 158px">
          <div>
            <img
              :class="item.resourceToolId == form.resourceToolId ? 'hover' : ''"
              :src="item.imageUrl"
              style="height: 120px; width: 158px"
              alt=""
            />
            <img :class="item.resourceToolId == form.resourceToolId ? 'hover' : ''" :src="item.imageUrl" style="height: 120px; width: 158px" alt="" />
          </div>
        </div>
        <div class="div-footer" style="width: 158px">
@@ -43,13 +19,7 @@
        </div>
      </div>
      <div class="table-pager">
        <t-pager
          :current.sync="page"
          :total="total"
          :page-size="limit"
          show-elevator
          @on-change="onChange"
        >>
        <t-pager :current.sync="page" :total="total" :page-size="limit" show-elevator @on-change="onChange">>
        </t-pager>
      </div>
    </div>
@@ -64,7 +34,7 @@ export default {
  props: {
    data: {
      type: Object,
      default() {
      default () {
        return {}
      }
    },
@@ -77,7 +47,7 @@ export default {
      require: true
    }
  },
  data() {
  data () {
    return {
      visibled: false,
      form: {},
@@ -105,23 +75,23 @@ export default {
    }
  },
  computed: {
    title() {
    title () {
      return this.data.monitorSceneTerminalRelId == null ? '新增' + this.monitorSceneTypeName : '更换' + this.monitorSceneTypeName
    }
  },
  watch: {
    data(val) {
    data (val) {
      // 侦听data属性
      this.form = this.data
      this.visibled = true
      this.getCameras(0)
    }
  },
  mounted() {
  mounted () {
    // this.getCameras(0)
  },
  methods: {
    getCameras(page) {
    getCameras (page) {
      let params = {
        pageNumber: page,
        pageSize: this.limit, // 每页条数
@@ -136,24 +106,24 @@ export default {
        this.total = resp.data.data.total
      })
    },
    async getListFileUrl(res, data) {
    async getListFileUrl (res, data) {
      const resp = await sysapi.getListFileUrl(data)
      res.filter((item, index) => {
        item.imageUrl = resp.data.data[index]
      })
      this.cameraList = res
    },
    groupClick(item) {
    groupClick (item) {
      // 选中更换摄像头
      this.form.resourceToolName = item.resourceToolName
      this.form.resourceToolId = item.resourceToolId
      this.form.pictureUrl = item.pictureUrl
    },
    handleSubmit() {
    handleSubmit () {
      this.$emit('submit', this.form)
      this.visibled = false
    },
    onChange(page) {
    onChange (page) {
      this.page = page
      this.getCameras(page)
    }
@@ -171,10 +141,10 @@ export default {
}
.card-has-shadowed {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  cursor:pointer
  cursor: pointer;
}
.table-pager {
  clear:both;
  clear: both;
  display: flex;
  align-items: center;
  justify-content: flex-end;

security-protection-platform/src/modules/system/monitor/VideoMonitor/index.vue

@@ -5,98 +5,52 @@
        <t-col>
          <div style="float: left">
            <span>风场： </span>
            <t-select
              v-model="currentWindPlaceValue"
              style="width: 200px; height: 32px"
              @change="WindPlaceChenged"
            >
              <t-option
                v-for="item in departmentList"
                :key="item.id"
                :value="item.id"
              >{{ item.name }}</t-option
              >
            <t-select v-model="currentWindPlaceValue" style="width: 200px; height: 32px" @change="WindPlaceChenged">
              <t-option v-for="item in departmentList" :key="item.id" :value="item.id">{{ item.name }}</t-option>
            </t-select>
          </div>
        </t-col>
        <t-col span="8">
          <div>
            <t-button-group style="float: right">
              <t-button
                v-for="item in monitorSceneList"
                :key="item.monitorSceneId"
                :class="[
                  'base',
                  item.monitorSceneId == currenScene.monitorSceneId
                    ? 'active'
                    : '',
                ]"
                style="
              <t-button v-for="item in monitorSceneList" :key="item.monitorSceneId" :class="[
                'base',
                item.monitorSceneId == currenScene.monitorSceneId
                  ? 'active'
                  : '',
              ]" style="
                  display: inline-block;
                  -moz-appearance: button;
                  -webkit-appearance: button;
                  appearance: button;
                "
                @click="handleSceneOnClick(item)"
              >
                " @click="handleSceneOnClick(item)">
                <div>
                  {{ item.monitorSceneName }}
                  <div class="div_edit" @click.stop="handleSceneEdit(item)">
                    <t-icon
                      v-if="item.monitorSceneId == currenScene.monitorSceneId"
                      icon="edit"
                      shape="circle"
                      class="ico"
                    ></t-icon>
                    <t-icon v-if="item.monitorSceneId == currenScene.monitorSceneId" icon="edit" shape="circle" class="ico"></t-icon>
                  </div>
                </div>
              </t-button>
              <t-button
                style="48px"
                icon="plus-outline"
                @click="btnAddClick()"
              ></t-button>
              <t-button style="48px" icon="plus-outline" @click="btnAddClick()"></t-button>
            </t-button-group>
          </div>
        </t-col>
      </t-row>
      <t-row>
        <t-col style="margin-top: 10px">
          <t-button color="info" icon="plus-circle" @click="handleCreate"
          >新增监控</t-button
          >
          <t-button color="info" icon="plus-circle" @click="handleCreate">新增监控</t-button>
        </t-col>
      </t-row>
      <!--header-->
    </div>
    <div style="min-height: 280px; height: auto !important">
      <draggable-grid
        v-model="areaMonitorList"
        :show-page="true"
        :grid="currenScene.monitorViewLayout!=null?currenScene.monitorViewLayout.split('X'):[4,1]"
        key-word="monitorSceneTerminalRelId"
        @update="datadragEnd"
      >
      <draggable-grid v-model="areaMonitorList" :show-page="true" :grid="currenScene.monitorViewLayout!=null?currenScene.monitorViewLayout.split('X'):[4,1]" key-word="monitorSceneTerminalRelId" @update="datadragEnd">
        <template v-slot="{ scope }">
          <view-card
            :data="scope.data"
            :width="scope.width + 'px'"
            :height="scope.height + 'px'"
            :monitor-scene-type-name="currenScene.monitorSceneTypeName"
            @nameChange="handleCameraSubmit"
            @edit="handleEdit"
            @deleted="handleDeleted"
          />
          <view-card :data="scope.data" :width="scope.width + 'px'" :height="scope.height + 'px'" :monitor-scene-type-name="currenScene.monitorSceneTypeName" @nameChange="handleCameraSubmit" @edit="handleEdit" @deleted="handleDeleted" />
        </template>
      </draggable-grid>
      <shift-scene-dialog
        :data="dialogSceneData"
        @submit="handlesceneSubmit"
        @deleted="handlesceneDelete"
      />
      <shift-camera-dialog :data="dialogData" :monitor-scene-type-name="currenScene.monitorSceneTypeName"
                           :monitor-scene-type-id="currenScene.monitorSceneType"
                           @submit="handleCameraSubmit"/>
      <shift-scene-dialog :data="dialogSceneData" @submit="handlesceneSubmit" @deleted="handlesceneDelete" />
      <shift-camera-dialog :data="dialogData" :monitor-scene-type-name="currenScene.monitorSceneTypeName" :monitor-scene-type-id="currenScene.monitorSceneType" @submit="handleCameraSubmit" />
    </div>
  </div>
</template>
@@ -121,13 +75,13 @@ export default {
    ViewCard,
    CreateCard
  },
  create() {
  create () {
    document.body.ondrop = function (event) {
      event.preventDefault()
      event.stopPropagation()
    }
  },
  data() {
  data () {
    return {
      // 选中的组织机构ID
      currentWindPlaceValue: '2',
@@ -189,14 +143,14 @@ export default {
      return tempDataList
    }
  },
  mounted() {
  mounted () {
    let dom = this.$refs.box
    this.itemWidth = dom.clientWidth / this.currentType - 25
    this.getDepartments()
  },
  methods: {
    //  获取组织
    getDepartments() {
    getDepartments () {
      sysapi.getDepartments().then((resp) => {
        this.departmentList = resp.data.data || []
        if (this.departmentList.length > 0) {
@@ -206,7 +160,7 @@ export default {
      })
    },
    // 获取监控场景
    getMonitorScene(orgId) {
    getMonitorScene (orgId) {
      sysapi.getMonitorScene(orgId).then((resp) => {
        this.monitorSceneList = resp.data.data || []
        if (this.monitorSceneList.length > 0) {
@@ -216,26 +170,26 @@ export default {
      })
    },
    // 场景ID查询该场景下所有监控终端列表
    geTerminalRel(monitorScene) {
    geTerminalRel (monitorScene) {
      sysapi.getTerminalRel(monitorScene.monitorSceneId).then((resp) => {
        this.areaMonitorList = resp.data.data || []
      })
    },
    WindPlaceChenged(cloneValue) {
    WindPlaceChenged (cloneValue) {
      this.getMonitorScene(cloneValue)
    },
    handleSceneOnClick(item) {
    handleSceneOnClick (item) {
      if (this.currenScene !== item) {
        this.currenScene = item
        this.geTerminalRel(this.currenScene)
      }
    },
    // 场景
    handleSceneEdit(item) {
    handleSceneEdit (item) {
      this.dialogSceneData = this.currenScene
      // event.stopPropagation()
    },
    btnAddClick() {
    btnAddClick () {
      this.dialogSceneData = {
        monitorSceneId: null, // 场景ID(新增时为空，修改时必填)
        monitorSceneName: null, // 场景名称(必填)
@@ -244,7 +198,7 @@ export default {
        monitorSceneCode: '' // 场景CODE(暂时为空)
      }
    },
    handlesceneDelete(item) {
    handlesceneDelete (item) {
      sysapi.deleteMonitorScene(item)
        .then((resp) => {
          this.$Message.danger('删除成功')
@@ -255,12 +209,12 @@ export default {
          this.getMonitorScene(this.currentWindPlaceValue)
        })
    },
    handlesceneSubmit(data) {
    handlesceneSubmit (data) {
      if (data.monitorSceneId != null) {
        const target = this.monitorSceneList.find(
          (item) =>
            item.monitorSceneId ===
          data.monitorSceneId
            data.monitorSceneId
        )
        Object.assign(target, data)
        sysapi
@@ -295,11 +249,14 @@ export default {
      }
    },
    // 监控
    handleEdit(item) {
    handleEdit (item) {
      this.dialogData = Object.assign({}, item)
      console.log(item.title)
    },
    handleCreate() {
    handleCreate () {
      if (this.monitorSceneList.length === 0) {
        return this.$Message.danger('请先新增场景！')
      }
      this.dialogData = {
        customProperties: {},
        validDate: null,
@@ -327,7 +284,7 @@ export default {
        effectType: 'OUT'
      }
    },
    handleDeleted(data) {
    handleDeleted (data) {
      sysapi.deleteTerminalRel(data)
        .then((resp) => {
        }).catch((error) => {
@@ -337,17 +294,17 @@ export default {
          this.geTerminalRel(this.currenScene)
        })
    },
    datadragEnd(evt) {
    datadragEnd (evt) {
      if (evt.oldIndex !== evt.newIndex) {
        let params = {
          params:{
          params: {
            monitorSceneTerminalRelId: this.areaMonitorList[evt.oldIndex].monitorSceneTerminalRelId, // 场景与终端关联ID
            monitorSceneId: this.currenScene.monitorSceneId, // 场景ID
            resourceToolId: this.areaMonitorList[evt.oldIndex].resourceToolId, // 终端ID
            resourceToolIndex: this.areaMonitorList[evt.newIndex].resourceToolIndex // 移动位置序号
          }
        }
        sysapi.moveTerminalRelIndex(params).then((resp) => {})
        sysapi.moveTerminalRelIndex(params).then((resp) => { })
          .catch((error) => {
            console.log(error)
            this.$Message.danger('修改位置失败')
@@ -356,12 +313,12 @@ export default {
          })
      }
    },
    handleCameraSubmit(data) {
    handleCameraSubmit (data) {
      if (data.monitorSceneTerminalRelId != null) {
        const target = this.areaMonitorList.find(
          (item) =>
            item.monitorSceneTerminalRelId ===
          data.monitorSceneTerminalRelId
            data.monitorSceneTerminalRelId
        )
        Object.assign(target, data)
        sysapi